/* =================================================================
   Global Styles - Main Entry Point
   ================================================================= */
/**
 * MacroHealth Theme - SCSS Variables
 * Generated from Liferay Stylebook frontend-token-values.json
 *
 * This file contains all design tokens from the MacroHealth stylebook
 * as both SCSS variables and CSS custom properties.
 *
 * Usage:
 * 1. Import this file in your SCSS: @import 'macrohealth-theme';
 * 2. Use SCSS variables: $color-primary-white
 * 3. Or use CSS variables: var(--color-primary-white)
 */
#content {
  display: flex;
  flex-direction: column;
}

:root {
  --color-primary-white: #FFFFFF;
  --color-secondary-midnight: #123B5B;
  --color-accent-bright-violet: #A924FF;
  --color-paragraph-text-color: #123B5B;
  --color-paragraph-text-color-87: rgba(18, 59, 91, 0.8705882353);
  --color-primary-perl-white: #F7F7F8;
  --color-primary-solitude: #F3F4F6;
  --color-primary-hawkes-blue: #D9DcE0;
  --color-secondary-87: rgba(18, 59, 91, 0.8705882353);
  --color-secondary-70: rgba(18, 59, 91, 0.7019607843);
  --color-secondary-60: rgba(18, 59, 91, 0.6);
  --color-secondary-30: rgba(18, 59, 91, 0.3019607843);
  --color-accent-lilac: #E5BCFF;
  --color-grey-silver-sand: #B6BBBE;
  --color-grey-light-slate: #818790;
  --color-grey-bright-grey: #4D4F5C;
  --color-grey-charcoal: #333333;
  --color-data-visualization-bright-grey: #396A8F;
  --color-data-visualization-blue-sky-mist: #74A0C2;
  --color-data-visualization-light-slate: #C4E0F5;
  --color-data-visualization-silver-sand: #CCE9FF;
  --color-traffic-light-positive-mint-zest: #24FE83;
  --color-traffic-light-neutral-sunset-gold: #FF9500;
  --color-traffic-light-negative-cherry-blaze: #FF144D;
  --color-success-colors-success-genoa: #12805C;
  --color-success-colors-caution-sunset-gold: #FF9500;
  --color-success-colors-error-carmine: #B00020;
  --color-success-colors-info-royal-blue: #3267EF;
  --color-success-colors-info-royal-blue-6: rgba(50, 103, 239, 0.0588235294);
  --spacer-0: 0;
  --spacer-1: 0.25rem;
  --spacer-2: 0.5rem;
  --spacer-3: 1rem;
  --spacer-4: 1.5rem;
  --spacer-5: 3rem;
  --spacer-6: 4.5rem;
  --spacer-7: 6rem;
  --spacer-8: 7.5rem;
  --spacer-9: 9rem;
  --spacer-10: 10rem;
  --mhbutton-padding: 16px;
  --body-bg: #FFFFFF;
  --body-color: #123B5B;
  --border-radius: 0.25rem;
  --border-radius-sm: 0.1875rem;
  --border-radius-lg: 0.375rem;
  --border-radius-circle: 50%;
  --rounded-pill: 50rem;
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-top-inset: inset 5px 5px 7px -8px rgba(0, 0, 0, 0.75);
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --aspect-ratio: 100%;
  --aspect-ratio-4-to-3: 75%;
  --aspect-ratio-8-to-3: 37.5%;
  --aspect-ratio-16-to-9: 56.25%;
  --transition-collapse: height 0.35s ease;
  --transition-fade: opacity 0.15s linear;
  --container-max-sm: 540px;
  --container-max-md: 720px;
  --container-max-lg: 960px;
  --container-max-xl: 1248px;
  --font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-size-base: 1rem;
  --font-size-regular: 1rem;
  --font-size-Small: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-weight-100: 100;
  --font-weight-200: 200;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-800: 800;
  --font-weight-bolder: 900;
  --font-style-italic: italic;
  --h1-font-size: 2.5rem;
  --h2-font-size: 2rem;
  --h3-font-size: 1.75rem;
  --h4-font-size: 1.5rem;
  --h5-font-size: 1.25rem;
  --h6-font-size: 1rem;
  --body-caption-1: 0.75rem;
  --display1-size: 6rem;
  --display2-size: 5.5rem;
  --display3-size: 4.5rem;
  --display4-size: 3.5rem;
  --display1-weight: 300;
  --display2-weight: 300;
  --display3-weight: 300;
  --display4-weight: 300;
  --display-line-height: 1.2;
  --lead-font-size: 1.25rem;
  --lead-font-weight: 300;
  --text-muted: #a7a9bc;
  --blockquote-font-size: 1.25rem;
  --blockquote-small-color: #6b6c7e;
  --blockquote-small-font-size: 80%;
  --hr-border-color: rgba(0, 0, 0, 0.1);
  --hr-border-width: 1px;
  --hr-border-margin-y: 1rem;
  --btn-primary-background-color: #a924ff;
  --btn-primary-border-color: #a924ff;
  --btn-primary-color: #F7F7F8;
  --btn-primary-hover-background-color: rgba(169, 36, 255, 0.7019607843);
  --btn-primary-active-focus-background-color: rgba(169, 36, 255, 0.6);
  --btn-primary-hover-border-color: transparent;
  --btn-primary-hover-color: #fff;
  --btn-primary-active-background-color: rgba(169, 36, 255, 0.8);
  --btn-primary-active-border-color: transparent;
  --btn-primary-active-color: #F7F7F8;
  --btn-primary-focus-background-color: rgba(169, 36, 255, 0.8);
  --btn-primary-focus-border-color: transparent;
  --btn-primary-focus-color: #F7F7F8;
  --btn-outline-primary-border-color: #a924ff;
  --btn-outline-primary-color: #a924ff;
  --btn-outline-primary-hover-background-color: #f0f5ff;
  --btn-outline-primary-hover-border-color: #a924ff;
  --btn-outline-primary-hover-color: #a924ff;
  --btn-secondary-background-color: #123B5B;
  --btn-secondary-border-color: #123B5B;
  --btn-secondary-color: #F7F7F8;
  --btn-secondary-hover-background-color: rgba(18, 59, 91, 0.7019607843);
  --btn-secondary-hover-border-color: transparent;
  --btn-secondary-hover-color: #fff;
  --btn-secondary-active-background-color: rgba(18, 59, 91, 0.8);
  --btn-secondary-active-border-color: transparent;
  --btn-secondary-active-color: #F7F7F8;
  --btn-secondary-focus-background-color: rgba(18, 59, 91, 0.8);
  --btn-secondary-focus-border-color: transparent;
  --btn-secondary-focus-color: #F7F7F8;
  --btn-outline-secondary-border-color: #123B5B;
  --btn-outline-secondary-color: #123B5B;
  --btn-outline-secondary-hover-background-color: #f0f5ff;
  --btn-outline-secondary-hover-border-color: #123B5B;
  --btn-outline-secondary-hover-color: #123B5B;
  --btn-warning-background-color: rgba(176, 0, 32, 0.031372549);
  --btn-warning-border-color: #B00020;
  --btn-warning-color: #F7F7F8;
  --btn-warning-hover-background-color: rgba(176, 0, 32, 0.7019607843);
  --btn-warning-hover-border-color: transparent;
  --btn-warning-hover-color: #fff;
  --btn-warning-active-background-color: rgba(176, 0, 32, 0.8);
  --btn-warning-active-border-color: transparent;
  --btn-warning-active-color: #F7F7F8;
  --btn-warning-focus-background-color: rgba(176, 0, 32, 0.8);
  --btn-warning-focus-border-color: transparent;
  --btn-warning-focus-color: #F7F7F8;
  --btn-outline-warning-border-color: #B00020;
  --btn-outline-warning-color: #B00020;
  --btn-outline-warning-hover-background-color: #f0f5ff;
  --btn-outline-warning-hover-border-color: #B00020;
  --btn-outline-warning-hover-color: #B00020;
  --btn-link-color: #a924ff;
  --btn-link-hover-color: #004ad7;
}

