@page 
{
    size: landscape;
}

/* Specify font on a case by case basis rather than using universal selector incase that has performance issues */
body, .ui-widget {
  /* Note: we leave font-size unspecified, so we are starting with the brower's default font size, typically 16px. Bootstrap specifies font-size as 1rem, so it is keeping the browser default. */
  font-family: Helvetica, sans-serif !important;
}

BODY {
  margin-top: 0.5rem; /* Add small buffer above page. */
  margin-left: 0px;
  /* always display the scroll bar so resizing the columns based on window size is not dependent on scroll bar */
  overflow-y: scroll;
}
TABLE
{
    BORDER-COLLAPSE: collapse;
    /* Wraps text on alerts page. There is a webkit nowrap css style that we cannot locate
        where it is coming from so we must override it with White-space normal.
    */
    WHITE-SPACE: normal;
}

/* Generic class for table padding */
.ft-padded-table td {
  padding: 0.1em;
}

TD.Num {
  VERTICAL-ALIGN: bottom;
  TEXT-ALIGN: right;
} 
SELECT
{    font-size: 0.8rem; /* Crank down the size just a bit in drop-down lists. */
}
TEXTAREA
{
    FONT-SIZE: 0.8rem; /* We make text in textarea just a bit smaller. */
}
.form-control {
  /* Shrink font and padding -  - the Bootstrap defaults look a bit too large relative to other FabTime styling. */
  font-size: 0.8rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  height: calc(1.5rem + 2px)
}

.ft-form-control-checkbox-align-left {
    /* To move the checkboxes to be left-aligned. Default 100% width is keeping them centered*/
    width: auto;
}

input:not([type=submit]) {
  font-size: 0.8rem;
}

DIV.TextBlock
{
    FONT-SIZE: 10pt;
}
DIV.HH1
{
    TEXT-DECORATION: underline
}
OL
{
    MARGIN-TOP: 0px;
    MARGIN-BOTTOM: 0px;
    MARGIN-LEFT: 15px;
    list-style-position: inside;
}
UL
{
    MARGIN-TOP: 0px;
    MARGIN-BOTTOM: 0px;
    MARGIN-LEFT: 1.5em;
    padding-left: 0em;
    list-style-position: outside; /* When text wraps, start it under prior text, rather than under the bullet. */
    list-style-type: circle; /* The open circle seems visually more appealing than the closed disc. */
}
HR
{
	BORDER: none; 
	HEIGHT: 1px; 
	BORDER-TOP: 1px #CCCCCC solid;
}
input::-webkit-calendar-picker-indicator 
{
  display: none;
}
/* For date/time picker. See http://trentrichardson.com/examples/timepicker/ */

.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }

/* Shortened version style - we don't know if this is necessary. */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

/* For tables with vertical bars only. Note used as-of Patch107 (Rev51) but keeping in case we want it in the future. */
table.VerticalBars {
  border-collapse: collapse;
}
.VerticalBars  tr {border: none;}
.VerticalBars td {border-left:  solid 1px #C0C0C0; border-right: solid 1px #C0C0C0; }

/* For tables that need to overflow, add a container with x scrolling */
.ft-table-container {
  overflow-x: auto;
}

/* Color Picker */
.colorpicker {
  color: #FFFFFF;
  font-size: 12px;
  position: relative;
  float: left;
}
#picker {
    cursor: crosshair;
    float: left;
    margin: 10px;
    border: 0;
}
.preview {
    height: 15px;
    width: 15px;
	border: 1px solid #2F2F2F;
}

/* jQuery-ui Combobox */
.custom-combobox {
	position: relative;
	display: inline-block;
}
.custom-combobox-toggle {
	position: absolute;
	top: 0;
	bottom: 0;
	margin-left: -1px;
	padding: 0;
}
/* Frank modified padding from original (5x 10px) to these smaller values. */
.custom-combobox-input {
	margin: 0;
	padding: 2px 2px;
}
/* sets a maximum height on the list of options from a combobox */
.ui-autocomplete.ui-front {
    max-height: 400px;
    overflow-y: auto;   /* only show a scrollbar when we need to */
    overflow-x: hidden; /* don't show a horizontal scrollbar */
    z-index: 1100 !important;
    padding-bottom: 1px; /* fixes a problem where selecting the last item in the list caused scrollbar to appear */
}

