/* Set up CSS variables for normal and wide content widths, and inline (left and right) and block (top and bottom) padding. To customize spacing, simply adjust these values as needed */
:root body.ld-in-focus-mode:not(.search) {
  --focus-content-width: 800px;
  --focus-wide-width: 1400px;
  --focus-inline-padding: 1.5rem;
  --focus-block-padding: 4rem;
}

/* Stretch the LearnDash focus mode content area to fill all available space. Individual component widths will be constrained individually below */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content {
  width: 100%;
  max-width: 100%;
  padding: var(--focus-block-padding) var(--focus-inline-padding);
}
/* Style blocks that have neither the alignfull nor the align wide classes applied. Auto margin is applied to center content in the available space */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content > *:not(.alignfull):not(.alignwide) {
  max-width: var(--focus-content-width);
  margin-left: auto;
  margin-right: auto;
}
/* Style align wide blocks to fill available space until they've reached the defined wide width */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content .alignwide {
  max-width: var(--focus-wide-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Style align full blocks to stretch to the edges of the available content area. Negative margin and larger than 100% wide to account for the padding applied to the ld-focus-content container */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tab-content .alignfull {
  margin-left: calc(-1 * var(--focus-inline-padding));
  margin-right: calc(-1 * var(--focus-inline-padding));
  width: calc(100% + var(--focus-inline-padding) + var(--focus-inline-padding));
}
/* Apply normal content width to LearnDash elements: title, status bar, tab navigation, footer actions, quiz content, comments, and alerts. You can wide-align these too if you like, by applying the --focus-wide-width variable instead */
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content > h1, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .learndash-shortcode-wrap, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-tabs-navigation,
/*:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-main .ld-focus-content .ld-content-actions,*/
.learndash-wrapper .ld-focus .wpProQuiz_content,
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-quiz-status, 
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-topic-status, 
.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content .ld-lesson-status, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-focus-comments, 
:root body.ld-in-focus-mode:not(.search) .ld-focus .ld-alert {
  max-width: var(--focus-content-width);
  margin-left: auto;
  margin-right: auto;
}