@charset "UTF-8";
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  margin-left: -8px;
  position: absolute; }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  box-sizing: content-box;
  position: absolute;
  border: 8px solid transparent;
  height: 0;
  width: 1px; }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  content: "";
  z-index: -1;
  border-width: 8px;
  left: -8px;
  border-bottom-color: #aeaeae; }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
  top: 0;
  margin-top: -8px; }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  border-top: none;
  border-bottom-color: #f0f0f0; }

.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
  top: -1px;
  border-bottom-color: #aeaeae; }

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  bottom: 0;
  margin-bottom: -8px; }

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  border-bottom: none;
  border-top-color: #fff; }

.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before,
.react-datepicker__month-read-view--down-arrow::before,
.react-datepicker__month-year-read-view--down-arrow::before {
  bottom: -1px;
  border-top-color: #aeaeae; }

.react-datepicker-wrapper {
  display: inline-block;
  padding: 0;
  border: 0; }

.react-datepicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  display: inline-block;
  position: relative; }

.react-datepicker--time-only .react-datepicker__triangle {
  left: 35px; }

.react-datepicker--time-only .react-datepicker__time-container {
  border-left: 0; }

.react-datepicker--time-only .react-datepicker__time {
  border-radius: 0.3rem; }

.react-datepicker--time-only .react-datepicker__time-box {
  border-radius: 0.3rem; }

.react-datepicker__triangle {
  position: absolute;
  left: 50px; }

.react-datepicker-popper {
  z-index: 1; }

.react-datepicker-popper[data-placement^="bottom"] {
  margin-top: 10px; }

.react-datepicker-popper[data-placement^="top"] {
  margin-bottom: 10px; }

.react-datepicker-popper[data-placement^="right"] {
  margin-left: 8px; }

.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
  left: auto;
  right: 42px; }

.react-datepicker-popper[data-placement^="left"] {
  margin-right: 8px; }

.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
  left: 42px;
  right: auto; }

.react-datepicker__header {
  text-align: center;
  background-color: #f0f0f0;
  border-bottom: 1px solid #aeaeae;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  padding-top: 8px;
  position: relative; }

.react-datepicker__header--time {
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 5px; }

.react-datepicker__year-dropdown-container--select,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--scroll {
  display: inline-block;
  margin: 0 2px; }

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
  margin-top: 0;
  color: #000;
  font-weight: bold;
  font-size: 0.944rem; }

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

.react-datepicker__navigation {
  background: none;
  line-height: 1.7rem;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 10px;
  width: 0;
  padding: 0;
  border: 0.45rem solid transparent;
  z-index: 1;
  height: 10px;
  width: 10px;
  text-indent: -999em;
  overflow: hidden; }

.react-datepicker__navigation--previous {
  left: 10px;
  border-right-color: #ccc; }

.react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3; }

.react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default; }

.react-datepicker__navigation--next {
  right: 10px;
  border-left-color: #ccc; }

.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 80px; }

.react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3; }

.react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default; }

