/*
  Mixins used only in components
*/
/**
  * Class applied to content that should appear only on screen readers (and not user agents designed for
  * for sighted users).
  *
  * It uses the hack that screen readers will still read out content that is rendered well outside the
  * viewport, while other browsers will not render this content where users will see it.
  */
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&display=swap");
@import './bootstrap4-toggle.css';
.screen-reader-only {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  /* added line */
}

.ll-var-v2 {
  --ll-sys-grid-unit: 8px;
  --ll-sys-grid-unit-small: 4px;
  --ll-sys-center-container-max-width: 1384px;
  --ll-sys-center-container-horizontal-padding: calc(var(--ll-comp-hero-button-dimensions) + (5 * var(--ll-sys-grid-unit-small)) * 2);
  --ll-ref-viewport-width-tiny: 320px;
  --ll-ref-viewport-width-extra-small: 480px;
  --ll-ref-viewport-width-small: 640px;
  --ll-ref-viewport-width-medium: 768px;
  --ll-ref-viewport-width-large: 1024px;
  --ll-ref-viewport-width-extra-large: 1440px;
  --ll-ref-viewport-height-medium: 617px;
  --ll-ref-viewport-height-large: 768px;
}

.layout-v2 .center-container {
  width: calc(100% - var(--ll-sys-center-container-horizontal-padding) * 2);
  max-width: var(--ll-sys-center-container-max-width);
}
@media (max-width: 480px), (max-height: 617px) {
  .layout-v2 .center-container {
    width: 100%;
    max-width: 100%;
  }
}

.ll-var-v2 {
  --ll-ref-elevation-level-100: 100;
  --ll-ref-elevation-level-200: 200;
  --ll-ref-elevation-level-300: 300;
  --ll-ref-elevation-level-400: 400;
  --ll-ref-elevation-level-500: 500;
  --ll-ref-elevation-level-600: 600;
  --ll-ref-elevation-level-700: 700;
  --ll-ref-elevation-level-800: 800;
  --ll-sys-elevation-app-bar: var(--ll-ref-elevation-level-700);
  --ll-sys-elevation-header-titlebar: var(--ll-ref-elevation-level-700);
  --ll-sys-elevation-side-bar: var(--ll-ref-elevation-level-700);
  --ll-sys-elevation-side-pullout: var(--ll-ref-elevation-level-500);
  --ll-sys-elevation-pullup: var(--ll-ref-elevation-level-600);
  --ll-sys-elevation-modal: var(--ll-ref-elevation-level-800);
  --ll-sys-elevation-preview-tray: var(--ll-ref-elevation-level-700);
}

.ll-var-v2 {
  --ll-sys-shape-corner-extra-small-default-size: 5px;
  --ll-sys-shape-corner-small-default-size: 8px;
  --ll-sys-shape-corner-extra-small-start-top-left: 5px;
  --ll-sys-shape-corner-extra-small-start-top-right: 5px;
  --ll-sys-shape-corner-extra-small-start-bottom-left: 5px;
  --ll-sys-shape-corner-extra-small-start-bottom-right: 5px;
  --ll-sys-shape-corner-medium-default-size: 12px;
  --ll-sys-edges-boder-thin: 1px;
  --ll-sys-edges-boder-medium: 2px;
  --ll-sys-edges-boder-wide: 3px;
  --ll-sys-edges-boder-extra-wide: 4px;
}

/**
 * Corners
 */
/**
 * Edges
 */
.ll-var-v2 {
  --ll-ref-blue: #007DCD;
  --ll-ref-alt-blue: #0F91D0;
  --ll-ref-alt-lightblue: #00a0e4;
  --ll-ref-alt-darkblue: #0E5F93;
  --ll-ref-light-grey: #D1D1D1;
  --ll-ref-dark-grey: #3C5560;
  --ll-ref-alt-grey: #DEE8ED;
  --ll-ref-yellow: #FFC500;
  --ll-ref-background-transparent: #031924E6;
  --md-ref-colour-blue-50: #E3F2FD;
  --md-ref-colour-blue-100: #BBDEFB;
  --md-ref-colour-blue-200: #90CAF9;
  --md-ref-colour-blue-300: #64B5F6;
  --md-ref-colour-blue-400: #42A5F5;
  --md-ref-colour-blue-500: #2196F3;
  --md-ref-colour-blue-600: #1E88E5;
  --md-ref-colour-blue-700: #1976D2;
  --md-ref-colour-blue-800: #1565C0;
  --md-ref-colour-blue-900: #0D47A1;
  --md-ref-colour-blue-A100: #82B1FF;
  --md-ref-colour-blue-A200: #448AFF;
  --md-ref-colour-blue-A400: #2979FF;
  --md-ref-colour-blue-A700: #2962FF;
  --md-ref-colour-light-green-50: #F1F8E9;
  --md-ref-colour-light-green-100: #DCEDC8;
  --md-ref-colour-light-green-200: #C5E1A5;
  --md-ref-colour-light-green-300: #AED581;
  --md-ref-colour-light-green-400: #9CCC65;
  --md-ref-colour-light-green-500: #8BC34A;
  --md-ref-colour-light-green-600: #7CB342;
  --md-ref-colour-light-green-700: #689F38;
  --md-ref-colour-light-green-800: #558B2F;
  --md-ref-colour-light-green-900: #33691E;
  --md-ref-colour-light-green-A100: #CCFF90;
  --md-ref-colour-light-green-A200: #B2FF59;
  --md-ref-colour-light-green-A400: #76FF03;
  --md-ref-colour-light-green-A700: #64DD17;
  --md-ref-colour-red-50: #FFEBEE;
  --md-ref-colour-red-100: #FFCDD2;
  --md-ref-colour-red-200: #EF9A9A;
  --md-ref-colour-red-300: #E57373;
  --md-ref-colour-red-400: #EF5350;
  --md-ref-colour-red-500: #F44336;
  --md-ref-colour-red-600: #E53935;
  --md-ref-colour-red-700: #D32F2F;
  --md-ref-colour-red-800: #C62828;
  --md-ref-colour-red-900: #B71C1C;
  --md-ref-colour-red-A100: #FF8A80;
  --md-ref-colour-red-A200: #FF5252;
  --md-ref-colour-red-A400: #FF1744;
  --md-ref-colour-red-A700: #D50000;
  --md-ref-colour-orange-50: #FFF3E0;
  --md-ref-colour-orange-100: #FFE0B2;
  --md-ref-colour-orange-200: #FFCC80;
  --md-ref-colour-orange-300: #FFB74D;
  --md-ref-colour-orange-400: #FFA726;
  --md-ref-colour-orange-500: #FF9800;
  --md-ref-colour-orange-600: #FB8C00;
  --md-ref-colour-orange-700: #F57C00;
  --md-ref-colour-orange-800: #EF6C00;
  --md-ref-colour-orange-900: #E65100;
  --md-ref-colour-orange-A100: #FFD180;
  --md-ref-colour-orange-A200: #FFAB40;
  --md-ref-colour-orange-A400: #FF9100;
  --md-ref-colour-orange-A700: #FF6D00;
  --md-ref-colour-blue-grey-50: #ECEFF1;
  --md-ref-colour-blue-grey-100: #CFD8DC;
  --md-ref-colour-blue-grey-200: #B0BEC5;
  --md-ref-colour-blue-grey-300: #90A4AE;
  --md-ref-colour-blue-grey-400: #78909C;
  --md-ref-colour-blue-grey-500: #607D8B;
  --md-ref-colour-blue-grey-600: #546E7A;
  --md-ref-colour-blue-grey-700: #455A64;
  --md-ref-colour-blue-grey-800: #37474F;
  --md-ref-colour-blue-grey-900: #263238;
  --md-ref-colour-white-100: #FFFFFF;
  --md-ref-colour-black-100: #000000;
}

