@import url('tokens.css');

@import url('components/Accordion.css');
@import url('components/AccordionCustom.css');
@import url('components/ActivityList.css');
@import url('components/Address.css');
@import url('components/Breadcrumb.css');
@import url('components/BreadcrumbCustom.css');
@import url('components/Button.css');
@import url('components/ButtonCustom.css');
@import url('components/CalloutCustom.css');
@import url('components/Calendar.css');
@import url('components/CalendarCustom.css');
@import url('components/Card.css');
@import url('components/ColourPicker.css');
@import url('components/ChartTile.css');
@import url('components/ChartTileCustom.css');
@import url('components/Checkbox.css');
@import url('components/CheckboxCustom.css');
@import url('components/DataTableLegacy.css');
@import url('components/DataTableLegacyCustom.css');
@import url('components/ScrollFade.css');
@import url('components/ScrollFadeCustom.css');
@import url('components/DocumentSearch.css');
@import url('components/DocumentTileCustom.css');
@import url('components/DatePicker.css');
@import url('components/DatePickerCustom.css');
@import url('components/Dropdown.css');
@import url('components/DropdownButton.css');
@import url('components/DropdownCustom.css');
@import url('components/DropdownSelect2Penman.css');
@import url('components/EmailViewer.css');
@import url('components/EmptyState.css');
@import url('components/EmptyStateCustom.css');
@import url('components/FieldHelp.css');
@import url('components/FileInput.css');
@import url('components/FilterBar.css');
@import url('components/Footer.css');
@import url('components/FooterCustom.css');
@import url('components/FormPage.css');
@import url('components/FormPageCustom.css');
@import url('components/FlexLayout.css');
@import url('components/SearchInput.css');
@import url('components/Header.css');
@import url('components/HeaderCustom.css');
@import url('components/Hero.css');
@import url('components/HeroCustom.css');
@import url('components/Icon.css');
@import url('components/IconCustom.css');
@import url('components/ImagesTabCustom.css');
@import url('components/InboxViewer.css');
@import url('components/ListPage.css');
@import url('components/Markdown.css');
@import url('components/Narrative.css');
@import url('components/IUCLIDComments.css');
@import url('components/ModalPopupAlternative.css');
@import url('components/ModalPopupAlternativeCustom.css');
@import url('components/ModuleHomepage.css');
@import url('components/News.css');
@import url('components/NotificationBanner.css');
@import url('components/NewsCustom.css');
@import url('components/NumberTile.css');
@import url('components/NumberTileCustom.css');
@import url('components/OptionBanner.css');
@import url('components/OptionBannerCustom.css');
@import url('components/OverviewTilesCustom.css');
@import url('components/PageLayoutCustom.css');
@import url('components/Pill.css');
@import url('components/PillCustom.css');
@import url('components/PricingTable.css');
@import url('components/ProgressIndicator.css');
@import url('components/ProgressIndicatorCustom.css');
@import url('components/PrimaryNav.css');
@import url('components/PrimaryNavCustom.css');
@import url('components/ProductWheel.css');
@import url('components/QuantityInput.css');
@import url('components/QuickActions.css');
@import url('components/QuickActionsCustom.css');
@import url('components/RadioButton.css');
@import url('components/RadioButtonCustom.css');
@import url('components/RelatedLinksTile.css');
@import url('components/Section.css');
@import url('components/SectionCustom.css');
@import url('components/Signature.css');
@import url('components/SplitButton.css');
@import url('components/StatusBadge.css');
@import url('components/StatusBadgeCustom.css');
@import url('components/SearchResults.css');
@import url('components/SearchResultsCustom.css');
@import url('components/SearchOverlay.css');
@import url('components/SearchOverlayCustom.css');
@import url('components/SkeletonLoader.css');
@import url('components/Stepper.css');
@import url('components/SubstanceCard.css');
@import url('components/SideNav.css');
@import url('components/SideNavCustom.css');
@import url('components/SideNavAccordionCustom.css');
@import url('components/Tabs.css');
@import url('components/Timeline.css');
@import url('components/TabsCustom.css');
@import url('components/Textarea.css');
@import url('components/TextareaCustom.css');
@import url('components/TextInput.css');
@import url('components/TextInputCustom.css');
@import url('components/Toast.css');
@import url('components/ToastCustom.css');
@import url('components/ToggleButton.css');
@import url('components/ToggleButtonCustom.css');
@import url('components/UxModal.css');
@import url('components/GradientCustom.css');
@import url('components/LoadingOverlay.css');

@import url('menu.css');
@import url('partition.css');
@import url('traffic-lights.css');

/*z indexes
.ux-modal 1000000

1100 - .dt-button-collection
.modal-popup-alt-panel 1001
app header 1000 - .app-header
search 999 - .search-overlay-panel
footer 997 - .main-footer
side nav bar 996 - .primary-nav

partition selector 11 - .tenant-dropdown
profile dropdown 11 - .profile-dropdown
ui banner 10 - .option-banner
*/

html {
  background: var(--color-background);
  font-family: var(--font-family-base);
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}

/* Nav is sticky and in-flow (50px). 50px nav + 20px gap = 70px total left
   offset — same visual position as the old out-of-flow absolute-nav layout. */