.react-datepicker__navigation--years {
  position: relative;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.react-datepicker__navigation--years-previous {
  top: 4px;
  border-top-color: #ccc; }

.react-datepicker__navigation--years-previous:hover {
  border-top-color: #b3b3b3; }

.react-datepicker__navigation--years-upcoming {
  top: -4px;
  border-bottom-color: #ccc; }

.react-datepicker__navigation--years-upcoming:hover {
  border-bottom-color: #b3b3b3; }

.react-datepicker__month-container {
  float: left; }

.react-datepicker__month {
  margin: 0.4rem;
  text-align: center; }

.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
  display: inline-block;
  width: 4rem;
  margin: 2px; }

.react-datepicker__input-time-container {
  clear: both;
  width: 100%;
  float: left;
  margin: 5px 0 10px 15px;
  text-align: left; }

.react-datepicker__input-time-container .react-datepicker-time__caption {
  display: inline-block; }

.react-datepicker__input-time-container .react-datepicker-time__input-container {
  display: inline-block; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
  display: inline-block;
  margin-left: 10px; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
  width: 85px; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
  -moz-appearance: textfield; }

.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
  margin-left: 5px;
  display: inline-block; }

.react-datepicker__time-container {
  float: right;
  border-left: 1px solid #aeaeae;
  width: 85px; }

.react-datepicker__time-container--with-today-button {
  display: inline;
  border: 1px solid #aeaeae;
  border-radius: 0.3rem;
  position: absolute;
  right: -72px;
  top: 0; }

.react-datepicker__time-container .react-datepicker__time {
  position: relative;
  background: white; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
  width: 85px;
  overflow-x: hidden;
  margin: 0 auto;
  text-align: center; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
  list-style: none;
  margin: 0;
  height: calc(195px + (1.7rem / 2));
  overflow-y: scroll;
  padding-right: 0px;
  padding-left: 0px;
  width: 100%;
  box-sizing: content-box; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
  height: 30px;
  padding: 5px 10px;
  white-space: nowrap; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
  cursor: pointer;
  background-color: #f0f0f0; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
  background-color: #216ba5;
  color: white;
  font-weight: bold; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background-color: #216ba5; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
  color: #ccc; }

.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
  cursor: default;
  background-color: transparent; }

.react-datepicker__week-number {
  color: #ccc;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem; }

.react-datepicker__week-number.react-datepicker__week-number--clickable {
  cursor: pointer; }

.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0; }

.react-datepicker__day-names,
.react-datepicker__week {
  white-space: nowrap; }

.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name {
  color: #000;
  display: inline-block;
  width: 1.7rem;
  line-height: 1.7rem;
  text-align: center;
  margin: 0.166rem; }

.react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
.react-datepicker__quarter--selected,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff; }

.react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--in-range:hover {
  background-color: #1d5d90; }

.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
  color: #ccc;
  pointer-events: none; }

.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
  cursor: default;
  background-color: transparent; }

.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text {
  cursor: pointer; }

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  border-radius: 0.3rem;
  background-color: #f0f0f0; }

.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today {
  font-weight: bold; }

.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted {
  border-radius: 0.3rem;
  background-color: #3dcc4a;
  color: #fff; }

.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover {
  background-color: #32be3f; }

.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1 {
  color: magenta; }

.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2 {
  color: green; }

.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range {
  border-radius: 0.3rem;
  background-color: #216ba5;
  color: #fff; }

.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--in-range:hover {
  background-color: #1d5d90; }

.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected {
  border-radius: 0.3rem;
  background-color: #2a87d0;
  color: #fff; }

.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover {
  background-color: #1d5d90; }

.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range {
  background-color: rgba(33, 107, 165, 0.5); }

.react-datepicker__month--selecting-range .react-datepicker__day--in-range, .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range, .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range {
  background-color: #f0f0f0;
  color: #000; }

.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled {
  cursor: default;
  color: #ccc; }

.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover {
  background-color: transparent; }

.react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
  background-color: #216ba5; }

.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
  background-color: #f0f0f0; }

.react-datepicker__input-container {
  position: relative;
  display: inline-block;
  width: 100%; }

.react-datepicker__year-read-view,
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view {
  border: 1px solid transparent;
  border-radius: 0.3rem; }

.react-datepicker__year-read-view:hover,
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover {
  cursor: pointer; }

.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
  border-top-color: #b3b3b3; }

.react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow {
  border-top-color: #ccc;
  float: right;
  margin-left: 20px;
  top: 8px;
  position: relative;
  border-width: 0.45rem; }

.react-datepicker__year-dropdown,
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown {
  background-color: #f0f0f0;
  position: absolute;
  width: 50%;
  left: 25%;
  top: 30px;
  z-index: 1;
  text-align: center;
  border-radius: 0.3rem;
  border: 1px solid #aeaeae; }

.react-datepicker__year-dropdown:hover,
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover {
  cursor: pointer; }

.react-datepicker__year-dropdown--scrollable,
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable {
  height: 150px;
  overflow-y: scroll; }

.react-datepicker__year-option,
.react-datepicker__month-option,
.react-datepicker__month-year-option {
  line-height: 20px;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.react-datepicker__year-option:first-of-type,
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type {
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem; }

.react-datepicker__year-option:last-of-type,
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem; }

.react-datepicker__year-option:hover,
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover {
  background-color: #ccc; }

.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
  border-bottom-color: #b3b3b3; }

.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
  border-top-color: #b3b3b3; }

.react-datepicker__year-option--selected,
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected {
  position: absolute;
  left: 15px; }

.react-datepicker__close-icon {
  cursor: pointer;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0px 6px 0px 0px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: table-cell;
  vertical-align: middle; }

.react-datepicker__close-icon::after {
  cursor: pointer;
  background-color: #216ba5;
  color: #fff;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  padding: 2px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  content: "\00d7"; }

.react-datepicker__today-button {
  background: #f0f0f0;
  border-top: 1px solid #aeaeae;
  cursor: pointer;
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  clear: left; }

.react-datepicker__portal {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2147483647; }

.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__time-name {
  width: 3rem;
  line-height: 3rem; }

@media (max-width: 400px), (max-height: 550px) {
  .react-datepicker__portal .react-datepicker__day-name,
  .react-datepicker__portal .react-datepicker__day,
  .react-datepicker__portal .react-datepicker__time-name {
    width: 2rem;
    line-height: 2rem; } }

.react-datepicker__portal .react-datepicker__current-month,
.react-datepicker__portal .react-datepicker-time__header {
  font-size: 1.44rem; }

.react-datepicker__portal .react-datepicker__navigation {
  border: 0.81rem solid transparent; }

.react-datepicker__portal .react-datepicker__navigation--previous {
  border-right-color: #ccc; }

.react-datepicker__portal .react-datepicker__navigation--previous:hover {
  border-right-color: #b3b3b3; }

.react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover {
  border-right-color: #e6e6e6;
  cursor: default; }

.react-datepicker__portal .react-datepicker__navigation--next {
  border-left-color: #ccc; }

.react-datepicker__portal .react-datepicker__navigation--next:hover {
  border-left-color: #b3b3b3; }

.react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover {
  border-left-color: #e6e6e6;
  cursor: default; }

meta.foundation-version {
  font-family: "/5.5.3/"; }

meta.foundation-mq-small {
  font-family: "/only screen/";
  width: 0; }

meta.foundation-mq-small-only {
  font-family: "/only screen and (max-width: 551px)/";
  width: 0; }

meta.foundation-mq-medium {
  font-family: "/only screen and (min-width:551px)/";
  width: 551px; }

meta.foundation-mq-medium-only {
  font-family: "/only screen and (min-width:551px) and (max-width:801px)/";
  width: 551px; }

meta.foundation-mq-large {
  font-family: "/only screen and (min-width:801px)/";
  width: 801px; }

meta.foundation-mq-large-only {
  font-family: "/only screen and (min-width:801px) and (max-width:968px)/";
  width: 801px; }

meta.foundation-mq-xlarge {
  font-family: "/only screen and (min-width:968px)/";
  width: 968px; }

meta.foundation-mq-xlarge-only {
  font-family: "/only screen and (min-width:968px) and (max-width:1441px)/";
  width: 968px; }

meta.foundation-mq-xxlarge {
  font-family: "/only screen and (min-width:1441px)/";
  width: 1441px; }

meta.foundation-data-attribute-namespace {
  font-family: false; }

/* Tooltips */
.has-tip {
  border-bottom: dotted 1px #d9d9d9;
  color: #292929;
  cursor: help;
  font-weight: 600; }
  .has-tip:hover, .has-tip:focus {
    border-bottom: dotted 1px #171717;
    color: #333; }
  .has-tip.tip-left, .has-tip.tip-right {
    float: none !important; }

.tooltip {
  background: #292929;
  color: #fff;
  display: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  max-width: 300px;
  padding: 0.375rem 0.5rem 0.29808rem;
  position: absolute;
  width: 100%;
  z-index: 1006;
  left: 50%; }
  .tooltip > .nub {
    border: solid 5px;
    border-color: transparent transparent #292929 transparent;
    display: block;
    height: 0;
    pointer-events: none;
    position: absolute;
    top: -10px;
    width: 0;
    left: 5px; }
    .tooltip > .nub.rtl {
      left: auto;
      right: 5px; }
  .tooltip.radius {
    border-radius: 2px; }
  .tooltip.round {
    border-radius: 1000px; }
    .tooltip.round > .nub {
      left: 2rem; }
  .tooltip.opened {
    border-bottom: dotted 1px #171717 !important;
    color: #333 !important; }

.tap-to-close {
  color: #f5f5f5;
  display: block;
  font-size: 1rem;
  font-weight: 400; }

@media only screen {
  .tooltip > .nub {
    border-color: transparent transparent #292929 transparent;
    top: -10px; }
  .tooltip.tip-top > .nub {
    border-color: #292929 transparent transparent transparent;
    bottom: -10px;
    top: auto; }
  .tooltip.tip-left, .tooltip.tip-right {
    float: none !important; }
  .tooltip.tip-left > .nub {
    border-color: transparent transparent transparent #292929;
    left: auto;
    margin-top: -5px;
    right: -10px;
    top: 50%; }
  .tooltip.tip-right > .nub {
    border-color: transparent #292929 transparent transparent;
    left: -10px;
    margin-top: -5px;
    right: auto;
    top: 50%; } }

.u-block {
  display: block !important; }

.u-inlineBlock {
  display: inline-block !important;
  max-width: 100% !important; }

.u-hidden {
  display: none !important; }

.u-hiddenVisually {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.is-srOnly {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important; }

.u-textAlignCenter {
  text-align: center !important; }

.u-textAlignLeft {
  text-align: left !important; }

.u-textAlignRight {
  text-align: right !important; }

.u-textBreak {
  word-wrap: break-word !important; }

.u-textInheritColor {
  color: inherit !important; }

.u-textKern {
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "kern" 1 !important;
  font-kerning: normal !important; }

.u-textLead {
  line-height: 1.6 !important;
  font-size: 1.1em !important; }

.u-textNoWrap {
  white-space: nowrap !important; }

.u-textTruncate {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-wrap: normal !important; }

.u-fontSmoothing {
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important; }

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

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

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  box-sizing: content-box;
  /* 2 */ }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

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

html,
body {
  height: 100%; }

body {
  background: #fff;
  color: #333;
  cursor: auto;
  margin: 0;
  padding: 0;
  position: relative; }

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased; }

a:hover {
  cursor: pointer; }

figure {
  margin: 0 0 1rem; }

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: middle; }

img {
  -ms-interpolation-mode: bicubic; }

button {
  background: none;
  border: 0; }
  button:active, button:focus {
    box-shadow: none;
    outline: none; }

textarea {
  height: auto;
  min-height: 50px; }

select {
  width: 100%; }

div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0; }

html {
  font-size: 13px; }
  @media (min-width: 551px) {
    html {
      font-size: 13px; } }
  @media (min-width: 801px) {
    html {
      font-size: 13px; } }
  @media (min-width: 968px) {
    html {
      font-size: 13px; } }

body {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5; }

a {
  color: #4496f6;
  line-height: inherit;
  text-decoration: none; }
  a:hover, a:focus {
    color: #0b6ee3; }

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  text-rendering: optimizeLegibility; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #292929;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  margin-bottom: 3rem;
  text-rendering: optimizeLegibility; }
  h1 small,
  h2 small,
  h3 small,
  h4 small,
  h5 small,
  h6 small {
    color: #999;
    font-size: 80%;
    line-height: 0; }

h1 {
  font-size: 2.76923rem; }

h2 {
  font-size: 1.92308rem; }

h3 {
  font-size: 1.15385rem; }

h4 {
  font-size: 1.38462rem; }

h5 {
  font-size: 1rem; }

h6 {
  font-size: 1rem; }

.subheader {
  color: #999;
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 0.75rem; }

hr {
  border: solid #d9d9d9;
  border-width: 1px 0 0;
  clear: both;
  height: 0;
  margin: 1rem 0 0.92308rem; }

em,
i {
  font-style: italic;
  line-height: inherit; }

strong,
b {
  font-weight: 600;
  line-height: inherit; }

small {
  font-size: 80%;
  line-height: inherit; }

code {
  background-color: #fff;
  border-color: #ebebeb;
  border-style: solid;
  border-width: 1px;
  color: #ed6a6a;
  font-family: Consolas, Monaco, "Andale Mono", monospace;
  font-size: 1rem;
  font-weight: 400;
  padding: 0.375rem 0.5rem; }

ul,
ol,
dl {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  list-style-position: outside;
  margin-bottom: 1.5rem; }

ul ul,
ul ol,
ol ul,
ol ol {
  margin-left: 1.53846rem;
  margin-bottom: 0; }

ul {
  margin-left: 1.1rem; }

ol {
  margin-left: 1.4rem; }

dl dt {
  font-weight: 600;
  margin-bottom: 0.3rem; }

dl dd {
  margin-bottom: 1.5rem; }

abbr,
acronym {
  border-bottom: 1px dotted #d9d9d9;
  color: #333;
  cursor: help;
  font-size: 90%;
  text-transform: uppercase; }

abbr {
  text-transform: none; }

blockquote {
  border: #d9d9d9 solid;
  border-width: 0 0 0 1px;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1.5rem; }

blockquote,
blockquote p {
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5; }

cite {
  color: #999;
  display: block;
  font-size: 1rem; }
  cite:before {
    content: "— "; }
  cite a,
  cite a:visited {
    color: #999; }

.icon {
  height: 1.38462rem;
  width: 1.38462rem;
  display: inline-block;
  vertical-align: middle; }
  .icon svg {
    display: inline-block;
    fill: #999;
    height: 100%;
    vertical-align: top;
    width: 100%; }

/*doc
---
title: Buttons
name: button
category: Components
---

These are all the button

```sass_file_example
src/settings/foundation/buttons/_settings.scss
```

```html_example
<button class="button">Button</button>

<input type="submit" class="button" value="Button">

<a class="button" role="button" href="#">Button</a>
```

*/
.button {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 1px;
  cursor: pointer;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: normal;
  margin: 0 0 1.5rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  background-color: #fff;
  border-color: #d9d9d9;
  color: #5f5f5f;
  font-size: 1rem;
  padding: 1rem 2.25rem;
  border-radius: 3px;
  outline: none;
  vertical-align: middle; }
  .button:hover, .button:focus, .button.is-active, .button.active {
    background-color: #fff;
    border-color: #999;
    color: #333; }
  .button:active {
    background-color: #fff;
    border: 1px solid #5f5f5f;
    color: #292929; }
  .button:focus, .button.is-active, .button.active {
    box-shadow: 0 0 2px rgba(51, 51, 51, 0.6);
    outline: none; }
  @media (min-width: 481px) {
    .button + .button {
      margin-left: 0.75rem; } }

/*doc
---
title: Button states
name: button_states
category: Components
parent: button
---

```html_example
<button class="button button--primary">Primary Button</button>

<button class="button">Secondary / Default Button</button>

<button class="button button--tertiary">Tertiary Button</button>

<button class="button button--action">Call-to-Action Button</button>
```
    */
.button--primary {
  background-color: #333;
  border-color: #333;
  color: #fff; }
  .button--primary:hover, .button--primary:focus, .button--primary.is-active, .button--primary.active {
    background-color: #0d0d0d;
    border-color: #0d0d0d;
    color: #fff; }
  .button--primary:active {
    background-color: #000;
    border: 1px solid #000;
    color: #fff; }

.button--tertiary {
  background-color: #fff;
  border-color: #ebebeb;
  color: #4496f6; }
  .button--tertiary:hover, .button--tertiary:focus, .button--tertiary.is-active, .button--tertiary.active {
    background-color: #fff;
    border-color: #d9d9d9;
    color: #0b6ee3; }
  .button--tertiary:active {
    background-color: #fff;
    border: 1px solid #d9d9d9;
    color: #0b6ee3; }

.button--action {
  background-color: #4496f6;
  border-color: #4496f6;
  color: #fff; }
  .button--action:hover, .button--action:focus, .button--action.is-active, .button--action.active {
    background-color: #0b6ee3;
    border-color: #0b6ee3;
    color: #fff; }
  .button--action:active {
    background-color: #0957b2;
    border: 1px solid #0957b2;
    color: #fff; }

.button[disabled] {
  background-color: #fafafa;
  border-color: #ebebeb;
  color: #d9d9d9;
  cursor: default; }
  .button[disabled]:hover, .button[disabled]:focus, .button[disabled].is-active, .button[disabled].active {
    background-color: #fafafa;
    border-color: #ebebeb;
    color: #d9d9d9; }
  .button[disabled]:active {
    background-color: #fafafa;
    border: 1px solid #ebebeb;
    color: #d9d9d9; }

/*doc
---
title: Button sizes
name: button_sizes
category: Components
parent: button
---

```html_example
<button class="button button--large">Large</button>

<button class="button">Default</button>

<button class="button button--small">Small</button>

<button class="button button--tiny">Tiny</button>
```

And a special case, slab, which takes the full width of it's container and any
size modifier

```html_example
<button class="button button--slab">Slab</button>

<button class="button button--slab button--large">Slab</button>
```

*/
.button--large {
  font-size: 1.38462rem;
  padding: 1.1875rem 4.5rem; }

.button--small {
  font-size: 1rem;
  padding: 0.9375rem 1.875rem; }

.button--tiny {
  font-size: 1rem;
  padding: 0.5rem 1.1875rem; }

.button--slab {
  display: block;
  width: 100%; }
  .button + .button--slab {
    margin-left: 0; }

.button--icon {
  font-size: 1rem;
  padding: 0.75rem 0.75rem; }
  .button--icon svg {
    fill: #333; }

/*doc
---
title: Dropdowns
name: dropdown
category: Components
---

Dropdowns are simple lists that can appear next to any element that can trigger a click event.
They can be used by buttons, icons, links and other similar items.

```sass_file_example
src/settings/foundation/dropdown/_settings.scss
```
```html_example
<ul class="dropdown-menu" style="display:block; left: 0;">
    <li class="dropdown-menu-item"><a href="#" ng-click="$event.preventDefault()">One</a></li>
    <li class="dropdown-menu-item"><a href="#" ng-click="$event.preventDefault()">Two</a></li>
    <li class="dropdown-menu-item"><a href="#" ng-click="$event.preventDefault()">Three</a></li>
</ul>
```
*/
.dropdown-menu {
  display: none;
  left: -9999px;
  list-style: none;
  margin-left: 0;
  position: absolute;
  background: #fff;
  border: solid 1px #d9d9d9;
  font-size: 1rem;
  height: auto;
  max-height: none;
  width: 100%;
  z-index: 89;
  max-width: 200px; }
  .dropdown-menu.open {
    display: block; }
  .dropdown-menu > *:first-child {
    margin-top: 0; }
  .dropdown-menu > *:last-child {
    margin-bottom: 0; }

.dropdown-menu--content {
  display: none;
  left: -9999px;
  list-style: none;
  margin-left: 0;
  position: absolute;
  background: #fff;
  border: solid 1px #d9d9d9;
  font-size: 1rem;
  height: auto;
  max-height: none;
  padding: 0.75rem;
  width: 100%;
  z-index: 89;
  max-width: 200px; }
  .dropdown-menu--content.open {
    display: block; }
  .dropdown-menu--content > *:first-child {
    margin-top: 0; }
  .dropdown-menu--content > *:last-child {
    margin-bottom: 0; }

.dropdown-menu,
.dropdown-menu--content {
  box-shadow: 0 2px 3px 0 #f5f5f5;
  margin-top: -1px; }

.dropdown-menu-item {
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0.75rem 1.5rem; }
  .dropdown-menu-item:hover, .dropdown-menu-item:focus {
    background: #fafafa; }
  .dropdown-menu-item a {
    display: block;
    padding: 0.75rem;
    color: #333; }
  .dropdown-menu-item a {
    margin: -0.75rem; }

.dropdown-button {
  position: relative;
  padding-right: 2.4375rem;
  cursor: pointer; }
  .dropdown-button::after {
    border-color: #999 transparent transparent transparent;
    border-style: solid;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0; }
  .dropdown-button::after {
    border-width: 0.375rem;
    right: 0.9375rem;
    margin-top: -0.125rem; }
  .dropdown-button::after {
    border-color: #999 transparent transparent transparent; }
  .dropdown-button.button--small {
    padding-right: 1.8rem; }
    .dropdown-button.button--small::after {
      border-width: 0.3rem;
      right: 0.6rem;
      margin-top: -0.12rem; }
    .dropdown-button.button--small::after {
      border-color: #999 transparent transparent transparent; }
  .dropdown-button.button--large {
    padding-right: 2.625rem; }
    .dropdown-button.button--large::after {
      border-width: 0.375rem;
      right: 1.125rem;
      margin-top: -0.125rem; }
    .dropdown-button.button--large::after {
      border-color: #999 transparent transparent transparent; }
  .dropdown-button.button--primary:after {
    border-color: #fff transparent transparent; }

/*doc
---
title: Forms
name: forms
category: Forms
---

##### Foundation Forms settings
```sass_file_example
src/settings/foundation/forms/_settings.scss
```

##### Citadel Forms settings
```sass_file_example
src/settings/foundation/forms/_settings.scss
```

*/
/*doc
---
title: Form basics
name: 01forms_basics
category: Forms
parent: forms
---

Citadel comes with styling for most form input types and some custom ones. To start
things off a basic, semantic mark-up structure should be adhered too, including
the `form`, `fieldset` and `legend` elements where ever possible.

```html_example
<form action="#" class="form">
    <fieldset class="form-fieldset">
        <legend class="form-legend">Form legend</legend>
    </fieldset>
</form>
```

*/
.form {
  margin: 0; }

.form-fieldset {
  border: solid #d9d9d9;
  border-width: 0;
  margin: 0;
  padding: 0; }

.form-legend {
  background: transparent;
  display: block;
  line-height: 1.5;
  margin-bottom: 0;
  padding: 0 0 2rem;
  width: 100%; }

/*doc
---
title: Form labels and inputs
name: 03forms_basics
category: Forms
parent: forms
---

Inputs of all types should be associated with a label which has a `for` attribute

```html_example
<div class="form-field">
    <label class="form-label" for="input1">Input Label</label>
    <input class="form-input" id="input1" type="text" placeholder="Placeholder text">
</div>
<div class="form-field">
    <label class="form-label" for="input2">Number Label</label>
    <input class="form-input" id="input2" type="number" placeholder="Number input">
</div>
<div class="form-field">
    <label class="form-label" for="input3">Textarea Label <small>additional context</small></label>
    <textarea class="form-input" id="input3" placeholder="Placeholder text" rows="3"></textarea>
</div>
```
*/
.form-label {
  color: #5f5f5f;
  cursor: pointer;
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0.375rem; }
  .form-label small {
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    vertical-align: bottom; }

.form-input, .widget--stripev3 {
  appearance: none;
  background-color: #fff;
  border-color: #d9d9d9;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px #ebebeb;
  color: #333;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  height: 3.45rem;
  margin: 0;
  padding: 0.75rem 1rem;
  transition: all 100ms ease-out;
  width: 100%;
  /*doc
---
title: Disabled inputs
name: 04forms_basics
category: Forms
parent: forms
---

```html_example
<div class="form-field">
    <label class="form-label" for="disabled_input1">Input Label</label>
    <input class="form-input" id="disabled_input1" disabled type="text" value="Disabled text">
</div>

<div class="form-field">
    <label class="form-label" for="disabled_input2">Input Label</label>
    <input class="form-input" id="disabled_input2" readonly type="text" value="Readonly text">
</div>
```
*/ }
  .form-input:disabled, .widget--stripev3:disabled {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    color: #333;
    cursor: not-allowed; }
  .form-input[readonly], .widget--stripev3[readonly] {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    color: #333;
    cursor: text; }
  .form-input:focus, .widget--stripev3:focus {
    background: #fff;
    border-color: #4496f6;
    box-shadow: 0 0 3px rgba(68, 150, 246, 0.4);
    outline: none; }
  .form-input[rows], .widget--stripev3[rows] {
    height: auto; }
  .form-input[type="search"], .widget--stripev3[type="search"] {
    box-sizing: border-box; }
  .form-input::-webkit-input-placeholder, .widget--stripev3::-webkit-input-placeholder {
    color: #d9d9d9; }
  .form-input::-ms-clear, .widget--stripev3::-ms-clear {
    height: 0;
    width: 0; }
  .form-input::-moz-placeholder, .widget--stripev3::-moz-placeholder {
    color: #d9d9d9; }
  .form-input:-ms-input-placeholder, .widget--stripev3:-ms-input-placeholder {
    color: #d9d9d9; }

/*doc
---
title: Selects
name: 05forms_basics
category: Forms
parent: forms
---

```html_example
<div class="form-field">
    <label class="form-label" for="select1">Native Select label</label>
    <select class="form-select" name="select1" id="select1">
        <option>Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
```
*/
.form-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #fff;
  border-radius: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
  background-position: 100% center;
  background-repeat: no-repeat;
  border-style: solid;
  border-width: 1px;
  border-color: #d9d9d9;
  color: #333;
  font-family: inherit;
  font-size: 1rem;
  line-height: normal;
  padding: 0.75rem;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  height: 3.45rem;
  margin: 0;
  max-width: none;
  outline: 0;
  padding-right: 1.5rem; }
  .form-select::-ms-expand {
    display: none; }
  .form-select.radius {
    border-radius: 4px; }
  .form-select:focus {
    background-color: #fff;
    border-color: #4496f6; }
  .form-select:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed; }
  .form-select:focus {
    border-color: #4496f6;
    box-shadow: 0 0 3px rgba(68, 150, 246, 0.4); }

/*doc
---
title: Form Panels and Layouts
name: 13forms_layouts
category: Forms
parent: forms
---

We provide a couple of component styles to layout forms.

The more `form-field` components you place in the `form-row`, the smaller the columns gets.
Columns are equal length, and calculated automatically by Flexbox by default.

It's the same mark-up but depending on your browser support needs, you can switch
between a flexbox layout or a more traditional grid based layout by setting
`$formRow-modernBrowsers` to `false`.

The grid based layout of `form-feilds` will require the use of modifiers to calculate
the correct widths. We support `form-field--half`, `form-field--third` and
`form-field--quarter`

```html_example
<form action="#" class="form">
    <fieldset class="form-fieldset">
        <legend class="form-legend">Form legend</legend>
        <div class="form-body">
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
            </div>
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
            </div>
            <div class="form-row">
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
                <div class="form-field">
                    <label class="form-label" for="input12">Input Label</label>
                    <input class="form-input" id="input12" type="text" placeholder="Placeholder text">
                </div>
                <div class="form-field">
                    <label class="form-label" for="input4">Prefixed Label</label>
                    <div class="form-prefixPostfix">
                        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">KG</span>
                        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</form>
```
*/
.form-body {
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 1.5rem;
  max-width: none;
  padding: 0; }

@media (min-width: 551px) {
  .form-row {
    display: flex;
    flex-direction: row;
    margin: 0 -1.15385rem;
    padding: 0; }
    .form-row .form-field {
      flex: 1;
      margin-left: 1.15385rem;
      margin-right: 1.15385rem;
      max-width: none;
      padding: 0; }
    .form-row .form-select {
      max-width: none; } }

/*doc
---
title: Form Fields
name: 02forms_basics
category: Forms
parent: forms
---

Each form input should be wrapped in a `form-field`

```html_example
<div class="form-field">
</div>
```
*/
.form-field {
  display: block;
  margin: 0 0 1rem;
  max-width: none; }
  .form-field:before, .form-field:after {
    content: " ";
    display: table; }
  .form-field:after {
    clear: both; }

/*doc
---
title: Selects [multiple]
name: 06forms_basics
category: Forms
parent: forms
---

Styling of the select element with the multiple attribute

```html_example
<div class="form-field">
    <label class="form-label" for="multiselect1">Native Select Multiple label</label>
    <select class="form-select" multiple name="multiselect1" id="multiselect1">
        <option>Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
</div>
```
*/
.form-select[multiple] {
  height: auto; }
  .form-select[multiple] option {
    padding: 5px; }

/*doc
---
title: Radios and Checkbox
name: 07forms_basics
category: Forms
parent: forms
---

```html_example
<div class="form-field">
    <label class="form-label">Field label</label>
    <input class="form-checkbox" type="checkbox" id="check1">
    <label class="form-label" for="check1">Checkbox 1 label</label>
    <input class="form-checkbox" type="checkbox" id="check2">
    <label class="form-label" for="check2">Checkbox 2 label</label>
</div>
```

```html_example
<div class="form-field">
    <label class="form-label">Field label</label>
    <input class="form-radio" type="radio" name="radio_example" id="radio1">
    <label class="form-label" for="radio1">Radio 1 label</label>
    <input class="form-radio" type="radio" name="radio_example" id="radio2">
    <label class="form-label" for="radio2">Radio 2 label</label>
</div>
```
*/
.form-checkbox,
.form-radio {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .form-checkbox + .form-label,
  .form-radio + .form-label {
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 0.375rem;
    padding-left: 1.875rem;
    position: relative;
    vertical-align: baseline;
    width: 100%; }
    .form-checkbox + .form-label::before, .form-checkbox + .form-label::after,
    .form-radio + .form-label::before,
    .form-radio + .form-label::after {
      content: "";
      display: block;
      position: absolute;
      transition: all 50ms ease-out; }
    .form-checkbox + .form-label::before,
    .form-radio + .form-label::before {
      background-color: #fff;
      border: solid #d9d9d9;
      border-width: 1px;
      box-shadow: none;
      height: 1.23077rem;
      left: 0;
      top: 0;
      width: 1.23077rem; }
    .form-checkbox + .form-label::after,
    .form-radio + .form-label::after {
      height: 0.92308rem;
      left: 2px;
      opacity: 0;
      top: 2px;
      transform: scale(0);
      width: 0.92308rem; }

.form-checkbox:checked + .form-label::after,
.form-radio:checked + .form-label::after {
  opacity: 1;
  transform: scale(1); }

.form-checkbox:focus + .form-label::before,
.form-radio:focus + .form-label::before {
  border-color: #4496f6;
  box-shadow: 0 0 3px rgba(68, 150, 246, 0.4); }

.form-checkbox[disabled] + .form-label,
.form-radio[disabled] + .form-label {
  cursor: default; }
  .form-checkbox[disabled] + .form-label::before,
  .form-radio[disabled] + .form-label::before {
    background-color: #f5f5f5; }
  .form-checkbox[disabled] + .form-label::after,
  .form-radio[disabled] + .form-label::after {
    opacity: 0.4; }

.form-checkbox + .form-label::before {
  border-radius: 4px; }

.form-checkbox + .form-label::after {
  background-image: url("data:image/svg+xml;utf8, %3Csvg%20width%3D%2212%22%20height%3D%2211%22%20viewBox%3D%220%200%2012%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3Cfilter%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%20filterUnits%3D%22objectBoundingBox%22%20id%3D%22a%22%3E%3CfeOffset%20dy%3D%221%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetOuter1%22%2F%3E%3CfeGaussianBlur%20in%3D%22shadowOffsetOuter1%22%20result%3D%22shadowBlurOuter1%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%200.137254902%200%200%200%200%200.505882353%200%200%200%200%200.870588235%200%200%200%200.7%200%22%20in%3D%22shadowBlurOuter1%22%20result%3D%22shadowMatrixOuter1%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22shadowMatrixOuter1%22%2F%3E%3CfeMergeNode%20in%3D%22SourceGraphic%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M612.138%202935.716c-1.964%202.295-3.942%204.556-5.92%206.833-.098.115-.194.215-.29.33-.146.168-.42.15-.564%200-.998-.98-1.996-1.977-2.993-2.958-.37-.366.194-.965.564-.582.9.88%201.786%201.762%202.687%202.66%201.997-2.294%203.975-4.57%205.955-6.866.353-.4.916.183.563.582z%22%20transform%3D%22translate(-601%20-2934)%22%20stroke%3D%22%23FFF%22%20filter%3D%22url(%23a)%22%20stroke-width%3D%22.3%22%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100%;
  color: #4496f6;
  content: "";
  font-size: 0.92308rem;
  line-height: 1;
  text-align: center; }

.form-radio + .form-label::before {
  border-radius: 1.23077rem; }

.form-radio + .form-label::after {
  background: #fff;
  border: 3px solid #4496f6;
  border-radius: 0.92308rem; }

/*doc
---
title: Inputs with Extras
name: 08forms_inputextras
category: Forms
parent: forms
---

Sometimes inputs need inline actions. An inline button for a search box for example.

```html_example
<div class="form-field">
    <label class="form-label" for="input9">Input with action</label>
    <input class="form-input has-action" type="search" id="input9">
    <button class="button button--icon button--inputAction">
        <span class="u-hiddenVisually">Search</span>
        <icon glyph="ic-search" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></icon>
    </button>
</div>
```
*/
.form-input.has-action, .has-action.widget--stripev3 {
  float: left;
  padding-right: 2.84615rem; }
  .form-input.has-action + .button--inputAction, .has-action.widget--stripev3 + .button--inputAction {
    background: transparent;
    border: 0;
    border-radius: 0 4px 4px 0;
    float: left;
    height: 2.84615rem;
    margin: 0.07692rem 0 0 -2.92308rem;
    width: 2.84615rem; }

/*doc
---
title: Inputs with Icons
name: 09forms_inputicons
category: Forms
parent: forms
---

Sometimes inputs need to display an informative icon to convey a certain meaning, like secure.

```html_example
<div class="form-field">
    <label class="form-label" for="input99">Input with icon</label>
    <input class="form-input has-icon" type="search" id="input9">
    <icon glyph="ic-lock" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"></path></svg></icon>
</div>
```
*/
.form-input.has-icon, .has-icon.widget--stripev3 {
  float: left;
  padding-right: 2.15385rem; }
  .form-input.has-icon + .icon, .has-icon.widget--stripev3 + .icon {
    height: 3.45rem;
    margin-left: -2.15385rem;
    width: 1.53846rem; }

/*doc
---
title: Form PrefixPostfix
name: 10forms_prefixpostfix
category: Forms
parent: forms
---

PrefixPostfix

```html_example
<div class="form-field">
    <label class="form-label" for="input4">Prefixed Label <small>(Inc. tax)</small></label>
    <div class="form-prefixPostfix">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">AUD $</span>
        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input5">Postfixed Label</label>
    <div class="form-prefixPostfix">
        <input class="form-input form-prefixPostfix-input" id="input5" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc2">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--postfix" id="prefixDesc2">KG</span>
    </div>
</div>
```

### PrefixPostfix with a button

```html_example
<div class="form-field">
    <label class="form-label" for="input6">Prefixed Button</label>
    <div class="form-prefixPostfix">
        <input class="button form-prefixPostfix-button--prefix" type="submit" value="Save">
        <input class="form-input" id="input6" type="text" placeholder="Placeholder text">
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input7">Postfixed Button</label>
    <div class="form-prefixPostfix">
        <input class="form-input" id="input7" type="text" placeholder="Placeholder text">
        <input class="button form-prefixPostfix-button--postfix" type="submit" value="Save">
    </div>
</div>
```
*/
.form-prefixPostfix {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; }
  .form-prefixPostfix .form-input, .form-prefixPostfix .widget--stripev3 {
    flex: 1; }
  .form-prefixPostfix .button {
    height: 3.45rem; }

.form-prefixPostfix-input {
  border-radius: 4px 0 0 4px; }

.form-prefixPostfix-label {
  background-color: #fff;
  border: solid #d9d9d9;
  border-width: 1px;
  flex: 1;
  font-weight: 300;
  height: 3.45rem;
  line-height: normal;
  max-width: 6.92308rem;
  padding: 0.75rem 1.5rem;
  text-align: center; }

.form-prefixPostfix-label--prefix {
  border-radius: 4px 0 0 4px;
  border-width: 1px 0 1px 1px; }
  .form-prefixPostfix-label--prefix + .form-input, .form-prefixPostfix-label--prefix + .widget--stripev3 {
    border-radius: 0 4px 4px 0; }

.form-prefixPostfix-label--postfix {
  border-radius: 0 4px 4px 0;
  border-width: 1px 1px 1px 0; }

.form-prefixPostfix-button--prefix {
  margin: 0 0.75rem 0 0; }

.form-prefixPostfix-button--postfix {
  margin: 0 0 0 0.75rem; }

/*doc
---
title: Form Switch
name: 11forms_switch
category: Forms
parent: forms
---

Switch

```html_example
<div class="form-field">
    <switch>
        <div class="switch">
            <input class="switch-checkbox" type="checkbox" id="switch-1" aria-describedby="switch-ariaDescription-2">
            <label class="switch-toggle" for="switch-1">
            </label>
            <span id="switch-ariaDescription-2" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--checked">
            <input class="switch-checkbox" type="checkbox" id="switch-1" aria-describedby="switch-ariaDescription-2">
            <label class="switch-toggle" for="switch-1">
            </label>
            <span id="switch-ariaDescription-2" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--checked">
            <input class="switch-checkbox" type="checkbox" id="switch-3" aria-describedby="switch-ariaDescription-4">
            <label class="switch-toggle" for="switch-3">
                <span class="switch-label">On</span>
            </label>
            <span id="switch-ariaDescription-4" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch">
            <input class="switch-checkbox" type="checkbox" id="switch-3" aria-describedby="switch-ariaDescription-4">
            <label class="switch-toggle" for="switch-3">
                <span class="switch-label">Off</span>
            </label>
            <span id="switch-ariaDescription-4" class="switch-ariaDescription">
                Switching this setting off will...
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--important">
            <span class="switch-description--off">Down for Maintenance</span>
            <input class="switch-checkbox" type="checkbox" id="switch-7" aria-describedby="switch-ariaDescription-8">
            <label class="switch-toggle" for="switch-7">
            </label>
            <span class="switch-description--on">Open</span>
            <span id="switch-ariaDescription-8" class="switch-ariaDescription">
                Switching this setting to off will enter your store into maintenance mode.
            </span>
        </div>
    </switch>
</div>

<div class="form-field">
    <switch>
        <div class="switch switch--important switch--checked">
            <span class="switch-description--off">Down for Maintenance</span>
            <input class="switch-checkbox" type="checkbox" id="switch-7" aria-describedby="switch-ariaDescription-8">
            <label class="switch-toggle" for="switch-7">
            </label>
            <span class="switch-description--on">Open</span>
            <span id="switch-ariaDescription-8" class="switch-ariaDescription">
                Switching this setting to off will enter your store into maintenance mode.
            </span>
        </div>
    </switch>
</div>
```
*/
.switch-checkbox {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .switch-checkbox:focus + .switch-toggle {
    border-color: #333;
    box-shadow: 0 0 4px rgba(51, 51, 51, 0.4); }

.switch-toggle {
  background-color: #d9d9d9;
  border: 1px solid #d9d9d9;
  border-radius: 2.15385rem;
  cursor: pointer;
  display: inline-block;
  height: 2.15385rem;
  position: relative;
  transition: all 100ms ease-out;
  vertical-align: middle;
  width: 4.61538rem; }
  .switch--important .switch-toggle {
    background-color: #d1a162;
    border-color: #d1a162; }
  .switch--checked .switch-toggle {
    background-color: #51a551;
    border-color: #51a551; }
  .switch--disabled .switch-toggle {
    background-color: #fafafa;
    border-color: #ebebeb;
    cursor: default; }

.switch-toggle::before {
  background: #fff;
  border-radius: 1.53849rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  content: "";
  height: 1.53849rem;
  left: 0.23075rem;
  position: absolute;
  top: 0.23075rem;
  transition: all 100ms ease-out;
  width: 1.53849rem; }
  .switch--checked .switch-toggle::before {
    left: 2.69229rem; }

.switch-label {
  color: #fff;
  height: 26px;
  line-height: 2.07692;
  position: absolute;
  right: 0.46154rem;
  text-transform: uppercase;
  transition: all 100ms ease-out; }
  .switch--checked .switch-label {
    font-weight: 600;
    left: 0.46154rem;
    right: auto; }
  .switch--disabled .switch-label {
    color: #d9d9d9; }

.switch-label--icon.icon {
  height: 2rem;
  width: 2rem; }
  .switch-label--icon.icon svg {
    height: 2rem;
    width: 2rem;
    fill: #fff; }
    .switch--disabled .switch-label--icon.icon svg {
      fill: #d9d9d9; }

.switch-description--off {
  color: #292929;
  margin-right: 5px; }
  .switch--checked .switch-description--off {
    color: #d9d9d9; }

.switch-description--on {
  color: #d9d9d9;
  margin-left: 5px; }
  .switch--checked .switch-description--on {
    color: #292929; }

.switch-ariaDescription {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*doc
---
title: Form Actions
name: 14forms_actions
category: Forms
parent: forms
---

Forms require actions to submit or cancel (or what ever action a user should perform).
Form actions come in 2 flavours; normal and fixed.

```html_example
<div class="form-actions">
    <a href="#">Cancel</a>
    <button class="button">Reset</button>
    <button class="button button--primary">Submit</button>
</div>
```

### Form Actions --fixed

```html_example
<div class="form-actions form-actions--fixed">
    <a href="#">Cancel</a>
    <button class="button">Reset</button>
    <button class="button button--primary">Submit</button>
</div>
```
*/
.form-actions {
  background: none;
  border: 0;
  padding: 1.5rem 0 0;
  text-align: center; }
  @media (min-width: 481px) {
    .form-actions {
      text-align: left; } }

.form-actions > * {
  display: inline-block;
  margin-bottom: 1rem;
  width: 100%; }
  @media (min-width: 481px) {
    .form-actions > * {
      margin: 0 0 0 0.75rem;
      vertical-align: baseline;
      width: auto; } }

@media (min-width: 481px) {
  .form-actions--fixed {
    background: #fff;
    border-top: 1px solid #d9d9d9;
    bottom: 0;
    left: 0;
    padding: 1.5rem 3rem;
    position: fixed;
    right: 0;
    text-align: right;
    z-index: 20; } }

/*doc
---
title: Form Errors
name: 12forms_errors
category: Forms
parent: forms
---

Form inline errors

```html_example
<div class="form-field form-field--success">
    <label class="form-label" for="valid_simple">Valid field</label>
    <input class="form-input" id="valid_simple" type="text" value="Some Valid text">
    <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-check-circle" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg></icon>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_simple">Invalid field</label>
    <input class="form-input" id="invalid_simple" type="text" value="Some Invalid text">
    <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-error" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_simple">
                This is not a valid email address
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--warning">
    <label class="form-label" for="warning_simple">Warning field</label>
    <input class="form-input" id="warning_simple" type="text" value="Text that generated a Warning">
    <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-error" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="warning_simple">
                Did you mean…
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_select">Select label</label>
    <select class="form-select" name="invalid_select" id="invalid_select">
        <option value="Please select a value">Please select a value</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_select">
                You must select a value
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label">Checkbox label</label>
    <input class="form-checkbox" type="checkbox" id="invalid_check1">
    <label class="form-label" for="invalid_check1">Checkbox 1 label</label>
    <input class="form-checkbox" type="checkbox" id="invalid_check2">
    <label class="form-label" for="invalid_check2">Checkbox 2 label</label>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage">
                Please select one or more
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label">Radio label</label>
    <input class="form-radio" type="radio" name="invalid_radio_example" id="invalid_radio1">
    <label class="form-label" for="invalid_radio1">Radio 1 label</label>
    <input class="form-radio" type="radio" name="invalid_radio_example" id="invalid_radio2">
    <label class="form-label" for="invalid_radio2">Radio 2 label</label>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage">
                Please select an option
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_prefix">Prefixed Label <small>(Inc. tax)</small></label>
    <div class="form-prefixPostfix">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">AUD $</span>
        <input class="form-input form-prefixPostfix-input" id="invalid_prefix" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
        <icon class="form-input-indicator icon ng-isolate-scope" glyph="ic-error" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
    </div>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_prefix">
                Please input a dollar amount
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_postfix">Postfixed Label</label>
    <div class="form-prefixPostfix">
        <input class="form-input form-prefixPostfix-input" id="invalid_postfix" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc2">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--postfix" id="prefixDesc2">KG</span>
    </div>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix">
                Please enter the weight in kilograms
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_postfix_button">Postfixed Button</label>
    <div class="form-prefixPostfix">
        <input class="form-input" id="invalid_postfix_button" type="text" placeholder="Placeholder text">
        <input class="button form-prefixPostfix-button--postfix" type="submit" value="Save">
    </div>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix_button">
                This is a really long error message to give alot
                more detail to the user about what is wrong with this field.
            </label>
        </li>
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix_button">
                Something else was wrong
            </label>
        </li>
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_postfix_button">
                You really messed up here
            </label>
        </li>
    </ul>
</div>
```
*/
.form-input-indicator {
  height: 1.69231rem;
  width: 1.69231rem;
  float: left;
  margin: 0 0 0 -2.30769rem;
  position: relative;
  top: 0.76923rem; }
  .form-prefixPostfix .form-input-indicator {
    top: 0; }
  .form-input-indicator > svg {
    fill: #51a551; }

.form-field-errors {
  list-style: none;
  margin-left: 0;
  margin-left: 0;
  clear: both;
  margin-bottom: 0;
  margin-top: 0.1875rem; }
  .form-field-errors ul,
  .form-field-errors ol {
    list-style: none;
    margin-bottom: 0; }

.form-inlineMessage {
  display: inline-block;
  font-weight: 400;
  line-height: 1.25;
  margin: 0.1875rem 0 0;
  width: 100%; }

.form-field--success .form-input, .form-field--success .widget--stripev3,
.form-field--error .form-input,
.form-field--error .widget--stripev3,
.form-field--warning .form-input,
.form-field--warning .widget--stripev3 {
  float: left; }

.form-field--success .form-input, .form-field--success .widget--stripev3,
.form-field--success .form-select,
.form-field--success .form-checkbox + .form-label::before,
.form-field--success .form-radio + .form-label::before,
.form-field--success .form-prefixPostfix-label {
  border-color: #51a551; }

.form-field--success .form-field-error,
.form-field--success .form-inlineMessage {
  color: #51a551; }

.form-field--success .form-input-indicator > svg {
  fill: #51a551; }


.form-field--error .form-input,
.form-field--error .widget--stripev3,
.form-field--error .form-select,
.form-field--error .form-checkbox + .form-label::before,
.form-field--error .form-radio + .form-label::before,
.form-field--error .form-prefixPostfix-label {
  border-color: #ed6a6a; }

.form-field--error .form-field-error,
.form-field--error .form-inlineMessage {
  color: #ed6a6a; }

.form-field--error .form-input-indicator > svg {
  fill: #ed6a6a; }


.form-field--warning .form-input,
.form-field--warning .widget--stripev3,
.form-field--warning .form-select,
.form-field--warning .form-checkbox + .form-label::before,
.form-field--warning .form-radio + .form-label::before,
.form-field--warning .form-prefixPostfix-label {
  border-color: #d1a162; }

.form-field--warning .form-field-error,
.form-field--warning .form-inlineMessage {
  color: #d1a162; }

.form-field--warning .form-input-indicator > svg {
  fill: #d1a162; }

.form-ccFields {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 -1.15385rem;
  padding: 0; }
  .form-ccFields > .form-field {
    max-width: none;
    padding: 0 1.15385rem; }

.form-field--ccNumber {
  order: 1; }

.form-field--ccExpiry {
  order: 2; }

.form-field--ccName {
  order: 4; }
  @media (min-width: 551px) {
    .form-field--ccName {
      order: 3; } }

.form-field--ccCvv {
  order: 3; }
  @media (min-width: 551px) {
    .form-field--ccCvv {
      order: 4; } }

.form-field--ccNumber,
.form-field--ccName {
  flex: 100%; }
  @media (min-width: 551px) {
    .form-field--ccNumber,
    .form-field--ccName {
      flex: 0.65 0 65%; } }
  @media (min-width: 801px) {
    .form-field--ccNumber,
    .form-field--ccName {
      flex: 0.75 0 75%; } }

.form-field--ccExpiry,
.form-field--ccCvv {
  flex: 0.5; }
  @media (min-width: 551px) {
    .form-field--ccExpiry,
    .form-field--ccCvv {
      flex: 0.35 0 35%;
      max-width: 13.84615rem !important; } }
  @media (min-width: 801px) {
    .form-field--ccExpiry,
    .form-field--ccCvv {
      flex: 0.25 0 25%; } }

.form-ccFields-cvvExample {
  display: flex; }

.form-ccFields-cvvExampleDescription {
  flex: 2 auto;
  margin-right: 0.75rem; }
  .form-ccFields-cvvExampleDescription p {
    font-size: 0.84615rem;
    margin: 0; }

.form-ccFields-cvvExampleFigures {
  flex: 1 auto; }
  .form-ccFields-cvvExampleFigures figure {
    margin-bottom: 0.75rem; }
  .form-ccFields-cvvExampleFigures icon {
    height: auto; }

/*doc
---
title: Media Object
name: media
category: Components
---

The media object, as per OOCSS methodology. Taken straight from the OOCSS repo.
(https://github.com/stubbornella/oocss/blob/master/oocss/src/settings/media/_media.scss)
This also allows the "media table" variation, which allows you to specify
columns in the media object, and align the contents accordingly.
This is similar to Harry Roberts's "Flag object". (http://csswizardry.com/2013/05/the-flag-object/)

This mixin, like the nav mixin, is created by bending our style guides rules.
To achieve both total control, and the freedom of appending your own
class name prefix to the elements, the '&' selector has been used heavily.

1. $style arguments: "default" or "table"
2. To avoid generating the default media object styles for descendants if we
don't have to, we check for the default operator first.
3. The "table" style just sets the parent to display as table, and its children
to table-cells, if they have the "-column" descendant class.

```sass_file_example
src/settings/bigcommerce/media/_settings.scss
```

To create a media object, you can use the following mixin:

```scss_example
.media {
    @include media;
}
```

```html_example
<div class="media">
    <div class="media-figure">
        <img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=150%C3%97150&w=150&h=150"/>
    </div>
    <div class="media-body">
        <h5>Media header</h5>
        <p>Media body</p>
    </div>
</div>
```
*/
.media:before, .media:after {
  content: " ";
  display: table; }

.media:after {
  clear: both; }

.media-figure {
  float: left;
  margin-right: 0.75rem; }
  .media-figure > img {
    display: block; }

.media-figure--opposite {
  float: right;
  margin-left: 0.75rem;
  margin-right: 0; }

.media-body:before, .media-body:after {
  content: " ";
  display: table; }

.media-body:after {
  clear: both; }

/*doc
---
title: Media Table Object
name: mediaTable
parent: media
category: Components
---

To create a media table, you can use the same mixin with the "table" parameter:

```scss_example
.media {
    @include media("table");
}
```

```html_example
<div class="mediaTable">
    <div class="mediaTable-column mediaTable-figure">
        <img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=150%C3%97150&w=150&h=150"/>
    </div>
    <div class="mediaTable-column mediaTable-body">
        <h5>Media header</h5>
        <p>Media body</p>
    </div>
    <div class="mediaTable-column mediaTable-actions">
        <button class="button">Go!</button>
    </div>
</div>
```
*/
.mediaTable {
  display: table;
  padding: 1.5rem; }
  .mediaTable:before, .mediaTable:after {
    content: " ";
    display: table; }
  .mediaTable:after {
    clear: both; }
  .mediaTable-column {
    display: table-cell;
    padding-right: 1.5rem;
    vertical-align: middle; }
    .mediaTable-column:last-child {
      padding: 0; }
  .mediaTable-figure {
    text-align: center;
    vertical-align: middle;
    width: 15%; }
  .mediaTable-body {
    vertical-align: middle; }
  .mediaTable-actions {
    text-align: right;
    vertical-align: top;
    width: 30%; }

/*doc
---
title: Alerts
name: alerts
category: Components
---

Alerts can be used to inform users about the actions they perform, whether it's a successful message, a warning, error, or just information.
They can be displayed at a page level or inside a specific container. They will take the full width of their containers.

```sass_file_example
src/settings/foundation/alerts/_settings.scss
```

The alert box consists of three `alertBox-column`s: The `alertBox-icon` which contains the icon for the type of alert,
the `alertBox-message` which can contain the heading and text for the alert message, and `alertBox-close` which holds the close button.
You can set the vertical alignment of the columns in the setting variables.

```html_example
<div class="alertBox">
    <div class="alertBox-column alertBox-icon">
        <icon class="icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
            </svg>
        </icon>
    </div>
    <div class="alertBox-column alertBox-message">
        <span>Generic alert</span>
    </div>
    <a class="alertBox-column alertBox-close" tabindex="0" href="#">
        <icon glyph="ic-close" class="icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
            </svg>
        </icon>
    </a>
</div>
```
*/
.alertBox {
  border-style: none;
  border-width: 1px;
  display: block;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
  padding: 1rem 1.5rem 1rem 1.5rem;
  position: relative;
  transition: opacity 300ms ease-out;
  background-color: #ebebeb;
  border-color: #ebebeb;
  color: #333; }
  .alertBox .icon {
    height: 1.53846rem;
    width: 1.53846rem; }
  .alertBox .button {
    margin: 0 0 0 0.75rem; }

.alertBox--info {
  background-color: #f5f5f5;
  border-color: whitesmoke;
  color: #333; }
  .alertBox--info svg {
    fill: #5f5f5f; }

.alertBox--success {
  background-color: #dfefdc;
  border-color: #dfefdc;
  color: #333; }
  .alertBox--success svg {
    fill: #51a551; }

.alertBox--warning {
  background-color: #fbf7ee;
  border-color: #fbf7ee;
  color: #333; }
  .alertBox--warning svg {
    fill: #d1a162; }

.alertBox--error {
  background-color: #fbeeee;
  border-color: #fbeeee;
  color: #333; }
  .alertBox--error svg {
    fill: #ed6a6a; }

.alertBox-column {
  display: table-cell;
  text-align: center;
  vertical-align: middle; }

.alertBox-icon {
  padding-right: 1.5rem; }

.alertBox-message {
  margin: 0;
  text-align: left;
  width: 100%; }

.alertBox-heading {
  margin: 0; }

.alertBox-close {
  cursor: pointer;
  padding-left: 1.5rem; }
  .alertBox-close .icon {
    height: 1.53846rem;
    width: 1.53846rem; }
  .alertBox-close svg {
    fill: #999; }

/*doc
---
title: Accordion
name: accordion
category: Components
---
```html_example
<section class="accordion">
    <article heading="Dynamic Group Header - 1" class="is-open">
        <h2 class="accordion-navigation is-open">
            <a href="javascript:void(0)" class="accordion-title">
                Dynamic Group Header - 1
                <icon class="accordion-indicator icon" glyph="ic-remove" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg></icon>
            </a>
        </h2>
        <div class="accordion-content is-open">
            Dynamic Group Body - 1
        </div>
    </article>
    <article heading="Dynamic Group Header - 2">
        <h2 class="accordion-navigation">
            <a href="javascript:void(0)" class="accordion-title">
                Dynamic Group Header - 2
                <icon class="accordion-indicator icon" glyph="ic-remove" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg></icon>
            </a>
        </h2>
    </article>
<article heading="Dynamic Group Header - 3">
        <h2 class="accordion-navigation accordion-navigation--error">
            <a href="javascript:void(0)" class="accordion-title">
                Dynamic Group Header - 3
                <icon class="accordion-indicator icon" glyph="ic-remove" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 13H5v-2h14v2z"></path></svg></icon>
            </a>
        </h2>
    </article>
</section>
```

```sass_file_example
src/settings/foundation/accordion/_settings.scss
```
*/
.tooltip {
  border-radius: 2px; }

body.has-activeModal {
  overflow: hidden; }

.modal-background {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1004;
  left: 0; }
  .has-activeModal .modal-background {
    display: block; }

.modal {
  border-radius: 0;
  display: none;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%;
  z-index: 1005;
  left: 0;
  background-color: #fff;
  padding: 0;
  border: solid 1px #d9d9d9;
  box-shadow: 0 0 12px rgba(153, 153, 153, 0.4);
  max-height: 80%;
  overflow: auto;
  position: fixed; }
  @media only screen and (max-width: 551px) {
    .modal {
      min-height: 100vh; } }
  .modal .column, .modal .columns {
    min-width: 0; }
  .modal > :first-child {
    margin-top: 0; }
  .modal > :last-child {
    margin-bottom: 0; }
  @media only screen and (min-width: 551px) {
    .modal {
      left: 0;
      margin: 0 auto;
      max-width: 80%;
      right: 0;
      width: 680px; } }
  @media only screen and (min-width: 551px) {
    .modal {
      top: 50%; } }
  @media (min-width: 551px) {
    .modal {
      transform: translateY(-50%); } }

.modal--large {
  max-height: 90%;
  width: 900px; }

.modal--small {
  width: 300px; }

.modal-header {
  border-bottom: 1px solid #ebebeb;
  padding: 1.6875rem 1.875rem;
  position: relative; }

.modal-header-title {
  margin: 0; }

.modal-body {
  padding: 1.6875rem 1.875rem; }
  .modal-body > :last-child {
    margin-bottom: 0; }

.modal-footer {
  border-top: 1px solid #ebebeb;
  padding: 1.6875rem 1.875rem;
  text-align: center; }
  @media (min-width: 481px) {
    .modal-footer {
      text-align: right; } }
  .modal-footer .button {
    display: block; }
    @media (min-width: 481px) {
      .modal-footer .button {
        display: inline-block;
        margin-bottom: 0; } }

.modal-footer-link {
  display: inline-block;
  font-size: 1.15385rem;
  margin: 0 0 0.75rem; }
  @media (min-width: 481px) {
    .modal-footer-link {
      display: inline;
      margin: 1.5rem; } }

.modal-close {
  color: #5f5f5f;
  cursor: pointer;
  font-size: 2.30769rem;
  font-weight: normal;
  line-height: 1;
  position: absolute;
  top: 50%;
  right: 0.9375rem;
  transform: translateY(-50%); }
  .modal-close .icon {
    height: 2.30769rem;
    width: 2.30769rem; }

@media print {
  .modal {
    background: #FFFFFF !important;
    display: none; } }

.loadingNotification {
  left: 50%;
  position: fixed;
  text-align: center;
  top: 6rem;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  transition: all 200ms ease-out;
  z-index: 500; }
  .loadingNotification.ng-hide-remove, .loadingNotification.ng-hide-add-active {
    opacity: 0;
    top: 7.5rem;
    transform: scale(0.9) translateX(-50%); }
  .loadingNotification.ng-hide-remove-active {
    opacity: 1;
    top: 6rem;
    transform: scale(1) translateX(-50%); }

.loadingNotification-label {
  background: #333;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  font-size: 1.15385rem;
  padding: 0.5625rem 1.1875rem; }

.loadingOverlay-container {
  min-height: 0;
  position: relative; }

.loadingOverlay {
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 250ms ease-out;
  width: 100%; }
  .loadingOverlay::before {
    height: 4.61538rem;
    width: 4.61538rem;
    border-radius: 4.61538rem;
    border: solid 1px;
    border-color: #fff #fff #d9d9d9 #d9d9d9;
    content: "";
    display: block;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transform-style: preserve-3d;
    animation: spin 500ms infinite cubic-bezier(0.69, 0.31, 0.56, 0.83); }
  .loadingOverlay.ng-enter, .loadingOverlay.ng-leave.ng-leave-active {
    opacity: 0; }
  .loadingOverlay.ng-leave, .loadingOverlay.ng-enter.ng-enter-active {
    opacity: 1; }

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg); }
  100% {
    transform: translateY(-50%) rotate(360deg); } }

/*doc
---
title: ActionBar
name: action_bar
category: Patterns
---
```html_example
<div class="actionBar">
    <div class="actionBar-section">
        <fieldset class="form-fieldset">
            <div class="actionBar-item form-field">
                <input class="form-input has-action" type="search" placeholder="Search">
                <button class="button button--icon button--inputAction">
                    <span class="is-srOnly">Search</span>
                    <icon glyph="ic-search"></icon>
                </button>
            </div>
            <a href="#" class="actionBar-item">Advanced</a>
        </fieldset>
    </div>
    <div class="actionBar-section actionBar-section--alt">
        <fieldset class="form-fieldset">
            <div class="actionBar-item form-field">
                <div class="buttonGroup">
                    <button class="button">
                        All
                    </button>
                    <button class="button">
                        Free
                    </button>
                    <button class="button">
                        Paid
                    </button>
                </div>
            </div>
            <div class="actionBar-item form-field">
                <label class="form-label" for="select1">Sort by</label>
                <select class="form-select" name="select1" id="select1">
                    <option value="1">Popular</option>
                    <option value="2">Newest</option>
                </select>
            </div>
        </fieldset>
    </div>
</div>
```

```sass_file_example
src/settings/bigcommerce/actionBar/_settings.scss
```
*/
/*doc
---
title: Credit Card Types
name: creditCardTypes
category: Components
---
`credit-card-types` is a pattern-lab component that displays a list of credit card type images, and it adds
a class `.is-active` and `.not-active` to each item depending on what card type is currently selected. No classes
are added until a card type has been selected. By default, the images with `.not-active` are greyed out.

```html_example
<credit-card-types class="creditCardTypes">
    <ul class="creditCardTypes-list">
        <li class="creditCardTypes-list-item not-active">
            <icon class="icon--medium icon">
                <svg width="156" height="104" viewBox="0 0 156 104" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M144 104H12c-6.15 0-12-5.85-12-12V12C0 5.85 5.85 0 12 0h132c6.15 0 12 5.85 12 12v80c0 6.15-5.85 12-12 12z" fill="#60C7EE"></path><g fill="#FFF"><path d="M95.05 46.532v3.68h12.93v4.723H95.05V59.5h12.79l5.244-6.824-4.673-6.144H95.05m-59.707 9.382h5.906l-2.97-8.324-2.94 8.324"></path><path d="M128.833 52.77l11.29-15.125h-19.067l-2.536 3.9-2.608-3.9h-46.59l-1.254 4.224-1.264-4.227H31.27L17.72 68.687h17.326l1.31-3.822h3.824l1.345 3.822h73.594l3.28-4.594 3.28 4.594h19.36l-4.867-6.343-7.342-9.574zM83.185 64.744H76.38v-17.66l-5.243 17.66h-6.16l-5.233-17.66v17.66H44.318l-1.345-3.823H33.54l-1.312 3.826h-8.483L33.85 41.588h9.065L52.94 64.56V41.59h10.927l4.214 14.09 4.187-14.09h10.92v23.156zm40.524 0l-5.31-7.44-5.31 7.44H86.72V41.588h27.085l4.76 7.124 4.63-7.124h9.062l-8.37 11.215 9.16 11.94h-9.338z"></path></g></g></svg>
            </icon>
        </li>
        <li class="creditCardTypes-list-item not-active">
            <icon class="icon--medium icon">
                <svg width="152" height="104" viewBox="0 0 152 104" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="152" height="104" rx="12"></rect></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"></use></mask><use fill="#F4F4F4" xlink:href="#a"></use><rect fill="#F4F4F4" mask="url(#b)" x="1" width="152" height="104" rx="12"></rect><g transform="translate(42 26)"><ellipse fill="#009FDA" cx="26.716" cy="26" rx="26" ry="26"></ellipse><path d="M24.116 0c13 0 25.997 11.643 25.997 26 0 14.355-12.997 26-25.997 26V0z" fill="#009FDA"></path><path d="M24.116 52V0H42.75c13 0 25.997 11.643 25.997 26 0 14.355-12.997 26-25.997 26H24.116z" fill="#009FDA"></path><circle fill="#F3F4F4" cx="25.255" cy="27.139" r="24.539"></circle><path d="M38.255 24.983c0-7.09-6.34-13.02-11.54-14.583v29.167c5.2-1.563 11.54-7.488 11.54-14.584zM5.916 24.986c0 7.09 6.34 13.02 11.54 14.583V10.4c-5.2 1.565-11.54 7.493-11.54 14.586z" fill="#009FDA"></path></g></g></svg>
            </icon>
        </li>
        <li class="creditCardTypes-list-item not-active">
            <icon class="icon--medium icon">
                <svg width="152" height="104" viewBox="0 0 152 104" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><rect id="a" width="152" height="104" rx="12"></rect></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"></use></mask><use fill="#F4F4F4" xlink:href="#a"></use><rect fill="#F4F4F4" mask="url(#b)" x="1" width="152" height="104" rx="12"></rect><path d="M70.553 104H149c2.21 0 4-1.783 4-4.007V46.597C142.305 71.907 111.28 93.04 70.553 104z" fill="#F76E20" mask="url(#b)"></path><g transform="translate(19 42)" mask="url(#b)"><path d="M14.763 9.22c0 2.94-.824 5.19-2.47 6.752-1.652 1.56-4.035 2.344-7.15 2.344H.155V.466H5.68c2.876 0 5.106.772 6.69 2.31C13.97 4.31 14.764 6.46 14.764 9.22zm-3.876.1c0-3.834-1.672-5.75-5.004-5.75h-1.99v11.62h1.602c3.596.002 5.392-1.957 5.392-5.87zM17.51 18.316V.466h3.733v17.85H17.51zM34.774 13.608c0 1.616-.57 2.88-1.718 3.81-1.146.927-2.734 1.397-4.773 1.397-1.874 0-3.54-.36-4.987-1.074v-3.516c1.19.543 2.196.915 3.017 1.14.822.218 1.577.327 2.26.327.815 0 1.446-.16 1.882-.475.43-.313.657-.792.657-1.413 0-.35-.095-.66-.292-.933-.188-.277-.474-.54-.85-.79-.374-.25-1.134-.657-2.28-1.21-1.073-.512-1.877-1.008-2.42-1.477-.542-.47-.967-1.018-1.288-1.65-.32-.63-.48-1.363-.48-2.2 0-1.577.526-2.818 1.582-3.72 1.06-.908 2.514-1.356 4.38-1.356.913 0 1.787.108 2.617.328.83.217 1.702.53 2.607.927l-1.203 2.942c-.94-.39-1.72-.67-2.334-.818-.616-.153-1.22-.232-1.81-.232-.71 0-1.254.164-1.627.502-.38.334-.567.768-.567 1.305 0 .335.076.623.23.875.152.25.395.487.728.72.332.23 1.125.647 2.366 1.25 1.643.8 2.77 1.6 3.384 2.4.613.796.92 1.778.92 2.943zM46.018 3.62c-1.406 0-2.49.54-3.263 1.605C41.98 6.295 41.6 7.79 41.6 9.7c0 3.978 1.473 5.97 4.418 5.97 1.238 0 2.727-.305 4.492-.94v3.175c-1.446.613-3.06.916-4.842.916-2.56 0-4.52-.79-5.875-2.367-1.357-1.572-2.034-3.834-2.034-6.782 0-1.855.335-3.48 1.003-4.874.662-1.402 1.623-2.467 2.87-3.212C42.884.84 44.345.467 46.022.467c1.71 0 3.43.42 5.152 1.258l-1.203 3.077c-.663-.317-1.32-.592-1.99-.83-.67-.238-1.322-.352-1.964-.352zM81.828.467h3.77l-5.98 17.85h-4.07L69.578.466h3.772l3.312 10.62c.182.632.38 1.356.572 2.195.19.836.316 1.408.368 1.737.087-.75.387-2.05.902-3.932L81.828.468zM97.072 18.316h-10.14V.466h10.14V3.57h-6.407v3.92h5.964v3.1h-5.965v4.6h6.407v3.126zM105.128 11.467v6.85h-3.732V.466h5.13c2.39 0 4.158.44 5.31 1.326 1.145.882 1.72 2.22 1.72 4.02 0 1.048-.286 1.987-.853 2.802-.57.82-1.376 1.46-2.418 1.925 2.647 4.007 4.37 6.603 5.175 7.773h-4.142l-4.203-6.85-1.987.004zm0-3.077h1.206c1.177 0 2.05-.2 2.612-.596.558-.402.842-1.03.842-1.883 0-.847-.29-1.445-.862-1.806-.573-.36-1.46-.537-2.664-.537h-1.14l.006 4.823z" fill="#414042"></path><ellipse fill="#F76E20" cx="61.024" cy="9.393" rx="8.802" ry="8.926"></ellipse></g></g></svg>
            </icon>
        </li>
        <li class="creditCardTypes-list-item is-active">
            <icon class="icon--medium icon">
                <svg width="156" height="104" viewBox="0 0 156 104" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M144 104H12c-6.15 0-12-5.85-12-12V12C0 5.85 5.85 0 12 0h132c6.15 0 12 5.85 12 12v80c0 6.15-5.85 12-12 12z" fill="#5473CC"></path><path d="M78.25 36.84C73.475 31.432 66.5 28 58.71 28c-14.39 0-26.06 11.64-26.06 26 0 14.355 11.67 26 26.058 26 7.79 0 14.766-3.432 19.543-8.843-4.04-4.58-6.51-10.57-6.51-17.157 0-6.588 2.47-12.58 6.516-17.16z" fill="#ED4A4A"></path><path d="M78.25 36.84c-4.043 4.58-6.514 10.574-6.514 17.16s2.47 12.576 6.515 17.157c4.05-4.58 6.52-10.57 6.52-17.157 0-6.588-2.47-12.58-6.513-17.16z" fill="#EA564B"></path><path d="M97.793 28c-7.79 0-14.766 3.432-19.542 8.84-1.123 1.28-2.11 2.678-2.98 4.16h5.96c.95 1.625 1.69 3.377 2.27 5.2H72.97c-.53 1.672-.912 3.403-1.092 5.2H84.59c.09.858.176 1.716.176 2.6 0 .88-.052 1.745-.138 2.6H71.87c.18 1.797.562 3.528 1.09 5.2h10.57c-.58 1.83-1.36 3.567-2.31 5.2h-5.953c.863 1.477 1.853 2.878 2.98 4.157C83.025 76.567 90 80 97.79 80c14.39 0 26.057-11.645 26.057-26 .003-14.36-11.665-26-26.054-26z" fill="#FFAF38"></path></g></svg>
            </icon>
        </li>
        <li class="creditCardTypes-list-item not-active">
            <icon class="icon--medium icon">
                <svg width="148" height="100" viewBox="0 0 148 100" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M148 84c0 6.6-5.55 12-12 12H12C5.55 96 0 90.6 0 84V12C0 5.4 5.55 0 12 0h124c6.45 0 12 5.4 12 12v72z" fill="#F3F4F4"></path><path d="M0 24V12C0 5.4 5.74 0 12 0h124c6.26 0 12 5.4 12 12v12" fill="#01579F"></path><path d="M148 76v12c0 8.667-5.74 12-12 12H12c-6.26 0-12-3.333-12-12V76" fill="#FAA41D"></path><path d="M55.01 65.267l4.72-29.186h7.546l-4.72 29.19H55.01M89.913 36.8c-1.49-.59-3.85-1.242-6.77-1.242-7.452 0-12.7 3.974-12.73 9.656-.063 4.19 3.756 6.52 6.613 7.918 2.92 1.428 3.913 2.36 3.913 3.633-.04 1.957-2.36 2.857-4.54 2.857-3.014 0-4.628-.465-7.08-1.552l-.996-.466-1.055 6.55c1.77.808 5.03 1.52 8.415 1.553 7.92 0 13.075-3.912 13.137-9.967.03-3.322-1.987-5.868-6.334-7.948-2.64-1.336-4.256-2.236-4.256-3.602.032-1.242 1.367-2.514 4.348-2.514 2.453-.06 4.254.53 5.62 1.12l.684.31L89.91 36.8m10.03 18.13c.62-1.675 3.013-8.165 3.013-8.165-.03.062.62-1.707.994-2.794l.525 2.52s1.428 6.986 1.74 8.445H99.94zm9.317-18.846h-5.84c-1.8 0-3.17.53-3.945 2.424L88.265 65.27h7.918s1.305-3.6 1.585-4.377h9.687c.217 1.024.9 4.377.9 4.377h6.987l-6.082-29.19zm-60.555 0l-7.39 19.904-.807-4.037c-1.37-4.652-5.653-9.713-10.435-12.23l6.77 25.52h7.98L56.68 36.09H48.7" fill="#3B5CAA"></path><path d="M34.454 36.08H22.312l-.124.59c9.47 2.423 15.744 8.26 18.32 15.277L37.87 38.534c-.436-1.863-1.77-2.39-3.416-2.453" fill="#F8A51D"></path></g></svg>
            </icon>
        </li>
    </ul>
</credit-card-types>
```

```sass_file_example
src/settings/bigcommerce/credit-card-types/_settings.scss
```
*/
.creditCardTypes {
  display: inline-block; }

.creditCardTypes-list {
  list-style: none;
  margin-left: 0; }
  .creditCardTypes-list ul,
  .creditCardTypes-list ol {
    list-style: none;
    margin-bottom: 0; }

.creditCardTypes-list-item {
  display: inline-block;
  margin: 0.1875rem; }
  .creditCardTypes-list-item.is-active {
    opacity: 1; }
  .creditCardTypes-list-item.not-active {
    opacity: 0.2; }

html,
body {
  height: auto; }
  @media (min-width: 968px) {
    html,
    body {
      scroll-behavior: smooth; } }

h1 {
  font-size: 2.76923rem; }

h2 {
  font-size: 1.92308rem; }

h3 {
  font-size: 1.15385rem;
  font-weight: 700; }

h4 {
  font-size: 1.38462rem; }

h5 {
  font-size: 1rem;
  font-weight: 600; }

h6 {
  font-size: 1rem; }

h1 a,
h1 a:hover,
h2 a,
h2 a:hover,
h3 a,
h3 a:hover,
h4 a,
h4 a:hover,
h5 a,
h5 a:hover,
h6 a,
h6 a:hover {
  color: currentcolor; }

.button {
  text-transform: uppercase;
  transition: all 100ms ease-out; }
  .button:focus {
    border-color: #4496f6;
    box-shadow: 0 0 3px 1px rgba(68, 150, 246, 0.6); }
  .button.is-loading {
    color: #fff; }
    .button.is-loading.button--primary {
      color: #333; }
    .button.is-loading[disabled] {
      color: #ebebeb; }
    .button.is-loading::before {
      height: 4.61538rem;
      width: 4.61538rem;
      border-radius: 4.61538rem;
      border: solid 1px;
      border-color: #fff #fff #d9d9d9 #d9d9d9;
      content: "";
      display: block;
      left: 0;
      margin: 0 auto;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%) rotate(0deg);
      transform-style: preserve-3d;
      height: 2.30769rem;
      width: 2.30769rem;
      animation: spin 500ms infinite cubic-bezier(0.69, 0.31, 0.56, 0.83);
      border-color: #fff #fff #999 #999; }

.button--primary,
.button--action {
  font-weight: 600; }

.button--small,
.button--tiny {
  text-transform: none; }

.button--small {
  line-height: 1; }

.button--slab {
  width: 100%; }

@media (min-width: 968px) {
  .form {
    max-width: 41.53846rem; } }

.form-fieldset {
  margin-bottom: 1.5rem; }
  .form-fieldset:last-child {
    margin-bottom: 0; }

.form-field {
  position: relative; }
  .form-field:last-child {
    margin-bottom: 0; }

.form-input:focus, .widget--stripev3:focus, .form-input--focus {
  box-shadow: 0 0 3px rgba(68, 150, 246, 0.4), inset 0 1px 1px #ebebeb; }

.form-input.form-input--withIcon, .form-input--withIcon.widget--stripev3 {
  padding-right: 2.88462rem; }

.form-input-icon {
  height: 1.38462rem;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.38462rem; }

.form-actions {
  margin: 2.25rem 0;
  padding: 0; }
  .form-actions .button:first-child {
    margin-left: 0; }

.form-body {
  background-color: transparent;
  margin: 0;
  position: relative; }


.form-field--error .form-input,
.form-field--error .widget--stripev3,
.form-field--error .form-select {
  background-color: #fffafa;
  transition: background-color 0.8s ease-out; }

.form-field--error .form-label {
  color: #ed6a6a; }

.form-input--error {
  border-color: #ed6a6a;
  box-shadow: 0 0 3px rgba(237, 106, 106, 0.6); }

.form-legend-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.form-legend {
  font-size: 1.15385rem;
  font-weight: 700;
  background-color: transparent;
  color: #292929;
  font-weight: 700;
  padding: 0.75rem 0;
  width: auto; }

.form-toggle {
  background-color: transparent;
  color: #292929;
  font-weight: 700; }

@media (min-width: 968px) {
  .form-toggle-password {
    display: none; } }

.form-field-password {
  position: relative; }

.form-select {
  -webkit-appearance: menulist !important;
  background-image: none;
  border-radius: 4px;
  padding: 0.75rem 1.5rem 0.75rem 1rem; }

.alertBox-heading {
  font-size: 1.15385rem;
  font-weight: 700; }

.alertBox--error {
  color: #ed6a6a; }

.alertBox--success {
  color: #51a551; }

.alertBox--warning {
  color: #d1a162; }

.modal-background {
  opacity: 0;
  transition: opacity 400ms ease-out; }
  .modal-background.is-active, .modal-background.modal--afterOpen {
    opacity: 1; }

.modal {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(153, 153, 153, 0.4);
  opacity: 0;
  outline: none;
  transition: opacity 200ms ease-out, transform 200ms ease-out; }
  @media (min-width: 551px) {
    .modal {
      transform: scale(0.95) translateY(-50%); } }
  .modal .form-actions {
    text-align: right; }
  .modal.is-active, .modal.modal--afterOpen {
    bottom: 2%;
    left: 2%;
    max-width: 96%;
    min-height: 96vh;
    opacity: 1;
    right: 2%;
    top: 2%; }
    @media (min-width: 551px) {
      .modal.is-active, .modal.modal--afterOpen {
        bottom: auto;
        left: 0;
        max-width: 80%;
        min-height: 0;
        right: 0;
        top: 50%;
        transform: scale(1) translateY(-50%); } }
  @media (min-width: 551px) {
    .modal.modal--medium {
      max-width: 500px; } }
  .modal.modal--error {
    padding-bottom: 0.75rem;
    padding-left: 3.75rem;
    padding-right: 3rem;
    padding-top: 1.5rem; }
    .modal.modal--error .modal-body {
      padding-bottom: 0.75rem;
      padding-top: 0; }
    .modal.modal--error .modal-header-title {
      position: relative; }
    .modal.modal--error .modal-header-icon {
      left: -3rem;
      position: absolute;
      top: 50%;
      transform: translateY(-50%); }
  .modal.modal--bluesnapv2 {
    width: auto; }

.modal-header {
  border-bottom: 0; }

.modal-header-title {
  font-size: 1.38462rem; }

.modal-body .modal-footer {
  padding-left: 0;
  padding-right: 0; }

.modal-footer {
  border-top: 0; }
  .modal-footer .button {
    margin-bottom: 0.75rem;
    margin-left: 0;
    width: 100%; }
    .modal-footer .button:last-child {
      margin-bottom: 0; }
    @media (min-width: 551px) {
      .modal-footer .button {
        margin-bottom: 0;
        margin-left: 0.75rem;
        width: auto; } }

.modal-body--center {
  display: flex;
  justify-content: center; }

.modalOverlay {
  background: rgba(255, 255, 255, 0.9);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 200ms ease-out;
  z-index: 500; }

.modalOverlay--afterOpen {
  opacity: 1; }

.modalOverlay--beforeClose {
  opacity: 0; }

.modal--afterOpen {
  display: block;
  visibility: visible; }

.table {
  background: #fff;
  border: solid 1px #ebebeb;
  margin-bottom: 3rem;
  table-layout: auto;
  margin-bottom: 1rem;
  table-layout: auto;
  width: 100%; }
  .table caption {
    background: transparent;
    color: #333;
    font-size: 1rem;
    font-weight: bold; }
  .table thead {
    background: #fafafa; }
    .table thead tr th,
    .table thead tr td {
      color: #333;
      font-size: 1rem;
      font-weight: 600;
      padding: 1.5rem; }
  .table tfoot {
    background: #fafafa; }
    .table tfoot tr th,
    .table tfoot tr td {
      color: #333;
      font-size: 1rem;
      font-weight: 600;
      padding: 1.5rem; }
  .table tr th,
  .table tr td {
    color: #333;
    font-size: 1rem;
    padding: 1.5rem;
    text-align: left; }
  .table tr.even, .table tr.alt, .table tr:nth-of-type(even) {
    background: #fff; }
  .table thead tr th,
  .table tfoot tr th,
  .table tfoot tr td,
  .table tbody tr th,
  .table tbody tr td,
  .table tr td {
    display: table-cell;
    line-height: 1.5; }

.table-thead {
  border-bottom: 1px solid #d9d9d9; }
  .table-thead a {
    color: #333; }
  .table-thead a:hover {
    text-decoration: underline; }
  .table-thead tr:hover {
    background-color: palette("grey", 50); }

.table-tbody tr {
  border-bottom: 1px solid #ebebeb; }

.table-tbody tr:hover {
  background-color: palette("white"); }

.table-tfoot {
  border-top: 1px solid #d9d9d9; }
  .table-tfoot tr:hover {
    background-color: palette("white"); }

.table-actionButton {
  margin-bottom: 0; }

.form-checkbox + .form-label,
.form-radio + .form-label {
  color: inherit; }

.form-checkbox:checked + .form-label::before,
.form-radio:checked + .form-label::before {
  background-color: #4496f6;
  border-color: #4496f6; }

.form-radio:checked + .form-label::after {
  border: none;
  transform: scale(0.5); }

.formField--helpText {
  color: #999; }

.form-ccFields {
  margin: 0 -0.75rem; }

.form-ccFields > .form-field,
.form-ccFields > .form-ccFields-field {
  display: block;
  flex-grow: 1;
  margin-bottom: 1rem;
  max-width: none !important;
  padding: 0 0.75rem; }

.form-field--ccNumber,
.form-field--ccName {
  flex-basis: 65%; }

.form-field--ccDocument {
  flex-basis: 100%;
  order: 4; }

.form-field--stripe-ccNumber {
  flex-basis: 100%; }

.form-field--bolt-embed {
  flex-basis: 100%;
  height: 8.46154rem; }

.form-field--createAccount {
  height: auto; }

.mollie-full {
  flex-basis: 100%; }

.mollie-aside {
  flex: 1 0 0; }

.form-field--ccNumber--hasExpiryDate {
  flex-basis: 50%; }

.form-field-ccNumber--hide {
  display: none !important; }

.form-ccFields-field--ccCvv,
.form-field--ccExpiry {
  flex-basis: 1%;
  min-width: 7.69231rem; }

.form-ccFields-field--ccCvv {
  order: 4; }

.form-field--postCode {
  flex-basis: 100%;
  order: 5; }

.form-field--stripe-postalCode {
  flex-basis: 1%;
  order: 5; }

.form-field--ccAdditionalField {
  flex: 100%;
  order: 99; }

.form-field--saveInstrument {
  order: 6; }

.form-field--setAsDefaultInstrument {
  order: 7; }

.icon--small {
  height: 2.07692rem;
  width: 2.07692rem; }

.icon--medium {
  height: 2.76923rem;
  width: 2.76923rem; }

.icon--large {
  height: 4.15385rem;
  width: 4.15385rem; }

.icon--error svg {
  fill: #ed6a6a; }

.loadingNotification-label {
  align-items: center;
  display: flex;
  padding: 0.75rem 3rem; }
  .loadingNotification-label .label {
    margin-left: 0.75rem; }

.spinner {
  animation: lds-dual-ring 1.2s linear infinite;
  border-color: #fff #fff #5f5f5f #5f5f5f;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  display: inline-block;
  height: 1.15385rem;
  width: 1.15385rem; }

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.layout > .loadingOverlay::before {
  position: fixed;
  top: 40%; }

.loadingOverlay {
  opacity: 0.9;
  z-index: 20; }

.creditCardTypes-list-item {
  opacity: 1;
  transition: all 0.6s ease-out; }
  .creditCardTypes-list-item.not-active {
    filter: grayscale(100%);
    transform: scale(0.95); }
  .creditCardTypes-list-item.is-active {
    transform: scale(1.1); }

.cardIcon-icon {
  position: relative; }

.cardIcon-icon--default {
  background: url(static/card-abef8595.svg) no-repeat center center; }

.cartDrawer {
  align-items: center;
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  bottom: 0;
  box-shadow: 0 1px 4px rgba(95, 95, 95, 0.14);
  display: flex;
  left: 0;
  margin: 1.5rem;
  padding: 0.75rem;
  position: fixed;
  right: 0;
  z-index: 20; }
  @media (max-height: 26.92308rem) {
    .cartDrawer {
      position: static; }
      .is-embedded .cartDrawer {
        position: fixed; } }
  .cartDrawer:hover {
    cursor: pointer; }

.cartDrawer-actions {
  flex: 1;
  text-align: right;
  vertical-align: middle; }

.cartDrawer-body {
  flex: 1;
  padding-left: 1.5rem; }

.cartDrawer-figure {
  border: 1px solid #ebebeb;
  height: 50px;
  margin: 0;
  min-width: 50px;
  position: relative;
  width: 50px; }

.cartDrawer-figure--stack::after {
  border: 1px solid #ebebeb;
  bottom: -4px;
  content: "";
  left: 4px;
  position: absolute;
  right: -4px;
  top: 4px;
  z-index: -1; }

.cartDrawer-items {
  font-size: 1.38462rem; }

.cartDrawer-total {
  font-size: 1.92308rem; }

.cartDrawer-items,
.cartDrawer-total {
  margin-bottom: 0; }

.cartDrawer-imageWrapper {
  display: flex;
  height: 100%;
  overflow: hidden;
  width: 100%; }

.cartDrawer-imageWrapper svg {
  margin: auto; }

.productImage-giftCertificate {
  background: #fff;
  height: 100%;
  padding: 15%;
  width: 100%; }

.cart-modal-body {
  padding: 0 1.875rem; }

.cart-modal-header {
  border-bottom: 0;
  display: table;
  table-layout: fixed;
  width: 100%; }

.cart-modal-close,
.cart-modal-link,
.cart-modal-title {
  display: table-cell;
  vertical-align: middle; }

.cart-modal-title {
  padding-right: 0;
  text-align: center;
  width: 50%; }

.cart-modal-close {
  text-align: left; }

.cart-modal-link {
  text-align: right; }
  .cart-modal-link svg {
    fill: currentColor; }

.changeHighlight-enter-active,
.changeHighlight {
  animation: highlightFade 1000ms ease-out; }

@keyframes highlightFade {
  0% {
    background: rgba(68, 150, 246, 0.6); }
  100% {
    background: rgba(68, 150, 246, 0); } }

.form-checklist {
  border: 1px solid #d9d9d9;
  border-radius: 4px 4px 0 0;
  color: #292929;
  list-style: none;
  margin-left: 0; }
  .form-checklist:only-child {
    border-radius: 4px; }

.form-checklist-item {
  border-bottom: 1px solid #d9d9d9;
  overflow: hidden; }
  .form-checklist-item:last-child {
    border-bottom: 0; }

.form-checklist-item--selected {
  overflow: visible; }

.form-checklist-item:hover,
.form-checklist-item--selected {
  background-color: #fafafa; }

.form-checklist-header > .form-field {
  margin-bottom: 0; }

.form-checklist-header--selected .form-label {
  font-weight: 700; }

.form-checklist-checkbox ~ .form-label {
  color: inherit;
  display: block;
  font-size: 1.15385rem;
  line-height: 2.2;
  margin-bottom: 0;
  min-height: 4.61538rem;
  padding: 1rem 2.25rem 1rem 3.75rem;
  position: relative; }
  @media (min-width: 551px) {
    .form-checklist-checkbox ~ .form-label {
      padding-left: 4.5rem; } }
  .form-checklist-checkbox ~ .form-label::before, .form-checklist-checkbox ~ .form-label::after {
    height: 2rem;
    width: 2rem;
    background-color: #fff;
    border-radius: 100%;
    bottom: 0;
    content: "";
    left: 1rem;
    margin: auto;
    position: absolute;
    top: 0; }
    @media (min-width: 551px) {
      .form-checklist-checkbox ~ .form-label::before, .form-checklist-checkbox ~ .form-label::after {
        left: 1.5rem; } }
  .form-checklist-checkbox ~ .form-label::after {
    transform: scale(0.66); }
  .form-checklist-checkbox ~ .form-label::before {
    border: 1px solid #d9d9d9; }

.form-checklist-checkbox {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }
  .form-checklist-checkbox:focus ~ .form-label {
    box-shadow: inset 0 0 0 1px #4496f6; }
  .form-checklist-checkbox:checked ~ .form-label::before {
    border-color: #4496f6; }
  .form-checklist-checkbox:checked ~ .form-label::after {
    background-color: #4496f6; }

.form-checklist-body {
  margin-left: 3.75rem;
  margin-right: 2.25rem; }
  .form-checklist-body.ng-enter, .form-checklist-body.ng-leave {
    overflow: hidden;
    transition: max-height 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  .form-checklist-body.ng-enter {
    max-height: 0; }
  .form-checklist-body.ng-leave {
    max-height: 26.92308rem; }
  .form-checklist-body.ng-enter.ng-enter-active {
    max-height: 26.92308rem; }
  .form-checklist-body.ng-leave.ng-leave-active {
    max-height: 0; }
  .form-checklist-body-enter, .form-checklist-body-exit {
    overflow: hidden;
    transition: max-height 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  .form-checklist-body-enter {
    max-height: 0; }
  .form-checklist-body-exit {
    max-height: 26.92308rem; }
  .form-checklist-body-enter-active {
    max-height: 26.92308rem; }
  .form-checklist-body-exit-active {
    max-height: 0; }
  @media (min-width: 551px) {
    .form-checklist-body {
      margin-left: 4.5rem; } }

.form-checklist-container {
  clear: both;
  padding: 0.66667rem 0; }

.form-checklist-footer {
  border: 1px solid #d9d9d9;
  border-radius: 0 0 4px 4px;
  border-top: 0;
  color: #4496f6;
  line-height: 1.25;
  margin-bottom: 1rem;
  text-align: center; }

.form-checklist-action {
  border-radius: 0 0 4px 4px;
  padding: 1.5rem 0;
  width: 100%; }
  .form-checklist-action:focus, .form-checklist-action:hover {
    background-color: #fafafa; }
  .form-checklist-action:focus {
    box-shadow: inset 0 0 0 1px #4496f6; }

.form-addressState {
  display: block;
  flex: 1; }

.shipping-address .address-line {
  margin-bottom: 0; }

.cart {
  border: 1px solid #ebebeb;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(95, 95, 95, 0.14);
  display: none;
  margin: 3rem 0 1.5rem;
  min-height: 300px; }
  @media (min-width: 968px) {
    .cart {
      display: block; } }

.cart-note {
  color: #999;
  font-size: 1rem;
  padding-left: 1.5rem; }

.cart-header {
  display: table;
  padding: 1.5rem;
  width: 100%; }

.cart-title {
  display: table-cell;
  margin-bottom: 0;
  vertical-align: middle; }

.cart-header-link {
  display: table-cell;
  text-align: right;
  vertical-align: middle; }
  .cart-header-link .icon {
    margin: -2px 3px 0 0; }
  .cart-header-link svg {
    fill: currentColor; }

.cart-section {
  border-top: 1px solid #ebebeb;
  padding: 1.5rem; }

.cart-section-heading {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem; }

.cart-actions {
  margin-top: 0.75rem;
  text-align: center; }
  .cart-actions .button {
    margin-bottom: 0; }

.cart-priceItem {
  display: table;
  margin-bottom: 0.75rem;
  width: 100%; }

.cart-priceItem-label,
.cart-priceItem-value {
  display: table-cell;
  vertical-align: middle; }

.cart-priceItem-value {
  text-align: right; }

.cart-priceItem-postFix {
  color: #999;
  display: table-row;
  font-size: 1rem; }

.cart-priceItem--total {
  margin-bottom: 0; }
  .cart-priceItem--total .cart-priceItem-label {
    font-size: 1.15385rem; }
  .cart-priceItem--total .cart-priceItem-value {
    font-size: 2.30769rem;
    font-weight: 700;
    line-height: 1.2; }

.cart-priceItem--subtotal {
  font-weight: 600; }

@media print {
  .cart {
    background-color: #fff;
    display: block; }
  .cart-header-link {
    display: none; } }

.cart-priceItem--totalNote {
  margin-bottom: 0;
  margin-top: 0.75rem; }

.consignment {
  display: flex;
  flex-direction: row;
  margin: 0.75rem 0 1.5rem;
  width: 100%; }

.consignment-product-figure {
  padding: 0 1.5rem 0;
  width: 25%; }

.consignmentList {
  list-style: none;
  margin-left: 0; }
  .consignmentList ul,
  .consignmentList ol {
    list-style: none;
    margin-bottom: 0; }

.consignment-product-body {
  display: flex;
  flex-direction: column;
  width: 100%; }
  .consignment-product-body h5 {
    margin-bottom: 0.1875rem; }
  .consignment-product-body .form-field {
    margin-top: 0.375rem; }

.customerEmail-container {
  margin: 0 auto;
  max-width: 92.30769rem;
  width: 100%;
  margin-bottom: 1.5rem; }
  .customerEmail-container:before, .customerEmail-container:after {
    content: " ";
    display: table; }
  .customerEmail-container:after {
    clear: both; }

.customerEmail-action {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  float: left;
  margin-bottom: 1.5rem;
  padding: 0; }
  @media (min-width: 551px) {
    .customerEmail-action {
      margin: 1.8rem 0 0 0;
      padding-left: 1.5rem;
      width: 41.66667%; } }

.customerEmail-body {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  float: left; }
  @media (min-width: 551px) {
    .customerEmail-body {
      width: 58.33333%; } }

.customerEmail-button {
  padding: 1rem 0.5rem;
  width: 100%; }

.customerHeader .stepHeader-body,
.checkout-step--customer .stepHeader-body {
  overflow: visible; }

.customerView {
  align-items: top;
  display: flex; }

.customerView-actions {
  margin-top: -3.07692rem;
  white-space: nowrap; }
  @media (min-width: 551px) {
    .customerView-actions {
      margin-top: -0.38462rem; } }
  .customerView-actions .button {
    margin-bottom: 0; }

.customerView-body {
  hyphens: auto;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  margin-right: 1.5rem;
  width: 100%; }

.checkoutRemote {
  display: flex;
  flex-wrap: wrap;
  margin-left: -0.5rem;
  margin-right: -0.5rem; }
  .checkoutRemote > div {
    margin-right: 1.5rem; }

.checkoutRemote-button {
  margin-bottom: 1rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem; }

.checkoutHeader {
  background-color: #fafafa;
  border-bottom: 1px solid #ebebeb;
  text-align: center; }
  @media (min-width: 551px) {
    .checkoutHeader {
      min-height: 9.23077rem; } }
  @media (min-width: 801px) {
    .checkoutHeader {
      text-align: left; } }

.checkoutHeader-content {
  margin: 0 auto;
  max-width: 92.30769rem;
  width: 100%;
  padding: 1.5rem; }
  .checkoutHeader-content:before, .checkoutHeader-content:after {
    content: " ";
    display: table; }
  .checkoutHeader-content:after {
    clear: both; }
  @media (min-width: 551px) {
    .checkoutHeader-content {
      padding: 3rem; } }

.checkoutHeader-heading {
  font-size: 2.76923rem;
  color: inherit;
  margin-bottom: 0;
  word-wrap: break-word; }

.checkout-steps {
  counter-reset: li-counter;
  list-style-type: none;
  margin: 0; }
  @media (min-width: 801px) {
    .checkout-steps {
      padding-right: 6rem; } }

.checkout-step {
  border-bottom: 1px solid #ebebeb;
  padding: 1.5rem 0; }
  .checkout-step:last-child {
    border: 0; }

.checkout-view-header {
  margin-bottom: 0.76923rem; }
  .checkout-view-header:last-child {
    margin-bottom: 0; }

@media (min-width: 968px) {
  .checkout-view-content.ng-enter, .checkout-view-content.ng-leave {
    overflow: hidden;
    transition: max-height 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  .checkout-view-content.ng-enter {
    max-height: 0; }
  .checkout-view-content.ng-leave {
    max-height: 92.30769rem; }
  .checkout-view-content.ng-enter.ng-enter-active {
    max-height: 92.30769rem; }
  .checkout-view-content.ng-leave.ng-leave-active {
    max-height: 0; }
  .checkout-view-content-enter, .checkout-view-content-exit {
    overflow: hidden;
    transition: max-height 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  .checkout-view-content-enter {
    max-height: 0; }
  .checkout-view-content-exit {
    max-height: 92.30769rem; }
  .checkout-view-content-enter-active {
    max-height: 92.30769rem; }
  .checkout-view-content-exit-active {
    max-height: 0; } }

.checkout-step-info {
  margin-bottom: 1.5rem; }

.checkout-form {
  margin: 0; }
  @media (min-width: 551px) {
    .checkout-form {
      margin-left: 4.19231rem; } }
  @media (min-width: 968px) {
    .checkout-form {
      margin-left: 0; } }
  @media (min-width: 1080px) {
    .checkout-form {
      margin-left: 4.19231rem; } }

.stepHeader-counter {
  height: 2.69231rem;
  width: 2.69231rem;
  background-color: #333;
  border-radius: 50%;
  text-align: center;
  transition: transform 250ms ease; }
  .stepHeader-counter::before {
    height: 2.69231rem;
    width: 2.69231rem;
    color: #fff;
    content: counter(li-counter);
    counter-increment: li-counter;
    display: inline-block;
    font-size: 1.38462rem;
    line-height: 35px;
    text-align: center; }
  .stepHeader-counter svg {
    display: none;
    fill: #fff;
    padding: 0; }

.stepHeader-counter--complete {
  transform: scale(0.8); }
  .stepHeader-counter--complete::before {
    height: 0;
    width: 0;
    content: ""; }
  .stepHeader-counter--complete svg {
    display: inline-block;
    padding: 0.25rem; }

.stepHeader {
  align-items: top;
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem 0; }
  @media (min-width: 551px) {
    .stepHeader {
      flex-wrap: nowrap; } }
  @media (min-width: 968px) {
    .stepHeader {
      flex-wrap: nowrap; } }
  .stepHeader.is-readonly {
    cursor: default; }

.stepHeader-figure {
  align-items: center;
  display: flex;
  height: 2.69231rem;
  margin-right: 1.5rem; }

.stepHeader-title {
  margin: 0 0 0 1.5rem;
  min-width: 9rem; }

.stepHeader-body {
  hyphens: auto;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
  color: #333;
  margin-left: 4.19231rem;
  margin-top: 0.76923rem;
  order: 3;
  width: 100%; }
  @media (min-width: 551px) {
    .stepHeader-body {
      margin-left: 0;
      order: inherit; } }
  @media (min-width: 801px) {
    .stepHeader-body {
      margin-left: 4.19231rem; } }
  @media (min-width: 968px) {
    .stepHeader-body {
      margin-left: 0; } }

.stepHeader-actions {
  align-self: flex-start;
  margin-left: auto;
  margin-top: 0.38462rem; }
  @media (min-width: 551px) {
    .stepHeader-actions {
      margin-left: 1.5rem; } }
  .stepHeader-actions .button {
    margin-bottom: 0; }

.checkout-suggestion {
  margin: 0; }
  @media (min-width: 551px) {
    .checkout-suggestion {
      margin-left: 4.19231rem; } }
  @media (min-width: 968px) {
    .checkout-suggestion {
      margin-left: 0; } }
  @media (min-width: 1080px) {
    .checkout-suggestion {
      margin-left: 4.19231rem; } }

.checkoutSuggestion {
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: default;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 1.5rem 0 0 0;
  padding: 1.5rem;
  width: 100%; }
  @media (min-width: 801px) {
    .checkoutSuggestion {
      flex-direction: row; } }

.checkoutSuggestion-message {
  color: #333;
  font-weight: 400;
  margin: 0 0 1.5rem 0;
  width: 100%; }
  @media (min-width: 801px) {
    .checkoutSuggestion-message {
      margin: 0 1.5rem 0 0;
      width: auto; } }

.checkoutSuggestion-button {
  color: #fff;
  margin: 0;
  text-transform: initial;
  white-space: nowrap;
  width: 100%; }
  @media (min-width: 801px) {
    .checkoutSuggestion-button {
      width: auto; } }
  .checkoutSuggestion-button:hover {
    color: #fff; }
  .checkoutSuggestion-button--bolt {
    background-color: #006cff;
    border-color: #006cff; }
    .checkoutSuggestion-button--bolt:hover {
      background-color: #005ad5;
      border-color: #005ad5; }

.checkoutSuggestion-button-icon--bolt {
  height: 1rem;
  margin-right: 0.375rem; }

.genericModal-body-iframe--center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.instrumentModal-trigger {
  color: #4496f6;
  display: block;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: 0; }

.instrumentModal-instrumentAccountExternalId,
.instrumentModal-instrumentAccountNumber,
.instrumentModal-instrumentCardType {
  margin-left: 0.75rem; }

.instrumentModal-instrumentExpiry--expired {
  color: #ed6a6a; }

.instrumentSelect {
  position: relative;
  width: 100%; }

.instrumentSelect-button {
  height: auto; }

.instrumentSelect-dropdownMenu {
  max-height: 14.23077rem;
  max-width: none;
  overflow: scroll; }

.dropdownMenu .instrumentSelect-dropdownMenu {
  display: block;
  left: auto;
  position: static; }

.instrumentSelect-option {
  padding: 0; }
  .instrumentSelect-option > button {
    display: block;
    padding: 0.75rem 1rem;
    width: 100%; }

.instrumentSelect-option--addNew > button {
  color: #4496f6; }

.instrumentSelect-option--selected {
  background-color: #4496f6; }
  .instrumentSelect-option--selected > button {
    color: #fff; }
  .instrumentSelect-option--selected:hover {
    background-color: #4496f6; }

.instrumentSelect-details {
  align-items: center;
  display: flex; }

.instrumentSelect-account,
.instrumentSelect-card {
  flex-grow: 2;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  text-align: left; }

.instrumentSelect-expiry {
  margin-right: 1.53846rem;
  text-align: right; }

.instrumentSelect-issuer {
  flex-grow: 2;
  margin-right: 1.53846rem;
  text-align: left; }

.instrumentSelect-expiry--expired {
  color: #ed6a6a; }

.instrumentSelect-details--expired {
  cursor: not-allowed; }

.instrumentSelect-note p:last-child {
  margin-bottom: 0; }

.mollie-instrument-card {
  margin-left: 0.69231rem;
  margin-top: -1.53846rem;
  overflow: auto;
  width: 80%; }

.mollie-instrument-list {
  display: flex !important;
  justify-content: flex-end; }

.mollie-instrument-left {
  margin-right: auto; }

.loadingSpinner .loadingOverlay {
  background-color: transparent; }

.paymentProviderHeader-img {
  height: 1.92308rem; }
  .paymentProviderHeader-img + .paymentProviderHeader-name {
    margin-left: 0.75rem; }

.googlePay-logo {
  height: 3.07692rem; }

@media (min-width: 551px) {
  .paymentProviderHeader-cc {
    float: right; } }

.paymentMethod--creditCard,
.paymentMethod--hosted,
.paymentMethod--walletButton {
  clear: both;
  padding: 0.66667rem 0; }

.chasePay--container {
  margin-top: 0.38462rem; }

.button-masterpass, .button-masterpass-mark {
  background-color: #fafafa;
  background-image: url(https://masterpass.com/dyn/img/btn/global/mp_chk_btn_180x042px.svg);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: #fafafa;
  border-radius: 0.38462rem;
  height: 3.23077rem;
  padding: 0;
  width: 13.84615rem; }

/* Masterpass accordion button */
.button-masterpass {
  cursor: pointer;
  display: none; }

/* Masterpass widget button */
.button-masterpass-mark {
  cursor: default;
  margin: auto; }

body.klarna-payments-fso-open {
  scroll-behavior: auto; }

.stripe-sepa-mandate-disclaimer {
  margin-bottom: 0;
  padding-bottom: 1.53846rem; }

#stripe-card-field--invalid {
  border-color: #fa755a; }

#stripe-card-field--webkit-autofill {
  background-color: #fefde5 !important; }

.submitButtonContainer {
  margin-left: 0;
  width: 100%; }

.checkoutcom-sepa-column-container {
  display: flex;
  flex: 1;
  flex-basis: 100%;
  flex-direction: row;
  margin-bottom: 0;
  padding-bottom: 0.38462rem; }

.checkoutcom-sepa-column-content {
  width: 50%; }

.checkoutcom-sepa-title {
  margin-bottom: 0;
  padding-bottom: 0.38462rem; }

.checkoutcom-sepa-line {
  margin-bottom: 0; }

/* Custom payment submit buttons styles */
.payment-submit-button-bolt {
  font-size: 16px; }

.payment-submit-button-bolt-icon {
  height: 0.92308rem;
  margin-right: 0.61538rem;
  width: 0.92308rem; }

.productList {
  list-style: none;
  margin-left: 0;
  margin: 0; }
  .productList ul,
  .productList ol {
    list-style: none;
    margin-bottom: 0; }

.productList-item {
  margin-bottom: 3rem; }
  @media (min-width: 551px) {
    .productList-item {
      margin-bottom: 1.5rem; } }
  .productList-item:last-child {
    margin-bottom: 0; }
  .productList-item:nth-child(n+5) {
    display: none; }
  .productList-item.is-visible:nth-child(n+5) {
    display: list-item; }

.product {
  display: flex;
  flex-wrap: wrap; }
  @media (min-width: 551px) {
    .product {
      flex-wrap: nowrap; } }

.product-figure {
  margin: 0;
  padding-right: 1.5rem;
  width: 25%; }

.product-body {
  order: 2;
  padding-right: 0;
  width: 100%;
  word-wrap: break-word; }
  @media (min-width: 551px) {
    .product-body {
      padding-right: 0.375rem;
      width: 50%; } }

.product-title {
  margin-bottom: 0.1875rem; }

.product-options {
  color: #999;
  font-size: 0.84615rem;
  margin: 0; }

.product-description {
  margin-top: 0.375rem; }

.product-actions {
  align-self: center;
  margin-left: auto; }
  @media (min-width: 551px) {
    .product-actions {
      align-self: flex-start;
      order: 3;
      text-align: right;
      width: 25%;
      word-wrap: break-word; } }

.product-price--beforeDiscount {
  text-decoration: line-through; }

.spamProtection-container {
  margin: 0; }
  @media (min-width: 551px) {
    .spamProtection-container {
      margin-left: 4.19231rem; } }
  @media (min-width: 968px) {
    .spamProtection-container {
      margin-left: 0; } }
  @media (min-width: 1080px) {
    .spamProtection-container {
      margin-left: 4.19231rem; } }

.spamProtection-panel {
  background-color: #fff;
  border: 1px solid #ebebeb;
  border-radius: 4px;
  display: flex;
  min-height: 10rem;
  padding: 0.75rem;
  text-align: center; }

.spamProtection-panel-message {
  align-self: center;
  flex: 1;
  margin: 0; }

.storeCreditOverlay {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100; }

.storeCreditOverlay-text {
  margin: 0;
  text-align: center; }

.orderConfirmation {
  padding: 3rem 0 0; }

.orderConfirmation-section {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 2.5rem;
  padding: 0 0 2.5rem; }
  .orderConfirmation-section *:last-child {
    margin-bottom: 0; }

.continueButtonContainer {
  margin-top: 3rem; }

.trackingCodeIframe {
  left: -5000px;
  position: absolute; }

@media print {
  .guest-signup {
    display: none; }
  .continueButtonContainer {
    display: none; } }

.widget {
  outline: 0;
  padding-bottom: 0.75rem;
  width: 100%; }

.widget--paymentMethod {
  background-color: #fafafa;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  list-style: none;
  margin-left: 0;
  padding-bottom: 0; }

.widget--amazon {
  height: 260px; }

.widget--braintree .cardDetails {
  margin-bottom: 0; }

.widget-header {
  display: block;
  padding: 1rem 2.25rem 1rem 3.75rem; }

.widget-body {
  margin-left: 3.75rem;
  margin-right: 2.25rem; }
  .widget-body.ng-enter, .widget-body.ng-leave {
    overflow: hidden;
    transition: max-height 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  .widget-body.ng-enter {
    max-height: 0; }
  .widget-body.ng-leave {
    max-height: 26.92308rem; }
  .widget-body.ng-enter.ng-enter-active {
    max-height: 26.92308rem; }
  .widget-body.ng-leave.ng-leave-active {
    max-height: 0; }
  .widget-body-enter, .widget-body-exit {
    overflow: hidden;
    transition: max-height 600ms cubic-bezier(0.77, 0, 0.175, 1); }
  .widget-body-enter {
    max-height: 0; }
  .widget-body-exit {
    max-height: 26.92308rem; }
  .widget-body-enter-active {
    max-height: 26.92308rem; }
  .widget-body-exit-active {
    max-height: 0; }

.widget-container {
  padding: 0.66667rem 0; }

.widget-bodyCard {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }

.widget-header-googlepay {
  text-align: center; }

.widget-input--stripev3 {
  color: #000;
  font: 400 1.1rem/normal sans-serif;
  padding: 1rem; }
  .widget-input--stripev3::placeholder {
    color: #757575;
    font: 400 1.1rem/normal sans-serif; }

.widget--stripev3 {
  margin-bottom: 1.53846rem;
  margin-top: 1.53846rem;
  padding: 1rem; }
  @media screen and (max-width: 414px) {
    .widget--stripev3 {
      margin: 1.53846rem 0 1.53846rem 0;
      padding: 1rem 0 1rem 1rem;
      width: 20rem; } }
  @media screen and (max-width: 375px) {
    .widget--stripev3 {
      margin: 1.53846rem -2rem 1.53846rem -2rem;
      padding: 1rem 0 1rem 1rem;
      width: 20rem; } }
  @media screen and (max-width: 320px) {
    .widget--stripev3 {
      margin: 1.53846rem -2rem 1.53846rem -3rem;
      padding: 1rem 0 1rem 0.25rem;
      width: 19rem; } }

.StripeElement--focus {
  border-color: #4496f6;
  box-shadow: 0 0 3px rgba(68, 150, 246, 0.4); }

.widget-link-amazonpay {
  padding-bottom: 0.375rem; }

.signout-link {
  padding-bottom: 1.5rem;
  width: 100%; }

.react-datepicker {
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  position: relative; }

.react-datepicker__current-month {
  color: inherit;
  font-size: inherit;
  font-weight: inherit; }

.react-datepicker__day,
.react-datepicker__day:hover {
  border-radius: 50%; }

.react-datepicker__day--today {
  background-color: transparent;
  font-weight: 700; }

.react-datepicker__day--keyboard-selected, .react-datepicker__day--keyboard-selected:hover,
.react-datepicker__day--selected,
.react-datepicker__day--selected:hover {
  background-color: #4496f6;
  border-radius: 50%; }

.react-datepicker-popper {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(95, 95, 95, 0.14);
  color: #5f5f5f;
  font-size: 1rem;
  padding: 0.75rem;
  text-align: center;
  z-index: 500; }

.react-datepicker__triangle {
  display: none; }

.react-datepicker__header {
  background: none;
  border: none; }

.react-datepicker__day-name {
  color: #999;
  font-size: 0.84615rem;
  font-weight: 600;
  text-transform: uppercase; }

.datepicker {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(95, 95, 95, 0.14);
  color: #5f5f5f;
  font-size: 1rem;
  padding: 1.5rem 0;
  text-align: center;
  z-index: 500; }

.datepicker-attachment {
  position: absolute; }

.datepicker-month {
  font-size: 1.15385rem;
  margin: 0; }

.datepicker-back,
.datepicker-next {
  color: #999;
  cursor: default;
  font-weight: 700;
  padding: 0; }

.datepicker-back {
  float: left;
  margin-left: 1.5rem; }

.datepicker-back::before {
  content: "<";
  display: block; }

.datepicker-next {
  float: right;
  margin-right: 1.5rem; }

.datepicker-next::before {
  content: ">";
  display: block; }

.datepicker-days {
  border-collapse: separate;
  font-size: 1rem;
  margin: 1.5rem 1.5rem 0;
  table-layout: fixed; }

.datepicker-days-head {
  line-height: 1.25; }

.datepicker-day-name {
  color: #999;
  font-size: 0.84615rem;
  font-weight: 600;
  text-transform: uppercase; }

.datepicker-day {
  cursor: pointer;
  height: 2.25rem;
  line-height: 1;
  margin: 0.38462rem;
  position: relative;
  text-align: center;
  width: 2.25rem;
  z-index: 5; }

.datepicker-day:hover::before {
  background-color: #ebebeb; }

.datepicker-day.is-selected {
  color: #fff;
  cursor: pointer; }

.datepicker-day.is-selected::before,
.datepicker-day.is-selected:hover::before {
  background-color: #4496f6; }

.datepicker-day::before,
.datepicker-day.is-selected::before {
  border-radius: 50%;
  bottom: 0.15385rem;
  content: "";
  left: 0.15385rem;
  position: absolute;
  right: 0.15385rem;
  top: 0.15385rem;
  z-index: -1; }

.datepicker-day.is-disabled {
  color: #999;
  cursor: default; }

.layout {
  margin: 0 auto;
  max-width: 92.30769rem;
  width: 100%;
  min-height: 15.38462rem;
  padding: 0 1.5rem 7.5rem; }
  .layout:before, .layout:after {
    content: " ";
    display: table; }
  .layout:after {
    clear: both; }
  @media (min-width: 968px) {
    .layout {
      padding-bottom: 1.5rem; } }

.layout-cart {
  padding-left: 1.15385rem;
  padding-right: 1.15385rem;
  width: 100%;
  float: left; }
  @media (min-width: 968px) {
    .layout-cart {
      width: 41.66667%; } }
  @media (min-width: 1261px) {
    .layout-cart {
      width: 33.33333%; } }
  .layout-cart.is-sticky {
    position: sticky;
    top: 0; }

.layout-main {
  padding-left: 1.15385rem;
  padding-right: 1.15385rem;
  width: 100%;
  float: left; }
  @media (min-width: 968px) {
    .layout-main {
      width: 58.33333%; } }
  @media (min-width: 1261px) {
    .layout-main {
      width: 66.66667%; } }
  @media (min-width: 1261px) {
    .layout-main {
      padding-right: 6rem; } }

@media print {
  @page {
    margin: 1.5rem 0;
    size: auto; }
  .layout-cart {
    display: block;
    float: none;
    page-break-inside: auto;
    position: static !important;
    width: 75%; }
  .layout-main {
    float: none;
    width: 75%; } }

.errorCode {
  font-size: 0.75rem;
  opacity: 0.4; }
  .errorCode .errorCode-value {
    word-break: break-word; }

.discountBanner {
  margin-top: 1.5rem; }
  .discountBanner .alertBox {
    border-radius: 4px; }

.discountBannerList {
  list-style: none;
  margin: 0;
  margin-left: 0; }
  .discountBannerList ul,
  .discountBannerList ol {
    list-style: none;
    margin-bottom: 0; }

.lazyContainer-error {
  padding: 3rem;
  text-align: center; }

.staticConsignmentContainer ul {
  list-style: none;
  margin: 0; }

.staticConsignmentContainer + .staticConsignmentContainer {
  border-top: 1px solid #e1e6eb;
  margin-top: 1.5rem;
  padding-top: 1.5rem; }

.staticConsignment-items {
  margin: 0.375rem 0; }

.checkout-address--static .address-entry {
  margin: 0; }

.shippingOption {
  display: inline-block;
  min-height: 0;
  width: 100%; }

.shippingOption-figure,
.shippingOption-desc,
.shippingOption-price {
  display: inline-block;
  font-size: 1rem; }

.shippingOption-img {
  padding-right: 0.75rem; }

.shippingOption-price {
  font-weight: 700;
  padding-left: 0.75rem; }

.shippingOption-transitTime {
  display: block;
  font-size: 1rem;
  font-weight: 400; }

.shippingOptionLabel .shippingOption {
  align-items: center;
  display: flex;
  min-height: 2.1875rem; }

.shippingOptionLabel .shippingOption-figure,
.shippingOptionLabel .shippingOption-desc,
.shippingOptionLabel .shippingOption-price {
  font-size: inherit;
  line-height: 1.5;
  vertical-align: middle; }

.shippingOptionLabel .shippingOption-figure,
.shippingOptionLabel .shippingOption-desc {
  flex: 1; }

.shippingOptionLabel .shippingOption-figure {
  max-width: 3.125rem;
  min-width: 3.125rem; }

.shippingOptionLabel .shippingOption-additionalDescription--container {
  display: flex;
  flex-direction: row;
  line-height: 1.5rem; }
  .shippingOptionLabel .shippingOption-additionalDescription--container .shippingOption-additionalDescription {
    font-size: 1.125rem;
    font-weight: 400;
    text-overflow: ellipsis; }
  .shippingOptionLabel .shippingOption-additionalDescription--container .shippingOption-additionalDescription--collapsed {
    height: 1.5rem;
    overflow: hidden;
    width: 65%; }
  .shippingOptionLabel .shippingOption-additionalDescription--container .shippingOption-additionalDescription--expanded {
    height: auto;
    overflow: visible;
    white-space: initial;
    width: 100%; }
  .shippingOptionLabel .shippingOption-additionalDescription--container .shippingOption-readMore {
    font-weight: normal; }


/*# sourceMappingURL=checkout-23ae2c73.css.map*/