.ll-var-v2 {
  /**
   * Branding colours
   */
  --ll-sys-colour-primary: var(--ll-ref-blue);
  --ll-sys-colour-secondary: var(--md-ref-colour-light-green-700);
  --ll-sys-colour-tertiary: var(--md-ref-colour-orange-400);
  --ll-sys-colour-danger: var(--md-ref-colour-red-A700);
  --ll-sys-colour-white: var(--md-ref-colour-white-100);
  --ll-sys-colour-black: var(--md-ref-colour-black-100);
  --ll-sys-colour-grey: var(--md-ref-colour-blue-grey-600);
  --ll-sys-colour-lightgrey: var(--md-ref-colour-blue-grey-200);
  --ll-sys-colour-lightgrey-alt: var(--ll-ref-alt-grey);
  --ll-sys-colour-disabled: var(--ll-ref-light-grey);
  /**
   * Colour to use when one primary coloured element appears above another one
   */
  --ll-sys-colour-primary-above-primary: var(--ll-ref-alt-blue);
  /**
   * Text colour whenever displayed on a dark background
   */
  --ll-sys-colour-text-on-dark: var(--md-ref-colour-white-100);
  /**
   * Border colour whenever displayed on a dark background
   */
  --ll-sys-colour-border-on-dark: var(--md-ref-colour-white-100);
}

/**
 * Tints are infinite 2 dimensional planes with colour and rules about how content appears on
 * them. They have no edges or shape.
 *
 * Think of these as the filters that light passes through on materials before it reflects back
 * to the viewer's eyes.
 */
/**
 * Tint to use when a primary coloured element appears above another
 */
/**
 * Materials have 3 dimensions with edges (borders), but they don't define shape.
 *
 * Think of these like the raw materials you are building the application with, that still need
 * to be cut down to the right size and shape to be used in the application.
 */
/**
 * Default solid materials (coloured backgrounds with no edges/borders)
 */
/**
 * Variant to use when a solid primary material appears above another primary material
 */
/**
 * Alt solid materials (coloured backgrounds, with a white solid border)
 */
/**
 * Transparent materials
 */
/**
 * Material of all form fields are rendered from.
 *
 * @note it's an inherent property that this material appear interactive to a cursor, so
 *       the pointer attribute is part of it.
 */
.ll-var-v2 {
  --ll-ref-typeface-font: "Mulish", sans-serif;
  --ll-ref-alt-typeface-font: "Helvetica Neueu", sans-serif;
  --ll-ref-typeface-weight-extra-bold: 700;
  --ll-ref-typeface-weight-bold: 600;
  --ll-ref-typeface-weight-medium: 500;
  --ll-ref-typeface-weight-regular: 400;
  --ll-sys-typescale-headline-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-headline-size: 36px;
  --ll-sys-typescale-headline-weight: var(--ll-ref-typeface-weight-bold);
  --ll-sys-typescale-title-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-title-size: 24px;
  --ll-sys-typescale-title-weight: var(--ll-ref-typeface-weight-regular);
  --ll-sys-typescale-body-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-body-size: 16px;
  --ll-sys-typescale-body-weight: var(--ll-ref-typeface-weight-regular);
  --ll-sys-typescale-button-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-button-size: 20px;
  --ll-sys-typescale-button-weight: var(--ll-ref-typeface-weight-bold);
  --ll-sys-typescale-label-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-label-size: 12px;
  --ll-sys-typescale-label-line-height: 16px;
  --ll-sys-typescale-label-weight: var(--ll-ref-typeface-weight-bold);
  --ll-sys-typescale-card-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-card-size: 28px;
  --ll-sys-typescale-card-weight: var(--ll-ref-typeface-weight-bold);
  --ll-sys-typescale-tab-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-tab-size: 20px;
  --ll-sys-typescale-tab-weight: var(--ll-ref-typeface-weight-bold);
  --ll-sys-typescale-titlebar-font: var(--ll-ref-typeface-font);
  --ll-sys-typescale-titlebar-size: 14px;
  --ll-sys-typescale-titlebar-weight: var(--ll-ref-typeface-weight-bold);
}

/**
 * Font to use for labels throughout the application
 */
/**
 * Truncation strategies
 */
/**
 * Truncate text after a certain number of lines
 */
.layout-v2 .headline {
  font-family: var(--ll-sys-typescale-headline-font);
  font-size: var(--ll-sys-typescale-headline-size);
  font-weight: var(--ll-sys-typescale-headline-weight);
  margin-bottom: calc(2 * var(--ll-sys-grid-unit));
  color: var(--ll-sys-colour-black);
}
.layout-v2 .title {
  font-family: var(--ll-sys-typescale-title-font);
  font-size: var(--ll-sys-typescale-title-size);
  font-weight: var(--ll-sys-typescale-title-weight);
  margin-bottom: calc(2 * var(--ll-sys-grid-unit));
  color: var(--ll-sys-colour-black);
}
.layout-v2 .body {
  font-family: var(--ll-sys-typescale-body-font);
  font-size: var(--ll-sys-typescale-body-size);
  font-weight: var(--ll-sys-typescale-body-weight);
  color: var(--ll-sys-colour-grey);
}
.layout-v2 .bold {
  font-weight: var(--ll-ref-typeface-weight-bold);
}
.layout-v2 .error {
  font-family: var(--ll-sys-typescale-body-font);
  font-size: var(--ll-sys-typescale-body-size);
  font-weight: var(--ll-sys-typescale-body-weight);
  color: var(--ll-sys-colour-danger);
}

.ll-var-v2 {
  --ll-comp-button-min-width: calc(15 * var(--ll-sys-grid-unit));
  --ll-comp-button-normal-padding-vertical: calc(2 * var(--ll-sys-grid-unit-small));
  --ll-comp-button-normal-padding-horizontal: calc(7 * var(--ll-sys-grid-unit-small));
  --ll-comp-button-large-padding-vertical: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-button-large-padding-horizontal: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-button-icon-size-large: calc(6 * var(--ll-sys-grid-unit));
  --ll-comp-button-icon-size: calc(3 * var(--ll-sys-grid-unit));
  --ll-comp-button-icon-size-small: calc(7 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .button {
  margin: var(--ll-sys-grid-unit);
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-medium);
  text-transform: capitalize;
  /**
   * Text displays on one line, increasing the size of the button to accommodate. For buttons with
   * shorter labels, enforce a minimum width.
   */
  white-space: nowrap;
  min-width: var(--ll-comp-button-min-width);
  /**
   * Vertically center button text and icon
   */
  padding: var(--ll-comp-button-normal-padding-vertical) var(--ll-comp-button-normal-padding-horizontal);
  /**
   * Icons are a fixed size which, when present, come with their own space before the button's
   * text
   */
  /**
   * Button appear clickable unless they are disabled
   */
  cursor: pointer;
}
.layout-v2 .button:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .button > * {
  display: inline-block;
  vertical-align: middle;
}
.layout-v2 .button img, .layout-v2 .button svg {
  height: var(--ll-comp-button-icon-size);
  margin-right: var(--ll-sys-grid-unit);
}
.layout-v2 .button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.layout-v2 .button.transparent {
  background-color: transparent;
  color: unset;
  border: none;
}
.layout-v2 .button.primary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
}
.layout-v2 .button.secondary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-secondary);
  border: none;
}
.layout-v2 .button.tertiary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-tertiary);
  border: none;
}
.layout-v2 .button.danger {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-danger);
  border: none;
}
.layout-v2 .button.primary-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-primary);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-primary);
}
.layout-v2 .button.secondary-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-secondary);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-secondary);
}
.layout-v2 .button.tertiary-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-tertiary);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-tertiary);
}
.layout-v2 .button.danger-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-danger);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-danger);
}

.layout-v2 .circle-button {
  border-radius: 50%;
  padding: calc(2 * var(--ll-sys-grid-unit-small));
}
.layout-v2 .circle-button .primary .circle-button {
  color: var(--ll-sys-colour-primary);
  background-color: var(--ll-sys-colour-text-on-dark);
  border: none;
}
.layout-v2 .circle-button.primary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
}
.layout-v2 .circle-button.secondary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-secondary);
  border: none;
}
.layout-v2 .circle-button.tertiary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-tertiary);
  border: none;
}
.layout-v2 .circle-button.danger {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-danger);
  border: none;
}
.layout-v2 .circle-button.primary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
}
.layout-v2 .circle-button.secondary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-secondary);
  border: none;
}
.layout-v2 .circle-button.tertiary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-tertiary);
  border: none;
}
.layout-v2 .circle-button.danger {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-danger);
  border: none;
}
.layout-v2 .circle-button.primary-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-primary);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-primary);
}
.layout-v2 .circle-button.secondary-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-secondary);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-secondary);
}
.layout-v2 .circle-button.tertiary-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-tertiary);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-tertiary);
}
.layout-v2 .circle-button.danger-outline {
  background-color: transparent;
  color: var(--ll-sys-colour-danger);
  border: var(--ll-sys-edges-boder-medium) solid var(--ll-sys-colour-danger);
}