/* Style for auto-complete category headers. */
.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .2em;
  margin: .2em 0 0;
  color: #ee2d26;
}
/* Add horizontal line between auto-complete categories. */
ul.ui-autocomplete li.ui-autocomplete-category:not(:first-child) {
    border-top: 1px #ccc solid;
}

.ui-autocomplete, .ui-menu-item {
    font-family: Helvetica, sans-serif;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
    font-size: 0.9rem; /* Make font size slightly smaller in auto-complete search results */
}

div.leftpane {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    font-size: 8pt;
    margin: 8px 0px;
    color: rgb(0, 0, 0);
}

div.leftpane::before {
    content: "";
    flex-grow: 1;
    background: rgba(255, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 6px 0px 1px;
    display: inline-block;
}

div.leftpane::after {
    content: "";
    flex-grow: 1;
    background: rgba(255, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 1px 0px 6px;
    display: inline-block;
}

/* Used to control the formatting of home-page charts and tables.
   border-collapse and border-spacing replace older table attributes (border, cellPadding, and cellSpacing) to control formatting.
*/
table.containerChartsAndTables {
    border-collapse: collapse;
    border-spacing: 0px;
}

/* Apply style to all filter and homepage links */
.containerChartsAndTables a {
    margin-right: 0.3em; /* Add space between consecutive links. */
}

/* On the home page charts we want the left pane to be 12.5% but if 12.5% is too small, we want it to adjust to content.
  we want the charts and table div to be 87.5%, but adjust to left pane if needed. ALSO, we want charts and tables div never
  to be more than 87.5% if content is too large. This becomes an issue when you generate charts in full screen then 
  click the window expand button to come out of full screen, the containerChartsAndTables div does not resize, but we want 
  it to so our resize code can handle the charts and tables. So we use this code from 
  https://stackoverflow.com/questions/27338246/css-text-overflow-table-cell-with-percentage-max-width
  which allows us to choose which column (the chart/table column) needs to be no larger than the selected width (87.5%)
*/
.tdHomeContainerChartsAndTables {
  position: relative;
}

.containerChartsAndTables.home {
  position: absolute;
  left: 0;
  right: 0;
}

/* Identify and style pageMode control buttons. */
.pageModeButton {
  margin-right: 0.3em; /* Add space before following controls. */
  width: 7em; /* Set width to prevent button from resizing when clicking. */
}

/* Shrink font size on "go", save, reset buttons buttons. */
input[type=submit], input[type=reset] {
  font-size: 0.9rem; /* Adjust down the font a bit. */
}

/* Add offset to radios on homepage so it appears centered */
.ft-home-page-radio {
  margin-top: 0.4em;
}

/* Align checkbox and text on homepage */
#setTabFilters {
  margin-right: 0.2em;
  vertical-align: middle
}
#setTabFilters + span {
  vertical-align: middle
}

/* Size tab title */
#tabTitle {
  font-size: 2rem!important;
  padding-left: 5px;
}

/* Adjust bootstrap buttons */
.btn {
  font-size: 0.9rem; /* Adjust down the font a bit. */
  vertical-align: bottom; /* Change so bottom of bootstrap button lines up with bottom or other surrounding controls. */
  /* Shrink padding - the default padding looks a bit too large relative to other FabTime styling. */
  padding-top: 0.20rem;
  padding-bottom: 0.20rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

/* Add hover affects */
.btn:hover {
  box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.19);
}

/* Add btn class for buttons above data table on ViewObjectList 
  So they look like the rest of our buttons */
.ft-data-table-btn {
  font-size: 0.9rem !important;
  padding-top: 0.20rem;
  padding-bottom: 0.20rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  background-image: none !important;
  border: none !important;
  border-radius: .25rem !important;
}

.ft-data-table-btn:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
  background-image: none !important;
  border: none !important;
  border-radius: .25rem !important;
}

/* Override bootstrap focus blue ring */
.form-control:focus, .btn:focus {
  border-color: black;
  border-width: 2px;
  box-shadow: none !important;
}

/* Style for left pane */
.container-left-pane {
  font-size: 0.8rem !important; /* Make the font size 80% of parent font size (1rem) */
}

.container-left-pane a, .container-left-pane input, .container-left-pane button {
  font-size: 0.8rem !important; /* Make the font size 80% of parent font size (1rem) */
}


