@charset "UTF-8";
/* =========================================================
~ MASTER RESET
~ Used to create a fresh pallete for spacing and alignment
~ adjustments within this doc.
========================================================= */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output,
ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  width: 100%;
  height: 100%;
}

div, input, select, textarea, span {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
* PARTIALS
* All components were broken out into partials to make it
* easier to locate various rules
*/
/**
* cubic-bezier transition curves
* define your property(1) and the duration in animation.
*/
/**
* Input placeholder styling mixin
* pass all needed properties to each pie rule.
*/
/**
* COLORS
* All colors and variations for background elements and
* text treatments throughout.
*/
.alert-color, form label .req, button.plain i.alert, form [data-ordered-list-input] .plain[data-ordered-list-input-action=add] i.alert, .negative-color {
  color: #b71c1c !important;
}

.dense-alert-color {
  color: #e53835;
}

.alert-light-color {
  color: #ffebee;
}

.alert-medium-color {
  color: #dfb8b8;
}

.positive-color {
  color: #43a047;
}

.bg-alert-light {
  background: #ffebee;
}

.grey-color {
  color: #e5e5e5;
}

.dark-grey-color, .full-calendar button.navigation span, .full-calendar form [data-ordered-list-input] .navigation[data-ordered-list-input-action=add] span, form [data-ordered-list-input] .full-calendar .navigation[data-ordered-list-input-action=add] span {
  color: #424242;
}

.medium-grey-color, ul.inline-list .label {
  color: #c9c9c9;
}

.dense-grey-color {
  color: #9e9e9e;
}

.solid-grey-color {
  color: #757575;
}

.secondary-color {
  color: #009688;
}

.orange-color {
  color: #ef6c00;
}

.medium-primary-color, .hover-medium-primary-color:hover {
  color: #03a8f4 !important;
}

.dense-primary-color, .hover-dense-primary-color:hover {
  color: #4286f4 !important;
}

.primary-color, .hover-primary-color:hover {
  color: #1565c0 !important;
}

.slate-blue-color, .hover-primary-color:hover {
  color: #78909c !important;
}

.white-color {
  color: #ffffff;
}

.black-color {
  color: #212121;
}

.hard-color {
  color: #e65000;
}

.medium-color {
  color: #fb8e00;
}

.border-final {
  border-color: #9575cd !important;
}

.color-final {
  color: #9575cd !important;
}

.border-shipping {
  border-color: #66bb6a !important;
}

.color-shipping {
  color: #66bb6a !important;
}

.white-bg, ul.white-bg li {
  background-color: #ffffff !important;
}

.grey-bg {
  background-color: whitesmoke !important;
}

.medium-grey-bg {
  background-color: #e5e5e5 !important;
}

.yellow-bg {
  background-color: #fff8e1 !important;
}

.blue-bg {
  background-color: #f2fbfe !important;
}

.alert-bg {
  background-color: #ffebee !important;
}

.dark-alert-bg {
  background-color: #de2828 !important;
}

.red-bg {
  background-color: #ffebee !important;
}

.coral-alert-bg {
  background-color: lightcoral !important;
}

.orange-bg {
  background-color: #ef6c00 !important;
}

/* =========================================================
~ TYPOGRAPHY
~ All font sizes, families, weights, and formats.
========================================================= */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MI/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MI/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MI/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MI/MaterialIcons-Regular.ttf) format("truetype");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}

body {
  font-family: "Roboto", sans-serif;
}

h1 {
  font-size: 24px;
  line-height: 30px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 10px;
}
h1.large {
  font-size: 36px;
  line-height: 44px;
}

h2 {
  font-size: 20px;
  line-height: 26px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 10px;
}

h3 {
  font-size: 18px;
  line-height: 22px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 10px;
}

h4 {
  font-size: 14px;
  line-height: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 20px;
  margin-bottom: 10px;
}

h5 {
  font-size: 12px;
  line-height: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

h6 {
  font-size: 10px;
  line-height: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

p {
  font-size: 14px;
  line-height: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}
p.tall {
  line-height: 50px !important;
}

span {
  font-family: "Roboto", sans-serif;
}

.bold {
  font-weight: 700 !important;
}

.medium-wt {
  font-weight: 500 !important;
}

.light-wt {
  font-weight: 300 !important;
}

.normal-wt {
  font-weight: normal !important;
}

.non-uppercase {
  text-transform: none !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.italics {
  font-style: italic;
}

.strike-thru {
  text-decoration: line-through;
}

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

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

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

.align-bottom {
  vertical-align: bottom !important;
}

.align-middle {
  vertical-align: middle;
}
.align-middle.material-icons {
  line-height: 10px;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

i.small {
  font-size: 13px;
}

i.medium {
  font-size: 17px;
}

.large {
  font-size: 32px;
}

.lh-18 {
  line-height: 18px;
}

.small-hint {
  font-size: 12px;
  color: #424242;
  font-weight: normal;
}

h4 + i {
  position: relative;
  top: 2px;
}

.txt-small {
  font-size: 0.8em;
}

.change-arrow {
  color: #9e9e9e;
  font-size: 16px;
  margin: 0 2px;
  vertical-align: middle;
}

/**
* PULSE ANIMATION
* Styles and components for making pulse effect.
*/
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 #03a9f4;
  }
  80% {
    -webkit-box-shadow: 0 0 0 7px rgba(3, 169, 244, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(3, 169, 244, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 #03a9f4;
    box-shadow: 0 0 0 0 #03a9f4;
  }
  80% {
    -moz-box-shadow: 0 0 0 7px rgba(3, 169, 244, 0);
    box-shadow: 0 0 0 7px rgba(3, 169, 244, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(3, 169, 244, 0);
    box-shadow: 0 0 0 0 rgba(3, 169, 244, 0);
  }
}
.pulse-alert {
  box-shadow: 0 0 0 #03a8f4;
  border: 2px solid #ffffff;
  margin-left: -2px;
  border-radius: 6px;
  animation: pulse 1s 3;
}

@keyframes spring {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes spring {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes spring-back {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}
@-webkit-keyframes spring-back {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes bounce-fade {
  0% {
    margin-top: 0;
    opacity: 1;
  }
  100% {
    margin-top: 5px;
    opacity: 0;
  }
}
@-webkit-keyframes bounce-fade {
  0% {
    margin-top: 0;
    opacity: 1;
  }
  100% {
    margin-top: 5px;
    opacity: 0;
  }
}
/**
* HEADER STYLES
* All top navbar styles.
*/
nav {
  background: #1565c0;
  color: #ffffff;
  min-height: 62px;
  min-width: 768px;
  box-shadow: 4px 0 10px 0 rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 16;
}
nav .menu-trigger {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
nav .menu-trigger i {
  line-height: 62px;
  padding: 0 20px;
  cursor: pointer;
}
nav .menu-trigger .stack {
  margin: 20px;
  width: 24px;
  height: 24px;
  position: relative;
}
nav .menu-trigger .stack > div {
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  float: right;
  position: absolute;
}
nav .menu-trigger .stack .top {
  top: 6px;
}
nav .menu-trigger .stack .middle {
  top: 12px;
}
nav .menu-trigger .stack .bottom {
  top: 18px;
}
nav .menu-trigger:hover {
  background-color: #1359aa;
}
nav .content {
  padding-left: 75px;
  line-height: 62px;
  font-size: 20px;
}
nav .content .medium-grey-color, nav .content ul.inline-list .label, ul.inline-list nav .content .label {
  color: #ffffff;
  opacity: 0.5;
}
nav .indicators {
  position: absolute;
  right: 0;
  top: 0;
}
nav .indicators a {
  color: white;
  line-height: 62px;
  display: block;
  float: left;
  transition: 0.2s ease-in-out;
}
nav .indicators a[data-trigger-dialog] {
  padding: 0 15px;
}
nav .indicators a:hover {
  background-color: #1359aa;
}
nav .indicators i {
  line-height: 62px;
  font-size: 36px;
  width: 62px;
  text-align: center;
  cursor: pointer;
  border-bottom: 4px solid transparent;
  height: 62px;
  transition: 0.2s ease-in-out;
}
nav .indicators i:hover {
  background-color: #1359aa;
}
nav .indicators i.active {
  border-color: #4286f4;
}
nav [data-notification-count] {
  position: relative;
}
nav [data-notification-count]:after {
  content: attr(data-notification-count);
  border: 2px solid #1565c0;
  font-size: 10px;
  font-family: "Roboto", sans-serif;
  width: 18px;
  height: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
  border-radius: 50%;
  background-color: #03a8f4;
  position: absolute;
  top: 10px;
  right: 15px;
}
nav [data-notification-count].updates:after {
  background-color: #e53835;
}

body.show-menu .menu {
  left: 0%;
}
body.show-menu nav .content span {
  display: none;
}
body.show-menu nav .content:after {
  content: attr(data-inner-page-content);
  font-family: "Roboto", sans-serif;
}
body.show-menu nav .menu-trigger .stack .top {
  transform: rotate(-45deg);
  top: 10px;
}
body.show-menu nav .menu-trigger .stack .middle {
  width: 1px;
  opacity: 0;
}
body.show-menu nav .menu-trigger .stack .bottom {
  transform: rotate(45deg);
  top: 10px;
}
body.show-menu > .overlay {
  width: 100%;
  height: 100%;
  opacity: 0.1;
  transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
  -moz-transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
  -ms-transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
  -webkit-transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
}

/* =========================================================
~ TABLE STYLES
~ All table styles and layouts
========================================================= */
table, .html-table {
  width: 100%;
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  background-color: #ffffff;
  text-align: left;
  border-collapse: collapse;
}
table thead tr th, table thead tr .html-table-cell, table thead .html-table-row th, table thead .html-table-row .html-table-cell, table tfoot tr th, table tfoot tr .html-table-cell, table tfoot .html-table-row th, table tfoot .html-table-row .html-table-cell, table .html-table-head tr th, table .html-table-head tr .html-table-cell, table .html-table-head .html-table-row th, table .html-table-head .html-table-row .html-table-cell, table .html-table-foot tr th, table .html-table-foot tr .html-table-cell, table .html-table-foot .html-table-row th, table .html-table-foot .html-table-row .html-table-cell, .html-table thead tr th, .html-table thead tr .html-table-cell, .html-table thead .html-table-row th, .html-table thead .html-table-row .html-table-cell, .html-table tfoot tr th, .html-table tfoot tr .html-table-cell, .html-table tfoot .html-table-row th, .html-table tfoot .html-table-row .html-table-cell, .html-table .html-table-head tr th, .html-table .html-table-head tr .html-table-cell, .html-table .html-table-head .html-table-row th, .html-table .html-table-head .html-table-row .html-table-cell, .html-table .html-table-foot tr th, .html-table .html-table-foot tr .html-table-cell, .html-table .html-table-foot .html-table-row th, .html-table .html-table-foot .html-table-row .html-table-cell {
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
  padding: 0 10px;
  height: 48px;
  text-align: left;
  border-bottom: 2px solid #e5e5e5;
}
table thead tr th .final-inspection-head, table thead tr .html-table-cell .final-inspection-head, table thead .html-table-row th .final-inspection-head, table thead .html-table-row .html-table-cell .final-inspection-head, table tfoot tr th .final-inspection-head, table tfoot tr .html-table-cell .final-inspection-head, table tfoot .html-table-row th .final-inspection-head, table tfoot .html-table-row .html-table-cell .final-inspection-head, table .html-table-head tr th .final-inspection-head, table .html-table-head tr .html-table-cell .final-inspection-head, table .html-table-head .html-table-row th .final-inspection-head, table .html-table-head .html-table-row .html-table-cell .final-inspection-head, table .html-table-foot tr th .final-inspection-head, table .html-table-foot tr .html-table-cell .final-inspection-head, table .html-table-foot .html-table-row th .final-inspection-head, table .html-table-foot .html-table-row .html-table-cell .final-inspection-head, .html-table thead tr th .final-inspection-head, .html-table thead tr .html-table-cell .final-inspection-head, .html-table thead .html-table-row th .final-inspection-head, .html-table thead .html-table-row .html-table-cell .final-inspection-head, .html-table tfoot tr th .final-inspection-head, .html-table tfoot tr .html-table-cell .final-inspection-head, .html-table tfoot .html-table-row th .final-inspection-head, .html-table tfoot .html-table-row .html-table-cell .final-inspection-head, .html-table .html-table-head tr th .final-inspection-head, .html-table .html-table-head tr .html-table-cell .final-inspection-head, .html-table .html-table-head .html-table-row th .final-inspection-head, .html-table .html-table-head .html-table-row .html-table-cell .final-inspection-head, .html-table .html-table-foot tr th .final-inspection-head, .html-table .html-table-foot tr .html-table-cell .final-inspection-head, .html-table .html-table-foot .html-table-row th .final-inspection-head, .html-table .html-table-foot .html-table-row .html-table-cell .final-inspection-head {
  padding-left: 16px;
}
table thead tr .html-table-cell, table thead .html-table-row .html-table-cell, table tfoot tr .html-table-cell, table tfoot .html-table-row .html-table-cell, table .html-table-head tr .html-table-cell, table .html-table-head .html-table-row .html-table-cell, table .html-table-foot tr .html-table-cell, table .html-table-foot .html-table-row .html-table-cell, .html-table thead tr .html-table-cell, .html-table thead .html-table-row .html-table-cell, .html-table tfoot tr .html-table-cell, .html-table tfoot .html-table-row .html-table-cell, .html-table .html-table-head tr .html-table-cell, .html-table .html-table-head .html-table-row .html-table-cell, .html-table .html-table-foot tr .html-table-cell, .html-table .html-table-foot .html-table-row .html-table-cell {
  padding: 12px 10px;
  height: auto;
  min-height: 48px;
}
table thead tr.condensed th, table thead tr.condensed .html-table-cell, table thead .html-table-row.condensed th, table thead .html-table-row.condensed .html-table-cell, table tfoot tr.condensed th, table tfoot tr.condensed .html-table-cell, table tfoot .html-table-row.condensed th, table tfoot .html-table-row.condensed .html-table-cell, table .html-table-head tr.condensed th, table .html-table-head tr.condensed .html-table-cell, table .html-table-head .html-table-row.condensed th, table .html-table-head .html-table-row.condensed .html-table-cell, table .html-table-foot tr.condensed th, table .html-table-foot tr.condensed .html-table-cell, table .html-table-foot .html-table-row.condensed th, table .html-table-foot .html-table-row.condensed .html-table-cell, .html-table thead tr.condensed th, .html-table thead tr.condensed .html-table-cell, .html-table thead .html-table-row.condensed th, .html-table thead .html-table-row.condensed .html-table-cell, .html-table tfoot tr.condensed th, .html-table tfoot tr.condensed .html-table-cell, .html-table tfoot .html-table-row.condensed th, .html-table tfoot .html-table-row.condensed .html-table-cell, .html-table .html-table-head tr.condensed th, .html-table .html-table-head tr.condensed .html-table-cell, .html-table .html-table-head .html-table-row.condensed th, .html-table .html-table-head .html-table-row.condensed .html-table-cell, .html-table .html-table-foot tr.condensed th, .html-table .html-table-foot tr.condensed .html-table-cell, .html-table .html-table-foot .html-table-row.condensed th, .html-table .html-table-foot .html-table-row.condensed .html-table-cell {
  font-size: 10px;
  height: 30px !important;
  text-transform: uppercase;
  color: #424242;
  min-height: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table thead tr.condensed .html-table-cell, table thead .html-table-row.condensed .html-table-cell, table tfoot tr.condensed .html-table-cell, table tfoot .html-table-row.condensed .html-table-cell, table .html-table-head tr.condensed .html-table-cell, table .html-table-head .html-table-row.condensed .html-table-cell, table .html-table-foot tr.condensed .html-table-cell, table .html-table-foot .html-table-row.condensed .html-table-cell, .html-table thead tr.condensed .html-table-cell, .html-table thead .html-table-row.condensed .html-table-cell, .html-table tfoot tr.condensed .html-table-cell, .html-table tfoot .html-table-row.condensed .html-table-cell, .html-table .html-table-head tr.condensed .html-table-cell, .html-table .html-table-head .html-table-row.condensed .html-table-cell, .html-table .html-table-foot tr.condensed .html-table-cell, .html-table .html-table-foot .html-table-row.condensed .html-table-cell {
  padding-top: 8px !important;
}
table thead span.sortable-col-header, table tfoot span.sortable-col-header, table .html-table-head span.sortable-col-header, table .html-table-foot span.sortable-col-header, .html-table thead span.sortable-col-header, .html-table tfoot span.sortable-col-header, .html-table .html-table-head span.sortable-col-header, .html-table .html-table-foot span.sortable-col-header {
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
table thead span.sortable-col-header a.material-icons, table tfoot span.sortable-col-header a.material-icons, table .html-table-head span.sortable-col-header a.material-icons, table .html-table-foot span.sortable-col-header a.material-icons, .html-table thead span.sortable-col-header a.material-icons, .html-table tfoot span.sortable-col-header a.material-icons, .html-table .html-table-head span.sortable-col-header a.material-icons, .html-table .html-table-foot span.sortable-col-header a.material-icons {
  font-size: 18px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  background-color: transparent;
  padding: 4px;
  display: inline-flex;
  color: inherit;
  justify-content: center;
  align-items: center;
  box-shadow: none;
}
table thead span.sortable-col-header a.material-icons.active-sort, table tfoot span.sortable-col-header a.material-icons.active-sort, table .html-table-head span.sortable-col-header a.material-icons.active-sort, table .html-table-foot span.sortable-col-header a.material-icons.active-sort, .html-table thead span.sortable-col-header a.material-icons.active-sort, .html-table tfoot span.sortable-col-header a.material-icons.active-sort, .html-table .html-table-head span.sortable-col-header a.material-icons.active-sort, .html-table .html-table-foot span.sortable-col-header a.material-icons.active-sort {
  color: #4286f4;
}
table thead span.sortable-col-header a.material-icons:hover, table tfoot span.sortable-col-header a.material-icons:hover, table .html-table-head span.sortable-col-header a.material-icons:hover, table .html-table-foot span.sortable-col-header a.material-icons:hover, .html-table thead span.sortable-col-header a.material-icons:hover, .html-table tfoot span.sortable-col-header a.material-icons:hover, .html-table .html-table-head span.sortable-col-header a.material-icons:hover, .html-table .html-table-foot span.sortable-col-header a.material-icons:hover {
  text-decoration: none;
}
table tbody tr, table tbody .html-table-row, table .html-table-body tr, table .html-table-body .html-table-row, .html-table tbody tr, .html-table tbody .html-table-row, .html-table .html-table-body tr, .html-table .html-table-body .html-table-row {
  transition: 0.2s ease-in-out;
  /* Hover effect for default table rows with ajax links. */
}
table tbody tr[data-ajax-replace]:hover, table tbody tr[data-ajax-button]:hover, table tbody .html-table-row[data-ajax-replace]:hover, table tbody .html-table-row[data-ajax-button]:hover, table .html-table-body tr[data-ajax-replace]:hover, table .html-table-body tr[data-ajax-button]:hover, table .html-table-body .html-table-row[data-ajax-replace]:hover, table .html-table-body .html-table-row[data-ajax-button]:hover, .html-table tbody tr[data-ajax-replace]:hover, .html-table tbody tr[data-ajax-button]:hover, .html-table tbody .html-table-row[data-ajax-replace]:hover, .html-table tbody .html-table-row[data-ajax-button]:hover, .html-table .html-table-body tr[data-ajax-replace]:hover, .html-table .html-table-body tr[data-ajax-button]:hover, .html-table .html-table-body .html-table-row[data-ajax-replace]:hover, .html-table .html-table-body .html-table-row[data-ajax-button]:hover {
  background-color: whitesmoke;
}
table tbody tr td, table tbody tr .html-table-cell, table tbody .html-table-row td, table tbody .html-table-row .html-table-cell, table .html-table-body tr td, table .html-table-body tr .html-table-cell, table .html-table-body .html-table-row td, table .html-table-body .html-table-row .html-table-cell, .html-table tbody tr td, .html-table tbody tr .html-table-cell, .html-table tbody .html-table-row td, .html-table tbody .html-table-row .html-table-cell, .html-table .html-table-body tr td, .html-table .html-table-body tr .html-table-cell, .html-table .html-table-body .html-table-row td, .html-table .html-table-body .html-table-row .html-table-cell {
  font-size: 12px;
  vertical-align: middle;
  padding: 0px 10px;
  height: 48px;
  border-bottom: 1px solid #e5e5e5;
}
table tbody tr td h1 + a, table tbody tr td h2 + a, table tbody tr td h3 + a, table tbody tr td h4 + a, table tbody tr td h5 + a, table tbody tr td h6 + a, table tbody tr .html-table-cell h1 + a, table tbody tr .html-table-cell h2 + a, table tbody tr .html-table-cell h3 + a, table tbody tr .html-table-cell h4 + a, table tbody tr .html-table-cell h5 + a, table tbody tr .html-table-cell h6 + a, table tbody .html-table-row td h1 + a, table tbody .html-table-row td h2 + a, table tbody .html-table-row td h3 + a, table tbody .html-table-row td h4 + a, table tbody .html-table-row td h5 + a, table tbody .html-table-row td h6 + a, table tbody .html-table-row .html-table-cell h1 + a, table tbody .html-table-row .html-table-cell h2 + a, table tbody .html-table-row .html-table-cell h3 + a, table tbody .html-table-row .html-table-cell h4 + a, table tbody .html-table-row .html-table-cell h5 + a, table tbody .html-table-row .html-table-cell h6 + a, table .html-table-body tr td h1 + a, table .html-table-body tr td h2 + a, table .html-table-body tr td h3 + a, table .html-table-body tr td h4 + a, table .html-table-body tr td h5 + a, table .html-table-body tr td h6 + a, table .html-table-body tr .html-table-cell h1 + a, table .html-table-body tr .html-table-cell h2 + a, table .html-table-body tr .html-table-cell h3 + a, table .html-table-body tr .html-table-cell h4 + a, table .html-table-body tr .html-table-cell h5 + a, table .html-table-body tr .html-table-cell h6 + a, table .html-table-body .html-table-row td h1 + a, table .html-table-body .html-table-row td h2 + a, table .html-table-body .html-table-row td h3 + a, table .html-table-body .html-table-row td h4 + a, table .html-table-body .html-table-row td h5 + a, table .html-table-body .html-table-row td h6 + a, table .html-table-body .html-table-row .html-table-cell h1 + a, table .html-table-body .html-table-row .html-table-cell h2 + a, table .html-table-body .html-table-row .html-table-cell h3 + a, table .html-table-body .html-table-row .html-table-cell h4 + a, table .html-table-body .html-table-row .html-table-cell h5 + a, table .html-table-body .html-table-row .html-table-cell h6 + a, .html-table tbody tr td h1 + a, .html-table tbody tr td h2 + a, .html-table tbody tr td h3 + a, .html-table tbody tr td h4 + a, .html-table tbody tr td h5 + a, .html-table tbody tr td h6 + a, .html-table tbody tr .html-table-cell h1 + a, .html-table tbody tr .html-table-cell h2 + a, .html-table tbody tr .html-table-cell h3 + a, .html-table tbody tr .html-table-cell h4 + a, .html-table tbody tr .html-table-cell h5 + a, .html-table tbody tr .html-table-cell h6 + a, .html-table tbody .html-table-row td h1 + a, .html-table tbody .html-table-row td h2 + a, .html-table tbody .html-table-row td h3 + a, .html-table tbody .html-table-row td h4 + a, .html-table tbody .html-table-row td h5 + a, .html-table tbody .html-table-row td h6 + a, .html-table tbody .html-table-row .html-table-cell h1 + a, .html-table tbody .html-table-row .html-table-cell h2 + a, .html-table tbody .html-table-row .html-table-cell h3 + a, .html-table tbody .html-table-row .html-table-cell h4 + a, .html-table tbody .html-table-row .html-table-cell h5 + a, .html-table tbody .html-table-row .html-table-cell h6 + a, .html-table .html-table-body tr td h1 + a, .html-table .html-table-body tr td h2 + a, .html-table .html-table-body tr td h3 + a, .html-table .html-table-body tr td h4 + a, .html-table .html-table-body tr td h5 + a, .html-table .html-table-body tr td h6 + a, .html-table .html-table-body tr .html-table-cell h1 + a, .html-table .html-table-body tr .html-table-cell h2 + a, .html-table .html-table-body tr .html-table-cell h3 + a, .html-table .html-table-body tr .html-table-cell h4 + a, .html-table .html-table-body tr .html-table-cell h5 + a, .html-table .html-table-body tr .html-table-cell h6 + a, .html-table .html-table-body .html-table-row td h1 + a, .html-table .html-table-body .html-table-row td h2 + a, .html-table .html-table-body .html-table-row td h3 + a, .html-table .html-table-body .html-table-row td h4 + a, .html-table .html-table-body .html-table-row td h5 + a, .html-table .html-table-body .html-table-row td h6 + a, .html-table .html-table-body .html-table-row .html-table-cell h1 + a, .html-table .html-table-body .html-table-row .html-table-cell h2 + a, .html-table .html-table-body .html-table-row .html-table-cell h3 + a, .html-table .html-table-body .html-table-row .html-table-cell h4 + a, .html-table .html-table-body .html-table-row .html-table-cell h5 + a, .html-table .html-table-body .html-table-row .html-table-cell h6 + a {
  display: block;
  margin-top: 5px;
}
table tbody tr td a, table tbody tr .html-table-cell a, table tbody .html-table-row td a, table tbody .html-table-row .html-table-cell a, table .html-table-body tr td a, table .html-table-body tr .html-table-cell a, table .html-table-body .html-table-row td a, table .html-table-body .html-table-row .html-table-cell a, .html-table tbody tr td a, .html-table tbody tr .html-table-cell a, .html-table tbody .html-table-row td a, .html-table tbody .html-table-row .html-table-cell a, .html-table .html-table-body tr td a, .html-table .html-table-body tr .html-table-cell a, .html-table .html-table-body .html-table-row td a, .html-table .html-table-body .html-table-row .html-table-cell a {
  float: left;
  position: relative;
}
table tbody tr td span a, table tbody tr .html-table-cell span a, table tbody .html-table-row td span a, table tbody .html-table-row .html-table-cell span a, table .html-table-body tr td span a, table .html-table-body tr .html-table-cell span a, table .html-table-body .html-table-row td span a, table .html-table-body .html-table-row .html-table-cell span a, .html-table tbody tr td span a, .html-table tbody tr .html-table-cell span a, .html-table tbody .html-table-row td span a, .html-table tbody .html-table-row .html-table-cell span a, .html-table .html-table-body tr td span a, .html-table .html-table-body tr .html-table-cell span a, .html-table .html-table-body .html-table-row td span a, .html-table .html-table-body .html-table-row .html-table-cell span a {
  float: none;
}
table tbody tr .html-table-cell, table tbody .html-table-row .html-table-cell, table .html-table-body tr .html-table-cell, table .html-table-body .html-table-row .html-table-cell, .html-table tbody tr .html-table-cell, .html-table tbody .html-table-row .html-table-cell, .html-table .html-table-body tr .html-table-cell, .html-table .html-table-body .html-table-row .html-table-cell {
  padding: 12px 10px;
  height: auto;
  min-height: 48px;
}
table tbody tr .html-table-cell.no-min, table tbody .html-table-row .html-table-cell.no-min, table .html-table-body tr .html-table-cell.no-min, table .html-table-body .html-table-row .html-table-cell.no-min, .html-table tbody tr .html-table-cell.no-min, .html-table tbody .html-table-row .html-table-cell.no-min, .html-table .html-table-body tr .html-table-cell.no-min, .html-table .html-table-body .html-table-row .html-table-cell.no-min {
  min-height: 0;
  height: auto;
}
table tbody tr.bump-out, table tbody .html-table-row.bump-out, table .html-table-body tr.bump-out, table .html-table-body .html-table-row.bump-out, .html-table tbody tr.bump-out, .html-table tbody .html-table-row.bump-out, .html-table .html-table-body tr.bump-out, .html-table .html-table-body .html-table-row.bump-out {
  background-color: whitesmoke;
  transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.6, 1);
  color: #4286f4;
  font-weight: 500;
}
table tbody tr.bump-out td:first-child, table tbody tr.bump-out .html-table-cell:first-child, table tbody .html-table-row.bump-out td:first-child, table tbody .html-table-row.bump-out .html-table-cell:first-child, table .html-table-body tr.bump-out td:first-child, table .html-table-body tr.bump-out .html-table-cell:first-child, table .html-table-body .html-table-row.bump-out td:first-child, table .html-table-body .html-table-row.bump-out .html-table-cell:first-child, .html-table tbody tr.bump-out td:first-child, .html-table tbody tr.bump-out .html-table-cell:first-child, .html-table tbody .html-table-row.bump-out td:first-child, .html-table tbody .html-table-row.bump-out .html-table-cell:first-child, .html-table .html-table-body tr.bump-out td:first-child, .html-table .html-table-body tr.bump-out .html-table-cell:first-child, .html-table .html-table-body .html-table-row.bump-out td:first-child, .html-table .html-table-body .html-table-row.bump-out .html-table-cell:first-child {
  box-shadow: 5px 0px 0px #4286f4 inset;
}
table tbody tr.bump-out .bubble.non-uppercase, table tbody tr.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol table tbody tr.bump-out li.non-uppercase, table tbody .html-table-row.bump-out .bubble.non-uppercase, table tbody .html-table-row.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol table tbody .html-table-row.bump-out li.non-uppercase, table .html-table-body tr.bump-out .bubble.non-uppercase, table .html-table-body tr.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol table .html-table-body tr.bump-out li.non-uppercase, table .html-table-body .html-table-row.bump-out .bubble.non-uppercase, table .html-table-body .html-table-row.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol table .html-table-body .html-table-row.bump-out li.non-uppercase, .html-table tbody tr.bump-out .bubble.non-uppercase, .html-table tbody tr.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol .html-table tbody tr.bump-out li.non-uppercase, .html-table tbody .html-table-row.bump-out .bubble.non-uppercase, .html-table tbody .html-table-row.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol .html-table tbody .html-table-row.bump-out li.non-uppercase, .html-table .html-table-body tr.bump-out .bubble.non-uppercase, .html-table .html-table-body tr.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol .html-table .html-table-body tr.bump-out li.non-uppercase, .html-table .html-table-body .html-table-row.bump-out .bubble.non-uppercase, .html-table .html-table-body .html-table-row.bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol .html-table .html-table-body .html-table-row.bump-out li.non-uppercase {
  background-color: #4286f4;
  color: white;
}
table tbody tr.pulse-alert, table tbody .html-table-row.pulse-alert, table .html-table-body tr.pulse-alert, table .html-table-body .html-table-row.pulse-alert, .html-table tbody tr.pulse-alert, .html-table tbody .html-table-row.pulse-alert, .html-table .html-table-body tr.pulse-alert, .html-table .html-table-body .html-table-row.pulse-alert {
  animation: pulse 1s 3;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  border: none !important;
}
table tbody tr.disabled td, table tbody tr.disabled .html-table-cell, table tbody .html-table-row.disabled td, table tbody .html-table-row.disabled .html-table-cell, table .html-table-body tr.disabled td, table .html-table-body tr.disabled .html-table-cell, table .html-table-body .html-table-row.disabled td, table .html-table-body .html-table-row.disabled .html-table-cell, .html-table tbody tr.disabled td, .html-table tbody tr.disabled .html-table-cell, .html-table tbody .html-table-row.disabled td, .html-table tbody .html-table-row.disabled .html-table-cell, .html-table .html-table-body tr.disabled td, .html-table .html-table-body tr.disabled .html-table-cell, .html-table .html-table-body .html-table-row.disabled td, .html-table .html-table-body .html-table-row.disabled .html-table-cell {
  color: #c9c9c9;
}
table tbody tr.disabled td .bubble, table tbody tr.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table tbody tr.disabled td li, table tbody tr.disabled .html-table-cell .bubble, table tbody tr.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table tbody tr.disabled .html-table-cell li, table tbody .html-table-row.disabled td .bubble, table tbody .html-table-row.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table tbody .html-table-row.disabled td li, table tbody .html-table-row.disabled .html-table-cell .bubble, table tbody .html-table-row.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table tbody .html-table-row.disabled .html-table-cell li, table .html-table-body tr.disabled td .bubble, table .html-table-body tr.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table .html-table-body tr.disabled td li, table .html-table-body tr.disabled .html-table-cell .bubble, table .html-table-body tr.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table .html-table-body tr.disabled .html-table-cell li, table .html-table-body .html-table-row.disabled td .bubble, table .html-table-body .html-table-row.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table .html-table-body .html-table-row.disabled td li, table .html-table-body .html-table-row.disabled .html-table-cell .bubble, table .html-table-body .html-table-row.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table .html-table-body .html-table-row.disabled .html-table-cell li, .html-table tbody tr.disabled td .bubble, .html-table tbody tr.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table tbody tr.disabled td li, .html-table tbody tr.disabled .html-table-cell .bubble, .html-table tbody tr.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table tbody tr.disabled .html-table-cell li, .html-table tbody .html-table-row.disabled td .bubble, .html-table tbody .html-table-row.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table tbody .html-table-row.disabled td li, .html-table tbody .html-table-row.disabled .html-table-cell .bubble, .html-table tbody .html-table-row.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table tbody .html-table-row.disabled .html-table-cell li, .html-table .html-table-body tr.disabled td .bubble, .html-table .html-table-body tr.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table .html-table-body tr.disabled td li, .html-table .html-table-body tr.disabled .html-table-cell .bubble, .html-table .html-table-body tr.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table .html-table-body tr.disabled .html-table-cell li, .html-table .html-table-body .html-table-row.disabled td .bubble, .html-table .html-table-body .html-table-row.disabled td form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table .html-table-body .html-table-row.disabled td li, .html-table .html-table-body .html-table-row.disabled .html-table-cell .bubble, .html-table .html-table-body .html-table-row.disabled .html-table-cell form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table .html-table-body .html-table-row.disabled .html-table-cell li {
  background-color: transparent;
  color: #c9c9c9;
}
table .html-table-row.d-flex, .html-table .html-table-row.d-flex {
  padding: 0 6px;
}
table .html-table-row.d-flex .html-table-cell, .html-table .html-table-row.d-flex .html-table-cell {
  flex: 1;
  padding-left: 0;
  padding-right: 0;
  margin-left: 6px;
  margin-right: 6px;
}
table .html-table-row.d-flex .html-table-cell[class^=width-], table .html-table-row.d-flex .html-table-cell[class*=" width-"], .html-table .html-table-row.d-flex .html-table-cell[class^=width-], .html-table .html-table-row.d-flex .html-table-cell[class*=" width-"] {
  flex: none;
}
table td, table th, table .html-table-cell, .html-table td, .html-table th, .html-table .html-table-cell {
  line-height: 16px;
}
table td.no-height, table th.no-height, table .html-table-cell.no-height, .html-table td.no-height, .html-table th.no-height, .html-table .html-table-cell.no-height {
  height: 0px !important;
}
table td.no-height .expanding-wrapper, table th.no-height .expanding-wrapper, table .html-table-cell.no-height .expanding-wrapper, .html-table td.no-height .expanding-wrapper, .html-table th.no-height .expanding-wrapper, .html-table .html-table-cell.no-height .expanding-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
table td.no-height .expanding-wrapper > *, table th.no-height .expanding-wrapper > *, table .html-table-cell.no-height .expanding-wrapper > *, .html-table td.no-height .expanding-wrapper > *, .html-table th.no-height .expanding-wrapper > *, .html-table .html-table-cell.no-height .expanding-wrapper > * {
  margin: 10px;
}
table td.no-height.expand .expanding-wrapper, table th.no-height.expand .expanding-wrapper, table .html-table-cell.no-height.expand .expanding-wrapper, .html-table td.no-height.expand .expanding-wrapper, .html-table th.no-height.expand .expanding-wrapper, .html-table .html-table-cell.no-height.expand .expanding-wrapper {
  max-height: 100px;
}
table td i, table th i, table .html-table-cell i, .html-table td i, .html-table th i, .html-table .html-table-cell i {
  vertical-align: bottom;
}
table select, table button, table form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] table [data-ordered-list-input-action=add], table .inline-btn, table input, .html-table select, .html-table button, .html-table form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .html-table [data-ordered-list-input-action=add], .html-table .inline-btn, .html-table input {
  max-width: 100px;
}
table textarea, .html-table textarea {
  width: 100%;
  max-width: 100% !important;
  padding: 5px !important;
}
table tr.status-bar td, .html-table tr.status-bar td {
  height: auto;
  padding: 6px 15px;
}
table.alert thead tr th, table.alert .html-table-head .html-table-row .html-table-cell, .html-table.alert thead tr th, .html-table.alert .html-table-head .html-table-row .html-table-cell {
  color: #b71c1c;
  border-bottom: 1px solid #dfb8b8;
}
table.alert tbody tr, table.alert tbody .html-table-row, table.alert .html-table-body tr, table.alert .html-table-body .html-table-row, .html-table.alert tbody tr, .html-table.alert tbody .html-table-row, .html-table.alert .html-table-body tr, .html-table.alert .html-table-body .html-table-row {
  background-color: #ffebee;
}
table.alert tbody tr:after, table.alert tbody .html-table-row:after, table.alert .html-table-body tr:after, table.alert .html-table-body .html-table-row:after, .html-table.alert tbody tr:after, .html-table.alert tbody .html-table-row:after, .html-table.alert .html-table-body tr:after, .html-table.alert .html-table-body .html-table-row:after {
  background: #dfb8b8;
  border-color: #dfb8b8;
}
table.alert tbody tr td:first-child .bubble, table.alert tbody tr td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert tbody tr td:first-child li, table.alert tbody tr .html-table-cell:first-child .bubble, table.alert tbody tr .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert tbody tr .html-table-cell:first-child li, table.alert tbody .html-table-row td:first-child .bubble, table.alert tbody .html-table-row td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert tbody .html-table-row td:first-child li, table.alert tbody .html-table-row .html-table-cell:first-child .bubble, table.alert tbody .html-table-row .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert tbody .html-table-row .html-table-cell:first-child li, table.alert .html-table-body tr td:first-child .bubble, table.alert .html-table-body tr td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert .html-table-body tr td:first-child li, table.alert .html-table-body tr .html-table-cell:first-child .bubble, table.alert .html-table-body tr .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert .html-table-body tr .html-table-cell:first-child li, table.alert .html-table-body .html-table-row td:first-child .bubble, table.alert .html-table-body .html-table-row td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert .html-table-body .html-table-row td:first-child li, table.alert .html-table-body .html-table-row .html-table-cell:first-child .bubble, table.alert .html-table-body .html-table-row .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table.alert .html-table-body .html-table-row .html-table-cell:first-child li, .html-table.alert tbody tr td:first-child .bubble, .html-table.alert tbody tr td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert tbody tr td:first-child li, .html-table.alert tbody tr .html-table-cell:first-child .bubble, .html-table.alert tbody tr .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert tbody tr .html-table-cell:first-child li, .html-table.alert tbody .html-table-row td:first-child .bubble, .html-table.alert tbody .html-table-row td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert tbody .html-table-row td:first-child li, .html-table.alert tbody .html-table-row .html-table-cell:first-child .bubble, .html-table.alert tbody .html-table-row .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert tbody .html-table-row .html-table-cell:first-child li, .html-table.alert .html-table-body tr td:first-child .bubble, .html-table.alert .html-table-body tr td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert .html-table-body tr td:first-child li, .html-table.alert .html-table-body tr .html-table-cell:first-child .bubble, .html-table.alert .html-table-body tr .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert .html-table-body tr .html-table-cell:first-child li, .html-table.alert .html-table-body .html-table-row td:first-child .bubble, .html-table.alert .html-table-body .html-table-row td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert .html-table-body .html-table-row td:first-child li, .html-table.alert .html-table-body .html-table-row .html-table-cell:first-child .bubble, .html-table.alert .html-table-body .html-table-row .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table.alert .html-table-body .html-table-row .html-table-cell:first-child li {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #b71c1c;
  position: relative;
  left: -10px;
}
table.alert tbody tr.bump-out, table.alert tbody .html-table-row.bump-out, table.alert .html-table-body tr.bump-out, table.alert .html-table-body .html-table-row.bump-out, .html-table.alert tbody tr.bump-out, .html-table.alert tbody .html-table-row.bump-out, .html-table.alert .html-table-body tr.bump-out, .html-table.alert .html-table-body .html-table-row.bump-out {
  background-color: #dfb8b8;
}
table.alert tbody tr td, table.alert tbody tr .html-table-cell, table.alert tbody .html-table-row td, table.alert tbody .html-table-row .html-table-cell, table.alert .html-table-body tr td, table.alert .html-table-body tr .html-table-cell, table.alert .html-table-body .html-table-row td, table.alert .html-table-body .html-table-row .html-table-cell, .html-table.alert tbody tr td, .html-table.alert tbody tr .html-table-cell, .html-table.alert tbody .html-table-row td, .html-table.alert tbody .html-table-row .html-table-cell, .html-table.alert .html-table-body tr td, .html-table.alert .html-table-body tr .html-table-cell, .html-table.alert .html-table-body .html-table-row td, .html-table.alert .html-table-body .html-table-row .html-table-cell {
  border-bottom: 1px solid #dfb8b8;
}
table.alert .bump-out, .html-table.alert .bump-out {
  color: #b71c1c;
}
table.alert .bump-out td:first-child, table.alert .bump-out .html-table-cell:first-child, .html-table.alert .bump-out td:first-child, .html-table.alert .bump-out .html-table-cell:first-child {
  box-shadow: none;
}
table.alert .bump-out .bubble.non-uppercase, table.alert .bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol table.alert .bump-out li.non-uppercase, .html-table.alert .bump-out .bubble.non-uppercase, .html-table.alert .bump-out form [data-ordered-list-input] ol li.non-uppercase, form [data-ordered-list-input] ol .html-table.alert .bump-out li.non-uppercase {
  color: #424242;
  background-color: #e5e5e5;
}
table.alert .pulse-alert, .html-table.alert .pulse-alert {
  border: 2px solid #ffebee;
}
table tr.alert, table .html-table-cell.alert, .html-table tr.alert, .html-table .html-table-cell.alert {
  /* Set background color on overdue table rows to red */
  background-color: #ffebee;
  /* Set background color on overdue table rows' expandable blocks to red (in this case components expand on open orders) */
  /* Hover effect for alert table rows with ajax links. */
}
table tr.alert + tr[data-expandable-row], table .html-table-cell.alert + tr[data-expandable-row], .html-table tr.alert + tr[data-expandable-row], .html-table .html-table-cell.alert + tr[data-expandable-row] {
  background-color: #ffebee;
}
table tr.alert:after, table .html-table-cell.alert:after, .html-table tr.alert:after, .html-table .html-table-cell.alert:after {
  background: #dfb8b8;
  border-color: #dfb8b8;
}
table tr.alert td:first-child .bubble, table tr.alert td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table tr.alert td:first-child li, table tr.alert .html-table-cell:first-child .bubble, table tr.alert .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table tr.alert .html-table-cell:first-child li, table .html-table-cell.alert td:first-child .bubble, table .html-table-cell.alert td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table .html-table-cell.alert td:first-child li, table .html-table-cell.alert .html-table-cell:first-child .bubble, table .html-table-cell.alert .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol table .html-table-cell.alert .html-table-cell:first-child li, .html-table tr.alert td:first-child .bubble, .html-table tr.alert td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table tr.alert td:first-child li, .html-table tr.alert .html-table-cell:first-child .bubble, .html-table tr.alert .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table tr.alert .html-table-cell:first-child li, .html-table .html-table-cell.alert td:first-child .bubble, .html-table .html-table-cell.alert td:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table .html-table-cell.alert td:first-child li, .html-table .html-table-cell.alert .html-table-cell:first-child .bubble, .html-table .html-table-cell.alert .html-table-cell:first-child form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .html-table .html-table-cell.alert .html-table-cell:first-child li {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  background-color: #b71c1c;
  position: relative;
  left: -10px;
}
table tr.alert.bump-out, table .html-table-cell.alert.bump-out, .html-table tr.alert.bump-out, .html-table .html-table-cell.alert.bump-out {
  background-color: #dfb8b8;
  color: #b71c1c;
}
table tr.alert.bump-out td:first-child, table .html-table-cell.alert.bump-out td:first-child, .html-table tr.alert.bump-out td:first-child, .html-table .html-table-cell.alert.bump-out td:first-child {
  box-shadow: none;
}
table tr.alert td,
table tr.alert .html-table-cell, table tr.alert + tr.expanded[data-expandable-row] td, table .html-table-cell.alert td,
table .html-table-cell.alert .html-table-cell, table .html-table-cell.alert + tr.expanded[data-expandable-row] td, .html-table tr.alert td,
.html-table tr.alert .html-table-cell, .html-table tr.alert + tr.expanded[data-expandable-row] td, .html-table .html-table-cell.alert td,
.html-table .html-table-cell.alert .html-table-cell, .html-table .html-table-cell.alert + tr.expanded[data-expandable-row] td {
  border-bottom: 1px solid #dfb8b8;
}
table tr.alert[data-ajax-replace]:hover, table tr.alert[data-ajax-button]:hover, table .html-table-cell.alert[data-ajax-replace]:hover, table .html-table-cell.alert[data-ajax-button]:hover, .html-table tr.alert[data-ajax-replace]:hover, .html-table tr.alert[data-ajax-button]:hover, .html-table .html-table-cell.alert[data-ajax-replace]:hover, .html-table .html-table-cell.alert[data-ajax-button]:hover {
  background-color: #dfb8b8;
}
table[data-sidebar-view] tbody tr, table[data-sidebar-view] .html-table-body .html-table-row, .html-table[data-sidebar-view] tbody tr, .html-table[data-sidebar-view] .html-table-body .html-table-row {
  cursor: pointer;
}
table.outlined thead th, .html-table.outlined thead th {
  border-top: 1px solid #e5e5e5;
}
table.outlined td, table.outlined th, .html-table.outlined td, .html-table.outlined th {
  border-bottom: 1px solid #e5e5e5;
  width: calc(100% - 1px);
}
table.outlined tr td:first-child, table.outlined tr th:first-child, .html-table.outlined tr td:first-child, .html-table.outlined tr th:first-child {
  border-left: 1px solid #e5e5e5;
}
table.outlined tr td:last-child, table.outlined tr th:last-child, .html-table.outlined tr td:last-child, .html-table.outlined tr th:last-child {
  border-right: 1px solid #e5e5e5;
}
table.outlined.html-table, .html-table.outlined.html-table {
  border: 1px solid #e5e5e5;
}
table.divided thead th, table.divided tbody td, .html-table.divided thead th, .html-table.divided tbody td {
  border-right: 1px solid #e5e5e5;
}
table .larger-text, .html-table .larger-text {
  font-size: 14px;
}
table .long-text-wrapper, .html-table .long-text-wrapper {
  max-width: 400px;
  overflow: hidden;
  padding: 3px 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}
table.tall tbody tr td, table.tall thead tr th, table.tall tfoot tr th, .html-table.tall tbody tr td, .html-table.tall thead tr th, .html-table.tall tfoot tr th {
  min-height: 65px;
  padding-top: 10px;
  padding-bottom: 10px;
}
table.tall tbody tr td h1, table.tall tbody tr td h2, table.tall tbody tr td h3, table.tall tbody tr td h4, table.tall tbody tr td h5, table.tall tbody tr td h6, table.tall thead tr th h1, table.tall thead tr th h2, table.tall thead tr th h3, table.tall thead tr th h4, table.tall thead tr th h5, table.tall thead tr th h6, table.tall tfoot tr th h1, table.tall tfoot tr th h2, table.tall tfoot tr th h3, table.tall tfoot tr th h4, table.tall tfoot tr th h5, table.tall tfoot tr th h6, .html-table.tall tbody tr td h1, .html-table.tall tbody tr td h2, .html-table.tall tbody tr td h3, .html-table.tall tbody tr td h4, .html-table.tall tbody tr td h5, .html-table.tall tbody tr td h6, .html-table.tall thead tr th h1, .html-table.tall thead tr th h2, .html-table.tall thead tr th h3, .html-table.tall thead tr th h4, .html-table.tall thead tr th h5, .html-table.tall thead tr th h6, .html-table.tall tfoot tr th h1, .html-table.tall tfoot tr th h2, .html-table.tall tfoot tr th h3, .html-table.tall tfoot tr th h4, .html-table.tall tfoot tr th h5, .html-table.tall tfoot tr th h6 {
  margin-top: 5px;
  margin-bottom: 0px;
}
table.tall .html-table-body .html-table-row .html-table-cell, table.tall .html-table-head .html-table-row .html-table-cell, table.tall .html-table-foot .html-table-row .html-table-cell, .html-table.tall .html-table-body .html-table-row .html-table-cell, .html-table.tall .html-table-head .html-table-row .html-table-cell, .html-table.tall .html-table-foot .html-table-row .html-table-cell {
  padding-top: 16px 10px;
  height: auto;
  min-height: 65px;
}
table.tall .html-table-body .html-table-row .html-table-cell h1, table.tall .html-table-body .html-table-row .html-table-cell h2, table.tall .html-table-body .html-table-row .html-table-cell h3, table.tall .html-table-body .html-table-row .html-table-cell h4, table.tall .html-table-body .html-table-row .html-table-cell h5, table.tall .html-table-body .html-table-row .html-table-cell h6, table.tall .html-table-head .html-table-row .html-table-cell h1, table.tall .html-table-head .html-table-row .html-table-cell h2, table.tall .html-table-head .html-table-row .html-table-cell h3, table.tall .html-table-head .html-table-row .html-table-cell h4, table.tall .html-table-head .html-table-row .html-table-cell h5, table.tall .html-table-head .html-table-row .html-table-cell h6, table.tall .html-table-foot .html-table-row .html-table-cell h1, table.tall .html-table-foot .html-table-row .html-table-cell h2, table.tall .html-table-foot .html-table-row .html-table-cell h3, table.tall .html-table-foot .html-table-row .html-table-cell h4, table.tall .html-table-foot .html-table-row .html-table-cell h5, table.tall .html-table-foot .html-table-row .html-table-cell h6, .html-table.tall .html-table-body .html-table-row .html-table-cell h1, .html-table.tall .html-table-body .html-table-row .html-table-cell h2, .html-table.tall .html-table-body .html-table-row .html-table-cell h3, .html-table.tall .html-table-body .html-table-row .html-table-cell h4, .html-table.tall .html-table-body .html-table-row .html-table-cell h5, .html-table.tall .html-table-body .html-table-row .html-table-cell h6, .html-table.tall .html-table-head .html-table-row .html-table-cell h1, .html-table.tall .html-table-head .html-table-row .html-table-cell h2, .html-table.tall .html-table-head .html-table-row .html-table-cell h3, .html-table.tall .html-table-head .html-table-row .html-table-cell h4, .html-table.tall .html-table-head .html-table-row .html-table-cell h5, .html-table.tall .html-table-head .html-table-row .html-table-cell h6, .html-table.tall .html-table-foot .html-table-row .html-table-cell h1, .html-table.tall .html-table-foot .html-table-row .html-table-cell h2, .html-table.tall .html-table-foot .html-table-row .html-table-cell h3, .html-table.tall .html-table-foot .html-table-row .html-table-cell h4, .html-table.tall .html-table-foot .html-table-row .html-table-cell h5, .html-table.tall .html-table-foot .html-table-row .html-table-cell h6 {
  margin: 0px;
}
table.tall .html-table-body .html-table-row .html-table-cell.no-min, table.tall .html-table-head .html-table-row .html-table-cell.no-min, table.tall .html-table-foot .html-table-row .html-table-cell.no-min, .html-table.tall .html-table-body .html-table-row .html-table-cell.no-min, .html-table.tall .html-table-head .html-table-row .html-table-cell.no-min, .html-table.tall .html-table-foot .html-table-row .html-table-cell.no-min {
  min-height: none;
}
table.all-active tr, table.all-active .html-table-row, .html-table.all-active tr, .html-table.all-active .html-table-row {
  border-left: 5px solid #4286f4 !important;
}
table.all-active thead, table.all-active tfoot, table.all-active .html-table-head, table.all-active .html-table-foot, .html-table.all-active thead, .html-table.all-active tfoot, .html-table.all-active .html-table-head, .html-table.all-active .html-table-foot {
  border-width: 1px;
}
table.no-data td, table.no-data .html-table-cell, .html-table.no-data td, .html-table.no-data .html-table-cell {
  font-style: italic;
  color: #c9c9c9;
  text-align: center;
  border: 1px solid #e5e5e5 !important;
}
table [data-expandable-row], .html-table [data-expandable-row] {
  display: table-row !important;
  background-color: whitesmoke;
}
table [data-expandable-row] td, table [data-expandable-row] .html-table-cell, .html-table [data-expandable-row] td, .html-table [data-expandable-row] .html-table-cell {
  height: auto;
  border: none;
}
table [data-expandable-row] .information-row, .html-table [data-expandable-row] .information-row {
  padding: 10px 0px;
  display: none;
  position: relative;
  line-height: 25px;
}
table [data-expandable-row]:after, .html-table [data-expandable-row]:after {
  content: "";
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  border-top: 5px solid #c9c9c9;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  z-index: 1;
  left: 50%;
  margin-top: 0px;
}
table [data-expandable-row].expanded:after, .html-table [data-expandable-row].expanded:after {
  /* Removed this line so that the arrow never displays. Had difficulty getting it to be absolute in a table element because table elements can't be relative. */
  /*opacity:1;*/
  /*animation:bounce-fade 800ms infinite;*/
}
table [data-row-expand], table [data-row-collapse], .html-table [data-row-expand], .html-table [data-row-collapse] {
  cursor: pointer;
}
table.view-list, .html-table.view-list {
  border: 1px solid #e5e5e5;
}
table.view-list td, table.view-list th, table.view-list .html-table-cell, .html-table.view-list td, .html-table.view-list th, .html-table.view-list .html-table-cell {
  padding: 10px !important;
  font-size: 12px;
  height: 25px;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: middle;
}
table.view-list .html-table-cell, .html-table.view-list .html-table-cell {
  height: auto;
  min-height: 25px;
}
table.fixed-width-5 td, .html-table.fixed-width-5 td {
  width: 5%;
}
table.fixed-width-10 td, .html-table.fixed-width-10 td {
  width: 10%;
}
table.fixed-width-15 td, .html-table.fixed-width-15 td {
  width: 15%;
}
table.fixed-width-20 td, .html-table.fixed-width-20 td {
  width: 20%;
}
table.fixed-width-25 td, .html-table.fixed-width-25 td {
  width: 25%;
}
table.fixed-width-30 td, .html-table.fixed-width-30 td {
  width: 30%;
}
table.fixed-width-35 td, .html-table.fixed-width-35 td {
  width: 35%;
}
table.fixed-width-40 td, .html-table.fixed-width-40 td {
  width: 40%;
}
table.fixed-width-45 td, .html-table.fixed-width-45 td {
  width: 45%;
}
table.fixed-width-50 td, .html-table.fixed-width-50 td {
  width: 50%;
}
table.fixed-width-55 td, .html-table.fixed-width-55 td {
  width: 55%;
}
table.fixed-width-60 td, .html-table.fixed-width-60 td {
  width: 60%;
}
table.fixed-width-65 td, .html-table.fixed-width-65 td {
  width: 65%;
}
table.fixed-width-70 td, .html-table.fixed-width-70 td {
  width: 70%;
}
table.fixed-width-75 td, .html-table.fixed-width-75 td {
  width: 75%;
}
table.fixed-width-80 td, .html-table.fixed-width-80 td {
  width: 80%;
}
table.fixed-width-85 td, .html-table.fixed-width-85 td {
  width: 85%;
}
table.fixed-width-90 td, .html-table.fixed-width-90 td {
  width: 90%;
}
table.fixed-width-95 td, .html-table.fixed-width-95 td {
  width: 95%;
}
table .no-height, .html-table .no-height {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.table-action-bar {
  background-color: whitesmoke;
  padding: 0 15px;
  line-height: 36px;
}
.table-action-bar i {
  line-height: 12px;
}

.cell-datepicker {
  width: 100px !important;
}

.html-table-row {
  border-bottom: 2px solid #e5e5e5;
}

.html-table-head {
  border-top: 1px solid #e5e5e5;
}

.html-table .html-table-head .html-table-row .html-table-cell, .html-table .html-table-foot .html-table-row .html-table-cell, .html-table .html-table-body .html-table-row .html-table-cell {
  border-bottom: 0px !important;
  vertical-align: middle;
}
.html-table .html-table-head .html-table-row .html-table-cell.condensed, .html-table .html-table-foot .html-table-row .html-table-cell.condensed, .html-table .html-table-body .html-table-row .html-table-cell.condensed {
  padding-top: 8px;
}

table.shop-order-table,
table#location-table,
table#PurchaseOrders_Table {
  overflow: hidden;
}
table.shop-order-table [data-expandable-row],
table#location-table [data-expandable-row],
table#PurchaseOrders_Table [data-expandable-row] {
  cursor: default;
  /* Disable "active" state on entire components list row */
  /* Styling loader for components */
}
table.shop-order-table [data-expandable-row].bump-out,
table#location-table [data-expandable-row].bump-out,
table#PurchaseOrders_Table [data-expandable-row].bump-out {
  color: #212121;
}
table.shop-order-table [data-expandable-row].bump-out td:first-child,
table#location-table [data-expandable-row].bump-out td:first-child,
table#PurchaseOrders_Table [data-expandable-row].bump-out td:first-child {
  box-shadow: none;
}
table.shop-order-table [data-expandable-row] .component-cell,
table#location-table [data-expandable-row] .component-cell,
table#PurchaseOrders_Table [data-expandable-row] .component-cell {
  padding-top: 0;
  padding-bottom: 0;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row,
table#location-table [data-expandable-row] .component-cell .information-row,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row {
  padding: 0;
  pointer-events: none;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span, table.shop-order-table [data-expandable-row] .component-cell .information-row > div,
table#location-table [data-expandable-row] .component-cell .information-row > span,
table#location-table [data-expandable-row] .component-cell .information-row > div,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div {
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
  /* Height matches height of location divs. Will need to change if anything taller is put in this table. */
  height: 46px;
  /* Create fake "links" with before element from the location column */
  /* Note: in the future, the components should be refactored. Right now it just dumps all component data in each column so they are just stacked information. Each should receive a row. */
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link {
  pointer-events: all;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link::before, table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link::after, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link::before, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link::after,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link::before,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link::after,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link::before,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link::after,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link::after,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -100px;
  right: -10000px;
  transition: 0.2s ease-in-out;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link::before, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link::before,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link::before,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link::before {
  top: 0;
  cursor: pointer;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link:hover::before, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link:hover::before,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link:hover::before,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link:hover::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link:hover::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link:hover::before {
  background: #e5e5e5;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link::after, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link::after,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link::after,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link::after,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link::after,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link::after {
  height: 1px;
  background: #e5e5e5;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link:last-child::after, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link:last-child::after,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link:last-child::after,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link:last-child::after,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link:last-child::after,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link:last-child::after {
  display: none;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.component-row-link.active::before, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.component-row-link.active::before,
table#location-table [data-expandable-row] .component-cell .information-row > span.component-row-link.active::before,
table#location-table [data-expandable-row] .component-cell .information-row > div.component-row-link.active::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.component-row-link.active::before,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.component-row-link.active::before {
  background-color: whitesmoke;
}
table.shop-order-table [data-expandable-row] .component-cell .information-row > span.bump-out, table.shop-order-table [data-expandable-row] .component-cell .information-row > div.bump-out,
table#location-table [data-expandable-row] .component-cell .information-row > span.bump-out,
table#location-table [data-expandable-row] .component-cell .information-row > div.bump-out,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > span.bump-out,
table#PurchaseOrders_Table [data-expandable-row] .component-cell .information-row > div.bump-out {
  color: #4286f4;
  font-weight: 500;
}
table.shop-order-table [data-expandable-row] .component-cell:first-child span,
table#location-table [data-expandable-row] .component-cell:first-child span,
table#PurchaseOrders_Table [data-expandable-row] .component-cell:first-child span {
  margin-left: -10px;
}
table.shop-order-table [data-expandable-row] .component-cell:first-child .bump-out,
table#location-table [data-expandable-row] .component-cell:first-child .bump-out,
table#PurchaseOrders_Table [data-expandable-row] .component-cell:first-child .bump-out {
  box-shadow: 5px 0px 0px #4286f4 inset;
}
table.shop-order-table [data-expandable-row] [loading] .information-row,
table#location-table [data-expandable-row] [loading] .information-row,
table#PurchaseOrders_Table [data-expandable-row] [loading] .information-row {
  padding: 0;
}
table.shop-order-table [data-expandable-row] [loading] .information-row .loading-container,
table#location-table [data-expandable-row] [loading] .information-row .loading-container,
table#PurchaseOrders_Table [data-expandable-row] [loading] .information-row .loading-container {
  position: static;
}
table.shop-order-table [data-expandable-row] [loading] .information-row .loading-container::before,
table#location-table [data-expandable-row] [loading] .information-row .loading-container::before,
table#PurchaseOrders_Table [data-expandable-row] [loading] .information-row .loading-container::before {
  display: none;
}
table.shop-order-table [data-expandable-row] [loading] .information-row .loading-container .content .bar-container,
table#location-table [data-expandable-row] [loading] .information-row .loading-container .content .bar-container,
table#PurchaseOrders_Table [data-expandable-row] [loading] .information-row .loading-container .content .bar-container {
  width: calc(100% + 20px);
  margin-left: -10px;
}
table.shop-order-table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link:hover::before,
table#location-table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link:hover::before,
table#PurchaseOrders_Table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link:hover::before {
  background: #dfb8b8;
}
table.shop-order-table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link::after,
table#location-table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link::after,
table#PurchaseOrders_Table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link::after {
  background-color: #dfb8b8;
}
table.shop-order-table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link.active::before,
table#location-table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link.active::before,
table#PurchaseOrders_Table .alert + [data-expandable-row] .component-cell .information-row span.component-row-link.active::before {
  background-color: #dfb8b8;
}

