/*!
    * Bootstrap Grid v5.1.0 (https://getbootstrap.com/)
    * Copyright 2011-2021 The Bootstrap Authors
    * Copyright 2011-2021 Twitter, Inc.
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    * Edited by ohitsdylan (https://github.com/ohitsdylan)
 */
.container {
  --bs-gutter-x: 5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

.row {
  --bs-gutter-x: 5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

@media (max-width: 768px) {
  .container, .row {
    --bs-gutter-x: 2.5rem;
  }
}
.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-05 {
  flex: 0 0 auto;
  width: 4.166666665%;
}

.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.d-none {
  display: none !important;
}

@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-05 {
    flex: 0 0 auto;
    width: 4.166666665%;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-05 {
    flex: 0 0 auto;
    width: 4.166666665%;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .d-md-none {
    display: none !important;
  }
  .d-md-block {
    display: block !important;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-05 {
    flex: 0 0 auto;
    width: 4.166666665%;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

:root {
  /* ================================
      #BRAND-COLORS
  ================================ */
  /* Raisin Black */
  --raisin-100: #0c0c11;
  --raisin-200: #111319;
  --raisin-300: #171922;
  --raisin-400: #1d1f2a;
  --raisin-500: #4a4c55;
  --raisin-600: #77797f;
  --raisin-700: #a5a5aa;
  --raisin-800: #d2d2d4;
  /* Platinum */
  --platinum-100: #5e5e5e;
  --platinum-200: #8d8d8c;
  --platinum-300: #bcbcbb;
  --platinum-400: #ebebea;
  --platinum-500: #efefee;
  --platinum-600: #f3f3f2;
  --platinum-700: #f7f7f7;
  --platinum-800: #fbfbfb;
  /* Space Cadet */
  --space-cadet-300: #0d1d35;
  --space-cadet-400: #111111;
  --space-cadet-500: #5a6981;
  /* Yale Blue */
  --yale-300: #143766;
  --yale-400: #006DFF;
  --yale-500: #006DFF;
  /* Saffron */
  --saffron-300: #a66d24;
  --saffron-400: #58C6BB;
  --saffron-500: #58C6BB;
  /* Jungle */
  --jungle-300: #35745e;
  --jungle-400: #4ca686;
  --jungle-500: #82c1aa;
  /* Very Peri */
  --peri-300: #474878;
  --peri-400: #6667ab;
  --peri-500: #9495c4;
  /* Crimson */
  --crimson-300: #951b2b;
  --crimson-400: #E2607F;
  --crimson-500: #e26777;
  /* ================================
      #TYPOGRAPHY
  ================================ */
  --font-heading: normal normal 300 1.75rem "Roboto", Arial, sans-serif;
  --font-subheading: normal normal 700 1rem "Roboto", Arial, sans-serif;
  --font-subheading--large: normal normal 700 1.75rem "Roboto", Arial, sans-serif;
  --font-body--large: normal normal 400 1rem "Roboto", Arial, sans-serif;
  --font-body: normal normal 400 0.75rem/1.5 "Roboto", Arial, sans-serif;
  --font-body--emphasis: italic normal 400 0.75rem/1.5 "Roboto", Arial, sans-serif;
  /* ================================
      #OTHER-VARIABLES
  ================================ */
  --border-radius--sm: 2px;
  --border-radius--md: 4px;
  --border-radius--lg: 8px;
  --border-radius--xl: 24px;
  --shadow-outset: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-inset: 0px 4px 12px -4px rgba(0, 0, 0, 0.1) inset;
  --transition-time: 0.2s;
}

/* Set manifest variables here so SCSS plays nicely with the Zendesk asset reference */
/* ================================
    #Override-Styles
================================ */
* {
  box-sizing: border-box;
}

body {
  font: var(--font-body);
}

p {
  margin-bottom: 1rem;
}

h1 {
  margin-top: 0;
  font-size: 2rem;
  font-weight: 700;
}

h2, h3, h4, h5, h6 {
  font-weight: 400;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

h4, h5, h6 {
  font-size: 1rem;
}

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

.ul--default {
  padding-left: 2rem;
  list-style: circle;
}

li {
  padding: 8px 0;
}

a {
  text-decoration: none;
  transition: var(--transition-time);
}

a:hover {
  text-decoration: none !important;
  transition: var(--transition-time);
  cursor: pointer;
}

button {
  margin: 0;
  padding: 0;
  color: inherit;
  background-color: transparent;
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  text-transform: none;
  border: none;
  cursor: pointer;
}

button:hover {
  transition: var(--transition-time);
}

label {
  align-self: center;
}

select {
  min-height: 37px;
  border: 2px solid var(--gray-500);
  border-radius: var(--border-radius);
}

textarea:focus, input:focus, select:focus {
  outline: 1px solid #22212d;
}

details {
  margin-bottom: 1rem;
}

/*
    * Extend summary in _footer.scss
*/
summary {
  padding: 1rem 0;
}

summary:hover {
  cursor: pointer;
}

details[open] {
  padding-bottom: 1rem;
}

@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 auto;
    width: calc(50% - 0.75rem);
  }
}
@media (min-width: 992px) {
  .col-lg-3 {
    flex: 0 0 auto;
    width: calc(25% - 1.125rem);
  }
}
/*
    * When a customer submits a ticket via their email client, remove the inline styles.
    * TODO: These are the only one's I've seen so far. Check to see what other clients do.
*/
.zd-comment-pre-styled * {
  margin: inherit !important;
  color: inherit !important;
  background-color: inherit !important;
  font-size: inherit !important;
}

/*
    * These styles change the "CC" input field for new and existing requests
*/
#request_comment_body, #request_description {
  width: 100%;
}

ul[data-hc-pills-container] li:last-child input {
  height: 1.85rem;
}

ul[data-hc-pills-container] li[data-hc-pill=true][aria-invalid=true] {
  padding: initial;
  border: 1px solid var(--red-200);
}

.request-page__add-cc li,
.request_cc_emails li {
  padding: initial;
}

/*
    * These styles override the default Zendesk TinyMCE article builder styles.
    * Colors are replaced with brand colors and font sizes are adjusted to fit the rest of the site.
*/
/*
    * 4.0.1
    * Fix authors setting the black color to override link styles and text disappearing in dark mode
*/
.wysiwyg-color-black,
.wysiwyg-color-black70,
.wysiwyg-color-black60,
.wysiwyg-color-black50,
.wysiwyg-color-black40,
.wysiwyg-color-black30,
.wysiwyg-color-black20,
.wysiwyg-color-black10 {
  color: inherit;
}

.wysiwyg-color-blue,
.wysiwyg-color-blue70,
.wysiwyg-color-blue80,
.wysiwyg-color-blue90,
.wysiwyg-color-blue110,
.wysiwyg-color-blue120,
.wysiwyg-color-blue130 {
  color: var(--yale-400);
}

.wysiwyg-color-red,
.wysiwyg-color-red70,
.wysiwyg-color-red80,
.wysiwyg-color-red90,
.wysiwyg-color-red110,
.wysiwyg-color-red120,
.wysiwyg-color-red130 {
  color: var(--crimson-400);
}

.wysiwyg-color-yellow,
.wysiwyg-color-yellow70,
.wysiwyg-color-yellow80,
.wysiwyg-color-yellow90,
.wysiwyg-color-yellow110,
.wysiwyg-color-yellow120,
.wysiwyg-color-yellow130 {
  color: var(--saffron-400);
}

.wysiwyg-color-green,
.wysiwyg-color-green70,
.wysiwyg-color-green80,
.wysiwyg-color-green90,
.wysiwyg-color-green110,
.wysiwyg-color-green120,
.wysiwyg-color-green130 {
  color: var(--jungle-400);
}

.wysiwyg-font-size-x-large {
  font: var(--font-heading);
}

.wysiwyg-font-size-large {
  font: var(--font-subheading);
}

.wysiwyg-font-size-medium,
.wysiwyg-font-size-small {
  font: var(--font-body);
}

/*
    #Flex-Gaps
*/
.padded-content {
  gap: 1.5rem;
  padding: 1.5rem 2.5rem;
}

.padded-content--no-gap {
  padding: 1.5rem 2.5rem;
}

/*
    #Flex-Alignment
*/
.d-flex {
  display: flex;
}

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

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

.center-align-self {
  align-self: center;
}

.right-align {
  justify-content: end;
}

/*
    #Text-Utilities
*/
.text-align--center {
  text-align: center;
}

.text-columns--sm {
  column-count: auto;
  column-width: 20rem;
  column-gap: 5rem;
}

.text-columns--sm li {
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .text-columns--sm {
    column-count: auto;
    column-width: 20rem;
    column-gap: 5rem;
    white-space: nowrap;
  }
}
.text-columns--md {
  column-count: auto;
  column-width: 30rem;
  column-gap: 5rem;
  white-space: nowrap;
}

/*
    #Margin-Utilities
*/
.mt-none {
  margin-top: 0;
}

.mb-none {
  margin-bottom: 0;
}

.mb-sm {
    margin-bottom: 1rem;
}

.mx-lg {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
}

.ms-lg {
  margin-left: 2.5rem;
}

.me-md {
  margin-right: 1.5rem;
}

.me-auto {
  margin-right: auto;
}

/*
    #Padding-Utilities
*/
.p-none {
  padding: 0;
}

.pt-none {
  padding-top: 0;
}

.pt-md {
  padding-top: 1.5rem;
}

.pt-lg {
  padding-top: 2.5rem;
}

.pb-none {
  padding-bottom: 0;
}

.pb-sm {
  padding-bottom: 1rem;
}

.pb-md {
  padding-bottom: 1.5rem;
}

.pb-lg {
  padding-bottom: 2.5rem;
}

.pe-md {
  padding-right: 1.5rem;
}

.px-sm {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-md {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-md:last-of-type {
  padding-right: 0;
}

.py-xs {
  padding-top: 2px;
  padding-bottom: 2px;
}

.py-sm {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-md {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-lg {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.ps-none {
  padding-left: 0;
}

.ps-sm {
  padding-left: 1rem;
}

.ps-md {
  padding-left: 1.5rem;
}

/*
    #Rotation-Animation
*/
.js-rotate-button {
  animation: 0.5s ease-in-out 1 normal rotateButton;
}

@keyframes rotateButton {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/*
  #Pulse-Animation
*/
.animation-pulse {
  outline: 0 solid rgba(102, 103, 171, 0);
  animation: 1.5s ease-in-out 1s 5 normal buttonPulse;
}

@keyframes buttonPulse {

  0% {
    outline: 0 solid rgba(102, 103, 171, 0);
  }

  10% {
    outline: 0 solid rgba(102, 103, 171, 1);
  }

  100% {
    outline: 12px solid rgba(102, 103, 171, 0);
  }

}


.breadcrumbs-container ol {
  list-style: none;
}

.breadcrumbs-container li {
  display: inline-block;
}

.breadcrumbs-container li:not(li:last-of-type)::after {
  content: "/";
  margin: 0 8px;
}

.breadcrumbs {
  margin: 0;
  padding: 0;
  text-transform: capitalize;
}

/*
    * Extend .button {} in styles-light.css & styles-dark.css
*/
.button {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--border-radius--md);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-time);
}

.button:hover {
  transition: var(--transition-time);
}

.button > i {
  position: relative;
  top: 3px;
  font-size: 1rem;
}

.button--xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.button--sm {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

.button--subscribe {
  padding: 0;
}

.button--subscribe > div {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.button--subscribe button {
  width: 100%;
  border-radius: var(--border-radius--md);
}

@media (max-width: 768px) {
  .js-open-menu {
    margin-right: 1.5rem;
  }
}
/*
    * Extend .card {} in styles-light.css, & styles-dark.css
*/
.card {
  display: flex;
  flex-flow: column;
  padding: 0;
  border-radius: var(--border-radius--lg);
  box-shadow: var(--shadow-outset);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  scroll-margin: -1rem;
}

.card__cap {
  padding: 1.5rem;
  border-radius: var(--border-radius--lg) var(--border-radius--lg) 0 0;
  background: linear-gradient(to right,#006DFF, #58C6BB ) !important;
}

.card__cap--rounded {
  border-radius: var(--border-radius--lg);
}

.card__title {
  display: flex;
  font: var(--font-subheading);
}

.card__title > div {
  margin-right: auto;
}

.card__body {
  margin-bottom: auto;
  padding: 1.5rem;
}

.card__body--columns {
  column-count: auto;
  column-width: 30rem;
}

.card__link a {
  display: inline-flex;
  align-items: center;
}

.card__action {
  padding: 1.5rem;
  padding-top: 0;
}

.sub-navigation {
  margin: 16px 0;
  padding: 4px 8px 4px 20px;
  border-radius: var(--border-radius--sm);
  transition: background-color var(--transition-time);
}

.sub-navigation:hover {
  transition: background-color var(--transition-time);
}

.sub-navigation a {
  display: flex;
  align-items: center;
}

.sub-navigation a > div {
  margin-right: auto;
}

/*
    * Add a label to a form element for accessibility concerns, but hide it from the user.
    * Still useable, but no longer disturbs the design/layout.
    * From: https://codepen.io/ambrwlsn90/pen/ExNWPrv
*/
.label--hidden {
  position: absolute !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

/* ================================
    #Brand-Article-Markers
================================ */
.brand-article-marker {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.brand-article-marker--large {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.pagination {
  padding: 1.5rem 0;
}

.pagination > ul > li {
  display: inline-block;
  margin: 0 0.5rem;
}

.pagination > ul > li > a {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border: none;
  border-radius: var(--border-radius--md);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-time);
}

.search {
  width: 100%;
  height: 40px;
  padding: 12px 8px;
  font-family: "Roboto";
  border-radius: var(--border-radius--sm);
}

.search--large {
  height: 80px;
  padding: 32px 48px;
  border-radius: var(--border-radius--md);
}

.search--inline {
  width: auto;
}

.table {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  border-bottom-width: 1px;
}

.table > tbody {
  vertical-align: inherit;
}

.table > thead {
  vertical-align: bottom;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table__sticky-header {
  position: sticky;
  top: 0;
}

.heading {
  font: var(--font-heading);
}

.subheading {
  font: var(--font-subheading);
}

.subheading--large {
  font: var(--font-subheading--large);
}

.font-body {
  font: var(--font-body);
}

.font-body--large {
  font: var(--font-body--large);
}

.font-body--emphasis {
  font: var(--font-body--emphasis);
}

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

/* ================================
    #Header-Area
================================ */
.header {
  height: 128px;
  align-items: center;
}

.site-brand {
  display: flex;
  align-items: center;
}

.site-brand:hover {
  opacity: 0.5;
}

.logo {
  display: inline-block;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.site-title {
  display: inline-block;
  margin: 0;
  padding-left: 12px;
  font: var(--font-heading);
  font-weight: 700;
}

/* ================================
    #Header-Area
================================ */
/*
    Brand Menu
*/
.menu {
  display: none;
  position: absolute;
  right: 5rem;
  width: 400px;
  padding: 1.5rem 0;
  border-radius: 0 0 var(--border-radius--md) var(--border-radius--md);
  box-shadow: var(--shadow-outset);
  overflow: hidden;
  z-index: 3;
}

.menu.is-visible {
  display: block;
}

.list-wrapper ul {
  display: flex;
  flex-wrap: wrap;
}

.menu-item {
  width: 33%;
  padding: 1rem 1.5rem;
  text-align: center;
  cursor: pointer;
}

.menu-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu-item__logo {
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.menu-item img.menu-item__logo {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .menu {
    right: 0;
    width: 100%;
  }
}
.menu-item--user {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-bottom: none !important;
}

.menu-item--user a {
  flex-direction: row;
  justify-content: center;
}

.menu-item--user .menu-item__logo {
  margin: 0.75rem;
}

/*
    Subheading Navigation Link
*/
.subheader {
  min-height: 40px;
}

.subheader-items {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.subheader-items li {
  display: inline;
  padding-left: 1.5rem;
  line-height: 24px;
}

.subheader-items li a {
  display: flex;
  align-items: center;
}

.subheader-items li i {
  padding: 0 0.125rem;
}

@media (max-width: 576px) {
  ul.subheader-items {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  .header {
    height: 96px;
  }
  .logo {
    width: 64px;
    height: 64px;
  }
  .site-title {
    font-size: 1.25rem;
  }
  .subheader-items li {
    padding: 0 0.5rem;
  }
  .subheader-items li i {
    display: none;
  }
}
/* ================================
    #Banner-Area
================================ */
.banner {
  position: absolute;
  justify-content: center;
  width: 100%;
  transition: var(--transition-time);
}

.banner__content {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 24px 48px;
  color: var(--platinum-800);
  background-color: var(--yale-400);
  border-radius: 0 0 var(--border-radius--xl) var(--border-radius--xl);
  box-shadow: var(--shadow-outset);
}

.banner__content:hover {
  background-color: var(--platinum-600);
}

.banner a {
  transition: var(--transition-time);
}

.banner a:hover {
  transition: var(--transition-time);
}

.banner__content i {
  align-self: center;
  padding-right: 12px;
  font-size: 1.5rem;
}

.banner__content div {
  line-height: 26px;
}

@media (max-width: 768px) {
  .banner__content {
    border-radius: 0;
  }
}
/* ================================
    #Hero-Area
================================ */
.hero {
  align-items: center;
  justify-content: center;
  height: 65vh;
  background: linear-gradient(rgba(57, 57, 57, 0.90), rgba(57, 57, 57, 0.90)), url("/hc/theming_assets/01HZPF16F5YGEHXQ9T6N4FEKRZ") center center/cover no-repeat fixed;
}

@media (max-width: 768px) {
  .hero {
    height: calc(100vh - 136px);
  }
}
.indicator-arrow {
  position: absolute;
  align-self: flex-end;
  padding-bottom: 3rem;
  color: var(--platinum-800);
  font-size: 4rem;
  text-align: center;
}

/* ================================
    #Quick-Actions
================================ */
.scrolling-content {
  align-items: stretch;
  justify-content: center;
  flex-flow: row nowrap;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
}

.canteen-branded {
  display: none;
}

/* ================================
    #Common-Questions
================================ */
.question-block {
  display: none;
  flex-flow: row nowrap;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  -webkit-overflow-scrolling: touch;
}

.question-block--active {
  display: flex;
}

/* ================================
    #New-Articles-Feed
================================ */
.new-article-item {
  padding-bottom: 1rem;
}

.new-article-item div {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--platinum-400);
}

.article-sidebar {
  position: sticky;
  top: 1rem;
  min-width: 10rem;
  max-height: 100vh;
  margin-left: 1rem;
  padding: 2rem;
  border-radius: var(--border-radius);
  overflow-y: scroll;
  scrollbar-width: none;
  transition: width var(--transition-time);
}

.article-sidebar .table-of-contents {
  padding-bottom: 1rem;
  list-style: initial;
}

.article-sidebar .table-of-contents ul {
  padding-left: 2rem;
}

.article-sidebar .table-of-contents li {
  border-bottom: 1px solid var(--platinum-500);
}

.article-sidebar .table-of-contents li:last-child {
  margin-bottom: 2rem;
  border-bottom: none;
}

.article-sidebar__toplevel {
  list-style-type: disc;
}

.article-sidebar__sublevel-one {
  margin-left: 24px;
  list-style-type: circle;
}

.article-sidebar__sublevel-two {
  margin-left: 48px;
  list-style-type: square;
}

.article-sidebar__sublevel-three {
  margin-left: 72px;
}

.article-sidebar__sublevel-three:before {
  font-family: "Phosphor";
  font-size: 0.55rem;
  content: "\ed1c";
}

.js-scroll-top {
  display: block;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .article-sidebar {
    position: static;
    width: 100%;
    max-height: initial;
    padding: 2rem;
    margin-left: initial;
    border: none !important;
    overflow-y: scroll;
  }
  .js-scroll-top {
    display: none;
  }
}
.article-heading {
  display: flex;
  align-content: center;
  margin-bottom: 0.5rem;
}

.article-inner {
  max-width: 1160px;
  padding: 0 40px;
  padding-bottom: 24px;
}

.article-inner a {
  text-decoration: underline;
}

.article-inner img {
  max-width: 100%;
}

.article-inner ul {
  list-style: disc;
  padding-left: 24px;
}

.article-inner ul ul {
  list-style: circle;
}

.article-inner ul ul ul {
  list-style: square;
}

.article-inner ul ul ul ul {
  list-style: none;
}

.article-inner li {
  padding: 4px 0;
}

.article-inner p {
  line-height: 1.5rem;
}

.article-inner ul details {
  margin-bottom: 0;
}

.article-inner ul summary {
  padding: 0;
}

.article-inner ul details[open] > summary {
  padding-bottom: 0.5rem;
}

.check {
  display: inline-block;
  color: var(--jungle-400);
  font-size: 1.25rem;
  vertical-align: middle;
}

.h1 {
  margin-top: 0;
  font-size: 2rem;
}

.h2 {
  font-size: 1.5rem;
}

.h3 {
  font-size: 1.25rem;
}

.h4, .h5 {
  font-size: 1rem;
}

.fancybox:hover,
.fancybox-gallery:hover {
  cursor: pointer;
}

/*
    * This SCSS file houses the styles for all three "requests" templates:
    * (new_request_page, request_page, and requests_page)
*/
/*
    * #Requests-List
*/
.requests-filter div > button {
  display: inline-block;
  padding: 0.5rem;
  border: none;
  border-radius: var(--border-radius--md);
  box-shadow: var(--shadow-outset);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-time);
}

.requests-filter div > button:hover {
  transition: var(--transition-time);
}

/*
    * #Current/Open-Requests
*/
.request-container input.button:disabled:hover {
  cursor: not-allowed;
}

/* This is the checkbox for the "Mark As Solved" button */
#mark_as_solved {
  visibility: hidden;
}

/* This is the "Mark As Solved" button */
.mark-as-solved {
  display: inline-block;
  min-height: 40px;
}

#request_organization_id {
  min-height: 1.25rem;
}

/*
    * #New-Requests
*/
#new_request > div {
  padding-bottom: 1rem;
}

.request_subject > input {
  width: 100%;
  min-height: 37px;
}

/*
    * Style the custom Zendesk dropdown menus
*/
/* This one is the "selected" option */
.nesty-input {
  min-height: 37px;
  line-height: 37px;
}

/* This is the list of options to choose from */
.nesty-panel li {
  font-family: "Roboto", Arial, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: normal !important;
  line-height: 0.75rem;
}

/*
    * These elements are shown below the "Organization" and "Description" fields.
    * They are generated by Zendesk's `{{request_form}}` template.
*/
#request_organization_id_hint,
#request_description_hint {
  margin: 0;
  font-size: 0.75rem;
  font-style: italic;
}

#request_description,
#request_comment_body {
  height: 8rem;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.75rem;
}

#request_subject_error,
#request_description_error,
.notification-error:not([aria-hidden=true]) {
  padding: 0.5rem;
  color: var(--platinum-800);
  background-color: var(--crimson-400);
  font-size: 0.75rem;
  font-style: italic;
}

/*
    Request Form final "Submit" button
*/
input[name=commit] {
  display: inline-block;
  padding: 0.75rem 2rem;
  font: var(--font-body--large);
  border: none;
  border-radius: var(--border-radius--md);
  cursor: pointer;
  text-align: center;
  transition: var(--transition-time);
}

input[name=commit]:hover {
  transition: var(--transition-time);
}

input[name=commit]:disabled:hover {
  cursor: not-allowed;
}

/* Custom Zendesk Form Fields */
.request-form p {
  margin: 0;
  color: var(--gray-300);
  font-size: 0.75rem;
  font-style: italic;
}

.form-field {
  margin: 1rem 0;
}

input[id^=request_custom_fields_],
textarea[id^=request_custom_fields_],
.datepicker {
  width: 100%;
  min-height: 37px;
}

input[type=checkbox] {
  width: inherit;
  min-height: inherit;
}

.source-filters {
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 1rem;
}

.search-filters > li {
  white-space: nowrap;
}

.search-result {
  padding: 1rem 0;
  border-bottom: 1px solid var(--platinum-400);
}

.search-result em {
  color: var(--crimson-400);
}

/* ================================
    #Footer
================================ */
footer details {
    margin: 0;
}

footer summary {
    padding: 0;
}

footer details[open] summary {
    padding-bottom: 0.25rem;
}

footer details[open] ul {
    margin-left: 1rem;
}

footer .logo {
    width: 100%;
    height: 80px;
    align-self: center;
}

.social-icons {
  padding: 2.5rem 0 0.75rem 0;
}

.social .social-icons i {
  padding: 0 12px;
  font-size: 1.5rem;
}

/* Banner Callouts/Warnings */
.banner-callout {
  max-width: 96ch;
  margin: 1.5rem auto;
  padding: 1.5rem;
  border-radius: var(--border-radius--md);
  text-align: center;
}

.banner-callout:before {
  display: block;
  font-family: "phosphor" !important;
  font-size: 2rem;
  font-weight: normal !important;
}

.banner-callout a {
  color: inherit;
  text-decoration: underline;
}

.banner-callout a:hover {
  color: inherit;
  text-decoration: none;
}

.banner-callout__info:before {
  content: "\eba7";
}

.banner-callout__warning:before {
  content: "\edbf";
}

.banner-callout__alert:before {
  content: "\ed00";
}

.inline-callout {
  max-width: 96ch;
  padding: 1.5rem;
  border-radius: var(--border-radius--md);
}

.inline-callout p {
  margin: 0;
}

.article-inner pre {
  display: block;
  padding: 1.5rem;
  border-radius: var(--border-radius--md);
  overflow: auto;
}

.article-inner code {
  margin: 0 2px;
  padding: 0 4px;
  word-wrap: break-word;
}

/*
    * Add a class to change heading colors to that of Greenlite's branding for specific articles
*/
.greenlite-branded .wysiwyg-color-blue,
.greenlite-branded .wysiwyg-color-blue70,
.greenlite-branded .wysiwyg-color-blue80,
.greenlite-branded .wysiwyg-color-blue90,
.greenlite-branded .wysiwyg-color-blue110,
.greenlite-branded .wysiwyg-color-blue120,
.greenlite-branded .wysiwyg-color-blue130 {
  color: #8ec741;
}

.greenlite-branded .wysiwyg-color-green,
.greenlite-branded .wysiwyg-color-green70,
.greenlite-branded .wysiwyg-color-green80,
.greenlite-branded .wysiwyg-color-green90,
.greenlite-branded .wysiwyg-color-green110,
.greenlite-branded .wysiwyg-color-green120,
.greenlite-branded .wysiwyg-color-green130 {
  color: #8ec741;
}

.greenlite-branded::before {
  content: url(https://img.365retailmarkets.com/training/helpcenter/img/GreenLitelogo.png);
}

/*
    * Use of !important to override inline styles set by the Reel JS library.
*/
.reel-preloader {
  height: 2rem !important;
  background: repeating-linear-gradient(45deg, #1d4f91, #1d4f91 1rem, #13294b 1rem, #13294b 2rem);
}

.reel-preloader::after {
  content: "Loading...";
  padding: 1rem;
  color: #fff;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  line-height: 2rem;
}

.reel-indicator {
  width: 2rem !important;
  height: 0.5rem !important;
  background-color: #1d4f91 !important;
}

.reel-panning,
.reel-panning * {
  cursor: grabbing;
}

.print__cover-page-container {
  display: none;
}

/* ================================
    #Printing
================================ */
@media print {
  
  /* 
  	Suggest that browsers print background colors.
  	Will not always work if the user decides otherwise...
  */
  * {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  .d-print-none {
    display: none !important;
  }
  
  @page {
    size: letter;
    margin: 0;
  }
  
  /* Cover Page Setup */
  .print__cover-page-container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  
  .print__cover-page-logo {
    width: 512px;
    height: auto;
    margin: 0 auto;
    margin-top: -2rem;
    margin-bottom: 2rem;
  }
  
  .print__cover-page-title {
		width: 100%;
    padding: 2rem;
    font-size: 2rem;
    text-align: center;
  }
  
  /* Hide Chat Bot from Print View */
  iframe {
    display: none !important;
  }
  
  /* Printed Element Adjustments */
  body {
    margin: 0.25in;
  }
  
  body, .row {
    background-color: rgba(255, 255, 255) !important;
  }
  
  .article-body,
  div[class^='col'] {
    width: 100% !important;
  }
  
  .article-inner {
    max-width: 100% !important;
  }
  
  .article-inner p,
  .article-inner li,
  .article-inner a {
    color: #000 !important;
  }
  
  .table {
    color: #000 !important;
    border-color: #000 !important;
  }
  
  .table-striped > tbody > tr:nth-of-type(2n+1) {
    color: #000 !important;
    background-color: #ddd !important;
  }
  
  .article-body img {
    max-height: 187.5pt;
    width: auto;
  }
  
  /* Avoid starting a new page after certain elements */
  h1, h2, h3, h4, h5 {
   page-break-after: avoid;
	}
  
  ul, img {
   page-break-inside: avoid;
	}
  
  /* Hide Fancybox "Click to enlarge" messages */
  .article-body .fancybox ~ p.font-body--emphasis {
    display: none !important;
  }
  
}