/**
 * These breakpoints' pixels are used in the legacy
 * breakpoint mixin only.
 *
 * The container-breakpoint mixin breakpoints are defined in the
 * LearnDash\Core\Template\Breakpoints PHP class.
 *
 * The names of the breakpoints are used in both mixins.
 * Please keep those synced.
 */
/**
 * This is the required way to use breakpoints in the project.
 *
 * @param {String}              $name - The name of the breakpoint.
 * @param {Boolean|String|List} $container - If true, the breakpoint class will
 *                                  be applied directly to the current element.
 *                                  If a string (or list) is provided, the
 *                                  breakpoint class will be applied directly
 *                                  to the provided container with the current
 *                                  element as a child selector. If false, the
 *                                  breakpoint class will be applied as an
 *                                  ancestor of the current element.
 */
/**
 * This is the legacy way to use breakpoints in the project.
 * Don't use it unless you have a very good reason,
 * you have to provide it in the PR.
 *
 * @param {String} $name - The name of the breakpoint.
 * @param {String} $type - The type of the breakpoint.
 *                         Can be 'min' or 'max'.
 */
:root {
  --ld-typography-font-family: inter, -apple-system, roboto, ubuntu, sans-serif;
  --ld-typography-font-weight-regular: 400;
  --ld-typography-font-weight-medium: 500;
  --ld-typography-font-weight-bold: 700;
  --ld-typography-desktop-h1-size: 4rem;
  --ld-typography-desktop-h1-height: 4.5rem;
  --ld-typography-desktop-h1-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-h1-spacing: -2%;
  --ld-typography-desktop-h1-margin: var(--ld-spacer-8);
  --ld-typography-mobile-h1-size: 3rem;
  --ld-typography-mobile-h1-height: 3.5rem;
  --ld-typography-mobile-h1-margin: var(--ld-spacer-7);
  --ld-typography-desktop-h2-size: 3rem;
  --ld-typography-desktop-h2-height: 3.5rem;
  --ld-typography-desktop-h2-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-h2-spacing: -2%;
  --ld-typography-desktop-h2-margin: var(--ld-spacer-7);
  --ld-typography-mobile-h2-size: 2.5rem;
  --ld-typography-mobile-h2-height: 3rem;
  --ld-typography-mobile-h2-margin: var(--ld-spacer-6);
  --ld-typography-desktop-h3-size: 2.5rem;
  --ld-typography-desktop-h3-height: 3rem;
  --ld-typography-desktop-h3-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-h3-spacing: -2%;
  --ld-typography-desktop-h3-margin: var(--ld-spacer-6);
  --ld-typography-mobile-h3-size: 2rem;
  --ld-typography-mobile-h3-height: 2.5rem;
  --ld-typography-mobile-h3-margin: var(--ld-spacer-5);
  --ld-typography-desktop-h4-size: 2rem;
  --ld-typography-desktop-h4-height: 2.5rem;
  --ld-typography-desktop-h4-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-h4-spacing: inherit;
  --ld-typography-desktop-h4-margin: var(--ld-spacer-5);
  --ld-typography-mobile-h4-size: 1.5rem;
  --ld-typography-mobile-h4-height: 2rem;
  --ld-typography-mobile-h4-margin: var(--ld-spacer-4);
  --ld-typography-desktop-h5-size: 1.5rem;
  --ld-typography-desktop-h5-height: 2rem;
  --ld-typography-desktop-h5-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-h5-spacing: inherit;
  --ld-typography-desktop-h5-margin: var(--ld-spacer-4);
  --ld-typography-mobile-h5-size: 1.25rem;
  --ld-typography-mobile-h5-height: 1.75rem;
  --ld-typography-mobile-h5-margin: var(--ld-spacer-4);
  --ld-typography-desktop-h6-size: 1.125rem;
  --ld-typography-desktop-h6-height: 1.5rem;
  --ld-typography-desktop-h6-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-h6-spacing: inherit;
  --ld-typography-desktop-h6-margin: var(--ld-spacer-3);
  --ld-typography-mobile-h6-size: 1.125rem;
  --ld-typography-mobile-h6-height: 1.5rem;
  --ld-typography-mobile-h6-margin: var(--ld-spacer-3);
  --ld-typography-desktop-body-large-size: 1.25rem;
  --ld-typography-desktop-body-large-height: 1.75rem;
  --ld-typography-mobile-body-large-size: 1rem;
  --ld-typography-mobile-body-large-height: 1.5rem;
  --ld-typography-desktop-body-size: 1rem;
  --ld-typography-desktop-body-height: 1.5rem;
  --ld-typography-mobile-body-size: 0.875rem;
  --ld-typography-mobile-body-height: 1.375rem;
  --ld-typography-desktop-body-small-size: 0.875rem;
  --ld-typography-desktop-body-small-height: 1.375rem;
  --ld-typography-desktop-caption-size: 0.75rem; /* 12px */
  --ld-typography-desktop-caption-height: 1.25rem; /* 20px */
  --ld-typography-mobile-caption-size: 0.75rem;
  --ld-typography-mobile-caption-height: 1.25rem;
  --ld-typography-desktop-pre-title-size: 0.75rem;
  --ld-typography-desktop-pre-title-height: 1.25rem;
  --ld-typography-desktop-pre-title-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-pre-title-spacing: 3%;
  --ld-typography-desktop-pre-title-transform: uppercase;
  --ld-typography-mobile-pre-title-size: 0.75rem;
  --ld-typography-mobile-pre-title-height: 1.25rem;
  --ld-typography-desktop-button-text-size: var(--ld-typography-desktop-body-size);
  --ld-typography-desktop-button-text-height: var(--ld-typography-desktop-body-height);
  --ld-typography-desktop-button-text-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-button-text-spacing: 3%;
  --ld-typography-mobile-button-text-size: var(--ld-typography-mobile-body-size);
  --ld-typography-mobile-button-text-height: var(--ld-typography-mobile-body-height);
  --ld-typography-desktop-link-size: 1rem;
  --ld-typography-desktop-link-height: 1.5rem;
  --ld-typography-desktop-link-weight: var(--ld-typography-font-weight-bold);
  --ld-typography-desktop-link-decoration: underline;
  --ld-typography-mobile-link-size: 0.875rem;
  --ld-typography-mobile-link-height: 1.375rem;
}

:root {
  /** Colors **/
  --ld-color-semantic-success: #2f8351;
  --ld-color-semantic-error: #db0000;
  --ld-color-system-body-text: #333;
  --ld-color-system-middle-gray: #d2d7e2;
  --ld-color-system-middle-gray-light: #edf0f5;
  --ld-color-system-light-2: #f6f8fa;
  --ld-color-system-subtle: #73738c;
  --ld-color-system-subtle-text: var(--ld-color-system-subtle);
  /** Forms **/
  --ld-color-field-bg: var(--ld-color-system-white);
  --ld-color-field-border: var(#8694B1);
  --ld-color-field-border-error: var(--ld-color-semantic-error);
  --ld-color-field-border-valid: var(--ld-color-semantic-success);
  --ld-color-field-error: var(--ld-color-semantic-error);
}

:root {
  /** Colors **/
  --ld-color-brand-primary: #235af3;
  --ld-color-brand-secondary: #f3b33e;
  --ld-color-brand-tertiary: #479bf8;
  --ld-color-semantic-success: #3eab6a;
  --ld-color-semantic-error: #e65255;
  --ld-color-system-validation-error: #db0000;
  --ld-color-semantic-error-light: #faeeee;
  --ld-color-system-validation-success: #2f8351;
  --ld-color-semantic-success-light: #eef7f1;
  --ld-color-system-dark: #0e2a90;
  --ld-color-system-body-text: #4a4a68;
  --ld-color-system-text-dark: #0e0e2c;
  --ld-color-system-subtle: #8c8ca2;
  --ld-color-system-subtle-text: var(--ld-color-system-subtle);
  --ld-color-system-border: #dce1e8;
  --ld-color-system-light-1: #f3f8ff;
  --ld-color-system-light-2: #f7f9fc;
  --ld-color-system-white: #fff;
  /** Alerts **/
  --ld-color-alert-bg: #7a7a7a;
  --ld-color-alert-text: var(--ld-color-system-white);
  /** Site body **/
  --ld-color-body-bg: var(--ld-color-system-white);
  /** TODO: Where should it go? **/
  --ld-color-border: #ddd;
  /** Buttons **/
  --ld-color-button: var(--ld-color-system-white);
  --ld-color-button-bg: var(--ld-color-brand-primary);
  --ld-color-button-bg-hover: var(--ld-color-system-dark);
  --ld-color-button-secondary-border: var(--ld-color-brand-primary);
  --ld-color-button-disabled-bg-hover: #a7adc2;
  --ld-color-button-disabled-border-hover: var(--ld-color-system-subtle-text);
  /** Progress bar **/
  --ld-color-progress-bar-bg: #f5f5f5;
  --ld-color-progress-bar-fg: #000;
  /** Forms **/
  --ld-color-field-bg: var(--ld-color-system-light-1);
  --ld-color-field-bg-hover: var(--ld-color-system-white);
  --ld-color-field-bg-active: var(--ld-color-system-white);
  --ld-color-field-bg-valid: var(--ld-color-system-white);
  --ld-color-field-bg-error: var(--ld-color-system-white);
  --ld-color-field-bg-disabled: var(--ld-color-system-light-2);
  --ld-color-field-border: var(--ld-color-system-subtle);
  --ld-color-field-border-active: var(--ld-color-brand-primary);
  --ld-color-field-border-active-shadow: 0 0 0 4px rgba(50, 89, 235, 0.2);
  --ld-color-field-border-error: var(--ld-color-semantic-error);
  --ld-color-field-border-error-shadow: 0 0 0 4px rgba(230, 82, 85, 0.2);
  --ld-color-field-border-valid: var(--ld-color-semantic-success);
  --ld-color-field-border-valid-shadow: 0 0 0 4px rgba(62, 171, 106, 0.2);
  --ld-color-field-border-disabled: var(--ld-color-system-light-3);
  --ld-color-field-text: var(--ld-color-system-subtle-text);
  --ld-color-field-text-active: var(--ld-color-system-dark);
  --ld-color-field-text-valid: var(--ld-color-system-dark);
  --ld-color-field-text-error: var(--ld-color-system-dark);
  --ld-color-field-text-disabled: var(--ld-color-system-subtle-text);
  --ld-color-field-description: var(--ld-color-system-subtle-text);
  --ld-color-field-error: var(--ld-color-semantic-error);
  --ld-color-label: var(--ld-color-system-dark);
}

.ld-layout {
  display: grid;
  grid-gap: var(--ld-spacer-fixed-6);
  grid-template-areas: "header" "sidebar" "content";
  grid-template-columns: 1fr;
  /**
   * Positions any injected children from a hook to display
   * after the content grid-area.
   *
   * This checks specifically whether the element is not the header,
   * sidebar, or content elements and that they're not a script or style tag.
   *
   * Checking for script and style tags is important as otherwise
   * they'll be rendered as text!
   *
   * It is possible that 3rd parties may need to make CSS adjustments for this
   * to work well with their injected content, but this should cover most cases.
   */
}
.ld-layout,
.ld-layout * {
  -webkit-font-smoothing: antialiased;
}
.ld-layout--no-header {
  grid-template-areas: "sidebar" "content";
}
.ld-layout.ld-breakpoint--extra-small:not(.ld-layout--no-sidebar) {
  grid-template-areas: "header header" "content sidebar";
  grid-template-columns: auto clamp(210px, 30.5%, 285px);
}
.ld-layout.ld-breakpoint--extra-small:not(.ld-layout--no-sidebar).ld-layout--no-header {
  grid-template-areas: "content sidebar";
}
.ld-layout--no-sidebar {
  grid-template-areas: "header" "content";
}
.ld-layout--no-sidebar.ld-layout--no-header {
  grid-template-areas: "content";
}
.ld-layout__header, .ld-layout__sidebar, .ld-layout__content {
  display: grid;
}
.ld-layout__header {
  grid-area: header;
}
.ld-layout__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-4);
  grid-area: sidebar;
  margin-top: var(--ld-spacer-2);
}
.ld-layout__content {
  grid-area: content;
  gap: var(--ld-spacer-6);
}
.ld-layout > *:not(.ld-layout__header):not(.ld-layout__sidebar):not(.ld-layout__content):not(script):not(style) {
  display: flex;
  flex-direction: column;
  grid-column: 1/2;
  grid-row-start: span 1;
}
.ld-layout--no-sidebar .ld-layout > *:not(.ld-layout__header):not(.ld-layout__sidebar):not(.ld-layout__content):not(script):not(style) {
  grid-column: 1/-1;
}

