/* Form Styles */

label:has(input[type=checkbox]),
label:has(input[type=radio]) {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  align-items: start;
  line-height: 1.4;

  input[type=checkbox],
  input[type=radio] {
    margin-top: calc((1em * 1.4 - 18px) / 2);
  }
}

input[type=checkbox],
input[type=radio] {
  position: relative;
  appearance: none;
  display: inline-block;
  vertical-align: -10%;
  height: 18px;
  width: 18px;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--default-transition-timing-function);
  border: 1px solid var(--field-radio-checkbox-border-color);
  background: var(--field-radio-checkbox-background-color);
  flex-shrink: 0;
  padding: 0;

  &::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: var(--field-radio-checkbox-color);
    -webkit-mask: url("/images/ecom-assets/radio-checkbox-mark.svg") no-repeat center / 10px;
    mask: url("/images/ecom-assets/radio-checkbox-mark.svg") no-repeat center / 10px;
    opacity: 0;
    transform: scale(0.6);
    transition-duration: var(--default-transition-duration);
    transition-timing-function: var(--default-transition-timing-function);
  }

  &:focus {
    border-color: var(--field-radio-checkbox-border-color-checked);
  }

  &:checked {
    border-color: var(--field-radio-checkbox-border-color-checked);

    &::after {
      opacity: 1;
      transform: scale(1);
    }
  }

  &:disabled,
  &[disabled] {
    border-color: var(--field-radio-border-color-disabled);
    background-color: var(--field-radio-background-color-disabled);

    &::after {
      background-color: var(--field-radio-mark-color-checked-disabled);
    }
  }
}

/* Bootstrap override */
.form-check-input[type=radio] {
  border-radius: 0;
}

input:not([type]),
input[type=text],
input[type=number],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
textarea {
  appearance: none;
  border: 1px solid var(--field-border-color);
  color: var(--colour-brand-teal-900);
  padding: .375rem .75rem;
  background: var(--field-background-color);
  border-radius: 0;
  transition-duration: var(--default-transition-duration);
  transition-timing-function: var(--default-transition-timing-function);
  line-height: 1.5;
  font-size: var(--font-size-md);

  &:focus {
    color: var(--colour-text);
    background-color: var(--field-background-color-focus);
    border-color: var(--field-border-color-focus);
    outline: 0;
    box-shadow: none;
  }
}

input[type=button],
input[type=reset],
input[type=submit] {
  padding: calc(.375rem + 1px) calc(.75rem + 1px);
  line-height: 1.5;
  font-size: var(--font-size-md);
}

select, .form-select {
  appearance: none;
  border: 1px solid var(--field-border-color);
  color: var(--colour-brand-teal-900);
  padding: .375rem 1.875rem .375rem .75rem;
  background: var(--field-background-color) url(/images/ecom-assets/select-arrow.svg) no-repeat center right 6px / 11px;
  border-radius: 0;

  &:focus {
    background-color: var(--field-background-color-focus);
    border-color: var(--field-border-color-focus);
    outline: 0;
    box-shadow: none;
  }
}

.select2-container {
  &.select2-container--classic {

    .select2-selection--single {
      border: 1px solid var(--field-border-color);
      color: var(--colour-brand-teal-900);
      padding: 0;
      background: var(--field-background-color);
      border-radius: 0;
      transition-duration: var(--default-transition-duration);
      transition-timing-function: var(--default-transition-timing-function);
      height: auto;
      display: flex;

      .select2-selection__rendered {
        color: var(--colour-brand-teal-900);
        line-height: 1.5;
        padding: .375rem .75rem;
        flex: 1;
      }

      .select2-selection__arrow {
        border: none;
        background: transparent url(/images/ecom-assets/select-arrow.svg) no-repeat center right 6px / 11px;
        height: auto;
        position: static;
        width: 1.875rem;
      }

      &:focus {
        background: var(--field-background-color-focus);
        border-color: var(--field-border-color-focus);
      }
    }

    &.select2-container--open {
      &.select2-container--below,
      &.select2-container--above {

        .select2-selection--single {
          background: var(--field-background-color-focus);
          background-image: none;
          border-color: var(--field-border-color-focus);
        }
      }

      .select2-dropdown {
        border-color: var(--field-border-color-focus);
        border-radius: 0;
      }
    }

    .select2-search--dropdown {
      .select2-search__field {
        border: 1px solid var(--field-border-color);
        outline: 0;
      }
    }

    .select2-results__option {
      padding: .375rem;
    }

    .select2-results__option--highlighted {
      &.select2-results__option--selectable {
        background-color: var(--field-highlight-background-color);
        color: var(--field-highlight-color);
      }
    }
  }
}