table.overflow-table thead tr th {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 1;
}
table.overflow-table thead tr th::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #e5e5e5;
}

.table-overflow-wrapper {
  overflow-x: auto;
}
.table-overflow-wrapper th, .table-overflow-wrapper td {
  min-width: 250px;
}

.split-component-table th, .split-component-table td {
  white-space: nowrap;
  min-width: 250px;
  max-width: none !important;
}
.split-component-table th input[data-component-split=quantity], .split-component-table td input[data-component-split=quantity] {
  width: 80px;
}
.split-component-table .chosen-container {
  width: auto !important;
  display: block;
}
.split-component-table .chosen-container a {
  margin-bottom: 5px;
  float: none !important;
}

.table-preserve-whitespace thead th {
  white-space: pre;
}

.fixed-column.scrolling-table tr.expanded td {
  background-color: inherit;
}
.fixed-column.scrolling-table tr.expanded td:nth-child(3) {
  box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.2);
}
.fixed-column.scrolling-table tr.expanded td:nth-child(3)::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  top: -3px;
  height: 2px;
  background-color: white;
}
.fixed-column.scrolling-table tr.expanded td:nth-child(3)::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  left: 0;
  top: -1px;
  height: 2px;
  background-color: #d4d4d4;
  border-bottom: 1px solid whitesmoke;
}
.fixed-column.scrolling-table th:nth-child(2), .fixed-column.scrolling-table td:nth-child(2) {
  min-width: 48px;
}
.fixed-column.scrolling-table th:first-child, .fixed-column.scrolling-table th:nth-child(2), .fixed-column.scrolling-table th:nth-child(3), .fixed-column.scrolling-table td:first-child, .fixed-column.scrolling-table td:nth-child(2), .fixed-column.scrolling-table td:nth-child(3) {
  position: sticky;
  left: 0;
  box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.2);
  background-color: white;
  z-index: 1;
}
.fixed-column.scrolling-table th::after {
  content: "";
  background-color: #e5e5e5;
  height: 2px;
  bottom: -2px;
  left: 0;
  right: 0;
  position: absolute;
}
.fixed-column.scrolling-table [hidden] th:first-child, .fixed-column.scrolling-table [hidden] th:nth-child(2), .fixed-column.scrolling-table [hidden] th:nth-child(3), .fixed-column.scrolling-table [hidden] td:first-child, .fixed-column.scrolling-table [hidden] td:nth-child(2), .fixed-column.scrolling-table [hidden] td:nth-child(3) {
  box-shadow: none;
}

#main-shop-order-table {
  overflow: auto;
}
#main-shop-order-table th:nth-child(9), #main-shop-order-table td:nth-child(9) {
  border-right: 1px solid #e5e5e5;
}
#main-shop-order-table th {
  background-color: white;
  border-bottom: none;
  box-shadow: inset 0px -2px 0px 0px #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 1;
}

.next-delivery-bg {
  position: absolute;
  background-color: #e5e5e5;
  top: 2px;
  right: 2px;
  text-align: center;
  opacity: 0;
}

.scrolling-table-default td, .scrolling-table-default th {
  background-color: white;
}
.scrolling-table-default td:first-child, .scrolling-table-default th:first-child {
  position: sticky;
  left: 0;
  box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.scrolling-table-default .blue-bg th {
  background-color: #f2fbfe !important;
}

/* Firefox bug fix for borders not showing in some tables when the border is on a td */
@-moz-document url-prefix() {
  .shop-order-table {
    border-collapse: separate;
  }
}
/* =========================================================
~ FOOTER STYLES
~ All footer control styles.
========================================================= */
/**
* BUTTON STYLES
* All button styles and treatments
*/
button, form [data-ordered-list-input] [data-ordered-list-input-action=add] {
  outline: none;
  cursor: pointer;
  background: #009688;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 48px;
  border-radius: 4px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  border: 0px;
  min-height: 48px;
  padding: 0 20px;
  vertical-align: middle;
  font-weight: 700;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Hide shop order migration button from modal */
}
button.attached-btn, form [data-ordered-list-input] .attached-btn[data-ordered-list-input-action=add] {
  box-shadow: none;
  background-color: #4286f4;
  border-radius: 0px;
  text-transform: none;
  width: 100%;
  font-weight: 600;
  font-size: 14px;
  padding: 0 14px;
}
button.round-btn, form [data-ordered-list-input] .round-btn[data-ordered-list-input-action=add] {
  box-shadow: none;
  outline: none;
}
button i, form [data-ordered-list-input] [data-ordered-list-input-action=add] i {
  vertical-align: middle;
  line-height: 47px;
  margin-top: -3px;
  color: #ffffff;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
button .icon-spin, form [data-ordered-list-input] [data-ordered-list-input-action=add] .icon-spin {
  display: none !important;
}
button.no-click, form [data-ordered-list-input] .no-click[data-ordered-list-input-action=add] {
  opacity: 0.75;
  pointer-events: none;
  box-shadow: none;
}
button.outline, form [data-ordered-list-input] .outline[data-ordered-list-input-action=add] {
  background-color: transparent !important;
  border: 2px solid #c9c9c9;
  color: #c9c9c9;
  box-shadow: none;
  padding: 0 10px;
}
button.outline i, form [data-ordered-list-input] .outline[data-ordered-list-input-action=add] i {
  color: #c9c9c9;
  font-size: 18px;
}
button.outline:hover, form [data-ordered-list-input] .outline[data-ordered-list-input-action=add]:hover {
  background-color: #f9f9f9 !important;
  color: #9e9e9e;
}
button.outline:hover i, form [data-ordered-list-input] .outline[data-ordered-list-input-action=add]:hover i {
  color: #9e9e9e;
}
button.outline.primary, form [data-ordered-list-input] .outline.primary[data-ordered-list-input-action=add] {
  border-color: #4286f4;
  color: #4286f4;
}
button.outline.primary i, form [data-ordered-list-input] .outline.primary[data-ordered-list-input-action=add] i {
  color: #4286f4;
}
button.outline.secondary, form [data-ordered-list-input] .outline.secondary[data-ordered-list-input-action=add] {
  border-color: #009688;
  color: #009688;
}
button.outline.secondary i, form [data-ordered-list-input] .outline.secondary[data-ordered-list-input-action=add] i {
  color: #009688;
}
button.outline.orange, form [data-ordered-list-input] .outline.orange[data-ordered-list-input-action=add] {
  border-color: #ef6c00;
  color: #ef6c00;
}
button.outline.orange i, form [data-ordered-list-input] .outline.orange[data-ordered-list-input-action=add] i {
  color: #ef6c00;
}
button.outline.alert, form [data-ordered-list-input] .outline.alert[data-ordered-list-input-action=add] {
  border: 2px solid #b71c1c;
  color: #b71c1c;
  padding-top: 0;
  padding-bottom: 0;
}
button.outline.alert i, form [data-ordered-list-input] .outline.alert[data-ordered-list-input-action=add] i {
  color: #b71c1c;
}
button.short, form [data-ordered-list-input] .short[data-ordered-list-input-action=add] {
  min-height: 25px;
  line-height: 25px;
  font-size: 14px;
}
button.micro, form [data-ordered-list-input] .micro[data-ordered-list-input-action=add] {
  min-height: 18px;
  line-height: 18px;
  font-size: 12px;
}
button.micro i, form [data-ordered-list-input] .micro[data-ordered-list-input-action=add] i {
  font-size: 18px;
}
button.micro.plain, form [data-ordered-list-input] .micro.plain[data-ordered-list-input-action=add] {
  padding: 0;
}
button:focus, form [data-ordered-list-input] [data-ordered-list-input-action=add]:focus {
  outline: none;
}
button[data-after-text]:after, form [data-ordered-list-input] [data-after-text][data-ordered-list-input-action=add]:after {
  content: attr(data-after-text);
  color: #03a8f4;
  font-size: 11px;
  position: absolute;
  top: 100%;
  right: 0;
  text-align: right;
  width: 100px;
  text-transform: none;
  line-height: 18px;
  font-weight: normal;
}
button[data-after-text][disabled]:after, form [data-ordered-list-input] [data-after-text][disabled][data-ordered-list-input-action=add]:after {
  color: #9e9e9e;
}
button.link, form [data-ordered-list-input] .link[data-ordered-list-input-action=add] {
  background: none;
  line-height: normal;
  border-radius: 0px;
  box-shadow: none;
  text-transform: none;
  text-align: inherit;
  min-height: inherit;
  padding: inherit;
  vertical-align: inherit;
  font-weight: normal;
  color: #4286f4;
}
button.link.href, form [data-ordered-list-input] .link.href[data-ordered-list-input-action=add] {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14px;
}
button.link i, form [data-ordered-list-input] .link[data-ordered-list-input-action=add] i {
  color: #4286f4;
}
button.link:hover, form [data-ordered-list-input] .link[data-ordered-list-input-action=add]:hover {
  color: #1565c0;
}
button.link:hover i, form [data-ordered-list-input] .link[data-ordered-list-input-action=add]:hover i {
  color: #1565c0;
}
button.inline-block, form [data-ordered-list-input] .inline-block[data-ordered-list-input-action=add] {
  display: inline-block;
}
button.plain, form [data-ordered-list-input] .plain[data-ordered-list-input-action=add] {
  background: none;
  border-radius: 0px;
  box-shadow: none;
  text-align: inherit;
  color: #757575;
}
button.plain i, form [data-ordered-list-input] .plain[data-ordered-list-input-action=add] i {
  color: #757575;
}
button.plain[disabled], form [data-ordered-list-input] .plain[disabled][data-ordered-list-input-action=add] {
  color: #c9c9c9 !important;
}
button.plain[disabled] i, form [data-ordered-list-input] .plain[disabled][data-ordered-list-input-action=add] i {
  color: #c9c9c9;
}
button.primary, form [data-ordered-list-input] .primary[data-ordered-list-input-action=add] {
  background: #07a9f4;
}
button.white, form [data-ordered-list-input] .white[data-ordered-list-input-action=add] {
  background-color: #ffffff;
  color: #424242;
}
button.navigation, form [data-ordered-list-input] .navigation[data-ordered-list-input-action=add] {
  background-color: transparent;
  box-shadow: none;
  color: #757575;
  font-weight: normal;
  text-transform: none;
  min-height: 24px;
  line-height: 24px;
  padding: 0;
}
button.navigation i, form [data-ordered-list-input] .navigation[data-ordered-list-input-action=add] i {
  color: #212121;
}
button.navigation span, form [data-ordered-list-input] .navigation[data-ordered-list-input-action=add] span {
  color: #c9c9c9;
}
button.icon, form [data-ordered-list-input] .icon[data-ordered-list-input-action=add] {
  width: 29px;
  height: 29px;
  border: 2px solid #4286f4;
}
button[disabled], form [data-ordered-list-input] [disabled][data-ordered-list-input-action=add] {
  background-color: #c9c9c9;
  color: #9e9e9e;
  box-shadow: none;
  cursor: text;
}
button[disabled].outline, form [data-ordered-list-input] [disabled].outline[data-ordered-list-input-action=add] {
  border-color: #c9c9c9;
  color: #9e9e9e;
  background-color: transparent;
}
button[disabled] i, form [data-ordered-list-input] [disabled][data-ordered-list-input-action=add] i {
  color: #9e9e9e;
}
button[disabled].plain, form [data-ordered-list-input] [disabled].plain[data-ordered-list-input-action=add] {
  background-color: transparent;
}
button[data-line-item=removeRow], form [data-ordered-list-input] [data-line-item=removeRow][data-ordered-list-input-action=add] {
  padding: 5px;
  margin-top: 12px;
  min-height: auto;
  line-height: normal;
}
button[data-split-item=removeRow], form [data-ordered-list-input] [data-split-item=removeRow][data-ordered-list-input-action=add] {
  padding: 5px !important;
  margin: 0 !important;
  min-height: auto;
  line-height: normal;
}
button.attachment-button, form [data-ordered-list-input] .attachment-button[data-ordered-list-input-action=add] {
  border: 1px solid #e5e5e5;
  border-radius: 0;
  margin-top: -1px;
}
button.attachment-button:hover, form [data-ordered-list-input] .attachment-button[data-ordered-list-input-action=add]:hover {
  border-color: #ccc;
}
.dialog-box button[data-migrate-shop-order], .dialog-box form [data-ordered-list-input] [data-migrate-shop-order][data-ordered-list-input-action=add], form [data-ordered-list-input] .dialog-box [data-migrate-shop-order][data-ordered-list-input-action=add] {
  display: none;
}

.round-btn {
  width: 47px;
  height: 47px;
  line-height: 47px;
  text-align: center;
  color: #ffffff;
  background-color: #c9c9c9;
  outline: none;
  border-radius: 50% !important;
  display: inline-block;
  padding: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.round-btn i {
  vertical-align: middle;
  line-height: 47px;
  margin-top: -3px;
}
.round-btn.outline {
  background-color: transparent;
  border: 1px solid #9e9e9e;
  color: #9e9e9e;
}
.round-btn.outline:hover {
  border-color: #424242;
}
.round-btn.outline i {
  color: #9e9e9e;
}
.round-btn.outline.red {
  border-color: red;
  color: red;
}
.round-btn.outline.red i {
  color: red;
}
.round-btn.alert {
  background-color: #e53835;
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
}
.round-btn.alert i {
  color: #ffffff;
}

.touching-buttons {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62);
  display: inline-block;
  border-radius: 4px;
}
.touching-buttons button:nth-child(2), .touching-buttons form [data-ordered-list-input] [data-ordered-list-input-action=add]:nth-child(2), form [data-ordered-list-input] .touching-buttons [data-ordered-list-input-action=add]:nth-child(2) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: none;
  margin: 0;
  border-left-width: 0;
}
.touching-buttons button:first-child, .touching-buttons form [data-ordered-list-input] [data-ordered-list-input-action=add]:first-child, form [data-ordered-list-input] .touching-buttons [data-ordered-list-input-action=add]:first-child {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: none;
  margin: 0;
}
.touching-buttons button, .touching-buttons form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .touching-buttons [data-ordered-list-input-action=add] {
  margin-right: 0 !important;
  box-shadow: none !important;
}
.touching-buttons.small.white {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.32);
  border: 2px solid #e5e5e5;
  display: flex;
}
.touching-buttons.small.white button, .touching-buttons.small.white form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .touching-buttons.small.white [data-ordered-list-input-action=add] {
  background-color: white !important;
  height: 30px;
  min-height: 30px;
  padding: 0 6px;
  line-height: 30px;
  border-left: 2px solid #e5e5e5;
}
.touching-buttons.small.white button:first-child, .touching-buttons.small.white form [data-ordered-list-input] [data-ordered-list-input-action=add]:first-child, form [data-ordered-list-input] .touching-buttons.small.white [data-ordered-list-input-action=add]:first-child {
  border-left: none;
}
.touching-buttons.small.white button i, .touching-buttons.small.white form [data-ordered-list-input] [data-ordered-list-input-action=add] i, form [data-ordered-list-input] .touching-buttons.small.white [data-ordered-list-input-action=add] i {
  font-size: 20px;
  color: #424242;
}