/**
 * Usage Examples:
 *
 * // Using SCSS variables
 * .my-element {
 *   color: $color-primary-white;
 *   background: $color-secondary-midnight;
 *   padding: $spacer-3;
 * }
 *
 * // Using CSS custom properties
 * .my-element {
 *   color: var(--color-primary-white);
 *   background: var(--color-secondary-midnight);
 *   padding: var(--spacer-3);
 * }
 */
/* =================================================================
   Typography & Links
   ================================================================= */
/* Heading styles */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: Normal !important;
}

/* Default hyperlink styles */
a:enabled,
a {
  color: var(--btn-primary-background-color);
  text-decoration: none;
}

a:hover {
  color: var(--btn-primary-background-color);
  text-decoration: underline;
}

a:active {
  color: var(--btn-primary-background-color);
  text-decoration: underline;
}

a:focus {
  color: var(--btn-primary-background-color);
  outline: 2px solid var(--btn-primary-background-color);
  text-decoration: none;
}

a:visited {
  color: var(--btn-primary-background-color);
  text-decoration: none;
}

/* =================================================================
   Buttons
   ================================================================= */
/* Primary button */
.btn-primary {
  background-color: var(--btn-primary-background-color);
  min-width: 100px;
  max-width: fit-content;
  border-color: var(--btn-primary-border-color);
  color: var(--btn-primary-color);
  font-weight: normal;
  border-radius: 3px;
}