.ll-var-v2 {
  --ll-comp-hero-button-dimensions: calc(12 * var(--ll-sys-grid-unit));
  --ll-comp-hero-button-label-padding-vertical: var(--ll-sys-grid-unit-small);
  --ll-comp-hero-button-label-padding-horizontal: calc(2 * var(--ll-sys-grid-unit-small));
  --ll-comp-hero-button-label-height: 40px;
  /**
   * Drop button sizing down on smaller resolutions to maximise space within applications
   */
}
@media (max-width: 1024px), (max-height: 840px) {
  .ll-var-v2 {
    --ll-comp-hero-button-dimensions: calc(6 * var(--ll-sys-grid-unit));
  }
}

.layout-v2 {
  /**
   * Preform some normalisation to get anchor and button tags to appear the same
   */
  /**
   * Hero buttons are square buttons with a hero image and a label that overlays them at the top
   */
}
.layout-v2 a.hero-button {
  display: inline-block;
}
.layout-v2 button.hero-button {
  padding: 0;
  cursor: pointer;
}
.layout-v2 .hero-button {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-ref-alt-darkblue);
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  overflow: hidden;
  width: var(--ll-comp-hero-button-dimensions);
  height: var(--ll-comp-hero-button-dimensions);
  /**
   * Relatively position so that we may place the label absolute within its space
   */
  position: relative;
  cursor: pointer;
}
.layout-v2 .hero-button:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .hero-button-label {
  /**
   * Remove the label at smaller resolutions and focus purely on the image available
   */
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary-above-primary);
  border: none;
  /**
   * Stretch and overlay the label across the top of the image
   */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--ll-sys-elevation-app-bar);
  /**
   * Text is centered and truncates after 2 lines
   */
  font-family: var(--ll-ref-alt-typeface-font);
  font-size: var(--ll-sys-typescale-label-size);
  font-weight: var(--ll-ref-typeface-weight-bold);
  line-height: var(--ll-sys-typescale-label-line-height);
  text-transform: capitalize;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: var(--ll-comp-hero-button-label-padding-vertical) var(--ll-comp-hero-button-label-padding-horizontal);
}
@media (max-width: 1024px), (max-height: 840px) {
  .layout-v2 .hero-button-label {
    display: none;
  }
}
.layout-v2 .hero-button.active {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-sys-colour-white);
  /**
   * In it's active state, the button has an inverted label
   */
}
.layout-v2 .hero-button.active .hero-button-label {
  color: var(--ll-sys-colour-primary);
  background-color: var(--ll-sys-colour-text-on-dark);
  border: none;
}
.layout-v2 .hero-button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.layout-v2 .hero-button svg {
  width: calc(100% - var(--ll-sys-grid-unit) * 2);
  height: calc(100% - var(--ll-sys-grid-unit) * 2);
  -o-object-fit: cover;
     object-fit: cover;
}
.layout-v2 .hero-button-standard-image {
  display: none;
}
@media (max-width: 1024px), (max-height: 840px) {
  .layout-v2 .hero-button-standard-image {
    display: block;
  }
}
@media (max-width: 1024px), (max-height: 840px) {
  .layout-v2 .hero-button-wide-image {
    display: none;
  }
}
.layout-v2 .hero-button-wide-image img {
  max-height: calc(var(--ll-comp-hero-button-dimensions) - var(--ll-sys-edges-boder-wide) * 2 - var(--ll-comp-hero-button-label-height));
  top: var(--ll-comp-hero-button-label-height);
}

.ll-var-v2 {
  --ll-comp-button-size: calc(6 * var(--ll-sys-grid-unit));
  --ll-comp-button-icon-size: calc(3 * var(--ll-sys-grid-unit));
}

.layout-v2 .square-button {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: var(--ll-comp-button-size);
  height: var(--ll-comp-button-size);
  padding: 0;
  color: var(--ll-ref-dark-grey);
  background: var(--ll-ref-light-grey);
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-sys-colour-white);
  cursor: pointer;
  /**
   * Icons and images has a fixed size
   */
}
.layout-v2 .square-button:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .square-button img,
.layout-v2 .square-button svg {
  max-width: 100%;
  max-height: 100%;
}
.layout-v2 .square-button.active.primary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-sys-colour-white);
}
.layout-v2 .square-button.active.secondary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-secondary);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-sys-colour-white);
}
.layout-v2 .square-button.active.tertiary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-tertiary);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-sys-colour-white);
}

.ll-var-v2 {
  --ll-comp-tab-padding-horizontal: calc(4 * var(--ll-sys-grid-unit));
  --ll-comp-tab-padding-vertical: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-tab-min-height: calc(17 * var(--ll-sys-grid-unit-small));
  --ll-comp-tab-min-width: calc(48 * var(--ll-sys-grid-unit-small));
  --ll-comp-tab-span-max-width: calc(17 * var(--ll-sys-grid-unit-small));
  --ll-comp-tab-img-max-height: calc(6 * var(--ll-sys-grid-unit));
  --ll-comp-tab-gap: calc(3 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .tab {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: var(--ll-comp-tab-min-width);
  min-height: var(--ll-comp-tab-min-height);
  border: none;
  border-top-left-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  border-top-right-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  color: var(--ll-ref-dark-grey);
  background: var(--ll-ref-light-grey);
  cursor: pointer;
  margin: 0;
  padding: var(--ll-comp-tab-padding-vertical) var(--ll-comp-tab-padding-horizontal);
  gap: var(--ll-comp-tab-gap);
  /*
   * Prevent image overflowed
   */
  /*
   * Change background and text color when active
   */
}
.layout-v2 .tab:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
@media (max-width: 480px) {
  .layout-v2 .tab {
    flex: 1;
    min-width: 0;
  }
}
.layout-v2 .tab img {
  height: 100%;
  max-height: var(--ll-comp-tab-img-max-height);
}
.layout-v2 .tab span {
  display: block;
  flex-wrap: wrap;
  font-family: var(--ll-sys-typescale-tab-font);
  font-size: var(--ll-sys-typescale-tab-size);
  font-weight: var(--ll-sys-typescale-tab-weight);
  width: var(--ll-comp-tab-span-max-width);
  text-align: left;
}
.layout-v2 .tab.active.primary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
}
.layout-v2 .tab.active.secondary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-secondary);
  border: none;
}
.layout-v2 .tab.active.tertiary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-tertiary);
  border: none;
}
.layout-v2 .tab.active.danger {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-danger);
  border: none;
}

.ll-var-v2 {
  --ll-comp-card-size: calc(19 * var(--ll-sys-grid-unit-small));
  --ll-comp-card-size-small: calc((10 * var(--ll-sys-grid-unit-small)) + 2px);
  --ll-comp-card-size-medium: calc(16 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .pictogram-card {
  /**
   * Cards activate on hover and may remain activated, indicated by a wider border
   */
  font-family: var(--ll-sys-typescale-card-font);
  font-size: var(--ll-sys-typescale-card-size);
  font-weight: var(--ll-sys-typescale-card-weight);
  color: var(--ll-sys-colour-black);
  background: var(--md-ref-colour-white-100);
  border: none;
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: var(--ll-comp-card-size);
  height: var(--ll-comp-card-size);
  padding: 0;
  cursor: pointer;
  transition: 250ms;
}
.layout-v2 .pictogram-card:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .pictogram-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.layout-v2 .pictogram-card-highlight {
  position: absolute;
  border: var(--ll-sys-edges-boder-thin) solid var(--ll-ref-light-grey);
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  width: 100%;
  height: 100%;
}
.layout-v2 .pictogram-card.small {
  width: var(--ll-comp-card-size-small);
  height: var(--ll-comp-card-size-small);
}
.layout-v2 .pictogram-card.medium {
  width: var(--ll-comp-card-size-medium);
  height: var(--ll-comp-card-size-medium);
}
.layout-v2 .pictogram-card.active.primary .pictogram-card-highlight {
  border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-primary);
}
.layout-v2 .pictogram-card.active.secondary .pictogram-card-highlight {
  border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-secondary);
}
.layout-v2 .pictogram-card.active.tertiary .pictogram-card-highlight {
  border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-tertiary);
}
.layout-v2 .pictogram-card.active.danger .pictogram-card-highlight {
  border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-danger);
}
@media not all and (hover: none) {
  .layout-v2 .pictogram-card:hover:hover.primary .pictogram-card-highlight {
    border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-primary);
  }
  .layout-v2 .pictogram-card:hover:hover.secondary .pictogram-card-highlight {
    border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-secondary);
  }
  .layout-v2 .pictogram-card:hover:hover.tertiary .pictogram-card-highlight {
    border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-tertiary);
  }
  .layout-v2 .pictogram-card:hover:hover.danger .pictogram-card-highlight {
    border: var(--ll-sys-edges-boder-extra-wide) solid var(--ll-sys-colour-danger);
  }
}