a {
  color: #212121;
  text-decoration: none;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  cursor: pointer;
  transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.default {
  text-transform: uppercase;
  color: #757575;
  font-weight: 700;
}
a.slate {
  color: #78909c;
}
a i {
  vertical-align: middle;
  line-height: 47px;
  margin-top: -3px;
}
a.primary {
  color: #4286f4;
  text-transform: uppercase;
  font-weight: 700;
}
a.primary:hover {
  color: #1565c0;
}
a.secondary {
  color: #009688;
  text-transform: uppercase;
  font-weight: 700;
}
a.large {
  font-size: 16px;
  margin-left: 25px;
  margin-right: 25px;
}
a.small {
  font-size: 12px;
}
a .icon-spin {
  display: none !important;
}
a.no-click {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}
a.underline {
  text-decoration: underline;
}
a[disabled] {
  color: #c9c9c9;
  cursor: default;
}
a.inline-block {
  display: inline-block;
}
a.outline {
  line-height: 25px;
  font-size: 14px;
  text-transform: uppercase;
  border: 2px solid #1565c0;
  padding: 0 10px;
  min-height: 25px;
  border-radius: 4px;
}
a.outline:hover {
  text-decoration: none;
}

span.default {
  text-transform: uppercase;
  color: #757575;
  font-weight: 700;
}

.pointer, #search-result-message .filter-display .bubble, #search-result-message .filter-display form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol #search-result-message .filter-display li {
  cursor: pointer;
}

.no-events {
  pointer-events: none;
}

[href] {
  cursor: pointer;
}