.btn-primary:active {
  background-color: var(--btn-primary-active-background-color);
  border-color: var(--btn-primary-active-border-color);
  color: var(--btn-primary-active-color);
}

.btn-primary:focus {
  background-color: var(--btn-primary-active-background-color);
  border-color: var(--btn-primary-active-border-color);
  color: var(--btn-primary-active-color);
  box-shadow: #fff 0px 0px 0px 2px, var(--btn-primary-active-background-color) 0px 0px 0px 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 3px;
}

/* Skip button */
.btn-skip {
  background-color: var(--color-primary-hawkes-blue);
  min-width: 100px;
  max-width: fit-content;
  border-color: var(--color-primary-hawkes-blue);
  color: var(--color-secondary-midnight);
  font-weight: normal;
  border-radius: 3px;
}

.btn-skip:active {
  background-color: var(--color-primary-hawkes-blue);
  border-color: var(--color-primary-hawkes-blue);
  color: var(--color-secondary-midnight);
}

.btn-skip:focus {
  background-color: var(--color-primary-hawkes-blue);
  border-color: var(--color-primary-hawkes-blue);
  color: var(--color-secondary-midnight);
  box-shadow: #fff 0px 0px 0px 2px, var(--color-primary-hawkes-blue) 0px 0px 0px 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 3px;
}

/* =================================================================
   Forms - Layout & Structure
   ================================================================= */
/* Form group layout */
.form-group,
.input-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  position: relative;
}

.input-group.search-bar-suggestions,
.input-group.input-group-sm,
.search-bar-simple.input-group {
  flex-direction: row;
}

/* Labels */
.form-group label,
label {
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  color: var(--color-paragraph-text-color-87);
}

.form-group > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: normal;
  color: var(--color-paragraph-text-color-87);
}

/* =================================================================
   Form Inputs - Base Styles
   ================================================================= */
/* Base input styles */
input,
select,
.form-control,
textarea {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  border-radius: 4px;
  border: 1px solid var(--color-grey-silver-sand);
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background-color: inherit;
  color: var(--color-paragraph-text-color);
}

.input-group .input-group-inset-item {
  height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease;
  background-color: inherit;
  color: var(--color-paragraph-text-color);
}

/* =================================================================
   Form Inputs - Interactive States
   ================================================================= */
/* Enabled state */
input:enabled,
select:enabled,
textarea:enabled {
  border-color: var(--color-grey-silver-sand);
}

/* Hover state */
input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-grey-silver-sand);
}

/* Active state */
input:active,
select:active,
textarea:active {
  border: 2px solid var(--btn-primary-active-focus-background-color);
  background-color: rgba(49, 103, 235, 0.05);
}

/* Focus state */
input:focus,
select:focus,
textarea:focus {
  border: 2px solid;
  border-color: var(--btn-primary-active-focus-background-color);
  background-color: white;
}