#main_body {
  /*padding-left: 20px; commenting out as leaves a gap*/
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.hidden {
  display: none !important; /* !important needed to override any inline styling */
}

.tab:not(.active) {
  display: none;
}

.ux-submenu > li {
  display: inline;
  margin-right: 10px;
  border-radius: 5px;
  color: white;
  background: var(--color-primary-dark);
  padding: 5px;
  min-width: 100px;
}

.ux-submenu > li a {
  color: white;
  text-decoration: none;
}

.tab-container {
  padding-left: 10px;
}

.toolbar {
  padding-right: 10px;
}

.form-page {
  display: contents;
}

/* Constituents substance subtab: START */
.userhelp {
  display: inline-block;
  margin: 10px 5px;
  padding: 5px;
  border: dashed 1px #ccc;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: hsla(0,0%,100%,.5);
  color: hsl(209,26%,37%);
}

.userhelp {
  border: dashed 1px #ccc;
  display: block;
}
.userhelp {
  margin: 0 0 1rem 0;
  padding: 1rem;
}

.userhelp.caution {
  text-align: center;
  font-weight: 700;
  color: #c00;
  border-color: #c00;
}

.fake-text-row {
  display: grid;               /* Put label and value on same row */
  grid-template-columns: 1fr 2fr;
  align-items: center;         /* Vertically center */
  margin-bottom: 8px;
}

.fake-text-row label {
  /* Fixed label width for alignment */
  font-weight: bold;
}

.fake-input {
  padding: 6px 10px;
  border: none;
  background-color: transparent;
  color: var(--color-text-primary, #111827);
  border-radius: 0;
  font-family: inherit;
  font-size: 15px;
  flex: 1;
  min-height: 40px;
}

.fake-input.fake-input-empty::before {
  content: "—";
  color: var(--color-text-muted, #6b7280);
}

/* Structural-formula widget: hide the trash anchor in view mode so the
   empty state reads as just the em-dash. */
.fake-input.fake-input-empty > a {
  display: none;
}

/* TODO: Add to constituents substance subtab : START */
.note-wrapper {
  display: flex;
}

.note-wrapper .note-user-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 1em;
}

.note-wrapper .note-user-wrapper .note-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  line-height: 1;
  background-color: black;
  border: 1px solid hsl(209,100%,21%);
  border-radius: 50%;
  color: #fff;
  text-align: center;
  font-family: monospace;
  font-weight: bold;
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.note-section-wrapper .new-note-wrapper .note-reply-tracer, .note-section-wrapper .note-wrapper:last-child .note-reply-tracer {
  display: none;
}

.note-wrapper .note-text-wrapper {
  margin-bottom: 2em;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.note-wrapper .note-text-wrapper .note-edit-buttons {
  margin-top: 1em;
}

.note-icon-actions {
  display: contents;
}

.note-wrapper .note-text-wrapper .note-text-header .publish-time {
  flex: 0 0 auto;
}

.note-wrapper .note-text-wrapper .note-text-header .note-name-wrapper {
  flex: 1 0 auto;
  margin-right: 1rem;
  font-weight: bold;

  letter-spacing: -1px;
}

.note-link {
  text-decoration: none;
}

.note-wrapper .note-text-wrapper .note-text-header {
  display: flex;
}

.note-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  margin-left: auto;
  flex-shrink: 0;
}

.note-rag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-full, 12px);
}

.note-rag-badge.rag-green {
  color: #15803d;
  background: #dcfce7;
  border: 1px solid rgba(21, 128, 61, 0.25);
}

.note-rag-badge.rag-amber {
  color: #b45309;
  background: #fef3c7;
  border: 1px solid rgba(180, 83, 9, 0.25);
}

.note-rag-badge.rag-red {
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.ui-dialog {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.ui-dialog.no-close .ui-dialog-titlebar-close {
  display: none;
}

.ui-dialog .ui-dialog-title {
  white-space: normal;
}

.ui-dialog .ui-widget-header {
  background: transparent;
  font-size: 1.250em;
  letter-spacing: -1px;
  font-weight: 700;
  border: none;
  color: hsl(209, 100%, 31%);
  order: 2;
  width: 100%;
}

.ui-dialog .ui-widget-header .ui-dialog-title {
  float: none;
  width: auto;
}

.ui-dialog .ui-widget-content {
  overflow: visible;
}

.ui-dialog .fa,
.ui-dialog .fas,
.ui-dialog .far,
.ui-dialog .fal,
.ui-dialog .fab {
  color: hsl(201, 85%, 46%);
}

.align-center{
  text-align : center !important;
}
.align-left{
  text-align : left !important;
}
.align-right{
  text-align : right !important;
}

/*all placeholder search text to be grey*/
input[type="search"]::placeholder {
  color: var(--color-text-secondary, #999999) !important;
}

.ajaxloader {
  width:32px;
  height:32px;
  background: url(/ActiveSteward/images/ajaxprogress.gif) no-repeat 0 0;
}
.ajaxloader.ajaxerror{
  background: url(/ActiveSteward/images/ajaxfail.png) no-repeat 0 0;
}

/* TODO: Add to constituents substance subtab : END */