.toggle-links a {
  margin: 0 5px;
  color: #9e9e9e;
  line-height: 30px;
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #9e9e9e;
  text-align: center;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle-links a i {
  font-size: 18px;
}
.toggle-links a.active {
  color: #ffffff;
  border-color: #1565c0;
  background-color: #1565c0;
}

.shipped-export {
  margin-right: 15px;
  margin-top: 20px;
  float: right;
}

/* =========================================================
~ DIALOG STYLES
~ All dialog box styles.
========================================================= */
.dialog-box {
  transition: top 800ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: top 800ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: top 800ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: top 800ms cubic-bezier(0, 0, 0.2, 1);
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
  bottom: 0;
  top: 100%;
  overflow: hidden;
  /* Set "Connection Lost" modal to go on top of any other modal that may be up when the system loses connection */
}
.dialog-box[data-dialog=communicationBreakdown] {
  z-index: 101;
}
.dialog-box p {
  line-height: 22px;
}
.dialog-box .overlay {
  z-index: 8;
}
.dialog-box .padded-container {
  padding: 20px;
}
.dialog-box .padded-container hr {
  margin-left: -20px;
  margin-right: -20px;
}
.dialog-box .padded-container > * {
  margin-bottom: 15px;
}
.dialog-box .padded-container > *:last-child {
  margin-bottom: 0;
}
.dialog-box .custom-dropdown .options {
  position: absolute;
  top: 100% !important;
}
.dialog-box form .input-group {
  border-bottom: none;
  padding: 0;
}
.dialog-box form .input-group label {
  margin-bottom: 10px;
}
.dialog-box form .input-group .combined-radios label {
  margin-bottom: 0;
}
.dialog-box .dialog-container {
  position: absolute;
  height: auto;
  overflow: auto;
  width: 470px;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -235px;
  left: 50%;
  transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
}
.dialog-box .dialog-container-changepn {
  position: absolute;
  height: auto;
  overflow: auto;
  width: 670px;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -355px;
  left: 50%;
  transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: top 400ms cubic-bezier(0, 0, 0.2, 1);
}
.dialog-box .dialog-header {
  transition: top 900ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: top 900ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: top 900ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: top 900ms cubic-bezier(0, 0, 0.2, 1);
  z-index: 3;
  min-height: 65px;
  top: 0;
  width: 100%;
  line-height: 22px;
  font-family: "Roboto", sans-serif;
  color: #ffffff;
  background-color: #03a8f4;
  padding: 22px;
  font-size: 20px;
}
.dialog-box .dialog-header i {
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  top: -2px;
}
.dialog-box .dialog-content {
  background-color: #ffffff;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.dialog-box .dialog-footer {
  padding: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #e5e5e5;
}
.dialog-box .dialog-footer button, .dialog-box .dialog-footer form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .dialog-box .dialog-footer [data-ordered-list-input-action=add] {
  margin-left: 15px;
}
.dialog-box .dialog-footer > .align-left {
  float: left;
  line-height: 48px;
}
.dialog-box .dialog-footer a {
  display: inline-block;
}
.dialog-box .dialog-footer a + a {
  margin-left: 30px;
}
.dialog-box.show {
  top: 0;
}
.dialog-box.show .overlay {
  width: 100%;
  height: 100%;
  opacity: 0.6;
  transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1), height 1ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
  -moz-transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1), height 1ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
  -ms-transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1), height 1ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
  -webkit-transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1), height 1ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
}
.dialog-box.widescreen .dialog-container {
  width: 664px;
}
.dialog-box.widescreen.bottom-to-top .dialog-container {
  margin-left: -325px;
}
.dialog-box.extra-wide .dialog-container {
  width: 90%;
}
.dialog-box.extra-wide.bottom-to-top .dialog-container {
  margin-left: -45%;
}
.dialog-box table tr td {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dialog-box .modal-body .overlay {
  display: none;
}
.dialog-box .error-display.padded-container {
  padding-bottom: 20px !important;
}
.dialog-box .error-display.padded-container .spacer-60 {
  height: 80px;
}
.dialog-box[data-dialog=unavailable] {
  z-index: 110;
}

.overlay {
  position: fixed;
  background-color: #212121;
  opacity: 0;
  z-index: 6;
  top: 0;
  width: 0;
  height: 0;
  transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, height 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, height 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, height 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: width 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, height 1ms cubic-bezier(0.4, 0, 0.2, 1) 400ms, opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.alert-box {
  background-color: #ffffff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.62);
  padding: 20px;
  position: fixed;
  bottom: 40px;
  left: calc(-100% - 250px);
  z-index: 7;
  width: 250px;
  border-radius: 4px;
  border-left: 5px solid #07a9f4;
  transition: left 900ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: left 900ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: left 900ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: left 900ms cubic-bezier(0, 0, 0.2, 1);
}
.alert-box.show {
  left: 40px;
}

.always-on-top {
  z-index: 10000;
}

/* =========================================================
~ FORM STYLES
~ All form styles, layouts, and themes.
========================================================= */
form {
  position: relative;
  /*
  * Docked for now until further notice.
  * select {color:$solid-grey;
  *	&.active {color:$black;}
  *	option {color:$black !important;}
  *	option[value=""] {color:$solid-grey !important;}
  * }
  */
}
form .input-group {
  padding: 24px;
  border-bottom: 1px solid #e5e5e5;
}
form .input-group.borderless {
  border-bottom: 0;
  padding-bottom: 0;
}
form .input-group .row:nth-of-type(1) .checkbox, form .input-group .row:nth-of-type(1) .radio {
  border-top: none;
}
form .input-group.minimal {
  border: 0;
  padding: 0;
}
form .input-group:last-child {
  border-bottom: none;
}
form [data-input-prefix], form [data-input-suffix] {
  position: relative;
}
form [data-input-prefix] input, form [data-input-suffix] input {
  padding-left: 25px;
}
form [data-input-prefix]:after, form [data-input-suffix]:after {
  content: attr(data-input-prefix);
  position: absolute;
  left: 10px;
  top: 18px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #c9c9c9;
}
form [data-input-suffix] {
  position: relative;
}
form [data-input-suffix] input {
  padding-right: 50px;
  padding-left: 15px;
}
form [data-input-suffix]:after {
  content: attr(data-input-suffix);
  left: auto;
  right: 10px;
}
form label {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
}
form label.horiz-label {
  width: 100%;
  margin-bottom: 10px;
  display: block;
}
form label.small {
  font-size: 12px;
}
form input.input-small {
  font-size: 12px;
  line-height: 32px;
  min-height: 32px;
  outline: none;
}
form input, form select {
  border: 1px solid #e5e5e5;
  font-size: 20px;
  line-height: 48px;
  min-height: 48px;
  width: 100%;
  padding: 0 15px;
  font-family: "Roboto", sans-serif;
}
form input[type=text], form input[type=tel], form input[type=number], form input[type=search], form select[type=text], form select[type=tel], form select[type=number], form select[type=search] {
  width: 100%;
}
form input.shadow, form select.shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
}
form input.error, form select.error {
  background-color: #ffebee;
}
form input[readonly], form input[disabled], form select[readonly], form select[disabled] {
  opacity: 0.5;
}
form input[readonly].plaintext, form input[disabled].plaintext, form select[readonly].plaintext, form select[disabled].plaintext {
  opacity: 1;
  background: transparent;
  padding: 0;
  min-height: auto;
  line-height: normal;
  border: none;
}
form input[readonly].no-bg, form input[disabled].no-bg, form select[readonly].no-bg, form select[disabled].no-bg {
  opacity: 1;
  background-color: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
form .field-subtext {
  display: inline-block;
  margin-top: 5px !important;
  color: #9e9e9e;
  font-style: italic;
  min-height: auto;
  font-size: 12px;
  padding: 0;
  max-width: none;
}
form .field-subtext i.material-icons {
  font-size: 16px;
}
form input[type=file] {
  display: none;
}
form input[type=file] + label {
  width: 100%;
  position: relative;
  display: inline-block;
}
form input[type=file] + label:before {
  cursor: pointer;
  background: #009688;
  line-height: 48px;
  border-radius: 4px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
  content: "Browse";
  width: 100px;
  padding: 0;
}
form input[type=file] + label:after {
  content: attr(data-file-name);
  white-space: nowrap;
  position: absolute;
  left: 120px;
  border-bottom: 1px solid #e5e5e5;
  color: #757575;
  text-transform: none;
  font-weight: normal;
  width: calc(100% - 120px);
  line-height: 48px;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}
form .text-danger.error {
  color: #b71c1c;
  margin-top: 10px;
}
form textarea {
  border: 1px solid #e5e5e5;
  padding: 15px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
  font-family: "Roboto", sans-serif;
  max-width: 100%;
  min-width: 100%;
  line-height: normal;
}
form textarea.error {
  background-color: #ffebee;
}
form input.short, form select.short, form textarea.short {
  line-height: 30px;
  min-height: 30px;
  font-size: 14px;
  padding: 0 5px;
}
form select.short.short-select {
  appearance: button;
}
form select {
  cursor: pointer;
  /* Firefox bug fix for borders not showing in some tables when the border is on a td */
}
form select optgroup {
  background-color: whitesmoke;
  color: #757575;
}
form select optgroup option {
  background-color: #ffffff;
  color: #212121;
}
@-moz-document url-prefix() {
  form select {
    height: 46px;
  }
  form select option {
    height: 44px;
  }
}
form .step {
  opacity: 0;
  overflow: hidden;
  max-height: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  z-index: 1;
  position: relative;
}
form .step.active {
  opacity: 1;
  max-height: 100%;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  z-index: 2;
}
form [data-auto-scale] {
  transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
form .form-footer {
  padding: 24px;
  text-align: right;
}
form .form-footer button, form .form-footer [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .form-footer [data-ordered-list-input-action=add] {
  margin-left: 15px;
}
form .form-footer > .align-left {
  float: left;
  line-height: 48px;
}
form .form-footer a + a {
  margin-left: 30px;
}
form .form-footer.no-pad {
  padding-bottom: 6px !important;
}
form .minimal {
  position: relative;
}
form .minimal label {
  font-size: 12px;
  color: #c9c9c9;
}
form .minimal label:after {
  content: "";
  height: 2px;
  background-color: #03a8f4;
  width: 0px;
  position: absolute;
  top: 80px;
  margin-left: 50%;
  left: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
}
form .minimal input {
  background: transparent;
  box-shadow: none;
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid #e5e5e5;
  padding: 0;
  width: 100%;
  font-size: 30px;
  padding-bottom: 10px;
  min-height: 60px;
}
form .minimal input:focus {
  box-shadow: none;
}
form .minimal input:-webkit-autofill, form .minimal textarea:-webkit-autofill, form .minimal select:-webkit-autofill {
  background: transparent;
  box-shadow: none;
  outline: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
form .minimal .bubble, form .minimal [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .minimal li {
  color: #9e9e9e;
  font-size: 12px;
}
form .minimal .bubble.input-float, form .minimal [data-ordered-list-input] ol li.input-float, form [data-ordered-list-input] ol .minimal li.input-float {
  position: absolute;
  top: 30px;
  z-index: 10;
  line-height: 24px;
  overflow: hidden;
  opacity: 1;
  right: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
form .minimal.focus label:after {
  width: 100%;
  margin-left: 0;
}
form .minimal .email {
  padding-right: 70px;
}
form .minimal.hide-bubble .email {
  padding-right: 0;
}
form .minimal.hide-bubble .bubble.input-float, form .minimal.hide-bubble [data-ordered-list-input] ol li.input-float, form [data-ordered-list-input] ol .minimal.hide-bubble li.input-float {
  opacity: 0;
  right: -100%;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
form .search {
  position: relative;
}
form .search > i {
  position: absolute;
  /*left:105px;*/
  left: 13px;
  line-height: 48px;
  top: 2px;
  color: #212121;
  opacity: 0.75;
}
form .search input {
  padding-left: 45px;
  border-radius: 30px;
  outline: none;
  display: inline-block;
  width: calc(100% - 60px);
  margin-right: 5px;
}
form .search button, form .search [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .search [data-ordered-list-input-action=add] {
  display: inline-block;
  vertical-align: bottom;
}
form .search button i, form .search [data-ordered-list-input] [data-ordered-list-input-action=add] i, form [data-ordered-list-input] .search [data-ordered-list-input-action=add] i {
  line-height: 52px;
  left: 12px;
}
form .search .title {
  position: absolute;
  left: 0;
  margin: 0;
  line-height: 50px;
}
form .password {
  position: relative;
}
form .password i {
  position: absolute;
  right: 0;
  padding: 0 12px;
  line-height: 48px;
  bottom: 10px;
  color: #212121;
  opacity: 0.75;
  display: none;
  cursor: pointer;
}
form .password input {
  padding-right: 45px;
}
form [data-suggested-date-ui] {
  opacity: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  max-height: 0;
  overflow: hidden;
}
form [data-suggested-date-ui].show {
  opacity: 1;
  max-height: 100%;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
}
form .inline-form {
  margin-left: -22px;
  margin-right: -22px;
  border-top: 1px solid #e5e5e5;
}
form#shop-order-add-form {
  overflow: hidden;
}
form .inline-btn {
  position: relative;
  /* This margin will account for the text included with the button under the input. */
  /*margin-bottom: 18px;*/
  /* This padding will account for the width of the "absolute" button on the right. */
  padding-right: 22px;
}
form .inline-btn button, form .inline-btn [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .inline-btn [data-ordered-list-input-action=add] {
  position: absolute;
  background-color: #03a8f4;
  width: 22px;
  padding: 0;
  line-height: 32px;
  min-height: 0;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  box-shadow: none;
  top: 0;
  right: -22px;
  bottom: 0;
}
form .inline-btn button[disabled], form .inline-btn [data-ordered-list-input] [disabled][data-ordered-list-input-action=add], form [data-ordered-list-input] .inline-btn [disabled][data-ordered-list-input-action=add] {
  background-color: #c9c9c9;
  color: #9e9e9e;
  box-shadow: none;
}
form .inline-btn button[disabled] i, form .inline-btn [data-ordered-list-input] [disabled][data-ordered-list-input-action=add] i, form [data-ordered-list-input] .inline-btn [disabled][data-ordered-list-input-action=add] i {
  color: #9e9e9e;
}
form .inline-btn button i, form .inline-btn [data-ordered-list-input] [data-ordered-list-input-action=add] i, form [data-ordered-list-input] .inline-btn [data-ordered-list-input-action=add] i {
  font-size: 15px;
  vertical-align: sub !important;
}
form .inline-btn.data-after-text {
  display: flex;
  padding-right: 0;
  padding-bottom: 22px;
}
form .inline-btn.data-after-text input {
  height: max-content;
}
form .inline-btn.data-after-text button, form .inline-btn.data-after-text [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .inline-btn.data-after-text [data-ordered-list-input-action=add] {
  position: static;
  border: 1px solid #03a8f4;
}
form .inline-btn.data-after-text button:after, form .inline-btn.data-after-text [data-ordered-list-input] [data-ordered-list-input-action=add]:after, form [data-ordered-list-input] .inline-btn.data-after-text [data-ordered-list-input-action=add]:after {
  bottom: 0;
  top: auto;
}
form .inline-btn.data-after-text input + button, form .inline-btn.data-after-text [data-ordered-list-input] input + [data-ordered-list-input-action=add], form [data-ordered-list-input] .inline-btn.data-after-text input + [data-ordered-list-input-action=add], form .inline-btn.data-after-text .ghost-block + button, form .inline-btn.data-after-text [data-ordered-list-input] .ghost-block + [data-ordered-list-input-action=add], form [data-ordered-list-input] .inline-btn.data-after-text .ghost-block + [data-ordered-list-input-action=add] {
  line-height: 48px;
}
form .inline-btn.data-after-text input.short + button, form .inline-btn.data-after-text [data-ordered-list-input] input.short + [data-ordered-list-input-action=add], form [data-ordered-list-input] .inline-btn.data-after-text input.short + [data-ordered-list-input-action=add] {
  line-height: 30px;
}
form [data-ordered-list-input] .col-xs-9 {
  padding-right: 0px !important;
}
form [data-ordered-list-input] [data-ordered-list-input-action=add] {
  background-color: transparent;
  box-shadow: none;
  min-height: 42px;
  color: #1565c0;
  border: 2px solid #1565c0;
  width: 100%;
  line-height: 42px;
  padding: 0px;
  display: inline-block;
}
form [data-ordered-list-input] ol li {
  margin-bottom: 10px;
}
form [data-ordered-list-input] ol li.tag {
  display: inline-flex;
}
form [data-ordered-list-input] ol li.tag a {
  margin-left: 5px;
}
form [data-ordered-list-input] .no-data {
  font-style: italic;
  color: #c9c9c9;
  text-align: center;
  border: 1px solid #e5e5e5;
  padding: 10px;
}
form .radio label:before, form .radio .box:before {
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 14px;
}
form .radio input:checked + label:before, form .radio input:checked + .box:before {
  content: "fiber_manual_record";
}
form .radio.black-color label:before, form .radio.black-color .box:before {
  border-color: #212121;
}
form .combined-radios {
  display: inline-flex;
}
form .combined-radios .bubble-checkbox {
  flex: 1;
}
form .combined-radios .bubble-checkbox label {
  display: block;
  text-align: center;
}
form .combined-radios .bubble-checkbox:first-child label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
form .combined-radios .bubble-checkbox:nth-child(n+2) label {
  border-radius: 0;
  border-left: none;
}
form .combined-radios .bubble-checkbox:last-child label {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
form .combined-radios.extra-short label {
  font-size: 12px;
  padding: 8px 10px;
}
form .combined-radios.default-radios .radio, form .combined-radios.default-radios .xradio {
  border: 1px solid #c9c9c9;
  position: relative;
}
form .combined-radios.default-radios .radio input, form .combined-radios.default-radios .xradio input {
  width: 0;
}
form .combined-radios.default-radios .radio input::before, form .combined-radios.default-radios .xradio input::before {
  content: "";
}
form .combined-radios.default-radios .radio input:checked::before, form .combined-radios.default-radios .xradio input:checked::before {
  background-color: #1565c0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
form .input-controls-wrap {
  position: relative;
}
form .input-controls-wrap input {
  padding-right: 125px;
}
form .input-controls-wrap .input-controls {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -8px;
  font-size: 0;
}
form .input-controls-wrap .input-controls > * {
  display: inline-block;
}
form .input-controls-wrap .input-controls .aro-text {
  padding-right: 20px;
  border-right: 1px solid #9e9e9e;
}
form .input-controls-wrap .input-controls .delivery-calendar {
  min-height: 0;
  line-height: 16px;
  padding: 0;
  margin: -4px 0 0 20px;
  width: auto;
}

.checkbox, form .radio {
  display: inline-flex;
  border-top: 1px solid #e5e5e5;
  cursor: pointer;
}
.checkbox label, form .radio label,
.checkbox .box,
form .radio .box {
  line-height: inherit;
  font-size: 14px;
  cursor: pointer;
  position: relative;
}
.checkbox label:before, form .radio label:before,
.checkbox .box:before,
form .radio .box:before {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e5e5;
  line-height: 12px;
  margin-right: 10px;
  content: "";
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-radius: 2px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: "Material Icons";
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  color: #ffffff;
}
.checkbox .box:before, form .radio .box:before {
  font-size: 14px;
}
.checkbox.dense-grey-color .box:before, form .dense-grey-color.radio .box:before {
  border-color: #9e9e9e;
}
.checkbox input, form .radio input {
  display: none;
}
.checkbox input:checked + label:before, form .radio input:checked + label:before, .checkbox input:checked + .box:before, form .radio input:checked + .box:before {
  background-color: #03a8f4;
  border-color: #03a8f4;
  content: "check";
}
.checkbox.small .box::before, form .small.radio .box::before {
  margin-right: 5px;
}

.bubble-checkbox {
  margin: 0 10px 10px 0;
  display: inline-block;
}
.bubble-checkbox input {
  display: none;
}
.bubble-checkbox input:checked + label {
  background-color: #03a8f4;
  color: #ffffff;
  border-color: #03a8f4 !important;
}
.bubble-checkbox label {
  border: 1px solid #757575;
  background-color: transparent;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  background-color: transparent;
  font-size: 14px;
  text-transform: none;
  padding: 10px 18px;
  border-radius: 4px;
  border-color: #c9c9c9 !important;
  display: inline-block;
  cursor: pointer;
  color: #757575;
}
.bubble-checkbox.cat-production input:checked + label {
  background-color: #ffe082;
  color: #212121;
  border-color: #ffe082 !important;
}

.custom-checkbox {
  display: inline-block;
  position: relative;
}
.custom-checkbox input {
  display: none;
}
.custom-checkbox label {
  border: 2px solid #e5e5e5;
  font-size: 16px;
  line-height: 65px;
  opacity: 0.75;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-right: 15px;
  cursor: pointer;
  position: relative;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-checkbox label:before {
  width: 10px;
  height: 10px;
  border: 2px solid #e5e5e5;
  position: absolute;
  top: -5px;
  right: -7px;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #ffffff;
  border-radius: 2px;
  content: "";
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-checkbox label:after {
  color: #ffffff;
  line-height: 10px;
  font-size: 12px;
  position: absolute;
  top: -3px;
  right: -6px;
  content: "check";
  font-family: "Material Icons";
  opacity: 0;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-checkbox.small label {
  line-height: 26px !important;
}
.custom-checkbox input:checked + label {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
  opacity: 1;
}
.custom-checkbox input:checked + label:before {
  background-color: #e5e5e5;
}
.custom-checkbox input:checked + label:after {
  opacity: 1;
}
.custom-checkbox.cat-production label {
  border-color: #ffe082;
}
.custom-checkbox.cat-production label:before {
  border-color: #ffca28;
}
.custom-checkbox.cat-production input:checked + label:before {
  background-color: #ffca28;
}
.custom-checkbox.cat-production .link {
  position: absolute;
  height: 25px;
  left: 42px;
  top: 100%;
}
.custom-checkbox.cat-production .link i {
  font-size: 16px;
  color: #c9c9c9;
  position: absolute;
  left: -5px;
  top: 0;
  line-height: 25px;
}
.custom-checkbox.cat-production .link:after {
  content: "/";
  color: #c9c9c9;
  font-weight: 700;
  left: 2px;
  top: 0;
  line-height: 25px;
}
.custom-checkbox.cat-production .link:before {
  content: "";
  width: 1px;
  height: 25px;
  background-color: #e5e5e5;
  left: 2px;
  position: absolute;
  top: 0;
}
.custom-checkbox.cat-production input:checked + label + .link:after {
  opacity: 0;
}
.custom-checkbox.cat-final-production label {
  border-color: #d1c4e9;
}
.custom-checkbox.cat-final-production label:before {
  border-color: #9575cd;
}
.custom-checkbox.cat-final-production input:checked + label:before {
  background-color: #9575cd;
}
.custom-checkbox.cat-shipping label {
  border-color: #a5d6a7;
}
.custom-checkbox.cat-shipping label:before {
  border-color: #66bb6a;
}
.custom-checkbox.cat-shipping input:checked + label:before {
  background-color: #66bb6a;
}

.default-checkbox {
  display: inline-block;
  position: relative;
}
.default-checkbox input {
  display: none;
}
.default-checkbox label {
  opacity: 0.75;
  text-align: center;
  display: inline-block;
  margin-right: 15px;
  cursor: pointer;
  position: relative;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.default-checkbox .box {
  border: 1px solid #e5e5e5;
  line-height: 65px;
  width: 65px;
  height: 65px;
  text-align: center;
  transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.default-checkbox input:checked + label {
  opacity: 1;
}
.default-checkbox input:checked + label .box {
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
}
.default-checkbox input:checked + label .box .circle {
  float: none;
}
.default-checkbox .difficulty-indicator .circle {
  width: 10px;
  height: 10px;
}
.default-checkbox .labeling {
  width: 100%;
  text-align: center;
  color: #9e9e9e;
  line-height: 30px;
}
.default-checkbox i {
  width: 100%;
  line-height: 65px;
  font-size: 36px;
}
.default-checkbox .difficulty-indicator .circle {
  margin-bottom: 0;
}

.ghost-block {
  border: 1px solid #e5e5e5;
  padding: 12px;
  padding-bottom: 0px;
  position: relative;
  /* Styling to fix the show/hide when switching between pre-production/production statuses */
}
.ghost-block.plain {
  border: none;
  padding: 0;
}
.ghost-block label.horiz-label {
  font-size: 12px;
  color: #c9c9c9;
  font-weight: 700;
}
.ghost-block input, .ghost-block select, .ghost-block textarea {
  border: none;
  box-shadow: none;
  padding: 0;
  font-size: 14px;
}
.ghost-block .input-group {
  padding: 0;
  border: none;
  margin-top: 10px;
}
.ghost-block .input-group:first-child {
  margin-top: 0;
}
.ghost-block select {
  border-bottom: 4px solid #e5e5e5;
  width: auto;
  transition: 0.2s ease-in-out;
}
.ghost-block select:hover {
  border-bottom-color: #c9c9c9;
}
.ghost-block select.small {
  line-height: 32px;
  min-height: 32px;
  height: 32px;
}
.ghost-block .custom-checkbox + select {
  /* This is the first select dropdown that appears for statuses. This is pre-prod. */
  transition: none;
}
.ghost-block .custom-checkbox + select + select {
  /* This is any select that follows a select. In this case it is production. */
  transition: none;
  transform: translateX(-100%);
}
.ghost-block .custom-checkbox + select[disabled] + select {
  transform: none;
}
.ghost-block .location-options {
  white-space: nowrap;
  position: relative;
}
.ghost-block .location-options select {
  position: absolute;
  left: 0;
  transition: none !important;
  opacity: 1 !important;
}
.ghost-block .location-options select.dropdown-pre-prod {
  border-color: #c9c9c9;
}
.ghost-block .location-options select.dropdown-prod {
  border-color: #ffca28;
}
.ghost-block .location-options button[data-revert-button], .ghost-block .location-options form [data-ordered-list-input] [data-revert-button][data-ordered-list-input-action=add], form [data-ordered-list-input] .ghost-block .location-options [data-revert-button][data-ordered-list-input-action=add] {
  margin-top: 37px !important;
}
.ghost-block select + .text-danger.error {
  width: auto;
  display: inline-block !important;
  margin-left: 10px;
}
.ghost-block textarea {
  width: 100%;
  min-height: 70px;
  outline: none;
  box-shadow: none;
  line-height: 16px;
}
.ghost-block textarea::-webkit-input-placeholder {
  transition: all 400ms ease;
  font-size: 36px;
  line-height: 36px;
  font-weight: 300;
  color: #e5e5e5;
}
.ghost-block textarea::-moz-placeholder {
  transition: all 400ms ease;
  font-size: 36px;
  line-height: 36px;
  font-weight: 300;
  color: #e5e5e5;
}
.ghost-block textarea:-ms-input-placeholder {
  transition: all 400ms ease;
  font-size: 36px;
  line-height: 36px;
  font-weight: 300;
  color: #e5e5e5;
}
.ghost-block textarea:-moz-placeholder {
  transition: all 400ms ease;
  font-size: 36px;
  line-height: 36px;
  font-weight: 300;
  color: #e5e5e5;
}
.ghost-block textarea:focus::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 20px;
}
.ghost-block textarea:focus::-moz-placeholder {
  font-size: 16px;
  line-height: 20px;
}
.ghost-block textarea:focus:-ms-input-placeholder {
  font-size: 16px;
  line-height: 20px;
}
.ghost-block textarea:focus:-moz-placeholder {
  font-size: 16px;
  line-height: 20px;
}
.ghost-block button, .ghost-block form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .ghost-block [data-ordered-list-input-action=add] {
  position: relative;
  margin-top: -10px;
  margin-bottom: 10px;
}
.ghost-block.focus {
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
  border: 1px solid #03a8f4 !important;
}
.ghost-block #file-name-display {
  clear: left;
  display: inline-block;
  padding-right: 60px;
  word-break: break-all;
}
.ghost-block .custom-checkbox {
  /* Remove right margin of last checkbox option */
}
.ghost-block .custom-checkbox label {
  border-bottom: 4px solid transparent;
  padding: 0 5px;
  font-size: 14px;
  box-shadow: none !important;
  line-height: 47px;
  width: auto;
  border-top: none;
  border-left: none;
  border-right: none;
  color: #9e9e9e;
  transition: 0.2s ease-in-out;
}
.ghost-block .custom-checkbox label:after, .ghost-block .custom-checkbox label:before {
  display: none;
}
.ghost-block .custom-checkbox label:hover {
  color: #757575;
}
.ghost-block .custom-checkbox input:checked + label {
  color: #424242;
}
.ghost-block .custom-checkbox.cat-pre-production input:checked + label {
  border-color: #c9c9c9;
}
.ghost-block .custom-checkbox.cat-production input:checked + label {
  border-color: #ffca28;
}
.ghost-block .custom-checkbox.cat-final-production input:checked + label {
  border-color: #9575cd;
}
.ghost-block .custom-checkbox.cat-shipping input:checked + label {
  border-color: #66bb6a;
}
.ghost-block .custom-checkbox:last-child label {
  margin-right: 0;
}

/* Styling to fix the show/hide when switching between pre-production/production statuses in the import component modal */
.select-option {
  background: red;
  white-space: nowrap;
  overflow-x: hidden;
}
.select-option select {
  /* This is the first select dropdown that appears for statuses. This is pre-prod. */
  transition: none;
}
.select-option select + select {
  /* This is any select that follows a select. In this case it is production. */
  transition: none;
  transform: translateX(-100%);
}
.select-option select[disabled] + select {
  transform: none;
}

.attaching-file {
  border: 1px solid #e5e5e5;
  padding: 3px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  font-size: 12px;
}

#remove-file-button {
  display: inline-block;
  color: #b71c1c;
  border: 1px solid #b71c1c;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  margin-left: 5px;
}

.floating {
  position: absolute;
  border: 1px solid #e5e5e5;
  background-color: whitesmoke;
}
.floating label {
  line-height: 30px;
  font-weight: normal;
  margin: 0 12px;
  color: #424242;
}
.floating label:before {
  border-color: #c9c9c9;
}
.floating label:after {
  left: 2px;
}
.floating.top {
  top: 1px;
}
.floating.right {
  right: 1px;
}
.floating.left {
  left: 1px;
}
.floating.bottom {
  bottom: 1px;
}

.display-ui {
  border: 1px solid #e5e5e5;
  padding: 12px;
  position: relative;
}
.display-ui label {
  font-size: 12px;
  color: #c9c9c9;
}
.display-ui input, .display-ui select, .display-ui textarea {
  box-shadow: none;
  border: none;
  padding: 0;
  font-size: 30px;
  outline: none;
  line-height: 41px;
  width: 100%;
}
.display-ui input::-webkit-input-placeholder, .display-ui select::-webkit-input-placeholder, .display-ui textarea::-webkit-input-placeholder {
  font-style: italic;
  color: #e5e5e5;
  font-weight: normal;
}
.display-ui input::-moz-placeholder, .display-ui select::-moz-placeholder, .display-ui textarea::-moz-placeholder {
  font-style: italic;
  color: #e5e5e5;
  font-weight: normal;
}
.display-ui input:-ms-input-placeholder, .display-ui select:-ms-input-placeholder, .display-ui textarea:-ms-input-placeholder {
  font-style: italic;
  color: #e5e5e5;
  font-weight: normal;
}
.display-ui input:-moz-placeholder, .display-ui select:-moz-placeholder, .display-ui textarea:-moz-placeholder {
  font-style: italic;
  color: #e5e5e5;
  font-weight: normal;
}
.display-ui .context {
  position: relative;
  padding-right: 80px;
}
.display-ui .action {
  position: absolute;
  bottom: 12px;
  right: 12px;
}
.display-ui .action button, .display-ui .action form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .display-ui .action [data-ordered-list-input-action=add] {
  height: 58px;
  width: 58px;
  padding: 0;
}
.display-ui .action button i, .display-ui .action form [data-ordered-list-input] [data-ordered-list-input-action=add] i, form [data-ordered-list-input] .display-ui .action [data-ordered-list-input-action=add] i {
  font-size: 33px;
}
.display-ui .toggle {
  width: 100%;
  margin-top: 14px;
  float: left;
}
.display-ui .toggle label {
  float: left;
}
.display-ui.focus {
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
  border-bottom: 2px solid #03a8f4;
}
.display-ui.focus .error + .text-danger.error:before {
  opacity: 1;
}
.display-ui[data-input-prefix] input {
  padding-left: 25px;
}
.display-ui[data-input-prefix]:after {
  left: 12px;
  top: 40px;
  font-size: 24px;
}
.display-ui.no-perimiter {
  padding: 0;
  border: none;
}
.display-ui .error {
  background-color: transparent;
}
.display-ui .error + .text-danger.error:after {
  content: "";
  position: absolute;
  width: calc(100% + 24px);
  height: calc(100% + 24px);
  top: -12px;
  left: -12px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  background-color: #b71c1c;
}
.display-ui .error + .text-danger.error:before {
  content: "";
  position: absolute;
  bottom: -14px;
  height: 2px;
  background-color: #b71c1c;
  width: calc(100% + 24px);
  left: -12px;
  opacity: 0;
}

.toggle {
  display: inline;
}
.toggle label {
  width: 44px;
  height: 20px;
  position: relative;
  background: #c9c9c9;
  border-radius: 10px;
  float: right;
  cursor: pointer;
  transition: background-color 300ms ease;
  -moz-transition: background-color 300ms ease;
  -ms-transition: background-color 300ms ease;
  -webkit-transition: background-color 300ms ease;
}
li.no-nav .toggle label {
  cursor: default;
}
.toggle label span {
  width: 25px;
  height: 25px;
  position: absolute;
  left: -2px;
  top: -3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.32);
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
}
.toggle label + span {
  font-size: 12px;
  margin-left: 10px;
  line-height: 20px;
}
.toggle input:checked + label {
  background-color: #03a8f4;
}
.toggle input:checked + label span {
  left: 22px;
  background-color: #1565c0;
}
.toggle.mongo label {
  float: left;
  width: 66px;
  height: 30px;
  border-radius: 15px;
}
.toggle.mongo label span {
  width: 37.5px;
  height: 37.5px;
  left: -3px;
  top: -4px;
}
.toggle.mongo label + span {
  font-size: 14px;
  line-height: 30px;
}
.toggle.mongo input:checked + label span {
  left: 33px;
}
.toggle.itty-bitty label {
  float: left;
  width: 33px;
  height: 15px;
  border-radius: 8px;
}
.toggle.itty-bitty label span {
  width: 18.5px;
  height: 18.5px;
  left: -1px;
  top: -2px;
}
.toggle.itty-bitty label + span {
  font-size: 12px;
  line-height: 15px;
}
.toggle.itty-bitty input:checked + label span {
  left: 16px;
}
.toggle.align-right {
  float: right;
}
.toggle.disabled label + span {
  opacity: 0.5;
}
.toggle.disabled label {
  opacity: 0.3;
}

label.x-small {
  font-size: 10px;
  display: flex;
  align-items: center;
}
label.x-small .toggle {
  margin-left: 8px;
}
label.x-small .toggle label {
  height: 12px;
  width: 32px;
}
label.x-small .toggle label span {
  height: 17px;
  width: 17px;
}
label.x-small .toggle input:checked + label span {
  left: 17px;
}

.datetimepicker .datepicker {
  border: 1px solid #e5e5e5;
}
.datetimepicker .datepicker th, .datetimepicker .datepicker td {
  width: auto !important;
}
.datetimepicker .bootstrap-datetimepicker-widget table td.active, .datetimepicker .bootstrap-datetimepicker-widget table td.active:hover {
  background-color: #1565c0;
  color: #ffffff !important;
}
.datetimepicker .bootstrap-datetimepicker-widget table td.day, .datetimepicker .bootstrap-datetimepicker-widget table th, .datetimepicker .bootstrap-datetimepicker-widget table td span {
  height: 60px !important;
  line-height: 60px !important;
  color: #212121;
  font-size: 16px;
  border-radius: 0 !important;
  margin: 0 !important;
  text-align: center;
}
.datetimepicker .bootstrap-datetimepicker-widget table th {
  background: #f9f9f9;
}
.datetimepicker .bootstrap-datetimepicker-widget table td.today:before {
  border-width: 0 0 13px 13px;
  color: #1565c0;
}
.datetimepicker .bootstrap-datetimepicker-widget table thead tr:first-child {
  border-bottom: 1px solid #e5e5e5;
}
.datetimepicker .bootstrap-datetimepicker-widget table th.prev::after {
  font-family: "Material Icons";
  content: "chevron_left" !important;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  position: static !important;
  height: auto;
  width: auto;
}
.datetimepicker .bootstrap-datetimepicker-widget table th.next::after {
  font-family: "Material Icons";
  content: "chevron_right" !important;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  position: static !important;
  height: auto;
  width: auto;
}
.datetimepicker .bootstrap-datetimepicker-widget .picker-switch, .datetimepicker .bootstrap-datetimepicker-widget .prev, .datetimepicker .bootstrap-datetimepicker-widget .next {
  font-size: 20px !important;
}
.datetimepicker .bootstrap-datetimepicker-widget .datepicker-decades .decade, .datetimepicker .bootstrap-datetimepicker-widget table td span.month, .datetimepicker .bootstrap-datetimepicker-widget table td span.year {
  width: auto !important;
  padding: 0 10px !important;
  margin: 0 !important;
  height: 60px !important;
  line-height: 60px !important;
  color: #212121;
  font-size: 16px;
  border-radius: 0 !important;
  display: inline-block;
}

.date-range {
  display: flex;
  border: 1px solid #e5e5e5;
}
.date-range .datepicker-wrapper {
  position: relative;
  flex: 1;
}
.date-range .datepicker-wrapper label.label {
  position: absolute;
  top: 7px;
  left: 15px;
  font-size: 12px;
  color: #c9c9c9;
  text-transform: uppercase;
}
.date-range .datepicker-wrapper .fw-datepicker {
  height: 50px;
  flex: 1;
}
.date-range .datepicker-wrapper .fw-datepicker input {
  padding-top: 17px;
  border: none;
}

/*
LOGIN FORM STYLES
*/
.login-container {
  position: absolute;
  margin-left: 50%;
  left: -235px;
  width: 470px;
  z-index: 10;
  top: 70px;
}
.login-container .login-content {
  background-color: #ffffff;
  padding: 40px 24px;
  position: relative;
}
.login-container p.error {
  line-height: 20px;
  margin-bottom: 15px;
  padding: 15px;
  background-color: #ffebee;
  border: 1px solid #dfb8b8;
}

.floating-search {
  position: fixed;
  right: 0px;
  overflow: hidden;
  z-index: 3;
  top: 115px;
  width: 105px;
  transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  background-color: #07a9f4;
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
}
.floating-search input, .floating-search h1, .floating-search .search i {
  opacity: 0;
}
.floating-search form {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  -moz-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  -ms-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 0ms;
  -webkit-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}
.floating-search .search {
  margin: 15px;
  padding: 0;
}
.floating-search .search i {
  left: 15px;
}
.floating-search input {
  height: 0px;
  border-radius: 0px !important;
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
}
.floating-search button, .floating-search form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .floating-search [data-ordered-list-input-action=add] {
  border-radius: 0px;
  max-height: 60px;
  min-height: 0;
  overflow: hidden;
  box-shadow: none;
  padding-right: 40px;
  transition: all 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
  -ms-transition: all 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
}
.floating-search button i, .floating-search form [data-ordered-list-input] [data-ordered-list-input-action=add] i, form [data-ordered-list-input] .floating-search [data-ordered-list-input-action=add] i {
  font-size: 36px;
}
.floating-search.active {
  width: 33%;
  top: 80px;
  transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
}
.floating-search.active input, .floating-search.active h1, .floating-search.active .search i {
  opacity: 1;
}
.floating-search.active form {
  max-height: 200px;
  transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
  -moz-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
  -ms-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
  -webkit-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1) 400ms;
}
.floating-search.active button, .floating-search.active form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .floating-search.active [data-ordered-list-input-action=add] {
  opacity: 0;
  max-height: 0;
}

#search-result-message ul {
  margin-top: 5px;
}
#search-result-message ul li {
  margin-top: 0px;
}
#search-result-message .controls button, #search-result-message .controls form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] #search-result-message .controls [data-ordered-list-input-action=add] {
  margin-right: 10px;
}
#search-result-message .controls button + i, #search-result-message .controls form [data-ordered-list-input] [data-ordered-list-input-action=add] + i, form [data-ordered-list-input] #search-result-message .controls [data-ordered-list-input-action=add] + i {
  position: relative;
  top: 8px;
}
#search-result-message button[data-show-more].active i, #search-result-message form [data-ordered-list-input] [data-show-more].active[data-ordered-list-input-action=add] i, form [data-ordered-list-input] #search-result-message [data-show-more].active[data-ordered-list-input-action=add] i {
  transform: rotate(180deg);
}
#search-result-message .filter-display {
  overflow: hidden;
}
#search-result-message .filter-display .bubble, #search-result-message .filter-display form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol #search-result-message .filter-display li {
  margin-right: 5px;
}

.dialog-box .search {
  padding-right: 0px;
  padding-left: 0px;
}
.dialog-box .search i {
  left: 15px;
}
.dialog-box .search input {
  border-radius: 0px;
}

[data-custom-dropdowns] .options {
  left: 0;
  right: auto;
}

[data-custom-dropdowns].from-right .options {
  right: 0;
  left: auto;
}

.quotes-drop {
  width: 132px !important;
}

.custom-dropdown {
  border: 1px solid #9e9e9e;
  cursor: pointer;
  position: relative;
  padding-right: 25px !important;
  /* Target Firefox */
}
.custom-dropdown .options {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.62);
  border-radius: 4px;
  position: fixed;
  top: calc(100% + 3px);
  max-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 80px;
  transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: max-height 400ms cubic-bezier(0, 0, 0.2, 1);
  z-index: 4;
  /* Target Chrome */
  /* This can be added to add hover effect to list items */
}
.custom-dropdown .options:not(*:root) {
  width: min-content !important;
}
.custom-dropdown .options li {
  margin-top: 0px;
  border-top: 1px solid #e5e5e5;
  text-align: left;
  background-color: #ffffff;
  width: 100%;
  vertical-align: middle;
  /* Sometimes the li is the link, and we need to transition that. When there is an a-href inside we transition that (below). */
  /* Target Chrome */
}
.custom-dropdown .options li[data-ajax-button] {
  padding: 10px;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-dropdown .options li:not(*:root) {
  display: block;
  white-space: nowrap;
}
.custom-dropdown .options li.active {
  border-bottom: none;
  border-color: #e5e5e5 !important;
  background-color: #f2fbfe;
}
.custom-dropdown .options li:first-child {
  border-top: none;
}
.custom-dropdown .options li[data-ajax-button]:hover, .custom-dropdown .options li[href]:hover, .custom-dropdown .options li[value]:hover {
  background-color: whitesmoke;
}
.custom-dropdown .options li a, .custom-dropdown .options li[value] {
  padding: 10px;
  display: block;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.custom-dropdown .options li a:hover, .custom-dropdown .options li[value]:hover {
  color: inherit;
  background-color: #f9f9f9 !important;
  text-decoration: none;
}
.custom-dropdown .options.list-item-links li {
  padding: 10px;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
@-moz-document url-prefix() {
  .custom-dropdown {
    /* Fix issue with padding being on list item and not link itself */
  }
  .custom-dropdown .options {
    width: min-content !important;
  }
  .custom-dropdown .options li {
    display: block;
    white-space: nowrap;
  }
  .custom-dropdown.full-links .options li {
    padding: 0;
  }
  .custom-dropdown.full-links .options li a {
    display: block;
    padding: 10px;
  }
  .custom-dropdown.full-links .options li a:hover {
    background-color: whitesmoke;
  }
}
.custom-dropdown .options li, .custom-dropdown .selected-text {
  font-size: 14px;
  line-height: 18px;
  /*font-style:italic;*/
  color: #757575;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  text-transform: none;
}
.custom-dropdown .selected-text {
  color: #212121;
  padding: 10px;
  min-width: 105px;
}
.custom-dropdown:after {
  content: "";
  font-family: "Material Icons";
  position: absolute;
  right: 5px;
  display: block;
  top: calc(50% - 8px);
  font-size: 16px;
}
.custom-dropdown.show:after {
  opacity: 0.6;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  content: "";
}
.custom-dropdown.show .options {
  max-height: 300px;
}
.custom-dropdown.show, .custom-dropdown.active {
  border-color: #1565c0;
}
.custom-dropdown.align-left ul {
  right: auto;
  left: 0;
}
.custom-dropdown.plain {
  border: none;
}
.custom-dropdown.plain.show:after {
  color: #1565c0;
  opacity: 1;
}
.custom-dropdown.short {
  min-height: 30px;
}
.custom-dropdown.short .options li, .custom-dropdown.short .selected-text {
  font-size: 14px;
  line-height: 16px;
}
.custom-dropdown.short .selected-text {
  padding: 7px;
}
.custom-dropdown.wide .options {
  min-width: 300px;
}
.custom-dropdown.no-arrow {
  padding-right: 0 !important;
}
.custom-dropdown.no-arrow:after {
  display: none;
}
.custom-dropdown.no-min .selected-text {
  min-width: auto;
}
.custom-dropdown.new-dropdown-align-right .options {
  position: absolute;
  right: 0;
  left: auto !important;
  top: calc(100% + 5px) !important;
}
.custom-dropdown[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

[data-placeholder="Status/location"] + .chosen-container.chosen-container-single .chosen-single {
  color: inherit;
  padding: 16.5px 7px;
  border-radius: 0;
  background: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single .chosen-single div b {
  margin-top: 6px;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single .chosen-single.chosen-default {
  color: #c9c9c9;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single.chosen-with-drop .chosen-drop {
  max-height: 240px;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single.chosen-with-drop .chosen-drop ul.chosen-results {
  padding: 0;
  margin: 0;
  max-height: calc(240px - 48.8px);
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single.chosen-with-drop .chosen-drop ul.chosen-results li {
  border-top: 1px solid #aaa;
  color: #c9c9c9;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single.chosen-with-drop .chosen-drop ul.chosen-results li.group-result {
  color: inherit;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single.chosen-with-drop .chosen-drop ul.chosen-results li:first-child {
  border-top: none;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single.chosen-with-drop .chosen-drop ul.chosen-results li.active-result.highlighted {
  background: whitesmoke;
  color: #4286f4;
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single .chosen-drop {
  top: 37px;
  right: 0;
  overflow: hidden;
  border: 1px solid #aaa;
  border-radius: 0;
  color: #757575;
  max-height: 0;
  transition-delay: 0s;
  transition-duration: 0.75s;
  transition-property: max-height;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
[data-placeholder="Status/location"] + .chosen-container.chosen-container-single .chosen-drop .chosen-search input.chosen-search-input {
  border: 1px solid #ccc;
  margin: 2px 0;
  max-width: 100%;
  min-height: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* In part modal to add component, fixing error styling/placement */
.suggested-qty-error-fix .input-prepend-wrapper {
  flex-wrap: wrap;
}
.suggested-qty-error-fix input {
  flex: 1;
}
.suggested-qty-error-fix p.error {
  order: 1;
}

.suggested-results ul {
  max-height: 300px;
  overflow-y: auto;
}
.suggested-results ul li.contact-block {
  padding-top: 15px;
  padding-bottom: 15px;
}
.suggested-results ul li.contact-block h4 {
  line-height: 16px;
}
.suggested-results table {
  border: 2px solid #c9c9c9;
  background-color: transparent;
}
.suggested-results table th,
.suggested-results table td {
  border-color: #c9c9c9;
}
.suggested-results table .positive-color::before {
  content: "+ ";
  color: #43a047;
  font-size: 16px;
}
.suggested-results table .negative-color::before {
  content: "- ";
  color: #b71c1c;
  font-size: 16px;
}

.right-sidebar, .left-sidebar {
  width: 600px;
  right: -610px;
  position: fixed;
  transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  height: calc(100% - 62px);
  top: 62px;
  z-index: 6;
  background-color: white;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62);
}
.right-sidebar .overflow-wrapper, .left-sidebar .overflow-wrapper {
  height: calc(100% - 62px);
  position: relative;
}
.right-sidebar .overflow-wrapper.full, .left-sidebar .overflow-wrapper.full {
  height: 100%;
}
.right-sidebar .padded-container, .left-sidebar .padded-container {
  padding: 22px;
}
.right-sidebar .padded-container.grey-bg.footer, .left-sidebar .padded-container.grey-bg.footer {
  padding: 0 22px 0 92px;
}
.right-sidebar .padded-container.grey-bg.footer div[data-scroll-to],
.right-sidebar .padded-container.grey-bg.footer div.dynamic-nav-item, .left-sidebar .padded-container.grey-bg.footer div[data-scroll-to],
.left-sidebar .padded-container.grey-bg.footer div.dynamic-nav-item {
  padding: 22px 15px;
  cursor: pointer;
}
.right-sidebar .padded-container.grey-bg.footer div[data-close-sidebar], .left-sidebar .padded-container.grey-bg.footer div[data-close-sidebar] {
  position: absolute;
  width: 70px;
  height: 60px;
  left: 0;
  top: 0;
  background-color: #4286f4;
  cursor: pointer;
  text-align: center;
}
.right-sidebar .padded-container.grey-bg.footer div[data-close-sidebar] i, .left-sidebar .padded-container.grey-bg.footer div[data-close-sidebar] i {
  line-height: 60px;
  color: white;
}
.right-sidebar hr, .left-sidebar hr {
  margin-left: -22px;
  margin-right: -22px;
}
.right-sidebar .footer, .left-sidebar .footer {
  position: absolute;
  bottom: 0;
  z-index: 2;
  left: 0;
  right: 0;
  box-shadow: 3px -2px 8px 0 rgba(0, 0, 0, 0.32);
}
.right-sidebar .footer .active a, .left-sidebar .footer .active a {
  color: #4286f4;
}
.right-sidebar .loading-container, .left-sidebar .loading-container {
  position: fixed;
  width: 600px;
  right: -600px;
  left: auto;
}
.right-sidebar h2, .left-sidebar h2 {
  font-weight: 500 !important;
}
.right-sidebar .next-delivery-arrows, .left-sidebar .next-delivery-arrows {
  display: flex;
  justify-content: flex-end;
  min-width: 48px;
}
.right-sidebar .next-delivery-arrows button.material-icons, .right-sidebar .next-delivery-arrows form [data-ordered-list-input] .material-icons[data-ordered-list-input-action=add], form [data-ordered-list-input] .right-sidebar .next-delivery-arrows .material-icons[data-ordered-list-input-action=add], .left-sidebar .next-delivery-arrows button.material-icons, .left-sidebar .next-delivery-arrows form [data-ordered-list-input] .material-icons[data-ordered-list-input-action=add], form [data-ordered-list-input] .left-sidebar .next-delivery-arrows .material-icons[data-ordered-list-input-action=add] {
  font-size: 17px;
  height: 16px;
  min-height: 16px;
  width: 16px;
  padding: 0;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 3px;
}
.right-sidebar ul.next-delivery-list, .left-sidebar ul.next-delivery-list {
  display: inline-block;
}
.right-sidebar ul.next-delivery-list li, .left-sidebar ul.next-delivery-list li {
  margin: 0;
}
.right-sidebar ul.next-delivery-list li:not([data-next-delivery-list-item="0"]), .left-sidebar ul.next-delivery-list li:not([data-next-delivery-list-item="0"]) {
  display: none;
}
.right-sidebar section.next-delivery-indicators, .left-sidebar section.next-delivery-indicators {
  display: flex;
  flex-wrap: wrap;
}
.right-sidebar section.next-delivery-indicators button.indicator-dot, .right-sidebar section.next-delivery-indicators form [data-ordered-list-input] .indicator-dot[data-ordered-list-input-action=add], form [data-ordered-list-input] .right-sidebar section.next-delivery-indicators .indicator-dot[data-ordered-list-input-action=add], .left-sidebar section.next-delivery-indicators button.indicator-dot, .left-sidebar section.next-delivery-indicators form [data-ordered-list-input] .indicator-dot[data-ordered-list-input-action=add], form [data-ordered-list-input] .left-sidebar section.next-delivery-indicators .indicator-dot[data-ordered-list-input-action=add] {
  height: 8px;
  min-height: 8px;
  width: 8px;
  border: 1px solid #ddd;
  border-radius: 50%;
  box-shadow: none;
  padding: 0;
  margin: 1px 0;
  background-color: transparent;
}
.right-sidebar section.next-delivery-indicators button.indicator-dot.active, .right-sidebar section.next-delivery-indicators form [data-ordered-list-input] .indicator-dot.active[data-ordered-list-input-action=add], form [data-ordered-list-input] .right-sidebar section.next-delivery-indicators .indicator-dot.active[data-ordered-list-input-action=add], .left-sidebar section.next-delivery-indicators button.indicator-dot.active, .left-sidebar section.next-delivery-indicators form [data-ordered-list-input] .indicator-dot.active[data-ordered-list-input-action=add], form [data-ordered-list-input] .left-sidebar section.next-delivery-indicators .indicator-dot.active[data-ordered-list-input-action=add] {
  background-color: #4286f4;
}
.right-sidebar section.next-delivery-indicators button.indicator-dot:not(:first-child), .right-sidebar section.next-delivery-indicators form [data-ordered-list-input] .indicator-dot[data-ordered-list-input-action=add]:not(:first-child), form [data-ordered-list-input] .right-sidebar section.next-delivery-indicators .indicator-dot[data-ordered-list-input-action=add]:not(:first-child), .left-sidebar section.next-delivery-indicators button.indicator-dot:not(:first-child), .left-sidebar section.next-delivery-indicators form [data-ordered-list-input] .indicator-dot[data-ordered-list-input-action=add]:not(:first-child), form [data-ordered-list-input] .left-sidebar section.next-delivery-indicators .indicator-dot[data-ordered-list-input-action=add]:not(:first-child) {
  margin-left: 2px;
}

.left-sidebar {
  left: -610px;
  right: auto;
}

body.show-sidebar .right-sidebar, body.show-sidebar .left-sidebar {
  right: 0;
}
body.show-sidebar .right-sidebar .loading-container, body.show-sidebar .left-sidebar .loading-container {
  right: initial;
}
body.show-sidebar .right-sidebar .padded-container .loading-container, body.show-sidebar .left-sidebar .padded-container .loading-container {
  right: 0;
}
body.show-sidebar > .overlay {
  width: 100%;
  height: 100%;
  opacity: 0.1;
  pointer-events: none;
  transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
  -moz-transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
  -ms-transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
  -webkit-transition: width 1ms ease, height 1ms ease, opacity 400ms ease 100ms;
}

/* =========================================================
~ TAB STYLES
~ All tabs and layout styles affecting.
========================================================= */
.tab-header ul li {
  padding: 10px;
  color: #9e9e9e;
  text-transform: uppercase;
  display: inline-block;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: 0.2s ease-in-out;
}
.tab-header ul li a {
  font-size: 14px;
}
.tab-header ul li.custom-dropdown {
  border-bottom: 1px solid #c9c9c9;
}
.tab-header ul li.custom-dropdown:before {
  content: "";
  height: 33px;
  width: 1px;
  background-color: #e5e5e5;
  left: -20px;
  top: 0;
  position: absolute;
}
.tab-header ul li:hover {
  color: #4286f4;
}
.tab-header ul li.active {
  color: #4286f4;
  border-color: #4286f4;
}
.tab-header.no-top-margin li {
  margin-top: 0px;
  vertical-align: top;
}

.tab-content {
  position: relative;
}
.tab-content .tab-pane {
  opacity: 0;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 1ms;
  max-height: 0;
  overflow: hidden;
}
.tab-content .tab-pane.active {
  opacity: 1;
  max-height: 100%;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1) 401ms;
}

.tabbed-container {
  /*[data-tooltip] {position:inherit;
  	//.tooltip {top:auto;}
  }*/
}
.tabbed-container.button-style .tab-header ul {
  font-size: 0px;
}
.tabbed-container.button-style .tab-header ul li {
  border: 1px solid #e5e5e5;
  text-transform: none;
  font-size: 15px !important;
  color: #757575;
  background-color: #ffffff;
  opacity: 0.6;
}
.tabbed-container.button-style .tab-header ul li .bubble, .tabbed-container.button-style .tab-header ul li form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .tabbed-container.button-style .tab-header ul li li {
  border-color: #c9c9c9;
  color: #c9c9c9;
  padding: 1px 7px;
  margin-left: 5px;
  font-size: 11px;
}
.tabbed-container.button-style .tab-header ul li:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.tabbed-container.button-style .tab-header ul li:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.tabbed-container.button-style .tab-header ul li:hover {
  opacity: 0.8;
}
.tabbed-container.button-style .tab-header ul li.active {
  background-color: white;
  border-color: #1565c0;
  opacity: 1;
}
.tabbed-container.button-style .tab-header ul li.active .bubble, .tabbed-container.button-style .tab-header ul li.active form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .tabbed-container.button-style .tab-header ul li.active li {
  border-color: #1565c0;
  color: #1565c0;
}
.tabbed-container.button-style .tab-header ul li.active .bubble.alert-line, .tabbed-container.button-style .tab-header ul li.active form [data-ordered-list-input] ol li.alert-line, form [data-ordered-list-input] ol .tabbed-container.button-style .tab-header ul li.active li.alert-line {
  border-color: #e53835;
  color: #e53835;
}

[data-accordions] [data-accordions-header] button[data-accordions-toggle], [data-accordions] [data-accordions-header] form [data-ordered-list-input] [data-accordions-toggle][data-ordered-list-input-action=add], form [data-ordered-list-input] [data-accordions] [data-accordions-header] [data-accordions-toggle][data-ordered-list-input-action=add] {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  min-height: auto;
  color: #333;
  border-color: #333;
  opacity: 0.5;
  border-width: 1px;
}
[data-accordions] [data-accordions-header] button[data-accordions-toggle] .material-icons, [data-accordions] [data-accordions-header] form [data-ordered-list-input] [data-accordions-toggle][data-ordered-list-input-action=add] .material-icons, form [data-ordered-list-input] [data-accordions] [data-accordions-header] [data-accordions-toggle][data-ordered-list-input-action=add] .material-icons {
  font-size: 16px;
}
[data-accordions] [data-accordions-header] button[data-accordions-toggle].small, [data-accordions] [data-accordions-header] form [data-ordered-list-input] [data-accordions-toggle].small[data-ordered-list-input-action=add], form [data-ordered-list-input] [data-accordions] [data-accordions-header] [data-accordions-toggle].small[data-ordered-list-input-action=add] {
  height: 20px;
  width: 20px;
}
[data-accordions] [data-accordions-header] button[data-accordions-toggle].small .material-icons, [data-accordions] [data-accordions-header] form [data-ordered-list-input] [data-accordions-toggle].small[data-ordered-list-input-action=add] .material-icons, form [data-ordered-list-input] [data-accordions] [data-accordions-header] [data-accordions-toggle].small[data-ordered-list-input-action=add] .material-icons {
  font-size: 12px;
}
[data-accordions] [data-accordions-content] {
  overflow: auto;
  transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-accordions] [data-accordions-content].collapse {
  max-height: 0px;
}
[data-accordions] [data-accordions-content]:not([class*=mh-]) {
  max-height: 1000px;
}
[data-accordions] [data-accordion-icon] {
  position: relative;
}
[data-accordions] [data-accordion-icon]:before, [data-accordions] [data-accordion-icon]:after {
  content: "remove";
  font-family: "Material Icons";
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-accordions] [data-accordion-icon]:after {
  display: block;
  position: absolute;
  top: 12px;
  line-height: 0;
}
[data-accordions] [data-accordion-icon].align-middle:after {
  top: 5px;
}
[data-accordions].collapse [data-accordion-icon]:after {
  transform: rotate(90deg);
}

.accordion.plain {
  margin: 0;
  padding: 0;
}
.accordion.plain .accordion-wrapper {
  padding: 0;
}
.accordion.plain .accordion-wrapper .accordion-header {
  cursor: pointer;
  background: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.accordion.plain .accordion-wrapper .accordion-body {
  padding: 15px 0;
}

/**
* LOADING STYLES
* Any loading styles
*/
@-webkit-keyframes slide {
  0% {
    left: -100%;
    width: 75px;
  }
  65% {
    left: 35%;
    width: 20px;
  }
  100% {
    left: 100%;
    width: 100px;
  }
}
@keyframes slide {
  0% {
    left: -100%;
    width: 75px;
  }
  65% {
    left: 35%;
    width: 20px;
  }
  100% {
    left: 100%;
    width: 100px;
  }
}
@-webkit-keyframes large-slide {
  0% {
    left: -100%;
    width: 200px;
  }
  65% {
    left: 35%;
    width: 40px;
  }
  100% {
    left: 100%;
    width: 120px;
  }
}
@keyframes large-slide {
  0% {
    left: -100%;
    width: 200px;
  }
  65% {
    left: 35%;
    width: 40px;
  }
  100% {
    left: 100%;
    width: 120px;
  }
}
@-webkit-keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-input {
  position: relative;
  width: 100%;
}

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-container:before {
  content: "";
  display: none;
}
.loading-container.opaque {
  background: rgba(255, 255, 255, 0.85);
}

.loading-container .content {
  text-align: center;
  color: #424242;
}
.loading-container .content h3 {
  margin-top: 0;
}
.loading-container .bar-container {
  width: 180px;
  background: #03a8f4;
  height: 3px;
  border-radius: 1.5px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
.loading-container .bar-container .fill {
  background: #1565c0;
  width: 75px;
  height: 3px;
  border-radius: 1.5px;
  position: absolute;
  left: -100%;
  animation: slide 1.5s infinite;
}
.loading-container.circular .bar-container {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: none;
  border: 3px solid #03a8f4;
  border-top-color: #1565c0;
  animation: spin 1s infinite;
}
.loading-container.circular .bar-container .fill {
  display: none;
}
.loading-container.circular:before {
  display: none;
}

.loading-container.input-loader {
  height: 30px;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  display: block;
}
.loading-container.input-loader:before {
  display: none;
}
.loading-container.input-loader .bar-container {
  margin: 0;
}

#main-content > .loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

[data-lazy-load] td {
  height: 2px;
  padding: 0;
}
[data-lazy-load] .loading-container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-lazy-load] .loading-container:before {
  display: none;
}
[data-lazy-load] .loading-container .bar-container {
  width: 100%;
}
[data-lazy-load] .loading-container .bar-container .fill {
  width: 180px;
  animation: large-slide 1.5s infinite;
}

.loading-input input {
  padding-right: 60px;
}

.tooltip .loading-container {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tooltip .loading-container::before {
  display: none;
}
.tooltip .loading-container .content .bar-container {
  width: 100%;
  border-radius: 0;
}

/**
* TOOLTIPS
* There are 5 supported positionings for the tooltips.
* bottom - default
* left - positions the top of the tooltip to the left side of the item.
* right - positions the top of the tooltip to the right side of the item.
* top - positions the tooltip directly overtop of the item centered.
* bottom-right - positions the tooltip just like bottom with the right
* side of the tooltip lined up with the right of the item.
*/
.tooltip {
  pointer-events: none;
  position: fixed;
  z-index: 100;
  opacity: 1;
  max-width: 200px;
}
.tooltip.deliveries-popover {
  pointer-events: all;
}
.tooltip.deliveries-popover .content {
  padding: 0;
  max-width: 400px;
  width: max-content;
  min-width: 256px;
  max-height: 320px;
  overflow-y: auto;
}
.tooltip .content {
  padding: 15px;
  background-color: #ffffff;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.62);
  max-width: 300px;
  width: max-content;
  max-width: 100%;
}
.tooltip .content::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 100%;
}
.tooltip hr {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: -15px;
  margin-right: -15px;
}
.tooltip p {
  color: #757575;
  text-transform: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.tooltip-placement-left .content::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  right: -8px;
  left: auto;
  top: calc(50% - 2.5px);
  margin: auto;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
.tooltip-placement-right .content::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 6px 0 6px;
  border-color: #ffffff transparent transparent transparent;
  position: absolute;
  right: auto;
  left: -8px;
  top: calc(50% - 1px);
  margin: auto;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}
.tooltip-placement-bottom .content::before {
  border-width: 0 6px 5px 6px;
  border-color: transparent transparent #ffffff transparent;
  top: 0;
  bottom: auto;
  transform: translateY(-100%);
}
.tooltip-placement-bottom.tooltip-default .content::before {
  border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent !important;
}
.tooltip-placement-bottom-left .content::before {
  border-width: 0 6px 5px 6px;
  border-color: transparent transparent #ffffff transparent;
  left: auto;
  right: 10px;
  top: 0;
  transform: translateY(-100%);
}
.tooltip-placement-top-right .content::before {
  left: 10px;
  right: auto;
  bottom: 0;
  top: auto;
  transform: translateY(100%);
}

.tooltip-default.tooltip .content {
  background: rgba(97, 97, 97, 0.9);
  color: white;
  font-size: 12px;
  padding: 6px 8px;
  box-shadow: none;
  border-radius: 4px;
}
.tooltip-default.tooltip .content::before {
  border-color: rgba(97, 97, 97, 0.9) transparent transparent transparent;
}
.tooltip-default.tooltip .content p {
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.popover-header {
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
}
.popover-header h4 {
  font-size: 12px;
  color: #424242;
  margin: 0;
  font-weight: bold;
}
.popover-header span {
  padding: 10px;
  margin: -10px -10px -10px 0;
  font-size: 16px;
}

/**
* Grid containers for responsive and dynamic layouts.
*/
[class^=grid-span] [data-col-prefix], [class*=-grid-span-] [data-col-prefix] {
  position: relative;
}
[class^=grid-span] [data-col-prefix]:after, [class*=-grid-span-] [data-col-prefix]:after {
  content: attr(data-col-prefix);
  position: absolute;
  left: -10px;
  top: 18px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  color: #c9c9c9;
}
[class^=grid-span].border-right, [class*=-grid-span-].border-right {
  border-right: none;
  position: relative;
}
[class^=grid-span].border-right:after, [class*=-grid-span-].border-right:after {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  right: -8px;
  top: 0px;
  background-color: #e5e5e5;
}
[class^=grid-span].border-left, [class*=-grid-span-].border-left {
  border-left: none;
  position: relative;
}
[class^=grid-span].border-left:before, [class*=-grid-span-].border-left:before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: -8px;
  top: 0px;
  background-color: #e5e5e5;
}

.grid-container, .html-table-row, .row {
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-columns: repeat(12, 1fr);
}
.grid-container.no-gap, .no-gap.html-table-row, .row.no-gap {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.grid-row {
  display: grid !important;
}

.grid-span-1 {
  grid-column: span 1;
  max-width: -moz-available;
}

.grid-span-2 {
  grid-column: span 2;
  max-width: -moz-available;
}

.grid-span-3 {
  grid-column: span 3;
  max-width: -moz-available;
}

.grid-span-4, form [data-ordered-list-input] .col-xs-3 {
  grid-column: span 4;
  max-width: -moz-available;
}

.grid-span-5 {
  grid-column: span 5;
  max-width: -moz-available;
}

.grid-span-6 {
  grid-column: span 6;
  max-width: -moz-available;
}

.grid-span-7 {
  grid-column: span 7;
  max-width: -moz-available;
}

.grid-span-8, form [data-ordered-list-input] .col-xs-9 {
  grid-column: span 8;
  max-width: -moz-available;
}

.grid-span-9 {
  grid-column: span 9;
  max-width: -moz-available;
}

.grid-span-10 {
  grid-column: span 10;
  max-width: -moz-available;
}

.grid-span-11 {
  grid-column: span 11;
  max-width: -moz-available;
}

.grid-span-12 {
  grid-column: span 12;
  max-width: -moz-available;
}

.xs-grid-span-1 {
  grid-column: span 1;
}

.xs-grid-span-2 {
  grid-column: span 2;
}

.xs-grid-span-3 {
  grid-column: span 3;
}

.xs-grid-span-4 {
  grid-column: span 4;
}

.xs-grid-span-5 {
  grid-column: span 5;
}

.xs-grid-span-6 {
  grid-column: span 6;
}

.xs-grid-span-7 {
  grid-column: span 7;
}

.xs-grid-span-8 {
  grid-column: span 8;
}

.xs-grid-span-9 {
  grid-column: span 9;
}

.xs-grid-span-10 {
  grid-column: span 10;
}

.xs-grid-span-11 {
  grid-column: span 11;
}

.xs-grid-span-12 {
  grid-column: span 12;
}

.sm-grid-span-1 {
  grid-column: span 1;
}

.sm-grid-span-2 {
  grid-column: span 2;
}

.sm-grid-span-3 {
  grid-column: span 3;
}

.sm-grid-span-4 {
  grid-column: span 4;
}

.sm-grid-span-5 {
  grid-column: span 5;
}

.sm-grid-span-6 {
  grid-column: span 6;
}

.sm-grid-span-7 {
  grid-column: span 7;
}

.sm-grid-span-8 {
  grid-column: span 8;
}

.sm-grid-span-9 {
  grid-column: span 9;
}

.sm-grid-span-10 {
  grid-column: span 10;
}

.sm-grid-span-11 {
  grid-column: span 11;
}

.sm-grid-span-12 {
  grid-column: span 12;
}

.md-grid-span-1 {
  grid-column: span 1;
}

.md-grid-span-2 {
  grid-column: span 2;
}

.md-grid-span-3 {
  grid-column: span 3;
}

.md-grid-span-4 {
  grid-column: span 4;
}

.md-grid-span-5 {
  grid-column: span 5;
}

.md-grid-span-6 {
  grid-column: span 6;
}

.md-grid-span-7 {
  grid-column: span 7;
}

.md-grid-span-8 {
  grid-column: span 8;
}

.md-grid-span-9 {
  grid-column: span 9;
}

.md-grid-span-10 {
  grid-column: span 10;
}

.md-grid-span-11 {
  grid-column: span 11;
}

.md-grid-span-12 {
  grid-column: span 12;
}

.lg-grid-span-1 {
  grid-column: span 1;
}

.lg-grid-span-2 {
  grid-column: span 2;
}

.lg-grid-span-3 {
  grid-column: span 3;
}

.lg-grid-span-4 {
  grid-column: span 4;
}

.lg-grid-span-5 {
  grid-column: span 5;
}

.lg-grid-span-6 {
  grid-column: span 6;
}

.lg-grid-span-7 {
  grid-column: span 7;
}

.lg-grid-span-8 {
  grid-column: span 8;
}

.lg-grid-span-9 {
  grid-column: span 9;
}

.lg-grid-span-10 {
  grid-column: span 10;
}

.lg-grid-span-11 {
  grid-column: span 11;
}

.lg-grid-span-12 {
  grid-column: span 12;
}

.xl-grid-span-1 {
  grid-column: span 1;
}

.xl-grid-span-2 {
  grid-column: span 2;
}

.xl-grid-span-3 {
  grid-column: span 3;
}

.xl-grid-span-4 {
  grid-column: span 4;
}

.xl-grid-span-5 {
  grid-column: span 5;
}

.xl-grid-span-6 {
  grid-column: span 6;
}

.xl-grid-span-7 {
  grid-column: span 7;
}

.xl-grid-span-8 {
  grid-column: span 8;
}

.xl-grid-span-9 {
  grid-column: span 9;
}

.xl-grid-span-10 {
  grid-column: span 10;
}

.xl-grid-span-11 {
  grid-column: span 11;
}

.xl-grid-span-12 {
  grid-column: span 12;
}

.xxl-grid-span-1 {
  grid-column: span 1;
}

.xxl-grid-span-2 {
  grid-column: span 2;
}

.xxl-grid-span-3 {
  grid-column: span 3;
}

.xxl-grid-span-4 {
  grid-column: span 4;
}

.xxl-grid-span-5 {
  grid-column: span 5;
}

.xxl-grid-span-6 {
  grid-column: span 6;
}

.xxl-grid-span-7 {
  grid-column: span 7;
}

.xxl-grid-span-8 {
  grid-column: span 8;
}

.xxl-grid-span-9 {
  grid-column: span 9;
}

.xxl-grid-span-10 {
  grid-column: span 10;
}

.xxl-grid-span-11 {
  grid-column: span 11;
}

.xxl-grid-span-12 {
  grid-column: span 12;
}

/* XXLarge Devices, Wide Screens xxl */
@media only screen and (min-width: 1201px) {
  .xxl-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    grid-column: span 1 !important;
  }

  .xxl-grid-span-2 {
    grid-column: span 2 !important;
  }

  .xxl-grid-span-3 {
    grid-column: span 3 !important;
  }

  .xxl-grid-span-4 {
    grid-column: span 4 !important;
  }

  .xxl-grid-span-5 {
    grid-column: span 5 !important;
  }

  .xxl-grid-span-6 {
    grid-column: span 6 !important;
  }

  .xxl-grid-span-7 {
    grid-column: span 7 !important;
  }

  .xxl-grid-span-8 {
    grid-column: span 8 !important;
  }

  .xxl-grid-span-9 {
    grid-column: span 9 !important;
  }

  .xxl-grid-span-10 {
    grid-column: span 10 !important;
  }

  .xxl-grid-span-11 {
    grid-column: span 11 !important;
  }

  .xxl-grid-span-12 {
    grid-column: span 12 !important;
  }

  .xs-grid-span-1 {
    grid-column: span 1;
  }

  .xs-grid-span-2 {
    grid-column: span 2;
  }

  .xs-grid-span-3 {
    grid-column: span 3;
  }

  .xs-grid-span-4 {
    grid-column: span 4;
  }

  .xs-grid-span-5 {
    grid-column: span 5;
  }

  .xs-grid-span-6 {
    grid-column: span 6;
  }

  .xs-grid-span-7 {
    grid-column: span 7;
  }

  .xs-grid-span-8 {
    grid-column: span 8;
  }

  .xs-grid-span-9 {
    grid-column: span 9;
  }

  .xs-grid-span-10 {
    grid-column: span 10;
  }

  .xs-grid-span-11 {
    grid-column: span 11;
  }

  .xs-grid-span-12 {
    grid-column: span 12;
  }

  .sm-grid-span-1 {
    grid-column: span 1;
  }

  .sm-grid-span-2 {
    grid-column: span 2;
  }

  .sm-grid-span-3 {
    grid-column: span 3;
  }

  .sm-grid-span-4 {
    grid-column: span 4;
  }

  .sm-grid-span-5 {
    grid-column: span 5;
  }

  .sm-grid-span-6 {
    grid-column: span 6;
  }

  .sm-grid-span-7 {
    grid-column: span 7;
  }

  .sm-grid-span-8 {
    grid-column: span 8;
  }

  .sm-grid-span-9 {
    grid-column: span 9;
  }

  .sm-grid-span-10 {
    grid-column: span 10;
  }

  .sm-grid-span-11 {
    grid-column: span 11;
  }

  .sm-grid-span-12 {
    grid-column: span 12;
  }

  .md-grid-span-1 {
    grid-column: span 1;
  }

  .md-grid-span-2 {
    grid-column: span 2;
  }

  .md-grid-span-3 {
    grid-column: span 3;
  }

  .md-grid-span-4 {
    grid-column: span 4;
  }

  .md-grid-span-5 {
    grid-column: span 5;
  }

  .md-grid-span-6 {
    grid-column: span 6;
  }

  .md-grid-span-7 {
    grid-column: span 7;
  }

  .md-grid-span-8 {
    grid-column: span 8;
  }

  .md-grid-span-9 {
    grid-column: span 9;
  }

  .md-grid-span-10 {
    grid-column: span 10;
  }

  .md-grid-span-11 {
    grid-column: span 11;
  }

  .md-grid-span-12 {
    grid-column: span 12;
  }

  .lg-grid-span-1 {
    grid-column: span 1;
  }

  .lg-grid-span-2 {
    grid-column: span 2;
  }

  .lg-grid-span-3 {
    grid-column: span 3;
  }

  .lg-grid-span-4 {
    grid-column: span 4;
  }

  .lg-grid-span-5 {
    grid-column: span 5;
  }

  .lg-grid-span-6 {
    grid-column: span 6;
  }

  .lg-grid-span-7 {
    grid-column: span 7;
  }

  .lg-grid-span-8 {
    grid-column: span 8;
  }

  .lg-grid-span-9 {
    grid-column: span 9;
  }

  .lg-grid-span-10 {
    grid-column: span 10;
  }

  .lg-grid-span-11 {
    grid-column: span 11;
  }

  .lg-grid-span-12 {
    grid-column: span 12;
  }

  .xl-grid-span-1 {
    grid-column: span 1;
  }

  .xl-grid-span-2 {
    grid-column: span 2;
  }

  .xl-grid-span-3 {
    grid-column: span 3;
  }

  .xl-grid-span-4 {
    grid-column: span 4;
  }

  .xl-grid-span-5 {
    grid-column: span 5;
  }

  .xl-grid-span-6 {
    grid-column: span 6;
  }

  .xl-grid-span-7 {
    grid-column: span 7;
  }

  .xl-grid-span-8 {
    grid-column: span 8;
  }

  .xl-grid-span-9 {
    grid-column: span 9;
  }

  .xl-grid-span-10 {
    grid-column: span 10;
  }

  .xl-grid-span-11 {
    grid-column: span 11;
  }

  .xl-grid-span-12 {
    grid-column: span 12;
  }
}
/* Large Devices, Wide Screens xl */
@media only screen and (max-width: 1200px) and (min-width: 993px) {
  .xl-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    grid-column: span 1;
  }

  .xxl-grid-span-2 {
    grid-column: span 2;
  }

  .xxl-grid-span-3 {
    grid-column: span 3;
  }

  .xxl-grid-span-4 {
    grid-column: span 4;
  }

  .xxl-grid-span-5 {
    grid-column: span 5;
  }

  .xxl-grid-span-6 {
    grid-column: span 6;
  }

  .xxl-grid-span-7 {
    grid-column: span 7;
  }

  .xxl-grid-span-8 {
    grid-column: span 8;
  }

  .xxl-grid-span-9 {
    grid-column: span 9;
  }

  .xxl-grid-span-10 {
    grid-column: span 10;
  }

  .xxl-grid-span-11 {
    grid-column: span 11;
  }

  .xxl-grid-span-12 {
    grid-column: span 12;
  }

  .xl-grid-span-1 {
    grid-column: span 1 !important;
  }

  .xl-grid-span-2 {
    grid-column: span 2 !important;
  }

  .xl-grid-span-3 {
    grid-column: span 3 !important;
  }

  .xl-grid-span-4 {
    grid-column: span 4 !important;
  }

  .xl-grid-span-5 {
    grid-column: span 5 !important;
  }

  .xl-grid-span-6 {
    grid-column: span 6 !important;
  }

  .xl-grid-span-7 {
    grid-column: span 7 !important;
  }

  .xl-grid-span-8 {
    grid-column: span 8 !important;
  }

  .xl-grid-span-9 {
    grid-column: span 9 !important;
  }

  .xl-grid-span-10 {
    grid-column: span 10 !important;
  }

  .xl-grid-span-11 {
    grid-column: span 11 !important;
  }

  .xl-grid-span-12 {
    grid-column: span 12 !important;
  }

  .xs-grid-span-1 {
    grid-column: span 1;
  }

  .xs-grid-span-2 {
    grid-column: span 2;
  }

  .xs-grid-span-3 {
    grid-column: span 3;
  }

  .xs-grid-span-4 {
    grid-column: span 4;
  }

  .xs-grid-span-5 {
    grid-column: span 5;
  }

  .xs-grid-span-6 {
    grid-column: span 6;
  }

  .xs-grid-span-7 {
    grid-column: span 7;
  }

  .xs-grid-span-8 {
    grid-column: span 8;
  }

  .xs-grid-span-9 {
    grid-column: span 9;
  }

  .xs-grid-span-10 {
    grid-column: span 10;
  }

  .xs-grid-span-11 {
    grid-column: span 11;
  }

  .xs-grid-span-12 {
    grid-column: span 12;
  }

  .sm-grid-span-1 {
    grid-column: span 1;
  }

  .sm-grid-span-2 {
    grid-column: span 2;
  }

  .sm-grid-span-3 {
    grid-column: span 3;
  }

  .sm-grid-span-4 {
    grid-column: span 4;
  }

  .sm-grid-span-5 {
    grid-column: span 5;
  }

  .sm-grid-span-6 {
    grid-column: span 6;
  }

  .sm-grid-span-7 {
    grid-column: span 7;
  }

  .sm-grid-span-8 {
    grid-column: span 8;
  }

  .sm-grid-span-9 {
    grid-column: span 9;
  }

  .sm-grid-span-10 {
    grid-column: span 10;
  }

  .sm-grid-span-11 {
    grid-column: span 11;
  }

  .sm-grid-span-12 {
    grid-column: span 12;
  }

  .md-grid-span-1 {
    grid-column: span 1;
  }

  .md-grid-span-2 {
    grid-column: span 2;
  }

  .md-grid-span-3 {
    grid-column: span 3;
  }

  .md-grid-span-4 {
    grid-column: span 4;
  }

  .md-grid-span-5 {
    grid-column: span 5;
  }

  .md-grid-span-6 {
    grid-column: span 6;
  }

  .md-grid-span-7 {
    grid-column: span 7;
  }

  .md-grid-span-8 {
    grid-column: span 8;
  }

  .md-grid-span-9 {
    grid-column: span 9;
  }

  .md-grid-span-10 {
    grid-column: span 10;
  }

  .md-grid-span-11 {
    grid-column: span 11;
  }

  .md-grid-span-12 {
    grid-column: span 12;
  }

  .lg-grid-span-1 {
    grid-column: span 1;
  }

  .lg-grid-span-2 {
    grid-column: span 2;
  }

  .lg-grid-span-3 {
    grid-column: span 3;
  }

  .lg-grid-span-4 {
    grid-column: span 4;
  }

  .lg-grid-span-5 {
    grid-column: span 5;
  }

  .lg-grid-span-6 {
    grid-column: span 6;
  }

  .lg-grid-span-7 {
    grid-column: span 7;
  }

  .lg-grid-span-8 {
    grid-column: span 8;
  }

  .lg-grid-span-9 {
    grid-column: span 9;
  }

  .lg-grid-span-10 {
    grid-column: span 10;
  }

  .lg-grid-span-11 {
    grid-column: span 11;
  }

  .lg-grid-span-12 {
    grid-column: span 12;
  }
}
/* Medium Devices, Desktops lg */
@media only screen and (max-width: 992px) and (min-width: 769px) {
  .lg-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    grid-column: span 1;
  }

  .xxl-grid-span-2 {
    grid-column: span 2;
  }

  .xxl-grid-span-3 {
    grid-column: span 3;
  }

  .xxl-grid-span-4 {
    grid-column: span 4;
  }

  .xxl-grid-span-5 {
    grid-column: span 5;
  }

  .xxl-grid-span-6 {
    grid-column: span 6;
  }

  .xxl-grid-span-7 {
    grid-column: span 7;
  }

  .xxl-grid-span-8 {
    grid-column: span 8;
  }

  .xxl-grid-span-9 {
    grid-column: span 9;
  }

  .xxl-grid-span-10 {
    grid-column: span 10;
  }

  .xxl-grid-span-11 {
    grid-column: span 11;
  }

  .xxl-grid-span-12 {
    grid-column: span 12;
  }

  .xl-grid-span-1 {
    grid-column: span 1;
  }

  .xl-grid-span-2 {
    grid-column: span 2;
  }

  .xl-grid-span-3 {
    grid-column: span 3;
  }

  .xl-grid-span-4 {
    grid-column: span 4;
  }

  .xl-grid-span-5 {
    grid-column: span 5;
  }

  .xl-grid-span-6 {
    grid-column: span 6;
  }

  .xl-grid-span-7 {
    grid-column: span 7;
  }

  .xl-grid-span-8 {
    grid-column: span 8;
  }

  .xl-grid-span-9 {
    grid-column: span 9;
  }

  .xl-grid-span-10 {
    grid-column: span 10;
  }

  .xl-grid-span-11 {
    grid-column: span 11;
  }

  .xl-grid-span-12 {
    grid-column: span 12;
  }

  .lg-grid-span-1 {
    grid-column: span 1 !important;
  }

  .lg-grid-span-2 {
    grid-column: span 2 !important;
  }

  .lg-grid-span-3 {
    grid-column: span 3 !important;
  }

  .lg-grid-span-4 {
    grid-column: span 4 !important;
  }

  .lg-grid-span-5 {
    grid-column: span 5 !important;
  }

  .lg-grid-span-6 {
    grid-column: span 6 !important;
  }

  .lg-grid-span-7 {
    grid-column: span 7 !important;
  }

  .lg-grid-span-8 {
    grid-column: span 8 !important;
  }

  .lg-grid-span-9 {
    grid-column: span 9 !important;
  }

  .lg-grid-span-10 {
    grid-column: span 10 !important;
  }

  .lg-grid-span-11 {
    grid-column: span 11 !important;
  }

  .lg-grid-span-12 {
    grid-column: span 12 !important;
  }

  .xs-grid-span-1 {
    grid-column: span 1;
  }

  .xs-grid-span-2 {
    grid-column: span 2;
  }

  .xs-grid-span-3 {
    grid-column: span 3;
  }

  .xs-grid-span-4 {
    grid-column: span 4;
  }

  .xs-grid-span-5 {
    grid-column: span 5;
  }

  .xs-grid-span-6 {
    grid-column: span 6;
  }

  .xs-grid-span-7 {
    grid-column: span 7;
  }

  .xs-grid-span-8 {
    grid-column: span 8;
  }

  .xs-grid-span-9 {
    grid-column: span 9;
  }

  .xs-grid-span-10 {
    grid-column: span 10;
  }

  .xs-grid-span-11 {
    grid-column: span 11;
  }

  .xs-grid-span-12 {
    grid-column: span 12;
  }

  .sm-grid-span-1 {
    grid-column: span 1;
  }

  .sm-grid-span-2 {
    grid-column: span 2;
  }

  .sm-grid-span-3 {
    grid-column: span 3;
  }

  .sm-grid-span-4 {
    grid-column: span 4;
  }

  .sm-grid-span-5 {
    grid-column: span 5;
  }

  .sm-grid-span-6 {
    grid-column: span 6;
  }

  .sm-grid-span-7 {
    grid-column: span 7;
  }

  .sm-grid-span-8 {
    grid-column: span 8;
  }

  .sm-grid-span-9 {
    grid-column: span 9;
  }

  .sm-grid-span-10 {
    grid-column: span 10;
  }

  .sm-grid-span-11 {
    grid-column: span 11;
  }

  .sm-grid-span-12 {
    grid-column: span 12;
  }

  .md-grid-span-1 {
    grid-column: span 1;
  }

  .md-grid-span-2 {
    grid-column: span 2;
  }

  .md-grid-span-3 {
    grid-column: span 3;
  }

  .md-grid-span-4 {
    grid-column: span 4;
  }

  .md-grid-span-5 {
    grid-column: span 5;
  }

  .md-grid-span-6 {
    grid-column: span 6;
  }

  .md-grid-span-7 {
    grid-column: span 7;
  }

  .md-grid-span-8 {
    grid-column: span 8;
  }

  .md-grid-span-9 {
    grid-column: span 9;
  }

  .md-grid-span-10 {
    grid-column: span 10;
  }

  .md-grid-span-11 {
    grid-column: span 11;
  }

  .md-grid-span-12 {
    grid-column: span 12;
  }
}
/* Small Devices, Tablets md */
@media only screen and (max-width: 768px) and (min-width: 481px) {
  .md-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    grid-column: span 1;
  }

  .xxl-grid-span-2 {
    grid-column: span 2;
  }

  .xxl-grid-span-3 {
    grid-column: span 3;
  }

  .xxl-grid-span-4 {
    grid-column: span 4;
  }

  .xxl-grid-span-5 {
    grid-column: span 5;
  }

  .xxl-grid-span-6 {
    grid-column: span 6;
  }

  .xxl-grid-span-7 {
    grid-column: span 7;
  }

  .xxl-grid-span-8 {
    grid-column: span 8;
  }

  .xxl-grid-span-9 {
    grid-column: span 9;
  }

  .xxl-grid-span-10 {
    grid-column: span 10;
  }

  .xxl-grid-span-11 {
    grid-column: span 11;
  }

  .xxl-grid-span-12 {
    grid-column: span 12;
  }

  .xl-grid-span-1 {
    grid-column: span 1;
  }

  .xl-grid-span-2 {
    grid-column: span 2;
  }

  .xl-grid-span-3 {
    grid-column: span 3;
  }

  .xl-grid-span-4 {
    grid-column: span 4;
  }

  .xl-grid-span-5 {
    grid-column: span 5;
  }

  .xl-grid-span-6 {
    grid-column: span 6;
  }

  .xl-grid-span-7 {
    grid-column: span 7;
  }

  .xl-grid-span-8 {
    grid-column: span 8;
  }

  .xl-grid-span-9 {
    grid-column: span 9;
  }

  .xl-grid-span-10 {
    grid-column: span 10;
  }

  .xl-grid-span-11 {
    grid-column: span 11;
  }

  .xl-grid-span-12 {
    grid-column: span 12;
  }

  .lg-grid-span-1 {
    grid-column: span 1;
  }

  .lg-grid-span-2 {
    grid-column: span 2;
  }

  .lg-grid-span-3 {
    grid-column: span 3;
  }

  .lg-grid-span-4 {
    grid-column: span 4;
  }

  .lg-grid-span-5 {
    grid-column: span 5;
  }

  .lg-grid-span-6 {
    grid-column: span 6;
  }

  .lg-grid-span-7 {
    grid-column: span 7;
  }

  .lg-grid-span-8 {
    grid-column: span 8;
  }

  .lg-grid-span-9 {
    grid-column: span 9;
  }

  .lg-grid-span-10 {
    grid-column: span 10;
  }

  .lg-grid-span-11 {
    grid-column: span 11;
  }

  .lg-grid-span-12 {
    grid-column: span 12;
  }

  .md-grid-span-1 {
    grid-column: span 1 !important;
  }

  .md-grid-span-2 {
    grid-column: span 2 !important;
  }

  .md-grid-span-3 {
    grid-column: span 3 !important;
  }

  .md-grid-span-4 {
    grid-column: span 4 !important;
  }

  .md-grid-span-5 {
    grid-column: span 5 !important;
  }

  .md-grid-span-6 {
    grid-column: span 6 !important;
  }

  .md-grid-span-7 {
    grid-column: span 7 !important;
  }

  .md-grid-span-8 {
    grid-column: span 8 !important;
  }

  .md-grid-span-9 {
    grid-column: span 9 !important;
  }

  .md-grid-span-10 {
    grid-column: span 10 !important;
  }

  .md-grid-span-11 {
    grid-column: span 11 !important;
  }

  .md-grid-span-12 {
    grid-column: span 12 !important;
  }

  .xs-grid-span-1 {
    grid-column: span 1;
  }

  .xs-grid-span-2 {
    grid-column: span 2;
  }

  .xs-grid-span-3 {
    grid-column: span 3;
  }

  .xs-grid-span-4 {
    grid-column: span 4;
  }

  .xs-grid-span-5 {
    grid-column: span 5;
  }

  .xs-grid-span-6 {
    grid-column: span 6;
  }

  .xs-grid-span-7 {
    grid-column: span 7;
  }

  .xs-grid-span-8 {
    grid-column: span 8;
  }

  .xs-grid-span-9 {
    grid-column: span 9;
  }

  .xs-grid-span-10 {
    grid-column: span 10;
  }

  .xs-grid-span-11 {
    grid-column: span 11;
  }

  .xs-grid-span-12 {
    grid-column: span 12;
  }

  .sm-grid-span-1 {
    grid-column: span 1;
  }

  .sm-grid-span-2 {
    grid-column: span 2;
  }

  .sm-grid-span-3 {
    grid-column: span 3;
  }

  .sm-grid-span-4 {
    grid-column: span 4;
  }

  .sm-grid-span-5 {
    grid-column: span 5;
  }

  .sm-grid-span-6 {
    grid-column: span 6;
  }

  .sm-grid-span-7 {
    grid-column: span 7;
  }

  .sm-grid-span-8 {
    grid-column: span 8;
  }

  .sm-grid-span-9 {
    grid-column: span 9;
  }

  .sm-grid-span-10 {
    grid-column: span 10;
  }

  .sm-grid-span-11 {
    grid-column: span 11;
  }

  .sm-grid-span-12 {
    grid-column: span 12;
  }
}
/* Extra Small Devices, Phones sm */
@media only screen and (max-width: 480px) and (min-width: 321px) {
  .sm-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    grid-column: span 1;
  }

  .xxl-grid-span-2 {
    grid-column: span 2;
  }

  .xxl-grid-span-3 {
    grid-column: span 3;
  }

  .xxl-grid-span-4 {
    grid-column: span 4;
  }

  .xxl-grid-span-5 {
    grid-column: span 5;
  }

  .xxl-grid-span-6 {
    grid-column: span 6;
  }

  .xxl-grid-span-7 {
    grid-column: span 7;
  }

  .xxl-grid-span-8 {
    grid-column: span 8;
  }

  .xxl-grid-span-9 {
    grid-column: span 9;
  }

  .xxl-grid-span-10 {
    grid-column: span 10;
  }

  .xxl-grid-span-11 {
    grid-column: span 11;
  }

  .xxl-grid-span-12 {
    grid-column: span 12;
  }

  .xl-grid-span-1 {
    grid-column: span 1;
  }

  .xl-grid-span-2 {
    grid-column: span 2;
  }

  .xl-grid-span-3 {
    grid-column: span 3;
  }

  .xl-grid-span-4 {
    grid-column: span 4;
  }

  .xl-grid-span-5 {
    grid-column: span 5;
  }

  .xl-grid-span-6 {
    grid-column: span 6;
  }

  .xl-grid-span-7 {
    grid-column: span 7;
  }

  .xl-grid-span-8 {
    grid-column: span 8;
  }

  .xl-grid-span-9 {
    grid-column: span 9;
  }

  .xl-grid-span-10 {
    grid-column: span 10;
  }

  .xl-grid-span-11 {
    grid-column: span 11;
  }

  .xl-grid-span-12 {
    grid-column: span 12;
  }

  .lg-grid-span-1 {
    grid-column: span 1;
  }

  .lg-grid-span-2 {
    grid-column: span 2;
  }

  .lg-grid-span-3 {
    grid-column: span 3;
  }

  .lg-grid-span-4 {
    grid-column: span 4;
  }

  .lg-grid-span-5 {
    grid-column: span 5;
  }

  .lg-grid-span-6 {
    grid-column: span 6;
  }

  .lg-grid-span-7 {
    grid-column: span 7;
  }

  .lg-grid-span-8 {
    grid-column: span 8;
  }

  .lg-grid-span-9 {
    grid-column: span 9;
  }

  .lg-grid-span-10 {
    grid-column: span 10;
  }

  .lg-grid-span-11 {
    grid-column: span 11;
  }

  .lg-grid-span-12 {
    grid-column: span 12;
  }

  .md-grid-span-1 {
    grid-column: span 1;
  }

  .md-grid-span-2 {
    grid-column: span 2;
  }

  .md-grid-span-3 {
    grid-column: span 3;
  }

  .md-grid-span-4 {
    grid-column: span 4;
  }

  .md-grid-span-5 {
    grid-column: span 5;
  }

  .md-grid-span-6 {
    grid-column: span 6;
  }

  .md-grid-span-7 {
    grid-column: span 7;
  }

  .md-grid-span-8 {
    grid-column: span 8;
  }

  .md-grid-span-9 {
    grid-column: span 9;
  }

  .md-grid-span-10 {
    grid-column: span 10;
  }

  .md-grid-span-11 {
    grid-column: span 11;
  }

  .md-grid-span-12 {
    grid-column: span 12;
  }

  .sm-grid-span-1 {
    grid-column: span 1 !important;
  }

  .sm-grid-span-2 {
    grid-column: span 2 !important;
  }

  .sm-grid-span-3 {
    grid-column: span 3 !important;
  }

  .sm-grid-span-4 {
    grid-column: span 4 !important;
  }

  .sm-grid-span-5 {
    grid-column: span 5 !important;
  }

  .sm-grid-span-6 {
    grid-column: span 6 !important;
  }

  .sm-grid-span-7 {
    grid-column: span 7 !important;
  }

  .sm-grid-span-8 {
    grid-column: span 8 !important;
  }

  .sm-grid-span-9 {
    grid-column: span 9 !important;
  }

  .sm-grid-span-10 {
    grid-column: span 10 !important;
  }

  .sm-grid-span-11 {
    grid-column: span 11 !important;
  }

  .sm-grid-span-12 {
    grid-column: span 12 !important;
  }

  .xs-grid-span-1 {
    grid-column: span 1;
  }

  .xs-grid-span-2 {
    grid-column: span 2;
  }

  .xs-grid-span-3 {
    grid-column: span 3;
  }

  .xs-grid-span-4 {
    grid-column: span 4;
  }

  .xs-grid-span-5 {
    grid-column: span 5;
  }

  .xs-grid-span-6 {
    grid-column: span 6;
  }

  .xs-grid-span-7 {
    grid-column: span 7;
  }

  .xs-grid-span-8 {
    grid-column: span 8;
  }

  .xs-grid-span-9 {
    grid-column: span 9;
  }

  .xs-grid-span-10 {
    grid-column: span 10;
  }

  .xs-grid-span-11 {
    grid-column: span 11;
  }

  .xs-grid-span-12 {
    grid-column: span 12;
  }
}
/* Custom, iPhone Retina xs */
@media only screen and (max-width: 320px) {
  .xs-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    grid-column: span 1;
  }

  .xxl-grid-span-2 {
    grid-column: span 2;
  }

  .xxl-grid-span-3 {
    grid-column: span 3;
  }

  .xxl-grid-span-4 {
    grid-column: span 4;
  }

  .xxl-grid-span-5 {
    grid-column: span 5;
  }

  .xxl-grid-span-6 {
    grid-column: span 6;
  }

  .xxl-grid-span-7 {
    grid-column: span 7;
  }

  .xxl-grid-span-8 {
    grid-column: span 8;
  }

  .xxl-grid-span-9 {
    grid-column: span 9;
  }

  .xxl-grid-span-10 {
    grid-column: span 10;
  }

  .xxl-grid-span-11 {
    grid-column: span 11;
  }

  .xxl-grid-span-12 {
    grid-column: span 12;
  }

  .xl-grid-span-1 {
    grid-column: span 1;
  }

  .xl-grid-span-2 {
    grid-column: span 2;
  }

  .xl-grid-span-3 {
    grid-column: span 3;
  }

  .xl-grid-span-4 {
    grid-column: span 4;
  }

  .xl-grid-span-5 {
    grid-column: span 5;
  }

  .xl-grid-span-6 {
    grid-column: span 6;
  }

  .xl-grid-span-7 {
    grid-column: span 7;
  }

  .xl-grid-span-8 {
    grid-column: span 8;
  }

  .xl-grid-span-9 {
    grid-column: span 9;
  }

  .xl-grid-span-10 {
    grid-column: span 10;
  }

  .xl-grid-span-11 {
    grid-column: span 11;
  }

  .xl-grid-span-12 {
    grid-column: span 12;
  }

  .lg-grid-span-1 {
    grid-column: span 1;
  }

  .lg-grid-span-2 {
    grid-column: span 2;
  }

  .lg-grid-span-3 {
    grid-column: span 3;
  }

  .lg-grid-span-4 {
    grid-column: span 4;
  }

  .lg-grid-span-5 {
    grid-column: span 5;
  }

  .lg-grid-span-6 {
    grid-column: span 6;
  }

  .lg-grid-span-7 {
    grid-column: span 7;
  }

  .lg-grid-span-8 {
    grid-column: span 8;
  }

  .lg-grid-span-9 {
    grid-column: span 9;
  }

  .lg-grid-span-10 {
    grid-column: span 10;
  }

  .lg-grid-span-11 {
    grid-column: span 11;
  }

  .lg-grid-span-12 {
    grid-column: span 12;
  }

  .md-grid-span-1 {
    grid-column: span 1;
  }

  .md-grid-span-2 {
    grid-column: span 2;
  }

  .md-grid-span-3 {
    grid-column: span 3;
  }

  .md-grid-span-4 {
    grid-column: span 4;
  }

  .md-grid-span-5 {
    grid-column: span 5;
  }

  .md-grid-span-6 {
    grid-column: span 6;
  }

  .md-grid-span-7 {
    grid-column: span 7;
  }

  .md-grid-span-8 {
    grid-column: span 8;
  }

  .md-grid-span-9 {
    grid-column: span 9;
  }

  .md-grid-span-10 {
    grid-column: span 10;
  }

  .md-grid-span-11 {
    grid-column: span 11;
  }

  .md-grid-span-12 {
    grid-column: span 12;
  }

  .sm-grid-span-1 {
    grid-column: span 1;
  }

  .sm-grid-span-2 {
    grid-column: span 2;
  }

  .sm-grid-span-3 {
    grid-column: span 3;
  }

  .sm-grid-span-4 {
    grid-column: span 4;
  }

  .sm-grid-span-5 {
    grid-column: span 5;
  }

  .sm-grid-span-6 {
    grid-column: span 6;
  }

  .sm-grid-span-7 {
    grid-column: span 7;
  }

  .sm-grid-span-8 {
    grid-column: span 8;
  }

  .sm-grid-span-9 {
    grid-column: span 9;
  }

  .sm-grid-span-10 {
    grid-column: span 10;
  }

  .sm-grid-span-11 {
    grid-column: span 11;
  }

  .sm-grid-span-12 {
    grid-column: span 12;
  }

  .xs-grid-span-1 {
    grid-column: span 1 !important;
  }

  .xs-grid-span-2 {
    grid-column: span 2 !important;
  }

  .xs-grid-span-3 {
    grid-column: span 3 !important;
  }

  .xs-grid-span-4 {
    grid-column: span 4 !important;
  }

  .xs-grid-span-5 {
    grid-column: span 5 !important;
  }

  .xs-grid-span-6 {
    grid-column: span 6 !important;
  }

  .xs-grid-span-7 {
    grid-column: span 7 !important;
  }

  .xs-grid-span-8 {
    grid-column: span 8 !important;
  }

  .xs-grid-span-9 {
    grid-column: span 9 !important;
  }

  .xs-grid-span-10 {
    grid-column: span 10 !important;
  }

  .xs-grid-span-11 {
    grid-column: span 11 !important;
  }

  .xs-grid-span-12 {
    grid-column: span 12 !important;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  /* IE10+ specific styles go here */
  /**
  * Grid containers for responsive and dynamic layouts.
  */
  [class^=grid-span], [class*=-grid-span-] {
    display: inline-block;
    padding-right: 15px;
    vertical-align: top;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .row, .grid-container, .html-table-row {
    margin-right: -15px;
    font-size: 0px;
  }

  .grid-span-1 {
    width: 8.3333333333%;
  }

  .grid-span-2 {
    width: 16.6666666667%;
  }

  .grid-span-3 {
    width: 25%;
  }

  .grid-span-4, form [data-ordered-list-input] .col-xs-3 {
    width: 33.3333333333%;
  }

  .grid-span-5 {
    width: 41.6666666667%;
  }

  .grid-span-6 {
    width: 50%;
  }

  .grid-span-7 {
    width: 58.3333333333%;
  }

  .grid-span-8, form [data-ordered-list-input] .col-xs-9 {
    width: 66.6666666667%;
  }

  .grid-span-9 {
    width: 75%;
  }

  .grid-span-10 {
    width: 83.3333333333%;
  }

  .grid-span-11 {
    width: 91.6666666667%;
  }

  .grid-span-12 {
    width: 100%;
  }

  .xs-grid-span-1 {
    width: 8.3333333333%;
  }

  .xs-grid-span-2 {
    width: 16.6666666667%;
  }

  .xs-grid-span-3 {
    width: 25%;
  }

  .xs-grid-span-4 {
    width: 33.3333333333%;
  }

  .xs-grid-span-5 {
    width: 41.6666666667%;
  }

  .xs-grid-span-6 {
    width: 50%;
  }

  .xs-grid-span-7 {
    width: 58.3333333333%;
  }

  .xs-grid-span-8 {
    width: 66.6666666667%;
  }

  .xs-grid-span-9 {
    width: 75%;
  }

  .xs-grid-span-10 {
    width: 83.3333333333%;
  }

  .xs-grid-span-11 {
    width: 91.6666666667%;
  }

  .xs-grid-span-12 {
    width: 100%;
  }

  .sm-grid-span-1 {
    width: 8.3333333333%;
  }

  .sm-grid-span-2 {
    width: 16.6666666667%;
  }

  .sm-grid-span-3 {
    width: 25%;
  }

  .sm-grid-span-4 {
    width: 33.3333333333%;
  }

  .sm-grid-span-5 {
    width: 41.6666666667%;
  }

  .sm-grid-span-6 {
    width: 50%;
  }

  .sm-grid-span-7 {
    width: 58.3333333333%;
  }

  .sm-grid-span-8 {
    width: 66.6666666667%;
  }

  .sm-grid-span-9 {
    width: 75%;
  }

  .sm-grid-span-10 {
    width: 83.3333333333%;
  }

  .sm-grid-span-11 {
    width: 91.6666666667%;
  }

  .sm-grid-span-12 {
    width: 100%;
  }

  .md-grid-span-1 {
    width: 8.3333333333%;
  }

  .md-grid-span-2 {
    width: 16.6666666667%;
  }

  .md-grid-span-3 {
    width: 25%;
  }

  .md-grid-span-4 {
    width: 33.3333333333%;
  }

  .md-grid-span-5 {
    width: 41.6666666667%;
  }

  .md-grid-span-6 {
    width: 50%;
  }

  .md-grid-span-7 {
    width: 58.3333333333%;
  }

  .md-grid-span-8 {
    width: 66.6666666667%;
  }

  .md-grid-span-9 {
    width: 75%;
  }

  .md-grid-span-10 {
    width: 83.3333333333%;
  }

  .md-grid-span-11 {
    width: 91.6666666667%;
  }

  .md-grid-span-12 {
    width: 100%;
  }

  .lg-grid-span-1 {
    width: 8.3333333333%;
  }

  .lg-grid-span-2 {
    width: 16.6666666667%;
  }

  .lg-grid-span-3 {
    width: 25%;
  }

  .lg-grid-span-4 {
    width: 33.3333333333%;
  }

  .lg-grid-span-5 {
    width: 41.6666666667%;
  }

  .lg-grid-span-6 {
    width: 50%;
  }

  .lg-grid-span-7 {
    width: 58.3333333333%;
  }

  .lg-grid-span-8 {
    width: 66.6666666667%;
  }

  .lg-grid-span-9 {
    width: 75%;
  }

  .lg-grid-span-10 {
    width: 83.3333333333%;
  }

  .lg-grid-span-11 {
    width: 91.6666666667%;
  }

  .lg-grid-span-12 {
    width: 100%;
  }

  .xl-grid-span-1 {
    width: 8.3333333333%;
  }

  .xl-grid-span-2 {
    width: 16.6666666667%;
  }

  .xl-grid-span-3 {
    width: 25%;
  }

  .xl-grid-span-4 {
    width: 33.3333333333%;
  }

  .xl-grid-span-5 {
    width: 41.6666666667%;
  }

  .xl-grid-span-6 {
    width: 50%;
  }

  .xl-grid-span-7 {
    width: 58.3333333333%;
  }

  .xl-grid-span-8 {
    width: 66.6666666667%;
  }

  .xl-grid-span-9 {
    width: 75%;
  }

  .xl-grid-span-10 {
    width: 83.3333333333%;
  }

  .xl-grid-span-11 {
    width: 91.6666666667%;
  }

  .xl-grid-span-12 {
    width: 100%;
  }

  .xxl-grid-span-1 {
    width: 8.3333333333%;
  }

  .xxl-grid-span-2 {
    width: 16.6666666667%;
  }

  .xxl-grid-span-3 {
    width: 25%;
  }

  .xxl-grid-span-4 {
    width: 33.3333333333%;
  }

  .xxl-grid-span-5 {
    width: 41.6666666667%;
  }

  .xxl-grid-span-6 {
    width: 50%;
  }

  .xxl-grid-span-7 {
    width: 58.3333333333%;
  }

  .xxl-grid-span-8 {
    width: 66.6666666667%;
  }

  .xxl-grid-span-9 {
    width: 75%;
  }

  .xxl-grid-span-10 {
    width: 83.3333333333%;
  }

  .xxl-grid-span-11 {
    width: 91.6666666667%;
  }

  .xxl-grid-span-12 {
    width: 100%;
  }

  /* XXLarge Devices, Wide Screens xxl */
  /* Large Devices, Wide Screens xl */
  /* Medium Devices, Desktops lg */
  /* Small Devices, Tablets md */
  /* Extra Small Devices, Phones sm */
  /* Custom, iPhone Retina xs */
}
@media only screen and (-ms-high-contrast: active) and (min-width: 1201px), only screen and (-ms-high-contrast: none) and (min-width: 1201px) {
  .xxl-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    width: 8.3333333333% !important;
  }

  .xxl-grid-span-2 {
    width: 16.6666666667% !important;
  }

  .xxl-grid-span-3 {
    width: 25% !important;
  }

  .xxl-grid-span-4 {
    width: 33.3333333333% !important;
  }

  .xxl-grid-span-5 {
    width: 41.6666666667% !important;
  }

  .xxl-grid-span-6 {
    width: 50% !important;
  }

  .xxl-grid-span-7 {
    width: 58.3333333333% !important;
  }

  .xxl-grid-span-8 {
    width: 66.6666666667% !important;
  }

  .xxl-grid-span-9 {
    width: 75% !important;
  }

  .xxl-grid-span-10 {
    width: 83.3333333333% !important;
  }

  .xxl-grid-span-11 {
    width: 91.6666666667% !important;
  }

  .xxl-grid-span-12 {
    width: 100% !important;
  }

  .xs-grid-span-1 {
    width: 8.3333333333%;
  }

  .xs-grid-span-2 {
    width: 16.6666666667%;
  }

  .xs-grid-span-3 {
    width: 25%;
  }

  .xs-grid-span-4 {
    width: 33.3333333333%;
  }

  .xs-grid-span-5 {
    width: 41.6666666667%;
  }

  .xs-grid-span-6 {
    width: 50%;
  }

  .xs-grid-span-7 {
    width: 58.3333333333%;
  }

  .xs-grid-span-8 {
    width: 66.6666666667%;
  }

  .xs-grid-span-9 {
    width: 75%;
  }

  .xs-grid-span-10 {
    width: 83.3333333333%;
  }

  .xs-grid-span-11 {
    width: 91.6666666667%;
  }

  .xs-grid-span-12 {
    width: 100%;
  }

  .sm-grid-span-1 {
    width: 8.3333333333%;
  }

  .sm-grid-span-2 {
    width: 16.6666666667%;
  }

  .sm-grid-span-3 {
    width: 25%;
  }

  .sm-grid-span-4 {
    width: 33.3333333333%;
  }

  .sm-grid-span-5 {
    width: 41.6666666667%;
  }

  .sm-grid-span-6 {
    width: 50%;
  }

  .sm-grid-span-7 {
    width: 58.3333333333%;
  }

  .sm-grid-span-8 {
    width: 66.6666666667%;
  }

  .sm-grid-span-9 {
    width: 75%;
  }

  .sm-grid-span-10 {
    width: 83.3333333333%;
  }

  .sm-grid-span-11 {
    width: 91.6666666667%;
  }

  .sm-grid-span-12 {
    width: 100%;
  }

  .md-grid-span-1 {
    width: 8.3333333333%;
  }

  .md-grid-span-2 {
    width: 16.6666666667%;
  }

  .md-grid-span-3 {
    width: 25%;
  }

  .md-grid-span-4 {
    width: 33.3333333333%;
  }

  .md-grid-span-5 {
    width: 41.6666666667%;
  }

  .md-grid-span-6 {
    width: 50%;
  }

  .md-grid-span-7 {
    width: 58.3333333333%;
  }

  .md-grid-span-8 {
    width: 66.6666666667%;
  }

  .md-grid-span-9 {
    width: 75%;
  }

  .md-grid-span-10 {
    width: 83.3333333333%;
  }

  .md-grid-span-11 {
    width: 91.6666666667%;
  }

  .md-grid-span-12 {
    width: 100%;
  }

  .lg-grid-span-1 {
    width: 8.3333333333%;
  }

  .lg-grid-span-2 {
    width: 16.6666666667%;
  }

  .lg-grid-span-3 {
    width: 25%;
  }

  .lg-grid-span-4 {
    width: 33.3333333333%;
  }

  .lg-grid-span-5 {
    width: 41.6666666667%;
  }

  .lg-grid-span-6 {
    width: 50%;
  }

  .lg-grid-span-7 {
    width: 58.3333333333%;
  }

  .lg-grid-span-8 {
    width: 66.6666666667%;
  }

  .lg-grid-span-9 {
    width: 75%;
  }

  .lg-grid-span-10 {
    width: 83.3333333333%;
  }

  .lg-grid-span-11 {
    width: 91.6666666667%;
  }

  .lg-grid-span-12 {
    width: 100%;
  }

  .xl-grid-span-1 {
    width: 8.3333333333%;
  }

  .xl-grid-span-2 {
    width: 16.6666666667%;
  }

  .xl-grid-span-3 {
    width: 25%;
  }

  .xl-grid-span-4 {
    width: 33.3333333333%;
  }

  .xl-grid-span-5 {
    width: 41.6666666667%;
  }

  .xl-grid-span-6 {
    width: 50%;
  }

  .xl-grid-span-7 {
    width: 58.3333333333%;
  }

  .xl-grid-span-8 {
    width: 66.6666666667%;
  }

  .xl-grid-span-9 {
    width: 75%;
  }

  .xl-grid-span-10 {
    width: 83.3333333333%;
  }

  .xl-grid-span-11 {
    width: 91.6666666667%;
  }

  .xl-grid-span-12 {
    width: 100%;
  }
}
@media only screen and (-ms-high-contrast: active) and (max-width: 1200px) and (min-width: 993px), only screen and (-ms-high-contrast: none) and (max-width: 1200px) and (min-width: 993px) {
  .xl-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    width: "auto";
  }

  .xxl-grid-span-2 {
    width: "auto";
  }

  .xxl-grid-span-3 {
    width: "auto";
  }

  .xxl-grid-span-4 {
    width: "auto";
  }

  .xxl-grid-span-5 {
    width: "auto";
  }

  .xxl-grid-span-6 {
    width: "auto";
  }

  .xxl-grid-span-7 {
    width: "auto";
  }

  .xxl-grid-span-8 {
    width: "auto";
  }

  .xxl-grid-span-9 {
    width: "auto";
  }

  .xxl-grid-span-10 {
    width: "auto";
  }

  .xxl-grid-span-11 {
    width: "auto";
  }

  .xxl-grid-span-12 {
    width: "auto";
  }

  .xl-grid-span-1 {
    width: 8.3333333333% !important;
  }

  .xl-grid-span-2 {
    width: 16.6666666667% !important;
  }

  .xl-grid-span-3 {
    width: 25% !important;
  }

  .xl-grid-span-4 {
    width: 33.3333333333% !important;
  }

  .xl-grid-span-5 {
    width: 41.6666666667% !important;
  }

  .xl-grid-span-6 {
    width: 50% !important;
  }

  .xl-grid-span-7 {
    width: 58.3333333333% !important;
  }

  .xl-grid-span-8 {
    width: 66.6666666667% !important;
  }

  .xl-grid-span-9 {
    width: 75% !important;
  }

  .xl-grid-span-10 {
    width: 83.3333333333% !important;
  }

  .xl-grid-span-11 {
    width: 91.6666666667% !important;
  }

  .xl-grid-span-12 {
    width: 100% !important;
  }

  .xs-grid-span-1 {
    width: 8.3333333333%;
  }

  .xs-grid-span-2 {
    width: 16.6666666667%;
  }

  .xs-grid-span-3 {
    width: 25%;
  }

  .xs-grid-span-4 {
    width: 33.3333333333%;
  }

  .xs-grid-span-5 {
    width: 41.6666666667%;
  }

  .xs-grid-span-6 {
    width: 50%;
  }

  .xs-grid-span-7 {
    width: 58.3333333333%;
  }

  .xs-grid-span-8 {
    width: 66.6666666667%;
  }

  .xs-grid-span-9 {
    width: 75%;
  }

  .xs-grid-span-10 {
    width: 83.3333333333%;
  }

  .xs-grid-span-11 {
    width: 91.6666666667%;
  }

  .xs-grid-span-12 {
    width: 100%;
  }

  .sm-grid-span-1 {
    width: 8.3333333333%;
  }

  .sm-grid-span-2 {
    width: 16.6666666667%;
  }

  .sm-grid-span-3 {
    width: 25%;
  }

  .sm-grid-span-4 {
    width: 33.3333333333%;
  }

  .sm-grid-span-5 {
    width: 41.6666666667%;
  }

  .sm-grid-span-6 {
    width: 50%;
  }

  .sm-grid-span-7 {
    width: 58.3333333333%;
  }

  .sm-grid-span-8 {
    width: 66.6666666667%;
  }

  .sm-grid-span-9 {
    width: 75%;
  }

  .sm-grid-span-10 {
    width: 83.3333333333%;
  }

  .sm-grid-span-11 {
    width: 91.6666666667%;
  }

  .sm-grid-span-12 {
    width: 100%;
  }

  .md-grid-span-1 {
    width: 8.3333333333%;
  }

  .md-grid-span-2 {
    width: 16.6666666667%;
  }

  .md-grid-span-3 {
    width: 25%;
  }

  .md-grid-span-4 {
    width: 33.3333333333%;
  }

  .md-grid-span-5 {
    width: 41.6666666667%;
  }

  .md-grid-span-6 {
    width: 50%;
  }

  .md-grid-span-7 {
    width: 58.3333333333%;
  }

  .md-grid-span-8 {
    width: 66.6666666667%;
  }

  .md-grid-span-9 {
    width: 75%;
  }

  .md-grid-span-10 {
    width: 83.3333333333%;
  }

  .md-grid-span-11 {
    width: 91.6666666667%;
  }

  .md-grid-span-12 {
    width: 100%;
  }

  .lg-grid-span-1 {
    width: 8.3333333333%;
  }

  .lg-grid-span-2 {
    width: 16.6666666667%;
  }

  .lg-grid-span-3 {
    width: 25%;
  }

  .lg-grid-span-4 {
    width: 33.3333333333%;
  }

  .lg-grid-span-5 {
    width: 41.6666666667%;
  }

  .lg-grid-span-6 {
    width: 50%;
  }

  .lg-grid-span-7 {
    width: 58.3333333333%;
  }

  .lg-grid-span-8 {
    width: 66.6666666667%;
  }

  .lg-grid-span-9 {
    width: 75%;
  }

  .lg-grid-span-10 {
    width: 83.3333333333%;
  }

  .lg-grid-span-11 {
    width: 91.6666666667%;
  }

  .lg-grid-span-12 {
    width: 100%;
  }
}
@media only screen and (-ms-high-contrast: active) and (max-width: 992px) and (min-width: 769px), only screen and (-ms-high-contrast: none) and (max-width: 992px) and (min-width: 769px) {
  .lg-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    width: "auto";
  }

  .xxl-grid-span-2 {
    width: "auto";
  }

  .xxl-grid-span-3 {
    width: "auto";
  }

  .xxl-grid-span-4 {
    width: "auto";
  }

  .xxl-grid-span-5 {
    width: "auto";
  }

  .xxl-grid-span-6 {
    width: "auto";
  }

  .xxl-grid-span-7 {
    width: "auto";
  }

  .xxl-grid-span-8 {
    width: "auto";
  }

  .xxl-grid-span-9 {
    width: "auto";
  }

  .xxl-grid-span-10 {
    width: "auto";
  }

  .xxl-grid-span-11 {
    width: "auto";
  }

  .xxl-grid-span-12 {
    width: "auto";
  }

  .xl-grid-span-1 {
    width: "auto";
  }

  .xl-grid-span-2 {
    width: "auto";
  }

  .xl-grid-span-3 {
    width: "auto";
  }

  .xl-grid-span-4 {
    width: "auto";
  }

  .xl-grid-span-5 {
    width: "auto";
  }

  .xl-grid-span-6 {
    width: "auto";
  }

  .xl-grid-span-7 {
    width: "auto";
  }

  .xl-grid-span-8 {
    width: "auto";
  }

  .xl-grid-span-9 {
    width: "auto";
  }

  .xl-grid-span-10 {
    width: "auto";
  }

  .xl-grid-span-11 {
    width: "auto";
  }

  .xl-grid-span-12 {
    width: "auto";
  }

  .lg-grid-span-1 {
    width: 8.3333333333% !important;
  }

  .lg-grid-span-2 {
    width: 16.6666666667% !important;
  }

  .lg-grid-span-3 {
    width: 25% !important;
  }

  .lg-grid-span-4 {
    width: 33.3333333333% !important;
  }

  .lg-grid-span-5 {
    width: 41.6666666667% !important;
  }

  .lg-grid-span-6 {
    width: 50% !important;
  }

  .lg-grid-span-7 {
    width: 58.3333333333% !important;
  }

  .lg-grid-span-8 {
    width: 66.6666666667% !important;
  }

  .lg-grid-span-9 {
    width: 75% !important;
  }

  .lg-grid-span-10 {
    width: 83.3333333333% !important;
  }

  .lg-grid-span-11 {
    width: 91.6666666667% !important;
  }

  .lg-grid-span-12 {
    width: 100% !important;
  }

  .xs-grid-span-1 {
    width: 8.3333333333%;
  }

  .xs-grid-span-2 {
    width: 16.6666666667%;
  }

  .xs-grid-span-3 {
    width: 25%;
  }

  .xs-grid-span-4 {
    width: 33.3333333333%;
  }

  .xs-grid-span-5 {
    width: 41.6666666667%;
  }

  .xs-grid-span-6 {
    width: 50%;
  }

  .xs-grid-span-7 {
    width: 58.3333333333%;
  }

  .xs-grid-span-8 {
    width: 66.6666666667%;
  }

  .xs-grid-span-9 {
    width: 75%;
  }

  .xs-grid-span-10 {
    width: 83.3333333333%;
  }

  .xs-grid-span-11 {
    width: 91.6666666667%;
  }

  .xs-grid-span-12 {
    width: 100%;
  }

  .sm-grid-span-1 {
    width: 8.3333333333%;
  }

  .sm-grid-span-2 {
    width: 16.6666666667%;
  }

  .sm-grid-span-3 {
    width: 25%;
  }

  .sm-grid-span-4 {
    width: 33.3333333333%;
  }

  .sm-grid-span-5 {
    width: 41.6666666667%;
  }

  .sm-grid-span-6 {
    width: 50%;
  }

  .sm-grid-span-7 {
    width: 58.3333333333%;
  }

  .sm-grid-span-8 {
    width: 66.6666666667%;
  }

  .sm-grid-span-9 {
    width: 75%;
  }

  .sm-grid-span-10 {
    width: 83.3333333333%;
  }

  .sm-grid-span-11 {
    width: 91.6666666667%;
  }

  .sm-grid-span-12 {
    width: 100%;
  }

  .md-grid-span-1 {
    width: 8.3333333333%;
  }

  .md-grid-span-2 {
    width: 16.6666666667%;
  }

  .md-grid-span-3 {
    width: 25%;
  }

  .md-grid-span-4 {
    width: 33.3333333333%;
  }

  .md-grid-span-5 {
    width: 41.6666666667%;
  }

  .md-grid-span-6 {
    width: 50%;
  }

  .md-grid-span-7 {
    width: 58.3333333333%;
  }

  .md-grid-span-8 {
    width: 66.6666666667%;
  }

  .md-grid-span-9 {
    width: 75%;
  }

  .md-grid-span-10 {
    width: 83.3333333333%;
  }

  .md-grid-span-11 {
    width: 91.6666666667%;
  }

  .md-grid-span-12 {
    width: 100%;
  }
}
@media only screen and (-ms-high-contrast: active) and (max-width: 768px) and (min-width: 481px), only screen and (-ms-high-contrast: none) and (max-width: 768px) and (min-width: 481px) {
  .md-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    width: "auto";
  }

  .xxl-grid-span-2 {
    width: "auto";
  }

  .xxl-grid-span-3 {
    width: "auto";
  }

  .xxl-grid-span-4 {
    width: "auto";
  }

  .xxl-grid-span-5 {
    width: "auto";
  }

  .xxl-grid-span-6 {
    width: "auto";
  }

  .xxl-grid-span-7 {
    width: "auto";
  }

  .xxl-grid-span-8 {
    width: "auto";
  }

  .xxl-grid-span-9 {
    width: "auto";
  }

  .xxl-grid-span-10 {
    width: "auto";
  }

  .xxl-grid-span-11 {
    width: "auto";
  }

  .xxl-grid-span-12 {
    width: "auto";
  }

  .xl-grid-span-1 {
    width: "auto";
  }

  .xl-grid-span-2 {
    width: "auto";
  }

  .xl-grid-span-3 {
    width: "auto";
  }

  .xl-grid-span-4 {
    width: "auto";
  }

  .xl-grid-span-5 {
    width: "auto";
  }

  .xl-grid-span-6 {
    width: "auto";
  }

  .xl-grid-span-7 {
    width: "auto";
  }

  .xl-grid-span-8 {
    width: "auto";
  }

  .xl-grid-span-9 {
    width: "auto";
  }

  .xl-grid-span-10 {
    width: "auto";
  }

  .xl-grid-span-11 {
    width: "auto";
  }

  .xl-grid-span-12 {
    width: "auto";
  }

  .lg-grid-span-1 {
    width: "auto";
  }

  .lg-grid-span-2 {
    width: "auto";
  }

  .lg-grid-span-3 {
    width: "auto";
  }

  .lg-grid-span-4 {
    width: "auto";
  }

  .lg-grid-span-5 {
    width: "auto";
  }

  .lg-grid-span-6 {
    width: "auto";
  }

  .lg-grid-span-7 {
    width: "auto";
  }

  .lg-grid-span-8 {
    width: "auto";
  }

  .lg-grid-span-9 {
    width: "auto";
  }

  .lg-grid-span-10 {
    width: "auto";
  }

  .lg-grid-span-11 {
    width: "auto";
  }

  .lg-grid-span-12 {
    width: "auto";
  }

  .md-grid-span-1 {
    width: 8.3333333333% !important;
  }

  .md-grid-span-2 {
    width: 16.6666666667% !important;
  }

  .md-grid-span-3 {
    width: 25% !important;
  }

  .md-grid-span-4 {
    width: 33.3333333333% !important;
  }

  .md-grid-span-5 {
    width: 41.6666666667% !important;
  }

  .md-grid-span-6 {
    width: 50% !important;
  }

  .md-grid-span-7 {
    width: 58.3333333333% !important;
  }

  .md-grid-span-8 {
    width: 66.6666666667% !important;
  }

  .md-grid-span-9 {
    width: 75% !important;
  }

  .md-grid-span-10 {
    width: 83.3333333333% !important;
  }

  .md-grid-span-11 {
    width: 91.6666666667% !important;
  }

  .md-grid-span-12 {
    width: 100% !important;
  }

  .xs-grid-span-1 {
    width: 8.3333333333%;
  }

  .xs-grid-span-2 {
    width: 16.6666666667%;
  }

  .xs-grid-span-3 {
    width: 25%;
  }

  .xs-grid-span-4 {
    width: 33.3333333333%;
  }

  .xs-grid-span-5 {
    width: 41.6666666667%;
  }

  .xs-grid-span-6 {
    width: 50%;
  }

  .xs-grid-span-7 {
    width: 58.3333333333%;
  }

  .xs-grid-span-8 {
    width: 66.6666666667%;
  }

  .xs-grid-span-9 {
    width: 75%;
  }

  .xs-grid-span-10 {
    width: 83.3333333333%;
  }

  .xs-grid-span-11 {
    width: 91.6666666667%;
  }

  .xs-grid-span-12 {
    width: 100%;
  }

  .sm-grid-span-1 {
    width: 8.3333333333%;
  }

  .sm-grid-span-2 {
    width: 16.6666666667%;
  }

  .sm-grid-span-3 {
    width: 25%;
  }

  .sm-grid-span-4 {
    width: 33.3333333333%;
  }

  .sm-grid-span-5 {
    width: 41.6666666667%;
  }

  .sm-grid-span-6 {
    width: 50%;
  }

  .sm-grid-span-7 {
    width: 58.3333333333%;
  }

  .sm-grid-span-8 {
    width: 66.6666666667%;
  }

  .sm-grid-span-9 {
    width: 75%;
  }

  .sm-grid-span-10 {
    width: 83.3333333333%;
  }

  .sm-grid-span-11 {
    width: 91.6666666667%;
  }

  .sm-grid-span-12 {
    width: 100%;
  }
}
@media only screen and (-ms-high-contrast: active) and (max-width: 480px) and (min-width: 321px), only screen and (-ms-high-contrast: none) and (max-width: 480px) and (min-width: 321px) {
  .sm-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    width: "auto";
  }

  .xxl-grid-span-2 {
    width: "auto";
  }

  .xxl-grid-span-3 {
    width: "auto";
  }

  .xxl-grid-span-4 {
    width: "auto";
  }

  .xxl-grid-span-5 {
    width: "auto";
  }

  .xxl-grid-span-6 {
    width: "auto";
  }

  .xxl-grid-span-7 {
    width: "auto";
  }

  .xxl-grid-span-8 {
    width: "auto";
  }

  .xxl-grid-span-9 {
    width: "auto";
  }

  .xxl-grid-span-10 {
    width: "auto";
  }

  .xxl-grid-span-11 {
    width: "auto";
  }

  .xxl-grid-span-12 {
    width: "auto";
  }

  .xl-grid-span-1 {
    width: "auto";
  }

  .xl-grid-span-2 {
    width: "auto";
  }

  .xl-grid-span-3 {
    width: "auto";
  }

  .xl-grid-span-4 {
    width: "auto";
  }

  .xl-grid-span-5 {
    width: "auto";
  }

  .xl-grid-span-6 {
    width: "auto";
  }

  .xl-grid-span-7 {
    width: "auto";
  }

  .xl-grid-span-8 {
    width: "auto";
  }

  .xl-grid-span-9 {
    width: "auto";
  }

  .xl-grid-span-10 {
    width: "auto";
  }

  .xl-grid-span-11 {
    width: "auto";
  }

  .xl-grid-span-12 {
    width: "auto";
  }

  .lg-grid-span-1 {
    width: "auto";
  }

  .lg-grid-span-2 {
    width: "auto";
  }

  .lg-grid-span-3 {
    width: "auto";
  }

  .lg-grid-span-4 {
    width: "auto";
  }

  .lg-grid-span-5 {
    width: "auto";
  }

  .lg-grid-span-6 {
    width: "auto";
  }

  .lg-grid-span-7 {
    width: "auto";
  }

  .lg-grid-span-8 {
    width: "auto";
  }

  .lg-grid-span-9 {
    width: "auto";
  }

  .lg-grid-span-10 {
    width: "auto";
  }

  .lg-grid-span-11 {
    width: "auto";
  }

  .lg-grid-span-12 {
    width: "auto";
  }

  .md-grid-span-1 {
    width: "auto";
  }

  .md-grid-span-2 {
    width: "auto";
  }

  .md-grid-span-3 {
    width: "auto";
  }

  .md-grid-span-4 {
    width: "auto";
  }

  .md-grid-span-5 {
    width: "auto";
  }

  .md-grid-span-6 {
    width: "auto";
  }

  .md-grid-span-7 {
    width: "auto";
  }

  .md-grid-span-8 {
    width: "auto";
  }

  .md-grid-span-9 {
    width: "auto";
  }

  .md-grid-span-10 {
    width: "auto";
  }

  .md-grid-span-11 {
    width: "auto";
  }

  .md-grid-span-12 {
    width: "auto";
  }

  .sm-grid-span-1 {
    width: 8.3333333333% !important;
  }

  .sm-grid-span-2 {
    width: 16.6666666667% !important;
  }

  .sm-grid-span-3 {
    width: 25% !important;
  }

  .sm-grid-span-4 {
    width: 33.3333333333% !important;
  }

  .sm-grid-span-5 {
    width: 41.6666666667% !important;
  }

  .sm-grid-span-6 {
    width: 50% !important;
  }

  .sm-grid-span-7 {
    width: 58.3333333333% !important;
  }

  .sm-grid-span-8 {
    width: 66.6666666667% !important;
  }

  .sm-grid-span-9 {
    width: 75% !important;
  }

  .sm-grid-span-10 {
    width: 83.3333333333% !important;
  }

  .sm-grid-span-11 {
    width: 91.6666666667% !important;
  }

  .sm-grid-span-12 {
    width: 100% !important;
  }

  .xs-grid-span-1 {
    width: 8.3333333333%;
  }

  .xs-grid-span-2 {
    width: 16.6666666667%;
  }

  .xs-grid-span-3 {
    width: 25%;
  }

  .xs-grid-span-4 {
    width: 33.3333333333%;
  }

  .xs-grid-span-5 {
    width: 41.6666666667%;
  }

  .xs-grid-span-6 {
    width: 50%;
  }

  .xs-grid-span-7 {
    width: 58.3333333333%;
  }

  .xs-grid-span-8 {
    width: 66.6666666667%;
  }

  .xs-grid-span-9 {
    width: 75%;
  }

  .xs-grid-span-10 {
    width: 83.3333333333%;
  }

  .xs-grid-span-11 {
    width: 91.6666666667%;
  }

  .xs-grid-span-12 {
    width: 100%;
  }
}
@media only screen and (-ms-high-contrast: active) and (max-width: 320px), only screen and (-ms-high-contrast: none) and (max-width: 320px) {
  .xs-hidden {
    display: none;
  }

  .xxl-grid-span-1 {
    width: "auto";
  }

  .xxl-grid-span-2 {
    width: "auto";
  }

  .xxl-grid-span-3 {
    width: "auto";
  }

  .xxl-grid-span-4 {
    width: "auto";
  }

  .xxl-grid-span-5 {
    width: "auto";
  }

  .xxl-grid-span-6 {
    width: "auto";
  }

  .xxl-grid-span-7 {
    width: "auto";
  }

  .xxl-grid-span-8 {
    width: "auto";
  }

  .xxl-grid-span-9 {
    width: "auto";
  }

  .xxl-grid-span-10 {
    width: "auto";
  }

  .xxl-grid-span-11 {
    width: "auto";
  }

  .xxl-grid-span-12 {
    width: "auto";
  }

  .xl-grid-span-1 {
    width: "auto";
  }

  .xl-grid-span-2 {
    width: "auto";
  }

  .xl-grid-span-3 {
    width: "auto";
  }

  .xl-grid-span-4 {
    width: "auto";
  }

  .xl-grid-span-5 {
    width: "auto";
  }

  .xl-grid-span-6 {
    width: "auto";
  }

  .xl-grid-span-7 {
    width: "auto";
  }

  .xl-grid-span-8 {
    width: "auto";
  }

  .xl-grid-span-9 {
    width: "auto";
  }

  .xl-grid-span-10 {
    width: "auto";
  }

  .xl-grid-span-11 {
    width: "auto";
  }

  .xl-grid-span-12 {
    width: "auto";
  }

  .lg-grid-span-1 {
    width: "auto";
  }

  .lg-grid-span-2 {
    width: "auto";
  }

  .lg-grid-span-3 {
    width: "auto";
  }

  .lg-grid-span-4 {
    width: "auto";
  }

  .lg-grid-span-5 {
    width: "auto";
  }

  .lg-grid-span-6 {
    width: "auto";
  }

  .lg-grid-span-7 {
    width: "auto";
  }

  .lg-grid-span-8 {
    width: "auto";
  }

  .lg-grid-span-9 {
    width: "auto";
  }

  .lg-grid-span-10 {
    width: "auto";
  }

  .lg-grid-span-11 {
    width: "auto";
  }

  .lg-grid-span-12 {
    width: "auto";
  }

  .md-grid-span-1 {
    width: "auto";
  }

  .md-grid-span-2 {
    width: "auto";
  }

  .md-grid-span-3 {
    width: "auto";
  }

  .md-grid-span-4 {
    width: "auto";
  }

  .md-grid-span-5 {
    width: "auto";
  }

  .md-grid-span-6 {
    width: "auto";
  }

  .md-grid-span-7 {
    width: "auto";
  }

  .md-grid-span-8 {
    width: "auto";
  }

  .md-grid-span-9 {
    width: "auto";
  }

  .md-grid-span-10 {
    width: "auto";
  }

  .md-grid-span-11 {
    width: "auto";
  }

  .md-grid-span-12 {
    width: "auto";
  }

  .sm-grid-span-1 {
    width: "auto";
  }

  .sm-grid-span-2 {
    width: "auto";
  }

  .sm-grid-span-3 {
    width: "auto";
  }

  .sm-grid-span-4 {
    width: "auto";
  }

  .sm-grid-span-5 {
    width: "auto";
  }

  .sm-grid-span-6 {
    width: "auto";
  }

  .sm-grid-span-7 {
    width: "auto";
  }

  .sm-grid-span-8 {
    width: "auto";
  }

  .sm-grid-span-9 {
    width: "auto";
  }

  .sm-grid-span-10 {
    width: "auto";
  }

  .sm-grid-span-11 {
    width: "auto";
  }

  .sm-grid-span-12 {
    width: "auto";
  }

  .xs-grid-span-1 {
    width: 8.3333333333% !important;
  }

  .xs-grid-span-2 {
    width: 16.6666666667% !important;
  }

  .xs-grid-span-3 {
    width: 25% !important;
  }

  .xs-grid-span-4 {
    width: 33.3333333333% !important;
  }

  .xs-grid-span-5 {
    width: 41.6666666667% !important;
  }

  .xs-grid-span-6 {
    width: 50% !important;
  }

  .xs-grid-span-7 {
    width: 58.3333333333% !important;
  }

  .xs-grid-span-8 {
    width: 66.6666666667% !important;
  }

  .xs-grid-span-9 {
    width: 75% !important;
  }

  .xs-grid-span-10 {
    width: 83.3333333333% !important;
  }

  .xs-grid-span-11 {
    width: 91.6666666667% !important;
  }

  .xs-grid-span-12 {
    width: 100% !important;
  }
}
ul {
  /*&.bubble-checkbox {
  	li {margin:0 10px 10px 0; @extend .bubble,.ghost; @include transition(all 400ms $standard-curve); background-color:transparent; font-size:14px; text-transform:none; padding:10px 18px; border-radius:4px; border-color:$medium-grey !important; display:inline-block; color:$black; font-weight:500;
  		&.cat-production {background-color:$production; color:$black; border-color:$production !important;}
  	}
  }*/
}
ul li {
  margin-top: 15px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  /*&.read {opacity:.6;}*/
}
ul li.float-active {
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}
ul li i {
  transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
ul li.alert:before {
  content: "";
  border-top: 7px solid #b71c1c;
  border-left: 7px solid #b71c1c;
  border-bottom: 7px solid transparent;
  border-right: 7px solid transparent;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  position: absolute;
}
ul.default {
  border: 1px solid #e5e5e5;
}
ul.default li {
  border-top: 1px solid #e5e5e5;
  margin-top: 0;
  padding: 18px 12px;
  position: relative;
  /* Original height came from h4, moving to be padding on parent */
  /*h4 {line-height:55px;}*/
}
ul.default li i {
  float: left;
  line-height: 55px;
  margin-right: 22px;
}
ul.default li .bubble i, ul.default li form [data-ordered-list-input] ol li i, form [data-ordered-list-input] ol ul.default li li i {
  line-height: inherit;
}
ul.default li:first-child {
  border-top: none;
}
ul.bulleted-list {
  margin-bottom: 10px;
}
ul.bulleted-list li {
  margin-left: 17px;
  font-size: 13px;
  list-style-type: disc;
  margin-top: 8px;
}
ul.feed-list {
  border: 1px solid #e5e5e5;
  max-height: 900px;
  overflow: auto;
}
ul.feed-list li {
  border-top: 1px solid #e5e5e5;
  position: relative;
  margin-top: 0;
}
ul.feed-list li .content {
  position: relative;
  padding: 9px 52px 9px 32px;
}
ul.feed-list li .content:before {
  content: "";
  background-color: #c9c9c9;
  width: 2px;
  height: 100%;
  position: absolute;
  left: 12px;
  top: 0;
  z-index: 1;
}
ul.feed-list li .content:after {
  content: "";
  background-color: #c9c9c9;
  border: 2px solid #c9c9c9;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 6px;
  top: 50%;
  margin-top: -5px;
  z-index: 2;
}
ul.feed-list li .content p {
  font-size: 12px;
  line-height: 18px;
  color: #9e9e9e;
  margin-bottom: 5px;
  white-space: pre-wrap;
}
ul.feed-list li .content h5 {
  margin-top: 3px;
  font-weight: normal;
}
ul.feed-list li .content.unread:after {
  border-color: #c9c9c9;
  background-color: #c9c9c9;
}
ul.feed-list li .content.cat-shipping:after {
  border-color: #66bb6a;
  background-color: #ffffff;
}
ul.feed-list li .content.cat-inspection:after {
  border-color: #9575cd;
  background-color: #ffffff;
}
ul.feed-list li .content.cat-production:after {
  border-color: #ffca28;
  background-color: #ffffff;
}
ul.feed-list li .content.cat-final-production:after {
  border-color: #9575cd;
  background-color: #ffffff;
}
ul.feed-list li .content.cat-pre-production:after {
  background-color: #ffffff;
}
ul.feed-list li .content.accepted:after {
  background-color: #c9c9c9;
}
ul.feed-list li .content.accepted.cat-shipping:after {
  background-color: #66bb6a;
}
ul.feed-list li .content.accepted.cat-inspection:after {
  background-color: #9575cd;
}
ul.feed-list li .content.accepted.cat-production:after {
  background-color: #ffca28;
}
ul.feed-list li .content.accepted.cat-final-production:after {
  background-color: #9575cd;
}
ul.feed-list li .content.accepted.cat-pre-production:after {
  background-color: #c9c9c9;
}
ul.feed-list li .content.denied h4:before {
  content: "close";
  font-family: "Material Icons";
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  font-size: 24px;
  position: absolute;
  left: 1px;
  z-index: 5;
  top: calc(50% - 2px);
  color: #c9c9c9;
  text-align: center;
  line-height: 8px;
}
ul.feed-list li a {
  position: absolute;
  right: 75px;
  top: 13px;
  bottom: 0;
}
ul.feed-list li a:before {
  display: inline-block;
  height: 50%;
  content: "";
}
ul.feed-list li a i {
  color: #c9c9c9;
}
ul.feed-list li a:last-child {
  right: 10px;
}
ul.feed-list li a:hover {
  text-decoration: none;
}
ul.feed-list li a:hover i {
  color: #1565c0;
}
ul.feed-list li:first-child {
  border-top: none;
}
ul.feed-list li:first-child .content:before {
  height: 50%;
  top: 50%;
}
ul.feed-list li.no-data {
  padding: 10px;
}
ul.feed-list.no-bars li .content:before {
  display: none;
}
ul.feed-list.no-scrollbars {
  max-height: none !important;
}
ul.feed-list.plain li:first-child {
  border-top: 1px solid #e5e5e5;
}
ul.feed-list.plain li .content {
  padding: 9px;
}
ul.feed-list.plain li .content:before, ul.feed-list.plain li .content:after {
  content: none;
}
ul.nav-in-list {
  border: 1px solid #e5e5e5;
}
ul.nav-in-list li {
  border-top: 1px solid #e5e5e5;
  margin-top: 0;
  padding: 18px 35px 18px 12px;
  cursor: pointer;
  position: relative;
  background-color: white;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
ul.nav-in-list li .grid-container, ul.nav-in-list li .html-table-row {
  align-items: center;
}
ul.nav-in-list li i {
  vertical-align: middle;
  margin-right: 22px;
}
ul.nav-in-list li h4 {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
ul.nav-in-list li h4 .toggle label {
  margin: 5px;
}
ul.nav-in-list li h4:after {
  opacity: 0;
  transform: scale(0.1);
  animation: spring-back 300ms;
  animation-fill-mode: backwards;
  transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  content: "done";
  line-height: 17px;
  font-family: "Material Icons";
  color: #ffffff;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 7.5px;
  background-color: #43a047;
  position: absolute;
  top: 50%;
  right: 8px;
  margin-top: -7.5px;
  z-index: 1;
  text-align: center;
  font-size: 12px;
}
ul.nav-in-list li h4.completed:after {
  opacity: 1;
  animation: spring 300ms;
  animation-fill-mode: forwards;
}
ul.nav-in-list li:first-child {
  border-top: none;
}
ul.nav-in-list li:not(.no-after):after {
  content: "keyboard_arrow_right";
  font-family: "Material Icons";
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  position: absolute;
  right: 9px;
  top: calc(50% - 10px);
  color: #c9c9c9;
}
ul.nav-in-list li .difficulty-indicator {
  display: inline-block;
  position: relative;
  top: -2px;
}
ul.nav-in-list li .difficulty-indicator .circle {
  margin-bottom: 0px;
}
ul.nav-in-list li:hover {
  background-color: #f9f9f9 !important;
}
ul.nav-in-list li.no-nav {
  cursor: default;
  padding-right: 12px;
}
ul.nav-in-list li.no-nav:after {
  content: "";
}
ul.nav-in-list li.no-nav:hover {
  background-color: transparent !important;
}
ul.nav-in-list li .textarea-display {
  line-height: 22px;
  word-wrap: break-word;
}
ul.nav-in-list li.active {
  background-color: whitesmoke;
  border-left: 5px solid #4286f4 !important;
}
ul.nav-in-list li a {
  padding: 18px 12px;
}
ul.nav-in-list + .nav-in-list {
  /* Remove border between two stacked lists so it doesn't appear to be 2px */
  border-top: none;
}
ul.white-bg {
  background-color: transparent;
}
ul li.float-active {
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  margin-top: 8px;
  margin-bottom: 8px;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.62);
}
ul.spaced {
  border: none;
}
ul.spaced.white-bg {
  background: transparent;
}
ul.spaced.white-bg li {
  background-color: #ffffff;
}
ul.spaced li {
  margin-bottom: 10px;
  border: 1px solid #e5e5e5;
}
ul.spaced li:first-child {
  border-top: 1px solid #e5e5e5;
}
ul.tall li > * {
  line-height: 65px !important;
  display: inline-block;
}
ul.tall li i, ul.tall li:after {
  line-height: 65px !important;
}
ul.logout li {
  padding: 0px;
}
ul.logout li a {
  display: block;
}
ul.tag-labels li {
  border: 1px solid #03a8f4;
  padding: 4px 3px 4px 20px;
  font-family: "Roboto", sans-serif;
  display: inline-block;
  position: relative;
  font-size: 12px;
  margin-top: 5px;
  margin-right: 5px;
  background-color: #f2fbfe;
}
ul.tag-labels li:after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
  content: "";
  border: 1px solid #c9c9c9;
}
ul.tag-labels li.cat-shipping:after {
  border-color: #66bb6a;
  background-color: #66bb6a;
}
ul.tag-labels li.cat-inspection:after {
  border-color: #9575cd;
  background-color: #9575cd;
}
ul.tag-labels li.cat-production:after {
  border-color: #ffca28;
  background-color: #ffca28;
}
ul.tag-labels li.cat-final-production:after {
  border-color: #9575cd;
  background-color: #9575cd;
}
ul.tag-labels li.cat-pre-production:after {
  background-color: #ffffff;
}
ul.block-list li {
  text-align: center;
}
ul.block-list li .bubble, ul.block-list li form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol ul.block-list li li {
  height: 50px;
  text-transform: none;
  line-height: 50px;
  padding: 0;
}
ul.inline-list .label {
  width: 100px;
  display: inline-block;
}
ul.inline-list .content {
  display: inline-block;
}
ul.calendar-list li {
  position: relative;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid #e5e5e5;
  min-height: 48px;
}
ul.calendar-list li:first-child {
  border-top: 0px;
}
ul.calendar-list .date {
  padding: 0 20px;
  position: absolute;
  width: 70px;
  text-align: center;
  display: inline-block;
}
ul.calendar-list .date h4 {
  text-transform: uppercase;
  color: #e5e5e5;
  margin: 0;
}
ul.calendar-list .date h1 {
  margin: 0px;
}
ul.calendar-list .event {
  margin-left: 70px;
  padding: 5px 30px 0 20px;
  border-left: 1px solid #e5e5e5;
}
ul.calendar-list .event:after {
  content: "keyboard_arrow_right";
  font-family: "Material Icons";
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  position: absolute;
  right: 9px;
  top: calc(50% - 10px);
  color: #c9c9c9;
}

.sidebar-nav ul.nav-in-list .bubble, .sidebar-nav ul.nav-in-list form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .sidebar-nav ul.nav-in-list li {
  border-color: #c9c9c9;
  font-size: 12px;
  margin-right: 10px;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 22px;
  text-align: center;
  position: relative;
}
.sidebar-nav ul.nav-in-list .bubble i, .sidebar-nav ul.nav-in-list form [data-ordered-list-input] ol li i, form [data-ordered-list-input] ol .sidebar-nav ul.nav-in-list li i {
  display: none;
  line-height: 22px;
  color: #ffffff;
  left: 1px;
  top: 0;
  position: absolute;
  font-size: 18px;
}
.sidebar-nav ul.nav-in-list li {
  cursor: default;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-nav ul.nav-in-list li > * {
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-nav ul.nav-in-list li:after {
  display: none;
  font-size: 24px;
  bottom: 16px;
  top: auto;
  line-height: 24px;
  color: #9e9e9e;
}
.sidebar-nav ul.nav-in-list li h1 {
  display: none;
  padding: 0 35px 7px;
  position: relative;
  top: -8px;
  color: #9e9e9e;
  line-height: 24px;
}
.sidebar-nav ul.nav-in-list li h1 .bubble, .sidebar-nav ul.nav-in-list li h1 form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .sidebar-nav ul.nav-in-list li h1 li {
  width: auto;
  height: auto;
  line-height: normal;
  margin: 0;
  background-color: transparent !important;
  border-color: #ccc !important;
  color: #757575 !important;
  padding: 2px;
  font-size: 9px;
}
.sidebar-nav ul.nav-in-list li h5 {
  display: inline-block;
  line-height: 55px;
}
.sidebar-nav ul.nav-in-list li.active {
  background-color: #e5e5e5;
}
.sidebar-nav ul.nav-in-list li.active .bubble, .sidebar-nav ul.nav-in-list li.active form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .sidebar-nav ul.nav-in-list li.active li {
  color: #009688;
  border-color: #009688;
}
.sidebar-nav ul.nav-in-list li.active h5 {
  text-transform: uppercase;
  color: #009688;
  font-weight: 700;
}
.sidebar-nav ul.nav-in-list li.set {
  cursor: pointer;
}
.sidebar-nav ul.nav-in-list li.set .bubble, .sidebar-nav ul.nav-in-list li.set form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .sidebar-nav ul.nav-in-list li.set li {
  background-color: #009688;
  color: #009688;
  border-color: #009688;
}
.sidebar-nav ul.nav-in-list li.set .bubble i, .sidebar-nav ul.nav-in-list li.set form [data-ordered-list-input] ol li i, form [data-ordered-list-input] ol .sidebar-nav ul.nav-in-list li.set li i {
  display: block;
}
.sidebar-nav ul.nav-in-list li.set h1 {
  display: block;
}
.sidebar-nav ul.nav-in-list li.set:after {
  display: block;
}
.sidebar-nav ul.nav-in-list li .difficulty-indicator .circle {
  width: 10px;
  height: 10px;
}

.side-nav-context {
  position: relative;
  left: 33%;
  position: absolute;
  top: 0px;
  z-index: 1;
  right: 0;
  overflow: auto;
  bottom: 0;
}
.side-nav-context ul.nav-in-list li {
  color: #9e9e9e;
}

/**
* LAYOUT STYLES
* Any content wrappers or styles affecting overall layout/theme
*/
body {
  background-color: whitesmoke;
  min-width: 768px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  color: #212121;
}

.width-1 {
  width: 1px !important;
  flex: none !important;
}

.width-2 {
  width: 2px !important;
  flex: none !important;
}

.width-3 {
  width: 3px !important;
  flex: none !important;
}

.width-4 {
  width: 4px !important;
  flex: none !important;
}

.width-5 {
  width: 5px !important;
  flex: none !important;
}

.width-6 {
  width: 6px !important;
  flex: none !important;
}

.width-7 {
  width: 7px !important;
  flex: none !important;
}

.width-8 {
  width: 8px !important;
  flex: none !important;
}

.width-9 {
  width: 9px !important;
  flex: none !important;
}

.width-10 {
  width: 10px !important;
  flex: none !important;
}

.width-11 {
  width: 11px !important;
  flex: none !important;
}

.width-12 {
  width: 12px !important;
  flex: none !important;
}

.width-13 {
  width: 13px !important;
  flex: none !important;
}

.width-14 {
  width: 14px !important;
  flex: none !important;
}

.width-15 {
  width: 15px !important;
  flex: none !important;
}

.width-16 {
  width: 16px !important;
  flex: none !important;
}

.width-17 {
  width: 17px !important;
  flex: none !important;
}

.width-18 {
  width: 18px !important;
  flex: none !important;
}

.width-19 {
  width: 19px !important;
  flex: none !important;
}

.width-20 {
  width: 20px !important;
  flex: none !important;
}

.width-21 {
  width: 21px !important;
  flex: none !important;
}

.width-22 {
  width: 22px !important;
  flex: none !important;
}

.width-23 {
  width: 23px !important;
  flex: none !important;
}

.width-24 {
  width: 24px !important;
  flex: none !important;
}

.width-25 {
  width: 25px !important;
  flex: none !important;
}

.width-26 {
  width: 26px !important;
  flex: none !important;
}

.width-27 {
  width: 27px !important;
  flex: none !important;
}

.width-28 {
  width: 28px !important;
  flex: none !important;
}

.width-29 {
  width: 29px !important;
  flex: none !important;
}

.width-30 {
  width: 30px !important;
  flex: none !important;
}

.width-31 {
  width: 31px !important;
  flex: none !important;
}

.width-32 {
  width: 32px !important;
  flex: none !important;
}

.width-33 {
  width: 33px !important;
  flex: none !important;
}

.width-34 {
  width: 34px !important;
  flex: none !important;
}

.width-35 {
  width: 35px !important;
  flex: none !important;
}

.width-36 {
  width: 36px !important;
  flex: none !important;
}

.width-37 {
  width: 37px !important;
  flex: none !important;
}

.width-38 {
  width: 38px !important;
  flex: none !important;
}

.width-39 {
  width: 39px !important;
  flex: none !important;
}

.width-40 {
  width: 40px !important;
  flex: none !important;
}

.width-41 {
  width: 41px !important;
  flex: none !important;
}

.width-42 {
  width: 42px !important;
  flex: none !important;
}

.width-43 {
  width: 43px !important;
  flex: none !important;
}

.width-44 {
  width: 44px !important;
  flex: none !important;
}

.width-45 {
  width: 45px !important;
  flex: none !important;
}

.width-46 {
  width: 46px !important;
  flex: none !important;
}

.width-47 {
  width: 47px !important;
  flex: none !important;
}

.width-48 {
  width: 48px !important;
  flex: none !important;
}

.width-49 {
  width: 49px !important;
  flex: none !important;
}

.width-50 {
  width: 50px !important;
  flex: none !important;
}

.width-51 {
  width: 51px !important;
  flex: none !important;
}

.width-52 {
  width: 52px !important;
  flex: none !important;
}

.width-53 {
  width: 53px !important;
  flex: none !important;
}

.width-54 {
  width: 54px !important;
  flex: none !important;
}

.width-55 {
  width: 55px !important;
  flex: none !important;
}

.width-56 {
  width: 56px !important;
  flex: none !important;
}

.width-57 {
  width: 57px !important;
  flex: none !important;
}

.width-58 {
  width: 58px !important;
  flex: none !important;
}

.width-59 {
  width: 59px !important;
  flex: none !important;
}

.width-60 {
  width: 60px !important;
  flex: none !important;
}

.width-61 {
  width: 61px !important;
  flex: none !important;
}

.width-62 {
  width: 62px !important;
  flex: none !important;
}

.width-63 {
  width: 63px !important;
  flex: none !important;
}

.width-64 {
  width: 64px !important;
  flex: none !important;
}

.width-65 {
  width: 65px !important;
  flex: none !important;
}

.width-66 {
  width: 66px !important;
  flex: none !important;
}

.width-67 {
  width: 67px !important;
  flex: none !important;
}

.width-68 {
  width: 68px !important;
  flex: none !important;
}

.width-69 {
  width: 69px !important;
  flex: none !important;
}

.width-70 {
  width: 70px !important;
  flex: none !important;
}

.width-71 {
  width: 71px !important;
  flex: none !important;
}

.width-72 {
  width: 72px !important;
  flex: none !important;
}

.width-73 {
  width: 73px !important;
  flex: none !important;
}

.width-74 {
  width: 74px !important;
  flex: none !important;
}

.width-75 {
  width: 75px !important;
  flex: none !important;
}

.width-76 {
  width: 76px !important;
  flex: none !important;
}

.width-77 {
  width: 77px !important;
  flex: none !important;
}

.width-78 {
  width: 78px !important;
  flex: none !important;
}

.width-79 {
  width: 79px !important;
  flex: none !important;
}

.width-80 {
  width: 80px !important;
  flex: none !important;
}

.width-81 {
  width: 81px !important;
  flex: none !important;
}

.width-82 {
  width: 82px !important;
  flex: none !important;
}

.width-83 {
  width: 83px !important;
  flex: none !important;
}

.width-84 {
  width: 84px !important;
  flex: none !important;
}

.width-85 {
  width: 85px !important;
  flex: none !important;
}

.width-86 {
  width: 86px !important;
  flex: none !important;
}

.width-87 {
  width: 87px !important;
  flex: none !important;
}

.width-88 {
  width: 88px !important;
  flex: none !important;
}

.width-89 {
  width: 89px !important;
  flex: none !important;
}

.width-90 {
  width: 90px !important;
  flex: none !important;
}

.width-91 {
  width: 91px !important;
  flex: none !important;
}

.width-92 {
  width: 92px !important;
  flex: none !important;
}

.width-93 {
  width: 93px !important;
  flex: none !important;
}

.width-94 {
  width: 94px !important;
  flex: none !important;
}

.width-95 {
  width: 95px !important;
  flex: none !important;
}

.width-96 {
  width: 96px !important;
  flex: none !important;
}

.width-97 {
  width: 97px !important;
  flex: none !important;
}

.width-98 {
  width: 98px !important;
  flex: none !important;
}

.width-99 {
  width: 99px !important;
  flex: none !important;
}

.width-100 {
  width: 100px !important;
  flex: none !important;
}

.width-101 {
  width: 101px !important;
  flex: none !important;
}

.width-102 {
  width: 102px !important;
  flex: none !important;
}

.width-103 {
  width: 103px !important;
  flex: none !important;
}

.width-104 {
  width: 104px !important;
  flex: none !important;
}

.width-105 {
  width: 105px !important;
  flex: none !important;
}

.width-106 {
  width: 106px !important;
  flex: none !important;
}

.width-107 {
  width: 107px !important;
  flex: none !important;
}

.width-108 {
  width: 108px !important;
  flex: none !important;
}

.width-109 {
  width: 109px !important;
  flex: none !important;
}

.width-110 {
  width: 110px !important;
  flex: none !important;
}

.width-111 {
  width: 111px !important;
  flex: none !important;
}

.width-112 {
  width: 112px !important;
  flex: none !important;
}

.width-113 {
  width: 113px !important;
  flex: none !important;
}

.width-114 {
  width: 114px !important;
  flex: none !important;
}

.width-115 {
  width: 115px !important;
  flex: none !important;
}

.width-116 {
  width: 116px !important;
  flex: none !important;
}

.width-117 {
  width: 117px !important;
  flex: none !important;
}

.width-118 {
  width: 118px !important;
  flex: none !important;
}

.width-119 {
  width: 119px !important;
  flex: none !important;
}

.width-120 {
  width: 120px !important;
  flex: none !important;
}

.width-121 {
  width: 121px !important;
  flex: none !important;
}

.width-122 {
  width: 122px !important;
  flex: none !important;
}

.width-123 {
  width: 123px !important;
  flex: none !important;
}

.width-124 {
  width: 124px !important;
  flex: none !important;
}

.width-125 {
  width: 125px !important;
  flex: none !important;
}

.width-126 {
  width: 126px !important;
  flex: none !important;
}

.width-127 {
  width: 127px !important;
  flex: none !important;
}

.width-128 {
  width: 128px !important;
  flex: none !important;
}

.width-129 {
  width: 129px !important;
  flex: none !important;
}

.width-130 {
  width: 130px !important;
  flex: none !important;
}

.width-131 {
  width: 131px !important;
  flex: none !important;
}

.width-132 {
  width: 132px !important;
  flex: none !important;
}

.width-133 {
  width: 133px !important;
  flex: none !important;
}

.width-134 {
  width: 134px !important;
  flex: none !important;
}

.width-135 {
  width: 135px !important;
  flex: none !important;
}

.width-136 {
  width: 136px !important;
  flex: none !important;
}

.width-137 {
  width: 137px !important;
  flex: none !important;
}

.width-138 {
  width: 138px !important;
  flex: none !important;
}

.width-139 {
  width: 139px !important;
  flex: none !important;
}

.width-140 {
  width: 140px !important;
  flex: none !important;
}

.width-141 {
  width: 141px !important;
  flex: none !important;
}

.width-142 {
  width: 142px !important;
  flex: none !important;
}

.width-143 {
  width: 143px !important;
  flex: none !important;
}

.width-144 {
  width: 144px !important;
  flex: none !important;
}

.width-145 {
  width: 145px !important;
  flex: none !important;
}

.width-146 {
  width: 146px !important;
  flex: none !important;
}

.width-147 {
  width: 147px !important;
  flex: none !important;
}

.width-148 {
  width: 148px !important;
  flex: none !important;
}

.width-149 {
  width: 149px !important;
  flex: none !important;
}

.width-150 {
  width: 150px !important;
  flex: none !important;
}

.width-151 {
  width: 151px !important;
  flex: none !important;
}

.width-152 {
  width: 152px !important;
  flex: none !important;
}

.width-153 {
  width: 153px !important;
  flex: none !important;
}

.width-154 {
  width: 154px !important;
  flex: none !important;
}

.width-155 {
  width: 155px !important;
  flex: none !important;
}

.width-156 {
  width: 156px !important;
  flex: none !important;
}

.width-157 {
  width: 157px !important;
  flex: none !important;
}

.width-158 {
  width: 158px !important;
  flex: none !important;
}

.width-159 {
  width: 159px !important;
  flex: none !important;
}

.width-160 {
  width: 160px !important;
  flex: none !important;
}

.width-161 {
  width: 161px !important;
  flex: none !important;
}

.width-162 {
  width: 162px !important;
  flex: none !important;
}

.width-163 {
  width: 163px !important;
  flex: none !important;
}

.width-164 {
  width: 164px !important;
  flex: none !important;
}

.width-165 {
  width: 165px !important;
  flex: none !important;
}

.width-166 {
  width: 166px !important;
  flex: none !important;
}

.width-167 {
  width: 167px !important;
  flex: none !important;
}

.width-168 {
  width: 168px !important;
  flex: none !important;
}

.width-169 {
  width: 169px !important;
  flex: none !important;
}

.width-170 {
  width: 170px !important;
  flex: none !important;
}

.width-171 {
  width: 171px !important;
  flex: none !important;
}

.width-172 {
  width: 172px !important;
  flex: none !important;
}

.width-173 {
  width: 173px !important;
  flex: none !important;
}

.width-174 {
  width: 174px !important;
  flex: none !important;
}

.width-175 {
  width: 175px !important;
  flex: none !important;
}

.width-176 {
  width: 176px !important;
  flex: none !important;
}

.width-177 {
  width: 177px !important;
  flex: none !important;
}

.width-178 {
  width: 178px !important;
  flex: none !important;
}

.width-179 {
  width: 179px !important;
  flex: none !important;
}

.width-180 {
  width: 180px !important;
  flex: none !important;
}

.width-181 {
  width: 181px !important;
  flex: none !important;
}

.width-182 {
  width: 182px !important;
  flex: none !important;
}

.width-183 {
  width: 183px !important;
  flex: none !important;
}

.width-184 {
  width: 184px !important;
  flex: none !important;
}

.width-185 {
  width: 185px !important;
  flex: none !important;
}

.width-186 {
  width: 186px !important;
  flex: none !important;
}

.width-187 {
  width: 187px !important;
  flex: none !important;
}

.width-188 {
  width: 188px !important;
  flex: none !important;
}

.width-189 {
  width: 189px !important;
  flex: none !important;
}

.width-190 {
  width: 190px !important;
  flex: none !important;
}

.width-191 {
  width: 191px !important;
  flex: none !important;
}

.width-192 {
  width: 192px !important;
  flex: none !important;
}

.width-193 {
  width: 193px !important;
  flex: none !important;
}

.width-194 {
  width: 194px !important;
  flex: none !important;
}

.width-195 {
  width: 195px !important;
  flex: none !important;
}

.width-196 {
  width: 196px !important;
  flex: none !important;
}

.width-197 {
  width: 197px !important;
  flex: none !important;
}

.width-198 {
  width: 198px !important;
  flex: none !important;
}

.width-199 {
  width: 199px !important;
  flex: none !important;
}

.width-200 {
  width: 200px !important;
  flex: none !important;
}

.spacer-10 {
  height: 10px;
  width: 100%;
  clear: both;
}

.spacer-20 {
  height: 20px;
  width: 100%;
  clear: both;
}

.spacer-30 {
  height: 30px;
  width: 100%;
  clear: both;
}

.spacer-40 {
  height: 40px;
  width: 100%;
  clear: both;
}

.spacer-50 {
  height: 50px;
  width: 100%;
  clear: both;
}

.spacer-60 {
  height: 60px;
  width: 100%;
  clear: both;
}

.spacer-70 {
  height: 70px;
  width: 100%;
  clear: both;
}

.vert-margin-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.vert-margin-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

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

.horiz-margin-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.horiz-margin-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.horiz-margin-30 {
  margin-left: 30px;
  margin-right: 30px;
}

.overflow-title-10 {
  max-width: 10%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-20 {
  max-width: 20%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-30 {
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-40 {
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-50 {
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-60 {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-70 {
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-80 {
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-90 {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-title-100 {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mh-100 {
  max-height: 100px;
}

.mh-200 {
  max-height: 200px;
}

.mh-300 {
  max-height: 300px;
}

.mh-400 {
  max-height: 400px;
}

.mh-500 {
  max-height: 500px;
}

.mh-600 {
  max-height: 600px;
}

.mh-700 {
  max-height: 700px;
}

.mh-800 {
  max-height: 800px;
}

.mw-100 {
  max-width: 100px;
}

.mw-200 {
  max-width: 200px;
}

.mw-300 {
  max-width: 300px;
}

.mw-400 {
  max-width: 400px;
}

.mw-500 {
  max-width: 500px;
}

.mw-600 {
  max-width: 600px;
}

.mw-700 {
  max-width: 700px;
}

.mw-800 {
  max-width: 800px;
}

.overflow-wrapper {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.container {
  margin-top: 62px;
  height: calc(100% - 62px);
  transition: margin-left 400ms cubic-bezier(0, 0, 0.2, 1), margin-right 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: margin-left 400ms cubic-bezier(0, 0, 0.2, 1), margin-right 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: margin-left 400ms cubic-bezier(0, 0, 0.2, 1), margin-right 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: margin-left 400ms cubic-bezier(0, 0, 0.2, 1), margin-right 400ms cubic-bezier(0, 0, 0.2, 1);
  width: 100%;
  z-index: 2;
  overflow: auto;
}

.padded-container {
  padding: 0 15px;
}
.padded-container.slim {
  padding-top: 10px;
  padding-bottom: 10px;
}
.padded-container.vertical {
  padding-top: 100px;
  padding-bottom: 100px;
}

.padded {
  padding: 15px;
}

.full-pad-container {
  padding: 22px;
}

.status-bar {
  padding: 6px 15px;
  color: #424242;
  background-color: whitesmoke;
}
.status-bar p {
  font-size: 16px;
}
.status-bar.grey {
  background-color: #c9c9c9;
}
.status-bar.condensed p, .status-bar.condensed td {
  font-size: 12px;
  font-weight: 500;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.pos-fixed {
  position: fixed;
}

.shop-order-summary, .sidebar-summary {
  background-color: #ffffff;
}
.shop-order-summary h1, .sidebar-summary h1 {
  font-weight: 600;
}
.shop-order-summary h5, .sidebar-summary h5 {
  font-weight: 700;
  color: #424242;
}
.shop-order-summary h5:nth-child(3), .sidebar-summary h5:nth-child(3) {
  margin-top: 10px;
}
.shop-order-summary h6, .sidebar-summary h6 {
  color: #424242;
}

/* PARTIAL */
.bubble, form [data-ordered-list-input] ol li {
  padding: 7px;
  border-radius: 4px;
  font-size: 14px;
  color: #757575;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  display: inline-block;
  clear: both;
  background-color: #e5e5e5;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  vertical-align: middle;
  /* When shiped, add space between shipped icon and green location bubble */
}
.bubble + .bubble, form [data-ordered-list-input] ol li + .bubble, form [data-ordered-list-input] ol .bubble + li, form [data-ordered-list-input] ol li + li {
  margin-left: 5px;
}
.bubble.quote-version, form [data-ordered-list-input] ol li.quote-version {
  font-weight: normal;
  text-transform: none;
  background-color: #ffcc80;
}
.bubble.condensed, form [data-ordered-list-input] ol li.condensed {
  padding: 2px;
  font-size: 9px;
  font-weight: 500;
  border: 1px solid #cccc !important;
}
.bubble.medium-size, form [data-ordered-list-input] ol li.medium-size {
  padding: 3px 6px;
  font-size: 12px;
}
.bubble.positive, form [data-ordered-list-input] ol li.positive {
  background-color: #43a047;
  color: #ffffff;
  border: none !important;
}
.bubble.negative, form [data-ordered-list-input] ol li.negative {
  background-color: #b71c1c;
  color: #ffffff;
  border: none !important;
}
.bubble.primary, form [data-ordered-list-input] ol li.primary {
  background-color: #1565c0;
  color: #ffffff;
  border: none !important;
}
.bubble.no-radius, form [data-ordered-list-input] ol li.no-radius {
  padding-left: 12px;
  padding-right: 12px;
  border-color: #c9c9c9;
  color: #757575;
}
.bubble .bubble, form [data-ordered-list-input] ol li .bubble, .bubble form [data-ordered-list-input] ol li, form [data-ordered-list-input] ol .bubble li, form [data-ordered-list-input] ol li li {
  width: 100%;
  position: absolute;
  top: -1px;
  left: 0;
  padding: 2px;
  font-size: 9px;
  font-weight: 500;
  text-align: center;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bubble.double, form [data-ordered-list-input] ol li.double {
  padding-top: 20px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.bubble.tall, form [data-ordered-list-input] ol li.tall {
  padding: 14px 7px;
}
.bubble.check, form [data-ordered-list-input] ol li.check {
  position: relative;
}
.bubble.check:after, form [data-ordered-list-input] ol li.check:after {
  content: "check";
  font-family: "Material Icons";
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  ms-font-feature-settings: "liga";
  position: absolute;
  left: -18px;
  top: 0px;
  color: #03a8f4;
  text-transform: none;
  font-size: 16px;
}
.bubble.pulse-alert, form [data-ordered-list-input] ol li.pulse-alert {
  min-width: 52px;
}
.bubble.cat-properties, .bubble.cat-split, .bubble.cat-pre-production, .bubble.cat-final-production, .bubble.cat-production, .bubble.cat-shipping, form [data-ordered-list-input] ol li.cat-properties, form [data-ordered-list-input] ol li.cat-split, form [data-ordered-list-input] ol li.cat-pre-production, form [data-ordered-list-input] ol li.cat-final-production, form [data-ordered-list-input] ol li.cat-production, form [data-ordered-list-input] ol li.cat-shipping {
  font-size: 12px;
  color: #212121;
  min-width: 48px;
  text-align: center;
}
.bubble.cat-shipping, form [data-ordered-list-input] ol li.cat-shipping {
  background-color: #a5d6a7;
}
.bubble[class^=cat] + .bubble.ghost, form [data-ordered-list-input] ol li[class^=cat] + .bubble.ghost, form [data-ordered-list-input] ol .bubble[class^=cat] + li.ghost, form [data-ordered-list-input] ol li[class^=cat] + li.ghost, .bubble[class*=" cat"] + .bubble.ghost, form [data-ordered-list-input] ol li[class*=" cat"] + .bubble.ghost, form [data-ordered-list-input] ol .bubble[class*=" cat"] + li.ghost, form [data-ordered-list-input] ol li[class*=" cat"] + li.ghost {
  margin-left: 2px;
}
.bubble.cat-production, form [data-ordered-list-input] ol li.cat-production {
  background-color: #ffe082;
}
.bubble.cat-final-production, form [data-ordered-list-input] ol li.cat-final-production {
  background-color: #d1c4e9;
}
.bubble.cat-pre-production, form [data-ordered-list-input] ol li.cat-pre-production {
  background-color: #e5e5e5;
}
.bubble.cat-split, form [data-ordered-list-input] ol li.cat-split {
  background-color: transparent;
}
.bubble.secondary, form [data-ordered-list-input] ol li.secondary {
  color: #009688;
}
.bubble.filter, form [data-ordered-list-input] ol li.filter {
  border-color: #c9c9c9;
  text-transform: none;
  color: #212121;
  font-size: 14px;
}
.bubble.filter i, form [data-ordered-list-input] ol li.filter i {
  color: #c9c9c9;
}
.bubble.alert, form [data-ordered-list-input] ol li.alert {
  background-color: #e53835;
  color: #ffffff;
  text-align: center;
}
.bubble.ghost, form [data-ordered-list-input] ol li.ghost {
  border: 1px solid #757575;
  background-color: transparent;
}
.bubble.ghost.cat-shipping, form [data-ordered-list-input] ol li.ghost.cat-shipping {
  border-color: #66bb6a;
}
.bubble.ghost.cat-production, form [data-ordered-list-input] ol li.ghost.cat-production {
  border-color: #ffca28;
}
.bubble.ghost.cat-final-production, form [data-ordered-list-input] ol li.ghost.cat-final-production {
  border-color: #9575cd;
}
.bubble.ghost.cat-pre-production, form [data-ordered-list-input] ol li.ghost.cat-pre-production {
  border-color: #c9c9c9;
}
.bubble.ghost.secondary, form [data-ordered-list-input] ol li.ghost.secondary {
  border-color: #009688;
}
.bubble.ghost.alert, form [data-ordered-list-input] ol li.ghost.alert {
  border-color: #e53835;
  color: #e53835;
  background-color: transparent;
}
.bubble.ghost.low-risk, form [data-ordered-list-input] ol li.ghost.low-risk {
  border-color: #43a047;
  color: #43a047;
}
.bubble.ghost.med-risk, form [data-ordered-list-input] ol li.ghost.med-risk {
  border-color: #fb8e00;
  color: #fb8e00;
}
.bubble.ghost.high-risk, form [data-ordered-list-input] ol li.ghost.high-risk {
  border-color: #b71c1c;
  color: #b71c1c;
}

/**
* INDICATORS
* Various components used to provide a visual display for
* textual data.
*/
/* PARTIAL */
.difficulty-indicator .circle {
  width: 6px;
  height: 6px;
  margin-bottom: 5px;
  border-radius: 50%;
  margin-right: 4px;
  display: inline-block;
}
.difficulty-indicator .circle:first-child {
  border: 1px solid #ffcc80;
}
.difficulty-indicator .circle:nth-child(2) {
  border: 1px solid #fb8e00;
}
.difficulty-indicator .circle:nth-child(3) {
  border: 1px solid #e65000;
}
.difficulty-indicator.mongo .circle {
  width: 14px;
  height: 14px;
  border-width: 2px;
}
.difficulty-indicator.easy .circle:first-child {
  background-color: #ffcc80;
}
.difficulty-indicator.medium .circle:first-child {
  background-color: #ffcc80;
}
.difficulty-indicator.medium .circle:nth-child(2) {
  background-color: #fb8e00;
}
.difficulty-indicator.hard .circle:first-child {
  background-color: #ffcc80;
}
.difficulty-indicator.hard .circle:nth-child(2) {
  background-color: #fb8e00;
}
.difficulty-indicator.hard .circle:nth-child(3) {
  background-color: #e65000;
}
.difficulty-indicator + p {
  line-height: 18px;
}

.circle-indicator {
  background-color: #e5e5e5;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.circle-indicator.blue {
  background-color: #03a8f4;
}
.circle-indicator.orange {
  background-color: #ef6c00;
}
.circle-indicator.cat-shipping {
  background-color: #66bb6a;
}
.circle-indicator.cat-production {
  background-color: #ffca28;
}
.circle-indicator.cat-final-production {
  background-color: #9575cd;
}
.circle-indicator.cat-pre-production {
  background-color: #424242;
}
.circle-indicator.corner {
  position: absolute;
  top: -7.5px;
  right: -7.5px;
  width: 15px;
  height: 15px;
  border: 2px solid #ffffff;
}

hr {
  height: 1px;
  border: none;
  box-shadow: none;
  /*margin-left:-15px; margin-right:-15px; margin-bottom:25px;*/
  margin: 0;
  background-color: #e5e5e5;
}
hr.margins {
  margin-top: 10px;
  margin-bottom: 20px;
}

.controls-wrapper {
  position: relative;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 110px;
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.controls-wrapper .controls {
  position: fixed;
  bottom: 0;
  padding: 20px 40px 20px 20px;
  z-index: 2;
  right: 0;
  transition: right 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: right 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: right 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: right 400ms cubic-bezier(0, 0, 0.2, 1);
  transition: bottom 1ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: bottom 1ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: bottom 1ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: bottom 1ms cubic-bezier(0.4, 0, 0.2, 1);
}
.controls-wrapper .controls button, .controls-wrapper .controls form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .controls-wrapper .controls [data-ordered-list-input-action=add] {
  background: #ffffff;
  padding: 0;
  border: 2px solid #e5e5e5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62);
  height: 62px;
  width: 62px;
  float: left;
  margin-right: 15px;
  color: #424242;
  position: relative;
}
.controls-wrapper .controls button i, .controls-wrapper .controls form [data-ordered-list-input] [data-ordered-list-input-action=add] i, form [data-ordered-list-input] .controls-wrapper .controls [data-ordered-list-input-action=add] i {
  line-height: 56px;
  margin-top: 1px;
  color: #424242;
}
.controls-wrapper .controls button.set i, .controls-wrapper .controls form [data-ordered-list-input] .set[data-ordered-list-input-action=add] i, form [data-ordered-list-input] .controls-wrapper .controls .set[data-ordered-list-input-action=add] i {
  color: #03a8f4;
}
.controls-wrapper .controls button.round-btn, .controls-wrapper .controls form [data-ordered-list-input] .round-btn[data-ordered-list-input-action=add], form [data-ordered-list-input] .controls-wrapper .controls .round-btn[data-ordered-list-input-action=add] {
  height: 62px;
}
.controls-wrapper .controls button.cta, .controls-wrapper .controls form [data-ordered-list-input] .cta[data-ordered-list-input-action=add], form [data-ordered-list-input] .controls-wrapper .controls .cta[data-ordered-list-input-action=add] {
  background-color: #009688;
  border: none;
  color: #ffffff;
}
.controls-wrapper .controls button.cta i, .controls-wrapper .controls form [data-ordered-list-input] .cta[data-ordered-list-input-action=add] i, form [data-ordered-list-input] .controls-wrapper .controls .cta[data-ordered-list-input-action=add] i {
  color: #ffffff;
}
.controls-wrapper .controls button .loading-container .bar-container, .controls-wrapper .controls form [data-ordered-list-input] [data-ordered-list-input-action=add] .loading-container .bar-container, form [data-ordered-list-input] .controls-wrapper .controls [data-ordered-list-input-action=add] .loading-container .bar-container {
  margin-top: -34px;
}
.controls-wrapper .controls .touching-buttons {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62);
  margin-right: 0;
}

.clipped-height, .no-height {
  max-height: 45px;
  overflow-y: hidden;
  transition: max-height 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: max-height 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: max-height 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: max-height 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.no-height {
  max-height: 0;
}

[data-fake-temp] {
  white-space: pre-wrap;
  font-family: "Roboto", sans-serif;
  line-height: 16px;
  font-size: 14px;
  word-break: break-all;
}

.floating-bg-color {
  background-color: #9e9e9e;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 365px;
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
}
.floating-bg-color.primary {
  background-color: #1565c0;
}

.warning-message {
  position: relative;
  padding-left: 40px;
}
.warning-message i {
  position: absolute;
  left: 0;
}
.warning-message.padded i {
  left: 10px;
}

.error-display {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.error-display img {
  z-index: 1;
  position: relative;
}

.no-data {
  font-style: italic;
  color: #c9c9c9;
}

.indent-container {
  padding-left: 30px;
}

.flip-180 {
  transform: rotate(180deg);
}

.rotate-60 {
  transform: rotate(-60deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.even-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}

.vert-20-margin {
  margin-top: 20px;
  margin-bottom: 20px;
}

.full-width {
  width: 100%;
}

.clear {
  clear: both;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.vert-padding-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.horiz-margin-15 {
  margin-left: 15px;
  margin-right: 15px;
}

.horiz-padding-15 {
  padding-left: 15px;
  padding-right: 15px;
}

.horiz-margin-30 {
  margin-left: 30px;
  margin-right: 30px;
}

.horiz-padding-30 {
  padding-left: 30px;
  padding-right: 30px;
}

.horiz-margin-45 {
  margin-left: 45px;
  margin-right: 45px;
}

.horiz-padding-45 {
  padding-left: 45px;
  padding-right: 45px;
}

.horiz-margin-60 {
  margin-left: 60px;
  margin-right: 60px;
}

.horiz-padding-60 {
  padding-left: 60px;
  padding-right: 60px;
}

.horiz-margin-75 {
  margin-left: 75px;
  margin-right: 75px;
}

.horiz-padding-75 {
  padding-left: 75px;
  padding-right: 75px;
}

.inline-display {
  display: inline-block;
}
.inline-display.align-middle > * {
  vertical-align: middle;
}
.inline-display > * {
  display: inline-block;
}
.inline-display.align-right > * {
  margin-left: 5px;
}
.inline-display.align-left > * {
  margin-right: 5px;
}

.align-middle {
  vertical-align: middle;
}

.block-display {
  display: block;
}

.flex-display {
  display: flex;
}

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

.align-items-top {
  align-items: flex-start;
}

.pos-static {
  position: static !important;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

[data-content-value]:after {
  content: attr(data-content-value);
  font-family: "Roboto", sans-serif;
  font-size: inherit;
}

.max-width-200 {
  max-width: 200px;
}

*::-webkit-scrollbar-track, *::-webkit-scrollbar-track:horizontal {
  background-color: whitesmoke;
}

*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb:horizontal {
  border-radius: 5px;
  background-color: #c9c9c9;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
*::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: #9e9e9e;
}

*::-webkit-scrollbar:horizontal {
  height: 6px;
}

.sink-zindex {
  position: relative;
  z-index: 1;
}

.sidebar-navigation {
  position: absolute;
  transform: translateX(0%);
  top: 30px;
  background: white;
  padding: 20px;
  transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.show-sidebar .sidebar-navigation {
  transform: translateX(-100%);
}
.sidebar-navigation .nav-item {
  margin-top: 10px;
}

[js-pdf-widths] .left-column {
  flex: 1;
  min-width: 400px;
}
[js-pdf-widths] .right-column {
  width: calc(8.5in + 30px);
  min-width: calc(8.5in + 30px);
}
[js-pdf-widths].js-pdf-preview-inactive .right-column {
  width: 100%;
}

.multi-location-wrapper {
  white-space: nowrap;
}
.multi-location-wrapper > div {
  position: relative;
  padding-left: 10px;
  margin-left: 10px;
  flex: 1;
}
.multi-location-wrapper > div::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: calc(100% + 20px);
  background-color: #e5e5e5;
}
.multi-location-wrapper > div:first-child {
  margin-left: 0;
  padding-left: 0;
}
.multi-location-wrapper > div:first-child::before {
  display: none;
}

.floating-action-bar, .title-bar {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.62);
  position: relative;
  z-index: 5;
  padding: 10px 15px;
  min-height: 54px;
}
.floating-action-bar .title, .title-bar .title {
  line-height: 34px;
}
.floating-action-bar + .floating-action-bar, .title-bar + .floating-action-bar {
  z-index: 4;
}
.floating-action-bar.fixed-bottom, .title-bar.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.floating-anchor-tags {
  padding: 5px 15px 0 15px;
  background-color: white;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.62);
  position: sticky;
  top: 0;
  z-index: 4;
}

.progress-bar {
  height: 10px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
}
.progress-bar .fill {
  background-color: #03a8f4;
  height: 100%;
  border-radius: 10px;
  transition: 0.2s ease-in-out;
}

.pull-over {
  position: fixed;
  left: calc(100% + 10px);
  top: 60px;
  z-index: 14;
  width: 100%;
  height: calc(100% - 60px);
  transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 400ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.62);
  overflow-y: auto;
  overflow-x: hidden;
}
.pull-over.menu {
  z-index: 15;
  left: -100%;
}
.pull-over.menu .active i {
  color: #03a8f4;
}
.pull-over.menu .content {
  padding-bottom: 125px;
}
.pull-over .nav-in-list li {
  white-space: nowrap;
}
.pull-over.show {
  left: 0;
  width: 100%;
  min-width: 768px;
  /*
  * Original display for pull overs.
  * left:55px; width:calc(100% - 55px);*/
}
.pull-over.show.menu {
  left: 0%;
  width: 100%;
}
.pull-over.show.full {
  left: 0;
  width: 100%;
}
.pull-over.menu button, .pull-over.menu form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .pull-over.menu [data-ordered-list-input-action=add] {
  position: fixed;
  bottom: 0;
  transition: bottom 300ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: bottom 300ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: bottom 300ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: bottom 300ms cubic-bezier(0, 0, 0.2, 1);
}

.sidebar-nav {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.32);
  position: absolute;
  top: 0px;
  bottom: 0;
  width: 33%;
  z-index: 2;
  left: 0;
  overflow: auto;
}

body.show-page {
  /*
  * This is the old way of doing it (original). Going to leave here in
  * case needed later.
  */
}
body.show-page .menu {
  /*width:55px;*/
  width: 0px;
  padding-bottom: 0;
}
body.show-page .menu li:after {
  display: none;
}
body.show-page .menu button, body.show-page .menu form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] body.show-page .menu [data-ordered-list-input-action=add] {
  bottom: -50px;
}
body.show-page .menu .logout {
  display: none;
}
body.show-page nav .menu-trigger .stack .top {
  transform: rotate(-45deg);
  top: 10px;
}
body.show-page nav .menu-trigger .stack .middle {
  width: 1px;
  opacity: 0;
}
body.show-page nav .menu-trigger .stack .bottom {
  transform: rotate(45deg);
  top: 10px;
}
body.show-page nav .content span {
  display: none;
}
body.show-page nav .content:after {
  content: attr(data-inner-page-content);
  font-family: "Roboto", sans-serif;
}
body.show-page.show-menu nav .menu-trigger .stack .top {
  transform: rotate(-45deg);
  top: 8px;
  left: -2px;
  width: 50%;
}
body.show-page.show-menu nav .menu-trigger .stack .middle {
  width: 100%;
  opacity: 1;
}
body.show-page.show-menu nav .menu-trigger .stack .bottom {
  transform: rotate(45deg);
  top: 15.5px;
  left: -2px;
  width: 50%;
}
@media screen and (max-width: 768px) {
  body {
    overflow-x: auto;
  }
}

/* CSS Document */
.panel {
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  padding: 7px;
}
.panel h5 {
  margin-top: 0;
  text-decoration: uppercase;
}
.panel h4 {
  margin: 0;
}

.stat {
  background: whitesmoke;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left: 1px solid #ccc;
}
.stat:first-child {
  border-left: none;
  padding-left: 22px;
}
.stat:last-child {
  padding-right: 22px;
}
.stat h5 {
  margin-top: 0;
}

/* CSS Document */
.alert {
  border-radius: 4px;
}
.alert.alert-primary {
  background-color: rgba(21, 101, 192, 0.1);
  color: #344046;
}

.absolute-icon-right {
  display: flex;
  align-items: center;
}
.absolute-icon-right a, .absolute-icon-right button, .absolute-icon-right form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .absolute-icon-right [data-ordered-list-input-action=add] {
  margin-left: 10px;
}

/* CSS Document */
/* Updating Bootstrap spacing classes to be more appropriate with OPPI's design and current theme settings. */
.mt-1 {
  margin-top: 5px !important;
}
.mt-2 {
  margin-top: 10px !important;
}
.mt-3 {
  margin-top: 15px !important;
}
.mt-4 {
  margin-top: 20px !important;
}
.mt-5 {
  margin-top: 30px !important;
}

.mr-1 {
  margin-right: 5px !important;
}
.mr-2 {
  margin-right: 10px !important;
}
.mr-3 {
  margin-right: 15px !important;
}
.mr-4 {
  margin-right: 20px !important;
}
.mr-5 {
  margin-right: 30px !important;
}

.mb-1 {
  margin-bottom: 5px !important;
}
.mb-2 {
  margin-bottom: 10px !important;
}
.mb-3 {
  margin-bottom: 15px !important;
}
.mb-4 {
  margin-bottom: 20px !important;
}
.mb-5 {
  margin-bottom: 30px !important;
}

.ml-1 {
  margin-left: 5px !important;
}
.ml-2 {
  margin-left: 10px !important;
}
.ml-3 {
  margin-left: 15px !important;
}
.ml-4 {
  margin-left: 20px !important;
}
.ml-5 {
  margin-left: 30px !important;
}

.pt-1 {
  padding-top: 5px !important;
}
.pt-2 {
  padding-top: 10px !important;
}
.pt-3 {
  padding-top: 15px !important;
}
.pt-4 {
  padding-top: 20px !important;
}
.pt-5 {
  padding-top: 30px !important;
}

.pr-1 {
  padding-right: 5px !important;
}
.pr-2 {
  padding-right: 10px !important;
}
.pr-3 {
  padding-right: 15px !important;
}
.pr-4 {
  padding-right: 20px !important;
}
.pr-5 {
  padding-right: 30px !important;
}

.pb-1 {
  padding-bottom: 5px !important;
}
.pb-2 {
  padding-bottom: 10px !important;
}
.pb-3 {
  padding-bottom: 15px !important;
}
.pb-4 {
  padding-bottom: 20px !important;
}
.pb-5 {
  padding-bottom: 30px !important;
}

.pl-1 {
  padding-left: 5px !important;
}
.pl-2 {
  padding-left: 10px !important;
}
.pl-3 {
  padding-left: 15px !important;
}
.pl-4 {
  padding-left: 20px !important;
}
.pl-5 {
  padding-left: 30px !important;
}

/**
* FEATURE PARTIALS
* All features broken out into individual files for granular
* control.
*/
svg .y-grid line, svg .x-grid line, svg .y2-grid line {
  stroke: #c9c9c9;
}
svg .y-grid line.y2GridLine, svg .x-grid line.y2GridLine, svg .y2-grid line.y2GridLine {
  stroke: whitesmoke;
}
svg .y-grid line.yGridLine, svg .x-grid line.yGridLine, svg .y2-grid line.yGridLine {
  stroke: whitesmoke;
}
svg .y-grid line.xGridLine, svg .x-grid line.xGridLine, svg .y2-grid line.xGridLine {
  stroke: whitesmoke;
}
svg .yLegend text, svg .xLegend text, svg .y2Legend text {
  fill: #757575;
  font-weight: 500;
  font-size: 10px;
}
svg .yLegend text.label-title, svg .xLegend text.label-title, svg .y2Legend text.label-title {
  fill: #212121;
  font-size: 10px;
  text-anchor: middle;
}
svg .xLegend text {
  font-size: 14px;
  font-weight: normal;
}
svg .xLegend text:last-child {
  fill: #07a9f4;
}
svg .yLegend text {
  text-anchor: end;
}
svg .y2Legend text {
  text-anchor: start;
}
svg .ycircleLabel-set-0, svg .yrectangleLabel-set-0 {
  fill: #07a9f4;
  stroke: none;
}
svg .y2circleLabel-set-0, svg .y2rectangleLabel-set-0 {
  fill: #3177c7;
  stroke: none;
}
svg .ycircleLabel-set-1 {
  fill: lightcoral;
  stroke: none;
}
svg .y2circleLabel-set-1 {
  fill: seagreen;
  stroke: none;
}
svg text {
  text-anchor: middle;
  font-family: "Roboto", sans-serif;
}
svg .data {
  transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 500ms cubic-bezier(0, 0, 0.2, 1);
}
svg path {
  stroke-width: 2px;
}
svg path.path-y-set-0 {
  stroke: #07a9f4;
}
svg path.path-y2-set-0 {
  stroke: #3177c7;
}
svg path.path-y-set-1 {
  stroke: lightcoral;
}
svg path.path-y2-set-1 {
  stroke: seagreen;
}
svg path.ring-pie-slice-1 {
  stroke-width: 0.15px;
}
svg path.ring-pie-slice-0 {
  stroke-width: 0.3px;
}
svg polygon {
  opacity: 0.25;
}
svg polygon.polygon-y-set-0 {
  fill: #07a9f4;
}
svg polygon.polygon-y2-set-0 {
  fill: #3177c7;
}
svg polygon.polygon-y-set-1 {
  fill: lightcoral;
}
svg polygon.polygon-y2-set-1 {
  fill: seagreen;
}
svg circle {
  stroke: #aaa;
  fill: white;
  stroke-width: 2px;
}
svg circle.circle-y-set-0 {
  stroke: #07a9f4;
}
svg circle.circle-y2-set-0 {
  stroke: #3177c7;
}
svg circle.circle-y-set-1 {
  stroke: lightcoral;
}
svg circle.circle-y2-set-1 {
  stroke: seagreen;
}

.chart {
  position: relative;
}
.chart circle, .chart polygon {
  transition: all 1s ease 1s;
  -moz-transition: all 1s ease 1s;
  -ms-transition: all 1s ease 1s;
  -webkit-transition: all 1s ease 1s;
  opacity: 0;
}
.chart path {
  transition: all 1s cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: all 1s cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: all 1s cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: all 1s cubic-bezier(0, 0, 0.2, 1);
  fill: none;
  stroke: black;
  stroke-linejoin: round;
}
.chart.animate circle {
  opacity: 1;
}
.chart.animate polygon {
  opacity: 0.25;
}
.chart .yGridLine[y1="0"], .chart .y2GridLine[y1="0"] {
  display: none;
}
.chart .xGridBaseLine {
  stroke-width: 2px;
}
.chart.production .ycircleLabel-set-0 {
  fill: #ffca28;
}
.chart.production .path-y-set-0 {
  stroke: #ffca28;
}

.pie-chart {
  position: relative;
}
.pie-chart path {
  transition: all 3s cubic-bezier(0, 0, 0.2, 1) 1s;
  -moz-transition: all 3s cubic-bezier(0, 0, 0.2, 1) 1s;
  -ms-transition: all 3s cubic-bezier(0, 0, 0.2, 1) 1s;
  -webkit-transition: all 3s cubic-bezier(0, 0, 0.2, 1) 1s;
  stroke-dashoffset: 20;
  stroke-dasharray: 20;
}
.pie-chart path:hover {
  transform: scale3d(1.1);
}
.pie-chart.animate path {
  stroke-dashoffset: 0;
  stroke-dashoffset: 0;
}

.pie-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
.pie-wrapper .pie-legend {
  text-align: center;
  width: 100%;
}
.pie-wrapper .pie-legend .key {
  position: relative;
}
.pie-wrapper .pie-legend .key:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  position: relative;
  left: -3px;
  top: -2px;
  display: inline-block;
}
.pie-wrapper .pie-legend .primary-key:before {
  background-color: #1565c0;
}
.pie-wrapper .pie-legend .second-key:before {
  background-color: #e5e5e5;
}
.pie-wrapper .pie-label {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
}
.pie-wrapper .pie-label:before {
  content: "";
  display: inline-block;
  height: calc(50% - 12px);
}

[data-charttooltip] {
  position: absolute;
  background: #ffffff;
  padding: 10px;
  border-radius: 2px;
  box-shadow: 0px 0px 3px 0 rgba(0, 0, 0, 0.32);
  min-width: 100px;
  z-index: 1;
}

.widget-wrapper {
  background-color: #ffffff;
  border: 2px solid #e5e5e5;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.widget-wrapper .header {
  padding: 25px 15px;
}
.widget-wrapper .header h3 {
  margin: 0px;
  font-weight: 500;
  white-space: nowrap;
}
.widget-wrapper .header a {
  font-size: 12px;
  line-height: 22px;
}
.widget-wrapper .header button, .widget-wrapper .header form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .widget-wrapper .header [data-ordered-list-input-action=add] {
  position: relative;
  margin-top: -30px;
  top: 15px;
}
.widget-wrapper .header button.short, .widget-wrapper .header form [data-ordered-list-input] .short[data-ordered-list-input-action=add], form [data-ordered-list-input] .widget-wrapper .header .short[data-ordered-list-input-action=add] {
  margin-top: -6px;
  top: 3px;
}
.widget-wrapper .header .tab-header li, .widget-wrapper .header .tab-header a {
  margin-top: 0;
}
.widget-wrapper .tabbed-container .tab-header ul {
  white-space: nowrap;
}
.widget-wrapper .tabbed-container .tab-header ul li, .widget-wrapper .tabbed-container .tab-header ul a {
  font-size: 12px;
}
.widget-wrapper.half-widget {
  min-height: 250px;
  max-height: 250px;
}
.widget-wrapper.half-widget .overflow-wrapper {
  max-height: 168px;
}
.widget-wrapper.full-widget {
  min-height: 500px;
  max-height: 500px;
}
.widget-wrapper.full-widget .overflow-wrapper {
  max-height: 418px;
}
.widget-wrapper.full-and-a-half-widget {
  min-height: 750px;
  max-height: 750px;
}
.widget-wrapper.full-and-a-half-widget .overflow-wrapper {
  max-height: 668px;
}
.widget-wrapper.double-widget {
  min-height: 1000px;
  max-height: 1000px;
}
.widget-wrapper.double-widget .overflow-wrapper {
  max-height: 918px;
}
.widget-wrapper .overflow-wrapper ul.feed-list {
  position: relative;
  max-height: 100%;
}
.widget-wrapper table tbody tr:last-child td {
  border-bottom: 0px;
}

[data-widget=calendar] {
  background-color: transparent;
  border: none;
}
[data-widget=calendar] .widget-wrapper {
  background-color: #ffffff;
  border: 2px solid #e5e5e5;
}

/*[data-widget="summaryChart"] {overflow:visible;
	.tab-pane {overflow:visible !important;}
}*/
.padded-container [data-widget]:first-child {
  margin-top: 0px;
}

#dashboard {
  min-width: 1000px;
}
#dashboard .width-33.padded-container:nth-child(2) {
  padding: 0;
}

.pie-chart {
  margin: auto;
}

.full-calendar {
  /* Set min width on month name so that items don't jump when changing months */
  /* Set min width on month buttons so that items don't jump when changing months */
}
.full-calendar #calendar {
  position: relative;
  width: 100%;
  display: inline-block;
}
.full-calendar #calendar table tbody tr td {
  height: auto;
}
.full-calendar h1[data-calendar] {
  margin-left: 10px;
  margin-right: 10px;
  min-width: 180px;
}
.full-calendar button[data-calendar].navigation, .full-calendar form [data-ordered-list-input] [data-calendar].navigation[data-ordered-list-input-action=add], form [data-ordered-list-input] .full-calendar [data-calendar].navigation[data-ordered-list-input-action=add] {
  min-width: 110px;
}
.full-calendar button[data-calendar].navigation[data-calendar=prev], .full-calendar form [data-ordered-list-input] [data-calendar].navigation[data-calendar=prev][data-ordered-list-input-action=add], form [data-ordered-list-input] .full-calendar [data-calendar].navigation[data-calendar=prev][data-ordered-list-input-action=add] {
  text-align: left;
}
.full-calendar button[data-calendar].navigation[data-calendar=next], .full-calendar form [data-ordered-list-input] [data-calendar].navigation[data-calendar=next][data-ordered-list-input-action=add], form [data-ordered-list-input] .full-calendar [data-calendar].navigation[data-calendar=next][data-ordered-list-input-action=add] {
  text-align: right;
}
.full-calendar .fc-widget-header {
  border-left: 0px;
  border-right: 0px;
}
.full-calendar .fc-widget-header th {
  vertical-align: middle;
  font-size: 16px;
  text-align: left;
  padding: 0 20px;
  border: none;
  color: #424242;
}
.full-calendar .fc-toolbar {
  display: none;
}
.full-calendar .fc-day {
  position: relative;
  height: auto;
  border-width: 1px;
  border-color: #e5e5e5;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}
.full-calendar .fc-day:hover {
  box-shadow: inset 0 0 0 1px #e5e5e5;
}
.full-calendar .fc-day-number {
  background: transparent;
  border-width: 1px;
  border-color: #e5e5e5 !important;
  padding: 12px !important;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  text-align: left !important;
}
.full-calendar .fc-row .fc-content-skeleton {
  z-index: 3;
  /*.fc-today {position:relative; z-index:1; font-weight:bold; color:$dense-primary; font-size:18px;
  	&:after {content:""; width:30px; height:30px; border-radius:50%; background-color:$mute-primary; position:absolute; top:6px; left:8px; z-index:-1;}
  }*/
}
.full-calendar .fc-highlight-skeleton {
  z-index: initial !important;
}
.full-calendar .fc-highlight-skeleton .fc-highlight {
  position: relative;
}
.full-calendar .fc-highlight-skeleton .fc-highlight:before {
  content: attr(data-selected-day);
  line-height: 30px;
  font-weight: bold;
  color: #4286f4;
  font-size: 18px;
  text-align: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #c6dafc;
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 3;
}
.full-calendar .fc-highlight-skeleton td {
  opacity: 0;
}
.full-calendar .fc-highlight-skeleton td.fc-highlight {
  opacity: 1;
  background-color: transparent !important;
}
.full-calendar .fc-highlight-skeleton td.fc-highlight:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #4286f4;
  z-index: 3;
}
.full-calendar .fc-week .fc-bg tr td:first-child, .full-calendar .fc-week .fc-content-skeleton tr td:first-child {
  border-left: none;
}
.full-calendar .fc-unthemed .fc-today {
  background-color: transparent !important;
}
.full-calendar .calendar-header {
  background-color: #ffffff;
  padding: 24px 10px;
}
.full-calendar .micro-agenda {
  margin-top: 73px;
}
.full-calendar .fc-event-container {
  padding: 2px 5px;
}
.full-calendar .fc-event-container .calendarLabel {
  padding: 5px 12px;
  font-size: 14px;
  border-radius: 4px;
  color: #212121;
  font-weight: 500;
  line-height: 14px;
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
  -moz-transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
  -ms-transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
  -webkit-transition: opacity 400ms cubic-bezier(0, 0, 0.2, 1);
}
.full-calendar .fc-event-container .calendarLabel.cat-shipping {
  background-color: #c8ddc9;
  border-color: #66bb6a;
}
.full-calendar .fc-event-container .calendarLabel.cat-inspection {
  background-color: #e6dff3;
  border-color: #d1c4e9;
}
.full-calendar .fc-event-container .calendarLabel:after {
  content: "";
  width: 18px;
  height: 18px;
  background-color: #e5e5e5;
  position: absolute;
  right: -9px;
  top: -9px;
  display: none;
  color: #ffffff;
  border-radius: 50%;
  font-family: "Material Icons";
  text-align: center;
  line-height: 18px;
}
.full-calendar .fc-event-container .calendarLabel.on-time:after {
  display: block;
  background-color: #1b5e20;
  content: "";
}
.full-calendar .fc-event-container .calendarLabel.late:after {
  display: block;
  background-color: #e53835;
}
.full-calendar .fc-event-container .calendarLabel.shipped-late:after {
  display: block;
  background-color: #e53835;
  content: "";
}
.full-calendar .fc-event-container .calendarLabel.hide {
  opacity: 0;
}
.full-calendar .fc-bg {
  position: absolute;
  z-index: 5 !important;
}
.full-calendar .fc-bg table {
  background: none !important;
}
.full-calendar [data-calendar=day-view] {
  position: relative;
  min-height: 300px;
}
.full-calendar .fc-scroller.fc-day-grid-container {
  height: 565px !important;
}
.full-calendar .fc-basicWeek-view .fc-content-skeleton {
  padding-top: 10px;
}

.micro-agenda .header {
  background-color: #4286f4;
  padding: 20px;
  color: #ffffff;
}
.micro-agenda ul {
  max-height: 655px;
  overflow-y: auto;
  overflow-x: hidden;
}
.micro-agenda ul .bubble.condensed, .micro-agenda ul form [data-ordered-list-input] ol li.condensed, form [data-ordered-list-input] ol .micro-agenda ul li.condensed {
  position: relative;
  margin-left: 5px;
}
.micro-agenda ul .bubble.condensed i, .micro-agenda ul form [data-ordered-list-input] ol li.condensed i, form [data-ordered-list-input] ol .micro-agenda ul li.condensed i {
  margin-right: 0px;
}
.micro-agenda ul span {
  font-size: 14px;
  vertical-align: middle;
}
.micro-agenda ul li {
  line-height: normal;
  padding: 12px;
  transition: 0.2s ease-in-out;
}
.micro-agenda ul li:hover {
  background: #f9f9f9;
}

.tabbed-container .tab-header ul li.no-nav {
  cursor: default;
}

h3 {
  cursor: default;
}
h3.vert-margin-0 {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.add-quote-form .form-wrapper {
  border: solid 2px #e5e5e5;
}
.add-quote-form .form-wrapper .form-group {
  padding: 20px 15px;
}
.add-quote-form .form-wrapper .form-group.active {
  background-color: whitesmoke;
}
.add-quote-form .form-wrapper .form-group .checkbox input:not(:checked) + .box:before, .add-quote-form .form-wrapper .form-group form .radio input:not(:checked) + .box:before, form .add-quote-form .form-wrapper .form-group .radio input:not(:checked) + .box:before {
  border-color: #9e9e9e;
}
.add-quote-form .form-wrapper .form-group label {
  font-weight: 400;
}
.add-quote-form .form-wrapper .form-group input {
  font-style: normal;
}
.add-quote-form .form-wrapper .form-group input [placeholder] {
  font-style: italic !important;
}
.add-quote-form .form-wrapper .form-group .ghost-block textarea[placeholder] {
  font-style: italic !important;
  font-size: 16px !important;
  color: red;
}
.add-quote-form .form-wrapper .form-group label.checkbox-wrap {
  cursor: pointer;
}
.add-quote-form .form-wrapper .form-group input[type=checkbox] {
  width: auto;
  min-height: 20px;
  line-height: 20px;
  margin: 0;
  cursor: pointer;
}
.add-quote-form .form-wrapper .form-group input[type=radio] {
  min-height: 20px;
  line-height: 20px;
  width: auto;
}
.add-quote-form .form-wrapper .form-group .grad-qty .qty-separator {
  position: absolute;
  top: 20px;
  left: 33%;
  font-weight: bold;
}
.add-quote-form .form-wrapper .form-group .grad-qty .price-indicator {
  position: absolute;
  top: 20px;
  left: 66%;
  font-weight: bold;
}
.add-quote-form .form-wrapper .form-group.price-wrap .price-part {
  position: absolute;
  top: 63px;
  left: 25px;
  font-size: 18px;
}
.add-quote-form .form-wrapper .form-group .effective-label {
  position: absolute;
  top: 61px;
  right: 40px;
}
.add-quote-form .form-wrapper .form-group.effective-date input {
  padding-right: 80px;
}
.add-quote-form .form-wrapper .form-group.active .default-checkbox .box {
  border-color: #c9c9c9;
}
.add-quote-form .form-wrapper button, .add-quote-form .form-wrapper form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .add-quote-form .form-wrapper [data-ordered-list-input-action=add] {
  width: calc(100% - 20px);
  margin: 10px;
}

.latest-rev {
  top: 0;
  line-height: 48px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.3);
  text-align: center;
  border: 1px solid #e5e5e5;
}

/*/////Additional Fees Modal/////*/
.accordion {
  padding: 24px 24px 0;
}
.accordion .accordion-wrapper {
  border: 1px solid #e5e5e5;
  padding: 10px;
}

[data-fee-input-row] + [data-fee-input-row] {
  /* Add space between fees in modal */
  margin-top: 15px;
}

.fee-amount {
  position: absolute;
  top: 15px;
  left: 20px;
}

/*/////PDF Preview/////*/
.quote-padding {
  padding: 12px;
}

.pdf-wrapper {
  font-size: 9pt;
  line-height: 12pt;
  background: white;
  box-shadow: 1px 4px 10px 0px rgba(0, 0, 0, 0.3);
  padding: 27px;
}
.pdf-wrapper h4 {
  font-size: 14pt;
}
.pdf-wrapper p {
  font-size: 9pt;
  line-height: 12pt;
}
.pdf-wrapper span.placeholder {
  opacity: 0.5;
  font-style: italic;
  pointer-events: none;
}
.pdf-wrapper span.placeholder.brackets::before {
  content: "{";
}
.pdf-wrapper span.placeholder.brackets::after {
  content: "}";
}
.pdf-wrapper span.active-step {
  position: relative;
  color: #1565c0;
}
.pdf-wrapper span.active-step::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  background: rgba(21, 101, 192, 0.1);
  transition: 0.2s ease-in-out;
}
.pdf-wrapper span.field-filled,
.pdf-wrapper div.field-filled {
  position: relative;
  cursor: pointer;
  z-index: 1;
  display: inline-block;
  transition: 0.2s ease-in-out;
}
.pdf-wrapper span.field-filled::before,
.pdf-wrapper div.field-filled::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 0;
  bottom: 0;
  background: rgba(21, 101, 192, 0.1);
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.pdf-wrapper span.field-filled::after,
.pdf-wrapper div.field-filled::after {
  content: "edit";
  display: flex;
  align-items: center;
  font-family: "Material Icons";
  position: absolute;
  font-size: 12px;
  background-color: #1565c0;
  color: white;
  top: 0;
  bottom: 0;
  transform: translateX(100%);
  right: -2px;
  padding: 2px;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.pdf-wrapper span.field-filled:hover,
.pdf-wrapper div.field-filled:hover {
  color: #1565c0;
}
.pdf-wrapper span.field-filled:hover::before, .pdf-wrapper span.field-filled:hover::after,
.pdf-wrapper div.field-filled:hover::before,
.pdf-wrapper div.field-filled:hover::after {
  opacity: 1;
}
.pdf-wrapper div.field-filled::after {
  transform: none;
}
.pdf-wrapper .pdf-header p {
  font-size: 10pt;
  line-height: 16pt;
}
.pdf-wrapper .pdf-header table {
  page-break-inside: avoid;
}
.pdf-wrapper .pdf-header table th,
.pdf-wrapper .pdf-header table td {
  font-size: 10pt;
  line-height: 14pt;
  padding: 0;
  height: auto;
  border: none;
}
.pdf-wrapper .pdf-header table th {
  font-weight: bold;
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
}
.pdf-wrapper .pdf-footer {
  margin-top: 20px;
  page-break-inside: avoid;
}
.pdf-wrapper ol {
  /* Bold numbers in ordered lists */
  counter-reset: item;
}
.pdf-wrapper ol > li {
  counter-increment: item;
}
.pdf-wrapper ol > li::before {
  content: counter(item);
  font-weight: bold;
  margin-right: 8px;
  /* Setting min-width to allow for widest 2-digit number (88) and align all list item numbers to the right */
  width: 14px;
  display: inline-block;
  text-align: right;
}

.display-line-items-container {
  position: relative;
}
.display-line-items-container .line-numbers {
  position: absolute;
  font-weight: bold;
  margin-right: 8px;
  /* Setting min-width to allow for widest 2-digit number (88) and align all list item numbers to the right */
  width: 16px;
  text-align: right;
}
.display-line-items-container .text-content {
  position: relative;
  left: 24px;
  width: calc(100% - 22px);
}
.display-line-items-container td {
  padding: 0 !important;
  font-size: 10pt !important;
  line-height: 14pt !important;
  font-family: "Roboto", sans-serif !important;
}

.quote-table {
  margin-top: 12px;
}
.quote-table th,
.quote-table td {
  border: none;
  height: auto;
  padding: 12px;
}
.quote-table th.edit-field,
.quote-table td.edit-field {
  width: 16px;
  padding: 0;
}
.quote-table th,
.quote-table .section-header {
  background: #0b3049;
  color: white;
  padding: 3px 12px;
  min-height: 26px;
  font-size: 12px;
  font-weight: bold;
}
.quote-table .section-header {
  display: flex;
  align-items: center;
}
.quote-table td {
  vertical-align: top;
  padding: 12px;
  /* Bold item number column */
}
.quote-table td:first-child {
  font-weight: bold;
}
.quote-table td.edit-field {
  background-color: #1565c0;
  vertical-align: middle;
  color: white;
  text-align: center;
  opacity: 0;
  transition: 0.2s ease-in-out;
}
.quote-table td.edit-field .material-icons {
  font-size: 12px;
}
.quote-table .section-body {
  margin-top: 12px;
  padding: 12px 12px;
}
.quote-table .part-row.placeholder {
  opacity: 0.5;
  font-style: italic;
}
.quote-table .part-row.placeholder td {
  font-weight: 400;
  text-align: center;
}
.quote-table .part-row:nth-child(even) {
  background: #e9ebec;
}
.quote-table .part-row.field-filled:hover {
  cursor: pointer;
  color: #1565c0;
  background-color: rgba(21, 101, 192, 0.1);
}
.quote-table .part-row.field-filled:hover td.edit-field {
  opacity: 1;
}

#quote-form-area.pdf-completed {
  display: none;
}

#quote-form-area #quote-add-form .form-wrapper {
  background: white;
}

#quote-preview-area.pdf-completed {
  grid-column-start: 3;
  grid-column-end: 11;
  margin-bottom: 100px;
}

.pdf-completed-actions {
  position: sticky;
  width: 100vw;
  bottom: 0px;
  left: 0;
  background-color: #e5e5e5;
  padding: 20px;
  z-index: 1;
  margin-left: calc(-50vw + 4.25in);
  margin-top: 30px;
  box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.3);
}
.pdf-completed-actions a {
  display: inline-block;
}
.pdf-completed-actions button, .pdf-completed-actions form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .pdf-completed-actions [data-ordered-list-input-action=add] {
  margin-left: 30px;
}
.pdf-completed-actions.edit-bar {
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-top: -10px;
  transform: translateY(40px);
}

.progress-wrapper button, .progress-wrapper form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .progress-wrapper [data-ordered-list-input-action=add] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#vueAddQuote,
#vueQuote {
  height: 100%;
  overflow: hidden;
}
#vueAddQuote > .d-flex,
#vueQuote > .d-flex {
  height: calc(100% - 54px);
}
#vueAddQuote > .d-flex #quote-form-area,
#vueAddQuote > .d-flex #quote-preview-area,
#vueQuote > .d-flex #quote-form-area,
#vueQuote > .d-flex #quote-preview-area {
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 40px;
}
#vueAddQuote > .d-flex #quote-preview-area,
#vueQuote > .d-flex #quote-preview-area {
  width: calc(8.5in + 30px);
  min-width: calc(8.5in + 30px);
}
#vueAddQuote > .d-flex #quote-preview-area.quote-submit-preview,
#vueQuote > .d-flex #quote-preview-area.quote-submit-preview {
  width: 100%;
  min-width: auto;
  padding-bottom: 0;
  overflow-x: hidden;
}
#vueAddQuote > .d-flex #quote-preview-area.quote-submit-preview .preview-pane,
#vueQuote > .d-flex #quote-preview-area.quote-submit-preview .preview-pane {
  margin: auto;
  width: 8.5in;
  min-width: 8.5in;
}
#vueAddQuote > .d-flex #quote-form-area,
#vueQuote > .d-flex #quote-form-area {
  border-right: 2px solid #e5e5e5;
  flex: 1;
}

#vueQuote {
  display: flex;
  flex-direction: column;
}
#vueQuote > .grid-container, #vueQuote > .html-table-row {
  flex: 1;
  overflow-y: auto;
}

[hideClientView] {
  position: relative;
}
[hideClientView]::after {
  content: "visibility_off";
  font-family: "Material Icons";
  position: absolute;
  text-transform: none;
  font-size: 12px;
  color: #e53835;
  top: -6px;
  right: -6px;
  background-color: rgba(255, 255, 255, 0.5);
}
[hideClientView]:hover {
  box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
[hideClientView]:hover::after {
  background-color: white;
}

.pdf-header h4 {
  font-weight: bold !important;
  white-space: nowrap !important;
}

.table-container.table-suggested-prices {
  max-height: 296px;
  overflow-y: auto;
}
.table-container.table-suggested-prices tr th {
  background-color: whitesmoke;
  position: sticky;
  top: 1px;
  box-shadow: 0px 2px 0px #c9c9c9, 0px -2px 0px #c9c9c9;
}

.po-sidebar-parent {
  width: 33%;
  min-width: calc(768px / 3);
}

.po-sidebar {
  /* Calculate height as screen height minus blue nav minus create P/O heading minus spacer on top and bottom */
  max-height: calc(100vh - 60px - 50px - 40px);
  overflow-y: auto;
}
.po-sidebar ul.nav-in-list li.no-nav {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
  margin-top: -1px;
  margin-bottom: -1px;
  padding-right: 12px;
  white-space: normal;
}

#line-item-form table {
  margin-top: 20px;
}
#line-item-form table:first-child {
  margin-top: 0;
}
#line-item-form table [data-accordions-header] {
  cursor: pointer;
  transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
#line-item-form table [data-accordions-header]:hover {
  background: #f9f9f9;
}
#line-item-form table [data-accordions-header] th > * {
  pointer-events: none;
}
#line-item-form input {
  max-width: none;
}
#line-item-form .html-table .html-table-body .html-table-row .html-table-cell {
  /* Decrease space above each cell */
  padding-top: 8px;
  /* Remove set height on buttons to delete line items */
}
#line-item-form .html-table .html-table-body .html-table-row .html-table-cell.address-field {
  align-self: flex-start;
}
#line-item-form .html-table .html-table-body .html-table-row .html-table-cell.address-field > div {
  flex: 1;
}
#line-item-form .html-table .html-table-body .html-table-row .html-table-cell button.plain, #line-item-form .html-table .html-table-body .html-table-row .html-table-cell form [data-ordered-list-input] .plain[data-ordered-list-input-action=add], form [data-ordered-list-input] #line-item-form .html-table .html-table-body .html-table-row .html-table-cell .plain[data-ordered-list-input-action=add] {
  min-height: 32px;
  line-height: 32px;
}