.select2-container--focus {

}

.help-block {
  font-size: var(--font-size-sm);
  color: var(--colour-text-secondary);
  padding: 2px 10px;
}


/****************************/
/* Forms                    */
/****************************/

.mandatory {
  color: var(--colour-danger);
}

.invalid-input {
  color: #e15000 !important;
  border: solid 1px #e15000 !important;
}

.invalid-input-label {
  color: #e15000 !important;
}

.valid-input {
  border: solid 1px #00a651 !important;
}

.valid-input-label {
  width: 100%;
  color: #00a651 !important;
  opacity: 1;
}

.valid-input-label i.valid-icon {
  position: absolute;
  right: 1px;
  top: 3px;
  background-image: url(/images/valid-icon.png); /* Fallback */
  background-image: url(/images/valid-icon.svg), linear-gradient(transparent, transparent); /* Modern browsers and screens */
  background-repeat: no-repeat;
  background-size: 17px 16px;
  width: 17px;
  height: 16px;
  overflow: visible;
}

.validation-helper {
  text-align: left;
  font-size: var(--font-size-sm);
  letter-spacing: -0.3px;
  position: absolute;
  border-radius: 2.5px;
  background-color: #e15000;
  z-index: 10000;
  color: #fff;
  padding: 3px 7px;
  display: none;
  top: -28px;
  right: 1px;
}

.validation-helper::before {
  top: 100%;
  right: 13px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(225, 80, 0, 0);
  border-top-color: #e15000;
  border-width: 6px;
  margin-left: 0;
}

/* Password strength styles */

#password_indicator {
  box-sizing: border-box;
  padding: 2px 3px;
  width: 100%;
}

#piText, #piText2 {
  text-align: center;
  margin: 0.3em;
  font-weight: bold;
}

.pi-square-container {
  display: flex;
  gap: 2px;
  width: 100%;
}

.pi-square {
  background-color: #a5a5a5;
  height: 5px;
  min-width: 5px;
  width: 100%;
}

.pil1 #piText2, .pil0 #piText2 {
  color: #e83e36;
}

.pil1 .pi-square:nth-child(1) {
  background-color: #e83e36;
}

.pil2 #piText2 {
  color: #fe700b;
}

.pil2 .pi-square:nth-child(1),
.pil2 .pi-square:nth-child(2) {
  background-color: #fe700b;
}

.pil3 #piText2 {
  color: #f2a80d;
}

.pil3 .pi-square:nth-child(1),
.pil3 .pi-square:nth-child(2),
.pil3 .pi-square:nth-child(3) {
  background-color: #f2a80d;
}

.pil4 #piText2 {
  color: #11a768;
}

.pil4 .pi-square {
  background-color: #11a768;
}

#passwordAdditionalInfo, span[id$="-mismatchMessage"] {
  display: block;
  padding: 4px 12px;

  .warning {
    color: var(--colour-danger);
  }
}

.show-password:hover,
.hide-password:hover {
  cursor: pointer;
}

.show-password, .hide-password {
  width: 125px;
  /*float: right;*/
  margin-right: 25px;
  margin-top: -48px;
  display: block;
  text-align: right;
  padding-left: 25px;
  background-repeat: no-repeat;
  background-size: 21px 15px;
  background-position: left 2px;
}

.show-password {

  background-image: url(/images/show-icon.png); /* Fallback */
  background-image: url(/images/show-icon.svg), linear-gradient(transparent, transparent); /* Modern browsers and screens */
}

.hide-password {
  background-image: url(/images/hide-icon.png); /* Fallback */
  background-image: url(/images/hide-icon.svg), linear-gradient(transparent, transparent); /* Modern browsers and screens */
}

/****************************/
/* Quotes                   */
/****************************/

.quotes {
  margin-bottom: 70px;
  margin-top: 50px;
}

