@charset "UTF-8";
/* Primary colours */
/* Primary tones */
/* Primary greys */
.pi-status-unknown {
  color: #f39325;
}

.pi-status-discontinued {
  color: #cc0000;
}

.pi-status-available {
  color: #99cc00;
}

/* Input padding, input line-height, input min-height */
/* Responsive ratio for images and backgrounds, current status: unusued */
/* Example usage: @include responsive-ratio(16, 9); */
/* Adjust the placeholder styles, current status: unusued */
/* Example usage: @include input-placeholder { color: $b; } */
/* Quickly adjust the font smoothing */
/* Quickly adjust the appearance of form fields */
/* Quickly adjust the selection colour */
/* Primary colours */
/* Primary tones */
/* Primary greys */
.pi-status-unknown {
  color: #f39325;
}

.pi-status-discontinued {
  color: #cc0000;
}

.pi-status-available {
  color: #99cc00;
}

/* Input padding, input line-height, input min-height */
.pi-form-group {
  margin-bottom: 22px;
}

.pi-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.pi-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.pi-hint {
  display: block;
  margin-bottom: 4px;
  color: #555555;
  font-size: 0.9rem;
}

.pi-input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin-top: 0;
  padding: 5.5px 11px;
  border: 1px solid #0b0c0c;
  border-radius: 0;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.pi-input:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px #0b0c0c;
}
.pi-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pi-input--width-10 {
  max-width: 11.5em;
}

.pi-input--width-20 {
  max-width: 20.5em;
}

.pi-input--width-30 {
  max-width: 29.5em;
}

.pi-input--width-5 {
  max-width: 5.5em;
}

.pi-input--width-4 {
  max-width: 4.5em;
}

.pi-input--width-3 {
  max-width: 3.75em;
}

.pi-input--width-2 {
  max-width: 2.75em;
}

.pi-width-two-thirds {
  max-width: 66.66%;
}

.pi-select {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 5.5px 11px;
  border: 1px solid #0b0c0c;
  border-radius: 0;
  font-size: 1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.pi-select:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}
.pi-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pi-textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0;
  padding: 5.5px 11px;
  border: 1px solid #0b0c0c;
  border-radius: 0;
  font-size: 1rem;
  resize: vertical;
}
.pi-textarea:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
}
.pi-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pi-button {
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid transparent;
  background: #0b0c0c;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}
.pi-button:focus {
  outline: 3px solid #ffdd00;
  outline-offset: 2px;
}
.pi-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pi-button--secondary {
  background: #f3f2f1;
  color: #0b0c0c;
}
.pi-button--secondary:hover:not(:disabled) {
  background: #e8e8e8;
}

.pi-button--start {
  font-size: 1.125rem;
  line-height: 1.25;
}

.pi-inset-text {
  border-left: 4px solid #7fa2c0;
}

/* Checkboxes */
.pi-checkboxes__item {
  display: block;
  position: relative;
  min-height: 40px;
  margin-bottom: 11px;
  padding-left: 40px;
  clear: left;
}
.pi-checkboxes__item:last-child, .pi-checkboxes__item:last-of-type {
  margin-bottom: 0;
}

.pi-checkboxes__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
}

.pi-checkboxes__label {
  display: inline-block;
  margin-bottom: 0;
  padding: 8px 12px 8px 0;
  font-weight: normal;
  cursor: pointer;
  touch-action: manipulation;
}
.pi-checkboxes__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  background: transparent;
}
.pi-checkboxes__label::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 11px;
  left: 9px;
  width: 23px;
  height: 12px;
  transform: rotate(-45deg);
  border: solid;
  border-width: 0 0 5px 5px;
  border-top-color: transparent;
  opacity: 0;
  background: transparent;
}

.pi-checkboxes__input:focus + .pi-checkboxes__label::before {
  border-width: 4px;
  outline: 3px solid transparent;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px #ffdd00;
}

.pi-checkboxes__input:checked + .pi-checkboxes__label::after {
  opacity: 1;
}

.pi-checkboxes__input:disabled,
.pi-checkboxes__input:disabled + .pi-checkboxes__label {
  cursor: not-allowed;
}

.pi-checkboxes__input:disabled + .pi-checkboxes__label {
  opacity: 0.5;
}

/* Radios */
.pi-radios__item {
  display: block;
  position: relative;
  min-height: 40px;
  margin-bottom: 11px;
  padding-left: 40px;
  clear: left;
}
.pi-radios__item:last-child, .pi-radios__item:last-of-type {
  margin-bottom: 0;
}

.pi-radios__input {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
}

.pi-radios__label {
  display: inline-block;
  margin-bottom: 0;
  padding: 8px 12px 8px 0;
  font-weight: normal;
  cursor: pointer;
  touch-action: manipulation;
}
.pi-radios__label::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
}
.pi-radios__label::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0;
  height: 0;
  border: 10px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  background: currentColor;
}