div#po-list-view-scroll-buttons {
  position: sticky;
  top: 100%;
  transform: translateY(calc(-100% - 20px));
  display: inline-block;
  z-index: 3;
  right: 35px;
}

.shop-order-summary .flex-display, .sidebar-summary .flex-display {
  justify-content: space-between;
}
.shop-order-summary .flex-display .content-right, .sidebar-summary .flex-display .content-right {
  display: inline-flex;
  align-items: center;
}
.shop-order-summary .flex-display .content-right > *, .sidebar-summary .flex-display .content-right > * {
  margin-left: 10px;
}

.high-priority {
  max-width: 86px;
  padding-right: 0 !important;
}
.high-priority .round-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.high-priority .round-btn i {
  line-height: normal;
  margin: 0;
}
.high-priority::after {
  display: none;
}
.high-priority + h1 {
  margin-left: 10px;
}

.sidebar-title {
  display: flex;
  align-items: center;
}

.sidebar-sales-note {
  border-bottom: 1px solid #e5e5e5;
}
.sidebar-sales-note #sales-note-area li {
  white-space: pre-wrap;
  margin-top: 0;
}
.sidebar-sales-note.bg-alert-light {
  border-bottom: 1px solid #dfb8b8;
}

#clauses-area .clause-list li {
  white-space: pre-wrap;
  margin-top: 0;
}