blockquote {
  position: relative;
  border: 0;
  padding: 10px 40px;
  margin-bottom: 30px;
  min-height: 160px;
}

blockquote:before {
  font-size: calc(var(--font-size) * 7.5);
  color: #ff0066;
  font-family: "Helvetica Neue LT W01_71488914";
  content: "\201C";
  position: absolute;
  top: -27px;
  left: 0px;
}

blockquote p {
  font-size: var(--font-size-2xl);
  line-height: 1.5;
  font-weight: 300;
}

blockquote p:last-child:after {
  font-size: calc(var(--font-size) * 7.5);
  color: #ff0066;
  font-family: "Helvetica Neue LT W01_71488914";
  display: inline;
  position: relative;
  top: 10px;
  left: 10px;
  content: "\201D";
  line-height: 0;
  vertical-align: text-bottom;
  margin-left: 0;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* Reposition the quote mark for IE10+ */
  blockquote p:last-child:after {
    position: absolute;
    top: auto;
    left: auto;
    right: 15px;
    bottom: 5px;
  }
}

figcaption img {
  width: 75px;
  height: 75px;
}

figcaption cite {
  display: block;
  margin-top: 10px;
  font-size: var(--font-size-lg);
  line-height: 1.4;
  font-weight: 300;
  font-style: normal;
}


/****************************/
/* pre-footers              */
/****************************/

.recaptchaMessage {
  font-size: var(--font-size-sm);
}

#addressLookupResultsBox {
  position: absolute;
  z-index: 10;
  margin-top: -15px;
}

#addressLookupResultsBox div {
  display: inline-block;
}


#postcodeSearch {

}

#postcodeSelect {
  border: 1px solid var(--colour-brand-teal-700);
  border-radius: 0;
  background: #fff;
  padding: 0;

  &:focus option:checked,
  option:checked {
    background: var(--colour-brand-teal-700);
    color: var(--colour-white);
  }

  option {
    padding: .375rem;
    white-space: normal;

    &:hover,
    &:focus {
      background: var(--colour-brand-teal-100);
      color: var(--colour-brand-teal-900);
    }
  }
}

#addressLookupResultsBoxNoResults {
  position: absolute;
  z-index: 10;
  margin-top: -15px;
}

#addressLookupResultsBoxNoResults div {
  display: inline-block;
  border: 1px solid var(--colour-brand-teal-700);
  border-radius: 0;
  background: #fff;
  text-align: left;
  padding: 10px;
}

#addressLookupResultsBoxNoResults div p {
  font-size: var(--font-size-md);
  padding: 0;
  margin: 0;
}

#addressLookupResultsBoxNoResults div p.actionLink {
  color: #00aad1;
}

#addressLookupResultsBoxNoResults div p.actionLink:hover {
  color: #00aad1;
  cursor: pointer;
  text-decoration: underline;
}

.postcodeSelectNoResults {
  display: inline-block;
}