.ld-form .ld-form__field {
  background: var(--ld-color-field-bg);
  border: 1px solid var(--ld-color-field-border);
  border-radius: var(--ld-radius);
  box-sizing: border-box;
  color: var(--ld-color-field-text);
  display: inline-block;
  font-family: var(--ld-typography-font-family);
  font-size: var(--ld-typography-desktop-body-size);
  font-weight: var(--ld-typography-font-weight-regular);
  height: auto;
  line-height: var(--ld-typography-desktop-body-height);
  margin-bottom: var(--ld-spacer-4);
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-3);
}
.ld-form .ld-form__field:active, .ld-form .ld-form__field:focus {
  border-color: var(--ld-color-field-border-active);
  box-shadow: inset 0 0 0 2px var(--ld-color-field-border-active);
  outline: 0;
}
.ld-form .ld-form__field:disabled {
  background: var(--ld-color-field-bg-disabled);
  border-color: var(--ld-color-field-border-disabled);
  color: var(--ld-color-field-text-disabled);
}
.ld-form .ld-form__field:hover {
  background: var(--ld-color-field-bg-hover);
}
.ld-form .ld-form__field--error:not(:focus) {
  border-color: var(--ld-color-field-border-error);
}
.ld-form .ld-form__field--valid {
  border-color: var(--ld-color-field-border-valid);
}
.ld-form .ld-form__field-wrapper--type-radio {
  cursor: pointer;
  position: relative;
}
.ld-form .ld-form__field-wrapper--type-radio input[type=radio] {
  position: absolute;
  height: 1.5em;
  left: -5px;
  opacity: 0;
  top: -2px;
  width: 1.5em;
}
.ld-form .ld-form__field-wrapper--type-radio input[type=radio]:checked + .ld-svgicon__radio .ld-svgicon__radio-select {
  display: inline-block;
}
.ld-form .ld-form__field-wrapper--type-radio input[type=radio]:not(:checked) + .ld-svgicon__radio .ld-svgicon__radio-select {
  display: none;
}
.ld-form input[type=checkbox] {
  border-color: var(--ld-color-field-border);
  border-radius: var(--ld-radius);
  border-width: 1px;
  cursor: pointer;
  margin-right: var(--ld-spacer-1);
  transform: scale(1.5);
  transform-origin: left;
  vertical-align: baseline;
}
.ld-form input[type=checkbox]:after {
  content: "";
  opacity: 0;
  display: block;
  left: 8px;
  top: 4px;
  position: absolute;
  width: 7px;
  height: 13px;
  border: 3px solid var(--form--color-text);
  border-top: 0;
  border-left: 0;
  transform: rotate(30deg);
}
.ld-form input[type=checkbox]:checked:after {
  opacity: 1;
}
.ld-form__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
.ld-form input[type=button]:disabled,
.ld-form input[type=submit]:disabled,
.ld-form input[type=reset]:disabled,
.ld-form button:disabled,
.ld-form .ld-button:disabled {
  cursor: not-allowed;
}

.ld-form__field-error-message {
  color: var(--ld-color-semantic-error);
  display: block;
  font-size: var(--ld-typography-desktop-body-small-size);
  line-height: var(--ld-typography-desktop-body-small-height);
  margin-bottom: var(--ld-spacer-4);
  margin-top: calc(-1 * var(--ld-spacer-1));
}
.ld-form__field-password-wrapper + .ld-form__field-error-message {
  margin-bottom: var(--ld-spacer-1);
  margin-top: var(--ld-spacer-1);
}
.ld-form__field-confirm_password-wrapper + .ld-form__field-error-message {
  margin-bottom: 0;
}

/**
 * Applies base LD button styles.
 *
 * @param {Boolean} $force - Whether to force the button styles by un-setting
 * 								existing styles. This should be used if you need
 * 								to override any possible Theme or Plugin styles.
 * 								If you do not need to be this specific with your
 * 								styles, you should instead use the .ld-button classes.
 * 								Default: true.
 */
/**
 * Applies primary button styles.
 *
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies Secondary button styles.
 *
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies Tertiary button styles.
 *
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies Border button styles.
 *
 * TODO: Remove, it is only used on the Modern Registration page.
 *
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies Mini button styles.
 *
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies styling for a button with an icon on the right side.
 *
 * @param {Boolean} $mini-styles - Whether this is for a mini button.
 * 									Default: false.
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies styling for a button with an icon on the left side.
 *
 * @param {Boolean} $mini-styles - Whether this is for a mini button.
 * 									Default: false.
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies Disabled button styles.
 *
 * @param {Boolean} $using-forced-styles - Whether this is being used in
 * 											conjunction with ld-button( true ). Default: true.
 */
/**
 * Applies provided styles in a way that allows us to force them
 * across multiple pseudo-selectors. Optionally, un-sets all styles
 * before applying the provided styles.
 *
 * This is useful when we really don't want any
 * 3rd party CSS impacting our styling.
 *
 * This mixin should not be used directly, but rather as part of
 * other button styling mixins to give us a way to consistently
 * apply button styling in a variety of scenarios.
 *
 * @param {Boolean} $force - Whether to apply the passed styles across multiple
 * 								pseudo-selectors. Default: true.
 * @param {Boolean} $with-unset - Whether to un-set all styles. This should only
 * 								be used with base styles. Default: false.
 */