.ll-var-v2 {
  --ll-comp-dropdown-height: calc(6 * var(--ll-sys-grid-unit));
  --ll-comp-dropdown-padding-vertical: var(--ll-sys-grid-unit);
  --ll-comp-dropdown-padding-horizontal: calc(2 * var(--ll-sys-grid-unit));
  --ll-comp-dropdownlist-padding-vertical: var(--ll-sys-grid-unit-small);
}

.layout-v2 .dropdown {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  height: var(--ll-comp-dropdown-height);
  width: 100%;
  color: var(--ll-sys-colour-black);
  background: var(--md-ref-colour-white-100);
  border: var(--ll-sys-edges-boder-thin) solid var(--ll-sys-colour-lightgrey);
  cursor: pointer;
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  box-shadow: 0px 1px 4px var(--ll-sys-colour-lightgrey);
}
.layout-v2 .dropdown-label {
  color: var(--ll-ref-dark-grey);
  background: var(--ll-ref-light-grey);
  background-color: var(--ll-sys-colour-lightgrey-alt);
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-bold);
  border-top-left-radius: var(--ll-sys-shape-corner-extra-small-start-top-left);
  border-bottom-left-radius: var(--ll-sys-shape-corner-extra-small-start-top-left);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  padding: var(--ll-comp-dropdown-padding-vertical) var(--ll-comp-dropdown-padding-horizontal);
  white-space: nowrap;
}
.layout-v2 .dropdown select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: transparent;
  width: 100%;
  height: 100%;
  padding: var(--ll-comp-dropdown-padding-vertical) var(--ll-comp-dropdown-padding-horizontal);
  padding-right: calc(var(--ll-comp-dropdown-padding-horizontal) + var(--ll-sys-grid-unit) * 2);
  cursor: pointer;
  /*
   * Apply same border radius as the parent container, which in turn styles the focus outline.
   * Applying the radius is enough; The border doesn't need to be visible.
   */
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  border: none;
  /*
   * Share clickable area with custom caret
   */
  z-index: 2;
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-bold);
  color: var(--ll-sys-colour-grey);
  text-overflow: ellipsis;
}
.layout-v2 .dropdown select:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .dropdown-icon {
  position: absolute;
  right: 0;
  /*
   * Add same margin value like parent
   */
  margin-right: var(--ll-comp-dropdown-padding-horizontal);
  color: var(--ll-sys-colour-grey);
}

.ll-var-v2 {
  --ll-comp-textfield-height: calc(6 * var(--ll-sys-grid-unit));
  --ll-comp-textfield-min-width: calc(20 * var(--ll-sys-grid-unit));
  --ll-comp-textfield-input-height: calc((6 * var(--ll-sys-grid-unit)));
  --ll-comp-textfield-padding-horizontal: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-searchtextfield-icon-height: calc(5 * var(--ll-sys-grid-unit-small));
  --ll-comp-searchtextfield-icon-width: calc(5 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .textfield {
  display: flex;
  align-items: center;
  height: var(--ll-comp-htextfield-height);
  width: 100%;
  min-width: var(--ll-comp-textfield-min-width);
  box-shadow: 0px 1px 4px var(--ll-sys-colour-lightgrey);
  /**
   * White background and black border
   */
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  color: var(--ll-sys-colour-black);
  background: var(--md-ref-colour-white-100);
  border: var(--ll-sys-edges-boder-thin) solid var(--ll-sys-colour-lightgrey);
  cursor: pointer;
}
.layout-v2 .textfield-input {
  /*
   * Apply same border radius as the parent container, which in turn styles the focus outline.
   */
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
  /**
   * Reset input view
   */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  height: var(--ll-comp-textfield-input-height);
  width: 100%;
  outline: 0;
  padding-left: var(--ll-comp-textfield-padding-horizontal);
  padding-right: var(--ll-comp-textfield-padding-horizontal);
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-medium);
  text-transform: capitalize;
  text-transform: none;
  font-weight: var(--ll-ref-typeface-weight-regular);
  color: var(--ll-sys-colour-grey);
  background-color: transparent;
  text-overflow: ellipsis;
}
.layout-v2 .textfield-input:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .textfield-input::-moz-placeholder {
  /**
   * Highlighted bold placeholder text
   */
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-medium);
  text-transform: capitalize;
  font-weight: var(--ll-ref-typeface-weight-normal);
  font-style: italic;
  color: var(--ll-sys-colour-grey);
}
.layout-v2 .textfield-input::placeholder {
  /**
   * Highlighted bold placeholder text
   */
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-medium);
  text-transform: capitalize;
  font-weight: var(--ll-ref-typeface-weight-normal);
  font-style: italic;
  color: var(--ll-sys-colour-grey);
}