.custom-switch {
  --custom-switch-gutter: var(--space-sm);
  --custom-switch-width: 44px;
  --custom-switch-indicator-size: 11px;
  --custom-switch-padding-width: 4px;
  --custom-switch-border-width: 1px;

  --custom-switch-border-color: var(--colour-brand-grey-400);
  --custom-switch-background-color: var(--colour-bg-main);
  --custom-switch-indicator-color: var(--colour-brand-grey-400-t);
  --custom-switch-border-color-active: var(--colour-brand-teal-700);
  --custom-switch-background-color-active: var(--colour-brand-teal-100);
  --custom-switch-indicator-color-active: var(--colour-brand-grey-400-t);
  --custom-switch-border-color-checked: var(--colour-brand-teal-700);
  --custom-switch-background-color-checked: var(--colour-bg-main);
  --custom-switch-indicator-color-checked: var(--colour-brand-teal-700);
  --custom-switch-border-color-disabled: var(--field-radio-border-color-disabled);
  --custom-switch-background-color-disabled: var(--field-radio-background-color-disabled);
  --custom-switch-indicator-color-disabled: var(--field-radio-mark-color-disabled);
  --custom-switch-indicator-color-checked-disabled: var(--field-radio-mark-color-checked-disabled);

  &:has(label) {
    display: flex;
    flex-direction: row;
    gap: var(--custom-switch-gutter);
    align-items: center;
  }

  input[type=checkbox]::after {
    display: block;
    content: '';
  }

  input[type=checkbox] {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10) inset;
    background-color: var(--custom-switch-background-color);
    width: var(--custom-switch-width);
    height: calc(var(--custom-switch-indicator-size) + var(--custom-switch-padding-width) + var(--custom-switch-padding-width) + var(--custom-switch-border-width) + var(--custom-switch-border-width));
    padding: 0;
    pointer-events: all;
    position: relative;
    border: var(--custom-switch-border-width) solid var(--custom-switch-border-color);
    flex-shrink: 0;
    outline: none;
  }

  input[type=checkbox]::after {
    top: var(--custom-switch-padding-width);
    left: var(--custom-switch-padding-width);
    width: var(--custom-switch-indicator-size);
    height: var(--custom-switch-indicator-size);
    background-color: var(--custom-switch-indicator-color);
    transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-transform .15s ease-in-out;
    position: absolute;
    opacity: 1;
    mask: none;
    transform: none;
  }

  input[type=checkbox]:focus-visible {
    border-color: var(--custom-switch-border-color-active);
    background-color: var(--custom-switch-background-color-active);

    &::after {
      background-color: var(--custom-switch-indicator-color-active);
    }
  }

  input[type=checkbox]:checked {
    border-color: var(--custom-switch-border-color-checked);
    background-color: var(--custom-switch-background-color-checked);

    &:focus-visible {
      background-color: var(--custom-switch-background-color-active);
    }

    &::after {
      background-color: var(--custom-switch-indicator-color-checked);
      transform: translateX(calc(var(--custom-switch-width) - var(--custom-switch-indicator-size) - var(--custom-switch-padding-width) - var(--custom-switch-padding-width) - var(--custom-switch-border-width) - var(--custom-switch-border-width)));
    }
  }

  input[type=checkbox]:disabled,
  input[type=checkbox][disabled] {
    border-color: var(--custom-switch-border-color-disabled);
    background-color: var(--custom-switch-background-color-disabled);

    &::after {
      background-color: var(--custom-switch-indicator-color-disabled);
    }

    &:checked::after {
      background-color: var(--custom-switch-indicator-color-checked-disabled);
    }
  }

  &.rounded {
    input[type=checkbox] {
      border-radius: calc(0.5 * (var(--custom-switch-indicator-size) + var(--custom-switch-padding-width) + var(--custom-switch-padding-width) + var(--custom-switch-border-width) + var(--custom-switch-border-width)));
    }

    input[type=checkbox]::after {
      border-radius: calc(0.5 * var(--custom-switch-indicator-size));
    }
  }
}

.custom-switch.custom-switch-right {
  padding-left: unset;
  padding-right: calc(var(--custom-switch-width) + 0.8rem);

  input[type=checkbox] {
    display: block;
  }

  input[type=checkbox] {
    left: unset;
    right: calc(-1 * (var(--custom-switch-width) + var(--custom-switch-gutter)));
  }

  input[type=checkbox]::after {
    left: unset;
    right: calc(-1 * (var(--custom-switch-gutter) + var(--custom-switch-indicator-size) + var(--custom-switch-padding-width)));
  }
}


/* Download Box */

.download-box {
  background-color: #fbfbfb;
  padding: 5px 10px 20px 15px;
  margin: 20px 10px;
  background: #fff;
}

.download-box p {
  margin-left: 0;
}

.download-box > .icon {
  position: absolute;
  right: 25px;
  top: 27px;
  background-repeat: no-repeat;
}

.download-box > .windows {
  background-image: url(/images/windows-logo.png);
  background-image: url(/images/windows-logo.svg), linear-gradient(transparent, transparent);
  background-size: 115px 25px;
  width: 115px;
  height: 25px;
}

.download-box > .mac {
  background-image: url(/images/mac-logo.png);
  background-image: url(/images/mac-logo.svg), linear-gradient(transparent, transparent);
  background-size: 28px 34px;
  width: 28px;
  height: 34px;
}