/* For drag and drop home page movement support. */
/* Note that "outline" works better than "border" as "border" causes screen remnants (a bug?) in both Chrome and IE, when a destination cell is highlighted and then the dragged cell is moved away. */
.highlight {
    outline: solid 1px #8939AD;
}

/* Div that contains javascript chart canvas wrapper, so that wrapper is tight around the canvas, and doesn't expand to fill the table cell. */
.jschart-wrapper-container {
    position: relative;
    display: inline-block;
}

/* Div that tightly wraps javascript chart canvas, so that we can exclude the lower-right corner resize handle, so that it can be excluded from the jquery draggable functionality. */
.jschart-wrapper {
    /*position: relative; /* Wrapper div position must be relative so we can place jschart-resizehandle-exclude within it. */
}

/* The padding gives visually pleasing space around each chart and table. 
    Previously we set the table containing the charts/data tables to have width=100%, and that provided space between the cells. 
    But for dragging and dropping, having odd-shaped cells due to width=100% looks bad, so we dropped width=100% on this table, and added the padding around the cells.
*/
td.homeChartOrTable {
    padding: 10px;
}

/* jQuery home-page chart draggable will be cancelled for elements with the following class. */
.home-draggable-cancel {
}

/* Styling for table in G2GType help article. */
.G2GType td,
.G2GType th {
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
}

/* Styling for table in WIPHours help article. */
.WIPHours td,
.WIPHours th {
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
}
.WIPHours th {
    background-color: rgb(235,235,235);
    text-align: right;
}
.WIPHours caption {
    font-weight: bold;
}

.figure-placeholder-home {
    background-color: #f3f3f3;
    display: inline-block;
    padding-right:10px;
    padding-left:10px;
}

.ui-resizable-helper { border: 2px dotted grey; }

.cell-percent-bar {
   -webkit-appearance: none;
   -moz-appearance: none;
    /* non-moving 'bar' part for IE, firefox, edge (non-chromium), etc*/
    background-color: #ff0000;
    /* IE/edge (non-chromium) 'bar'/moving part */
    color: #00ff2f;
    width:120px;
}

/* cell percent bar (line summary chart % of goal, etc) browser-specific styles*/

/* webkit/chrome/chromium-based/safari 'background'/non-moving part */
.cell-percent-bar::-webkit-progress-bar {
    background-color: #ff0000;
}
/* webkit/chrome/chromium-based/safari 'bar'/moving part */
.cell-percent-bar::-webkit-progress-value {
    background-color: #00ff2f;
}
/* mozilla/firefox 'bar'/mobing part*/
.cell-percent-bar::-moz-progress-bar {
    background-color: #00ff2f;
}

/* Default to not show troubleshooting div. */
.pageTroubleshooting {
    display: none;
}

/* Set standard style for all non-navbar links. */
/* nav-link is bootstrap navbar class. */
/* btn is bootstrap button class. */
/* Exclude links that have the name attribute set. These are used within help articles as the destination anchor for within-page links, e.g. section headings. */
a:not([name]):not(.nav-link):not(.btn):not(.ft-navbar-account-userinfo):not(.ft-data-table-btn) {
    color: #ee2d26; /* FabTime red, from Danna J. */
    text-decoration: none;
}

/* Set hover for all non-navbar links. */
a:not([name]):hover:not(.nav-link):not(.ft-navbar-account-userinfo):not(.ft-data-table-btn) {
  text-decoration: underline;
}

/* Style nav bar. */
.navbar {
  width: 100%;
  text-align: center;
  padding-top: 4px;
  padding-bottom: 4px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding-left: 0.25rem; /* Decrease big left margin to navbar */
}

/* Override navbar link styling. */
.nav-link {
  color: black !important; /* Override to black for FabTime nav bar links. */
  padding-top: 0.25rem; /* Override to smaller top padding. */
  padding-bottom: 0.25rem; /* Override to smaller bottom padding. */
}

/* Set active-link styling. */
.ft-nav-link-active {
  color: #ee2d26 !important;
}

/* Style nav-user-message */
#ft-nav-user-notice {
  color: red;
}

a.nav-link:hover {
  color: #ee2d26 !important;
  text-decoration: underline;
} 

.navbar-nav {
  margin-left: 0px; /* Remove big left margin on navbar. */
} 

.navbar-nav li:first-of-type a {
  padding-left: 0px!important; /* Remove space on first nav since col adds padding */
} 