.ll-var-v2 {
  --ll-comp-searchtextfield-icon-height: calc(5 * var(--ll-sys-grid-unit-small));
  --ll-comp-searchtextfield-icon-width: calc(5 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .search-textfield-button {
  /**
   * Reset input view
   */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /**
   * Fixed height and width,
   */
  height: var(--ll-comp-textfield-input-height);
  width: var(--ll-comp-textfield-height);
  border-top-left-radius: var(--ll-sys-shape-corner-extra-small-start-top-left);
  border-bottom-left-radius: var(--ll-sys-shape-corner-extra-small-start-top-left);
  background-color: transparent;
}
.layout-v2 .search-textfield-button-icon {
  height: var(--ll-comp-searchtextfield-icon-height);
  width: var(--ll-comp-searchtextfield-icon-width);
  color: var(--ll-sys-colour-grey);
  font-weight: var(--ll-ref-typeface-weight-bold);
}
.layout-v2 .search-textfield input {
  /*
   * Negate the default corner radius applied to textfields. Then apply a radius to the right side only.
   * This allows the left side of the search input to sit flush against the right side of the search button.
   * This styles the focus outline.
   */
  border-radius: 0;
  border-top-right-radius: var(--ll-sys-shape-corner-extra-small-start-top-right);
  border-bottom-right-radius: var(--ll-sys-shape-corner-extra-small-start-bottom-right);
  padding-left: 0;
}
.layout-v2 .search-textfield input:focus-visible {
  outline: 2px solid var(--ll-sys-colour-primary);
}
.layout-v2 .search-textfield.submit input {
  border-radius: 0;
  border-top-left-radius: var(--ll-sys-shape-corner-extra-small-start-top-left);
  border-bottom-left-radius: var(--ll-sys-shape-corner-extra-small-start-top-left);
  padding-left: var(--ll-sys-grid-unit);
}
.layout-v2 .search-textfield.submit .search-textfield-button {
  height: var(--ll-comp-textfield-input-height);
  width: calc(var(--ll-sys-grid-unit) * 16);
  background-color: var(--ll-sys-colour-primary);
  border-radius: 0;
  color: var(--ll-sys-colour-white);
  padding: 0 var(--ll-sys-grid-unit);
  border-top-right-radius: var(--ll-sys-shape-corner-extra-small-start-top-right);
  border-bottom-right-radius: var(--ll-sys-shape-corner-extra-small-start-bottom-right);
  font-family: var(--ll-sys-typescale-button-font);
  font-size: var(--ll-sys-typescale-button-size);
  font-weight: var(--ll-ref-typeface-weight-medium);
  text-transform: capitalize;
}
.layout-v2 .search-textfield.submit .search-textfield-button-icon {
  color: var(--ll-sys-colour-white);
  margin-right: var(--ll-sys-grid-unit);
}

.ll-var-v2 {
  --ll-comp-appbar-padding: calc(5 * var(--ll-sys-grid-unit-small));
  --ll-comp-appbar-height: calc(20 * var(--ll-sys-grid-unit-small));
  --ll-comp-appbar-logo-size: calc(36 * var(--ll-sys-grid-unit));
  --ll-comp-appbar-icon-size: calc(14 * var(--ll-sys-grid-unit-small));
  --ll-comp-appbar-indicator-height: calc(5 * var(--ll-sys-grid-unit));
  --ll-comp-appbar-icon-padding: calc(2 * var(--ll-sys-grid-unit-small));
}
@media (max-width: 480px) {
  .ll-var-v2 {
    /**
     * Reduced logo's size
     */
    --ll-comp-appbar-logo-size: calc(21 * var(--ll-sys-grid-unit));
    /**
     * Reduced home button's size
     */
    --ll-comp-appbar-icon-size: calc(11 * var(--ll-sys-grid-unit-small));
    /**
     * Reduced appbar padding
     */
    --ll-comp-appbar-padding: calc(3 * var(--ll-sys-grid-unit-small));
  }
}
@media (max-width: 666px) {
  .ll-var-v2 {
    --ll-comp-appbar-indicator-height: calc(11 * var(--ll-sys-grid-unit-small));
  }
}

.layout-v2 .app-bar {
  /**
   * App bar appears above all content, but below things like the modals
   */
  z-index: var(--ll-sys-elevation-app-bar);
  /**
   * Fixed height and position, that takes up the entire width of the viewport
   */
  position: absolute;
  top: 0;
  left: 0;
  height: var(--ll-comp-appbar-height);
  width: 100%;
  /**
   * Center logo image with a home icon on the left-hand side, such that it does NOT shunt or
   * count towards the centering of the home icon
   */
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: var(--ll-comp-appbar-padding);
}
.layout-v2 .app-bar.solid {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
}
.layout-v2 .app-bar.solid .circle-button {
  color: var(--ll-sys-colour-primary);
  background-color: var(--ll-sys-colour-text-on-dark);
  border: none;
}
.layout-v2 .app-bar.transparent {
  background-color: transparent;
  color: unset;
  border: none;
}
.layout-v2 .app-bar a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.layout-v2 .app-bar a .logo {
  max-width: var(--ll-comp-appbar-logo-size);
  height: 100%;
}
.layout-v2 .app-bar .circle-button {
  /**
   * Position the left-hand corner (so it doesn't occupy any space when calculating the logo's
   * center position.
   */
  position: absolute;
  top: calc((var(--ll-comp-appbar-height) - var(--ll-comp-appbar-icon-size)) / 2);
  width: var(--ll-comp-appbar-icon-size);
  height: var(--ll-comp-appbar-icon-size);
  padding: var(--ll-comp-appbar-icon-padding);
}
.layout-v2 .app-bar .circle-button.left {
  left: var(--ll-comp-appbar-padding);
}
.layout-v2 .app-bar .circle-button.right {
  right: var(--ll-comp-appbar-padding);
}
.layout-v2 .app-bar .circle-button .home-logo {
  width: 100%;
  height: 100%;
}
.layout-v2 .app-bar .indicator {
  position: absolute;
  top: calc((var(--ll-comp-appbar-height) - var(--ll-comp-appbar-indicator-height)) * 0.5);
  right: var(--ll-comp-appbar-padding);
  height: var(--ll-comp-appbar-indicator-height);
}
.layout-v2 .app-bar .indicator.mobile {
  display: none;
}
@media (max-width: 666px) {
  .layout-v2 .app-bar .indicator {
    display: none;
  }
  .layout-v2 .app-bar .indicator.mobile {
    display: block;
  }
}

.ll-var-v2 {
  --ll-comp-sidebar-padding: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-sidebar-border-colour: var(--ll-sys-colour-border-on-dark);
  /**
   * On smaller viewports, we need to reduce the padding to maximise available space within the applications
   */
}
@media (max-width: 1024px), (max-height: 840px) {
  .ll-var-v2 {
    --ll-comp-sidebar-padding: calc(2 * var(--ll-sys-grid-unit-small));
  }
}

.layout-v2 .sidebar {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: var(--ll-sys-edges-boder-wide) solid var(--ll-sys-colour-white);
  /**
   * Sidebar remains fixed to the left or right of the viewport, vertically centered according
   * to the height of its content (allowing content to move beneath it as the viewport is
   * scrolled).
   */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--ll-sys-elevation-side-bar);
  /**
   * When the viewport is too short to display all the content in the sidebar, allow scrolling
   * to view it
   */
  max-height: 100%;
  /**
   * Lists of items that appear in the sidebar are displayed vertically, with standard spacing
   * between items
   */
  /**
   * The left variant of the sidebar remains pinned to the left side of the viewport with rounded
   * corners on it's right edge
   */
  /**
   * The right variant of the sidebar remains pinned to the right side of the viewport with rounded
   * corners on it's left edge
   */
}
.layout-v2 .sidebar ul {
  overflow-y: auto;
  padding: var(--ll-comp-sidebar-padding);
  display: flex;
  justify-content: center;
}
.layout-v2 .sidebar > ul,
.layout-v2 .sidebar > ol {
  display: flex;
  flex-direction: column;
}
.layout-v2 .sidebar > ul > li + li,
.layout-v2 .sidebar > ol > li + li {
  margin-top: var(--ll-comp-sidebar-padding);
}
.layout-v2 .sidebar.left {
  left: 0;
  border-left: none;
  border-top-right-radius: var(--ll-sys-shape-corner-medium-default-size);
  border-bottom-right-radius: var(--ll-sys-shape-corner-medium-default-size);
}
.layout-v2 .sidebar.right {
  right: 0;
  border-right: none;
  border-top-left-radius: var(--ll-sys-shape-corner-medium-default-size);
  border-bottom-left-radius: var(--ll-sys-shape-corner-medium-default-size);
}
.layout-v2 .sidebar:not(.avoid-bottom) {
  /**
   * On smaller viewports, the sidebar becomes a "bottom bar" or toast and clings to the bottom
   */
}
@media (max-width: 480px), (max-height: 617px) {
  .layout-v2 .sidebar:not(.avoid-bottom) {
    /**
     * Bar remains fixed, across the bottom of the viewport
     */
    left: 0;
    right: 0;
    bottom: 0;
    top: revert;
    transform: revert;
    border-width: 0;
    border-top-width: 3px;
    /**
     * Content displays horizontally, allowing scrolling to see more
     */
    /**
     * Rounding of corners is removed
     */
  }
  .layout-v2 .sidebar:not(.avoid-bottom) > ul,
  .layout-v2 .sidebar:not(.avoid-bottom) > ol {
    flex-direction: row;
  }
  .layout-v2 .sidebar:not(.avoid-bottom) > ul > li + li,
  .layout-v2 .sidebar:not(.avoid-bottom) > ol > li + li {
    margin-top: 0;
    margin-left: var(--ll-comp-sidebar-padding);
  }
  .layout-v2 .sidebar:not(.avoid-bottom).left, .layout-v2 .sidebar:not(.avoid-bottom).right {
    border-radius: 0;
  }
}
.layout-v2 .sidebar.force-bottom {
  /**
   * Bar remains fixed, across the bottom of the viewport
   */
  left: 0;
  right: 0;
  bottom: 0;
  top: revert;
  transform: revert;
  border-width: 0;
  border-top-width: 3px;
  /**
   * Content displays horizontally, allowing scrolling to see more
   */
  /**
   * Rounding of corners is removed
   */
}
.layout-v2 .sidebar.force-bottom > ul,
.layout-v2 .sidebar.force-bottom > ol {
  flex-direction: row;
}
.layout-v2 .sidebar.force-bottom > ul > li + li,
.layout-v2 .sidebar.force-bottom > ol > li + li {
  margin-top: 0;
  margin-left: var(--ll-comp-sidebar-padding);
}
.layout-v2 .sidebar.force-bottom.left, .layout-v2 .sidebar.force-bottom.right {
  border-radius: 0;
}

.ll-var-v2 {
  --ll-comp-soundbutton-size: calc(7 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .sound-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--ll-comp-soundbutton-size);
  height: var(--ll-comp-soundbutton-size);
  padding: 0;
  cursor: pointer;
}
.layout-v2 .sound-button:active.primary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
}
.layout-v2 .sound-button:active.secondary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-secondary);
  border: none;
}
.layout-v2 .sound-button:active.tertiary {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-tertiary);
  border: none;
}
.layout-v2 .sound-button:active.danger {
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-danger);
  border: none;
}