.download-box > .linux {
  background-image: url(/images/linux-logo.png);
  background-image: url(/images/linux-logo.svg), linear-gradient(transparent, transparent);
  background-size: 32px 41px;
  width: 32px;
  height: 41px;
}

.download-box h3 {
  margin-left: 0 !important;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
}

.download-box .clean-list li {
  font-size: var(--font-size-md);
}

.download-box .btn {
  margin-top: 30px;
}

.download-standalone-text {
  margin-top: var(--space-md);
  font-size: var(--font-size-sm);
  margin-bottom: 0;
}

.download-standalone-text a {
  color: #3b73af;
}

.order-footer {
  margin-bottom: var(--space-lg);
  line-height: 2.1;

  h2 {
    font-size: var(--font-size-xl);
    margin: var(--space-lg) 0 var(--space-sm);
  }

  h3 {
    font-size: var(--font-size-md);
    color: var(--colour-text);
    font-weight: 400;
    display: inline;
  }

  p {
    display: inline;
  }
}


.gettingStartedDiv {
  position: relative;
  margin: 0 auto;
}

.gettingStarted {
  max-width: var(--bp-lg);
  width: 100%;
  margin: var(--space-lg) auto 0;
  border: 1px solid var(--colour-brand-grey-100);
  background-color: var(--colour-white);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.gettingStartedp2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  justify-content: space-between;
  align-items: center;
  padding: var(--space-xs) 0;
}

.gettingStarted h3 {
  font-size: var(--font-size-2xl);
}

.gettingStarted p {
  font-size: var(--font-size-lg);
}


.gettingStarted .btn-pink {
  border: none;
  border-radius: 0;
  display: inline-block;
  color: var(--button-primary-text-color);
  background-color: var(--button-primary-background-hover);
  background-image: var(--button-primary-background);
  background-size: 100%;
  font: var(--button-primary-font);
  letter-spacing: var(--button-primary-letter-spacing);
  padding: var(--button-primary-padding);
  text-decoration: var(--button-primary-text-decoration);
  text-align: var(--button-primary-text-align);
  line-height: var(--button-primary-line-height);
  transition: all var(--default-transition-duration) var(--default-transition-timing-function);

  &:hover,
  &:focus,
  &:focus-visible,
  &:active {
    background-color: var(--button-primary-background-hover);
    background-size: 1000%;
    color: var(--button-primary-text-color-hover);
  }
}

.gettingStarted .videoDiv {
  width: 314px;
  height: 177px;
  margin: 0 auto;
  background-color: rgba(34, 31, 27, 0.12);
  border-radius: var(--space-xs);
}

.gettingStarted .videoDiv img {
  width: 100%;
  border-radius: 6px;
}

@media (min-width: 768px) {
  .gettingStarted {
    flex-direction: row;
  }

  .gettingStartedp2 {
    align-items: start;
  }
}


.registrationPanel {
  display: flex;
  flex-direction: column;
  background-clip: content-box;

  .pane {
    background: var(--colour-bg-main);
    padding: var(--space-lg);
    border: 1px solid var(--colour-brand-grey-100);
  }

  .error {
    color: var(--colour-danger);
  }
}

.download #content h2 {
  font-size: var(--font-size-4xl);
}

.download-section {
  padding: var(--space-lg) 0 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.download-section__intro-title {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

.download-section__intro-title-heading {
  text-align: center;
}

.download-section__intro-icon {
  background: var(--colour-white);
  padding: var(--space-md);
  border-radius: var(--space-md);
  border: 1px solid var(--colour-brand-grey-100);
}

.download-section__intro-subtitle {
  font-size: var(--font-size-xl);
  font-weight: 400;
  margin-bottom: var(--space-lg);
}

.download-section__next-steps-label {
  font-weight: 600;
}

.download-section__where {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.download #content h2.download-section__where-title {
  font-size: var(--font-size-xlp);
}

table.download-section__shortcuts {
    margin: 0 auto;

    th, td {
      padding: var(--space-xs);
    }

  .download-section__shortcuts-kb {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
  }
}

.download-section__fallback {
  text-align: center;
  font-size: var(--font-size-sm);
  margin-top: var(--space-lg);
}

@media (min-width: 768px) {
  .download-section__intro-title {
    flex-direction: row;
  }

  .download-section__intro-title-heading {
    text-align: left;
  }
}