.ld-button {
  align-items: center;
  border-radius: var(--ld-button-border-radius);
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--ld-color-system-white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ld-typography-font-family);
  font-size: var(--ld-typography-desktop-button-text-size);
  font-weight: var(--ld-typography-desktop-button-text-weight);
  gap: var(--ld-spacer-fixed-1);
  justify-content: center;
  line-height: var(--ld-typography-desktop-button-text-height);
  margin: 0;
  outline-offset: 2px;
  outline-style: none;
  outline-width: 2px;
  overflow-wrap: break-word;
  padding: var(--ld-spacer-fixed-1) var(--ld-spacer-3);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  width: auto;
  word-break: normal;
  /**
   * We are intentionally using a screen width breakpoint here.
   *
   * This is because we cannot be sure what container size this
   * mixin will be used in ahead of time.
   *
   * We have decided to handle mobile vs desktop button styles based on
   * screen width rather than container width globally.
   */
}
@media (min-width: 720px) {
  .ld-button {
    padding: var(--ld-spacer-fixed-2) var(--ld-spacer-3);
  }
}
.ld-button:focus {
  outline-style: solid;
}
.ld-button:disabled, .ld-button[aria-disabled=true] {
  background-color: var(--ld-color-system-light-2);
  border: 1px solid var(--ld-color-system-border);
  color: var(--ld-color-system-subtle-text);
  cursor: not-allowed;
}
.ld-button:disabled:hover, .ld-button[aria-disabled=true]:hover {
  background-color: var(--ld-color-button-disabled-bg-hover);
  border-color: var(--ld-color-button-disabled-border-hover);
}
.ld-button--primary {
  background-color: var(--ld-color-button-bg);
}
.ld-button--primary:active, .ld-button--primary:hover {
  background-color: var(--ld-color-button-bg-hover);
}
.ld-button--primary:focus {
  outline-color: var(--ld-color-button-bg-hover);
}
.ld-button--secondary {
  background-color: var(--ld-color-system-white);
  border: 2px solid var(--ld-color-button-secondary-border);
  color: var(--ld-color-brand-primary);
}
.ld-button--secondary:active, .ld-button--secondary:focus, .ld-button--secondary:hover {
  background-color: var(--ld-color-system-light-1);
  border-color: var(--ld-color-system-dark);
  color: var(--ld-color-system-dark);
  outline: none;
}
.ld-button--secondary:focus {
  outline-color: var(--ld-color-system-dark);
}
.ld-button--tertiary {
  background-color: var(--ld-color-system-white);
  border: 2px solid transparent;
  color: var(--ld-color-system-body-text);
  outline-offset: 0;
  outline-width: 4px;
}
.ld-button--tertiary:active, .ld-button--tertiary:hover, .ld-button--tertiary:focus {
  border-color: var(--ld-color-brand-primary);
}
.ld-button--tertiary:active, .ld-button--tertiary:hover {
  background-color: var(--ld-color-system-light-1);
  color: var(--ld-color-brand-primary);
}
.ld-button--tertiary:focus {
  outline-color: #d6defb;
}
.ld-button--tertiary:disabled, .ld-button--tertiary[aria-disabled=true] {
  background-color: var(--ld-color-system-white);
  border: none;
}
.ld-button--tertiary:disabled:hover, .ld-button--tertiary[aria-disabled=true]:hover {
  background-color: var(--ld-color-system-light-2);
}
.ld-button--border {
  background: var(--ld-color-field-bg);
  border: 2px solid var(--ld-color-field-border);
  border-radius: 8px;
  color: var(--ld-color-system-body-text);
  font-family: var(--ld-typography-font-family);
  font-size: var(--ld-typography-desktop-body-size);
  font-weight: var(--ld-typography-font-weight-medium);
  line-height: var(--ld-typography-desktop-body-height);
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-3);
}
.ld-button--border:focus {
  border-color: var(--ld-color-system-body-text);
  box-shadow: inset 0 0 0 2px var(--ld-color-system-body-text);
  outline: none;
}
.ld-button--border:active, .ld-button--border:hover {
  background-color: var(--ld-color-system-light-1);
  border-color: var(--ld-color-system-body-text);
  color: var(--ld-color-system-body-text);
  outline: none;
}
.ld-button--mini {
  font-size: var(--ld-typography-desktop-caption-size);
  line-height: var(--ld-typography-desktop-caption-height);
  padding: var(--ld-spacer-fixed-1) var(--ld-spacer-3);
}
.ld-button--mini.ld-button--icon-right {
  padding-right: var(--ld-spacer-2);
}
.ld-button--mini.ld-button--icon-left {
  padding-left: var(--ld-spacer-2);
}
.ld-button--icon-right {
  padding-right: var(--ld-spacer-2);
  /**
   * We are intentionally using a screen width breakpoint here.
   *
   * This is because this we cannot be sure what container size this
   * mixin will be used in ahead of time.
   *
   * We have decided to handle mobile vs desktop button styles based on
   * screen width rather than container width globally.
   */
}
@media (min-width: 720px) {
  .ld-button--icon-right {
    padding-left: var(--ld-spacer-4);
    padding-right: var(--ld-spacer-3);
  }
}
.ld-button--icon-left {
  padding-left: var(--ld-spacer-2);
  /**
   * We are intentionally using a screen width breakpoint here.
   *
   * This is because this we cannot be sure what container size this
   * mixin will be used in ahead of time.
   *
   * We have decided to handle mobile vs desktop button styles based on
   * screen width rather than container width globally.
   */
}
@media (min-width: 720px) {
  .ld-button--icon-left {
    padding-left: var(--ld-spacer-3);
    padding-right: var(--ld-spacer-4);
  }
}

.ld-tab-bar {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-1);
}
.ld-tab-bar.ld-breakpoint--small {
  gap: var(--ld-spacer-3);
}
.ld-tab-bar--single.ld-tab-bar--no-access {
  margin-top: var(--ld-spacer-2);
}
.ld-tab-bar__tabs {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.ld-breakpoint--small .ld-tab-bar__tabs {
  gap: var(--ld-spacer-fixed-0);
}
.ld-tab-bar__tab {
  all: unset;
  align-items: center;
  color: var(--ld-color-system-body-text);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-weight: var(--ld-typography-font-weight-bold);
  gap: var(--ld-spacer-fixed-1);
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-0) var(--ld-spacer-1) var(--ld-spacer-fixed-0);
  position: relative;
  /**
   * Hover styles come first as Hovering over an active item
   * should keep the active styles.
   */
}
.ld-breakpoint--small .ld-tab-bar__tab {
  padding: var(--ld-spacer-1) var(--ld-spacer-fixed-1) var(--ld-spacer-2) var(--ld-spacer-fixed-0);
}
.ld-tab-bar__tab::before {
  border-bottom: 0.125rem solid var(--ld-color-system-middle-gray);
  bottom: 0.125rem;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  width: 100vw;
}
.ld-tab-bar__tab::after {
  border-bottom: 0.25rem solid transparent;
  bottom: 0.125rem;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
}
.ld-tab-bar__tab .ld-svgicon {
  color: var(--ld-color-system-subtle-text);
}
.ld-tab-bar__tab:hover, .ld-tab-bar__tab:focus, .ld-tab-bar__tab:focus-visible, .ld-tab-bar__tab[aria-selected=true] {
  box-shadow: none;
}
.ld-tab-bar__tab:hover .ld-svgicon, .ld-tab-bar__tab:focus .ld-svgicon, .ld-tab-bar__tab:focus-visible .ld-svgicon, .ld-tab-bar__tab[aria-selected=true] .ld-svgicon {
  color: inherit;
}
.ld-tab-bar__tab:hover {
  background-color: unset;
  color: var(--ld-color-system-dark);
}
.ld-tab-bar__tab:hover::after {
  border-color: var(--ld-color-system-dark);
}
.ld-tab-bar__tab[aria-selected=true] {
  background-color: unset;
  color: var(--ld-color-brand-primary);
}
.ld-tab-bar__tab[aria-selected=true]::after {
  border-color: var(--ld-color-brand-primary);
}
.ld-tab-bar__tab:focus, .ld-tab-bar__tab:focus-visible {
  background: var(--ld-color-system-dark);
  color: var(--ld-color-system-white);
}
.ld-tab-bar__tab:focus::after, .ld-tab-bar__tab:focus-visible::after {
  display: none;
}
.ld-tab-bar__panel > p {
  margin-bottom: var(--ld-spacer-3);
}
.ld-tab-bar__panel > * {
  margin-top: 0;
}
.ld-tab-bar__panel .ld-featured-image {
  height: auto;
  margin-bottom: var(--ld-spacer-8);
  width: 100%;
}

.ld-button__password-visibility-toggle {
  background-color: var(--ld-color-field-bg);
}

