html,
body {
  width: 100%;
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html {
  overflow-y: auto;
}

body {
  overflow: hidden;
  background-color: var(--bodyBackgroundColor);
  text-size-adjust: none;
}

/* if font is not set on input, button, ... it will take the system font */

body,
input,
textarea,
keygen,
select,
button {
  font-family: var(--fontFamily);
  line-height: 1.5;
}

.App---header---vTkrF {
  width: 100%;
}

@media (width <= 920px) {
  .App---header---vTkrF {
    width: max-content;
  }

  html,
  body {
    overflow-x: hidden;
  }
}

.App---window---BwjTl {
  box-sizing: border-box;
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 var(--appHorizontalPadding);
  margin: 0 auto;
  color: var(--darkNeutralColor);
}

.App---deskTopWidth---W_xM3 {
  max-width: 1440px;
}

.App---window---BwjTl.App---fullWidth---qJrlr {
  max-width: 100%;
  padding: 0;
}

.App---window---BwjTl.App---fullWidthWithPadding---Gcpw3 {
  max-width: 100%;
  padding: 0 var(--appHorizontalPadding);
}

.App---window---BwjTl.App---fullWidth---qJrlr div[class^='Breadcrumbs'] {
  padding: var(--space16) var(--appHorizontalPadding);
}

.App---window---BwjTl.App---fullWidth---qJrlr div[class^='LearnWithOthersBanner---root'] {
  margin-inline: var(--appHorizontalPadding);
}

@media (width <= 767px) {
  .App---window---BwjTl {
    padding: 0 !important;
  }
}

/* Layout */

.App---app---y58Bz {
  display: flex;
  flex-direction: column;
  min-height: 99vh;
}

.App---app---y58Bz.App---fitToScreenHeight---dIR8n {
  min-height: 60vh;
}

.App---app---y58Bz.App---noMinHeight---E85VK {
  min-height: auto !important;
}

.App---siteBrandingHeight---d0YHq {
  /* 70px is the height of the top nav bar */
  height: calc(100vh - 70px);
  overflow-y: auto !important;
}

.App---root---bAdPI {
  display: flex;
}

.App---container---nyupw {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

/* Adjustment for code formatting due to code
content in certain questions with Prism.js */

pre[class*='language-'] {
  font-size: var(--font16) !important;
}

/* stylelint-disable selector-pseudo-class-no-unknown */

/* stylelint-disable selector-class-pattern */

/* Using this style enforcement is to help assist with the new polyfill for
support for :focus-ring which is applied as a user keyboard navigates to a
component via the keyboard, if a user uses a mouse event, this style is not
applied so we enforce that the outline should not appear by setting the width
only to the value of 0, this works going forward for a11y concerns */

:focus:not(.focus-ring),
:focus:not(.focus-ring) + label {
  outline: none;
  outline-width: 0 !important;
}

.focus-ring:focus {
  /* the standard is Color, Style, Width */
  outline: var(--webkitHaloColor) solid 2px !important;
  outline-offset: 2px;
}

input.focus-ring:focus {
  outline-offset: 0;
}

h1.focus-ring:focus {
  outline: 0 !important;
}

.rc-tooltip {
  z-index: 10000 !important;
}

/* Use this as a global overwrite hack to remove outline from a focused element */

.nofocus.focus-ring:focus {
  outline: 0 !important;
}

/* stylelint-enable selector-pseudo-class-no-unknown */

.tox-tinymce-aux {
  z-index: 10001 !important;
}

#zmmtg-root {
  overflow-y: scroll !important;
  background-color: var(--whiteBackground);
}

/* modern browser + Pass for A11y color contrast */

input::placeholder,
textarea::placeholder {
  color: var(--lightNeutralColor) !important;
  opacity: 1;
}

/* POC: LPBOS-9210 - Overrides for monochrome images */

body img {
  filter: var(--grayScaleFilter) !important;
}

/* fix for LPTECH-8808 : Pendo guides focus highlighting issue */

button[id^="pendo-"]:focus,
button[id^="pendo-"]:focus-within {
  outline: var(--webkitHaloColor) solid 2px !important;
  outline-width: 2px !important;
}