.ll-var-v2 {
  --ll-comp-modal-padding: calc(8 * var(--ll-sys-grid-unit-small));
  --ll-comp-modal-header-margin-bottom: var(--ll-sys-grid-unit);
  --ll-comp-modal-closebutton-padding-horizontal: calc(4 * var(--ll-sys-grid-unit-small));
  --ll-comp-modal-closebutton-padding-vertical: calc(3 * var(--ll-sys-grid-unit-small));
}

.layout-v2 .modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: var(--ll-sys-elevation-modal);
}
.layout-v2 .modal-overlay {
  background: var(--ll-ref-background-transparent);
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.layout-v2 .modal-header {
  font-family: var(--ll-sys-typescale-title-font);
  font-size: var(--ll-sys-typescale-title-size);
  font-weight: var(--ll-sys-typescale-title-weight);
  display: flex;
  width: 100%;
  margin-bottom: var(--ll-comp-modal-header-margin-bottom);
}
.layout-v2 .modal-container {
  color: var(--ll-sys-colour-black);
  background: var(--md-ref-colour-white-100);
  border-radius: var(--ll-sys-shape-corner-small-default-size);
  display: flex;
  position: relative;
  margin: auto;
  flex-direction: column;
  flex-wrap: wrap;
  padding: var(--ll-comp-modal-padding);
  max-width: 90%;
}
.layout-v2 .modal-content {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.layout-v2 .modal-close-button {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  color: var(--ll-sys-colour-primary);
  padding: var(--ll-comp-modal-closebutton-padding-vertical) var(--ll-comp-modal-closebutton-padding-horizontal);
}

.ll-var-v2 {
  --ll-comp-previewtray-max-width: calc(173 * var(--ll-sys-grid-unit));
  --ll-comp-previewtray-action-button-padding-vertical: calc(var(--ll-sys-grid-unit));
  --ll-comp-previewtray-action-button-size: calc(6 * var(--ll-sys-grid-unit));
  --ll-comp-previewtray-action-margin-right: calc(4 * var(--ll-sys-grid-unit));
  --ll-comp-previewtray-content-padding: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-previewtray-content-cards-gap: calc(2 * var(--ll-sys-grid-unit));
  --ll-comp-previewtray-content-cards-remove-button-size: calc(7 * var(--ll-sys-grid-unit-small));
  --ll-comp-previewtray-content-actions-gap: calc(2 * var(--ll-sys-grid-unit-small));
  --ll-comp-previewtray-empty-padding: calc(3 * var(--ll-sys-grid-unit));
  --ll-comp-previewtray-content-gap: calc(4 * var(--ll-sys-grid-unit-small));
  --ll-comp-previewtray-bottom: 0;
}
@media (max-width: 480px), (max-height: 617px) {
  .ll-var-v2 {
    --ll-comp-previewtray-action-margin-right: calc(3 * var(--ll-sys-grid-unit-small));
    --ll-comp-previewtray-bottom: calc(var(--ll-comp-hero-button-dimensions) + (2 * var(--ll-comp-sidebar-padding)));
  }
}

.layout-v2 .preview-tray {
  position: fixed;
  bottom: var(--ll-comp-previewtray-bottom);
  left: 50%;
  width: 100%;
  max-width: var(--ll-comp-previewtray-max-width);
  transform: translateX(-50%);
  z-index: var(--ll-sys-elevation-preview-tray);
  pointer-events: none;
}
.layout-v2 .preview-tray-open .preview-tray-action-button {
  /*
   * Rotate chevron when open
   */
}
.layout-v2 .preview-tray-open .preview-tray-action-button svg {
  transform: rotateX(180deg);
  transition-duration: 0.1s;
}
.layout-v2 .preview-tray-open .preview-tray-container {
  height: auto;
}
.layout-v2 .preview-tray-action {
  display: flex;
  justify-content: flex-end;
  margin-right: var(--ll-comp-previewtray-action-margin-right);
}
.layout-v2 .preview-tray-action-button {
  border-top-left-radius: var(--ll-sys-shape-corner-small-default-size);
  border-top-right-radius: var(--ll-sys-shape-corner-small-default-size);
  color: var(--ll-sys-colour-text-on-dark);
  background-color: var(--ll-sys-colour-primary);
  border: none;
  display: inline-block;
  padding: var(--ll-comp-previewtray-action-button-padding-vertical) 20px;
  margin: 0;
  pointer-events: all;
  cursor: pointer;
}
.layout-v2 .preview-tray-container {
  color: var(--ll-sys-colour-black);
  background: var(--md-ref-colour-white-100);
  border: none;
  border-top-left-radius: var(--ll-sys-shape-corner-small-default-size);
  border-top-right-radius: var(--ll-sys-shape-corner-small-default-size);
  box-shadow: 0px -7px 20px rgba(0, 0, 0, 0.1607843137);
  pointer-events: all;
  height: 0;
}
.layout-v2 .preview-tray-content {
  display: flex;
  flex-direction: column;
}
.layout-v2 .preview-tray-content-label {
  font-family: var(--ll-sys-typescale-body-font);
  font-size: var(--ll-sys-typescale-body-size);
  font-weight: var(--ll-sys-typescale-body-weight);
  padding-top: var(--ll-comp-previewtray-content-padding);
  padding-left: var(--ll-comp-previewtray-content-padding);
  padding-right: var(--ll-comp-previewtray-content-padding);
  font-weight: var(--ll-ref-typeface-weight-bold);
  color: var(--ll-sys-colour-grey);
}
.layout-v2 .preview-tray-content-label.italic {
  font-style: italic;
}
.layout-v2 .preview-tray-content-cards-remove-button {
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  width: var(--ll-comp-previewtray-content-cards-remove-button-size);
  height: var(--ll-comp-previewtray-content-cards-remove-button-size);
  z-index: calc(1 + var(--ll-sys-elevation-preview-tray));
}
.layout-v2 .preview-tray-content-cards-remove-button svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 480px) {
  .layout-v2 .preview-tray-content-cards {
    margin-bottom: var(var(--ll-comp-previewtray-content-cards-gap));
  }
}
.layout-v2 .preview-tray-content-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--ll-comp-previewtray-content-padding);
  padding-left: var(--ll-comp-previewtray-content-padding);
  padding-right: var(--ll-comp-previewtray-content-padding);
}
.layout-v2 .preview-tray-content-actions-right {
  display: flex;
  flex-direction: row;
  gap: var(--ll-comp-previewtray-content-actions-gap);
}
.layout-v2 .preview-tray-content-actions button {
  margin: 0;
}
@media (max-width: 480px) {
  .layout-v2 .preview-tray-content-actions button {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--ll-comp-previewtray-action-button-size);
    height: var(--ll-comp-previewtray-action-button-size);
    padding: 0;
  }
  .layout-v2 .preview-tray-content-actions button svg {
    margin-right: 0;
  }
}
@media (max-width: 480px) {
  .layout-v2 .preview-tray-content-actions-label {
    display: none;
  }
}
.layout-v2 .preview-tray-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--ll-comp-previewtray-empty-padding);
  /*
   * Change orientation in mobile viewports
   */
}
.layout-v2 .preview-tray-empty-label {
  font-family: var(--ll-sys-typescale-body-font);
  font-size: var(--ll-sys-typescale-body-size);
  font-weight: var(--ll-sys-typescale-body-weight);
  font-weight: var(--ll-ref-typeface-weight-extra-bold);
  color: var(--ll-sys-colour-grey);
}
@media (max-width: 480px) {
  .layout-v2 .preview-tray-empty {
    flex-direction: column;
  }
  .layout-v2 .preview-tray-empty-label {
    text-align: center;
  }
}