.ld-registration__wrapper {
  margin: auto;
}
.ld-registration__wrapper.ld-breakpoint--medium {
  display: flex;
  flex-wrap: wrap;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper.ld-breakpoint--medium {
  display: block;
  flex-wrap: wrap;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper.ld-breakpoint--medium .ld-registration-order {
  border-top: none;
  box-sizing: border-box;
  flex: 0 0 100%;
  margin-bottom: 0;
  max-width: 650px;
  padding-left: 0;
  padding-right: 0;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper .ld-registration-order {
  max-width: 650px;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper .ld-registration-order__return {
  font-size: inherit;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper .ld-registration-order__return .dashicons {
  font-size: inherit;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper .ld-registration-order__return-wrapper {
  border-right: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  padding-right: 0;
}
.ld-registration__wrapper--logged-in.ld-registration__wrapper .ld-registration__form {
  border-right: none;
  flex: 0 0 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  padding-right: 0;
}
.ld-registration__wrapper--login .ld-registration__login,
.ld-registration__wrapper--login .ld-registration__login-form {
  display: block;
}
.ld-registration__wrapper--login .ld-registration__register,
.ld-registration__wrapper--login .ld-registration__register-form {
  display: none;
}
.ld-registration__wrapper--register .ld-registration__login,
.ld-registration__wrapper--register .ld-registration__login-form {
  display: none;
}
.ld-registration__wrapper--register .ld-registration__register,
.ld-registration__wrapper--register .ld-registration__register-form {
  display: block;
}
.ld-registration__wrapper .ld-alert {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}
.ld-registration__wrapper--has-order.ld-breakpoint--medium .ld-registration__form {
  border-right: 1px solid var(--ld-color-system-middle-gray);
  box-sizing: border-box;
  flex: 0 0 67%;
  margin-left: 0;
  margin-right: 0;
  max-width: 67%;
  padding-right: var(--ld-spacer-9);
}
.ld-registration__login, .ld-registration__register {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}
.ld-registration__login, .ld-registration__login-form {
  display: none;
}
.ld-registration__register, .ld-registration__register-form {
  display: block;
}
.ld-registration__register-form .ld-password-strength__error {
  display: none;
}
.ld-registration__register, .ld-registration__login {
  margin-bottom: var(--ld-spacer-5);
}
.ld-registration__heading {
  margin-bottom: var(--ld-spacer-5);
}
.ld-registration__p {
  margin-bottom: var(--ld-spacer-5);
}
.ld-registration__register .ld-registration__p:last-child {
  margin-bottom: 0;
}
.ld-registration__login-button {
  display: inline-block;
}
.ld-registration__login-button--active {
  display: none;
}
.ld-registration__form {
  padding-bottom: var(--ld-spacer-6);
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  width: 100%;
}
.ld-registration__form .ld-password-strength {
  margin-bottom: var(--ld-spacer-fixed-1);
}
.ld-registration__login-form input:not([type=checkbox]) {
  margin-bottom: var(--ld-spacer-4);
}
.ld-registration__login-form .login-username,
.ld-registration__login-form .login-password,
.ld-registration__login-form .login-submit,
.ld-registration__login-form .ld-registration__forgot-password,
.ld-registration__login-form .login-remember {
  margin: 0;
}
.ld-registration__login-form .login-remember {
  font-size: var(--ld-typography-desktop-body-size);
  line-height: var(--ld-typography-desktop-body-height);
  margin-bottom: var(--ld-spacer-4);
  padding: var(--ld-spacer-1) 0;
}
.ld-breakpoint--tablet .ld-registration__login-form .login-remember {
  margin-bottom: 0;
}
.ld-registration__login-form .login-remember input,
.ld-registration__login-form .login-remember label {
  margin-bottom: 0;
}
.ld-registration__login-form, .ld-registration__register-form, .ld-registration__forgot-password-form, .ld-registration__reset-password-form {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}
.ld-registration__login-form label, .ld-registration__register-form label, .ld-registration__forgot-password-form label, .ld-registration__reset-password-form label {
  display: block;
  font-size: var(--ld-typography-desktop-body-size);
  line-height: var(--ld-typography-desktop-body-height);
  margin-bottom: var(--ld-spacer-1);
}
.ld-registration__login-form input[type=email],
.ld-registration__login-form input[type=text],
.ld-registration__login-form input[type=password], .ld-registration__register-form input[type=email],
.ld-registration__register-form input[type=text],
.ld-registration__register-form input[type=password], .ld-registration__forgot-password-form input[type=email],
.ld-registration__forgot-password-form input[type=text],
.ld-registration__forgot-password-form input[type=password], .ld-registration__reset-password-form input[type=email],
.ld-registration__reset-password-form input[type=text],
.ld-registration__reset-password-form input[type=password] {
  font-size: var(--ld-typography-desktop-body-size);
  margin-left: 0;
  width: 100%;
}
.ld-registration__login-form input[type=checkbox], .ld-registration__register-form input[type=checkbox], .ld-registration__forgot-password-form input[type=checkbox], .ld-registration__reset-password-form input[type=checkbox] {
  margin-bottom: 3px;
}
.ld-registration__login-form input[name=confirm_password], .ld-registration__register-form input[name=confirm_password], .ld-registration__forgot-password-form input[name=confirm_password], .ld-registration__reset-password-form input[name=confirm_password] {
  margin-bottom: 0;
}
.ld-registration__login-form .login-submit, .ld-registration__register-form .login-submit, .ld-registration__forgot-password-form .login-submit, .ld-registration__reset-password-form .login-submit {
  font-size: var(--ld-typography-desktop-body-size);
  line-height: var(--ld-typography-desktop-body-height);
  padding-top: var(--ld-spacer-5);
}
.ld-breakpoint--tablet .ld-registration__login_options_wrapper {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.ld-registration__forgot-password {
  margin: 0;
}
.ld-breakpoint--tablet .ld-registration__forgot-password {
  text-align: right;
}

.ld-form .ld-form__field {
  margin-bottom: 0;
}
.ld-form .ld-form__field.ld-form__field-password.ld-form__field--valid {
  border-color: var(--ld-color-field-border-valid);
}
.ld-form .ld-form__field.ld-form__field-password.ld-form__field--valid:active, .ld-form .ld-form__field.ld-form__field-password.ld-form__field--valid:focus {
  border-color: var(--ld-color-field-border-valid);
}
.ld-form__field-wrapper {
  margin-bottom: var(--ld-spacer-4);
}

/**
 * Order details
 */
.ld-registration-order {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  padding-bottom: var(--ld-spacer-fixed-4);
  padding-top: var(--ld-spacer-fixed-6);
}
.ld-breakpoint--medium .ld-registration-order {
  box-sizing: border-box;
  flex: 0 0 33%;
  margin-bottom: var(--ld-spacer-fixed-9);
  max-width: 33%;
  padding-left: var(--ld-spacer-fixed-9);
  padding-right: var(--ld-spacer-fixed-9);
}
.ld-registration-order__heading {
  margin-bottom: var(--ld-spacer-5);
  margin-top: 0;
}
.ld-registration-order__items {
  max-width: 350px;
}
.logged-in .ld-registration-order__items {
  max-width: 100%;
}
.ld-breakpoint--medium .ld-registration-order__items {
  max-width: 100%;
}
.ld-registration-order__item-type {
  color: var(--ld-color-system-subtle);
  font-size: var(--ld-typography-desktop-caption-size);
  font-weight: var(--ld-typography-font-weight-bold);
  letter-spacing: 0.36px;
  line-height: var(--ld-typography-desktop-caption-height);
  text-transform: uppercase;
}
.ld-registration-order__item-details {
  display: flex;
  font-size: var(--ld-typography-desktop-body-size);
  justify-content: space-between;
  line-height: var(--ld-typography-desktop-body-height);
}
.ld-registration-order__item-title-wrapper {
  flex-grow: 2;
}
.ld-registration-order__item-price {
  margin-left: 10px;
  text-align: right;
  word-break: normal;
}
.ld-registration-order__item-price-value {
  text-align: right;
}
.ld-registration-order__item-price-original {
  color: var(--ld-color-system-subtle-text);
  visibility: hidden;
  font-size: var(--ld-typography-desktop-caption-size);
  line-height: var(--ld-typography-desktop-caption-height);
  text-align: right;
  text-decoration-line: line-through;
}
.ld-registration-order__items--with-coupon .ld-registration-order__item-price-original {
  visibility: visible;
}
.ld-registration-order__item-interval {
  font-size: var(--ld-typography-desktop-body-small-size);
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-registration-order__item-trial-marker {
  background-color: var(--ld-color-system-middle-gray-light);
  border-radius: 5px;
  display: block;
  font-size: var(--ld-typography-desktop-caption-size);
  margin-bottom: 6px;
  margin-top: var(--ld-spacer-2);
  padding: 3px 9px;
  width: fit-content;
}
.ld-registration-order__total {
  border-top: 1px solid var(--ld-color-system-middle-gray);
  display: flex;
  font-size: var(--ld-typography-desktop-body-size);
  justify-content: space-between;
  line-height: var(--ld-typography-desktop-body-height);
  margin-top: var(--ld-spacer-fixed-5);
  padding-bottom: var(--ld-spacer-fixed-2);
  padding-top: var(--ld-spacer-fixed-2);
}
.ld-registration-order__total-title {
  flex-grow: 2;
  font-weight: var(--ld-typography-font-weight-bold);
}
.ld-registration-order__total-price {
  margin-left: 10px;
  text-align: right;
}
.ld-registration-order__return {
  border-top: 1px solid var(--ld-color-system-middle-gray);
  line-height: var(--ld-typography-desktop-button-text-height);
  margin-bottom: var(--ld-spacer-9);
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  padding-top: var(--ld-spacer-2);
}
.ld-breakpoint--medium .ld-registration-order__return-wrapper {
  border-right: 1px solid var(--ld-color-system-middle-gray);
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 67%;
  padding-right: var(--ld-spacer-9);
}
.ld-registration-order__return .dashicons {
  margin-right: var(--ld-spacer-fixed-1);
  text-decoration: none;
  vertical-align: middle;
}
.ld-registration-order__coupon-form-wrapper {
  border-top: 1px solid var(--ld-color-system-middle-gray);
  margin-top: var(--ld-spacer-fixed-5);
  padding-top: var(--ld-spacer-fixed-5);
}
.ld-registration-order__coupon-form-wrapper label {
  font-size: var(--ld-typography-desktop-body-size);
  font-weight: var(--ld-typography-font-weight-regular);
  line-height: var(--ld-typography-desktop-body-height);
}
.ld-registration-order__checkout-select {
  margin-bottom: var(--ld-spacer-fixed-5);
  margin-top: var(--ld-spacer-fixed-5);
  padding-bottom: var(--ld-spacer-fixed-3);
  padding-top: var(--ld-spacer-fixed-3);
}
.ld-registration-order__checkout-select-item {
  margin-bottom: var(--ld-spacer-fixed-2);
}
.ld-registration-order__checkout-select-item-main, .ld-registration-order__checkout-select-item-info {
  background-color: var(--ld-color-system-light-2);
  border: 1px solid var(--ld-color-system-middle-gray-light);
  border-radius: var(--ld-border-radius);
  padding: var(--ld-spacer-fixed-2);
}
.ld-breakpoint--medium .ld-registration-order__checkout-select-item-main, .ld-breakpoint--medium .ld-registration-order__checkout-select-item-info {
  padding: var(--ld-spacer-fixed-3) var(--ld-spacer-fixed-5) var(--ld-spacer-fixed-2);
}
.ld-registration-order__checkout-select-item-main {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
.ld-registration-order__checkout-select-item-main .ld-form__field-wrapper {
  display: flex;
}
.ld-registration-order__checkout-select-item-main .ld-form__field-wrapper span {
  font-size: var(--ld-typography-desktop-body-size);
  line-height: var(--ld-typography-desktop-body-height);
}
.ld-registration-order__checkout-select-item-info {
  border-color: var(--ld-color-brand-primary);
  display: none;
  font-size: var(--ld-typography-desktop-body-size);
  line-height: var(--ld-typography-desktop-body-height);
  margin-top: 3px;
  padding-bottom: var(--ld-spacer-fixed-3);
}
.ld-registration-order__checkout-select-item:first-child {
  margin-top: 0;
}
.ld-registration-order__checkout-select-item:last-child {
  margin-bottom: 0;
}
.ld-registration-order__checkout-select-item.ld--selected .ld-registration-order__checkout-select-item-main {
  border-color: var(--ld-color-brand-primary);
}
.ld-registration-order__checkout-select-item.ld--selected .ld-registration-order__checkout-select-item-meta .ld-svglogo {
  filter: none;
}
.ld-registration-order__checkout-select-item.ld--selected .ld-registration-order__checkout-select-item-info {
  display: block;
}
.ld-registration-order__checkout-select-item-meta {
  align-self: center;
  display: flex;
  height: fit-content;
  margin-left: var(--ld-spacer-fixed-2);
}
.ld-registration-order__checkout-select-item-meta .ld-svglogo {
  filter: grayscale(1);
  line-height: 0;
}
.ld-registration-order__checkout-select-item .ld-form__field-wrapper--type-radio {
  align-items: center;
  flex-grow: 2;
  font-weight: var(--ld-typography-font-weight-bold);
  margin-bottom: 0;
}
.ld-registration-order__checkout-select-item label {
  display: block;
  width: 100%;
}
.ld-registration-order__checkout-button {
  display: none;
}
.ld-registration-order__checkout-button #btn-join,
.ld-registration-order__checkout-button .button {
  width: auto;
}
.ld-registration-order__checkout-button.ld--selected {
  display: block;
}
.ld-registration-order .ppalholder {
  display: block;
  height: 0;
}

.ld-form__field-password-wrapper {
  margin-bottom: var(--ld-spacer-fixed-1);
}

.ld-form__field-coupon_field {
  width: 100%;
}
.ld-form__field-coupon_field-wrapper {
  display: flex;
  max-width: 450px;
}

.ld-form__coupon {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ld-button__coupon-apply {
  margin-left: 10px;
  overflow-wrap: break-word;
  white-space: normal;
  word-break: normal;
}

.ld-breakpoint--medium .ld-registration__wrapper--logged-in .ld-registration-order-wrapper {
  border-right: none;
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: 650px;
  padding-right: 0;
}

.ld-coupon {
  display: flex;
}
.ld-coupon__alerts {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}
.ld-coupon__wrapper {
  display: none;
}
.ld-registration-order__items--with-coupon .ld-coupon__wrapper {
  display: block;
}
.ld-coupon__details-wrapper {
  background-color: var(--ld-color-system-middle-gray-light);
  border-radius: 5px;
  display: none;
  padding: 7px 9px;
}
.ld-registration-order__items--with-coupon .ld-coupon__details-wrapper {
  display: inline-block;
}
.ld-coupon__remove {
  border: 0;
  cursor: pointer;
  font-size: var(--ld-typography-desktop-body-size);
  line-height: 0;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.ld-coupon__remove, .ld-coupon__remove:hover, .ld-coupon__remove:focus, .ld-coupon__remove:active {
  background-color: transparent;
  box-shadow: none;
}
.ld-coupon__remove:hover svg path {
  fill: #000;
}
.ld-coupon__remove:focus {
  color: inherit;
  outline: solid;
}
.ld-coupon__remove-form {
  align-self: center;
  display: flex;
  line-height: 0;
  margin-left: var(--ld-spacer-2);
  margin-bottom: 0;
  vertical-align: middle;
}
.ld-coupon__label-wrapper {
  display: flex;
}
.ld-coupon__label {
  align-self: center;
  display: flex;
}
.ld-coupon__label-text {
  align-self: center;
  display: inline-block;
  font-weight: var(--ld-typography-font-weight-bold);
  text-transform: uppercase;
  word-break: break-all;
}
.ld-coupon__label--coupon-icon {
  align-self: center;
  margin-right: var(--ld-spacer-1);
}
.ld-coupon__value {
  align-self: center;
  color: var(--ld-color-system-subtle-text);
  display: inline-block;
  font-size: var(--ld-typography-desktop-body-small-size);
  margin-left: var(--ld-spacer-fixed-4);
}
.ld-coupon .ld-svgicon__coupon {
  stroke: var(--ld-color-system-subtle);
}

.ld-enrollment {
  border-radius: var(--ld-border-radius-small);
  border: 1px solid var(--ld-color-system-border);
  color: var(--ld-color-system-body-text);
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-3);
  padding: var(--ld-spacer-4) var(--ld-spacer-fixed-3) var(--ld-spacer-5) var(--ld-spacer-fixed-3);
}
.ld-enrollment__king {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-0);
}
.ld-enrollment__king-label {
  font-size: var(--ld-typography-desktop-body-small-size);
  font-weight: var(--ld-typography-font-weight-regular);
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-enrollment__king-description {
  font-size: var(--ld-typography-desktop-body-large-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-enrollment__subject {
  font-size: var(--ld-typography-desktop-body-small-size);
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-enrollment__pricing, .ld-enrollment__access, .ld-enrollment__status {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-0);
}
.ld-enrollment__pricing-label, .ld-enrollment__status-label {
  color: var(--ld-color-system-body-text);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--ld-typography-desktop-body-small-size);
  font-weight: var(--ld-typography-font-weight-regular);
  line-height: var(--ld-typography-desktop-body-small-height);
  margin-bottom: 0;
  margin-top: 0;
}
.ld-enrollment__pricing-price, .ld-enrollment__status-description {
  color: var(--ld-color-system-body-text);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--ld-typography-desktop-body-large-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-body-small-height);
  margin-bottom: 0;
  margin-top: 0;
}
.ld-enrollment__seats-remaining {
  font-size: var(--ld-typography-desktop-body-small-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-enrollment__join {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-2);
  /**
   * Some themes, like Kadence, may style both
   * .button and input[type="submit"] at the same time,
   * which would both apply to this button in many cases.
   *
   * Nesting the selector like this ensures that
   * we're specific enough to override theme styles.
   */
}
.ld-enrollment__join form {
  margin: 0;
}
.ld-enrollment__join .ld-enrollment__join-button {
  /**
   * We are intentionally using a screen width breakpoint here.
   *
   * This is because we cannot be sure what container size this
   * mixin will be used in ahead of time.
   *
   * We have decided to handle mobile vs desktop button styles based on
   * screen width rather than container width globally.
   */
}
.ld-enrollment__join .ld-enrollment__join-button, .ld-enrollment__join .ld-enrollment__join-button:active, .ld-enrollment__join .ld-enrollment__join-button:focus-visible, .ld-enrollment__join .ld-enrollment__join-button:focus-within, .ld-enrollment__join .ld-enrollment__join-button:focus, .ld-enrollment__join .ld-enrollment__join-button:hover {
  all: unset;
  align-items: center;
  border-radius: var(--ld-button-border-radius);
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--ld-color-system-white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ld-typography-font-family);
  font-size: var(--ld-typography-desktop-button-text-size);
  font-weight: var(--ld-typography-desktop-button-text-weight);
  gap: var(--ld-spacer-fixed-1);
  justify-content: center;
  line-height: var(--ld-typography-desktop-button-text-height);
  margin: 0;
  outline-offset: 2px;
  outline-style: none;
  outline-width: 2px;
  overflow-wrap: break-word;
  padding: var(--ld-spacer-fixed-1) var(--ld-spacer-3);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  width: auto;
  word-break: normal;
}
@media (min-width: 720px) {
  .ld-enrollment__join .ld-enrollment__join-button, .ld-enrollment__join .ld-enrollment__join-button:active, .ld-enrollment__join .ld-enrollment__join-button:focus-visible, .ld-enrollment__join .ld-enrollment__join-button:focus-within, .ld-enrollment__join .ld-enrollment__join-button:focus, .ld-enrollment__join .ld-enrollment__join-button:hover {
    padding: var(--ld-spacer-fixed-2) var(--ld-spacer-3);
  }
}
.ld-enrollment__join .ld-enrollment__join-button:focus {
  outline-style: solid;
}
.ld-enrollment__join .ld-enrollment__join-button:disabled, .ld-enrollment__join .ld-enrollment__join-button[aria-disabled=true] {
  background-color: var(--ld-color-system-light-2);
  border: 1px solid var(--ld-color-system-border);
  color: var(--ld-color-system-subtle-text);
  cursor: not-allowed;
}
.ld-enrollment__join .ld-enrollment__join-button:disabled:hover, .ld-enrollment__join .ld-enrollment__join-button[aria-disabled=true]:hover {
  background-color: var(--ld-color-button-disabled-bg-hover);
  border-color: var(--ld-color-button-disabled-border-hover);
}
.ld-enrollment__join .ld-enrollment__join-button, .ld-enrollment__join .ld-enrollment__join-button:active, .ld-enrollment__join .ld-enrollment__join-button:focus-visible, .ld-enrollment__join .ld-enrollment__join-button:focus-within, .ld-enrollment__join .ld-enrollment__join-button:focus, .ld-enrollment__join .ld-enrollment__join-button:hover {
  background-color: var(--ld-color-button-bg);
}
.ld-enrollment__join .ld-enrollment__join-button:active, .ld-enrollment__join .ld-enrollment__join-button:hover {
  background-color: var(--ld-color-button-bg-hover);
}
.ld-enrollment__join .ld-enrollment__join-button:focus {
  outline-color: var(--ld-color-button-bg-hover);
}
.ld-enrollment__login {
  display: flex;
  flex-direction: row;
  gap: var(--ld-spacer-fixed-1);
}
.ld-enrollment__login-text {
  font-size: var(--ld-typography-desktop-caption-size);
  font-weight: var(--ld-typography-font-weight-regular);
  line-height: var(--ld-typography-desktop-caption-height);
}
.ld-enrollment__login-link {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ld-color-brand-primary);
  cursor: pointer;
  font-size: var(--ld-typography-desktop-caption-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-caption-height);
  outline: none;
  padding: 0;
  text-decoration: underline;
}
.ld-enrollment__login-link:focus, .ld-enrollment__login-link:hover {
  background: none;
  color: var(--ld-color-system-dark);
}

.ld-details {
  border-radius: var(--ld-border-radius-small);
  border: 1px solid var(--ld-color-system-border);
  color: var(--ld-color-system-body-text);
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-5);
  padding: var(--ld-spacer-5) var(--ld-spacer-fixed-4) var(--ld-spacer-6) var(--ld-spacer-fixed-4);
}
.ld-details__section {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-1);
}
.ld-details__heading {
  font-size: var(--ld-typography-desktop-body-large-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-body-large-height);
  margin-bottom: var(--ld-spacer-1);
}
.ld-details__item {
  display: flex;
  gap: var(--ld-spacer-fixed-0);
}
.ld-details__label {
  font-size: var(--ld-typography-desktop-body-small-size);
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-details__link {
  color: var(--ld-color-system-body-text);
}
.ld-details__link:hover, .ld-details__link:focus {
  color: var(--ld-color-brand-primary);
}
.ld-details__link:focus {
  border-radius: var(--ld-border-radius-small);
  outline: solid 2px var(--ld-color-brand-primary);
}
.ld-details__icon-wrapper {
  align-items: center;
  display: flex;
  max-height: var(--ld-typography-desktop-body-small-height);
}
.ld-details__icon {
  height: 18px;
  width: 18px;
}

.ld-accordion {
  display: flex;
  flex-direction: column;
  /**
   * Ensures that we cannot tab into a collapsed accordion.
   *
   * This happens because [hidden] is a browser-level style
   * and is considered very low specificity.
   *
   * If we force it to be display: none, it looks the same
   * and ensures that we cannot tab into the hidden content even
   * if the container is normally something like display: flex.
   *
   * https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
   */
  /**
   * TODO: If this gets added to the global button styles, we should
   * switch to using mixins here.
   */
}
.ld-accordion__header {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-2);
  margin: 0 0 var(--ld-spacer-3) 0;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__header {
  gap: var(--ld-spacer-fixed-1);
}
.ld-accordion__subheading {
  font-size: var(--ld-typography-desktop-body-large-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-body-height);
  padding: var(--ld-spacer-4) var(--ld-spacer-fixed-2) var(--ld-spacer-1) var(--ld-spacer-fixed-2);
}
.ld-accordion__content {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-3);
}
.ld-accordion__section, .ld-accordion__items, .ld-accordion__item-steps-container, .ld-accordion__item-steps {
  display: flex;
  flex-direction: column;
}
.ld-accordion__section, .ld-accordion__item-steps {
  gap: var(--ld-spacer-2);
}
.ld-accordion__item-steps[hidden=hidden] {
  display: none;
}
.ld-accordion__items, .ld-accordion__item-steps-container {
  gap: var(--ld-spacer-4);
}
.ld-accordion__items--lessons, .ld-accordion__item-steps-container--lessons {
  gap: var(--ld-spacer-2);
}
.ld-accordion__section {
  border: 1px solid var(--ld-color-system-border);
  border-radius: var(--ld-border-radius-small);
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-2) var(--ld-spacer-6) var(--ld-spacer-fixed-2);
}
.ld-accordion__item-steps {
  gap: var(--ld-spacer-5);
  grid-area: attributes;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  /**
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
}
.ld-accordion__item-steps.ld-expanded {
  /**
   * Ensure Tooltips are visible if they would expand
   * outside the collapsible element.
   */
  overflow: visible;
}
.ld-accordion__item-steps [data-ld-tooltip-text] {
  /**
   * Don't position Tooltips based on the element
   * they're associated with.
   *
   * This is counter-intuitive, but necessary
   * to ensure they are positioned correctly when taking
   * into account the expandable nature of accordions.
   */
  position: inherit;
}
.ld-accordion__item-steps [data-ld-tooltip-text]::after {
  bottom: auto;
  /**
   * To account for issues with positioning if the
   * tooltip spills to a second line, we need calculate
   * what it _should be_ and use it only if it is less
   * than 100% of the container.
   */
  transform: translate(-1%, min(24px + var(--ld-typography-desktop-body-small-size) + var(--ld-spacer-1), 100%));
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-steps [data-ld-tooltip-text]::after {
  transform: translate(0, min(24px + var(--ld-typography-desktop-body-small-size) + var(--ld-spacer-1), 100%));
}
.ld-accordion__item-steps-container {
  /**
   * Padding is placed here to ensure it doesn't
   * interfere with how height and overflow are calculated.
   */
  padding: var(--ld-spacer-2) 0;
}
.ld-accordion__expand-button, .ld-accordion__expand-button:hover, .ld-accordion__expand-button:focus {
  all: unset;
  align-items: center;
  color: var(--ld-color-system-body-text);
  display: flex;
  font-size: var(--ld-typography-desktop-body-size);
  font-style: normal;
  gap: var(--ld-spacer-fixed-1);
  line-height: var(--ld-typography-desktop-body-height);
  padding-bottom: var(--ld-spacer-0);
}
.ld-accordion__expand-button:hover {
  color: var(--ld-color-brand-primary);
  cursor: pointer;
}
.ld-accordion__expand-button:focus-visible {
  border-radius: var(--ld-border-radius-small);
  outline: solid 2px var(--ld-color-brand-primary);
}
.ld-accordion__expand-button--all, .ld-accordion__expand-button--all:hover, .ld-accordion__expand-button--all:focus {
  font-weight: var(--ld-typography-font-weight-medium);
}
.ld-accordion__expand-button--all:hover {
  border-bottom: 2px solid var(--ld-color-brand-primary);
  margin-bottom: -2px;
}
.ld-accordion__expand-button--lesson, .ld-accordion__expand-button--lesson:hover, .ld-accordion__expand-button--lesson:focus {
  font-weight: var(--ld-typography-font-weight-bold);
}
.ld-accordion__expand-button--lesson:hover .ld-accordion__expand-button-text {
  border-bottom: 2px solid var(--ld-color-brand-primary);
  margin-bottom: -2px;
}
.ld-accordion__expand-button .ld-accordion__expand-button-icon--collapse {
  display: none;
}
.ld-accordion__expand-button[aria-expanded=true] .ld-accordion__expand-button-icon--expand {
  display: none;
}
.ld-accordion__expand-button[aria-expanded=true] .ld-accordion__expand-button-icon--collapse {
  display: inline-block;
}
.ld-accordion__item {
  border-radius: var(--ld-border-radius);
  transition: all 0.3s ease;
}
.ld-accordion__item--lesson {
  display: grid;
  grid-template-areas: "title expand" "attributes attributes";
  grid-template-columns: 1fr min-content;
}
.ld-accordion__item--final-quiz {
  padding: var(--ld-spacer-1) var(--ld-spacer-fixed-2);
}
.ld-accordion__item--topic, .ld-accordion__item--lesson-quiz, .ld-accordion__item--topic-quiz, .ld-accordion__item--final-quiz {
  column-gap: var(--ld-spacer-fixed-1);
  display: grid;
  grid-template-areas: "icon title" "icon attributes";
  grid-template-columns: min-content auto;
}
.ld-accordion__item--topic, .ld-accordion__item--lesson-quiz {
  padding: 0 var(--ld-spacer-fixed-9) 0 var(--ld-spacer-fixed-2);
}
.ld-accordion__item--topic-quiz {
  padding: 0 var(--ld-spacer-fixed-2) 0 0;
}
.ld-accordion__item--topic-quiz:first-of-type {
  padding-top: var(--ld-spacer-1);
}
.ld-accordion__item .ld-accordion__expand-button {
  font-size: var(--ld-typography-desktop-caption-size);
  grid-area: expand;
  justify-content: flex-end;
  letter-spacing: 1px;
  line-height: var(--ld-typography-desktop-caption-height);
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-5);
  text-transform: uppercase;
  /**
   * On mobile, always hide the Expand/Collapse text visually.
   * Screen readers can always see it when styled this way.
   */
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item .ld-accordion__expand-button {
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-2) var(--ld-spacer-2) var(--ld-spacer-fixed-5);
}
.ld-accordion__item .ld-accordion__expand-button .ld-accordion__expand-button-text {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.ld-accordion__item:has(.ld-accordion__expand-button[aria-expanded=true]), .ld-accordion__item:hover, .ld-accordion__item:focus-within {
  background-color: var(--ld-color-system-light-2);
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item:has(.ld-accordion__expand-button[aria-expanded=true]), .ld-accordion.ld-breakpoint--small .ld-accordion__item:hover, .ld-accordion.ld-breakpoint--small .ld-accordion__item:focus-within {
  /**
   * This border should only be visible when:
   *
   * 1. The user is hovering over the Lesson.
   * 2. The user is focused somewhere within the Lesson.
   * 3. The Lesson is collapsed.
   */
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item:has(.ld-accordion__expand-button[aria-expanded=true]) .ld-accordion__expand-button, .ld-accordion.ld-breakpoint--small .ld-accordion__item:hover .ld-accordion__expand-button, .ld-accordion.ld-breakpoint--small .ld-accordion__item:focus-within .ld-accordion__expand-button {
  position: relative;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item:has(.ld-accordion__expand-button[aria-expanded=true]) .ld-accordion__expand-button[aria-expanded=false]::before, .ld-accordion.ld-breakpoint--small .ld-accordion__item:hover .ld-accordion__expand-button[aria-expanded=false]::before, .ld-accordion.ld-breakpoint--small .ld-accordion__item:focus-within .ld-accordion__expand-button[aria-expanded=false]::before {
  background: var(--ld-color-system-middle-gray);
  bottom: var(--ld-spacer-0);
  content: "";
  left: 0;
  position: absolute;
  top: var(--ld-spacer-0);
  width: 1px;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item {
  /**
   * On Desktop, show the Expand/Collapse text:
   *
   * 1. The user is hovering over the Lesson.
   * 2. The user is focused somewhere within the Lesson.
   * 3. The Lesson is expanded.
   */
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item--lesson {
  grid-template-columns: auto minmax(160px, min-content);
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item:hover .ld-accordion__expand-button .ld-accordion__expand-button-text, .ld-accordion.ld-breakpoint--small .ld-accordion__item:focus-within .ld-accordion__expand-button .ld-accordion__expand-button-text {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: relative;
  width: auto;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item:hover .ld-accordion__expand-button:hover .ld-accordion__expand-button-text, .ld-accordion.ld-breakpoint--small .ld-accordion__item:focus-within .ld-accordion__expand-button:hover .ld-accordion__expand-button-text {
  border-bottom: 2px solid var(--ld-color-brand-primary);
  margin-bottom: -2px;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item .ld-accordion__expand-button[aria-expanded=true] .ld-accordion__expand-button-text {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: relative;
  width: auto;
}
.ld-accordion__item-header {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-1);
}
.ld-accordion__item-header--lesson, .ld-accordion__item-header--final-quiz {
  position: relative;
  /**
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-header--lesson, .ld-accordion.ld-breakpoint--small .ld-accordion__item-header--final-quiz {
  position: inherit;
}
.ld-accordion__item-header--lesson [data-ld-tooltip-text], .ld-accordion__item-header--final-quiz [data-ld-tooltip-text] {
  /**
   * Don't position Tooltips based on the element
   * they're associated with.
   *
   * This is counter-intuitive, but necessary
   * to ensure they are positioned correctly when taking
   * into account the expandable nature of accordions.
   */
  position: inherit;
}
.ld-accordion__item-header--lesson [data-ld-tooltip-text]::after, .ld-accordion__item-header--final-quiz [data-ld-tooltip-text]::after {
  bottom: auto;
  left: auto;
  /**
   * To account for issues with positioning if the
   * tooltip spills to a second line, we need calculate
   * what it _should be_ and use it only if it is less
   * than 100% of the container.
   */
  transform: translate(-1%, min(24px + var(--ld-typography-desktop-body-small-size) + var(--ld-spacer-1), 100%));
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-header--lesson [data-ld-tooltip-text]::after, .ld-accordion.ld-breakpoint--small .ld-accordion__item-header--final-quiz [data-ld-tooltip-text]::after {
  transform: translate(0%, min(24px + var(--ld-typography-desktop-body-small-size) + var(--ld-spacer-1), 100%));
  right: auto;
}
.ld-accordion__item-header--lesson {
  padding: var(--ld-spacer-1) 0 var(--ld-spacer-fixed-1) var(--ld-spacer-2);
  /**
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-header--lesson {
  padding: var(--ld-spacer-2) var(--ld-spacer-fixed-2) var(--ld-spacer-1) var(--ld-spacer-fixed-2);
}
.ld-accordion__item-header--lesson [data-ld-tooltip-text]::after {
  /**
   * Fixes a very specific edge case with positioning of the tooltips
   * only in the Lesson Header.
   *
   * The Expand/Collapse button and the way the icons
   * get positioned in relation to it causes us some issues.
   */
  left: 0;
  right: 0;
}
.ld-accordion.ld-breakpoint--mobile .ld-accordion__item-header--lesson [data-ld-tooltip-text]::after {
  left: auto;
}
.ld-accordion.ld-breakpoint--tablet .ld-accordion__item-header--lesson [data-ld-tooltip-text]::after {
  left: 0;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-header--lesson [data-ld-tooltip-text]::after {
  left: auto;
}
.ld-accordion__item-icon {
  grid-area: icon;
}
.ld-accordion__item-icon--progress {
  color: var(--ld-color-brand-primary);
}
.ld-accordion__item-title {
  color: var(--ld-color-system-body-text);
  font-size: var(--ld-typography-desktop-h6-size);
  grid-area: title;
  line-height: var(--ld-typography-desktop-h6-height);
  /**
   * Item Title Tooltips, specifically,
   * need to use styling closer to the default Tooltip styling.
   *
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
}
.ld-accordion__item-title:is(a):hover, .ld-accordion__item-title:is(a):focus {
  color: var(--ld-color-brand-primary);
  text-decoration: underline;
}
.ld-accordion__item-title:is(a):focus {
  outline: solid 2px var(--ld-color-brand-primary);
}
.ld-accordion__item-title[data-ld-tooltip-text] {
  position: relative;
}
.ld-accordion__item-title[data-ld-tooltip-text]::after {
  left: 0;
  /**
   * To account for issues with positioning if the
   * tooltip spills to a second line, we need calculate
   * what it _should be_ and use it only if it is less
   * than 100% of the container.
   */
  transform: translate(-1%, min(24px + var(--ld-spacer-1), 100%));
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-title[data-ld-tooltip-text]::after {
  left: 0;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-title[data-ld-tooltip-text]::after {
  transform: translate(0, min(24px + var(--ld-spacer-1), 100%));
}
.ld-accordion__item-attributes {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--ld-typography-desktop-body-small-size);
  gap: var(--ld-spacer-fixed-1);
  grid-area: attributes;
  line-height: var(--ld-typography-desktop-body-small-height);
}
.ld-accordion__item-attribute {
  align-items: center;
  display: inline-flex;
  gap: var(--ld-spacer-fixed-0);
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible {
  display: inline-flex;
  letter-spacing: 1px;
  padding-right: var(--ld-spacer-1);
  /**
   * On desktop the text within these Tooltips is shown by default.
   * We need to hide it when the user hovers over the attribute.
   *
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible[data-ld-tooltip-text]:hover::after, .ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible[data-ld-tooltip-text]:focus::after, .ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible[data-ld-tooltip-text]:focus-within::after {
  visibility: hidden;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible.ld-tooltip [role=tooltip] {
  all: unset;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible.ld-tooltip,
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--collapsible.ld-tooltip [role=tooltip] {
  letter-spacing: 1px;
}
.ld-accordion__item-attribute--collapsible, .ld-accordion__item-attribute--collapsed {
  /**
   * Don't use the tooltip styles if JS is disabled.
   *
   * We have to ignore the selector-class-pattern rule
   * otherwise it would only apply to --collapsed attributes.
   */
  /* stylelint-disable-next-line selector-class-pattern */
  background: var(--ld-color-system-middle-gray-light);
  border-radius: var(--ld-border-radius);
  display: flex;
  font-size: var(--ld-typography-desktop-caption-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-caption-height);
  text-transform: uppercase;
}
.ld-accordion__item-attribute--collapsible:not(.ld-tooltip--initialized) [role=tooltip], .ld-accordion__item-attribute--collapsed:not(.ld-tooltip--initialized) [role=tooltip] {
  all: unset;
}
.ld-accordion__item-attribute--available-on {
  background: var(--ld-color-brand-secondary);
}
.ld-accordion__item-attribute--topics .ld-accordion__item-attribute-icon, .ld-accordion__item-attribute--quizzes .ld-accordion__item-attribute-icon {
  display: none;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--topics .ld-accordion__item-attribute-icon, .ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute--quizzes .ld-accordion__item-attribute-icon {
  display: inline-block;
  height: auto;
  width: 16px;
}
.ld-accordion__item-attribute-icon--progress {
  color: var(--ld-color-brand-primary);
}
.ld-accordion__item-attribute-icon--available-on {
  color: var(--ld-color-brand-secondary);
}
.ld-accordion__item-attribute-label--collapsible {
  /**
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
}
.ld-accordion__item-attribute-label--collapsible[data-ld-tooltip-text] {
  display: none;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute-label--collapsible {
  /**
   * Kept for backwards compatibility with LD30 Modern templates
   * from before 4.21.3.
   */
  opacity: 1;
  position: relative;
}
.ld-accordion.ld-breakpoint--small .ld-accordion__item-attribute-label--collapsible[data-ld-tooltip-text] {
  display: inline-block;
}
.ld-accordion__pagination {
  color: var(--ld-color-system-body-text);
  font-size: var(--ld-typography-desktop-caption-size);
  font-weight: var(--ld-typography-font-weight-bold);
  line-height: var(--ld-typography-desktop-caption-size);
  /**
   * 8px, accounting for the 4px padding on the buttons themselves.
   *
   * Bottom padding is intentionally 0 as the
   * container has its own bottom padding.
   *
   * Top padding is being handled by the gap attribute on the parent element.
   */
  padding: 0 var(--ld-spacer-fixed-1);
}
.ld-accordion__pagination-list {
  align-items: center;
  display: flex;
  gap: var(--ld-spacer-2);
}
.ld-accordion .ld-accordion__pagination-list,
.ld-accordion .ld-accordion__pagination-list-item {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.ld-accordion__pagination-button, .ld-accordion__pagination-button:hover, .ld-accordion__pagination-button:focus {
  all: unset;
  box-sizing: border-box;
  padding: var(--ld-spacer-0) var(--ld-spacer-fixed-0);
}
.ld-accordion__pagination-button:disabled {
  opacity: 0.6;
}
.ld-accordion__pagination-button:hover, .ld-accordion__pagination-button:focus {
  color: var(--ld-color-brand-primary);
}
.ld-accordion__pagination-button:focus {
  border-radius: var(--ld-border-radius-small);
  outline: solid 2px var(--ld-color-brand-primary);
}
.ld-accordion__pagination-button:hover {
  cursor: pointer;
}
.ld-accordion__pagination-button:hover:disabled {
  color: inherit;
  cursor: not-allowed;
}

.ld-tooltip.ld-tooltip--modern::after {
  height: var(--ld-spacer-0);
}
.ld-tooltip.ld-tooltip--modern [role=tooltip] {
  background: var(--ld-color-system-middle-gray-light);
  border-radius: var(--ld-border-radius-small);
  border: 1px solid #cbd5e0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  color: var(--ld-color-system-body-text);
  font-family: unset;
  font-size: var(--ld-typography-desktop-body-small-size);
  font-weight: var(--ld-typography-font-weight-medium);
  line-height: var(--ld-typography-desktop-body-small-height);
  max-width: 100%;
  min-width: 130px;
  padding: var(--ld-spacer-0) var(--ld-spacer-fixed-1);
  text-transform: none;
  transform: translateY(var(--ld-spacer-0));
}

/**
 * Old LD30 Modern tooltip implementation, left for backwards compatibility.
 * Replaced with a new style of tooltips in 4.21.3 for accessibility reasons.
 * Kept for backwards compatibility.
 */
[data-ld-tooltip-text] {
  position: relative;
}
[data-ld-tooltip-text]::after {
  background: var(--ld-color-system-middle-gray-light);
  border-radius: var(--ld-border-radius-small);
  border: 1px solid #cbd5e0;
  bottom: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.25);
  color: var(--ld-color-system-body-text);
  content: attr(data-ld-tooltip-text);
  font-size: var(--ld-typography-desktop-body-small-size);
  font-weight: var(--ld-typography-font-weight-medium);
  line-height: var(--ld-typography-desktop-body-small-height);
  padding: var(--ld-spacer-0) var(--ld-spacer-fixed-1);
  position: absolute;
  text-transform: none;
  visibility: hidden;
  z-index: 999;
}
[data-ld-tooltip-text]:hover::after, [data-ld-tooltip-text]:focus::after, [data-ld-tooltip-text]:focus-within::after {
  visibility: visible;
}

.ld-alerts {
  display: flex;
  flex-direction: column;
  gap: var(--ld-spacer-3);
}
.ld-alerts .ld-alert {
  flex-grow: 1;
  margin-bottom: 0;
  margin-top: 0;
}

.learndash-course-grid--modern .items-wrapper.grid {
  column-gap: var(--ld-spacer-fixed-2);
  row-gap: var(--ld-spacer-2);
  margin-bottom: var(--ld-spacer-2);
  /**
   * The parent wrapper element exists outside of the "styling context"
   * of the course grid, so we need to target it specifically.
   */
}
.ld-course-grid__wrapper.ld-breakpoint--small .learndash-course-grid--modern .items-wrapper.grid {
  column-gap: var(--ld-spacer-fixed-5);
  row-gap: var(--ld-spacer-5);
  margin-bottom: var(--ld-spacer-5);
}
.ld-course-grid__wrapper.ld-breakpoint--wide .learndash-course-grid--modern .items-wrapper.grid {
  column-gap: var(--ld-spacer-fixed-6);
  row-gap: var(--ld-spacer-6);
  margin-bottom: var(--ld-spacer-6);
}
.learndash-course-grid--modern .items-wrapper .grid-3 {
  /**
   * To replicate grid_height_equal, we need to ensure the post and
   * content elements are flex containers with a height of 100%.
   */
}
.learndash-course-grid--modern .items-wrapper .grid-3 .post {
  border-radius: var(--ld-border-radius);
  border: 1px solid var(--ld-color-system-border);
  box-shadow: none;
  overflow: hidden;
  padding: 0;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .thumbnail img {
  aspect-ratio: 4/3;
  border-radius: 0;
  object-fit: cover;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content {
  display: flex;
  flex-direction: column;
  padding: var(--ld-spacer-fixed-4) var(--ld-spacer-4) var(--ld-spacer-fixed-8) var(--ld-spacer-4);
  gap: var(--ld-spacer-7);
  /**
   * Replicate grid_height_equal, but align the content to the top
   * instead of the bottom.
   */
  /**
   * However, if it is a button, we should align it to the bottom.
   */
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button {
  /**
   * Due to how it is wrapped in a .button class,
   * we need to unstyle the container as well as the button itself.
   *
   * This is because 3rd party themes are very, very likely to
   * style the .button class as a button.
   */
  all: unset;
  align-self: center;
  display: flex;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a {
  /**
   * We are intentionally using a screen width breakpoint here.
   *
   * This is because we cannot be sure what container size this
   * mixin will be used in ahead of time.
   *
   * We have decided to handle mobile vs desktop button styles based on
   * screen width rather than container width globally.
   */
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:active, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-visible, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-within, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:hover {
  all: unset;
  align-items: center;
  border-radius: var(--ld-button-border-radius);
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--ld-color-system-white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ld-typography-font-family);
  font-size: var(--ld-typography-desktop-button-text-size);
  font-weight: var(--ld-typography-desktop-button-text-weight);
  gap: var(--ld-spacer-fixed-1);
  justify-content: center;
  line-height: var(--ld-typography-desktop-button-text-height);
  margin: 0;
  outline-offset: 2px;
  outline-style: none;
  outline-width: 2px;
  overflow-wrap: break-word;
  padding: var(--ld-spacer-fixed-1) var(--ld-spacer-3);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  width: auto;
  word-break: normal;
}
@media (min-width: 720px) {
  .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:active, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-visible, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-within, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:hover {
    padding: var(--ld-spacer-fixed-2) var(--ld-spacer-3);
  }
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus {
  outline-style: solid;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:disabled, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a[aria-disabled=true] {
  background-color: var(--ld-color-system-light-2);
  border: 1px solid var(--ld-color-system-border);
  color: var(--ld-color-system-subtle-text);
  cursor: not-allowed;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:disabled:hover, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a[aria-disabled=true]:hover {
  background-color: var(--ld-color-button-disabled-bg-hover);
  border-color: var(--ld-color-button-disabled-border-hover);
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:active, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-visible, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-within, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:hover {
  background-color: var(--ld-color-button-bg);
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:active, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:hover {
  background-color: var(--ld-color-button-bg-hover);
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus {
  outline-color: var(--ld-color-button-bg-hover);
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:active, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-visible, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-within, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:hover {
  font-size: var(--ld-typography-desktop-caption-size);
  line-height: var(--ld-typography-desktop-caption-height);
  padding: var(--ld-spacer-fixed-1) var(--ld-spacer-3);
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .button a, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:active, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-visible, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus-within, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:focus, .learndash-course-grid--modern .items-wrapper .grid-3 .content .button a:hover {
  padding-right: var(--ld-spacer-2);
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .entry-title {
  font-size: var(--ld-typography-desktop-h5-size);
  line-height: var(--ld-typography-desktop-h5-height);
  margin: 0;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content .ld-progress {
  margin: 0;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content > *:not(.button):last-child {
  margin-bottom: auto;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .content > .button:last-child {
  margin-top: auto;
}
.learndash-course-grid--modern .items-wrapper .grid-3 .post,
.learndash-course-grid--modern .items-wrapper .grid-3 .content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.learndash-course-grid--modern .pagination {
  overflow: initial;
}
.learndash-course-grid--modern .pagination .load-more {
  /**
   * We are intentionally using a screen width breakpoint here.
   *
   * This is because we cannot be sure what container size this
   * mixin will be used in ahead of time.
   *
   * We have decided to handle mobile vs desktop button styles based on
   * screen width rather than container width globally.
   */
}
.learndash-course-grid--modern .pagination .load-more, .learndash-course-grid--modern .pagination .load-more:active, .learndash-course-grid--modern .pagination .load-more:focus-visible, .learndash-course-grid--modern .pagination .load-more:focus-within, .learndash-course-grid--modern .pagination .load-more:focus, .learndash-course-grid--modern .pagination .load-more:hover {
  all: unset;
  align-items: center;
  border-radius: var(--ld-button-border-radius);
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  color: var(--ld-color-system-white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ld-typography-font-family);
  font-size: var(--ld-typography-desktop-button-text-size);
  font-weight: var(--ld-typography-desktop-button-text-weight);
  gap: var(--ld-spacer-fixed-1);
  justify-content: center;
  line-height: var(--ld-typography-desktop-button-text-height);
  margin: 0;
  outline-offset: 2px;
  outline-style: none;
  outline-width: 2px;
  overflow-wrap: break-word;
  padding: var(--ld-spacer-fixed-1) var(--ld-spacer-3);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  width: auto;
  word-break: normal;
}
@media (min-width: 720px) {
  .learndash-course-grid--modern .pagination .load-more, .learndash-course-grid--modern .pagination .load-more:active, .learndash-course-grid--modern .pagination .load-more:focus-visible, .learndash-course-grid--modern .pagination .load-more:focus-within, .learndash-course-grid--modern .pagination .load-more:focus, .learndash-course-grid--modern .pagination .load-more:hover {
    padding: var(--ld-spacer-fixed-2) var(--ld-spacer-3);
  }
}
.learndash-course-grid--modern .pagination .load-more:focus {
  outline-style: solid;
}
.learndash-course-grid--modern .pagination .load-more:disabled, .learndash-course-grid--modern .pagination .load-more[aria-disabled=true] {
  background-color: var(--ld-color-system-light-2);
  border: 1px solid var(--ld-color-system-border);
  color: var(--ld-color-system-subtle-text);
  cursor: not-allowed;
}
.learndash-course-grid--modern .pagination .load-more:disabled:hover, .learndash-course-grid--modern .pagination .load-more[aria-disabled=true]:hover {
  background-color: var(--ld-color-button-disabled-bg-hover);
  border-color: var(--ld-color-button-disabled-border-hover);
}
.learndash-course-grid--modern .pagination .load-more, .learndash-course-grid--modern .pagination .load-more:active, .learndash-course-grid--modern .pagination .load-more:focus-visible, .learndash-course-grid--modern .pagination .load-more:focus-within, .learndash-course-grid--modern .pagination .load-more:focus, .learndash-course-grid--modern .pagination .load-more:hover {
  background-color: var(--ld-color-button-bg);
}
.learndash-course-grid--modern .pagination .load-more:active, .learndash-course-grid--modern .pagination .load-more:hover {
  background-color: var(--ld-color-button-bg-hover);
}
.learndash-course-grid--modern .pagination .load-more:focus {
  outline-color: var(--ld-color-button-bg-hover);
}