/* =========================================================
~ REMOVE LINE ITEM STYLES
~ All styles that appear when removing a line item via supplements.
========================================================= */
.remove-line-item-overlay-parent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.remove-line-item-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: #b71c1c;
  font-weight: 500;
}
.remove-line-item-overlay button, .remove-line-item-overlay form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .remove-line-item-overlay [data-ordered-list-input-action=add] {
  color: #b71c1c;
  margin-left: 5px;
  text-decoration: underline;
  font-weight: 500;
}
.remove-line-item-overlay button:hover .remove-line-item-overlay button, .remove-line-item-overlay form [data-ordered-list-input] [data-ordered-list-input-action=add]:hover .remove-line-item-overlay button, form [data-ordered-list-input] .remove-line-item-overlay [data-ordered-list-input-action=add]:hover .remove-line-item-overlay button, .remove-line-item-overlay button:hover .remove-line-item-overlay form [data-ordered-list-input] [data-ordered-list-input-action=add], form [data-ordered-list-input] .remove-line-item-overlay button:hover .remove-line-item-overlay [data-ordered-list-input-action=add], .remove-line-item-overlay form [data-ordered-list-input] [data-ordered-list-input-action=add]:hover .remove-line-item-overlay [data-ordered-list-input-action=add], form [data-ordered-list-input] .remove-line-item-overlay [data-ordered-list-input-action=add]:hover .remove-line-item-overlay [data-ordered-list-input-action=add] {
  background: rgba(255, 255, 255, 0.8);
}