.ll-var-v2 {
  --ll-comp-header-padding-horizontal: calc(4 * var(--ll-sys-grid-unit-small));
  --ll-comp-header-padding-vertical: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-header-closebutton-padding-horizontal: calc(4 * var(--ll-sys-grid-unit-small));
  --ll-comp-header-closebutton-padding-vertical: calc(3 * var(--ll-sys-grid-unit-small));
  --ll-comp-header-padding-right: calc(var(--ll-comp-header-closebutton-padding-horizontal));
}

.layout-v2 .header-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: var(--ll-sys-elevation-header-titlebar);
  width: 100%;
  padding: var(--ll-comp-header-padding-vertical) var(--ll-comp-header-padding-horizontal);
  pointer-events: none;
  touch-action: none;
}
.layout-v2 .header-titlebar span {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--ll-sys-typescale-titlebar-font);
  font-size: var(--ll-sys-typescale-titlebar-size);
  font-weight: var(--ll-sys-typescale-titlebar-weight);
  padding-right: var(--ll-comp-header-padding-right);
  font-weight: var(--ll-ref-typeface-weight-regular);
}
.layout-v2 .header-titlebar-close-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: transparent;
  color: var(--ll-sys-colour-black);
  font-family: var(--ll-sys-typescale-body-font);
  font-size: var(--ll-sys-typescale-body-size);
  font-weight: var(--ll-sys-typescale-body-weight);
  border: 0;
  pointer-events: all;
  padding: 0;
}

.toolbar img {
  --ll-comp-hero-button-label-height: 0 !important;
  width: 75% !important;
  height: 75% !important;
  margin-left: 12.5% !important;
  margin-top: 12.5% !important;
}
.toolbar .pictogram {
  padding: var(--ll-sys-grid-unit-small) !important;
  padding-left: 0 !important;
}
.toolbar .pictogram img {
  margin-left: 18% !important;
}
.toolbar .pictogram.activated {
  background-color: var(--ll-sys-colour-secondary);
}
.toolbar .pictogram.inactivated {
  background-color: var(--ll-ref-light-grey);
}
.toolbar .word {
  padding: 0 var(--ll-sys-grid-unit-small) 0 !important;
}
.toolbar .word img {
  -o-object-fit: contain;
     object-fit: contain;
}
.toolbar .word.activated {
  background-color: var(--ll-sys-colour-tertiary);
}
.toolbar .word.inactivated {
  background-color: var(--ll-ref-light-grey);
}
.toolbar .play {
  background-color: var(--ll-sys-colour-primary-above-primary) !important;
}
.toolbar .play svg {
  width: 30% !important;
  height: 30% !important;
}
.toolbar .space {
  background-color: var(--ll-ref-alt-blue) !important;
  padding: var(--ll-sys-grid-unit-small) !important;
}
.toolbar .space img {
  -o-object-fit: contain;
     object-fit: contain;
}
.toolbar .add {
  background-color: var(--ll-ref-yellow) !important;
}
.toolbar .blend {
  background-color: var(--ll-sys-colour-tertiary) !important;
  padding: var(--ll-sys-grid-unit-small) !important;
}
.toolbar .blend img {
  -o-object-fit: contain;
     object-fit: contain;
}

#home {
  --ll-home-column-width-small: 165px;
  --ll-home-column-width-large: 230px;
  --ll-comp-feature-card-width-small: var(--ll-home-column-width-small);
  --ll-comp-feature-card-width-large: var(--ll-home-column-width-large);
}
#home .headline {
  font-weight: var(--ll-ref-typeface-weight-extra-bold);
}
#home .settings-buttons .settings-button {
  display: flex;
  align-items: center;
  width: var(--ll-comp-feature-card-width);
  height: 48px;
  border: none;
  background-color: var(--md-ref-colour-white-100);
  font-size: 0.875rem;
  line-height: 1rem;
  white-space: normal;
  color: var(--ll-ref-alt-blue);
  margin: 0;
}
#home .settings-buttons .settings-button svg {
  margin-right: var(--ll-sys-grid-unit);
  color: var(--ll-ref-blue);
}
@media (min-width: 640px) {
  #home .settings-buttons .settings-button {
    font-size: 1rem;
  }
}

:root {
  --ll-ref-red: #f00;
  --ll-ref-grey-trout: #495057;
}

.text-yellow {
  color: #ffc600;
}

.text-red-sunglo {
  color: #e06666;
}

.text-blue-denim {
  color: #0b67b2;
}

.text-blue-cerulean {
  color: #0F91D0;
}

.background-blue-cerulean {
  background: #0F91D0;
}

.text-green-celery {
  color: #a8cc4f;
}

.text-orange-jaffa {
  color: #f39200;
}

.text-blue-bright-turquoise {
  color: #1ec5f0;
}

.text-grey-dusty {
  color: #959595;
}

.navigation {
  --ll-comp-navigation-button-width: calc(var(--ll-sys-grid-unit) * 6);
  --ll-comp-navigation-button-height: calc(var(--ll-sys-grid-unit) * 6);
}
.navigation .navigation-sticky {
  position: sticky;
  top: var(--ll-comp-body-padding-top);
}
.navigation .card {
  --ll-comp-teacher-guides-rollout-width: calc(var(--ll-sys-grid-unit) * 2);
  --ll-comp-teacher-guides-link-margin: var(--ll-sys-grid-unit);
  --ll-comp-teacher-guides-base-list-padding: calc(var(--ll-sys-grid-unit-small) * 3);
  display: block;
  max-width: 70vw;
  max-height: calc(100vh - var(--ll-comp-appbar-height) - var(--ll-comp-body-padding-top) - var(--ll-comp-navigation-button-width));
}
.navigation .card.show {
  overflow-x: auto;
}
.navigation .card .teacher-guide-group {
  align-items: center;
  flex-wrap: nowrap;
}
.navigation .card .list-holder {
  display: inline-block;
}
.navigation .card .page-title {
  text-wrap: nowrap;
  padding: 0 var(--ll-sys-grid-unit);
  font-size: 14px;
}
.navigation .card .page-title.active {
  border-radius: 5px;
  background: #E1F3FF;
}
.navigation .card .page-title.active :first-child {
  color: #495057;
}
.navigation .card .navigation-group {
  padding: calc(var(--ll-sys-grid-unit) * 2);
}
.navigation .card .border-bottom {
  display: none;
  width: 100%;
}
.navigation .card .border-bottom:not(:last-of-type) {
  display: block;
}
.navigation .card ul {
  list-style-type: none;
  padding-inline-start: var(--ll-comp-teacher-guides-base-list-padding);
  display: inline-block;
  margin-bottom: 0;
  min-width: 100%;
}
.navigation .card ul .icon-holder {
  background: none;
  border: none;
  width: var(--ll-comp-teacher-guides-rollout-width);
  height: var(--ll-comp-teacher-guides-rollout-width);
  min-width: var(--ll-comp-teacher-guides-rollout-width);
  min-height: var(--ll-comp-teacher-guides-rollout-width);
  transition: transform 0.35s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navigation .card ul button[aria-expanded=true] {
  transform: rotate(90deg);
}
.navigation .card .indicator-holder + .icon-holder {
  margin-left: var(--ll-sys-grid-unit);
}
.navigation .card-body {
  padding: 0.6rem;
}
.navigation .menu-toggle {
  width: 100%;
}
.navigation .menu-toggle .btn-primary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: var(--ll-sys-colour-primary);
  width: 100%;
  min-width: var(--ll-comp-navigation-button-width);
  height: var(--ll-comp-navigation-button-height);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.navigation .menu-toggle .btn-primary svg {
  transition: transform 0.35s ease;
}
.navigation .menu-toggle .btn-primary[aria-expanded=true] svg {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .navigation {
    --ll-comp-navigation-button-width: calc(var(--ll-sys-grid-unit) * 3);
  }
  .navigation .navigation-sticky {
    position: fixed;
    top: var(--ll-comp-appbar-height);
    z-index: 999;
  }
  .navigation .menu-toggle button {
    font-size: 8px;
  }
  .navigation .card {
    width: 100vw;
    max-width: 100vw;
  }
}
.indicator-holder .fa-dot-circle {
  color: orange;
}
.indicator-holder .fa-check-circle {
  color: green;
}

.news-notification img {
  width: 100%;
}
.news-notification.header-card img {
  max-height: 100px;
  width: auto;
}
.news-notification .btn {
  white-space: nowrap;
}
.news-notification .card-title {
  font-size: 16px;
}
.news-notification .card-text, .news-notification a {
  font-size: 13px;
}

.news-notifications .header-card, .news-notifications .feed-card {
  display: none !important;
}
.news-notifications.feed-column, .news-notifications.feed-list {
  width: calc(var(--ll-comp-feature-card-width-large) * 1.2);
  min-width: calc(var(--ll-comp-feature-card-width-large) * 1.2);
}
.news-notifications.feed-column {
  --ll-comp-news-notification-title-height: calc(var(--ll-sys-grid-unit-small) * 7);
}
.news-notifications.feed-column .title {
  font-size: 22px;
  height: var(--ll-comp-news-notification-title-height);
}
.news-notifications.feed-column .cards-container {
  height: calc(100% - var(--ll-comp-news-notification-title-height));
  padding-right: 10px;
  overflow: auto;
}
.news-notifications.feed-list {
  --ll-comp-feature-card-width: var(--ll-comp-feature-card-width-large);
  width: 100%;
  align-content: center;
}
.news-notifications.feed-list .title {
  text-align: center;
}
.news-notifications.feed-list .items {
  align-self: center;
  width: calc(var(--ll-comp-feature-card-width) * 1.2);
}
.news-notifications.feed-column, .news-notifications.feed-list {
  display: none !important;
}
@media (min-width: 1025px) {
  .news-notifications.feed-column {
    display: flex !important;
  }
  .news-notifications.feed-column .feed-card {
    display: flex !important;
  }
}
@media (max-width: 1024px) {
  .news-notifications.feed-list {
    display: flex !important;
  }
  .news-notifications.feed-list .feed-card {
    display: flex !important;
  }
}
@media (min-width: 641px) {
  .news-notifications.header .header-card {
    display: flex !important;
  }
}
@media (max-width: 640px) {
  .news-notifications.header .feed-card {
    display: flex !important;
  }
}

.teacher-guides {
  display: flex;
  flex-direction: row;
}
@media (max-width: 640px) {
  .teacher-guides {
    margin-top: calc(var(--ll-sys-grid-unit) * 5);
  }
}

#teacher_guides .btn-link, #teaching_techniques .btn-link {
  color: inherit;
}
#teacher_guides .btn-link:hover, #teaching_techniques .btn-link:hover {
  color: inherit;
}