.navbar .navbar-collapse {
  text-align: left; /* When navbar is collapsed and there's an icon to expand the list (which appears vertically), we want the links in this vertical list to be left-aligned.  */
}

.nav-link.dropdown-toggle {
  white-space: nowrap; /* Do not let drop down arrow go to new line by itself */
}

.dropdown-toggle::after {
  margin-left: 0.1em; /* Nudge icon up next to the word it trails - this is more visually appealing than default spacing. */
}

/* Formatting for noscript message if Javascript is disabled, and for Internet explorer warning message. */
.noscript-message, .ie-warning-message {
  background-clip: padding-box;
  border-radius: 5px;
  background-color: #ee2d26;
  border: 5px solid #ee2d26;
  color: black;
  text-align: center;
  margin-bottom: 0.25rem;
}

#navbar-search-form {
  /* HACK: Override mysterious margin that comes from user agent stylesheet, but only on help page! */
  margin-block-end: 0px;
}

#navbar-search-input {
  /* Add space to right of search bar. */
  margin-right: 1rem;
}

/* add border on pages */
.ft-user-alert-row, .ft-custom-chart-row, .ft-dispatch-parm-row, .ft-stacked-colors-row, .ft-row-top-border {
  border-top: 1px solid #dee2e6;
}

/* Add some spacing on the dispatch page */
tr.ft-dispatch-parm-row td {
  border-bottom: 1px solid #dee2e6;
}

/* Add cell spacing in dispatch table */
.ft-dispatch-parm-table td {
  padding: 0.2rem;
}
/* Hack: the user account info is a link in the dropdown since bootstrap only
  allows buttons or links as dropdown-items, so we add the disabled class, 
  but we want to override the link style with this
*/
.ft-navbar-account-userinfo, .ft-navbar-account-userinfo:hover {
  text-align: center;
  font-size: 0.9rem;
  font-style: normal;
  color: #6c757d;
  border-bottom: 1.5px solid lightgrey;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

/* size the user account icon in the navbar*/
.ft-navbar-usericon {
  width: 1.5rem;
  display: inline-block;
  padding-left: 0px;
  padding-right: 0px;
  /* Create a space to right of user icon.
  When search control is on same line, we will get a pleasing space.
  And when search control floats to next line, we won't get an ugly space prior to search control. */
  margin-right: 1rem;
}

/* center the user account icon in the drop down */
.ft-navbar-account-usericon-item {
  text-align: center;
}

/* size the user account icon in the dropdown*/
.ft-navbar-account-usericon {
  width: 6rem;
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0rem;
  margin-bottom: 0rem;
  padding-top: 1rem;
}

/* Set account hover cusor to pointer, to indicate clickable. 
  Note was unable to set for class ft-navbar-account-usericon and make it work - but setting for element id works!
*/
#AccountIconNavBar:hover {
  cursor: pointer;
}

/* Generic chevrons */
.chevron::before {
  border-style: solid;
  border-width: 0.3em 0.3em 0 0;
  content: '';
  display: inline-block;
  height: .9em;
  left: 0.0em;
  position: relative;
  top: 0.0em;
  transform: rotate(-45deg);
  vertical-align: top;
  width: .9em;
  color: lightgrey;
  -webkit-transition: transform 0.2s ease-in-out;
} 

.chevron.right:before {
  left: 0;
  transform: rotate(45deg);
  -webkit-transition: transform 0.2s ease-in-out;
} 

.chevron.bottom:before {
  top: 0;
  transform: rotate(135deg);
  -webkit-transition: transform 0.2s ease-in-out;
} 

.chevron.left:before {
  left: 0.25em;
  transform: rotate(-135deg);
  -webkit-transition: transform 0.2s ease-in-out;
}

/* doublechevron transitions - these are on a image so they have less css than the single chevron */
.doublechevron {
  opacity: 30%;
  cursor: pointer;
}
.doublechevron.right {
  width: 1.5em;
  -webkit-transition: transform 0.2s ease-in-out;
} 

.doublechevron.left {
  width: 1.5em;
  transform: rotate(-180deg);
  -webkit-transition: transform 0.2s ease-in-out;
}

/* Make font size slightly smaller. */
.ft-slightly-smaller-text {
  font-size: 0.9rem; 
}

/* And smaller yet. */
.ft-smaller-text {
  font-size: 0.8rem; 
}

/* And small yet. */
.ft-small-text {
  font-size: 0.7rem; 
}