.form-control:focus-visible {
  border: 2px solid var(--btn-primary-active-focus-background-color);
  border-top: 2px solid var(--btn-primary-active-focus-background-color) !important;
  border-right: 2px solid var(--btn-primary-active-focus-background-color) !important;
  border-bottom: 2px solid var(--btn-primary-active-focus-background-color) !important;
  border-left: 0 !important;
  background-color: transparent;
}

.form-control-select:focus {
  border: 2px solid;
  border-color: var(--btn-primary-active-focus-background-color);
}

.input-group-inset.focus ~ .input-group-inset-item,
.input-group-inset:focus-visible ~ .input-group-inset-item,
.c-prefers-focus .input-group-inset:focus ~ .input-group-inset-item {
  color: var(--color-paragraph-text-color);
  background-color: inherit;
  border: 2px solid var(--btn-primary-active-focus-background-color);
  background-color: transparent;
  border-right: 0;
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
  cursor: default;
  background-color: transparent;
  color: #ccc;
}

.state-dropdown-toggle.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* =================================================================
   Form Inputs - Error & Validation States
   ================================================================= */
/* Error state */
input.error,
select.error,
textarea.error {
  border-color: var(--btn-warning-border-color);
  background-color: var(--btn-warning-background-color);
  color: var(--btn-warning-border-color);
}

input.error,
textarea.error {
  border: 2px solid red;
}

.form-group.error input,
.form-group.error .dropdown-toggle {
  border: 1px solid #d9534f;
}

/* Error messages */
.error-message {
  color: var(--btn-outline-warning-color) !important;
  font-size: 12px !important;
  margin-top: 4px;
  display: none;
}

.error-message::before {
  content: "\f071";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: var(--btn-outline-warning-color);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.dropdown .error-message::before {
  right: 5px;
  top: 30%;
}

.noerroricontextarea .error-message::before {
  content: none;
}

.error-message-label {
  color: var(--btn-outline-warning-color) !important;
  font-size: 14px;
}

.input-error-message {
  font-size: 14px;
  color: var(--color-traffic-light-negative-cherry-blaze);
  margin-top: 4px;
  display: block;
}

/* Required field indicator */
.form-group .required::after {
  color: var(--body-color);
  content: "* Required";
  font-size: 12px;
  position: absolute;
  top: 0;
  right: 0;
}

.form-group .dropdn::after {
  left: 11.5rem;
}

.form-group .error-message-label.required::after {
  color: var(--btn-outline-warning-color);
}

/* Assistive text */
.input-assistive-text {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}

/* =================================================================
   Checkboxes
   ================================================================= */
input[type=checkbox] {
  accent-color: var(--color-secondary-midnight);
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

input[type=checkbox]:active,
input[type=checkbox]:hover + input[type=checkbox]:active {
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 255, 0.16);
}

input[type=checkbox]:focus {
  box-shadow: 0px 0px 0px 2px rgba(0, 0, 255, 0.16);
}

input[type=checkbox]:hover:not(:disabled):after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 20px solid rgba(50, 103, 239, 0.0705882353);
  margin: -11px;
  z-index: 0;
}

/* =================================================================
   Dropdown Menus
   ================================================================= */
/* Dropdown menu structure */
.dropdown .dropdown-menu {
  max-height: 204px;
}

.dropdown-menu .dropdown-item {
  border-bottom: 1px solid var(--color-grey-silver-sand);
  height: 40px;
}

/* Dropdown item states */
.dropdown-item:active {
  background-color: var(--color-primary-solitude);
  color: var(--color-secondary-87);
  text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item.hover {
  background-color: var(--color-primary-solitude);
  color: var(--color-secondary-87);
  text-decoration: none;
}

.dropdown-item.focus,
.dropdown-item:focus,
.dropdown-item:focus-visible,
.c-prefers-focus .dropdown-item:focus {
  border: 2px solid;
  border-color: var(--btn-primary-active-focus-background-color);
  box-shadow: none;
}

/* User personal bar specific dropdowns */
.user-personal-bar-custom .dropdown-menu {
  max-height: max-content;
}

.user-personal-bar-custom .dropdown-menu .dropdown-item {
  border-bottom: none;
}