.pi-radios__input:focus + .pi-radios__label::before {
  border-width: 4px;
  outline: 3px solid transparent;
  outline-offset: 1px;
  box-shadow: 0 0 0 4px #ffdd00;
}

.pi-radios__input:checked + .pi-radios__label::after {
  opacity: 1;
}

.pi-radios__input:disabled,
.pi-radios__input:disabled + .pi-radios__label {
  cursor: not-allowed;
}

.pi-radios__input:disabled + .pi-radios__label {
  opacity: 0.5;
}

.pi-checkboxes__label::after {
  border: none !important;
  background: url("/svg/icons/001184-checkbox-tick.svg") !important;
  background-size: cover;
  left: 9px !important;
  right: 0 !important;
  transform: none !important;
  width: 50px !important;
  height: 50px !important;
  top: -2px !important;
  background-repeat: no-repeat !important;
}

/* Default field styles (from forms.scss – so form.css is self-contained) */
.pi-form-field-wrapper {
  margin-bottom: 33px;
}

.pi-form-fields-wrapper {
  margin: 0;
}

.pi-field-wrapper {
  margin: 0;
}

.pi-checkboxes__input:focus,
.pi-input:focus {
  outline: none !important;
}

.pi-checkboxes__input,
.pi-input {
  border: solid 2px #555555;
}

.pi-label {
  color: #7fa2c0;
}

.pi-textarea,
.pi-input,
.pi-select {
  width: 100% !important;
  background: #000 !important;
  border: solid 2px #555555 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #cccccc !important;
  transition: all 0.5s;
  font-size: calc(1.265rem + 0.18vw);
  line-height: 2rem !important;
  padding: 4px 10px;
  min-height: 50px !important;
}
@media (min-width: 1200px) {
  .pi-textarea,
  .pi-input,
  .pi-select {
    font-size: 1.4rem;
  }
}
.pi-textarea:hover,
.pi-input:hover,
.pi-select:hover {
  border-color: #fff !important;
  color: #fff !important;
}
.pi-textarea:focus,
.pi-input:focus,
.pi-select:focus {
  outline: 0 !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}

.pi-input,
.pi-select {
  height: 50px !important;
}

.pi-textarea {
  height: 150px !important;
  resize: none !important;
}

/* v-select (vue-select) – used by tables (records per page, cell dropdowns) and forms */
.vs__clear {
  display: none;
}

.v-select {
  color: #cccccc;
}
.v-select .vs__dropdown-menu li {
  color: #cccccc !important;
}
.v-select .vs__search {
  margin: 0 !important;
}
.v-select .vs__actions img {
  width: 35px !important;
  height: 35px !important;
  margin-right: 4px;
}
.v-select .vs__selected-options {
  padding: 0;
}
.v-select input::-moz-placeholder {
  color: #cccccc !important;
  opacity: 1 !important;
  padding: 0 1px !important;
  margin: 0 !important;
}
.v-select input::placeholder {
  color: #cccccc !important;
  opacity: 1 !important;
  padding: 0 1px !important;
  margin: 0 !important;
}
.v-select .vs--single .vs__selected {
  padding: 0 2px !important;
}

.vs__dropdown-toggle {
  width: 100% !important;
  background: #000 !important;
  border: solid 2px #555555 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #cccccc !important;
  transition: all 0.5s;
  font-size: calc(1.265rem + 0.18vw);
  line-height: 2rem !important;
  padding: 4px 10px;
  height: 50px !important;
}
@media (min-width: 1200px) {
  .vs__dropdown-toggle {
    font-size: 1.4rem;
  }
}
.vs__dropdown-toggle:hover {
  border-color: #fff !important;
  color: #fff !important;
}
.vs__dropdown-toggle:focus {
  outline: 0 !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}

.vs__selected-options {
  margin-top: -1px;
  height: 50px !important;
  padding: 0;
}

.vs__selected {
  margin: 0 !important;
  color: #cccccc !important;
  opacity: 1 !important;
}

.vs__dropdown-menu {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0;
  margin-top: 0 !important;
  padding-top: 0 !important;
  background: #000 !important;
  border: solid 1px #555555 !important;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  display: block !important;
}
.vs__dropdown-menu li {
  list-style: none !important;
  background: #000;
  font-size: calc(1.265rem + 0.18vw);
  line-height: 2rem !important;
  border: none;
  padding: 4px 10px !important;
}
@media (min-width: 1200px) {
  .vs__dropdown-menu li {
    font-size: 1.4rem;
  }
}

.vs--single.vs--open .vs__selected {
  position: static !important;
  opacity: 1 !important;
}