/* Removes top border from table cells. */
.ft-table-no-border td,td {
  border-top: 0 !important;
}

/* Shrink font size on Chart/Left-Right/Top-Bottom/Table button. */
.ft-above-figure-controls button {
  font-size: 0.7rem !important;
}

/* Excel icon for use in left pane of ag-grid table */
.ag-icon-custom-excel {
  background: transparent url(images/excel.svg) no-repeat center;
  background-size: 16px 16px;
  height: 16px;
  opacity: 0.87;
  width: 16px;
  max-width: 16px;
  display: inline-block;
}

/* Layout icon for use in left pane of ag-grid table */
.ag-icon-custom-layout {
  background: transparent url(images/layout.svg) no-repeat center;
  background-size: 16px 16px;
  height: 16px;
  opacity: 0.87;
  width: 16px;
  max-width: 16px;
  display: inline-block;
}

/* Style for custom ag-grid tool panels. */
.ft-tool-panel {
  background-color: #fdfdfd;
  padding: 0.5rem;  
  width: 100%; /* HACK: Without width=100, if button text is not wide enough (for some unknown reason) the containing div does not fill the tool pane.*/
}

/* Style for buttons in custom ag-grid tool panels. */
.ft-tool-panel-button {
  margin-top: 0.1rem;
  width: 100%;
}

/* Home page above figure icons */
.ft-home-above-figure-icon {
  height: 1.5rem;
}

/* Set z-index to a high value so that the error dialog appears on top of any other modal dialogs. */
#dialog-show-error-to-user {
  z-index: 9999 !important;
}

/* Enable scrollbar for body of error dialog. */
#dialog-show-error-to-user .modal-dialog {
  overflow-y: initial !important;
}

/* Cap size of body of error dialog. */
#dialog-show-error-to-user .modal-body {
  max-height: 25vh; /* Specify as percentage of viewport height */
  overflow-y: auto;
}

/* Latest-time in navigation bar */
/* TODO: Delete class entry for .ft-latesttime once all pages are using PageHeading.html */
#ft-nav-latesttime, .ft-latesttime {
  /* Nudge down the font size, to make visually appealing. */
  font-size: 0.7rem;
  /* Keep text from wrapping */
  white-space: nowrap;
}

/* Make header text bold on modal dialog. */
.modal-header {
  font-weight: bold;
}

/* Styling for within-chart error messages (timeouts, stored procedure errors, etc). */
.ft-within-chart-error-message {
  font-size: 0.8rem;
}

/* "Please wait" modal container */
.please-wait-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

/* "Please wait" modal content */
.please-wait-modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center horizontally */
  align-items: center;     /* Center horizontally */
}

/* "Please wait" Spinner */
.please-wait-spinner {
  border: 4px solid #f3f3f3;
  border-radius: 50%;
  border-top: 4px solid #3498db;
  width: 30px;
  height: 30px;
  animation: please-wait-spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes please-wait-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Info text */
.please-wait-info-message {
  font-size: 18px;
  color: #333;
}

/* Interactive modal container */
.interactive-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center; /* Center horizontally */
  align-items: flex-start; /* Align modal at the top to prevent clipping */
  padding-top: 100px; /* Add padding to prevent content from hiding top nav bar */
  padding-bottom: 20px; /* Adding to prevent content from touching screen bottom */
  overflow: hidden; /* Prevent the modal container itself from scrolling */
}

/* Interactive modal content */
.interactive-modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  max-width: 600px;
  width: 80%;
  display: flex;
  flex-direction: column;
  max-height: 80vh; /* Limit height to 80% of the viewport */
  overflow-y: auto; /* Enable vertical scrolling for overflowing content */
  clip-path: inset(0 round 8px); /* Keep corners round when scrolling */
}

/* Note: Frank hacked to remove fixed width. This styling copied from IMS security styling. */
.inficon-button {
  font-family: "Roboto";
  background: #376092;
  color: white;
  border: none;
  font-weight: 500;
  letter-spacing: 1.25px;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  outline: inherit;
  height: 36px;
  border-radius: 4px;
}

#navbar-jengpt-input {
  width: 150px; /* Initial width */
  max-width: 400px; /* Maximum width limit */
  transition: width 0.2s ease-in-out; /* Smooth transition as it expands */
}

.askjen-summary-question {
  font-size: 1.25rem;
  font-weight: bold;
}