/* Client View > Account > Edit Modal, setting shipping options to use CSS grid */
#Clients_ShippingOptions > [data-lineitem-list-container] {
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 0;
  grid-template-columns: repeat(12, 1fr);
}

/**
* LAYOUT STYLES
* Any content wrappers or styles affecting overall layout/theme
*/
.floating-flag {
  position: fixed;
  z-index: 7;
  left: 0;
  bottom: 0;
  padding: 3px 10px;
  background-color: yellow;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-flag:hover {
  opacity: 0.1;
}

.qa-notice {
  background: #ffebee;
  border: 1px solid #dfb8b8;
}

.client-pdf-view nav .content {
  padding-left: 15px;
}
.client-pdf-view #vueAddQuote > .d-flex, .client-pdf-view #vueQuote > .d-flex {
  height: 100%;
}
.client-pdf-view #quote-form-area .full-pad-container {
  margin: 0;
  display: flex;
}
.client-pdf-view #quote-form-area .full-pad-container + .full-pad-container {
  margin-top: -2px;
}
.client-pdf-view #quote-preview-area {
  padding: 20px 15px !important;
}
.client-pdf-view .pdf-wrapper {
  box-shadow: 1px 4px 10px 0px rgba(0, 0, 0, 0.3) !important;
}
.client-pdf-view .initials {
  height: 40px;
  width: 40px;
  min-width: 40px;
  background-color: #1565c0;
  border-radius: 50%;
  display: block;
  font-size: 20px;
  color: white;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggested-results-3 {
  position: absolute;
  background: white;
  width: calc(100% - 60px);
  z-index: 2;
  border: 1px solid lightgrey;
}

.many-searches-container .suggest-input .loading-input {
  width: 100% !important;
}

.many-searches-container input {
  border-radius: 0 !important;
}

.suggest-input .search-icon {
  position: relative;
}
.suggest-input .search-icon i {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 5;
}

/**
* Overrides
* Should only be used as one-off exceptions that can't be otherwise re-
* factored elsewhere.
*/
.no-pad-left {
  padding-left: 0px;
}

.no-pad-right {
  padding-right: 0px;
}

.no-pad {
  padding: 0px !important;
}

.no-margin {
  margin: 0;
}

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

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

.no-vert-margin {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.no-pad-bottom {
  padding-bottom: 0 !important;
}

.no-pad-top {
  padding-top: 0 !important;
}

.no-pad-right {
  padding-right: 0 !important;
}

.no-pad-left {
  padding-left: 0 !important;
}

.no-radius {
  border-radius: 0px;
}

.borderless {
  border: none !important;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}

.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.border-right {
  border-right: 1px solid #e5e5e5;
}

.border-left {
  border-left: 1px solid #e5e5e5;
}

.shadowless {
  box-shadow: none;
}

.h-100pct {
  height: 100%;
}

.prevent-flex-height {
  height: max-content;
}

.prevent-flex-width {
  width: max-content;
}

.w-100pct {
  width: 100% !important;
}

.preserve-whitespace {
  white-space: pre;
}

.flex-1 {
  flex: 1;
}

[hidden] {
  display: none;
}

html {
  /* CSS Document */
  /* This fixes extra spacing around modal edges */
  /* This can be seen in the P/O creation when collapsing a block */
  /* This can be seen in the P/O creation when add line item is disabled */
  /* We can't use their true styles because we don't wrap inputs in an input group, so we need to restyle to work with our styles. */
}
html .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
html .alert {
  padding: 7px;
  margin-bottom: 0;
  border: none;
}
html .row {
  display: flex;
}
html [class^=grid-span].border-left, html [class*=-grid-span-].border-left {
  border-left: none !important;
}
html .progress-bar {
  background: transparent;
}
html .table {
  margin-bottom: 0;
}
html .table td, html .table th {
  padding: 0 10px;
  vertical-align: middle;
  border-top: none;
}
html .modal-body {
  padding: 0;
}
html .collapse:not(.show) {
  display: inherit;
}
html a:not([href]):not([tabindex]).default {
  color: #757575;
}
html a:not([href]):not([tabindex]).slate {
  color: #78909c;
}
html a:not([href]):not([tabindex]).primary {
  color: #4286f4;
}
html a:not([href]):not([tabindex]).primary:hover {
  color: #1565c0;
}
html a:not([href]):not([tabindex]).secondary {
  color: #009688;
}
html a:not([href]):not([tabindex])[disabled] {
  color: #c9c9c9;
}
html .form-group {
  margin-bottom: 0;
}
html .form-control {
  border-radius: 0;
  border: 1px solid #e5e5e5;
  padding: 0 15px;
  font-size: 20px;
  transition: none;
  color: black;
}
html .form-control.short {
  padding: 7px;
  font-size: 14px;
  line-height: 16px;
}
html .input-group {
  display: block;
}
html .input-prepend-wrapper {
  display: flex;
}
html .input-prepend-wrapper.left {
  flex-direction: row-reverse;
}
html .input-prepend-wrapper.left .input-group-text {
  border-right: none;
}
html .input-prepend-wrapper.right .input-group-text {
  border-left: none;
}
html .input-prepend-wrapper input {
  position: relative;
  z-index: 1;
}
html .input-prepend-wrapper .input-group-text {
  border-color: #e5e5e5;
  border-radius: 0;
  font-size: 12px;
}
html .input-group-prepend {
  position: absolute;
}
html .input-group-prepend .input-group-text {
  line-height: 48px;
  font-size: 20px;
  border-radius: 0;
  min-height: 48px;
  padding: 0;
  width: 25px;
  justify-content: center;
  border: 1px solid #e5e5e5;
  border-right: none;
}
html .input-group-prepend + input, html .input-group-prepend + .v-number-input-wrapper input {
  width: calc(100% - 25px);
  margin-left: 25px;
  /* Relative will make the input be "on top" of the prepend. This is important for focus to make sure it's border is on top of the prepend. */
  position: relative;
}

/*# sourceMappingURL=style.css.map */