body {
  color: #000;
  background: #fff;
}
a:hover {
  color: inherit;
}
a:focus-visible {
  outline: none;
}
@media (prefers-color-scheme: dark) {
  body {
    color: #000;
    background: #fff;
  }
}
.btPageWrap {
  min-height: calc(100vh - 50px) !important;
}
.iti-flag {
  background-image: url("/images/flags.png") !important;
  background-size: 5630px 15px;
}
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti-flag {
    background-image: url("/images/flags@2x.png");
  }
}
.appAnimationDiv {
  background: primarycolor;
  border-top-left-radius: 22px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  transition: width 180ms ease;
  width: calc(100vw - 256px);
  z-index: 3;
}
.appAnimationDiv.navigationSidebarCollapsed {
  width: calc(100vw - 85px);
}
.appAnimationDiv.appFullWidthDiv,
.appAnimationDiv.navigationSidebarCollapsed.appFullWidthDiv {
  width: 100%;
}
.appAnimationDiv.appFullWidthDiv .appContentMain,
.appAnimationDiv.navigationSidebarCollapsed.appFullWidthDiv .appContentMain {
  border-top-left-radius: 0;
}
@media screen and (max-width: 768px) {
  .appAnimationDiv,
  .appAnimationDiv.navigationSidebarCollapsed {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .appAnimationDiv {
    transition: none;
  }
  .appFadeIn,
  .appFadeOut {
    animation: none;
  }
}
.appFadeIn {
  animation: 0.8s appFadeIn forwards;
}
.appFadeOut {
  animation: 0.5s appFadeOut forwards;
}
.page-content {
  padding-left: 10px;
  padding-right: 10px;
}
.navHeadIcon {
  color: #0075f2;
  font-size: 40px;
}
.port .btIco .btIcoHolder::before,
.btIco .btIcoHolder::after {
  display: none;
}
.port form.login p.form-row-wide:nth-child(odd) {
  clear: left;
  padding: 0 10px 0 0;
}
.port form.login p.form-row-wide {
  width: 50%;
  float: left;
  clear: none;
}
.port form.login p.form-row-wide:nth-child(even) {
  padding: 0 0 0 10px;
}
.port form.login p.form-row-wide {
  width: 50%;
  float: left;
  clear: none;
}
.port .menuPort>nav>ul>li.btMenuWideDropdown {
  position: relative;
}
.port .menuPort>nav>ul>li {
  margin: 0 30px 0 0;
}
.port .menuPort>nav>ul>li {
  margin: 0 30px 0 0;
}
.port .menuPort ul li {
  float: left;
  position: relative;
  z-index: 5;
}
.menuPort nav>ul>li {
  line-height: 55px;
}
.menuPort nav ul li {
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}
.port .woocommerce p.lost_password {
  float: right;
  padding: 0 0 0 2.4em;
  margin: 0.5em 0 0;
}
.port .woocommerce form.login p.form-row:not(.form-row-wide) {
  float: left;
}
.port .woocommerce form .form-row {
  margin: 0 0 12px;
}
.port .woocommerce form.checkout_coupon,
.port .woocommerce form.login,
.port .woocommerce form.register {
  margin: 0 0 20px;
  text-align: left;
}
.port .woocommerce p.lost_password::before {
  content: '\e64a';
  display: none;
  float: left;
  margin: -0.05em 0 0 -1.2em;
  font: normal 2em/1 "Icon7Stroke";
  color: #0075f2;
}
.port .rowItem {
  padding: 0 15px;
}
.port .rowItemContent {
  position: relative;
}
.port .woocommerce {
  max-width: 1160px;
  margin: auto;
}
.port .woocommerce h2 {
  letter-spacing: 0;
  font-size: 24px;
  margin-bottom: 10px;
}
.woocommerce-form-row.woocommerce-form-row--wide.form-row.form-row-wide.largeP {
  padding: 0;
  width: 100%;
}
.woocommerce-LostPassword.lost_password {
  color: #0075f2;
}
.qIcon {
  font-size: 16px;
}
.authenticationDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.authenticationForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 80vw;
  width: 100%;
}
.authenticationFormError {
  background: var(--oi-danger-soft);
  border: 1px solid var(--oi-danger-border);
  border-radius: 9px;
  color: var(--oi-danger);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
  padding: 12px 14px;
  width: 100%;
}
.authenticationFormDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 400px;
  width: 100%;
}
.authenticationFormDiv.doubleWidth {
  max-width: 800px;
}
.qIcon {
  color: #00264f;
}
.appButton {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  border-radius: 9px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  padding: 0 20px;
  position: relative;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.appButton:hover {
  text-decoration: none;
}
.appButton:focus {
  outline: none;
}
.appButton:focus-visible {
  outline: 3px solid var(--oi-focus);
  outline-offset: 2px;
}
.appButton:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
}
.appButton:disabled,
.appButton[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}
.appButtonPrimary {
  background: var(--oi-action-bg);
  border-color: var(--oi-action-bg);
  color: var(--oi-action-text);
}
.appButtonPrimary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--oi-action-bg-hover);
  border-color: var(--oi-action-bg-hover);
  color: var(--oi-action-text);
  transform: translateY(-1px);
}
.appButtonSecondary {
  background: var(--oi-surface);
  border-color: var(--oi-border);
  color: var(--oi-text);
}
.appButtonSecondary:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--oi-surface-hover);
  border-color: var(--oi-text-muted);
  color: var(--oi-text);
}
.appButtonDanger {
  background: var(--oi-danger);
  border-color: var(--oi-danger);
  color: var(--oi-canvas);
}
.appButtonDanger:hover:not(:disabled):not([aria-disabled="true"]) {
  filter: brightness(0.9);
  color: var(--oi-canvas);
}
.appButtonQuiet {
  background: transparent;
  border-color: transparent;
  color: var(--oi-text-muted);
}
.appButtonQuiet:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--oi-surface-hover);
  color: var(--oi-text);
}
.appButtonBlock {
  width: 100%;
}
.appButtonCompact {
  min-height: 34px;
  padding: 0 11px;
}
.appButton.isLoading,
.appButton[aria-busy="true"] {
  cursor: wait;
  opacity: 0.72;
  pointer-events: none;
}
.appButton.isLoading::before,
.appButton[aria-busy="true"]::before {
  animation: appButtonSpin 0.75s linear infinite;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  height: 14px;
  width: 14px;
}
.swal2-styled:focus {
  box-shadow: none;
}
.controlCheckbox {
  cursor: pointer;
  display: block;
  font-size: 16px;
  height: 26px;
  margin-bottom: 0;
  padding-left: 35px;
  position: relative;
  padding-top: 0;
}
.controlCheckbox input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.controlCheckboxIndicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 26px;
  width: 26px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
}
.controlCheckbox:hover input ~ .controlCheckboxIndicator,
.controlCheckbox input:focus ~ .controlCheckboxIndicator {
  background: primarycolor;
}
.controlCheckbox input:checked ~ .controlCheckboxIndicator {
  background: primarycolor;
}
.controlCheckbox:hover input:not([disabled]):checked ~ .controlCheckboxIndicator,
.controlCheckbox input:checked:focus ~ .controlCheckboxIndicator {
  background: #0e6647 d;
}
.controlCheckbox input:disabled ~ .controlCheckboxIndicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.controlCheckboxIndicator::after {
  box-sizing: unset;
  content: '';
  position: absolute;
  display: none;
}
.controlCheckbox input:checked ~ .controlCheckboxIndicator::after {
  display: block;
}
.controlCheckbox .controlCheckboxIndicator::after {
  left: 8px;
  top: 4px;
  width: 4px;
  height: 10px;
  border: solid #ff0;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.controlCheckbox input:disabled ~ .controlCheckboxIndicator::after {
  border-color: #7b7b7b;
}
.controlCheckbox .controlCheckboxIndicator::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 4.5rem;
  height: 4.5rem;
  margin-left: -1.3rem;
  margin-top: -1.3rem;
  background: #2aa1c0;
  border-radius: 3rem;
  opacity: 0.6;
  z-index: 99999;
  transform: scale(0);
}
.flexCenteredDiv {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flexSpaceAroundDiv {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.copyrightFooterGrey {
  align-items: center;
  background: #141415;
  border-top: 1px solid borderprimary;
  bottom: 0;
  color: rgba(255,255,255,0.65);
  display: flex;
  font-size: 14px;
  height: 74px;
  justify-content: center;
  left: 0;
  min-height: 30px;
  position: absolute;
  width: 100%;
  z-index: 999999;
}
.copyrightFooterGreyDetailed {
  align-items: center;
  background: #f1f5f9;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  padding: 30px 80px;
  text-align: left;
  z-index: 999999;
}
.copyrightFooterPrimary {
  align-items: center;
  background: #0b0b0c;
  border-top: 1px solid borderprimary;
  bottom: 0;
  color: rgba(255,255,255,0.65);
  display: flex;
  font-size: 14px;
  height: 74px;
  justify-content: center;
  left: 0;
  min-height: 30px;
  position: absolute;
  width: 100%;
  z-index: 999999;
}
.copyrightFooterWhite {
  align-items: center;
  background: #fff;
  bottom: 0;
  display: flex;
  font-size: 14px;
  min-height: 30px;
  position: absolute;
  text-align: left;
  z-index: 999999;
}
.copyrightFooterGreyDetailed .entityFooterLocation {
  margin-bottom: 5px;
}
.entityFooterLocation a,
.entityFooterLocation a:hover {
  color: #000;
  text-decoration: none;
}
.locationsFooterHeader,
.locationsListFooter,
.footerCopyrightDiv {
  width: 100%;
}
.locationsFooterHeader {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}
.footerCopyrightDiv {
  padding-top: 20px;
}
.footerSocialLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 10px;
}
.footerSocialLinks img {
  width: 26px;
}
.appFormDivSingle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 400px;
  width: 100%;
}
.appForm {
  width: 100%;
  max-width: 80vw;
}
.form-control:focus {
  background-color: #f8f8f8;
  box-shadow: none !important;
}
.formCheckBox {
  align-items: center;
  cursor: pointer;
  display: flex;
  width: 100%;
}
.formCheckBox input[type="checkbox"] {
  accent-color: #00f;
  border: 1px solid rgba(255,255,255,0.65);
  height: 26px;
  margin-right: 5px;
  width: 26px;
}
.formCheckBox input[type="checkbox"]:not(:checked) {
  background-color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
}
.formInputDiv {
  width: 100%;
}
.formInputDiv.halfWidthDiv {
  width: calc(50% - 15px);
}
.formInputsDiv {
  background: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 5px 6px 0 rgba(0,0,0,0.04);
  gap: 30px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 30px;
  width: 100%;
}
.formInputsDiv input {
  background: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  height: 48px;
  padding: 0 14px;
  width: 100%;
}
.formInputsDiv input:focus-visible {
  outline: primarycolor auto 1px;
}
.formInputsDiv label {
  color: rgba(255,255,255,0.65);
  font-size: 18px;
  margin-bottom: 8px;
}
.formInputsDiv p {
  margin-bottom: 20px;
}
.formLabelP {
  color: rgba(3,27,48,0.753);
  left: 0;
  position: sticky;
}
.formLink,
.formLink:hover {
  color: rgba(255,255,255,0.92); /* Adjust color as needed */
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
}
.formTermsDiv {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  width: 100%; /* You can adjust this width as needed */
}
.formTermsDiv.justifyLeft {
  justify-content: left;
}
.formTermsDiv .spaceSpan {
  width: 5px;
}
.modalForm input,
.modalForm select {
  background-color: #f8f8f8;
  border-radius: 6px;
}
select {
  cursor: pointer;
}
.uniformsField {
  align-content: start;
  display: grid;
  gap: 7px;
  min-width: 0;
  width: 100%;
}
.uniformsField > label,
.uniformsField > .formLabelP {
  color: var(--oi-text-muted);
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 20px;
  margin: 0;
  min-height: 20px;
}
.uniformsField > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.uniformsField > select,
.uniformsField > textarea {
  box-sizing: border-box;
  display: block;
  font-size: 16px;
  margin: 0;
  min-width: 0;
  width: 100%;
}
.uniformsField > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.uniformsField > select {
  height: var(--oi-control-height);
  min-height: var(--oi-control-height);
}
.uniformsField .fieldError,
.uniformsFormField > [label] {
  color: var(--oi-danger);
  display: block;
  font-size: 12px;
  line-height: 18px;
  margin: 0;
}
.uniformsFormGrid {
  display: grid;
  gap: 24px;
  width: 100%;
}
.uniformsFormGridTwoColumn {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.uniformsFormGrid > *,
.uniformsFormField {
  min-width: 0;
}
.uniformsFormField {
  align-content: start;
  display: grid;
  gap: 6px;
}
@media (max-width: 680px) {
  .uniformsFormGridTwoColumn {
    grid-template-columns: 1fr;
  }
}
.authActionsDiv {
  align-items: center;
  -moz-column-gap: 32px;
       column-gap: 32px;
  display: flex;
  flex-warp: wrap;
}
.contentMainHeaderDiv {
  color: rgba(255,255,255,0.92);
  display: flex;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 24px;
  width: 100%;
}
.headerAuthLink,
.headerAuthLink:hover,
.headerAuthLink:focus-visible {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  outline: none;
  text-decoration: none;
}
.headerContainer {
  padding: 0 !important;
  position: relative;
  width: 100%;
  z-index: 10;
}
.navHeader {
  border-bottom: 1px solid borderprimary;
  position: relative;
  z-index: 10;
}
.navHeader.navbar-expand-lg {
  justify-content: space-between;
}
.cropper-bg {
  background-color: var(--oi-surface-raised);
  background-image: none !important;
}
.imageDropZoneText {
  text-align: center;
}
.imageDropZoneIcon {
  display: flex;
  justify-content: center;
  margin-bottom: 35px;
  width: 100%;
}
.imageDropZoneIcon img {
  width: 60px;
}
.imagePolicyViolation {
  color: var(--oi-warning);
}
.aboutUsDiv,
.requestDemoDiv {
  border-top: 1px solid #e5e5e5;
  padding-top: 50px;
}
.aboutUsHeader {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}
.aboutUsImageTextDiv,
.requestDemoText {
  padding: 0 50px;
}
.aboutUsImageTextDiv img {
  width: 100%;
}
.aboutUsTextDiv,
.requestDemoText {
  color: rgba(3,27,48,0.753);
  font-size: 16px;
  font-weight: 300;
  padding: 30px 40px;
  text-align: center;
}
.appParticlesDiv {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 400px;
  position: relative;
}
.appParticlesDiv canvas {
  position: relative !important;
}
.calendarContainer {
  margin: auto;
  margin-top: 0;
  max-width: 100%;
}
.howItWorksDiv {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
  justify-content: center;
  padding-top: 50px;
  row-gap: 30px;
}
.howItWorksHeader {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: center;
}
.howItWorksHeader {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 40px;
  text-align: center;
}
.howItWorksStep {
  width: 30%;
  text-align: center;
}
.howItWorksStep img {
  margin-bottom: 15px;
  width: 120px;
}
.howItWorksStep svg {
  height: 120px;
  margin-bottom: 15px;
}
.howItWorksStepsDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 30px;
}
.howItWorksStep {
  width: 30%;
  text-align: center;
}
.howItWorksStepsDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 30px;
}
.landingHeaderDiv {
  margin-bottom: 30px;
  padding: 0 30px;
  position: relative;
}
.landingHeaderText {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}
.landingHeaderIconsDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}
.landingHeaderIconDiv {
  align-items: center;
  display: flex;
  font-size: 18px;
  gap: 10px;
}
.landingHeaderIconDiv img {
  width: 40px;
}
.requestDemoHeader {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
}
.requestDemoDiv {
  text-align: center;
}
.stepDescription {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
  width: 100%;
}
.stepDetails {
  font-size: 16px;
  font-weight: 300;
  width: 100%;
}
.stepLabel {
  color: textwhite;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  width: 100%;
}
#tsparticles {
  height: 100%;
  position: absolute;
  width: 100%;
}
@media screen and (max-width: 576px) {
  .aboutUsImageTextDiv,
  .requestDemoText {
    padding: 0;
  }
  .aboutUsTextDiv,
  .requestDemoText {
    padding: 30px 0;
    text-align: center;
  }
  .landingHeaderText {
    font-size: 25px;
  }
}
.activeNav {
  border-bottom: 2px solid #fff;
}
.addButtonDiv {
  display: block;
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}
.logoSplitter {
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  height: 75%;
  margin-left: 10px;
  margin-right: 15px;
}
.appContentDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
}
.appContentHolder {
  background: #0b0b0c;
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}
.appContentMain {
  background: #fff;
  border-top-left-radius: 22px;
  margin: auto;
  min-height: calc(100vh - 64px);
  padding: 30px;
  padding-bottom: 74px;
  position: relative;
  width: 100%;
}
.appContentMainGrey {
  background: #141415;
}
.appContentMainPrimary {
  background: #0b0b0c;
}
.appContentMainWhite {
  background: #fff;
}
.appointmentDetail {
  border: 2px solid #0075f2;
  padding: 14.5px 20px;
  min-height: 44px;
  width: 100%;
  margin-bottom: 20px;
  display: block;
  font-family: Montserrat;
  font-size: 15px;
  font-weight: 300;
  box-shadow: 0 0 0 2px transparent inset;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
  transition: all 300ms ease;
  transition: all 300ms ease;
}
.appointmentDetail img {
  width: 20px;
}
.appointmentDetails span {
  padding-right: 15px;
}
.appointmentDetails {
  padding: 0 10px;
}
.appointmentHeading {
  font-weight: bold;
}
.appointmentPatientName {
  font-weight: bold;
}
.appointmentTestDetail {
  border-bottom: 2px solid #0075f2;
  margin: 0 15px 15px 10px;
}
.appointmentTitle {
  margin: 0;
}
.backArrow {
  cursor: pointer;
  margin-right: 15px;
  transform: rotate(180deg);
  width: 15px;
}
.backArrowAppointment {
  float: right;
}
body.ReactModal__Body--open {
  height: 100vh;
  overflow: hidden;
}
.btnMedi {
  display: inline-block !important;
}
.btnMedi:hover {
  color: #fff !important;
}
.btSidebar {
  margin: auto;
}
.btSuperTitle {
  font-size: 20px !important;
}
.buttonActive {
  border: 0;
  border-radius: 20px;
  color: #fff;
  height: 26px;
  padding: 0 20px;
}
.buttonActive.itemActive {
  background: #1ec017;
}
.buttonActive.itemDisabled {
  background: #f00;
}
.calendarInstructions {
  border-top: 2px solid #0075f2;
  text-align: center;
  padding-top: 10px;
}
.centerText {
  text-align: center;
}
.checkboxLabel {
  cursor: pointer;
}
.closeMenuX {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
}
.closeMenuX img {
  width: 40px !important;
}
.collapsing {
  transition: none !important;
}
.DateInput {
  width: 100% !important;
}
.datesBlocked {
  color: #f00;
}
.deleteListItem {
  color: #0075f2;
  cursor: pointer;
  padding-left: 5px;
}
.descriptionDiv {
  color: #0075f2;
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
}
.dont-show-input {
  display: none;
}
.downloadResultPDF {
  margin-bottom: 5px;
  text-align: center;
  width: 100%;
}
.downloadResultPDF img {
  cursor: pointer;
  width: 30px;
}
.dropdown-toggle::after {
  display: none !important;
}
.errorsCenters button {
  margin-top: 10px;
}
.fullCalendarDiv .fc {
  height: 100%;
}
input[type="radio"],
input[type="checkbox"] {
  cursor: pointer;
}
#intlTelInput {
  display: none;
}
.itemisedSection {
  margin-top: 40px;
  padding-bottom: 15px;
}
.itemisedSection .btText {
  font-size: 18px;
}
.itemisedSection .boldRow {
  margin: 0;
  padding: 0 15px;
}
.itemisedSection .btText,
.itemisedSection .btClear {
  text-align: center;
}
.itemisedSection .boldRowInner {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
}
.itemisedSection .rowItem {
  margin-bottom: 50px;
  min-width: 280px;
}
.itemisedSection .rowItemContent {
  height: 100%;
}
.listName {
  font-weight: bold;
}
.flatpickrDiv {
  margin-bottom: 40px;
}
.flatpickrDiv input {
  text-align: center;
}
.formLabelP {
  margin-bottom: 0;
  font-size: 18px;
}
.formLabelP.checkboxLabel {
  padding-left: 5px;
}
.fullNavDropdown {
  display: flex;
  height: 100px;
  padding: 0 13px;
}
.fullNavDropdown.show {
  background: #ffda22;
}
.fullNavDropdown.show .dropdown-menu {
  border-radius: 0;
  box-shadow: 0 15px 45px 0 rgba(0,0,0,0.251);
  display: flex;
  flex-wrap: wrap;
  top: 98px;
}
.intl-tel-input {
  width: 100%;
}
.intl-tel-input .form-control {
  border-radius: 0;
}
.listName {
  font-size: 18px;
}
.loginUpper {
  align-items: center;
  cursor: pointer;
  display: flex;
  position: absolute;
  right: 30px;
}
.loginUpper a {
  color: #00264f !important;
}
.loginUpper a:hover {
  color: #00264f;
  text-decoration: none;
}
.loginUpper img {
  margin-right: 5px;
  width: 18px !important;
}
.logoNav {
  height: 100%;
  position: relative;
}
.logoNav img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: width navexpansiontime navexpansionmode;
}
.logoNavText {
  width: 175px;
}
.logoNavText.logoCollapsed {
  width: 0;
}
.menu-item a:hover {
  text-decoration: none;
}
#menu-main-menu {
  display: flex;
  font-size: 16px;
  height: 50px;
  justify-content: start;
  overflow-y: scroll;
  width: 100%;
}
#menu-main-menu li {
  line-height: 38px;
  white-space: nowrap;
}
.menuLogo {
  color: #00264f;
  font-size: 20px;
  text-align: center;
}
.menuLogo a {
  color: #00264f !important;
}
.menuLogo a:hover {
  text-decoration: none;
}
.menuLogo h1 {
  color: #00264f !important;
}
.modal {
  z-index: 2;
}
.moreNavSelector {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.moreNavSelector img {
  width: 40px;
}
.MTableHeader-header-13 {
  z-index: 5 !important;
}
.navbar-toggler {
  padding: 0 !important;
  width: 40px;
}
.navbar-toggler img {
  width: 100% !important;
}
.navEntityPRNum {
  bottom: -15px;
  color: #fff;
  display: block;
  font-size: 12px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 100%;
}
.navigationLink {
  color: #fff !important;
  font-size: 16px;
  text-decoration: none;
}
.navHeader {
  background-color: primarycolor;
  height: 64px;
  padding: 8px 30px !important;
}
.navLinksBar {
  margin-left: 10px;
}
.navLinksBar li {
  align-items: center;
  display: flex;
  padding: 0 5px;
  text-align: center;
}
.navLinksBar li:last-child {
  padding: 0;
}
.navLogoContainer {
  align-items: center;
  display: flex;
  height: 100%;
  position: relative;
}
.navUpper {
  align-items: center;
  background-color: #ffda22;
  display: flex;
  height: 30px;
  justify-content: center;
}
.nestedSection {
  padding-left: 0;
}
.pageInfo {
  align-items: center;
  border-bottom: 2px solid #ddd;
  display: flex;
  font-size: 20px;
  padding-bottom: 20px;
}
.ReactModal__Content input {
  background-color: #000;
}
.ReactModal__Overlay {
  z-index: 5;
}
.reportIframe {
  height: calc(100vh - 250px);
  width: 100%;
}
.responsiveMenu {
  align-items: center;
  place-content: center center;
  background-color: #031b01;
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  gap: 20px;
  left: 0;
  overflow: scroll;
  padding: 60px 30px;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 999999999;
}
.responsiveMenu.menuClosed {
  display: none;
}
.responsiveMenuLink {
  display: flex;
  font-size: 20px;
  justify-content: center;
  padding: 15px 0;
  text-align: center;
  width: 100%;
}
.responsiveMenuLink a {
  color: #fff !important;
  text-decoration: none !important;
}
.responsiveMenuLink a:hover {
  color: #fff !important;
  text-decoration: none !important;
}
.roleButtonDiv {
  margin-left: 15px;
}
.rolesList {
  display: inline;
  list-style: square;
  padding-left: 0;
  margin-bottom: 0;
}
.rolesListEditDiv {
  display: inline;
}
.rolesTable {
  width: 100%;
}
.rolesTable .div {
  margin-left: 10px;
}
.rolesTable td:nth-child(2) {
  text-align: center;
}
.rolesTable .timeRangeButton {
  width: 120px;
}
.rolesTable tr {
  height: 60px;
}
.sectionLabel {
  font-weight: bold;
}
.shape46 {
  display: inline-block !important;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 0;
  top: 3px;
  background: #0075f2;
  box-sizing: content-box;
  cursor: pointer;
}
.shape46::before {
  position: absolute;
  content: '';
  margin: auto;
  width: calc(20px / 3.5);
  height: calc(20px / 3.5);
  background: #0000NaN;
  border: calc(20px / 8) solid #fff;
  border-right: none;
  border-top: none;
  inset: 0 0 0 calc(20px / 8);
  transform: rotate(45deg);
  box-sizing: content-box;
}
.SingleDatePicker {
  width: 100%;
}
.SingleDatePickerInput {
  display: inline-block;
  background-color: #000;
  width: 100%;
  border: 0 !important;
}
.sweet-loading {
  margin: calc(50vh - 35px) calc(50vw - 35px);
  position: fixed;
  z-index: 10;
}
.total {
  border-top: 2px solid #0075f2;
  padding: 4px 0 0;
}
.total .amount {
  display: block;
  float: right;
}
.total strong {
  min-width: 40px;
  display: inline-block;
}
.tsc-calendar {
  background: #f8f8f8 !important;
}
.tsc-calendar__action-title {
  font-size: 18px;
}
.tsc-month {
  background: #f8f8f8 !important;
}
.tsc-month__action {
  color: #00264f !important;
}
.tsc-month__action-title {
  font-size: 16px;
}
.tsc-timeslot.largerSlot {
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 80px;
  min-width: 140px;
}
.tsc-timeslot:not(.tsc-timeslot--disabled):hover {
  background-color: #fff;
  color: #585858;
  border: 2px solid #00264f;
}
.userAdminDiv {
  max-height: 80vh;
  max-width: calc(100vw - 30px);
  overflow: scroll;
  width: 100%;
}
.wpcf7-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("/images/chevron-arrow-down.svg");
  background-position: 98% center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
}
.uniformsAutoDiv {
  margin-bottom: 20px;
}
.wpcf7-not-valid-tip {
  color: #00264f;
  font-size: 1em;
  font-weight: normal;
  display: block;
}
.wpcf7-response-output.formInvalid {
  margin: 2em 0.5em 1em;
  padding: 0.2em 1em;
  border: 2px solid #00a0d2;
  border-color: #00264f;
}
.uniformsAutoForm input:not([type='checkbox'],
[type='radio']).wpcf7-submit {
  font-size: 16px;
}
@media screen and (max-width: 576px) {
  .detailsSectionName {
    width: 100%;
  }
  .detailsSectionAtts {
    width: 100%;
  }
  .halfFields .nestedSection {
    width: 100%;
  }
  .listFieldList .uniformsAutoDiv {
    width: 100%;
  }
  .listFieldList.testList .uniformsAutoDiv {
    width: 100%;
  }
  .navHeader {
    padding: 8px 20px !important;
  }
}
@media screen and (max-height: 576px) {
  .listFieldList.testList .uniformsAutoDiv {
    width: 100%;
  }
  .navHeader {
    padding: 8px 35px !important;
  }
}
@media only screen and (max-width: 360px) {
  .logoSplitter {
    height: 60%;
    margin-left: 5px;
    margin-right: 5px;
  }
  .appContentMainWhite,
  .appContentMainGrey {
    padding-left: 30px;
    padding-right: 30px;
  }
  .fc .fc-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    row-gap: 10px;
  }
  .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
    justify-content: center;
  }
  .fcLegendDiv {
    -moz-column-gap: 15px;
         column-gap: 15px;
    justify-content: center;
  }
  .fullCalendarDiv {
    height: calc(100vh - 150px);
  }
  .loginUpper {
    right: 15px;
  }
  .menuHolder img {
    width: 90px;
  }
  .overviewDataDiv {
    padding: 20px !important;
  }
  .testCountGraph {
    display: flex;
    justify-content: center;
    max-width: 100%;
  }
}
@media (min-width: 360px) and (max-width: 430px) {
  .appContentMainWhite,
  .appContentMainGrey,
  .copyrightFooterGrey,
  .copyrightFooterWhite,
  .copyrightFooterGreyDetailed {
    padding-left: 30px;
    padding-right: 30px;
  }
  .fc .fc-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important;
    row-gap: 10px;
  }
  .fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
    justify-content: center;
  }
  .fcLegendDiv {
    -moz-column-gap: 15px;
         column-gap: 15px;
    justify-content: center;
  }
  .fullCalendarDiv {
    height: calc(100vh - 150px);
  }
  .loginUpper {
    right: 15px;
  }
  .menuHolder img {
    -o-object-fit: contain;
       object-fit: contain;
    width: 110px;
  }
  .overviewDataDiv {
    padding: 20px !important;
  }
  .testCountGraph {
    display: flex;
    justify-content: center;
    max-width: 100%;
  }
}
.logoCollapser {
  align-items: center;
  background: transparent;
  border: 1px solid var(--oi-border);
  border-radius: 8px;
  color: var(--oi-text-muted);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  margin-left: 12px;
  padding: 0;
  transition: background 160ms ease, color 160ms ease;
  width: 36px;
}
.logoCollapser:hover {
  background: var(--oi-surface-hover);
  color: var(--oi-text);
}
.arrow--l-r {
  display: inline-block;
  height: 18px;
  margin: 0;
  position: relative;
  width: 18px;
}
.arrow--l-r span {
  background: currentColor;
  height: 1.5px;
  position: absolute;
  transition: transform 180ms ease, right 180ms ease;
}
.arrow--l-r span:nth-child(1),
.arrow--l-r span:nth-child(2),
.arrow--l-r span:nth-child(4),
.arrow--l-r span:nth-child(5) {
  top: 8.25px;
  width: 8.25px;
}
.arrow--l-r span:nth-child(1) {
  right: 0;
  transform-origin: bottom right;
}
.arrow--l-r span:nth-child(2) {
  right: 0;
  transform-origin: top right;
}
.arrow--l-r span:nth-child(3) {
  top: 8.25px;
  width: 13px;
}
.arrow--l-r span:nth-child(4) {
  left: 0;
  transform-origin: bottom left;
}
.arrow--l-r span:nth-child(5) {
  left: 0;
  transform-origin: top left;
}
.arrow--l-r.left span:nth-child(3) {
  right: 0;
}
.arrow--l-r.left span:nth-child(4) {
  transform: rotate(-45deg);
}
.arrow--l-r.left span:nth-child(5) {
  transform: rotate(45deg);
}
.arrow--l-r.right span:nth-child(1) {
  transform: rotate(-45deg);
}
.arrow--l-r.right span:nth-child(2) {
  transform: rotate(45deg);
}
.arrow--l-r.right span:nth-child(3) {
  right: 5px;
}
@media screen and (max-width: 768px) {
  .logoCollapser {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .logoCollapser,
  .arrow--l-r span {
    transition: none;
  }
}
/* Lotus Aesthetics public homepage: editorial, calm and deliberately distinct
   from the authenticated application shell. */
:root {
  --lotus-parchment: #ded8cc;
  --lotus-parchment-light: #eae5dc;
  --lotus-parchment-dark: #c9c3b7;
  --lotus-ink: #090908;
  --lotus-ink-soft: #25231f;
  --lotus-muted: #7a7570;
}
.lotusLanding {
  background: var(--lotus-parchment);
  color: var(--lotus-ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.01em;
  line-height: 1.65;
  min-height: 100vh;
  overflow: hidden;
}
.lotusLanding *,
.lotusLanding *:before,
.lotusLanding *:after {
  box-sizing: border-box;
}
.lotusLanding a {
  color: inherit;
  text-decoration: none;
}
.lotusLanding img {
  display: block;
  max-width: 100%;
}
.lotusContainer {
  margin: 0 auto;
  max-width: 1200px;
  padding-left: 4rem;
  padding-right: 4rem;
}
.lotusLabel {
  color: var(--lotus-muted);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.22em;
  line-height: 1.3;
  text-transform: uppercase;
}
.lotusRuleShort {
  background: var(--lotus-ink);
  display: block;
  height: 1px;
  width: 40px;
}
.lotusReveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.lotusReveal.isVisible {
  opacity: 1;
  transform: translateY(0);
}
.lotusHeader {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 30;
}
.lotusNav {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 72px;
  padding: 0 2.5rem;
}
.lotusNavGroup {
  align-items: center;
  display: flex;
  gap: 2.25rem;
}
.lotusNavGroupRight {
  justify-content: flex-end;
}
.lotusNavGroup a,
.lotusNavCta {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.lotusNavGroup a {
  position: relative;
}
.lotusNavGroup a:after {
  background: var(--lotus-ink);
  bottom: -3px;
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  width: 100%;
}
.lotusNavGroup a:hover:after {
  transform: scaleX(1);
}
.lotusNavLogo {
  justify-self: center;
  width: 148px;
}
.lotusNavLogo img {
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
  width: 148px;
}
.lotusNavCta {
  background: var(--lotus-ink);
  color: var(--lotus-parchment) !important;
  padding: 0.65rem 1.5rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.15s ease;
}
.lotusNavCta:hover {
  background: var(--lotus-parchment-dark);
  color: var(--lotus-ink) !important;
}
.lotusNavCta:active {
  transform: scale(0.97);
}
.lotusMenuToggle,
.lotusMobileMenu {
  display: none;
}
.lotusHero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: 72px;
}
.lotusHeroCopy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(100vh - 72px);
  padding: 8rem 4rem 2.5rem;
}
.lotusHeroLogo {
  align-self: center;
  height: auto;
  max-width: 380px;
  -o-object-fit: contain;
     object-fit: contain;
  width: 62%;
}
.lotusHeroTitleBlock {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  padding-bottom: 1rem;
}
.lotusHeroTitleBlock .lotusLabel {
  margin-bottom: 2rem;
}
.lotusHero h1 {
  font-size: clamp(4.3rem, 7vw, 7rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.88;
  margin: 0;
  max-width: 620px;
}
.lotusHero h1 em,
.lotusAbout h2 em,
.lotusQuote em {
  font-weight: 300;
}
.lotusHeroImageWrap {
  min-height: calc(100vh - 72px);
  position: relative;
}
.lotusHeroImage {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
}
.lotusScrollMark {
  bottom: 2rem;
  color: var(--lotus-parchment);
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  position: absolute;
  right: 2.5rem;
  text-transform: uppercase;
  transform: rotate(-90deg);
  transform-origin: right top;
}
.lotusButton {
  align-items: center;
  display: inline-flex;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 300;
  justify-content: center;
  letter-spacing: 0.22em;
  padding: 1rem 2.5rem;
  text-transform: uppercase;
  transition: background 0.35s ease, color 0.35s ease, transform 0.15s ease;
}
.lotusButton:active {
  transform: scale(0.97);
}
.lotusButtonDark {
  background: var(--lotus-ink);
  border: 1px solid var(--lotus-ink);
  color: var(--lotus-parchment) !important;
}
.lotusButtonDark:hover {
  background: var(--lotus-parchment);
  color: var(--lotus-ink) !important;
}
.lotusButtonOutline {
  border: 1px solid var(--lotus-ink);
  color: var(--lotus-ink) !important;
}
.lotusButtonOutline:hover {
  background: var(--lotus-ink);
  color: var(--lotus-parchment) !important;
}
.lotusIntro {
  padding-bottom: 9rem;
  padding-top: 10rem;
}
.lotusIntroHeading {
  max-width: 760px;
}
.lotusIntroHeading h2,
.lotusSectionHeading h2,
.lotusAbout h2,
.lotusContact h2 {
  font-size: clamp(2.6rem, 4.8vw, 5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 2rem 0 1rem;
}
.lotusIntroHeading h2 {
  font-size: clamp(2.8rem, 5vw, 5.5rem);
}
.lotusIntroNote {
  font-size: 1.35rem;
  font-style: italic;
  margin: 0;
}
.lotusPhilosophyGrid {
  border-top: 1px solid var(--lotus-parchment-dark);
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8rem;
  padding-top: 1.75rem;
}
.lotusPhilosophyItem h3 {
  font-size: 1.7rem;
  font-weight: 400;
  margin: 3.5rem 0 0.6rem;
}
.lotusPhilosophyItem p,
.lotusSectionHeading > p:last-child,
.lotusAboutCopy > p,
.lotusContact p {
  color: var(--lotus-ink-soft);
  font-size: 1.08rem;
  margin: 0;
  max-width: 32rem;
}
.lotusSection {
  padding-bottom: 9rem;
  padding-top: 5rem;
}
.lotusSectionHeading {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  margin-bottom: 5rem;
}
.lotusSectionHeading .lotusLabel {
  grid-column: 1/-1;
  margin-bottom: -2rem;
}
.lotusSectionHeading h2 {
  margin: 0;
}
.lotusSectionHeading > p:last-child {
  align-self: end;
  padding-bottom: 0.35rem;
}
.lotusTreatmentList {
  border-top: 1px solid var(--lotus-parchment-dark);
}
.lotusTreatmentRow {
  align-items: start;
  border-bottom: 1px solid var(--lotus-parchment-dark);
  display: grid;
  gap: 2rem;
  grid-template-columns: 56px 1fr 30px;
  padding: 1.75rem 0;
  transition: opacity 0.3s ease, padding-left 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.lotusTreatmentRow:hover {
  opacity: 0.72;
  padding-left: 1rem;
}
.lotusTreatmentNumber {
  color: var(--lotus-muted);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding-top: 0.35rem;
}
.lotusTreatmentRow h3 {
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.35rem;
}
.lotusTreatmentRow p {
  color: var(--lotus-ink-soft);
  font-size: 1.03rem;
  margin: 0;
  max-width: 650px;
}
.lotusTreatmentArrow {
  font-size: 1.5rem;
  padding-top: 0.25rem;
}
.lotusAbout {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 9rem);
  grid-template-columns: 1fr 1fr;
  padding-bottom: 10rem;
  padding-top: 5rem;
}
.lotusAboutImageWrap {
  aspect-ratio: 4/5;
  overflow: hidden;
}
.lotusAboutImageWrap img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.lotusAboutCopy h2 {
  margin: 1.75rem 0 2rem;
}
.lotusAboutCopy > p {
  margin-top: 1.5rem;
}
.lotusInlineActions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2.5rem;
}
.lotusTextLink {
  border-bottom: 1px solid var(--lotus-ink);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  padding-bottom: 0.35rem;
  text-transform: uppercase;
}
.lotusTextLink span {
  display: inline-block;
  margin-left: 0.5rem;
  transition: transform 0.25s ease;
}
.lotusTextLink:hover span {
  transform: translateX(4px);
}
.lotusQuote {
  align-items: center;
  background: url("/images/lotus/quote-bg.jpg") center/cover;
  color: var(--lotus-parchment);
  display: flex;
  justify-content: center;
  min-height: 620px;
  padding: 4rem 2rem;
  position: relative;
  text-align: center;
}
.lotusQuoteOverlay {
  background: rgba(0,0,0,0.38);
  inset: 0;
  position: absolute;
}
.lotusQuote blockquote {
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin: 0;
  max-width: 850px;
  position: relative;
}
.lotusJourney {
  padding-bottom: 10rem;
  padding-top: 10rem;
}
.lotusJourneyHeading {
  max-width: 900px;
}
.lotusJourneyGrid {
  border-top: 1px solid var(--lotus-parchment-dark);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 5rem;
}
.lotusJourneyStep {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  min-height: 245px;
  padding: 1.75rem 2rem 2rem 0;
}
.lotusJourneyStep:nth-child(3n + 2),
.lotusJourneyStep:nth-child(3n + 3) {
  border-left: 1px solid var(--lotus-parchment-dark);
  padding-left: 2rem;
}
.lotusJourneyStep > span:first-child {
  color: var(--lotus-muted);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lotusJourneyStep .lotusRuleShort {
  margin: 2.25rem 0 1.5rem;
}
.lotusJourneyStep h3 {
  font-size: 1.9rem;
  font-weight: 400;
  margin: 0 0 0.25rem;
}
.lotusJourneyStep p {
  color: var(--lotus-ink-soft);
  font-size: 1rem;
  margin: 0;
  max-width: 240px;
}
.lotusContact {
  border-top: 1px solid var(--lotus-parchment-dark);
  padding: 9rem 2rem 10rem;
  text-align: center;
}
.lotusContact > .lotusReveal > p:not(.lotusLabel) {
  margin-left: auto;
  margin-right: auto;
}
.lotusContact h2 {
  font-size: clamp(4rem, 8vw, 8rem);
  margin: 1rem 0 1.5rem;
}
.lotusContactActions {
  justify-content: center;
  margin-top: 3rem;
}
.lotusFooter {
  background: var(--lotus-ink);
  color: var(--lotus-parchment);
  padding: 4rem 4rem 2rem;
}
.lotusFooterTop {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.lotusFooterTop img {
  filter: invert(1);
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
  width: 220px;
}
.lotusFooterTop p {
  font-size: 1.2rem;
  font-style: italic;
  margin: 0;
}
.lotusFooterLinks {
  border-bottom: 1px solid rgba(222,216,204,0.25);
  border-top: 1px solid rgba(222,216,204,0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 4rem;
  padding: 1.4rem 0;
}
.lotusFooterLinks a {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lotusFooterLinks a:hover {
  opacity: 0.6;
}
.lotusFooterBottom {
  color: rgba(222,216,204,0.6);
  display: flex;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  justify-content: space-between;
  letter-spacing: 0.12em;
  padding-top: 1.5rem;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .lotusNav {
    padding: 0 1.5rem;
  }
  .lotusNavGroup {
    gap: 1rem;
  }
  .lotusNavGroup a {
    font-size: 9px;
  }
  .lotusHeroCopy {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .lotusContainer {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
  .lotusHero h1 {
    font-size: clamp(3.8rem, 7vw, 5.5rem);
  }
  .lotusAbout {
    gap: 3rem;
  }
}
@media (max-width: 640px) {
  .lotusNav {
    grid-template-columns: 1fr auto;
    height: 64px;
  }
  .lotusNavGroup {
    display: none;
  }
  .lotusNavLogo {
    display: none;
  }
  .lotusMenuToggle {
    background: none;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    justify-self: end;
    padding: 8px 0 8px 8px;
  }
  .lotusMenuToggle span {
    background: var(--lotus-ink);
    display: block;
    height: 1px;
    width: 24px;
  }
  .lotusMobileMenu {
    align-items: center;
    background: var(--lotus-parchment);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    inset: 0;
    justify-content: center;
    position: fixed;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 20;
  }
  .lotusMobileMenu.isOpen {
    transform: translateY(0);
  }
  .lotusMobileMenu > a:not(.lotusNavCta) {
    font-size: 2rem;
    font-weight: 300;
  }
  .lotusMobileMenu .lotusNavCta {
    margin-top: 0.5rem;
  }
  .lotusHero {
    display: flex;
    flex-direction: column;
    padding-top: 64px;
  }
  .lotusHeroCopy {
    min-height: auto;
    padding: 4rem 1.5rem 3rem;
  }
  .lotusHeroLogo {
    margin-bottom: 5rem;
    max-width: 330px;
    width: 82%;
  }
  .lotusHeroTitleBlock {
    padding-bottom: 1rem;
  }
  .lotusHeroTitleBlock .lotusLabel {
    margin-bottom: 1.5rem;
  }
  .lotusHero h1 {
    font-size: clamp(3.7rem, 16vw, 6rem);
    line-height: 0.9;
  }
  .lotusHeroImageWrap {
    aspect-ratio: 3/4;
    min-height: 0;
    overflow: hidden;
  }
  .lotusHeroImage {
    display: block;
    height: 100%;
  }
  .lotusScrollMark {
    display: none;
  }
  .lotusContainer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .lotusIntro,
  .lotusJourney {
    padding-bottom: 6rem;
    padding-top: 6rem;
  }
  .lotusIntroHeading h2,
  .lotusSectionHeading h2,
  .lotusAbout h2 {
    font-size: 3rem;
  }
  .lotusPhilosophyGrid,
  .lotusSectionHeading,
  .lotusAbout {
    display: block;
    margin-top: 4rem;
  }
  .lotusPhilosophyItem {
    border-bottom: 1px solid var(--lotus-parchment-dark);
    padding: 1.5rem 0 2rem;
  }
  .lotusPhilosophyItem h3 {
    margin: 1.5rem 0 0.5rem;
  }
  .lotusSection {
    padding-bottom: 6rem;
    padding-top: 2rem;
  }
  .lotusSectionHeading .lotusLabel {
    margin-bottom: 1.5rem;
  }
  .lotusSectionHeading > p:last-child {
    margin-top: 1.5rem;
  }
  .lotusTreatmentRow {
    gap: 1rem;
    grid-template-columns: 34px 1fr 18px;
    padding: 1.5rem 0;
  }
  .lotusTreatmentRow h3 {
    font-size: 1.7rem;
  }
  .lotusTreatmentRow p {
    font-size: 1rem;
    line-height: 1.45;
  }
  .lotusAbout {
    padding-bottom: 6rem;
    padding-top: 1rem;
  }
  .lotusAboutImageWrap {
    margin-bottom: 3.5rem;
  }
  .lotusQuote {
    min-height: 460px;
  }
  .lotusQuote blockquote {
    font-size: 3rem;
  }
  .lotusJourneyGrid {
    display: block;
    margin-top: 3rem;
  }
  .lotusJourneyStep,
  .lotusJourneyStep:nth-child(3n + 2),
  .lotusJourneyStep:nth-child(3n + 3) {
    border-left: 0;
    min-height: auto;
    padding: 1.5rem 0 2rem;
  }
  .lotusContact {
    padding: 6rem 1.5rem 7rem;
  }
  .lotusContact h2 {
    font-size: 4.5rem;
  }
  .lotusContactActions {
    align-items: stretch;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: 300px;
  }
  .lotusFooter {
    padding: 3rem 1.5rem 1.5rem;
  }
  .lotusFooterTop {
    align-items: start;
    flex-direction: column;
    gap: 1rem;
  }
  .lotusFooterLinks {
    gap: 1rem 1.5rem;
    margin-top: 3rem;
  }
  .lotusFooterBottom {
    flex-direction: column;
    gap: 0.6rem;
    line-height: 1.5;
  }
}
/* Shared public-page layouts */
.lotusSubpage {
  min-height: 100vh;
}
.lotusPageHero {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  min-height: 540px;
  padding: 190px clamp(1.5rem, 8vw, 6rem) 80px;
}
.lotusPageHero > .lotusReveal {
  max-width: 920px;
}
.lotusPageHero h1 {
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 0.9;
  margin: 2rem 0 1.75rem;
  max-width: 900px;
}
.lotusPageHero > .lotusReveal > p:last-child {
  color: var(--lotus-ink-soft);
  font-size: 1.35rem;
  max-width: 600px;
}
.lotusSubpageSection {
  padding-bottom: 10rem;
  padding-top: 8rem;
}
.lotusDetailList {
  border-top: 1px solid var(--lotus-parchment-dark);
}
.lotusDetailRow {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  display: grid;
  gap: 3rem;
  grid-template-columns: 70px 1fr;
  padding: 3rem 0;
}
.lotusDetailNumber {
  color: var(--lotus-muted);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lotusDetailRow h2,
.lotusEditorialSplit h2,
.lotusValues h2,
.lotusJourneyDetail h2,
.lotusJournalItem h2 {
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0.8rem 0 1rem;
}
.lotusDetailRow > div > p:not(.lotusLabel),
.lotusJourneyDetail > div > p:not(.lotusLabel),
.lotusJournalItem > div > p:not(.lotusLabel) {
  color: var(--lotus-ink-soft);
  font-size: 1.12rem;
  max-width: 720px;
}
.lotusDetailRow .lotusTextLink {
  display: inline-block;
  margin-top: 1.5rem;
}
.lotusSplitImageGrid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
  margin-top: 7rem;
}
.lotusSplitImageGrid img {
  aspect-ratio: 3/4;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.lotusNotice {
  border-left: 1px solid var(--lotus-ink);
  margin-top: 6rem;
  max-width: 740px;
  padding-left: 2rem;
}
.lotusNotice p:last-child {
  font-size: 1.2rem;
  margin: 0;
}
.lotusEditorialSplit {
  align-items: center;
  display: grid;
  gap: clamp(3rem, 8vw, 9rem);
  grid-template-columns: 1fr 1fr;
}
.lotusEditorialSplit > img {
  aspect-ratio: 4/5;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}
.lotusEditorialSplit h2 {
  margin: 1.75rem 0 2rem;
}
.lotusEditorialSplit > div > p:not(.lotusLabel) {
  color: var(--lotus-ink-soft);
  font-size: 1.12rem;
  margin-top: 1.5rem;
}
.lotusValues {
  padding-bottom: 10rem;
}
.lotusValuesGrid {
  border-top: 1px solid var(--lotus-parchment-dark);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2rem;
}
.lotusValue {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  min-height: 260px;
  padding: 2rem 3rem 2rem 0;
}
.lotusValue:nth-child(even) {
  border-left: 1px solid var(--lotus-parchment-dark);
  padding-left: 3rem;
}
.lotusValue h3 {
  font-size: 2rem;
  font-weight: 400;
  margin: 2rem 0 0.5rem;
}
.lotusValue p {
  color: var(--lotus-ink-soft);
  font-size: 1.06rem;
  margin: 0;
  max-width: 470px;
}
.lotusPromise {
  background: var(--lotus-parchment-light);
  padding: 7rem clamp(1.5rem, 8vw, 8rem);
  text-align: center;
}
.lotusPromise blockquote {
  font-size: clamp(2.3rem, 4vw, 4.5rem);
  font-weight: 300;
  line-height: 1;
  margin: 0 auto 2rem;
  max-width: 850px;
}
.lotusJourneyDetailList {
  border-top: 1px solid var(--lotus-parchment-dark);
}
.lotusJourneyDetail {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  display: grid;
  gap: 3rem;
  grid-template-columns: 70px 1fr;
  padding: 3rem 0;
}
.lotusJourneyDetail h2 {
  margin-top: 0.8rem;
}
.lotusJourneyCallout {
  border-top: 1px solid var(--lotus-parchment-dark);
  padding: 8rem 1.5rem 9rem;
  text-align: center;
}
.lotusJourneyCallout h2,
.lotusFaqCta h2,
.lotusEnquiry h2,
.lotusSafetyCommitment h2 {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 1.25rem auto 1.5rem;
  max-width: 800px;
}
.lotusJourneyCallout > p:not(.lotusLabel),
.lotusFaqCta > p:not(.lotusLabel),
.lotusEnquiry > p:not(.lotusLabel) {
  color: var(--lotus-ink-soft);
  font-size: 1.15rem;
  margin: 0 auto 2rem;
  max-width: 550px;
}
.lotusSafetyIntro {
  border-left: 1px solid var(--lotus-ink);
  margin-bottom: 7rem;
  max-width: 850px;
  padding-left: 2rem;
}
.lotusSafetyIntro p {
  font-size: 1.45rem;
  margin: 0 0 1rem;
}
.lotusSafetyList {
  border-top: 1px solid var(--lotus-parchment-dark);
  margin-top: 2rem;
}
.lotusSafetyItem {
  align-items: center;
  border-bottom: 1px solid var(--lotus-parchment-dark);
  display: grid;
  gap: 2rem;
  grid-template-columns: 60px 1fr;
  padding: 1.5rem 0;
}
.lotusSafetyItem > span {
  color: var(--lotus-muted);
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
}
.lotusSafetyItem p {
  font-size: 1.35rem;
  margin: 0;
}
.lotusSafetyCommitment {
  margin-top: 8rem;
  max-width: 850px;
}
.lotusSafetyCommitment h2 {
  margin-left: 0;
}
.lotusSafetyCommitment > p:not(.lotusLabel) {
  font-size: 1.2rem;
}
.lotusFaqList {
  border-top: 1px solid var(--lotus-parchment-dark);
  margin: 0 auto;
  max-width: 950px;
}
.lotusFaqItem {
  border-bottom: 1px solid var(--lotus-parchment-dark);
}
.lotusFaqItem button {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--lotus-ink);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: 1.65rem;
  font-weight: 400;
  justify-content: space-between;
  padding: 1.5rem 0;
  text-align: left;
  width: 100%;
}
.lotusFaqItem button strong {
  font-family: 'Jost', sans-serif;
  font-size: 1.3rem;
  font-weight: 300;
}
.lotusFaqItem > p {
  color: var(--lotus-ink-soft);
  font-size: 1.1rem;
  margin: -0.5rem 3rem 1.75rem 0;
  max-width: 700px;
}
.lotusFaqCta {
  margin: 10rem auto 0;
  max-width: 850px;
  text-align: center;
}
.lotusJournalList {
  border-top: 1px solid var(--lotus-parchment-dark);
}
.lotusJournalItem {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  display: grid;
  gap: 2rem;
  grid-template-columns: 70px 1fr 40px;
  padding: 2.5rem 0;
}
.lotusJournalItem h2 {
  font-size: clamp(2rem, 3.3vw, 3.5rem);
  margin: 0.8rem 0 1rem;
}
.lotusJournalArrow {
  font-size: 1.7rem;
  padding-top: 0.5rem;
}
.lotusJournalPage > .lotusPromise {
  margin: 8rem -4rem -10rem;
}
.lotusContactPage {
  display: grid;
  gap: 8rem;
  grid-template-columns: 1fr 1fr;
}
.lotusContactDetails > .lotusLabel {
  margin-bottom: 2rem;
}
.lotusContactDetail {
  border-top: 1px solid var(--lotus-parchment-dark);
  padding: 1.25rem 0;
}
.lotusContactDetail .lotusLabel {
  margin-bottom: 0.4rem;
}
.lotusContactDetail p:last-child,
.lotusContactDetail a {
  font-size: 1.4rem;
  margin: 0;
}
.lotusContactDetail a:hover {
  text-decoration: underline;
}
.lotusContactNote {
  border-top: 1px solid var(--lotus-parchment-dark);
  margin-top: 4rem;
  padding-top: 1.5rem;
}
.lotusContactNote p:not(.lotusLabel) {
  border-bottom: 1px solid var(--lotus-parchment-dark);
  font-size: 1.12rem;
  margin: 0;
  padding: 1rem 0;
}
.lotusEnquiry {
  align-self: center;
  border-top: 1px solid var(--lotus-parchment-dark);
  padding-top: 1.5rem;
}
.lotusEnquiry h2 {
  margin-left: 0;
}
@media (max-width: 640px) {
  .lotusPageHero {
    min-height: 440px;
    padding: 145px 1.5rem 55px;
  }
  .lotusPageHero h1 {
    font-size: 4rem;
    margin: 1.5rem 0;
  }
  .lotusPageHero > .lotusReveal > p:last-child {
    font-size: 1.15rem;
  }
  .lotusSubpageSection {
    padding-bottom: 6rem;
    padding-top: 5rem;
  }
  .lotusDetailRow,
  .lotusJourneyDetail {
    gap: 1.25rem;
    grid-template-columns: 38px 1fr;
    padding: 2rem 0;
  }
  .lotusDetailRow h2,
  .lotusEditorialSplit h2,
  .lotusJourneyDetail h2,
  .lotusJournalItem h2 {
    font-size: 2.55rem;
  }
  .lotusDetailRow > div > p:not(.lotusLabel),
  .lotusJourneyDetail > div > p:not(.lotusLabel),
  .lotusJournalItem > div > p:not(.lotusLabel) {
    font-size: 1.04rem;
    line-height: 1.5;
  }
  .lotusSplitImageGrid {
    gap: 1rem;
    margin-top: 4rem;
  }
  .lotusNotice {
    margin-top: 4rem;
    padding-left: 1rem;
  }
  .lotusEditorialSplit,
  .lotusContactPage {
    display: block;
  }
  .lotusEditorialSplit > img {
    margin-bottom: 3.5rem;
  }
  .lotusValues {
    padding-bottom: 6rem;
  }
  .lotusValuesGrid {
    display: block;
  }
  .lotusValue,
  .lotusValue:nth-child(even) {
    border-left: 0;
    min-height: auto;
    padding: 1.5rem 0 2rem;
  }
  .lotusValue h3 {
    font-size: 1.8rem;
    margin-top: 1.5rem;
  }
  .lotusPromise {
    padding-bottom: 5rem;
    padding-top: 5rem;
  }
  .lotusJourneyCallout {
    padding-bottom: 6rem;
    padding-top: 6rem;
  }
  .lotusJourneyCallout h2,
  .lotusFaqCta h2,
  .lotusEnquiry h2,
  .lotusSafetyCommitment h2 {
    font-size: 3.5rem;
  }
  .lotusSafetyIntro {
    margin-bottom: 4rem;
    padding-left: 1rem;
  }
  .lotusSafetyIntro p {
    font-size: 1.18rem;
  }
  .lotusSafetyItem {
    gap: 1rem;
    grid-template-columns: 36px 1fr;
  }
  .lotusSafetyItem p {
    font-size: 1.15rem;
  }
  .lotusSafetyCommitment {
    margin-top: 5rem;
  }
  .lotusFaqItem button {
    font-size: 1.3rem;
    gap: 1rem;
  }
  .lotusFaqItem > p {
    font-size: 1rem;
  }
  .lotusFaqCta {
    margin-top: 6rem;
  }
  .lotusJournalItem {
    gap: 1rem;
    grid-template-columns: 35px 1fr 20px;
    padding: 2rem 0;
  }
  .lotusJournalArrow {
    font-size: 1.3rem;
  }
  .lotusJournalPage > .lotusPromise {
    margin: 5rem -1.5rem -6rem;
  }
  .lotusContactPage > div + div {
    margin-top: 5rem;
  }
  .lotusContactDetail p:last-child,
  .lotusContactDetail a {
    font-size: 1.2rem;
  }
}
.applicationModalOverlay {
  align-items: center;
  background: var(--oi-overlay);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 100;
}
.applicationModal {
  background: var(--oi-surface);
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  box-shadow: 0 24px 80px rgba(0,0,0,0.24);
  color: var(--oi-text);
  max-height: 92vh;
  max-width: 680px;
  outline: none;
  overflow: auto;
  padding: 24px;
  width: 100%;
}
.applicationModal:focus-visible {
  outline: 3px solid var(--oi-focus);
  outline-offset: 2px;
}
.applicationModalHeader {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}
.applicationModalHeader h2 {
  color: var(--oi-text);
  font-size: 22px;
  margin: 0;
}
.applicationModalClose {
  flex: 0 0 auto;
  font-size: 24px;
  min-width: 34px;
  padding: 0;
}
.applicationModalBody {
  color: var(--oi-text-muted);
}
.applicationModalActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}
.imageCropperModal {
  max-width: 960px;
  width: 100%;
}
.cropperControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  height: auto;
  justify-content: flex-start;
  margin-bottom: 14px;
}
.imageDropZone {
  align-items: center;
  background: var(--oi-surface-raised);
  border: 1px dashed var(--oi-border);
  border-radius: var(--oi-radius);
  color: var(--oi-text-muted);
  cursor: pointer;
  display: flex;
  gap: 7px;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
}
.imageDropZone:focus-visible {
  outline: 3px solid var(--oi-focus);
  outline-offset: 2px;
}
.imageDropZoneDisabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.imageDropZoneSymbol {
  color: var(--oi-text);
  font-size: 24px;
}
@media (max-width: 560px) {
  .applicationModalOverlay {
    padding: 12px;
  }
  .applicationModal {
    padding: 20px;
  }
  .applicationModalActions {
    flex-direction: column-reverse;
  }
  .applicationModalActions .appButton {
    width: 100%;
  }
}
.profileImageContainer {
  display: flex;
  margin-bottom: 24px;
}
.profileImage,
.profileImageDropZone,
.profileImagePlaceholder {
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 50%;
  height: 180px;
  width: 180px;
}
.profileImage {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.profileImageButton {
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.profileImageButton:disabled {
  cursor: default;
}
.profileImageButton:focus-visible,
.profileImageDropZone:focus-visible {
  outline: 3px solid var(--oi-focus);
  outline-offset: 3px;
}
.profileImageDropZone {
  align-items: center;
  border-style: dashed;
  color: var(--oi-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.profileImageDropZone .imageDropZoneSymbol {
  color: var(--oi-text);
  font-size: 28px;
}
.profileImagePlaceholder {
  align-items: center;
  color: var(--oi-text-muted);
  display: flex;
  justify-content: center;
}
.profileImagePlaceholderIcon {
  background: currentColor;
  display: block;
  height: 76px;
  -webkit-mask-image: url("/images/icons/user-circle.svg");
          mask-image: url("/images/icons/user-circle.svg");
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  width: 76px;
}
.profileImageDiv {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.navigationSidebar {
  background: var(--oi-canvas);
  border-right: 1px solid var(--oi-border-subtle);
  flex: 0 0 auto;
  height: calc(100vh - 72px);
  overflow: hidden;
  position: relative;
  transition: width 180ms ease;
  width: 85px;
  z-index: 4;
}
.navigationSidebar.navigationSidebarExpanded {
  width: 256px;
}
.navigationSidebarList {
  list-style: none;
  margin: 0;
  padding: 20px 16px;
  width: 100%;
}
.navigationSidebarListItem {
  align-items: center;
  display: flex;
  height: 46px;
  margin-bottom: 8px;
  width: 100%;
}
.navigationSidebarLink {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--oi-text-muted);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 14px;
  height: 100%;
  line-height: 1.2;
  padding: 0 14px;
  text-decoration: none;
  width: 100%;
}
.navigationSidebarLink:hover,
.navigationSidebarLink.activeSidebarNav {
  background: var(--oi-surface-raised);
  border-color: var(--oi-border-subtle);
  color: var(--oi-text);
  text-decoration: none;
}
.navigationSidebarIcon {
  display: inline-block;
  flex: 0 0 24px;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.66;
  width: 24px;
}
html[data-theme="light"] .navigationSidebarIcon {
  filter: grayscale(1) brightness(0);
}
.navigationSidebarLink:hover .navigationSidebarIcon,
.navigationSidebarLink.activeSidebarNav .navigationSidebarIcon {
  opacity: 1;
}
.navigationSidebarText {
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  transition: opacity 140ms ease, transform 180ms ease;
  white-space: nowrap;
  width: 0;
}
.navigationSidebarExpanded .navigationSidebarText {
  opacity: 1;
  transform: translateX(0);
  width: auto;
}
.navigationSidebarSplitter {
  border-bottom: 1px solid var(--oi-border);
  height: 1px;
  margin: 0 0 8px;
  opacity: 0.45;
}
.navigationSidebarBackdrop {
  background: var(--oi-overlay);
  border: 0;
  display: none;
}
body.navigationDrawerOpen {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .navigationSidebar {
    box-shadow: 18px 0 60px rgba(0,0,0,0.24);
    height: calc(100vh - 64px);
    left: 0;
    max-width: 320px;
    position: fixed;
    top: 64px;
    transform: translateX(-105%);
    transition: transform 220ms ease;
    width: 86vw;
    z-index: 42;
  }
  .navigationSidebar.navigationSidebarExpanded {
    width: 86vw;
  }
  .navigationSidebar.navigationSidebarMobileOpen {
    transform: translateX(0);
  }
  .navigationSidebar .navigationSidebarText {
    opacity: 1;
    transform: translateX(0);
    width: auto;
  }
  .navigationSidebarBackdrop {
    display: block;
    inset: 64px 0 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 180ms ease;
    width: 100%;
    z-index: 41;
  }
  .navigationSidebarBackdrop.isOpen {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .navigationSidebar,
  .navigationSidebarBackdrop,
  .navigationSidebarText {
    transition: none;
  }
}
.OTPErrorSpan {
  text-align: center;
}
.otpInputDiv {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}
.otpInteractDiv {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20px;
}
.otpModalDiv {
  padding: 0;
}
.otpModalDiv .closeModalIcon {
  margin-left: 20px;
  width: 30px;
}
.otpModalDiv input {
  background-color: #000;
  color: #000;
  line-height: 44px;
  text-align: center;
  padding: 0;
  height: 44px !important;
  width: 44px !important;
}
.shape47 {
  display: inline-block !important;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 0;
  top: 3px;
  background: #0075f2;
  box-sizing: content-box;
  cursor: pointer;
}
.shape47::after {
  position: absolute;
  content: '';
  margin: auto;
  width: calc(20px / 3.5);
  height: calc(20px / 3.5);
  background: #0000NaN;
  border: calc(20px / 8) solid #fff;
  border-right: none;
  border-top: none;
  inset: 0 0 0 calc((20px / 8) - 11px);
  transform: rotate(225deg);
  box-sizing: content-box;
}
.shape47::before {
  position: absolute;
  content: '';
  margin: auto;
  width: calc(20px / 3.5);
  height: calc(20px / 3.5);
  background: #0000NaN;
  border: calc(20px / 8) solid #fff;
  border-right: none;
  border-top: none;
  inset: 0 0 0 calc((20px / 8) + 6px);
  transform: rotate(45deg);
  box-sizing: content-box;
}
.react-select-container {
  color: var(--oi-text);
  min-width: 0;
  width: 100%;
}
.react-select-container input {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  outline: none !important;
  padding: 0 !important;
}
.uniformsReactSelect .react-select__control {
  height: var(--oi-control-height);
  min-height: var(--oi-control-height);
  width: 100%;
}
.uniformsReactSelect .react-select__input-container input:focus-visible {
  outline: none !important;
}
.uniformsReactSelect.hasError .react-select__control {
  border-color: var(--oi-danger);
  box-shadow: 0 0 0 1px var(--oi-danger);
}
.uniformsReactSelect .fieldError {
  color: var(--oi-danger);
  font-size: 12px;
}
.pageHeaderDiv {
  color: rgba(255,255,255,0.92);
  font-size: 32px;
  font-weight: 600;
  width: 100%;
}
.recover-password-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  font-size: 44px;
}
.recover-password-page h1 {
  color: #333;
}
.reset-password-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  font-size: 44px;
}
.reset-password-page h1 {
  color: #333;
}
.signup-page {
  margin-top: 15px;
}
.signup-page .form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.signup-page .form-signin .checkbox {
  font-weight: 400;
}
.signup-page .form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.signup-page .form-signin .form-control:focus {
  z-index: 2;
}
.signup-page .spread-container {
  display: flex;
  justify-content: space-between;
}
.user-dropdown {
  position: relative;
  display: inline-block;
}
.user-dropdown .dropdown-toggle,
.user-dropdown .dropdown-toggle:active,
.user-dropdown .dropdown-toggle:focus,
.user-dropdown .dropdown-toggle:hover,
.user-dropdown .btn-success.dropdown-toggle:focus {
  align-items: center;
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  color: #fff;
  -moz-column-gap: 8px;
       column-gap: 8px;
  display: flex;
  outline: none !important;
  padding: 0.5rem 1rem;
}
.user-dropdown .dropdown-toggle button:active,
.user-dropdown .dropdown-toggle button:focus,
.user-dropdown .dropdown-toggle button:hover {
  background: transparent;
  outline: none;
}
.user-dropdown .dropdown-toggle::after {
  display: none;
}
.user-dropdown img {
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  height: 40px;
  width: 40px;
}
.dropdown-menu {
  padding: 0;
  margin-top: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem #000;
}
.dropdown-menu .dropdown-header {
  padding: 1rem;
  border-bottom: 1px solid #f8f9fa;
  text-align: center;
}
.dropdown-menu .dropdown-header img {
  margin-bottom: 0.5rem;
}
.dropdown-menu .dropdown-header div {
  font-size: 0.85rem;
  color: #6c757d;
}
.dropdown-menu .dropdown-item {
  padding: 0.75rem 1rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #f8f9fa;
}
.dropdown-menu .dropdown-divider {
  margin: 0;
}
.btn-success:not(:disabled,
.disabled).active:focus,
.disabled):active:focus,
.show>.btn-success.dropdown-toggle:focus {
  box-shadow: none;
}
.userManagementHeader {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-bottom: 24px;
}
.userManagementHeader .pageIntroduction {
  margin-bottom: 0;
}
.userManagementHeader > .appButton {
  flex: 0 0 auto;
}
.userInvitationForm {
  display: grid;
  gap: 18px;
}
.userInvitationIntroduction {
  color: var(--oi-text-muted);
  margin: 0;
}
.userInvitationStatus {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.userStatusBadge {
  border: 1px solid var(--oi-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 650;
  padding: 5px 9px;
  white-space: nowrap;
}
.userStatusBadge-active {
  background: var(--oi-success-soft);
  border-color: var(--oi-success-border);
}
.userStatusBadge-error {
  background: var(--oi-danger-soft);
  border-color: var(--oi-danger-border);
  color: var(--oi-danger);
}
.userStatusBadge-invited,
.userStatusBadge-pending {
  background: var(--oi-surface-hover);
  color: var(--oi-text-muted);
}
@media (max-width: 680px) {
  .userManagementHeader {
    align-items: stretch;
    flex-direction: column;
  }
  .userManagementHeader > .appButton {
    width: 100%;
  }
}
.error-msg {
  color: var(--oi-danger);
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 2px 0;
}
:root,
html[data-theme="dark"] {
  --oi-canvas: var(--app-canvas-color, #0b0b0c);
  --oi-surface: var(--app-surface-color, #181819);
  --oi-surface-raised: rgba(255,255,255,0.05);
  --oi-surface-hover: rgba(255,255,255,0.09);
  --oi-text: rgba(255,255,255,0.92);
  --oi-text-muted: rgba(255,255,255,0.65);
  --oi-text-faint: rgba(255,255,255,0.42);
  --oi-border: rgba(255,255,255,0.12);
  --oi-border-subtle: rgba(255,255,255,0.08);
  --oi-focus: rgba(255,255,255,0.88);
  --oi-danger: #ff6b6b;
  --oi-danger-soft: rgba(255,107,107,0.12);
  --oi-danger-border: rgba(255,107,107,0.34);
  --oi-success: #7bd9a8;
  --oi-success-soft: rgba(123,217,168,0.12);
  --oi-success-border: rgba(123,217,168,0.34);
  --oi-warning: #f5c86a;
  --oi-header: rgba(11,11,12,0.86);
  --oi-overlay: rgba(0,0,0,0.72);
  --oi-action-bg: var(--oi-text);
  --oi-action-bg-hover: #fff;
  --oi-action-text: var(--oi-canvas);
  --oi-radius: 14px;
  --oi-content: 1120px;
  --oi-control-height: 46px;
  color-scheme: dark;
}
html[data-theme="light"] {
  --oi-canvas: var(--app-light-canvas-color, #f7f7f5);
  --oi-surface: var(--app-light-surface-color, #fff);
  --oi-surface-raised: rgba(17,17,17,0.035);
  --oi-surface-hover: rgba(17,17,17,0.075);
  --oi-text: var(--app-light-text-color, #111);
  --oi-text-muted: rgba(17,17,17,0.64);
  --oi-text-faint: rgba(17,17,17,0.42);
  --oi-border: rgba(17,17,17,0.14);
  --oi-border-subtle: rgba(17,17,17,0.09);
  --oi-focus: rgba(17,17,17,0.88);
  --oi-danger: #b42318;
  --oi-danger-soft: rgba(180,35,24,0.1);
  --oi-danger-border: rgba(180,35,24,0.3);
  --oi-success: #167647;
  --oi-success-soft: rgba(22,118,71,0.1);
  --oi-success-border: rgba(22,118,71,0.3);
  --oi-warning: #9a6700;
  --oi-header: rgba(247,247,245,0.88);
  --oi-overlay: rgba(17,17,17,0.42);
  --oi-action-bg-hover: #2b2b2b;
  color-scheme: light;
}
* {
  box-sizing: border-box;
}
html,
body,
#render-target {
  background: var(--oi-canvas);
  color: var(--oi-text);
  min-height: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  transition: background-color 180ms ease, color 180ms ease;
}
body,
button,
input,
select,
textarea {
  font-family: inherit;
}
::-moz-selection {
  background: rgba(255,255,255,0.92);
  color: var(--oi-canvas);
}
::selection {
  background: rgba(255,255,255,0.92);
  color: var(--oi-canvas);
}
a,
a:hover,
a:focus {
  color: var(--oi-text);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--oi-focus) !important;
  outline-offset: 3px;
}
.appContentHolder,
.appAnimationDiv {
  background: var(--oi-canvas);
}
.appAnimationDiv {
  border-radius: 0;
}
.appContentMain,
.appContentMainGrey,
.appContentMainPrimary,
.appContentMainWhite {
  background: var(--oi-canvas);
  border-radius: 0;
  color: var(--oi-text);
}
.appContentMain {
  padding: 48px clamp(24px, 5vw, 72px) 108px;
}
.headerContainer {
  background: var(--oi-header);
  border-bottom: 1px solid var(--oi-border-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
}
.navHeader {
  border: 0;
  min-height: 72px;
  padding: 12px clamp(20px, 4vw, 56px);
}
.navLogoContainer {
  align-items: center;
}
.logoNav {
  align-items: center;
  display: inline-flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.logoNav:hover {
  text-decoration: none;
}
.logoNavMark {
  display: inline-flex;
  flex: 0 0 auto;
  height: 40px;
  width: 40px;
}
.logoNavMark.logoCollapsed {
  height: 36px;
  width: 36px;
}
.themeBrandMark {
  display: inline-flex;
  position: relative;
}
.themeBrandMarkImage {
  display: block;
  height: 100%;
  width: 100%;
}
.themeBrandMarkImageLight {
  display: none;
}
html[data-theme="light"] .themeBrandMarkImageDark {
  display: none;
}
html[data-theme="light"] .themeBrandMarkImageLight {
  display: block;
}
.logoNavLockup {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.logoNavName {
  color: var(--oi-text);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.logoNavDescriptor {
  color: var(--oi-text-muted);
  font-size: 10px;
  letter-spacing: 0.13em;
  margin-top: 5px;
  text-transform: uppercase;
}
.authActionsDiv {
  gap: 20px;
}
.headerActions {
  align-items: center;
  display: flex;
  gap: 18px;
}
.themeToggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 34px;
  padding: 0;
  width: 60px;
}
.themeToggleTrack {
  align-items: center;
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 999px;
  display: flex;
  height: 32px;
  justify-content: space-between;
  padding: 0 7px;
  position: relative;
  transition: background 160ms ease, border-color 160ms ease;
  width: 60px;
}
.themeToggle:hover .themeToggleTrack {
  background: var(--oi-surface-hover);
  border-color: var(--oi-text-faint);
}
.themeToggleIcon {
  align-items: center;
  color: var(--oi-text-faint);
  display: inline-flex;
  height: 16px;
  justify-content: center;
  width: 16px;
  z-index: 1;
}
.themeToggleIcon svg {
  fill: none;
  height: 15px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 15px;
}
.themeToggleThumb {
  background: var(--oi-text);
  border-radius: 50%;
  height: 22px;
  left: 4px;
  position: absolute;
  top: 4px;
  transform: translateX(28px);
  transition: transform 180ms ease;
  width: 22px;
}
html[data-theme="light"] .themeToggleThumb {
  transform: translateX(0);
}
html[data-theme="light"] .themeToggleSun,
html[data-theme="dark"] .themeToggleMoon {
  color: var(--oi-canvas);
}
.headerAuthLink,
.headerAuthLink:hover,
.headerAuthLink:focus-visible {
  color: var(--oi-text-muted);
  font-size: 14px;
  font-weight: 500;
}
.headerAuthLink:hover {
  color: var(--oi-text);
}
.navbar-toggler {
  border: 1px solid var(--oi-border);
  border-radius: 8px;
  display: none !important;
  padding: 0;
}
.mobileMenuIcon {
  display: grid;
  gap: 4px;
  width: 18px;
}
.mobileMenuIcon span {
  background: currentColor;
  border-radius: 999px;
  display: block;
  height: 1.5px;
  width: 100%;
}
.oiLanding {
  margin: 0;
  padding-top: 0;
}
.oiHero,
.oiSection,
.oiTemplateNote,
.oiRule {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--oi-content);
  width: 100%;
}
.oiHero {
  min-height: 530px;
  padding: clamp(82px, 12vw, 144px) 0 84px;
}
.oiEyebrow {
  color: var(--oi-text);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.oiHero h1 {
  color: var(--oi-text);
  font-size: clamp(48px, 7vw, 76px);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 0.99;
  margin: 28px 0 26px;
  max-width: 880px;
}
.oiHero > p {
  color: var(--oi-text-muted);
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}
.oiHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}
.oiRule {
  border-top: 1px solid var(--oi-border-subtle);
}
.oiSection {
  padding: 76px 0;
}
.oiSectionHeading {
  align-items: end;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  margin-bottom: 36px;
}
.oiSection h2 {
  color: var(--oi-text);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 16px 0 0;
}
.oiSectionHeading > p,
.oiCard p,
.oiTemplateNote p {
  color: var(--oi-text-muted);
  line-height: 1.55;
  margin: 0;
}
.oiCardGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.oiCard {
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  min-height: 248px;
  padding: 24px;
  position: relative;
}
.oiCardNumber {
  color: var(--oi-text-faint);
  font-size: 12px;
  position: absolute;
  right: 22px;
  top: 22px;
}
.oiCard h3 {
  color: var(--oi-text);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 48px 0 14px;
}
.oiCapabilityList {
  border-top: 1px solid var(--oi-border-subtle);
  margin-top: 36px;
}
.oiCapability {
  align-items: center;
  border-bottom: 1px solid var(--oi-border-subtle);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.3fr) auto;
  padding: 21px 0;
}
.oiCapability strong {
  color: var(--oi-text);
  font-weight: 600;
}
.oiCapability span {
  color: var(--oi-text-muted);
}
.oiTemplateNote {
  align-items: center;
  border-top: 1px solid var(--oi-border-subtle);
  display: flex;
  gap: 16px;
  padding: 48px 0;
}
.oiTemplateNote img {
  height: 40px;
  width: 40px;
}
.oiTemplateNoteMark {
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
}
.copyrightFooterGrey,
.copyrightFooterPrimary,
.copyrightFooterWhite {
  align-items: center;
  background: transparent;
  border-top: 1px solid var(--oi-border-subtle);
  bottom: auto;
  color: var(--oi-text-muted);
  display: flex;
  font-size: 13px;
  gap: 28px;
  height: auto;
  justify-content: space-between;
  left: auto;
  margin: 0 auto;
  max-width: var(--oi-content);
  min-height: 76px;
  padding: 22px 0;
  position: relative;
  width: 100%;
  z-index: 1;
}
.footerLegalLinks {
  display: flex;
  gap: 20px;
}
.footerLegalLinks a {
  color: var(--oi-text-muted);
  text-decoration: none;
}
.footerLegalLinks a:hover {
  color: var(--oi-text);
}
.authenticationDiv {
  align-items: flex-start;
  min-height: calc(100vh - 254px);
  padding: 64px 0 42px;
}
.authenticationFormDiv,
.authenticationFormDiv.doubleWidth {
  max-width: 760px;
}
.authenticationFormDiv:not(.doubleWidth) {
  max-width: 460px;
}
.authIntro {
  margin-bottom: 30px;
  width: 100%;
}
.authIntro h1 {
  color: var(--oi-text);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin: 16px 0 12px;
}
.authIntro p {
  color: var(--oi-text-muted);
  margin: 0;
}
.contentMainHeaderDiv,
.pageHeaderDiv {
  color: var(--oi-text);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
}
.authenticationForm,
.applicationForm,
.applicationFormDiv {
  max-width: none;
  width: 100%;
}
.formInputsDiv,
.applicationForm .formInputsDiv {
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  box-shadow: none;
  gap: 24px;
  padding: 28px;
}
.formInputsDiv label,
.applicationForm label,
.formLabelP {
  color: var(--oi-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
input,
select,
textarea,
.formInputsDiv input,
.modalForm input,
.modalForm select,
.ReactModal__Content input,
.locationsDiv input,
.locationsDiv select {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid var(--oi-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--oi-text) !important;
  min-height: 46px;
  padding: 0 14px;
}
textarea {
  min-height: 120px;
  padding-bottom: 12px;
  padding-top: 12px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--oi-text-faint);
}
input::placeholder,
textarea::placeholder {
  color: var(--oi-text-faint);
}
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
}
select option {
  background: var(--oi-surface);
  color: var(--oi-text);
}
.formLink,
.formLink:hover {
  color: var(--oi-text);
  font-size: 14px;
  text-underline-offset: 3px;
}
.formLink:hover {
  text-decoration-thickness: 2px;
}
.formTermsDiv,
.formCheckBox {
  color: var(--oi-text-muted);
  font-size: 14px;
}
.controlCheckboxIndicator {
  background: transparent;
  border: 1px solid var(--oi-border);
}
.controlCheckbox input:checked ~ .controlCheckboxIndicator {
  background: var(--oi-text);
  border-color: var(--oi-text);
}
.controlCheckbox .controlCheckboxIndicator::after {
  border-color: var(--oi-canvas);
}
.validationMessage,
.validationMessageDiv,
.invalidFeedback {
  color: var(--oi-danger) !important;
}
.legalPage {
  background: var(--oi-canvas);
  color: var(--oi-text);
  min-height: calc(100vh - 72px);
  padding: 72px clamp(24px, 6vw, 80px) 110px;
}
.legalPageInner {
  margin: 0 auto;
  max-width: 820px;
}
.legalPage h1 {
  color: var(--oi-text);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 58px 0 20px;
}
.legalPage h1:first-child {
  margin-top: 0;
}
.legalPage h2 {
  color: var(--oi-text);
  font-size: 26px;
  margin: 38px 0 14px;
}
.legalPage h3 {
  color: var(--oi-text);
  font-size: 19px;
  margin: 30px 0 10px;
}
.legalPage p,
.legalPage li {
  color: var(--oi-text-muted);
  line-height: 1.75;
}
.legalPage a {
  color: var(--oi-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.navigationSidebar {
  background: var(--oi-canvas);
  border-right: 1px solid var(--oi-border-subtle);
  height: calc(100vh - 72px);
}
.navigationSidebarLink {
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--oi-text-muted);
  font-size: 14px;
}
.navigationSidebarIcon {
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.66;
}
html[data-theme="light"] .navigationSidebarIcon {
  filter: grayscale(1) brightness(0);
}
.navigationSidebarLink:hover,
.navigationSidebarLink.activeSidebarNav {
  background: var(--oi-surface-raised);
  border-color: var(--oi-border-subtle);
  color: var(--oi-text);
}
.navigationSidebarLink:hover .navigationSidebarIcon,
.navigationSidebarLink.activeSidebarNav .navigationSidebarIcon {
  opacity: 1;
}
.navigationSidebarSplitter {
  border-color: var(--oi-border);
}
.user-dropdown .dropdown-toggle,
.user-dropdown .dropdown-toggle:hover,
.user-dropdown .dropdown-toggle:focus {
  color: var(--oi-text) !important;
  font-size: 14px;
}
.userDropdownInitials {
  align-items: center;
  background: var(--oi-text);
  border-radius: 50%;
  color: var(--oi-canvas);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  width: 34px;
}
.dropdown-menu {
  background: var(--oi-surface);
  border: 1px solid var(--oi-border);
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  overflow: hidden;
}
.dropdown-menu .dropdown-item {
  color: var(--oi-text-muted);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background: var(--oi-surface-hover);
  color: var(--oi-text);
}
.dropdown-divider {
  border-color: var(--oi-border-subtle);
}
.ReactModal__Overlay {
  background: var(--oi-overlay) !important;
}
.ReactModal__Content {
  background: var(--oi-surface) !important;
  border: 1px solid var(--oi-border) !important;
  border-radius: var(--oi-radius) !important;
  color: var(--oi-text);
  box-shadow: 0 26px 80px rgba(0,0,0,0.48);
}
.modalHeader {
  color: var(--oi-text);
  font-weight: 600;
}
.modalCancel {
  background: transparent;
  border: 1px solid var(--oi-border);
  border-radius: 8px;
  color: var(--oi-text);
}
.modalCancel:hover {
  background: var(--oi-surface-hover);
  border-color: var(--oi-text-faint);
}
.adminHeaderDiv,
.pageHeaderDiv,
.contentMainDiv {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--oi-content);
  width: 100%;
}
.detailDiv,
.card,
.alert-secondary {
  background: var(--oi-surface-raised) !important;
  border: 1px solid var(--oi-border) !important;
  border-radius: var(--oi-radius);
  box-shadow: none;
  color: var(--oi-text);
}
table {
  color: var(--oi-text);
}
table thead th {
  background: rgba(255,255,255,0.075) !important;
  border-color: var(--oi-border-subtle) !important;
  color: var(--oi-text) !important;
}
table td,
table th {
  border-color: var(--oi-border-subtle) !important;
}
.stickyCol {
  background: var(--oi-surface) !important;
  color: var(--oi-text) !important;
}
.editUser,
.descriptionDiv,
.deleteListItem {
  color: var(--oi-text) !important;
}
.profileImageDropZone,
.profileImage {
  background-color: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
}
.swal2-popup {
  background: var(--oi-surface) !important;
  color: var(--oi-text) !important;
}
.swal2-title,
.swal2-html-container {
  color: var(--oi-text) !important;
}
.swal2-confirm {
  background: var(--oi-text) !important;
  color: var(--oi-canvas) !important;
}
.not-found-page {
  background: var(--oi-canvas);
  min-height: calc(100vh - 72px);
  padding: 80px;
}
.configurationWelcome,
.configurationShell {
  background: radial-gradient(circle at 76% 16%, var(--oi-surface-hover), transparent 32%), var(--oi-canvas);
  color: var(--oi-text);
  min-height: 100vh;
}
.configurationHeader {
  align-items: center;
  backdrop-filter: blur(18px);
  background: var(--oi-header);
  border-bottom: 1px solid var(--oi-border-subtle);
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px clamp(22px, 4vw, 56px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.configurationIdentity,
.configurationIdentityButton {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--oi-text);
  display: inline-flex;
  gap: 12px;
  padding: 0;
  text-align: left;
}
.configurationIdentityButton {
  cursor: pointer;
}
.configurationIdentity > span:last-child {
  display: flex;
  flex-direction: column;
}
.configurationIdentity strong {
  font-size: 15px;
  font-weight: 650;
}
.configurationIdentity small {
  color: var(--oi-text-muted);
  font-size: 10px;
  letter-spacing: 0.13em;
  margin-top: 4px;
  text-transform: uppercase;
}
.configurationMark {
  height: 38px;
  width: 38px;
}
.configurationHeaderActions {
  align-items: center;
  color: var(--oi-text-muted);
  display: flex;
  font-size: 12px;
  gap: 18px;
  text-transform: uppercase;
}
.configurationWelcomeContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  min-height: calc(100vh - 72px);
  max-width: var(--oi-content);
  padding: 90px 0;
}
.configurationWelcomeContent h1 {
  color: var(--oi-text);
  font-size: clamp(54px, 7.5vw, 88px);
  font-weight: 610;
  letter-spacing: -0.052em;
  line-height: 0.97;
  margin: 28px 0;
  max-width: 980px;
}
.configurationWelcomeContent > p {
  color: var(--oi-text-muted);
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 38px;
  max-width: 690px;
}
.configurationWelcomeContent .appButton {
  align-self: flex-start;
}
.configurationWelcomeMeta {
  border-top: 1px solid var(--oi-border-subtle);
  color: var(--oi-text-faint);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 28px;
  margin-top: 90px;
  padding-top: 22px;
  text-transform: uppercase;
}
.configurationWorkspace {
  align-items: start;
  display: grid;
  gap: clamp(42px, 6vw, 84px);
  grid-template-columns: 250px minmax(0, 820px);
  margin: 0 auto;
  max-width: 1180px;
  padding: 72px 30px 120px;
}
.configurationProgress {
  display: flex;
  flex-direction: column;
  gap: 34px;
  position: sticky;
  top: 128px;
}
.configurationProgress h1 {
  color: var(--oi-text);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}
.configurationProgress ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.configurationProgress li button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--oi-text-faint);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  gap: 12px;
  padding: 9px;
  text-align: left;
  width: 100%;
}
.configurationProgress li button > span {
  align-items: center;
  border: 1px solid var(--oi-border);
  border-radius: 50%;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  height: 26px;
  justify-content: center;
  width: 26px;
}
.configurationProgress li.isCurrent button {
  background: var(--oi-surface-hover);
  color: var(--oi-text);
}
.configurationProgress li.isCurrent button > span,
.configurationProgress li.isComplete button > span {
  background: var(--oi-action-bg);
  border-color: var(--oi-action-bg);
  color: var(--oi-action-text);
}
.configurationProgress li.isComplete button {
  color: var(--oi-text-muted);
}
.configurationProgress li button:disabled {
  cursor: default;
}
.configurationProgressBar {
  background: var(--oi-surface-raised);
  border-radius: 999px;
  height: 3px;
  overflow: hidden;
}
.configurationProgressBar span {
  background: var(--oi-text);
  display: block;
  height: 100%;
  transition: width 220ms ease;
}
.configurationPanel {
  min-width: 0;
}
.configurationSectionHeading {
  border-bottom: 1px solid var(--oi-border-subtle);
  margin-bottom: 34px;
  padding-bottom: 30px;
}
.configurationSectionHeading h2 {
  color: var(--oi-text);
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 610;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 18px 0;
}
.configurationSectionHeading p {
  color: var(--oi-text-muted);
  line-height: 1.65;
  margin: 0;
  max-width: 660px;
}
.configurationGrid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.configurationField {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.configurationFieldWide {
  grid-column: 1/-1;
}
.configurationField > span,
.configurationColour > span:first-child {
  align-items: center;
  color: var(--oi-text-muted);
  display: flex;
  font-size: 13px;
  font-weight: 600;
  justify-content: space-between;
}
.configurationField em {
  color: var(--oi-text-faint);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.configurationField input,
.configurationField textarea,
.configurationField select,
.configurationColour input[type="text"],
.configurationColour input:not([type]) {
  background: var(--oi-surface-raised) !important;
  border: 1px solid var(--oi-border) !important;
  border-radius: 9px !important;
  color: var(--oi-text) !important;
  font-size: 15px;
  width: 100%;
}
.configurationField input,
.configurationField select {
  height: 48px;
}
.configurationField textarea {
  min-height: 112px;
  resize: vertical;
}
.configurationField small,
.configurationAsset small {
  color: var(--oi-text-faint);
  font-size: 11px;
  line-height: 1.45;
}
.configurationField .configurationFieldError {
  color: var(--oi-danger);
}
.configurationField.hasError input,
.configurationField.hasError textarea,
.configurationField.hasError select,
.configurationColour.hasError input:not([type="color"]) {
  border-color: var(--oi-danger) !important;
}
.configurationField.hasError input:focus,
.configurationField.hasError textarea:focus,
.configurationField.hasError select:focus,
.configurationColour.hasError input:not([type="color"]):focus {
  box-shadow: 0 0 0 3px var(--oi-danger-soft) !important;
  outline: none;
}
.configurationColour .configurationFieldError {
  color: var(--oi-danger);
  display: block;
  font-size: 11px;
  margin-top: 8px;
}
.configurationValidationSummary {
  background: var(--oi-danger-soft);
  border: 1px solid var(--oi-danger-border);
  border-radius: 10px;
  color: var(--oi-danger);
  font-size: 12px;
  margin-top: 22px;
  padding: 12px 16px;
}
.configurationValidationSummary ul {
  margin: 0;
  padding-left: 18px;
}
.configurationValidationSummary li + li {
  margin-top: 4px;
}
.configurationAssets {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 34px;
}
.configurationAsset {
  align-items: center;
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  min-width: 0;
  padding: 14px;
}
.configurationAsset.hasError {
  border-color: var(--oi-danger);
}
.configurationAsset > .configurationFieldError {
  color: var(--oi-danger);
  flex-basis: 100%;
  padding: 0 14px 12px;
}
.configurationAsset:hover {
  background: var(--oi-surface-hover);
  border-color: var(--oi-text-faint);
}
.configurationAssetPreview {
  align-items: center;
  background: var(--oi-canvas);
  border: 1px solid var(--oi-border-subtle);
  border-radius: 9px;
  display: flex;
  flex: 0 0 auto;
  height: 62px;
  justify-content: center;
  overflow: hidden;
  width: 62px;
}
.configurationAssetPreview img {
  height: 42px;
  -o-object-fit: contain;
     object-fit: contain;
  width: 42px;
}
.configurationAssetPreview > span {
  color: var(--oi-text-faint);
  font-size: 9px;
  text-transform: uppercase;
}
.configurationAsset > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.configurationAsset strong {
  color: var(--oi-text);
  font-size: 13px;
  margin-bottom: 3px;
}
.configurationAsset input[type="file"] {
  color: var(--oi-text-muted) !important;
  font-size: 10px;
  margin-top: 9px;
  min-height: 0;
  padding: 0;
  width: 100%;
}
.configurationAsset input[type="file"]::file-selector-button {
  background: transparent;
  border: 0;
  color: var(--oi-text);
  cursor: pointer;
  font-weight: 600;
  padding: 0 8px 0 0;
}
.configurationColourGrid {
  margin-top: 12px;
}
.configurationColour {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.configurationColour > span:last-child {
  align-items: center;
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 9px;
  display: flex;
  gap: 10px;
  height: 48px;
  padding: 6px 12px 6px 7px;
}
.configurationColour input[type="color"] {
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
  height: 34px;
  min-height: 0;
  padding: 0;
  width: 34px;
}
.configurationColour input:last-child {
  background: transparent !important;
  border: 0 !important;
  color: var(--oi-text) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  min-height: 0;
  padding: 0;
  width: 100%;
}
.configurationChoices {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 32px;
}
.configurationAdminSetup {
  border-top: 1px solid var(--oi-border-subtle);
  margin-top: 30px;
  padding-top: 28px;
}
.configurationAdminSetup strong {
  color: var(--oi-text);
  font-size: 15px;
}
.configurationAdminSetup p {
  color: var(--oi-text-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 6px 0 18px;
}
.accountSetupIntroduction {
  color: var(--oi-text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}
.configurationChoice {
  align-items: flex-start;
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: 14px;
  margin: 0;
  min-height: 112px;
  padding: 20px;
}
.configurationChoice:hover {
  background: var(--oi-surface-hover);
  border-color: var(--oi-text-faint);
}
.configurationChoice > input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}
.configurationChoiceControl {
  background: transparent;
  border: 1px solid var(--oi-border);
  border-radius: 5px;
  flex: 0 0 auto;
  height: 22px;
  position: relative;
  width: 22px;
}
.configurationChoice input:checked + .configurationChoiceControl {
  background: var(--oi-action-bg);
  border-color: var(--oi-action-bg);
}
.configurationChoice input:checked + .configurationChoiceControl::after {
  border: solid var(--oi-action-text);
  border-width: 0 2px 2px 0;
  content: "";
  height: 10px;
  left: 7px;
  position: absolute;
  top: 3px;
  transform: rotate(45deg);
  width: 5px;
}
.configurationChoice input:focus-visible + .configurationChoiceControl {
  outline: 2px solid var(--oi-focus);
  outline-offset: 3px;
}
.configurationChoice > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.configurationChoice strong {
  color: var(--oi-text);
  font-size: 15px;
}
.configurationChoice small {
  color: var(--oi-text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.configurationIntegrationChoices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.configurationNotice,
.configurationGenerateNote {
  background: var(--oi-surface-raised);
  border-left: 2px solid var(--oi-text);
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
}
.configurationNotice strong,
.configurationGenerateNote strong {
  color: var(--oi-text);
  font-size: 13px;
}
.configurationNotice span,
.configurationGenerateNote p {
  color: var(--oi-text-muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
}
.configurationReview {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 26px;
}
.configurationReview article {
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 12px;
  padding: 20px;
}
.configurationReview h3 {
  color: var(--oi-text);
  font-size: 15px;
  margin: 0 0 16px;
}
.configurationReview dl {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.configurationReview dl > div {
  display: grid;
  gap: 14px;
  grid-template-columns: 110px 1fr;
}
.configurationReview dt {
  color: var(--oi-text-faint);
  font-size: 11px;
}
.configurationReview dd {
  color: var(--oi-text-muted);
  font-size: 12px;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}
.configurationMessage {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 4px;
  margin-top: 22px;
  padding: 14px 16px;
}
.configurationMessageError {
  background: var(--oi-danger-soft);
  border: 1px solid var(--oi-danger-border);
  color: var(--oi-danger);
}
.configurationMessageSuccess {
  background: var(--oi-success-soft);
  border: 1px solid var(--oi-success-border);
  color: var(--oi-success);
}
.configurationActions {
  align-items: center;
  border-top: 1px solid var(--oi-border-subtle);
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 24px;
}
@media screen and (max-width: 900px) {
  .oiSectionHeading {
    align-items: start;
    grid-template-columns: 1fr;
  }
  .oiCardGrid {
    grid-template-columns: 1fr;
  }
  .oiCard {
    min-height: 210px;
  }
  .configurationWorkspace {
    grid-template-columns: 1fr;
  }
  .configurationProgress {
    position: static;
  }
  .configurationProgress ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .configurationAssets {
    grid-template-columns: 1fr;
  }
  .oiCapability {
    grid-template-columns: 1fr auto;
  }
  .oiCapability span:nth-child(2) {
    grid-column: 1/-1;
    grid-row: 2;
  }
}
@media screen and (max-width: 768px) {
  .navHeader {
    min-height: 64px;
    padding: 10px 18px;
  }
  .navHeader .navbar-toggler {
    align-items: center;
    background: transparent;
    color: var(--oi-text);
    display: inline-flex !important;
    height: 36px;
    justify-content: center;
    width: 36px;
  }
  .logoNavDescriptor,
  .authActionsDiv {
    display: none;
  }
  .headerActions {
    gap: 10px;
  }
  .themeToggle {
    height: 32px;
    width: 54px;
  }
  .themeToggleTrack {
    height: 30px;
    width: 54px;
  }
  .themeToggleThumb {
    height: 20px;
    width: 20px;
  }
  html[data-theme="dark"] .themeToggleThumb {
    transform: translateX(24px);
  }
  .appContentMain {
    padding-left: 20px;
    padding-right: 20px;
  }
  .oiHero {
    min-height: auto;
    padding: 76px 0 64px;
  }
  .oiHero h1 {
    font-size: clamp(44px, 13vw, 62px);
  }
  .oiSection {
    padding: 60px 0;
  }
  .copyrightFooterGrey,
  .copyrightFooterPrimary,
  .copyrightFooterWhite {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .authenticationDiv {
    padding-top: 42px;
  }
  .formInputsDiv {
    padding: 22px;
  }
  .formInputDiv.halfWidthDiv {
    width: 100%;
  }
  .legalPage {
    padding-left: 22px;
    padding-right: 22px;
  }
  .configurationWelcomeContent {
    padding-left: 22px;
    padding-right: 22px;
  }
  .configurationWelcomeContent h1 {
    font-size: clamp(46px, 14vw, 68px);
  }
  .configurationWelcomeMeta {
    margin-top: 64px;
  }
  .configurationWorkspace {
    padding: 42px 20px 90px;
  }
  .configurationProgress ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .configurationGrid,
  .configurationChoices,
  .configurationIntegrationChoices,
  .configurationReview {
    grid-template-columns: 1fr;
  }
  .configurationFieldWide {
    grid-column: auto;
  }
  .configurationHeaderActions > span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body,
  .themeToggleThumb {
    transition: none;
  }
}
.pageIntroduction {
  color: var(--oi-text-muted);
  font-size: 16px;
  margin: -10px 0 28px;
  max-width: 720px;
}
.integrationStatusGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 0;
}
.integrationStatusCard {
  background: var(--oi-surface);
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  padding: 20px;
}
.integrationName {
  color: var(--oi-text-muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.integrationStatusCard {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.integrationStatusCard p {
  color: var(--oi-text-muted);
  margin: 0;
}
.statusBadge {
  border: 1px solid var(--oi-border);
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
}
.statusEnabled {
  background: var(--oi-success-soft);
  border-color: var(--oi-success-border);
  color: var(--oi-success);
}
.statusDisabled {
  background: var(--oi-surface-raised);
  color: var(--oi-text-muted);
}
.applicationTableContainer {
  background: var(--oi-surface);
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  overflow: visible;
  width: 100%;
}
.applicationTableHeader {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 16px;
}
.applicationTableTitle {
  color: var(--oi-text);
  font-size: 20px;
  font-weight: 600;
}
.applicationTableInteractions input {
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 9px;
  color: var(--oi-text);
  height: 40px;
  min-width: 220px;
  padding: 0 12px;
}
.applicationTableScroll {
  overflow-x: auto;
  width: 100%;
}
.applicationTable {
  border-collapse: collapse;
  min-width: 560px;
  width: 100%;
}
.applicationTable th,
.applicationTable td {
  border-bottom: 1px solid var(--oi-border-subtle);
  color: var(--oi-text);
  padding: 14px 16px;
  text-align: left;
}
.applicationTable th {
  background: var(--oi-text) !important;
  color: var(--oi-canvas) !important;
  font-size: 12px;
  letter-spacing: 0.06em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
}
.applicationTable tbody tr:hover td {
  background: var(--oi-surface-hover);
}
.applicationTableCellNoWrap {
  white-space: nowrap;
}
.applicationTableActionsCell {
  display: flex;
  gap: 6px;
}
.applicationTableAction,
.applicationTableFooter .appButton {
  min-width: 32px;
}
.applicationTableNoData {
  color: var(--oi-text-muted) !important;
  text-align: center !important;
}
.applicationTableFooter {
  align-items: center;
  color: var(--oi-text-muted);
  display: flex;
  gap: 7px;
  justify-content: flex-end;
  min-height: 56px;
  padding: 10px 16px;
}
.applicationTablePageSize {
  flex: 0 0 120px;
  min-width: 110px;
  width: 120px;
}
.application-table-select__control {
  align-items: center;
  border: 1px solid var(--oi-border);
  border-radius: 7px;
  color: var(--oi-text);
  display: flex;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 8px;
}
.application-table-select__value-container {
  align-items: center;
  display: flex;
}
.application-table-select__indicators {
  align-items: center;
  display: flex;
}
.application-table-select__menu {
  background: var(--oi-surface);
  border: 1px solid var(--oi-border);
  border-radius: 7px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.2);
  color: var(--oi-text);
  overflow: hidden;
}
.application-table-select__option {
  padding: 8px 10px;
}
.application-table-select__option:hover {
  background: var(--oi-surface-hover);
}
.roleToggleGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.roleToggle {
  border-radius: 999px;
  text-transform: capitalize;
}
.inlineStatusMessage {
  color: var(--oi-text-muted);
  margin-bottom: 16px;
}
.emptyState,
.loadingState {
  align-items: flex-start;
  background: var(--oi-surface-raised);
  border: 1px dashed var(--oi-border);
  border-radius: var(--oi-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 140px;
  padding: 24px;
}
.emptyState h2,
.emptyState h3,
.emptyState p {
  margin: 0;
}
.emptyState p {
  color: var(--oi-text-muted);
  margin-top: 6px;
}
.loadingState {
  align-items: center;
  flex-direction: row;
  gap: 12px;
}
.loadingState .sweet-loading {
  align-items: center;
  display: flex;
  min-height: 28px;
  min-width: 28px;
}
.sweet-loading-contained {
  margin: 0;
  position: static;
  z-index: auto;
}
.componentLibrary {
  max-width: 1120px;
}
.componentLibrarySection {
  border-top: 1px solid var(--oi-border);
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.5fr);
  padding: 36px 0;
}
.componentLibrarySection header h2 {
  color: var(--oi-text);
  font-size: 22px;
  margin: 0 0 8px;
}
.componentLibrarySection header p {
  color: var(--oi-text-muted);
  margin: 0;
}
.componentLibraryExample {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.componentLibraryForm {
  display: grid;
  gap: 12px;
}
.componentLibraryForm > div {
  display: grid;
  gap: 6px;
}
.uniformsDateTimePicker,
.uniformsImageField {
  display: grid;
  gap: 7px;
}
.uniformsDateTimePicker > label,
.uniformsImageFieldHeader > span:first-child {
  color: var(--oi-text);
  font-size: 14px;
  font-weight: 600;
}
.uniformsDateTimePicker .form-control {
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: 9px;
  color: var(--oi-text);
  min-height: 48px;
  padding: 0 14px;
  width: 100%;
}
.rdtPicker {
  background: var(--oi-surface);
  border: 1px solid var(--oi-border);
  border-radius: 9px;
  color: var(--oi-text);
}
.rdtPicker td.rdtActive,
.rdtPicker td.rdtActive:hover {
  background: var(--oi-action-bg);
  color: var(--oi-action-text);
}
.uniformsImageFieldHeader {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.imageFieldSteps {
  color: var(--oi-text-muted);
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}
.imageFieldSteps .isComplete {
  color: var(--oi-success);
}
.imageFieldResult {
  align-items: center;
  background: var(--oi-surface-raised);
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  display: grid;
  gap: 16px;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  padding: 16px;
}
.imageFieldResult img {
  border-radius: 8px;
  height: 104px;
  -o-object-fit: cover;
     object-fit: cover;
  width: 104px;
}
.imageFieldResult div {
  display: grid;
  gap: 4px;
}
.imageFieldResult span {
  color: var(--oi-text-muted);
  font-size: 13px;
}
.fieldError {
  color: var(--oi-danger);
}
.componentStateGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.applicationAlert {
  border: 1px solid var(--oi-border);
  border-radius: var(--oi-radius);
  display: grid;
  gap: 4px;
  padding: 16px;
}
.applicationAlert-info {
  background: var(--oi-surface-raised);
}
.applicationAlert-success {
  background: var(--oi-success-soft);
  border-color: var(--oi-success-border);
}
.applicationAlert-warning {
  color: var(--oi-warning);
}
.applicationAlert-error {
  background: var(--oi-danger-soft);
  border-color: var(--oi-danger-border);
  color: var(--oi-danger);
}
.componentButtonExamples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.componentImageExample {
  display: grid;
  gap: 12px;
}
.componentImageExample img {
  border-radius: var(--oi-radius);
  max-height: 280px;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 760px) {
  .componentLibrarySection {
    grid-template-columns: 1fr;
  }
  .componentStateGrid {
    grid-template-columns: 1fr;
  }
  .imageFieldResult {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .imageFieldResult img {
    height: 80px;
    width: 80px;
  }
  .imageFieldResult button {
    grid-column: 1/-1;
  }
}
@keyframes appFadeIn {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
@keyframes appFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.3;
  }
}
@keyframes appButtonSpin {
  to {
    transform: rotate(360deg);
  }
}