.section-blocks {
  display: flex;
  margin-bottom: var(--ll-sys-grid-unit);
}
.section-blocks.horizontal {
  flex-direction: row;
}
.section-blocks.horizontal .section-block-holder {
  margin-left: var(--ll-sys-grid-unit);
  margin-right: var(--ll-sys-grid-unit);
}
.section-blocks.horizontal .section-block-holder:first-child {
  margin-left: 0;
}
.section-blocks.horizontal .section-block-holder:last-child {
  margin-right: 0;
}
.section-blocks.vertical {
  flex-direction: column;
  align-items: flex-start;
}
.section-blocks.vertical .section-block-holder {
  margin-top: var(--ll-sys-grid-unit);
  margin-bottom: var(--ll-sys-grid-unit);
}
.section-blocks.vertical .section-block-holder:first-child {
  margin-top: 0;
}
.section-blocks.vertical .section-block-holder:last-child {
  margin-bottom: 0;
}
.section-blocks .section-block-holder {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
.section-blocks .section-block-holder .section-block {
  width: 100%;
  height: 100%;
}
.section-blocks .section-block-holder img {
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: top;
     object-position: top;
}
.section-blocks .document-block .previewable-document {
  aspect-ratio: 16/9;
  min-width: 324px;
  min-height: 300px;
}
.section-blocks .video-block {
  min-width: 300px;
}
.section-blocks .image-block-holder {
  display: flex;
  justify-content: flex-start;
}
.section-blocks figure {
  width: 100%;
}
.section-blocks img {
  width: 100%;
}
.section-blocks figcaption {
  text-align: center;
  padding: var(--ll-sys-grid-unit);
}

.collapsible-section .section-blocks {
  margin: 0 16px;
}

.collapsible-block .section-block {
  padding: 0 16px;
}

h2 {
  font-family: var(--ll-sys-typescale-headline-font);
  font-size: var(--ll-sys-typescale-headline-size);
  font-weight: var(--ll-sys-typescale-headline-weight);
}

.content-icon {
  font-size: 40px;
}

.download-icon {
  font-size: 30px;
}

.layout-v2 {
  --ll-comp-feature-card-width-small: 165px;
  --ll-comp-feature-card-width-large: 230px;
  --ll-comp-feature-card-width: var(--ll-comp-feature-card-width-small);
  --ll-comp-feature-card-title-height: 36px;
}
.layout-v2 .feature-card {
  min-width: var(--ll-comp-feature-card-width);
  width: var(--ll-comp-feature-card-width);
  height: var(--ll-comp-feature-card-width);
  border: none;
  border-radius: var(--ll-sys-shape-corner-extra-small-default-size);
}
.layout-v2 .feature-card .card-title {
  height: var(--ll-comp-feature-card-title-height);
}
.layout-v2 .feature-card .card-title h6 {
  padding: 0 24px;
  height: 100%;
}
.layout-v2 .feature-card .card-title h6 a {
  line-height: 0.8125rem;
  font-size: 0.75rem;
}
.layout-v2 .feature-card .card-body {
  padding: 0 !important;
  background: none;
}
.layout-v2 .feature-card .card-info {
  right: 6px;
  top: 4px;
  z-index: 10;
  color: var(--ll-sys-colour-primary);
}
.layout-v2 .feature-card .card-image {
  position: relative;
  height: 129px;
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.layout-v2 .feature-card .card-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.layout-v2 .feature-card .padlock-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.layout-v2 .feature-card .padlock-overlay .padlock-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 50%;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.5);
  border-width: 2px;
  width: 70px;
  height: 70px;
}
.layout-v2 .feature-card:not(:last-child) {
  margin-right: 1rem;
}
.layout-v2 .feature-card[data-locked] {
  opacity: 0.5;
}
.layout-v2 .feature-card[data-locked] img {
  filter: grayscale(1);
}
.layout-v2 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--ll-comp-feature-card-width));
  justify-content: center;
  grid-gap: calc(var(--ll-sys-grid-unit) * 2);
}
@media (min-width: 480px) {
  .layout-v2 .grid {
    justify-content: space-between;
  }
}
.layout-v2 .teaching-technique-card {
  min-width: var(--ll-comp-feature-card-width);
  width: var(--ll-comp-feature-card-width);
  height: calc(var(--ll-comp-feature-card-width-large));
}
.layout-v2 .teaching-technique-card .card-title {
  height: var(--ll-comp-feature-card-title-height);
}
.layout-v2 .teaching-technique-card .card-footer {
  height: 60px;
  width: 100%;
}
.layout-v2 .teaching-technique-card img {
  vertical-align: middle;
  width: 100px;
  height: 100px;
}
@media (min-width: 1440px) {
  .layout-v2 {
    --ll-comp-feature-card-width: var(--ll-comp-feature-card-width-large);
    --ll-comp-feature-card-title-height: 50px;
  }
  .layout-v2 .feature-card {
    min-width: var(--ll-comp-feature-card-width);
    width: var(--ll-comp-feature-card-width);
    height: var(--ll-comp-feature-card-width);
  }
  .layout-v2 .feature-card .card-title h6 a {
    font-size: 0.875rem;
  }
  .layout-v2 .feature-card .card-image {
    height: 180px;
  }
}

.layout-v2 a {
  color: var(--ll-sys-colour-primary);
  text-decoration: none;
}
.layout-v2 a:hover {
  color: var(--ll-sys-colour-primary);
  text-decoration: underline;
}

.ck-content {
  --ll-comp-ckeditor-link-color: #204F9B;
}
.ck-content a {
  color: var(--ll-comp-ckeditor-link-color) !important;
  text-decoration: underline !important;
}
.ck-content a span {
  color: var(--ll-comp-ckeditor-link-color) !important;
  text-decoration: underline !important;
}
.ck-content .table {
  width: -moz-fit-content;
  width: fit-content;
}