/*
 * Copyright © 2000-2025 Telos Corporation. All rights reserved.
 * 
*/

/*region  REMINDERS & BEST PRACTICES **********************************************************************************/
/*

# 💬 Our iconXactaSprint CSS styles are now maintained at webca-iconsXactaSprite.css


# 💬 You don't need to repeat the font-family declarations.
     This has already been declared for * (wildcard), and some Bootstrap Overrides.


# 💬 Use our CSS Variables for:
    ... all font weights
    ... for standard colors; These are the same colors mentioned in the Figma Design System for X360 2.0

    See the :root style declaration for the list of variables.
    Idea supports CSS Variables in many ways: Auto-completion, Navigate to Declaration, etc... just like Java variables.
    For more info in CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties


# 💬 Our line-height values should be in whole number pixels, instead of relative units like % or ems, or decimal px.

    ⛔  EXAMPLE BEFORE:
        font-size: 13px;
        line-height: 142.3%;

    🧮  To convert the line-height to pixels, multiply the px font size to the line-height %, then round up.
          ⌈ 13px x 1.423 ⌉
        = ⌈ 18.499px ⌉
        = 19px

    ✅  EXAMPLE AFTER:
        font-size: 13px;
        line-height: 19px;

    💡  TIP: On Figma, the height of single-line text layers will also show you the line-height in pixels.

*/
/*endregion*/


/*region  IMPORTS  ****************************************************************************************************/

@import url(webca-iconsXactaSprite.css);

/*endregion*/


/*region  VARIABLES  **************************************************************************************************/

:root {

    /* Standard Font Family Value */

    --webca-font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --webca-font-size: 13px;

    /* Font Weights */

    --font-weight-100-thin: 100;
    --font-weight-200-extra-light-ultra-light: 200;
    --font-weight-300-light: 300;
    --font-weight-400-normal-regular-book: 400;
    --font-weight-500-medium: 500;
    --font-weight-600-semi-bold-demi-bold: 600;
    --font-weight-700-bold: 700;
    --font-weight-800-extra-bold-ultra-bold: 800;
    --font-weight-900-black: 900;

    /* Color Styles from the X360 Branding 2.0 Design System */

    --normal: #333333;
    --caption: #666666;
    --hyperlink: #147BB1;
    --hyperlink-hover: #1F578E;
    --disabled: #767676;
    --dark-gray: #7F7F7F;
    --white: #FFFFFF;
    --white-hover: #D1D1D1;

    --forms-box-fill: #FFFFFF;
    --forms-box-fill-disabled: #F8F8F8;
    --forms-box-stroke: #C5CBD7;
    --forms-box-stroke-disabled: #DADDDE;
    --forms-button-bg: #FFFFFF;
    --forms-button-caption: #333333;
    --forms-caption-disabled: #C2C4C5;
    --forms-checkbox-fill-disabled: #A3A3A3;
    --forms-field-labels: #333333;
    --forms-input-value: #333333;
    --forms-hover: #E6E6E6;
    --forms-radio-fill-disabled: #A3A3A3;

    --icon-default: #147BB1;
    --icon-white: #FFFFFF;
    --icon-red: #EA3C3C;
    --icon-orange: #F89406;
    --icon-yellow: #EDB900;
    --icon-green: #29C44A;
    --icon-blue: #03A9F4;
    --icon-dark-gray: #999999;
    --icon-light-gray: #D9D9D9;

    --grid-cell-headers: #333333;
    --grid-row-background-selected: #F0FAFE;
    --grid-row-background-hover: #F7FCFF;
    --grid-row-background-warning: #F8E5CE;
    --grid-row-card-stroke: #C5CBD7;
    --grid-row-selected-master-detail-card: #5A99E6;

    --app-chrome-classification-marking-top: #93A0A9;
    --app-chrome-classification-marking-dialog-top: #93C8EE;
    --app-chrome-dark-blue: #17252F;
    --app-chrome-dropdown-triangle: #787878;
    --app-chrome-instance-name: #7BBC7A;
    --app-chrome-gray: #F4F5F7;
    --app-chrome-primary-blue: #296FB5;
    --app-chrome-primary-blue-disabled: #DADDDE;
    --app-chrome-primary-blue-hover: #205992;
    --app-chrome-primary-blue-tab-hover: #ABCCED;
    --app-chrome-primary-nav-light-blue: #5A99E6;
    --app-chrome-primary-nav-light-blue-disabled: #849DB5;
    --app--chrome-secondary-nav-dark-blue: #223847;
    --app--chrome-secondary-nav-hyperlink: #9FCAFF;
    --app--chrome-secondary-nav-border: #435B73;

    --chart-remediation-plan-severity-extreme: #BD362F;
    --chart-remediation-plan-severity-severe: #FF0000;
    --chart-remediation-plan-severity-high: #FF8A00;
    --chart-remediation-plan-severity-moderate: #BE9600;
    --chart-remediation-plan-severity-low: #5CA34D;
    --chart-remediation-plan-severity-insignificant: #589CE3;

    --chart-risk-factor-high: #BD362F;
    --chart-risk-factor-medium-high: #FF0000;
    --chart-risk-factor-medium: #FF8A00;
    --chart-risk-factor-medium-low: #BE9600;
    --chart-risk-factor-low: #5CA34D;
    --chart-risk-factor-negligible: #589CE3;
    --chart-risk-factor-none: #A7A8A8;
    --chart-risk-factor-out-of-range: #757575;

    --bootstrap-tooltip-stroke-color: #777;

    /* Interactions */

    --navbar-hover-transition: filter 300ms ease-in-out;
    --navbar-hover-filter: drop-shadow(0px 0px 12px #3cf);

}

/*endregion*/


/*region  FONT EMBEDDING  *********************************************************************************************/

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-100.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-100italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 200;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-200.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 200;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-200italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 300;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-300italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 500;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-500italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 600;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-600italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 700;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-700italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 800;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-800italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-900.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 900;
    src: local("Montserrat"), url('../fonts/montserrat-v25-latin_latin-ext-900italic.woff2') format('woff2');
}

/*endregion*/


/*region  DEFAULT FONT & OVERRIDES FOR BOOTSTRAP & JQUERY UI  *********************************************************/

*:not(
    .editor_textdiv *,
    .ck-help-balloon span
    ) {
    font-family: var(--webca-font-family);
}

*:not(
    .editor_textdiv *,
    .ck-help-balloon span
    ) {
    /*
    .normal,
    body,
    td,
    th, div, li.MsoNormal, div.MsoNormal
    */
    font-weight: var(--font-weight-500-medium);
}

b,
b a,
strong {
    font-weight: var(--font-weight-700-bold) !important;
}

html, body {
    height: 100%; /* Required for app to correctly calculate content area and navbar heights, since they are based off body. Without this, the body does not occupy the full browser window. Also see html style below. */
    font-size: var(--webca-font-size);
    line-height: 17px;
}

.static-text-display-control { /* For CKEditor and Velocity Templates */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: var(--font-weight-400-normal-regular-book);
    line-height: 1.42857143; /* Because CKEditor & Velocity Templates have varying font sizes, our line-height cannot be a hardcoded pixel value */
}

.static-text-display-control p { /* For CKEditor and Velocity Templates */
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.static-header:has(+ .instructional-text-input) { /* XACTA-14315 */
    margin-bottom: 10px !important;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: var(--webca-font-family);
}

.btn,
.dropdown-item {
    font-weight: var(--font-weight-500-medium);
}

/*endregion*/


/*region  XTABLE NO-QUIRK RADIO BUTTON  *******************************************************************************/

.xinput-radio-table td {
    vertical-align: top;
}

.xinput-radio-table td > * {
    margin-right: 2px;
}

.inputRadio {
    margin: 3px;
}

/*endregion*/


/*region  XTABLE NO-QUIRK HEADER  *************************************************************************************/

.xcontainer-title { /* already exists in Continuum.css --- modify so it only changes color */
    color: #666666;
}

.filter-col {
    display: inline-flex;
    padding-right: 20px;
    gap: 10px;
    align-items: center;
}

.filter-col label {
    margin: unset;
}

.filter-col.tableFilter,
.filter-col.tableFilterMenu
{
    display: table-cell; /* NO QUIRKS: was inline-block but causes spacing issues in AE */
    padding-right: unset;
    vertical-align: -10%;
}

.filter-col.tableFilterMenu {
    padding-left: unset;
}

.filter-col .tableFilterInput {
    height: 32px;
    text-align: left;
    vertical-align: middle;
    padding-left: 12px;
    padding-right: 32px;
    border: 1px solid var(--forms-box-stroke);
    border-radius: 5px 0 0 5px;
    border-right-width: 0;
    background-image:url(../images/iconSearch.png);
    background-position: right 12px center;
    background-repeat:no-repeat;
}

.filter-col .tableFilterInput::placeholder {
    color: var(--forms-input-value);
    font-style: var(--font-weight-400-normal-regular-book);
}

.filter-col .tableFilterDropdown { /*filter menu button*/
    position: relative;
    height: 32px;
    min-height: auto;
    padding-left: 6px;
    padding-right: 6px;
    border-left-color: var(--forms-box-stroke);
    border-left-width: 1px;
    border-radius: 0 5px 5px 0;
    background-image: unset;
}

.filter-col .tableFilterDropdown.dropdown-toggle::after { /* Bootstrap Overrides */
    border-top: 4px solid var(--app-chrome-dropdown-triangle);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom-color: var(--app-chrome-dropdown-triangle);
}

.filter-col .filterDropdownStrghtBorders { /* 13218 filter menu button */
    border-radius: 0 0 0 0;
    border-left-width: 0;
    position: relative;
    right: 10px; /* necessary to adjust button position since its inside a separate .filter-col div than the input it's flush with */
    background-image: none;
    height: 25px;
}

.filter-col ul.tableFilterDropdown-menu-right { /* adjust button's menu position so it lines up with filter menu button. Necessary when this style of control is inside a separate .filter-col div */
    right: 10px;
    margin-top: 6px;
}

.filter-col .filterDropdown.button:not(:disabled):not(.disabled):hover { /* When Cursor hovers over filter menu dropdown button it changes color*/
    background-color: #cccccc;
}

.filter-col .xtable-apply { /* hides apply filter button*/
    display: none;
}

.filter-col .xtable-reset { /* hides reset filter button*/
    display: none;
}

.filter-col.confColumns {
    padding-right: 7px;
}

.filter-col.dividerColumn {
    padding-right: 10px;
}

.filter-leftSide { /* container for text that goes in upper left corner of table header */
    display: inline-block;
    float: left;
    line-height: 32px; /* vertically aligns content based on 11px font size */
}

.filter-rightSide { /* wrapper container for individual divs that hold table header filter inputs, buttons, icons, instead of table cells*/
    float: right;
    position: relative;
    display: flex;
    width: auto;
    border-radius: 0;
    background: initial;
}

.filter-col img { /* vertically align icons within filter-col divs */
    position: relative;
    top: 3px;
}

.filter-col a[automation-selector*="dividerColumn"] img {
    top: unset;
}

table.table-col-padding-3 tbody > tr > td {
    padding: 3px;
}

/*endregion*/


/*region  XTABLE NO-QUIRK FOOTER  *************************************************************************************/

.xtable-sticky .xtable-navigator { /* Set a non-transparent background color for navigator so that scrolling rows behind are not shown through (sticky tables) */
    background-color: white;
}

table td.xtable-navigator { /* Bootstrap Overrides */
    border-top: 1px solid #E1E0DF;
    padding: 12px 14px;
}

.xtable-navigator .xtable-navigator-col {
    color: var(--caption);
}

.xtable-navigator-wrapper {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.xtable-navigator-col {
    display: inline-block;
    vertical-align: middle;
}

.xtable-navigator-leftSide {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-grow: 2;
}

.xtable-navigator .pageLengthControl {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.xtable-navigator .pageLengthControl > label {
    justify-self: stretch;
    flex-grow: 2;
    font-size: 11px;
    line-height: 16px;
    font-weight: var(--font-weight-400-normal-regular-book);
    width: 3em;
    margin: unset;
}

.xtable-navigator .pageLengthControl > input {
    font-size: var(--webca-font-size);
    line-height: 17px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    text-align: center;
    border-radius: unset;
    padding: unset;
    width: 3em;
    height: 24px;
}

.xtable-navigator .pageLengthAction > button {
    font-size: 12px;
    line-height: 15px;
    font-weight: var(--normal);
    text-align: center;
    vertical-align: middle;
    width: 33px;
    height: 24px;
}

.xtable-navigator .gotoPage {
    font-size: var(--webca-font-size);
    line-height: 17px;
    display: flex;
    gap: 0 5px;
    flex-grow: 3;
    flex-wrap: wrap;
}

.xtable-navigator-rightSide {
    flex-shrink: 0;
}

.xtable-navigator-rightSide .xtable-navigator-col {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.xtable-navigator-rightSide .xtable-navigator-col span {
    font-size: 10px;
    line-height: 14px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
}

/*endregion*/


/*region  GENERIC STYLE RULES  ****************************************************************************************/

.no-padding {
    padding: 0;
}

.zero-height {
    font-size: 0;
    line-height: 0;
}

.reportExtraInfoTable { /* Used to style plain HTML <table>s that frequently appears above <x:table> in reports */
    margin: 10px 0; /* Adds spacing between <table> and <x:table>  */
}

.table-spacing > tbody > tr > td,
.xmain-content-scroll > table > tbody > tr > td,
.xmain-content-scroll > table > tbody > tr > th,
.xdialog-content .xdialog-content-pane > table > tbody > tr > td,
.xdialog-content .xdialog-content-pane > table > tbody > tr > th { /* Provide cell spacing for HTML5 deprecated <table> cellspacing attribute */
    padding-bottom: 10px;
    padding-right: 10px;
}

#main-layout-center { /* Fix XACTA-8041 */
    /*
    z-index: 11 !important;
    */
}

#main-layout-center > .xmain-content-scroll {
    padding: 0 35px;
}

#main-layout-center > .xmain-content-scroll-override {
    padding: 0 !important;
    overflow-y: unset !important;
}

.xhelp-balloon-override {
    padding-left: 56px!important;
}
/*endregion*/


/*region  BODY  *************************************************************************************************************/

body, input, select, textarea {
    margin: 0 0 0 0;
}

legend,
legend.header-stylingCI {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    padding: .25em;
    font-size: 15px;
}

iframe { /* NO QUIRKS: for dialog iframes, this is overridden. See iframe#dialogFrame */
    border: 1px solid #cccccc;
}

.grayText {
    color: #666666;
}

.light-gray-border {
    border: 1px solid #cccccc;
}


fieldset {
    margin: 4px;
    padding: 8px;
}

a,
a:visited,
.a,
.a:visited
{ /* Bootstrap Overrides */
    color: var(--hyperlink);
    text-decoration: none;
}

.a {
    cursor: pointer;
}

a:hover,
.a:hover { /* Bootstrap Overrides */
    color: var(--hyperlink-hover);
    text-decoration: underline;
}

body.x-main-body {

}

body.x-dialog-body {
    background: #fff;
}

body.x-dialog-body > form {
    height: 100%;
}

body.x-dialog-body > form > div.xdialog {
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.x-dialog-body > form > div.xdialog > div.xdialog-content {
    flex-grow: 2 !important;
    overflow-y: auto;
}

/*endregion*/


/*region  FRAME COMMON  ***********************************************************************************************/

table.intro {
    width: 100%;
    margin-top: 1em;
    margin-bottom: .25em;
    background: #feffed;
    background: linear-gradient(to bottom, #feffed 0%, #ffffcd 100%);
}

td.intro.content {
    font-size: 11px;
}

.introText {
    font-size: 11px;
    background-color: #ffffdd;
    border: 1px solid #808080;
    margin: 1px 5px 5px 5px;
    display: none;
}

div.msgInfo {
    border: 1px solid green;
    background-color: #ffffcc;
    margin: 0 5px 3px 2px;
    padding: 5px 10px 5px 5px;
    color: green;
}

div.msgError {
    border: 1px solid red;
    background-color: #ffffcc;
    margin: 0 5px 3px 2px;
    padding: 5px 10px 5px 5px;
    color: #cc0000;
}

.errorPageHeader {
    font-size: 42px;
}

.errorPageSubheader {
    font-size: 15px;
    color: #555555;
}

.errorPageWrapper {
    padding: 40px;
}

/*endregion*/


/*region  MAIN FRAME HEADER  ******************************************************************************************/

tr.header {
    background-color: black;
    height: 25px;
}

span.headerLogoPart1 {
    color: red;
    padding-left: 10px;
}

span.headerLogoPart2 {
    color: #cccccc;
    font-size: 11px;
    padding-left: 5px;
}

.classificationMarkingsHeader {
    display: inline-flex; /* jQuery UI Layout Fix */
    width: 100%;
    min-height: 24px;
    padding: 2px 35px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    flex-flow: row nowrap;
    background: var(--app-chrome-dark-blue);

    font-size: var(--webca-font-size);
    font-style: normal;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    line-height: 19px;
    word-break: break-all;
}

.classificationMarkingsHeader > span:nth-child(1) {
    color: var(--app-chrome-instance-name);
    text-align: left;
}

.classificationMarkingsHeader > span:nth-child(2),
.classificationMarkingsHeader > span:nth-child(2) > a,
.classificationMarkingsHeader > span:nth-child(2) > a:hover,
.classificationMarkingsHeader > span:nth-child(2) > a:visited {
    color: var(--app-chrome-classification-marking-top);
    text-align: right;
    text-decoration: none;
}

.classificationMarkingsHeader > span:nth-child(2) > a:hover {
    text-decoration: underline;
}

div.horizNavigatorIE {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    margin-left: 5px;
    display: -moz-box;
    -moz-box-pack: end
}

span.headerMenuItem {
    padding-left: 20px;
}

span.headerMenuItem a {
    color: white;
    text-decoration: none;
}

span.headerMenuItem a:visited {
    color: white;
    text-decoration: none;
}

span.headerMenuItem a:hover {
    color: white;
    text-decoration: underline;
}

.title-controls {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 10px;
    margin-right: 18px;
}

.title-controls button {
    margin-left: unset;
}

.title-card-controls {
    display: inline-block;
    line-height: 34px;
}

.title-card-controls > .regularText {
    font-weight: var(--font-weight-700-bold);
    font-size: var(--webca-font-size);
    line-height: 20px;
    color: #333333;
    margin-right: 10px;
}

.filter-control-container {
    display: inline;
}

.filter-control-container > .regularText,
.sort-by-filter > .regularText  {
    margin-right: 10px;
}

/*endregion*/


/*region  MAIN FRAME TOOLBAR  *****************************************************************************************/

tr.toolBar {
    height: 45px;
}

td.toolBarButton {
    vertical-align: middle;
}

a.toolBarNav {
    color: black;
    text-decoration: none;
}

a.toolBarNavCurrent {
    color: black;
    text-decoration: none;
}

td.toolBarNav {
    font-size: 12px;
    padding-left: 15px;
    text-align: center;

}

a.horizontalNav {
    text-decoration: none;
}

a:hover.horizontalNav {
    text-decoration: underline;
}

tr.horizontalNav {
    height: 24px; /* NO QUIRKS: was 26px but then restructured area */
    background: #f5f5f5;
    background: linear-gradient(to bottom, #f5f5f5 0%, #e6e6e6 22%, #dddddd 51%, #dadada 100%); /* W3C */
}

td.horizontalNav {
    padding-left: 1px;
    border-bottom: 1px solid #b9b9b9;
}

a.verticalNav,
.verticalNavBody .list-group-item.disabled {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    text-decoration: none;
    color: #fff;
    font-size: var(--webca-font-size);
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    line-height: 19px;
}

.verticalNav.disabled {
    color: #969696;
}

.verticalNavBody a {
    transition: background-color 350ms ease-in-out;
}

a.verticalNav:not(.verticalNav-current):hover > .verticalNav-i > img {
    content: url(../images/icon_process_step_checkmark.png);
}

a.verticalNav:not(.verticalNav-current):hover {
    color: #fff;
    background-color: var(--app-chrome-primary-blue-hover);
}

a.verticalNav-current {
    text-decoration: none;
    color: #fff;
    background: var(--app-chrome-primary-blue);
}

a.verticalNav-current:hover {
    background: var(--app-chrome-primary-blue-hover);
}

.verticalNavPane {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 0;
    height: 100%;
    width: 250px;
    background: var(--app--chrome-secondary-nav-dark-blue);
}

.ui-layout-resizer-west-closed {
    background: var(--app--chrome-secondary-nav-dark-blue);
}

.verticalNavPane_alt {
    border: 1px solid #d0d0da;
    background-color: #d0d0da;
}

.verticalNavHeader {
    display: flex;
    min-height: 74px;
    max-height: 74px;
    padding: 24px 10px 25px 10px;
    margin-bottom: 15px;
    border-top: unset;
    border-right: unset;
    border-bottom: solid 1px #fff;
    border-left: unset;
    color: #fff;
    background: transparent;
}

.execFilterTableWrapper .verticalNavHeader {
    min-height: unset;
    max-width: unset;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom-color: var(--forms-box-stroke);
    color: var(--normal);

}

.verticalNavHeaderTitle {
    align-self: center;
    max-height: 39px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    flex-grow: 2;
}

.execFilterTableWrapper .verticalNavHeaderTitle {
    max-width: unset;
    font-size: 16px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
}

.verticalNavHeader.list-group-item:first-child,
.verticalNavBody .list-group-item:first-child { /* Bootstrap Override */
    border-radius: unset;
}

.verticalNavHeaderIcon {
    flex-shrink: 0;
    background-image: url(../images/iconNavbarTask.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 24px;
    width: 24px;
    margin-right: 12px;
}

.verticalNavToggler button,
.verticalNavToggler button.btn.active,
.verticalNavToggler button.btn:not(:disabled):not(.disabled):active { /* Close Chevron Toggler */
    background: url(../images/iconCollapseNavbar.png) no-repeat center;
    background-size: cover;
    image-rendering: high-quality;
    height: 24px;
    width: 24px;
    border: 0;
    padding: 0;
    margin: 0;
}

.execFilterTableWrapper .verticalNavToggler button,
.execFilterTableWrapper .verticalNavToggler button.btn.active,
.execFilterTableWrapper .verticalNavToggler button.btn:not(:disabled):not(.disabled):active { /* Close Chevron Toggler for Executive Reports */
    background-image: url(../images/iconCollapseNavbar.png);
}

.verticalNav,
.verticalNavBody .list-group-item.disabled { /* Bootstrap Overrides */
    background: unset;
    border: none;
}

.verticalNav-i {
    direction: rtl;
    text-align: justify;
    min-width: 22px;
    display: inline-block;
    vertical-align: top;
}

.verticalNav-i > span {
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
}

.verticalNav-i img {
    padding: 2px 0 1px 6px;
}

.verticalNav-text {
    display: inline-block;
}

.verticalNavBody {
    height: calc(100% - 62px);
    width: 100%;
    overflow-y: auto;
}

table.content { /* Content area */
}

/* apply style to all elements with class .icon-info-gray immediate child  of xform-controls
 * this is added to align the info icon with ctrl in the CPS edit dialogue and such
 */

.html-menu-inline {
    display: inline !important;
}

.xform-controls > label {
    margin-bottom: unset;
    display: inline;
}

.xform-controls > label + .icon-info-gray {
    margin-bottom: unset;
}

.xform-controls > .icon-info-ede-mapping {
    vertical-align: middle;
}

.folder-name-arrow {
    margin-left: 5px;
    margin-right: 5px;
}

#contentTitleId,
.secondary-nav
{
    height: 58px;
    background: var(--app-chrome-gray);
}

#contentTitleId.tertiary-nav {
    background-color: unset;
    padding-left: 35px;
    padding-right: 35px;
}

#contentTitleId,
.secondary-nav {
    height: 74px;
    padding: 0 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#contentTitleId > .contentTitle-left {
    height: 52px;
    display: flex;
    row-gap: 0;
}

#contentTitleId > .contentTitle-left > .xacta-nav-btns-container,
#contentTitleId > .contentTitle-left > .contentTitleContainer,
.secondary-nav .xacta-nav-btns-container
{
    display: inline-flex;
    align-items: center;
}

.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"] {
    margin-right: 20px;
}

.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"] {
    margin-right: 12px;
}

.xacta-nav-btns-container button[automation-selector*="navHistoryMenu"] {
    height: unset;
}

.contentTitle.noActionsBar {
    margin-bottom: 20px;
}

h1.contentTitle {
    display: inline-block;
    margin: 0 10px 0 0;
    font-size: 20px;
    color: var(--normal);
    vertical-align: middle;
}

h1.contentTitle > span {
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
}

h2 {
    font-size: 18px;
}

h3 {
    font-size: 16px;
}

#contentTitleId > .contentTitle-left > .xacta-icon,
#contentTitleId > .contentTitle-left > .xacta-icon-white {
    vertical-align: middle;
}

#contentTitleId > .contentTitle-right {
    display: flex;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
}

td.contentActions {
    height: 30px;
    vertical-align: middle;
}

.pstep-actions {
    padding: 20px 35px;
}

.pstep-actions .xdialog-toolbar-tabs {
    margin-top: -4px;
    margin-bottom: -3px;
}

.xdialog-toolbar .xdialog-toolbar-tabs {
    margin-top: 17px;
    margin-bottom: 16px;
}

.pstep-actions-right > .btn {
    vertical-align: initial;
    margin-left: 0;
    padding-right: 0;
}

.info-msg {
    width: auto;
    display: flex;
    gap: 11px;
    margin: 0 35px 20px 35px;
    border-radius: 3px;
    padding: 5px 15px;
    background-color: #2f96b4;
    line-height: 24px;
}

.xdialog .info-msg {
    margin: 0 5px 20px 5px;
}

.info-msg.noToolbar,
.xdialog .info-msg.noToolbar {
    margin-top: 20px;
}

button.pstep-primary-btn,
.pstep-primary-btn:not(:disabled):not(.disabled):hover,
.pstep-primary-btn:focus,
.pstep-primary-btn.focus,
.pstep-primary-btn:not(:disabled):not(.disabled):active,
.pstep-primary-btn.active:not(:disabled):not(.disabled) {
    color: #fff;
    background: var(--app-chrome-primary-blue);
}

.icon-pstep-prev {
    top: initial;
}

.glyphicon.icon-pstep-next {
    font-size: 7px;
    margin-left: 5px;
    float: right;
    margin-top: 5px;
    margin-right: 0;
}

.narrowspan {
    white-space: nowrap;
}

.narrowspan > .btn {
    margin-left: 4px;
    margin-right: 4px;
    padding-left: 2px;
    padding-right: 2px;
}

.positive-number-badge {
    background-color: #4381cc;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff;
}

.negative-number-badge {
    background-color: #B80000;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #ffffff;
}

.pstep-finish-message-container {
    padding-top: 20px;
    padding-bottom: 20px;
}

.pstep-finish-message {
    font-size: 16px;
}

.pstep-finish-psteps {
    padding-top: 10px;
}

.pstep-finish-options {
    padding-bottom: 10px;
}

.pstep-finish-options + div {
    display: flex;
    gap: 10px;
}

#pstepStatus {
    display: inline-flex;
    gap: 10px;
}

#pstepStatus label {
    font-weight: var(--font-weight-500-medium);
    line-height: 18px;
    margin: 0;
}

#pstepStatus > button + button {
    margin-left: 0;
}

#pstepCompleted {
    display: inline-flex;
    height: 34px;
    padding: 0 8px;
    align-items: center;
    gap: 5px;
    border-radius: 4px;
    border: 1px solid var(--forms-box-stroke);
    background: #fff;
}

#pstepCompleted > label {
    cursor: pointer;
}

table.footer {
    height: 20px;
    width: 100%;
}

div.footerSecurityMarking,
div.footerSecurityMarking > a,
div.footerSecurityMarking > a:hover,
div.footerSecurityMarking > a:visited {
    display: flex;
    align-items: center;
    flex: 1 0 0;
    /*noinspection CssNonIntegerLengthInPixels*/
    padding: 2.5px 20px;

    color: var(--dark-gray);
    font-size: var(--webca-font-size);
    font-style: normal;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    text-decoration: none;
    line-height: 19px;
    word-break: break-all;
}

div.footerSecurityMarking > a:hover {
    text-decoration: underline;
}

.iframe_wrapper .footerSecurityMarking {
    padding: 3px;
}

#newFooter {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #efefef;
}

table.NQfooter {
    height: 20px;
    width: 100%;
    border-top: 1px solid #e0e0e0;
}

td.NQfooterSecurityMarking {
    color: #666666;
    padding-left: 10px;
    text-align: left;
    vertical-align: middle;
}

td.NQfooterCopyright {
    vertical-align: middle;
    padding-left: 10px;
}

td.NQfooterLoggedUserInfo {
    color: black;
    padding-right: 10px;
    vertical-align: middle;
}

/*endregion*/


/*region  BUTTONS  ****************************************************************************************************/

button + button,
div.dropdown + button, /* div.dropdown corresponds to dropdown buttons only, does not include dropdown links */
button + div.dropdown,
div.dropdown + div.dropdown {
    /*
    margin-left: 10px;
    */
}

.contentTitle-left button + button { /* Page Title Buttons */
    margin-left: 10px;
}

/*endregion*/


/*region  JQUERY UI LAYOUT  *******************************************************************************************/

.ui-layout-resizer-west-closed {
    z-index: 14 !important;
}

.ui-layout-pane-south {
    display: flex;
    height: fit-content !important;
    z-index: 16 !important;
}

.ui-layout-west {
    z-index: 15 !important; /* prevent tables in a page from overlapping the west tab if they need horizontal scroll.*/
}

#main-layout-center .ui-layout-center {
    overflow-y: auto; /* Make inner center layout pane scrollable */
}

#main-layout-west-resizer > .ui-layout-toggler { /* Open Chevron Toggler */
    background-image: url(../images/iconExpandNavbar.png);
    background-repeat: no-repeat;
    background-position: 10px 25px;
}

.execFilterTableWrapper #main-layout-west-resizer > .ui-layout-toggler { /* Open Chevron Toggler for Executive Reports */
    background-image: url(../images/iconExpandNavbar.png);
}

/*endregion*/


/*region  XDIALOGS  ***************************************************************************************************/

.xdialog-frame-wrapper {
    z-index: 21; /* layout pane toggler button has z-index=1, so dialogs should have 2 */
    position: absolute;
}

.xdialog-frame {
    left: 0;
    top: 0;
    background-color: white;
    overflow: hidden;
    position: absolute;
    border: 1px solid #cccccc;
    border-top-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    box-shadow: 0 5px 5px 0 rgba(50, 50, 50, 0.35);
}

.xdialog-frame-handle {
    position: absolute;
    width: 100%;
    height: 30px;
    cursor: move;
}

.xdialog-resizable-helper {
    margin: -1px;
    border: 1px dotted #0000ff;
}

.xdialog-header {
    background: #00497D;
    color: #ffffff;
}

.xdialog-header .securityClassification,
.xdialog-header .title {
    align-items: center;
    /*noinspection CssNonIntegerLengthInPixels*/
    padding: 6.5px 20px 6.5px 20px;
}

.xdialog-header .title {
    flex-wrap: nowrap;
}

.xdialog-header .title .icon-right-margin {
    margin: 0 0 0 10px;
}

.xdialog-header-title h1 { /* Bootstrap Overrides */
    font-size: 18px;
    line-height: 26px;
    font-weight: var(--font-weight-700-bold);
    margin: unset;
}

.xdialog-header-security,
.xdialog-footer-security {
    line-height: 19px;
    word-break: break-all;
}

.xdialog-header-security {
    color: var(--app-chrome-classification-marking-dialog-top);
    text-align: right;
    text-decoration: none;
}

.xdialog-header + .xdialog-content.row {
    border-top: 20px solid #fff;
}

.x-remote-joplet .xdialog > .xdialog-content {
    overflow-y: auto;
}

.xdialog-toolbar {
    padding: 0 20px;
}

.xdialog-toolbar-actions {
    padding-top: 20px;
    padding-bottom: 20px;
}

.xdialog-toolbar-tabs {
    display: flex;
    align-items: center;
}

.xdialog-toolbar-tabs > ul.nav-tabs {
    border: unset;
    gap: 28px;
}

.xdialog-toolbar-tabs > ul.nav-tabs > li {
    background-color: #fff;
    color: var(--normal);
    font-size: 14px;
    line-height: 19px;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}

.xdialog-toolbar-tabs > ul.nav-tabs > li > span {
    cursor: default;
    border: unset;
    padding: 11px 0;
}

.xdialog-toolbar-tabs > ul.nav-tabs > li > a {
    margin: unset;
    border-top: unset;
    border-right: unset;
    border-bottom: 5px solid #fff;
    border-left: unset;
    padding: 11px 0 6px 0;
}

ul.nav-tabs .nav-link { /* Bootstrap Overrides */
    padding-bottom: 6px;
    margin: unset;
    border-top: unset;
    border-right: unset;
    border-bottom: 5px solid #fff;
    border-left: unset;
    transition: border-color 300ms ease-in-out;
}

ul.nav-tabs .nav-link:hover {
    border-top: unset;
    border-right: unset;
    border-bottom-color: var(--app-chrome-primary-blue-tab-hover);
    padding-bottom: 6px;
}

ul.nav-tabs .nav-link.disabled { /* Bootstrap Overrides */
    color: var(--normal);
}

ul.nav-tabs li.active .nav-link,
ul.nav-tabs li .nav-link.active { /* Bootstrap Overrides */
    border-bottom: 5px solid var(--app-chrome-primary-blue);
    padding-bottom: 6px;
    opacity: 1;
}

ul.nav-tabs li.active:hover .nav-link,
ul.nav-tabs li .nav-link.active:hover { /* Bootstrap Overrides */
    border-bottom: 5px solid var(--app-chrome-primary-blue-hover);
    padding-bottom: 6px;
    opacity: 1;
}

.xdialog-content-pane {
    padding-left: 20px;
    padding-right: 20px;
    overflow-y: auto;
}

.xdialog-content-pane .container-fluid {
    padding: unset;
}

.xdialog-content-pane .container-fluid > .row {
    margin-left: unset;
    margin-right: unset;
}

.xdialog-content-pane .row > *:not(
    input[type="checkbox"]
) {
    width: 100%;
}

.xdialog-footer {
    margin-top: 20px;
}

.xdialog-footer-security {
    color: var(--dark-gray);
}

.xform {
    width: 100%;
    padding-top: 10px;
}

.xform > .xform-group {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
}

.xform > .xform-group > .xform-caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 15px;
    padding-right: 15px;
}

.xform > .xform-group > .xform-left-caption {
    text-align: left;
    padding-right: 0;
}

.xform > .xform-group > .xform-caption.xform-staticlabel {
    text-align: left;
}

.xform.xform-stacked > .xform-group .xform-caption {
    text-align: left;
    width: 100%;
}

.xform > .xform-group > .xform-controls {
    padding-left: 15px;
    padding-right: 15px;
}

input[type="file"] {
    width: 100%;
    height: unset;
    border: unset;
    padding: unset;
    line-height: 32px;
    white-space: pre-wrap;
}

input[type="file"] + div,
input[type="file"] + img + div { /** This targets the <div> that contains the name of the file uploaded via File input **/
    font-size: 0.8em !important; /** override inline style, seems to be generated by the browser for file inputs?  **/
}

.xform > .xform-group > .xform-controls > * {
    margin-right: 5px;
}

.xform > .xform-group > .xform-caption > label,
.xform > .xform-group > .xform-caption > span,
.xform > .xform-group > .xform-controls > span {
    display: inline-block;
}

.xform > .xform-group > .xform-controls > label {
    display: inline;
}

/*endregion*/


/*region  XDIALOG GETFRAMECSS  ****************************************************************************************/

.xdialog-content .xdialog-content-pane > table > tbody > tr > td,
.xdialog-content .xdialog-content-pane > table > tbody > tr > th {
    padding-bottom: 10px;
    padding-right: 10px;
}

.associatedControlsAndTestProcedures {
    display: flex;
    gap: 20px;
}

.projectPersonnelListForm .xform-caption {
    flex-basis: 25px;
}

.task-edit-ps-workflow-process-steps-completion,
.task-edit-ps-workflow-process-steps-completion > .xinput-radio-button-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.assessment-rules-dialog-enable-assessment-event > span {
    margin-top: 1px;
}

.assessment-rules-dialog-assessment-status-popover {
    margin-bottom: unset;
}

.assessment-rules-dialog-assessment-rule-action {
    margin-top: 1px;
    margin-bottom: unset;
}

.task-edit-workflow-1 .task-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-edit-workflow-1 .task-group .xinput-radio-button-info {
    display: flex;
}

.task-edit-workflow-1 .task-group .xinput-radio-button-info .form-check-inline input {
    margin: unset;
}

.task-edit-workflow-1 .task-group .xinput-radio-button-info .form-check-inline {
    align-items: flex-end;
}

.opt-ed-wf .severity-checkboxes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 0 0 12px;
}

.opt-ed-wf .severity-checkboxes > span > span {
    display: flex;
    gap: 4px;
}

.opt-ed-wf .severity-checkboxes > span > span > label {
    order: 2;
}

.ref-s-ed .linedtextarea {
    display: flex;
}

.res-persn-edit-asyc-d #reqTable > div > div:nth-child(3) > div > div:nth-child(n+4) {
    word-break: break-word;
}

/*endregion*/


/*region  MAIN FRAME GETFRAMECSS **************************************************************************************/

.main-frame.acct-req-ls .plain-cell {
    background-color: white;
}

.main-frame.acct-req-ls .duplicate-cell {
    background-color: var(--grid-row-background-warning);
}

#main-layout-center .ui-layout-center.prj-lst {
    overflow-y: unset;
}

#main-layout-center .test-res-lis-all td .badge .btn,
#main-layout-center .test-res-lis td .badge .btn {
    padding: 0 0 0 3px;
    display: inline-flex;
    height: unset;
}

#main-layout-center .test-res-lis-all td .badge .btn .xacta-icon,
#main-layout-center .test-res-lis td .badge .btn .xacta-icon {
    filter: drop-shadow(0px 0px 1px #fff7);
}

.main-frame.ci-req .hasPendingControls * {
    font-weight: var(--font-weight-700-bold) !important;
}

/*endregion*/


/*region  CUSTOM CHECKBOX  ********************************************************************************************/

input[type="checkbox"] {
    appearance: none;
    background-color: var(--forms-box-fill); /* For iOS < 15 to remove gradient background */
    margin: 0; /* Not removed via appearance */
    font: inherit;
    color: currentColor;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--forms-box-stroke);
    border-radius: 2px;
    display: inline-grid;
    place-content: center;
    cursor: pointer;
}

.xform-caption > input[type="checkbox"] {
    align-self: flex-end;
}

input[type="checkbox"]:checked {
    background-color: var(--app-chrome-primary-blue) !important;  /* For iOS < 15 to remove gradient background */
    color: var(--app-chrome-primary-blue);
    border-color: var(--app-chrome-primary-blue);
}

input[type="checkbox"],
input[type="checkbox"]:checked {
    transition: 150ms background-color ease-out,
    150ms color ease-out,
    150ms border-color ease-out;
}

input[type="checkbox"]::before,
input[type="checkbox"]:checked::before {
    /*noinspection CssInvalidPropertyValue*/
    clip-path: path('M8.70718 1.70718L3.50008 6.91429L0.292969 3.70718L1.70718 2.29297L3.50008 4.08586L7.29297 0.292969L8.70718 1.70718Z');
    transform-origin: bottom left;
}

input[type="checkbox"]::before {
    content: "";
    width: 16px;
    height: 16px;
    transition: 200ms transform cubic-bezier(0, 0, 0.44, 1.44);
    box-shadow: inset 16px 16px #fff;
    /*noinspection CssNonIntegerLengthInPixels*/
    transform: scale(0) translateX(3.5px) translateY(4.29px);
}

input[type="checkbox"]:checked::before {
    /*noinspection CssNonIntegerLengthInPixels*/
    transform: scale(1) translateX(3.5px) translateY(4.29px);
}

input[type="checkbox"]:disabled {
    background-color: var(--forms-checkbox-fill-disabled);
    border-color: var(--forms-checkbox-fill-disabled);
    cursor: not-allowed;
}

input[type="checkbox"]:disabled:checked {
    cursor: not-allowed;
}

input[type="checkbox"]:disabled::before {
    background-color: var(--forms-box-fill-disabled); /* For iOS < 15 to remove gradient background */
    color: var(--forms-box-fill-disabled);
    border-color: var(--forms-box-fill-disabled);
}

input[type="checkbox"]:disabled:checked::before {
    background-color: var(--forms-checkbox-fill-disabled); /* For iOS < 15 to remove gradient background */
    color: var(--forms-checkbox-fill-disabled);
    border-color: var(--forms-checkbox-fill-disabled);
}

input[type="checkbox"]:disabled:checked {
    background-color: var(--forms-checkbox-fill-disabled);
    border-color: var(--forms-checkbox-fill-disabled);
    cursor: not-allowed;
}

input[type="checkbox"]:disabled::before {
    background-color: var(--forms-box-fill-disabled); /* For iOS < 15 to remove gradient background */
    color: var(--forms-box-fill-disabled);
    border-color: var(--forms-box-fill-disabled);
}

input[type="checkbox"]:disabled:checked::before {
    background-color: var(--forms-checkbox-fill-disabled); /* For iOS < 15 to remove gradient background */
    color: var(--forms-checkbox-fill-disabled);
    border-color: var(--forms-checkbox-fill-disabled);
}

input[type="checkbox"]:indeterminate::before {
    content: "";
    width: 16px;
    height: 16px;
    transition: 200ms transform cubic-bezier(0, 0, 0.44, 1.44);
    /*noinspection CssInvalidPropertyValue*/
    clip-path: path('M0,0h10v2h-10Z');
    box-shadow: inset 16px 16px var(--app-chrome-primary-blue);
    /*noinspection CssNonIntegerLengthInPixels*/
    transform: scale(1) translateX(2.5px) translateY(7px);
    transform-origin: center center;
}

input[type="checkbox"]:disabled:indeterminate {
    background-color: var(--forms-checkbox-fill-disabled);
    border-color: var(--forms-checkbox-fill-disabled);
}

input[type="checkbox"]:disabled:indeterminate::before {
    box-shadow: inset 16px 16px #fff;
}

input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

.form-control + .form-control {
    margin-top: 1em;
}

.form-control--disabled {
    color: var(--disabled);
    cursor: not-allowed;
}

/*endregion*/


/*regions  TABS  ******************************************************************************************************/

tr.tabs {
    height: 30px;
    padding-top: 5px;
    padding-bottom: 15px;
    vertical-align: top;
}

td.tabSelected {
    color: #000099;
    height: 22px;
    font-size: 12px;
    padding: 0 10px 0 10px;
    background-color: white;
    border: 1px solid #808080;
    border-top: 2px solid #FFC83C;
    border-bottom: 0;
    margin: 5px;
    text-align: center;
}

td.tabEnabled {
    color: #000099;
    height: 22px;
    font-size: 12px;
    padding: 0 10px 0 10px;
    border: 1px solid #808080;
    text-align: center;
}

td.tabDisabled {
    color: #808080;
    height: 22px;
    font-size: 12px;
    padding: 0 10px 0 10px;
    border: 1px solid #808080;
    text-align: center;
}

td.tabEnabled a, td.tabSelected a {
    color: #000099;
    font-size: 12px;
    text-decoration: none;
}

td.tabEnabled a:hover, td.tabSelected a:hover {
    font-size: 12px;
    text-decoration: underline;
}

td.tabSeparator {
    width: 5px;
    background-color: white;
    border-bottom: 1px solid #808080;
}

/*endregion*/


/*regions  X-TABLE  ***************************************************************************************************/

table.xtable.table { /* for x:tables, override Bootstrap .table class which adds margin-bottom:20px */
    margin-bottom: 0;
}

.table { /* Bootstrap Overrides */
    color: var(--normal);
}

table.xtable.table th,
.xtable-titleBar { /* Apply the same styles to table header and table title bar *//* for x:tables, override Bootstrap table headers */
    color: var(--grid-cell-headers);
    font-size: var(--webca-font-size);
    line-height: 19px;
}

.xtable.table > thead > tr > th { /* for x:tables, override Bootstrap table headers to remove bottom border */
    border-bottom: 0;
}


.table-hover > tbody > tr {
    transition: background-color 200ms ease-in-out;
}

.table-hover > tbody > tr:hover {
    background-color: #f1f3fd;
}

.xtable.table thead {
    background: #ffffff;
}

.xtable.table thead th { /* Removing top border of header columns to make grey search/filter row uniform with this header row.*/
    border-top: 1px transparent;
    padding: 6px 8px 10px 8px;
}

.xtable th[class^=xtable-header] { /* Hide overflow on resizable column headers (default on xtable) to prevent text overlap when column made very narrow */
    overflow: hidden;
}

.xtable th[class^='xtable-header'][class*='-centered'] { /* Override Bootstrap default left align style for th text when needed */
    text-align: center;
}

.xtable .xheight_adjuster-row td {
    display: none; /* hide by default, show by js when needed */
}

.xtable div.xtable-header-sorter {
    min-height: 18px;
}

tr.xtable-row-strikeout > td {
    text-decoration: line-through;
}

.FixedHeader_Footer > table > thead { /* When Datatables FixedHeader plugin is used to fix table footer, the cloned table header has height set to 0, but it does not result in rendered height to be zero, has to set display: none; */
    display: none;
}

.xtable td > table > tbody > tr > th,
.xtable td > table > tbody > tr > td,
.xtable td > table > tbody > tr > td > div > table > tbody > tr > td.xcontainer-cell {
    border: unset;
    padding: unset;
    vertical-align: unset;
}

.xtable td > table > tbody > tr:hover,
.xtable td > table > tbody > tr > td > div > table > tbody > tr:hover {
    background-color: unset;
}

.xhelp-balloon {
    margin: 24px 0; /* Remove extra horizontal scroll bars on PStep Pages that display Help Balloons */
    max-height: 125px;
    overflow-y: auto; /* Fixes XACTA-11037 */
    flex-shrink: 0; /* Fixes XACTA-10655 */
}

.xhelp-balloon.container-fluid {
    padding-left: 21px;
}

.xhelp-balloon p {
    width: auto;
    overflow: hidden;
}

.xhelp-balloon:not(.editor_textdiv, .ck-help-balloon) div {
    float: left;
    margin-left: -21px;
}

.paddingTopZero { /* Adjust top padding of an element. Example:  green open folder icon button in table rows of Manage Regulations pstep */
    padding-top: 0;
}

.padding20 { /*Mainly used to pad columns in entries.*/
    padding: 20px !important;
}

.padding15{
    padding: 15px !important;
}

button.action-gear-button .caret {
    margin-top: -6px;
}

button.action-gear-button {
    padding: 3px 12px;
}

.caretSpacer .caret { /* For dropdown buttons with text and the caretSpacer class such as the More button, add space between button text and the caret symbol */
    margin-left: 5px;
}

th.xcontainer-title,
.xtable-titleBar {
    padding: 0 7px 0 7px;
    height: 24px;
    vertical-align: middle;
    background: #F4F5F7;
}

td.xcontainer-title {
    padding: 0;
    vertical-align: middle;
}

span.xcontainer-titleText {
    color: black;
}

label.xcontainer-titleText {
    color: white;
    vertical-align: middle;
}

button.xcontainer-title {
    height: 20px;
    width: 25px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;
}

.projTypeaheadSearchMenuDiv > .searchControlClass > .searchComponentCloseButtonClass { /* Override button.xcontainer-title above */
    width: auto;
}

.xtable-header-sorter .icon-info-gray {
    margin-left: 5px;
}

.xtable-header-border {
    border: 1px solid #C5CBD7 !important;
}

td.xcontainer-cell {
    padding: 17px 8px;
    word-wrap: break-word;
    line-height: 17px;
    font-weight: var(--font-weight-500-medium);
}

td.xcontainer-cell.xcolumn-selectAll {
    padding: 17px 22px 16px 22px;
}

td.xcontainer-cell > button.btn.iconOnly,
td.xcontainer-cell > .html-menu-inline.dropdown > button.btn.btn-borderless,
td.xcontainer-cell > .badge > button.btn.iconOnly {
    padding: 1px 0;
    height: unset;
}

td.xcontainer-cell > .badge > button.btn.iconOnly {
    display: inline-flex;
}

td.xcontainer-cell > .badge > button.btn.iconOnly > span {
    margin: unset;
}

td.xcontainer-cell .btn.action-gear-button .icon-right-margin {
    margin: unset;
}

td.xcontainer-cell .progress {
    margin-top: 6px;
    margin-left: 18px;
    width:90%;
    height: 4px;
    align-content: center;
}

td.xcontainer-cell .progress.notAdmin {
    margin-left: unset;
}

td.xcontainer-cell .progress.projectAction {
    margin-left: 13px;
}

td.xcontainer-cell .progress-bar {
    border-radius: 2px;
    background: linear-gradient(180deg, #43B766 0%, #43B766 66.85%, #399C57 85.64%, #399C57 100%);
}

td.xcontainer-cell > select,
td.xcontainer-cell > input[type="text"],
td.xcontainer-cell > input[type="textarea"] {
    margin-top: -7.5px;
    margin-bottom: -7.5px;
}

.textAreaLarge {
    width: 500px;
    height: 400px;
}

.xcolumn-selectAll {
    width: 55px;
    text-align: center;
}

.xcolumn-actions {
    width: 70px;
}

tr.odd > .xacta-graycell {
    background-color: #f2f3f7;
}

tr.even > .xacta-graycell {
    background-color: #fafafa;
}

.word-break {
    word-break: break-all;
}

.recommendedAnswer { /* shade cell of recommended answer a light green color */
    background-color: #bfe6bf;
}

.container-folder-name {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2px
}

.container-folder-name > img {
    padding-top: 3px;
    flex-shrink: 0;
}

.container-folder-name > span {
    margin-right: 3px
}

.container-project-name > div {
    padding-left: 33px;
}

.container-project-name > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px
}

.container-project-name > div > span:first-child {
    flex-shrink: 0;
}

.projectIconAndName {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.projectIconAndName > img:first-child,
.projectIconAndName > img:nth-child(2) {
    padding-top: 3px;
    flex-shrink: 0;
}

.projectIconAndName > :first-child {
    flex-shrink: 0;
}

/*endregion*/


/*region  XTABLE FILTER AND TITLE CONTROLS  ***************************************************************************/

.xtable-titleBar { /* XTable used to render filter and title controls in a <table> with .xcontainer-title styles set. Now it is rendered as a <div> with .xtable-filter class assigned. */
    /* Override some styles inherited from above with th.xcontainer-title */
    height: 54px;
    padding: 11px 20px;
    border-radius: 4px;
}

.xtable-titleBar .xtable-title {
    padding-right: 5px;
    padding-left: 5px;
}

span.xtable-title + div.filter-leftSide {
    padding-left: 20px; /* Provide extra space in between table title and filter left controls */
}

.xtable-titleBar select {
    height: 32px;
    border-radius: 5px;
    border: 1px solid #C7CCD9;
}

/*endregion*/


/*region  INTRODUCTION PAGE AND HELP TEXT FORMATTING  *****************************************************************/

.italic {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.labelField {
    font-weight: bold;
    vertical-align: text-top;
}

.introPage {
    margin-top: 20px;
}

.xform > .xform-group > .xform-controls.static-text-display-control.editor_textdiv,
.introPage.editor_textdiv,
.xhelp-balloon.editor_textdiv {
    margin: unset;
    border: unset;
    padding: unset;
    -webkit-appearance: unset;
    width: 100%;
}

.reportIntroContainer { /* NO QUIRKS: align intro container with left of balloons and page header */
    margin-left: 5px;
}

.reportIntroContainer h2:first-child.regularBigText { /* NO QUIRKS: remove extra space at top of Reports Introduction page container */
    margin-top: 0;
}

.reportIntroContainer h2 { /* NO QUIRKS: fix spacing */
    margin: 1.5em 0;
}

.reportIntroHeader {
    font-size: 21px;
}

.introPage p {
}

.introPage ul, .introPage ol, .xhelp-balloon ul, .xhelp-balloon ol {
    margin-bottom: .5em;
    margin-top: .5em;
}

.list-item-completed, .list-item-completed a {
    color: green;
    list-style-image: url(../images/icon_checkmark_green.png);
}

.list-item-completed-after, .list-item-completed-after a {
    color: green;
}

.list-item-completed-after::after {
    content: url(../images/icon_checkmark_green.png);
}

.list-simple {
    padding: 0;
    margin: 0 0 0 18px;
}

.list-item-simple {
    border: 0 solid #ddd;
    display: list-item;
    margin: 0 0 -1px 0;
    padding: 0;
    position: relative;
}

.list-item-starred {
    list-style-image: url(../images/iconStar.png);
}

.list-item-disabled, .list-item-disabled a {
    color: lightgray;
}

.list-item-bold {
    font-weight: bold;
}

.helpLargetxt {
    font-size: 15px;
}

.helpMediumtxt {
    font-size: 14px;
}

/*endregion*/


/*region  INPUT CONTROLS, LABELS  *************************************************************************************/

label {
    vertical-align: middle;
    font-weight: var(--font-weight-500-medium);
}

label > span.required {
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    font-size: 15px;
    line-height: 13px;
}

label > span.required:hover {
    animation: flash 3s ease-in-out infinite;
}

.smallText {
    font-size: 9px;
}

table > tbody > tr > td > .regularText {
    display: inline-block;
}

.wrappedText {
    word-wrap: break-word; /* XIAM-10201 */
}

.regularTextBold {
}

.regularTextRed {
    color: red;
}

.regularTextRedBold {
    color: red;
    font-weight: bold;
}

.regularTextOrangeBold {
    color: orange;
    font-weight: bold;
}

.regularTextOrangeRedBold {
    color: orangered;
    font-weight: bold;
}

.regularTextGoldenrod {
    color: goldenrod;
    font-weight: bold;
}

.regularTextGreen {
    color: green;
    font-weight: bold;
}

.regularTextBlue {
    color: blue;
}

.linkTextBlue {
    color: #337ab7;
    text-decoration: none;
}

.linkTextBlue:hover {
    color: #337ab7;
    text-decoration: underline;
}

.regularBigText {
}

.linkProjectName {
    font-size: 14px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
}


.linkRegStatus{
    font-size: 16px;
    color: white;
    opacity: 1;
}

.linkRegName {
    font-size: 16px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    padding-bottom: 10px;
}

.linkTrackingNumber {
    font-size: 10px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    line-height: 15px;
}

input.rank {
    width: 50px;
    text-align: right;
}

/* */

.w25 {
    width: 25px;
}

.w50 {
    width: 50px;
}

.w75 {
    width: 75px;
}

.w100 {
    width: 100px;
}

.w125 {
    width: 125px;
}

.w150 {
    width: 150px;
}

.w170 {
    width: 170px;
}

.w200 {
    width: 200px;
}

.w500x {
    width: 500px;
}

.w250 {
    width: 250px;
}

.w300 {
    width: 300px;
}

.w350 {
    width: 350px;
}

.w400 {
    width: 400px;
}

.w445 {
    width: 445px;
}

.w450 {
    width: 450px;
}

.w500 {
    width: 500px;
}

.w550 {
    width: 550px;
}

.w600 {
    width: 600px;
}

.w625 {
    width: 625px;
}

.w650 {
    width: 650px;
}

.wFull {
    width: 100%;
    box-sizing: border-box; /* NO QUIRKS */
}

.maxWidthFull {
    max-width: 100%;
}

.w70pct {
    width: 70%;
    box-sizing: border-box; /* NO QUIRKS */
}

.w80pct {
    width: 80%;
    box-sizing: border-box; /* NO QUIRKS */
}

.wFullx {
    width: 100%;
    box-sizing: border-box; /* NO QUIRKS */
}

input, select, textarea {
    box-sizing: border-box;
    border-radius: 4px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #C5CBD7; /* For 2.0 styling of outline of inputs*/
}

textarea {
    padding: 7px 12px;
    resize: both;
}

select[disabled] > option {
    color: #808080;
}

textarea { /* Prevent text area plugin from moving further than the dive */
    min-height: 25px;
}

.ui-wrapper {
    min-height: 45px;
}

/*endregion*/


/*region  LOGIN PAGE  *************************************************************************************************/

.loginTopBanner {
    background: linear-gradient(#FFFFFF, #d6dadb);
    height: 80px;
    text-align: center;
}

.login-bg {
    background-image: url(../images/X_2_BG_Graphic_V05_high_res_1_ALPHA3.webp), linear-gradient(180deg, #050C27 0%, #050C27 100%);

    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    padding: 0;
    height: 100%;
    width: 100%;
}

.loginTopBanner2 {
    position: absolute;
    width: 210px;
    height: 42px;
    left: 0;
    top: 40px;
}

.align-center {
    text-align: center;
}

.loginMessage {
    padding: 10px;
    position: relative;
    bottom: 15px;
    left: 35px;
    text-align: center;
    font-size: 12px;
    color: red;
}

.loginWarningContainer {
    padding-top: 20px;
    padding-bottom: 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    flex: none;
    align-self: stretch;
    color: #333333;
    font-size: var(--webca-font-size);
    line-height: 18px;
}

.loginBannerTitle {
    font-style: normal;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    font-size: 20px;
    line-height: 24px;
    display: flex;
    color: #000000;
}

.loginPageLayout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 110px 90px 30px;
    position: absolute;
    width: 1000px;
    height: 700px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: auto;
}

.loginPageAcceptLayout {
    width: 643px;
    height: 405px;
}

.loginPageDeniedLayout {
    width: 700px;
    height: 300px;
}

.loginButton {
    box-sizing: border-box;
    border: 1px solid var(--app-chrome-primary-blue);
    border-radius: 4px;
}

.loginTopLeftBanner {
    position: absolute;
    width: 145px;
    height: 65px;
    top: 46px;
    left: 56px;
}

.loginTextInput {
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

.accept-decline > .xform {
    padding: unset;
}

.accept-decline > .xform > .xform-group {
    margin: unset;
}

.btn-light.accessDeniedBtnLayout,
.btn-light[automation-selector*="warningDecline"] {
    display: inline-flex;
    height: 32px;
    /*noinspection CssNonIntegerLengthInPixels*/
    padding: 10.5px 11px;
    align-items: center;
    font-size: 12px;
    line-height: 11px;
}

.btn-light.accessDeniedBtnLayout {
    color: #fff;
    background-color: var(--app-chrome-primary-blue);
}

.loginWarning {
    height: 400px;
    border: 1px solid var(--forms-box-stroke);
    border-radius: 4px;
    padding: 10px 5px 5px 10px;
    font-size: var(--webca-font-size);
    line-height: 18px;
    text-align: center;
    overflow: auto;
    background-color: white;
}

.loginPatent {
    color: #333;
    font-size: 10px;
    text-align: center;
    clear: both;
}

.loginPageLayout article {
    margin-top: 20px;
}

.loginPageLayout .xform {
    padding: unset;
}

.loginPageLayout .xform > .xform-group {
    margin-bottom: 20px;
}

.loginPageLayout .xform > .xform-group > .xform-caption {
    justify-content: center;
}

#loginButtons {
    overflow-y: visible;
    white-space: nowrap;
}

/*endregion*/


/*region  REQUIREMENT EDIT  *******************************************************************************************/

.mult_inherit_details {
    border: 1px solid lightgray;
    padding: 0 0 10px 0;
    margin-top: 10px;
}

.mult_inherit_details_title {
    display: inline-block;
    width: 99%;
    background-color: #eeeeee;
    padding: 5px;
    margin-bottom: 10px;
}

.mult_inherit_radio_table {
    padding: 7px 7px 0 7px;
}

.multi_inherit_nextline_input {
    display: block;
    width: 450px;
    margin-top: 12px;
}

.inherit_control_type_full {
    color: #004000;
}

.inherit_control_type_partial {
    color: #008080;
}

.paraLabel {
    display: inline-block;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 5px;
    word-wrap: break-word;
    white-space: normal;
}

.paraLabelNarrow {
    display: inline-block;
    padding-top: 4px;
    padding-bottom: 5px;
    word-wrap: break-word;
    white-space: normal;
}

.blackLabel {
    display: inline-block;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
    word-wrap: break-word;
    white-space: normal;
    background-color: #4d4d4d;
    font-size: 12px;
}

/*endregion*/


/*region  MY APPROVALS RECOMMEND  ***********************************************************************************************/

.my-approvals-rec-content {
    display: flex;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    color: var(--normal);
}

.my-approvals-rec-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.my-approvals-rec-title div:first-child {
    font-weight: var(--font-weight-700-bold);
}

.my-approvals-rec-table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.my-approvals-rec-table-header {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

.my-approvals-rec-header-column-1 {
    display: flex;
    padding: 6px 8px 10px 8px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid var(--forms-box-stroke);
    background: #FFF;
}

.my-approvals-rec-header-column-1 > div {
    display: flex;
    width: 316px;
    height: 37px;
    flex-direction: column;
    justify-content: flex-end;
    flex-shrink: 0;
}

.my-approvals-rec-header-column-2 {
    display: flex;
    padding: 6px 8px 10px 8px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    border-bottom: 1px solid var(--forms-box-stroke);
    background: #FFF;
}

.my-approvals-rec-header-column-2 > div {
    display: flex;
    width: 517px;
    height: 37px;
    flex-direction: column;
    justify-content: flex-end;
}

.my-approvals-rec-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.my-approvals-rec-row-content {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    /* Border Bottom */
    box-shadow: 0 -1px 0 0 #DCDCDC inset;
}

.my-approvals-rec-row-cell-1 {
    display: flex;
    width: 332px;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

.my-approvals-rec-row-cell-1 div:first-child > span > span {
    font-weight: var(--font-weight-700-bold);
}

.my-approvals-rec-row-cell-2 {
    display: flex;
    padding: 8px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 0 0;
}

.my-approvals-rec-row-cell-2 div:first-child {
    word-wrap: break-word;
}

/*endregion*/


/*region REPORTS  *****************************************************************************************************/

.chartLegend th { /* NO QUIRKS: fix alignment of chart legend text to align it left, since TR align="left" may be deprecated in HTML 5 */
    text-align: left;
}

/*endregion*/


/*region   EXECUTIVE REPORTS  *****************************************************************************************/

.exec-dashboard {
    padding: 0;
    border-bottom: 1px solid darkgray;
    border-right: 1px solid darkgray;
}

.exec-dashboard div {
    padding: 0;
    border: 1px solid darkgray;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
}

.execDashboardTable {
    width: 100%;
    background-color: #ffffff;
    padding: 0;
    overflow: hidden;
}

.execDashboardTable td {
    border: 1px solid #dedede; /*  switch to light blue #cbd8e2 once new skin is added */
    padding: 20px;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
}

.execDashboardTableWrapper {
    position: relative;
    background-color: transparent;
    overflow: hidden;
}

.execFilterTableWrapper {
    height: 100%;
    padding-bottom: 10px;
}

.stickyexecProject {
    position: fixed;
    top: 0;
}

.execFilterTableWrapper td {
    padding-left: 4px;
}

.execDivLarge {
    overflow: visible;
    width: 640px;
    height: 500px;
}

.execDivSmall {
    overflow: auto;
    width: 500px;
    height: 395px;
}

.execSidebar {
    height: inherit;
    width: 341px;
    background-color: var(--app-chrome-gray);
}

.execSideBarTitle {
    padding-top: 13px;
    padding-bottom: 13px;
    height: 58px;
    background-color: #E8E8E8;
    font-size: 18px;
}

.execSideBarName {
    padding-left: 5px;
}

.execSideBarControls {
    height: calc(100% - (55px));
    overflow-y: auto;
    width: 100%;

}

.execSideBarControl {
    padding-left: 15px;
    padding-top: 15px;
}

.execSubtitle {
    font-size: 14px;
    text-align: center;
}

.execTitle {
    font-size: 16px;
    text-align: center;
}

.myApprovals_reclist_tr_al12t {
    background-color: #aaaaaa;
}

/*endregion*/


/*region EXTENSIBLE PUBLISHING PROCESS STEPS  *************************************************************************/

.ext_Pub_TemplateLink {
    color: #2828A4;
    text-decoration: underline;
}

a:hover.ext_Pub_TemplateLink {
    color: #2828a4;
    text-decoration: underline;
}

#customDoc {
    border: 0;
}

.docDateTime {
    color: #666666;
}

.pubIconContainerTable {
    width: 95%;
}

.pubIconContainer {
    margin: 30px auto auto;
    width: 620px;
    height: 340px;
}

.pubIconContainer a {
    text-decoration: none;
}

.pubIconContainer a:hover {
    text-decoration: underline;
}

.pubIconTitle {
    font-size: 18px;
}

.radioBg {
    background: #f5f5f5;
    border-radius: 4px;
    text-align: center;
    width: 412px;
    height: 40px;
    clear: both;
    margin: 20px auto auto;
}

.radioBgPadding {
    padding-top: 9px;
    font-size: 20px;
}

#xactaDoc {
    border: 0;
}

.xactaDoc,
.customDoc {
    width: 310px;
    height: 126px;
    margin: auto auto 10px;
}

/*endregion*/


/*region  LEGACY PUBLISHING PROCESS STEPS  ****************************************************************************/

table.legacyPubContainer td { /* NO QUIRKS: fix missing spacing between sections (td cells) on legacy publishing pages such as SSAA Section 1, etc. */
    padding: .25em 0 .25em 0;
}

/*endregion*/


/*region DATE PICKER **************************************************************************************************/

.datePicker {
    position: relative;
    z-index: 11; /* so that the datepicker will not be hidden by a table header */
}

.ui-datepicker .ui-widget {
    z-index: 100 !important;
}

.ui-datepicker-month, .ui-datepicker-year { /* fix white text on white background in JQuery UI date picker month and year selector dropdowns */
    color: black;
}

input + .ui-datepicker-trigger { /* fix icon alignment and add spacing between datepicker icon and input to the left of it. .ui-datepicker-trigger is a JQuery UI datepicker css class. */
    vertical-align: text-bottom;
    margin-left: .5em;
}

#ui-datepicker-div div.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background: #5b9ae7; /* blue, override JQuery UI orange color for .ui-widget-header here */
    border: 0;
}

.x-dialog-body .ui-datepicker[style*="top: 0"],
.x-dialog-body .ui-datepicker[style*="top: 0px"] {
    top: 36px !important; /* pushdown so it's not messing with draggable handle */
}

/*endregion*/


/*region CKEDITOR  ****************************************************************************************************/

.editor_textdiv {
    vertical-align: top;
    padding: 7px 12px 8px 12px;
    overflow: auto;

    border: 1px solid var(--forms-box-stroke);
    border-radius: 4px;
    -webkit-appearance: textfield;
}

.editor_textdiv .normal,
.editor_textdiv body,
.editor_textdiv td,
.editor_textdiv th,
.editor_textdiv div,
.editor_textdiv li,
.editor_textdiv li.MsoNormal,
.editor_textdiv div.MsoNormal,
.ck-help-balloon .normal,
.ck-help-balloon body,
.ck-help-balloon td,
.ck-help-balloon th,
.ck-help-balloon div,
.ck-help-balloon li,
.ck-help-balloon li.MsoNormal,
.ck-help-balloon div.MsoNormal {
    /* Synced with same style in publisher */
    mso-style-parent: "";
    margin: 0 0 .0001pt;
    mso-pagination: widow-orphan;
    line-height: normal;
    font-size: 12.0pt;
    font-weight: 400;
    font-family: "Segoe UI", "Times New Roman", serif;
    mso-fareast-font-family: "Times New Roman";
}

.ck-help-balloon .normal,
.ck-help-balloon body,
.ck-help-balloon td,
.ck-help-balloon th,
.ck-help-balloon div,
.ck-help-balloon li,
.ck-help-balloon li.MsoNormal,
.ck-help-balloon div.MsoNormal {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-500-medium);
    font-size: var(--webca-font-size);
}

.editor_textdiv ul,
.ck-help-balloon ul {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}

.editor_textdiv ol,
.ck-help-balloon ol {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}

.cke_chrome {
    border-radius: 4px;
    overflow: hidden;
}

.editor_textdiv .header,
.ck-help-balloon .header {
    margin: 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    page-break-after: avoid;
    mso-outline-level: 1;
    tab-stops: list .25in;
    font-size: 14.0pt;
    font-weight: bold;
    mso-bidi-font-size: 16.0pt;
    font-family: Arial, sans-serif;
    page-break-before: always;
}

.ck-help-balloon .header {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-500-medium);
}

.editor_textdiv h1,
.ck-help-balloon h1 {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;

    /* Synced with same style in publisher */
    mso-style-next: Normal;
    margin: 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    page-break-after: avoid;
    mso-outline-level: 1;
    mso-list: l20 level1 lfo1;
    tab-stops: list .25in;
    font-size: 21px;
    mso-bidi-font-size: 21px;
    font-family: "Segoe UI", Arial, serif;
    page-break-before: always;
    mso-font-kerning: 18px;
}

.editor_textdiv h2,
.ck-help-balloon h2 {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;

    /* Synced with same style in publisher */
    mso-style-next: Normal;
    margin: 3.0pt 0 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    page-break-after: avoid;
    mso-outline-level: 2;
    mso-list: l20 level2 lfo1;
    tab-stops: list .5in;
    font-size: 20px;
    mso-bidi-font-size: 20px;
    font-family: "Segoe UI", Arial, serif;
    mso-bidi-font-style: italic;
}

.editor_textdiv h3,
.ck-help-balloon h3 {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;

    /* Synced with same style in publisher */
    mso-style-next: Normal;
    margin: 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    page-break-after: avoid;
    mso-outline-level: 3;
    mso-list: l20 level3 lfo1;
    tab-stops: list .75in;
    font-size: 19px;
    mso-bidi-font-size: 19px;
    font-family: "Segoe UI", Arial, serif;
}

.editor_textdiv h4,
.ck-help-balloon h4 {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;

    /* Synced with same style in publisher */
    mso-style-next: Normal;
    margin: 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    page-break-after: avoid;
    mso-outline-level: 4;
    mso-list: l20 level4 lfo1;
    tab-stops: list 1.0in;
    font-size: 18px;
    mso-bidi-font-size: 18px;
    font-style: italic;
    font-family: "Segoe UI", "Times New Roman", serif;
}

.editor_textdiv h5,
.ck-help-balloon h5 {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;

    /* Synced with same style in publisher */
    mso-style-next: Normal;
    margin: 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    mso-outline-level: 5;
    mso-list: l20 level5 lfo1;
    tab-stops: list 1.25in;
    font-size: 17px;
    mso-bidi-font-size: 17px;
    font-style: italic;
    font-family: "Segoe UI", "Times New Roman", serif;
    mso-bidi-font-style: italic;
}

.editor_textdiv h6,
.ck-help-balloon h6 {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    font-weight: bold;

    /* Synced with same style in publisher */
    mso-style-next: Normal;
    margin: 3.0pt 0;
    text-indent: 0;
    mso-pagination: widow-orphan;
    mso-outline-level: 6;
    mso-list: l20 level6 lfo1;
    tab-stops: list 1.5in;
    font-size: 16px;
    font-style: italic;
    mso-bidi-font-size: 16px;
    font-family: "Segoe UI", "Times New Roman", serif;
}

.ck-help-balloon h1 {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-700-bold);
    font-size: 18px;
}

.ck-help-balloon h2 {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-700-bold);
    font-size: 17px;
}

.ck-help-balloon h3 {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-700-bold);
    font-size: 16px;
}

.ck-help-balloon h4 {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-700-bold);
    font-size: 15px;
}

.ck-help-balloon h5 {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-700-bold);
    font-size: 14px;
}

.ck-help-balloon h6 {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-700-bold);
    font-size: 13px;
}

.editor_textdiv p,
.ck-help-balloon p {
    /* Synced with CKEditor's User Agent Styles While Editing */
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;

    /* Synced with same style in publisher */
    mso-style-parent: "";
    mso-pagination: widow-orphan;
    line-height: normal;
    font-size: 12.0pt;
    font-weight: 400;
    font-family: "Segoe UI", "Times New Roman", serif;
    mso-fareast-font-family: "Times New Roman";
}

.ck-help-balloon p {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-500-medium);
    font-size: var(--webca-font-size);
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
    margin-top: 0;
    line-height: normal;
}

.editor_textdiv address,
.ck-help-balloon address {
    /* Synced with CKEditor's User Agent Styles While Editing */
    font-size: 12.0pt;
    overflow: visible;
    font-family: "Segoe UI", "Times New Roman", serif;
    font-weight: 400;
    margin-bottom: 1rem;

    /* Synced with same style in publisher */
    display: block;
    font-style: italic;
}

.ck-help-balloon address {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-500-medium);
    font-size: var(--webca-font-size);
}

.editor_textdiv pre,
.ck-help-balloon pre {
    /* Synced with CKEditor's User Agent Styles While Editing */
    font-size: 12.0pt;
    overflow: visible;

    /* Synced with same style in publisher */
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
}

.ck-help-balloon pre {
    font-weight: var(--font-weight-500-medium);
    font-size: 14px;
    margin: 1em 0;
}

.editor_textdiv .unnumbered,
.ck-help-balloon .unnumbered {
    margin-left: 0;
    text-indent: 0;
    mso-list: none;
}

.editor_textdiv .imageCaption,
.editor_textdiv .tableCaption,
.ck-help-balloon .imageCaption,
.ck-help-balloon .tableCaption {
    font-family: "Segoe UI", "Times New Roman", serif;
    font-size: 12.0pt;
    font-weight: bold;
    text-align: center;
    display: block;
}

.ck-help-balloon .imageCaption,
.ck-help-balloon .tableCaption {
    font-family: var(--webca-font-family);
    font-weight: var(--font-weight-500-medium);
    font-size: var(--webca-font-size);
}

.editor_textdiv a,
.ck-help-balloon a {
    text-decoration: none;
}

a.commentDisplay {
    border: 1px dotted #3B3B3B;
    background-color: #FEFCC2;
}

/*endregion*/


/*region  JQUERY UI OVERRIDES  ****************************************************************************************/

.ui_tpicker_time_label { /* jQuery UI Overrides */
    margin-top: 10px;
    margin-bottom: -10px
}


/*endregion*/


/*region  BOOTSTRAP OVERRIDES  ****************************************************************************************/

.xtable-titleBar h2,
.h5,
h5 {
    font-size: var(--webca-font-size);
    color: var(--normal);
}

.btn.disabled > span.xacta-icon,
.btn:disabled > span.xacta-icon {
    filter: grayscale(1);
}

/* override bootstrap's cursor styling when menu links are disabled */
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
    cursor: default;
}

/* override dropdown menu link bootstrap 4.6 */
.dropdown-menu > li > a {
    display: block;
    color: #333333;
    clear: both;
    white-space: nowrap;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

.dropdown-menu-right { /* Bootstrap Override */
    right: 35px; /* Yes it's 35px not 5px :) */
}

.modal-dialog h4 {
    font-size: 18px;
}

/*endregion*/


/*region   SPRITE ICON SUPPORT STYLES**********************************************************************************/
/*         Looking for icon-* classes for iconsXactaSprite? See "webca-iconsXactaSprite.css"                          */

.icon-right-margin {
    margin-right: 5px;
}

.projTypeaheadSearchMenuDiv > .searchControlClass > .searchComponentCloseButtonClass > span { /* Override icon-right-margin above */
    margin: 0 12px;
}

.icon-left-margin {
    margin-left: 5px;
}

.icon-downscale-12px {
    scale: 0.75;
}

span.disabled {
    opacity: 0.5;
    filter: grayscale(1);
    cursor: default;
}

.nav-tabs > .active > span.disabled {
    opacity: 1;
    filter: unset;
}

/*endregion*/


/*region  ICONS NOT IN "webca-iconsXactaSprite.css"  *************** **************************************************/

.icon-comment-indicator { /* using the old image as a placeholder, to be replaced with a position in the sprite sheet */
    background-image: url(../images/iconAdd_note.png);
}

.icon-recall { /* using the old image as a placeholder, to be replaced with a position in the sprite sheet */
    background-image: url(../images/iconRecall.png);
}

.icon-account-active { /* XIAM-9885 */
    background-image: url(../images/iconStatusActive.png);
}

.icon-account-inActive {
    background-image: url(../images/iconStatusExpired.png);
}

.icon-exclamation-orange-small {
    background-image: url(../images/iconOrange_exclamation_12px.png);
    width: 12px;
    height: 12px;
    margin-top: -3px !important;
    margin-left: -2px;
}

/*endregion*/


/*region  BACK AND FORWARD NAV BUTTONS, HISTORY MENU  *****************************************************************/

.xacta-nav-btns-container { /* holds the back/fwd buttons and history menu */
    padding-right: 15px;
    display: table-cell;
    vertical-align: middle;

}

.xacta-nav-btns-container .navHistoryMenu.disabled:hover,
.xacta-nav-btns-container .xacta-nav-btn,
.xacta-nav-btns-container .xacta-nav-btn.disabled:hover { /* override Bootstrap formatting */
    border-width: 0;
    background: none;
}

.xacta-nav-btns-container .xacta-nav-btn-left,
.xacta-nav-btns-container .xacta-nav-btn-right,
.xacta-nav-btns-container .dropdown {
    padding: unset;
    margin: unset;
}

.xacta-nav-btns-container div.dropdown[data-res-name="navHistoryMenu"] { /* .xacta-nav-btns-container .dropdown Overrides*/
    display: inline-flex !important;
    height: 52px;
    padding-right: 4px; /* Plus 12px padding-right on the button = 16px as per VRDP */
    border-right: solid 1px var(--app-chrome-primary-blue-disabled);
}

a[automation-selector="action refresh"] {
    display: inline-flex !important;
    height: 52px;
    padding: 0 10px;
    border-right: solid 1px var(--app-chrome-primary-blue-disabled);
    align-items: center;
}

a[automation-selector="action refresh"] > img {
    padding: 0;
}

.xacta-nav-btns-container .xacta-nav-btn-right > .caret {
    vertical-align: text-bottom;
}

.xacta-nav-back, .xacta-nav-fwd {
    background-repeat: no-repeat;
    background-position: center center;
}

.xacta-nav-back {
    background-image: url(../images/xacta-nav-btn-left-gray-trans.png);
    height: 22px;
    width: 14px;
    margin-top: 0 !important;;
}

.xacta-nav-fwd {
    background-image: url(../images/xacta-nav-btn-right-gray-trans.png);
    height: 22px;
    width: 14px;
    margin-top: 0 !important;;
}

.xacta-nav-icon-history {
    background-image: url(../images/iconHistory.png);
    height: 28px;
    width: 28px;
    margin-top: 0 !important;
}

.xacta-nav-icon-project-tasks {
    background-image: url(../images/iconProjectTasks.png);
    height: 20px;
    width: 20px;
    margin-top: 0 !important;
}

.xacta-nav-icon-project-process-steps {
    background-image: url(../images/iconProjectProcessSteps.png);
    height: 20px;
    width: 20px;
    margin-top: 0 !important;
}

.xacta-nav-icon-project-roles {
    background-image: url(../images/iconProjectRoles.png);
    height: 20px;
    width: 20px;
    margin-top: 0 !important;
}

.xacta-nav-icon-project-reports {
    background-image: url(../images/iconProjectReports.png);
    height: 20px;
    width: 20px;
    margin-top: 0 !important;
}

.xacta-nav-history.icon-right-margin {
    margin-right: 0;
}

.navHistoryMenu.dropdown-toggle::after {
    margin-left: 0;
    vertical-align: sub;
    border-top: 4px solid var(--app-chrome-dropdown-triangle);
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
}

.xacta-nav-btn-left:hover .xacta-nav-back, .xacta-nav-btn-right:hover .xacta-nav-fwd {
    background-repeat: no-repeat;
    background-position: center center;
}

.xacta-nav-btn-left:not(:disabled):not(.disabled):hover .xacta-nav-back {
    background-image: url(../images/xacta-nav-btn-left-gray-trans-hover.png);
}

.xacta-nav-btn-right:not(:disabled):not(.disabled):hover .xacta-nav-fwd {
    background-image: url(../images/xacta-nav-btn-right-gray-trans-hover.png);
}

.navHistoryMenu {
    background: none;
    border: none !important;
    padding: 0;
}

.navHistoryMenu.dropdown-toggle {
    background: none;
}

.navHistoryMenu:focus {
    outline-offset: 1px;
}

.xpage-overlay {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 9991;
    background-color: rgba(0, 0, 0, 0.2);
}

.xpage-overlay > #xprogress-spinner {
    width: 144px;
    height: 128px;
    float: left;
    background: #ffffff;
    opacity: .9;
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);

    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9995;
}

.xpage-overlay > #xprogress-spinner > #xprogress-spinner-text {
    /* Center the text */
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
}


.xpage-overlay > #ajaxProgress-spinner {
    width: 144px;
    height: 128px;
    float: left;
    background: #ffffff;
    opacity: .9;
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);

    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9995;
}

.xpage-overlay > #ajaxProgress-spinner > #ajaxProgress-spinner-text {
    /* Center the text */
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
}

/*endregion*/


/*region  NAV  ********************************************************************************************************/

.x-nav {
    min-height: 0;
}

#myGroupsText {
    padding-top: 5px;
    padding-bottom: 5px;
}

.x-nav .navbar-nav > li,
.x-nav {
    margin: 0;
}

.x-nav span.navbar-brand,
.x-nav span.navbar-brand:not(:disabled):not(.disabled):hover {
    font-size: 14px;
    height: auto;
}

.primary-nav .navbar-brand {
    padding: 0;
}

/*endregion*/


/*region  SECONDARY NAV  **********************************************************************************************/

#execContentTitleHolder {
    width: 100%;
}

.project-nav .xacta-nav-back {
    background-image: url(../images/xacta-nav-btn-left-white-trans.png);
}

.project-nav .xacta-nav-fwd {
    background-image: url(../images/xacta-nav-btn-right-white-trans.png);
}

.project-nav .xacta-nav-btn-left:not(:disabled):not(.disabled):hover .xacta-nav-back {
    background-image: url(../images/xacta-nav-btn-left-white-trans-hover.png);
}

.project-nav .xacta-nav-btn-right:not(:disabled):not(.disabled):hover .xacta-nav-fwd {
    background-image: url(../images/xacta-nav-btn-right-white-trans-hover.png);
}

.project-nav .xacta-nav-icon-history {
    background-image: url(../images/iconHistoryWhite.png);
    height: 28px;
    width: 28px;
    margin-top: 0 !important;
}

.project-nav .xacta-nav-btns-container div.dropdown[data-res-name="navHistoryMenu"] { /* .xacta-nav-btns-container .dropdown Overrides*/
    border-right-color: var(--app--chrome-secondary-nav-border);
}

.project-nav .navHistoryMenu.dropdown-toggle::after {
    border-top-color: #fff;
}

.project-nav a[automation-selector="action refresh"] {
    border-right-color: var(--app--chrome-secondary-nav-border);
}

.project-nav a,
#project-navbar a {
    transition: var(--navbar-hover-transition);
}

#project-navbar a:not(.dropdown-item):not(:disabled):not(.disabled):hover {
    filter: var(--navbar-hover-filter);
}

.project-nav a,
.project-nav a:visited { /* Bootstrap Overrides */
    color: var(--app--chrome-secondary-nav-hyperlink);
}

.project-nav span.navbar-brand,
.project-nav span.navbar-brand:not(:disabled):not(.disabled):hover { /* 5.0 Project name */
    color: #000000;
}

.project-nav .navbar-brand { /* bootstrap v4.6.2 adjustments */
    margin-left: -15px;
}

.project-nav {
    background: var(--app--chrome-secondary-nav-dark-blue);
}

.project-nav .navbar-nav > li > a,
.project-nav .navbar-nav > li > a.dropdown-toggle > span:nth-child(2) { /* project nav links */
    color: #fff;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    line-height: 18px;
    padding-left: 0.5rem; /* boostrap v4.6.2 adjustments */
    padding-right: 0.5rem; /* boostrap v4.6.2 adjustments */
    display: block; /* boostrap v4.6.2 adjustments */
    background-color: transparent; /* boostrap v4.6.2 adjustments */
}

.project-nav .navbar-nav > li > a.dropdown-toggle > span:nth-child(2) { /* Bootstrap Overrides */
    padding-left: 0;
    padding-right: 5px;
}

.project-nav .navbar-nav > li > a:hover  { /* Bootstrap Overrides */
    background-color: transparent;
}

.project-nav .navbar-nav > li > a.dropdown-toggle::after { /* Bootstrap Overrides */
    margin-left: 0;
    vertical-align: sub;
    border-top: 4px solid #fff;
    border-right: 4px solid transparent;
    border-bottom: 0;
    border-left: 4px solid transparent;
}

.project-nav .dropdown-menu > li > a:focus, .secondary-nav .dropdown-menu > li > a:hover { /* Secondary nav menu links */
    background-color: #4280cb;
    color: #ffffff;
    text-decoration: none;
}

.project-nav .navbar-toggle {
    margin-bottom: 4px;
    margin-top: 4px;
    padding: 4px 5px;
}

.folder-nav {
    padding-top: 5px;
    padding-bottom: 5px;
}

.folder-nav > .container-fluid, .folder-nav > .navbar-collapse {
    padding-left: 15px !important; /* align project menu */
}

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-project-name {
    max-width: 500px;
}

.project-name-tracking-no {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    /*
    height: 50px;
    */
}

.project-name-tracking-no ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;

    flex-direction: column;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.project-name-tracking-no li {
    white-space: nowrap;
}

.project-name-tracking-no li span {
    padding: 0;
}

.project-nav span.navbar-brand.folder-project-name.truncate-text,
.project-nav span.navbar-brand.folder-project-name.truncate-text:not(:disabled):not(.disabled):hover {
    color: var(--app--chrome-secondary-nav-hyperlink);
}

.project-nav span.navbar-brand.folder-project-name.truncate-text:not(:disabled):not(.disabled):hover {
    text-decoration: underline;
}

.project-name-tracking-no li.trackingNumber span {
    margin-left: 60px;
}

.navbar-white{
    background: white !important;
}

/*endregion*/


/*region  PRIMARY NAV  ************************************************************************************************/

#main-layout-north { /* jQuery UI Layout Fix */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

#main-layout-north > .navbar > .container-fluid { /* Bootstrap Override*/
    padding-right: 35px;
}

#contentTop {

}

#main-layout-north { /* jQuery UI Layout Fix */
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

#contentTop {

}

.megamenu-column {
    /* so that separators extend the full width of the menu */
    padding-left: 0;
    padding-right: 0;
    /* so that columns appear next to each other*/
    float: left;
}

.megamenu-column > li > a { /* styles taken from bootstrap to make megamenus look similar to regular menus */
    clear: both;
    color: #333;
    display: block;
    padding: 3px 20px;
    white-space: nowrap;
}

.megamenu-column > li > a:hover,
.megamenu-column > li > a:focus {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

.megamenu-column > .disabled > a,
.megamenu-column > .disabled > a:focus,
.megamenu-column > .disabled > a:hover {
    color: #777;
}

.megamenu-column > .disabled > a:hover,
.megamenu-column > .disabled > a:focus {
    text-decoration: none;
    cursor: default;
    background-color: transparent;
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.megamenu-column > .menu-subheading > a,
.megamenu-column > .menu-subheading > a:focus,
.megamenu-column > .menu-subheading > a:hover {
    font-size: 16px;
    color: #337ab7;
}

.megamenu-column > .menu-subheading:not(:first-child) {
    padding-top: 20px;
}

.dropdown-menu > .menu-subheading-item > a {
    padding-left: 30px;
}

.primnav-icon {
    background-image: url(../images/iconsAENG_primnav.png);
    height: 18px;
    width: 18px;
    margin-top: 1px;
}

.primnav-admin { /* wrench */
    background-position: -54px 0;
}

.primnav-approvals { /* circular checkmark */
    background-position: -90px -18px;
}

.primnav-content { /* db */
    background-position: -36px 0;
}

.hide-help-menu-caption { /* XIAM-13942 Meaningful Sequence*/
    display: none;
}

.primnav-projects { /* proj doc */
    background-position: 0 0;
}

.primnav-registration { /* project registration icon*/
    background-position: -72px 0;
}

.primnav-reports { /* chart */
    background-position: -18px 0;
}

.primnav-user-acct { /* user */
    background-position: -90px 0;
}

.primnav-dashboard, .primnav-xacta-io {
    background-position: -36px -18px;
}

.primary-nav {
    background-color: var(--app-chrome-dark-blue);
    height: 44px;
    border: 0;
    border-radius: 0;
}

.navbar { /* Bootstrap Override & jQuery UI Layout Fix */
    display: inline-flex;
    padding: 0;
    width: 100%;
}

.navbar-dark.primary-nav ul.nav > li > a,
.navbar-dark.primary-nav ul.nav > li > a:hover,
.navbar-dark.primary-nav ul.nav > li > a:focus { /* bootstrap 4.6 navbar-default to navbar-dark */
    color: #ffffff;
    background-color: transparent;
}

.primary-nav .navbar-nav {
    padding-top: 5px;
}

.primary-nav-360 {
    background-color: var(--app-chrome-dark-blue);
    padding-bottom: 24px;
    border: 0;
    border-radius: 0;
}

#primary-navbar {
    padding-left: 70px;
}

#main-layout-center nav.navbar > .container-fluid { /* Bootstrap Override */
    padding-left: 35px;
    padding-right: 35px;
}

.navbar-dark.primary-nav-360 ul.nav > li > a,
.navbar-dark.primary-nav-360 ul.nav > li > a:hover,
.navbar-dark.primary-nav-360 ul.nav > li > a:focus,
#normal-menu-search > div > a > span,
#myGroups {
    color: #ffffff;
    background-color: transparent;
    font-size: 14px;
    line-height: 19px;
}

#primary-navbar-left {
    flex-shrink: 1;
    gap: 10px 25px;
    padding-right: 25px;
}

#primary-navbar > div.navbar-right {
    display: flex;
    flex-grow: 2;
}

#primary-navbar > div.navbar-right > ul {
    display: flex;
    justify-content: flex-end;
    gap: 10px 20px;
    width: 100%;
}

#primary-navbar > div.navbar-right > ul > li.hidden-search-control {
    width: 100%;
}

#primary-navbar > ul.navbar-nav > li > a.dropdown-item,
#primary-navbar > ul.navbar-nav > li > a.nav-link,
#normal-menu > li.dropdown.nav-item > a.nav-link { /* Bootstrap Overrides */
    padding-left: 0;
    padding-right: 0;
}

#primary-navbar > ul.navbar-nav > li > a.dropdown-item,
#primary-navbar > ul.navbar-nav > li > a.nav-link,
#normal-menu > li.dropdown.nav-item > a.nav-link,
#primary-navbar a.nav-search-bar span { /* Bootstrap Overrides */
    transition: color 300ms ease-in-out;
}

/*noinspection CssNonIntegerLengthInPixels*/
#primary-navbar > ul.navbar-nav > li > a.dropdown-item,
#primary-navbar > ul.navbar-nav > li > a.nav-link,
#primary-navbar . div.navbar-right > ul.navbar-nav > li > a.dropdown-item,
#primary-navbar . div.navbar-right > ul.navbar-nav > li > a.nav-link { /* Bootstrap Overrides */
    padding-top: 12.5px;
    padding-bottom: 12.5px;
}

#primary-navbar > ul.navbar-nav > li > a.dropdown-item:hover,
#primary-navbar > ul.navbar-nav > li > a.nav-link:hover,
#normal-menu > li.dropdown.nav-item > a.nav-link:hover,
#normal-menu-search > div > a:hover > span { /* Bootstrap Overrides */
    color: var(--app-chrome-primary-nav-light-blue);
}

.dropdown-toggle::after { /* Bootstrap Override */
    margin-left: 7px;
}

#primary-navbar > div.navbar-right > ul > li.nav-item > a > span.icon-right-margin {
    margin-right: 0;
}

#primary-navbar > div.navbar-right > ul > li.nav-item > a.dropdown-toggle::after { /* Bootstrap Override */
    margin-left: 3px;
}

#myGroups {
    white-space: nowrap;
    align-self: center;
}

#myGroupsIcon {
    margin-right: 9px;
}

#myGroupsText {
    color: white;
    white-space: nowrap;
}

#myGroupsSelect {
    margin: 0 0 0 10px;
    padding: 6px 0 6px 12px;
}

.navbar-brand-360 {
    float: left;
    height: auto;
    padding: 0;
    font-size: 18px;
    line-height: 20px;
    margin-left: -20px;
}

.unhideMenus {
    z-index: 20 !important; /* When a menu from one layout pane has to extend into another layout pane this is necessary so the menu is in front of the other layout pane */
}

.unhideFilterMenu {
    z-index: 10 !important;
}

.prjSearchContainer > a,
.x-nav .navbar-nav > li > a {
    height: 32px;
    display: flex;
    flex-direction: row;
    row-gap: 12px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#project-and-burger {
    display: flex;
}

@media (max-width: 1200px) {

    #branding-and-burger {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    #project-and-burger {
        display: inline-flex;
        flex-grow: 1;
        justify-content: space-between;
    }


    #branding-and-burger > button.navbar-toggler,
    #project-and-burger > button.navbar-toggler,
    .project-nav button.navbar-toggler {
        animation: hamburger-float-from-left 1s cubic-bezier(.17, .67, .35, 1.19);
        height: 46px;
        width: 46px;
    }

    #primary-navbar {
        padding-top: 24px;
        padding-left: 35px;
        padding-right: 35px;
    }

    #primary-navbar > div.navbar-right {
        margin-top: 20px;
    }

    #primary-navbar-left {
        padding-right: 0;
    }

    #myGroups {
        align-self: flex-start;
    }

    .navbar-nav {
        align-content: flex-start;
        align-items: flex-start;
    }

    .x-nav .navbar-nav > li > a {
        justify-content: flex-start;
        align-content: flex-start;
        align-items: center;
    }

    #contentTitleId,
    .secondary-nav
    {
        height: unset;
    }

    .secondary-nav > .container-fluid {
        display: flex;
        flex-wrap: nowrap;
        padding-left: 15px;
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .secondary-nav > .container-fluid > .navbar-header {
        display: inline-flex;
    }


    #project-navbar .progress {
        width: 50%;
        float: none !important;
        margin-left: 15px;
    }
}

@media (min-width: 1200px) {  /* Bootstrap Overrides specific to min-width: 1200px */

    .navbar-expand-xl .navbar-collapse { /* Bootstrap Overrides */
        justify-content: space-between;
    }

}

@media (min-width: 1999px) {
    #primary-navbar {
        justify-content: space-between;
    }

    #primary-navbar > ul.nav.navbar-nav > li.dropdown.nav-item > ul,
    #normal-menu > li.dropdown.nav-item > ul
    {
        margin-top: -24px;
    }

}

/*endregion*/


/*region  PROJECT NAV  ************************************************************************************************/

.project-nav {
    width: 100%;
}

#project-navbar > ul {
    padding: 0 10px;
}

/*endregion*/


/*region  5.0 SECTION 508  ********************************************************************************************/

.section508SkipNav { /* Div that holds skip repetitive navigation links. In IE, use ALT + accesskey number to activate */
    position: absolute;
    top: 0;
    left: -1000px; /* Hide skip navigation links from non-disabled users */
}

/*endregion*/


/*region  5.0 ANIMATIONS  *********************************************************************************************/

.animated {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

@-webkit-keyframes fadeIn { /* help balloons */
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    animation-name: fadeInLeft;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

.shake { /* login error msg */
    animation-name: shake;
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    60% {
        opacity: 1;
        transform: translateY(10px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

.animate-bounce-in {
    animation: bounce-in 1.2s infinite;
}

@keyframes bounce-in {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.2, 1.2, 1.2);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

.animate-spin {
    animation: spin 5s ease-in-out infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

.animate-hamburger-float-from-left {
    animation: hamburger-float-from-left 1s ease-in-out ;
}

@keyframes hamburger-float-from-left {
    from {
        transform: translateX(-200px) rotate(-90deg);
        opacity: 0;
    }
    to {
        transform: translateX(0) rotate(0deg);
        opacity: 100%;
    }
}

.animate-flash {
    animation-name: flash;
}

@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

/*endregion*/


/*region  BOOTSTRAP TOUR  *********************************************************************************************/

.popover-title { /* override Bootstrap Tour tip formatting */
    background-color: #2d3c4d;
    color: white;
}

.tour-step-background {
    background: transparent;
    border: 2px solid blue;
}

.tour-backdrop {
    opacity: 0;
}

/*endregion*/


/*region  MARKING DIALOG  *********************************************************************************************/

.xselect-markings-row {
    margin-left: 5px;
}

.xselect-markings-table div.xform {
    padding-top: 2px;
}

.xselect-markings-table div.xform-group {
    margin-bottom: 2px;
}

.xselect-markings-table div.xform-caption {
    width: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.xselect-markings-table div.xform-controls {

}

/*endregion*/


/*region  ABOUT PAGE  *************************************************************************************************/

.xabout {
    display: flex;
}

.xabout .xabout-logo {
    width: 100px;
    height: 100%;
    position: fixed;
}

.xabout .xabout-content {
    margin-left: 110px;
}

.xabout .xabout-content > .row { /* Bootstrap Overrides */
    display: block;
    margin-left: unset;
    margin-right: unset;
}

.xabout .xabout-content-title {
    text-align: center;
}

/*endregion*/


/*region  BUTTONS AGAIN  **********************************************************************************************/

.btn,
input::file-selector-button { /* Bootstrap Overrides */
    white-space: nowrap;
    font-size: 14px;
    font-weight: var(--font-weight-500-medium);
    line-height: 12px;
    padding: 8px 12px;
    row-gap: 5px;
    height: 34px;
}

input::file-selector-button { /* Making this consistent with Bootstrap Buttons */
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn,
input.disabled::file-selector-button { /* Override Bootstrap to remove disabling of pointer-events: https://github.com/twbs/bootstrap/issues/8847 */
    pointer-events: auto; /* Allow pointer events so tooltip can show up (triggered by hover event) */
    cursor: default; /* Removed 'not-allowed' cursor style as it was overlapping with tooltip */
}

.xtable > tbody > tr > td .btn,
.xtable > tbody > tr > td .btn:not(:disabled):not(.disabled):hover,
.btn.btn-borderless, .btn.btn-borderless:not(:disabled):not(.disabled):hover { /* Targets Bootstrap buttons in xtable columns */
    border: 0; /* Removes borders */
    background: none;
}

.btn-primary { /* Override btn-light appearance bootstrap v4.6.2 to appear as v3 btn-default */
    color: #fff;
    background-color: #296FB5;
    transition: color .15s ease-in-out,
    background-color .15s ease-in-out,
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
}

.btn-primary.active:not(:disabled):not(.disabled),
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover,
.show>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #184068;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #767676;
    background-color: #DADDDE;
    border-color: #DADDDE;
}

.btn-light,
input::file-selector-button {
    color: #333;
    background-color: #fff;
    border: solid 1px #C5CBD7;
}

.btn-hyperlink {
    color: #147BB1 !important;
}

.btn-light.active:not(:disabled):not(.disabled),
.btn-light.focus,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:focus,
.btn-light:not(:disabled):not(.disabled):hover,
.show > .dropdown-toggle.btn-light,
input.active:not(:disabled):not(.disabled)::file-selector-button,
input.focus::file-selector-button,
input:not(:disabled):not(.disabled):active::file-selector-button,
input:focus::file-selector-button,
input:not(:disabled):not(.disabled):hover::file-selector-button {
    color: var(--forms-button-caption);
    border-color: var(--forms-box-stroke);
    background-color: var(--forms-hover);
}

.btn-light.disabled,
.btn-light:disabled,
input.disabled::file-selector-button,
input:disabled::file-selector-button {
    color: var(--disabled);
    border-color: var(--forms-box-stroke-disabled);
    background-color: var(--forms-button-bg);
}

.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"],
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"] {
    padding: unset;
}

#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button:not(:disabled):not(.disabled):hover,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button:not(:disabled):not(.disabled):active,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button.active:not(:disabled):not(.disabled),
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"],
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"]:not(:disabled):not(.disabled):hover,
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"]:not(:disabled):not(.disabled):active,
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"].active:not(:disabled):not(.disabled),
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"],
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"]:not(:disabled):not(.disabled):hover,
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"]:not(:disabled):not(.disabled):active,
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"].active:not(:disabled):not(.disabled),
.navHistoryMenu,
.navHistoryMenu:not(:disabled):not(.disabled):hover,
.navHistoryMenu:not(:disabled):not(.disabled):active {
    background-color: transparent;
    border-color: transparent;
}

#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button,
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"],
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"],
.navHistoryMenu,
.xacta-nav-btns-container > a[automation-selector*="refresh"] > span {
    transition: var(--navbar-hover-transition);
}

#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button:not(:disabled):not(.disabled):hover,
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"]:not(:disabled):not(.disabled):hover,
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"]:not(:disabled):not(.disabled):hover,
.navHistoryMenu:not(:disabled):not(.disabled):hover,
.xacta-nav-btns-container > a[automation-selector*="refresh"]:not(:disabled):not(.disabled):hover > img {
    filter: var(--navbar-hover-filter);
}

.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"],
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"]:disabled,
.xacta-nav-btns-container > button[automation-selector*="navToolBarBack"].disabled,
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"],
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"]:disabled,
.xacta-nav-btns-container > button[automation-selector*="navToolBarForward"].disabled,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button:disabled,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button.disabled,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button:focus,
#contentTitleId > .contentTitle-left > .xacta-nav-btns-container > button.focus,
.navHistoryMenu:disabled,
.navHistoryMenu.disabled,
.navHistoryMenu:focus,
.navHistoryMenu.focus {
    background-color: transparent;
}

.btn.iconOnly { /* Bootstrap Override */
    padding: 8px 8px;
}

.btn-group-xs > .btn, .btn-xs { /* btn-xs no longer existing in bootstrap v4.6.2 */
    padding: 1px 5px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 3px;
}

button.pstep-prev::before {
    content: '';
    display: inline-block;
    max-width: 0;
    max-height: 0;
    margin-left: 5px;
    margin-right: 0;
    border-top: 4px solid transparent;
    border-right: 4px solid var(--app-chrome-primary-blue);
    border-bottom: 4px solid transparent;
    border-left: 0;
}

button.pstep-primary-btn::after {
    content: '';
    display: inline-block;
    max-width: 0;
    max-height: 0;
    margin-left: 5px;
    border-top: 4px solid transparent;
    border-right: 0;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #fff;
}

/*endregion*/


/*region  TOOLTIPS AND POPOVERS  **************************************************************************************/

.popover {
    z-index: 9999; /* Overrides default (1060) by bootstrap 4.6 to address popover z-index issue in dialogs */
    font-size: var(--webca-font-size);
    color: var(--normal);
}

.popover-body {
    padding: 8px 10px;
}

.bs-popover-auto[x-placement^=top]>.arrow,
.bs-popover-top>.arrow {
    bottom: -6px;
}

.bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before {
    border-top-color: var(--bootstrap-tooltip-stroke-color);
    bottom: -0.5px;
}

.bs-popover-auto[x-placement^=bottom]>.arrow,
.bs-popover-bottom>.arrow {
    bottom: 6px;
}

.bs-popover-auto[x-placement^=bottom]>.arrow::before,
.bs-popover-bottom>.arrow::before {
    border-bottom-color: var(--bootstrap-tooltip-stroke-color);
}

.bs-popover-auto[x-placement^=bottom]>.arrow::after,
.bs-popover-bottom>.arrow::after {
    /*noinspection CssNonIntegerLengthInPixels*/
    top: 1.5px;
}

.bs-popover-auto[x-placement^=left]>.arrow::before,
.bs-popover-left>.arrow::before {
    border-left-color: var(--bootstrap-tooltip-stroke-color);
}

.bs-popover-auto[x-placement^=left]>.arrow::after,
.bs-popover-left>.arrow::after {
    /*noinspection CssNonIntegerLengthInPixels*/
    right: 1.5px;
}

.bs-popover-auto[x-placement^=right]>.arrow::before,
.bs-popover-right>.arrow::before {
    border-right-color: var(--bootstrap-tooltip-stroke-color)   ;
}

/*noinspection ALL*/
.bs-popover-auto[x-placement^=right]>.arrow::after,
.bs-popover-right>.arrow::after {
    left: 1.5px;
}


.x-popover {
    max-width: 400px;
    border: 1px solid var(--bootstrap-tooltip-stroke-color);
}

.x-popover .popover-title {
    background-color: #e2e2e2;
    color: black;
}

.x-popover.top .arrow {
    border-top-color: rgba(0, 0, 0, .4);
}

.x-popover.bottom .arrow {
    border-bottom-color: rgba(0, 0, 0, .4);
}

.x-popover.left .arrow {
    border-left-color: rgba(0, 0, 0, .4);
}

.x-popover.right .arrow {
    border-right-color: rgba(0, 0, 0, .4);
}

.x-custom-field-hover-tip .popover-content {
    padding: 14px 20px;
}

.list-group-item.disabled.tooltip-overwrite, .list-group-item:disabled.tooltip-overwrite {
    pointer-events: initial;
}

/*endregion*/


/*region  SECURITY MARKING  *******************************************************************************************/

.xsecurity-marking-header {
    margin-top: 16px;
    margin-left: 2px;
}

.xsecurity-marking-header span {
    margin-right: 24px;
}

.xsecurity-marking {

}

.xsecurity-marking .marking-preview {
    margin: 0 0 0 16px;
}

.xsecurity-marking .marking-preview .marking-preview-chip {
    margin: 0 0 0 -4px !important;
    padding: 0 !important;
    border: none;
    position: relative;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    font-size: medium;
    background: transparent;
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
}

.xsecurity-marking .marking-preview .marking-preview-chip:not(:disabled):not(.disabled):hover {
    border-bottom: 2px solid #666666;
    border-radius: 0;
    background: transparent;
}

.xsecurity-marking .marking-preview .marking-preview-chip:not(:disabled):not(.disabled):hover span.xacta-icon {
    display: inline-block;
}

.xsecurity-marking .marking-preview .marking-preview-chip span.xacta-icon {
    display: none;
}

.xsecurity-marking .marking-preview .marking-preview-chip.sub-compartment {
    padding-left: 6px !important;
}

.xsecurity-marking .marking-preview .marking-preview-chip span.xacta-icon:after {
    clear: both;
}

.xsecurity-marking .marking-category {
    margin-top: 16px;
}

.xsecurity-marking .marking-category .marking-category-hint {
    color: darkgray;
    font-size: smaller;
}

.xsecurity-marking .marking-category .marking-category-add {
    float: right;
}

.xsecurity-marking .marking-category .marking-category-add:after {
    clear: both;
}

.videoContainer .responsibleRoleControlList .list-group-item {
    border: 0 solid #ddd;
    display: list-item;
    margin: 0;
    padding: 10px 15px;
    position: relative;
}

.videoContainer .responsibleRoleControlList .list-group-item:first-child, .list-group-item:last-child { /* bootstrap override radius */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.videoContainer .responsibleRoleControlList .list-group-item:not(:disabled):not(.disabled):hover {
    background-color: #f1f3fd;
}

.videoContainer .responsibleRoleControlList li {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

/* CBT Video Currently Playing Link */
.cbt-video-selected {
    list-style-type: none;
}

.showPlayIcon:before {
    background: url(../images/iconPlay.png) no-repeat scroll;
    content: " ";
    display: block;
    height: 20px;
    width: 20px;
    padding-right: 30px;
    margin-top: 3px;
}

.cbt-video-not-selected {
    padding-right: 30px
}

.responsibleRoleControlList .list-group-item { /* responsible role control list */
    border: 0 solid #ddd;
    display: list-item;
    margin: 0;
    padding: 10px 15px;
    position: relative;
}

.responsibleRoleControlList .list-group-item:first-child, .list-group-item:last-child { /* bootstrap override radius */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.responsibleRoleControlList .list-group-item:not(:disabled):not(.disabled):hover {
    background-color: #f1f3fd;
}

.responsibleRoleControlList li {
    position: relative;
    padding-bottom: 5px;
    padding-left: 5px;
}

#toast-container > div { /* override toastr.min.css floating message opacity so it's more readable when displayed over certain elements in the app */
    opacity: 1; /* toastr default is 0.8 which is a bit too transparent */
}

.toastr-main-msg {
    top: 67px;
    right: 5px;
}

.toastr-dialog-msg {
    top: 60px;
    right: 15px;
}

.toastr-dialog-msg-w-marking {
    top: 85px;
}

.approvers-indent-list > li { /* provide indentation for My Assignments Approvers column unordered list when lines wrap*/
    text-indent: -15px;
    padding-left: 15px;
}

.approvers-indent-list > li * {
    text-indent: 0;
}

.approvers-indent-list > li span:not(.badge) {
    vertical-align: middle;
}

.disabled-taskList-pstep {
    color: #777;
    cursor: not-allowed;
}

/*endregion*/


/*region  BADGE COLORS FOR BOOTSTRAP BADGES ***************************************************************************/
/*        Use like this: <span class="badge badge-primary">5</span>                                                   */

.badge {
    line-height: 15px;
    padding: 2px 10px 2px 10px;
    font-size: 10px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
}

.badge > a {
    color: #fff;
}

.badge-gray {
    background-color: #777;
}

.badge-primary { /* dark blue */
    background-color: #337ab7;
}

.badge-security-level-H {
    background-color: #FF6A61;
    color: #FFFFFF;
}

.badge-security-level-M {
    background-color: #F5CC3A;
    color: #FFFFFF;
}

.badge-security-level-L {
    background-color: #5ED95B;
    color: #FFFFFF;
}

.badge-success { /* green */
    background-color: #5DB95D;
    color: #FFFFFF;
}

.badge-mitigated { /* variant, darker green */
    background-color: #376E37;
    color: #FFFFFF;
}

.badge-remediated { /* XACTA-14589 */
    background-color: #407BB9;
    color: #FFFFFF;
}

.badge-info { /* light blue/cyan */
    background-color: #5bc0de;
}

.badge-accepted { /* v2.0 changes orange shade */
    background-color: #F89406;
    color: #FFFFFF;
}

.badge-warning { /* orange */
    background-color: #f0ad4e;
    color: #FFFFFF;
}

.badge-danger { /* dark red */
    background-color: #d9534f;
    color: #FFFFFF;
}

.badge-alternate { /* v2.0 changes red shade */
    background-color: #EA3C3C;
    color: #FFFFFF;
}

.badge-submitted {
    background-color: #4B9ED3;
    color: #FFFFFF;
}

.badge-inprogress {
    background-color: #5BC0DE;
    color:#FFFFFF;
    opacity: 1.0 !important;
}

.badge-ignoreDisabledOpacity {
    opacity: 1.0 !important;
}

.badge-default {
    background-color: #777;
}

.badge-deferred {
    background-color: #d9d9d9;
}

.badge-not-applicable {
    background-color: #f2f2f2;
}

.badge-unused {
    background-color: #d9d9d9;
    color: #777777;
}

.badge-black-white {
    background-color: #111111;
    color: #ffffff;
}

.badge-third {
    width: 25%;
    padding-left: unset;
    padding-right: unset;
}

.badge-whole {
    width: 100%;
}

.badge-75{
    width: 75%;
}

.badge-left {
    border-radius:.25em 0 0 .25em;
    margin-right:0;
}

.badge-mid {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    padding-right:0;
    padding-left:0;
}

.badge-right {
    border-radius: 0 .25em .25em 0;
    margin-left: 0;
}

.label-textonly {
    color: #000000
}

.text-success { /* green */
    color: #5cb85c;
}

.text-warning { /* orange */
    color: #f0ad4e;
}

.text-danger { /* dark red */
    color: #d9534f;
}

/*endregion*/


/*region  CONTROL INHERITANCE PSTEP ***********************************************************************************/

.controlInheritanceSummary {
    background-color: #f3f3f3;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.controlInheritanceCurrentRemoteRequests,
.controlInheritanceWarning {
    color: green;
    font-weight: var(--font-weight-700-bold);
}

.controlInheritanceStatuses > label {
    margin: 0 5px 0 3px;
}

.controlInheritanceStatuses > label.badge {
    margin: 0 5px;
}

/*endregion*/


/*region  AWS CONNECTION SETUP PAGE ***********************************************************************************/

.aws-connection-status-connected, .aws-connection-status-not-setup, .aws-connection-status-cant-connect, .aws-connection-status-error-details {
    margin: 16px 0;
    padding: 6px;
    font-size: larger;
    color: white;
    display: inline-block;
}

.aws-connection-status-connected, .aws-connection-status-not-setup, .aws-connection-status-cant-connect, .aws-connection-status-error-details, .aws-connection-step-data {
    width: 800px;
}

.aws-connection-status-connected { /* green background */
    background-color: #5cb85c;
}

.aws-connection-status-not-setup { /* light blue info background */
    background-color: #5bc0de;
}

.aws-connection-status-cant-connect { /* red background */
    background-color: #d9534f;
}

.aws-connection-status-cant-connect p { /* red background */
    font-size: smaller;
}

.xacta-icon-aws { /* override xacta-icon line height and vert align for AWS status div icons */
    line-height: initial;
    vertical-align: initial;
}

.aws-connection-step {
    margin-bottom: 16px;
}

.aws-connection-step-title {
    margin-top: 16px;
    font-size: larger;
}

.aws-connection-step-hint {
    margin-top: 10px;
    margin-bottom: 12px;
    color: darkgray;
}

.aws-connection-step-data {
    margin-top: 20px;
    background-color: #f5f5f5;
}

.aws-connection-textarea {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: smaller;
}

.aws-last-scan-date-container {
    position: relative;
    top: 60%;
    transform: translateY(-60%);
}

.aws-last-scan-date-label {
    padding-left: 0;
    font-size: 14px;
    color: #7f7f7f;
}

.aws-last-scan-date-value {
    padding-left: 5px;
    font-size: 14px;
    color: #7f7f7f;
}

/*endregion*/


/*region  AZURE INSTRUCTIONS PAGE  ************************************************************************************/

.azure-connection-step {
    margin-bottom: 16px;
}

.azure-connection-step-data {
    margin-top: 20px;
    background-color: #f5f5f5;
}

.azure-connection-step-title {
    margin-top: 16px;
    font-size: medium;
}

.azure-connection-step-hint {
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: small;
}

.azure-connection-line {
    height: 2px;
    background-color: #cccccc;
}

/*endregion*/


/*region  UNTITLED  ***************************************************************************************************/

.controlRequestStatus {
    list-style-type: none;
    padding-left: 0
}

.controlRequestStatus span:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.controlRequestStatus span:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.controlRequestStatus span:nth-child(2) {
    border-radius: 0;
}

.label-resourceRole { /* yellow label with dark text, use with Bootstrap .label class. Example class ="label label-resourceRole" */
    background-color: #fcf6ad;
    border: #ffd83b;
    color: #000000;
}

.label-redText {
    color: #ff0000;
}

.cihistory {
    height: 40px;
    vertical-align: middle;
    display: table-cell;
    padding: 10px;
}

.cihistory-pending {
    background-color: white;
    border: 1px solid #dddddd;
    color: #008ae0;
}

.cihistory-approved {
    background-color: white;
    border: 1px solid #dddddd;
    color: #4fa94f;
}

.cihistory-rejected {
    Background-color: #ffe8e8
}

.cihistory-label {
    padding-left: 15px;
}

.cihistory-date {
    float: right;
}

.label-unused {
    background-color: #d9d9d9;
    color: #777777;
}

.label-blackwhite {
    background-color: #111111;
    color: #ffffff;
}

.label-primary > a { /* fixing the font color of control inher approval boxes. */
    color: #ffffff;
}

.label-success > a {
    color: #ffffff;
}

.label-danger > a {
    color: #ffffff;
}

.label-unused > a {
    color: #ffffff;
}

.label-fullwidth {
    display: inline-block;
    width: 100%;
}

.label-consistentWithparaLabel {
    display: inline-block;
    width: 100%;
    padding-top: 4px;
    padding-bottom: 5px;
}

.decoratedcaption-label { /* decorated element history menu caption*/
    font-size: 10px;
    color: #AEAEAE;
    white-space: pre;
}

div#ersPushDate {
    float: left;
}

div#ersStatusSelect {
    position: absolute;
    top: 300px;
}

div#ersTreeInput {
    padding-left: 20px;
    overflow: hidden;
}

.ers-wizard-div hr {
    padding: 2px 0 2px 0;
    margin: 0;
}

.ers-wizard-div h6 {
}

.ers-wizard-text {
    font-size: 11px;
}

.ers-wizard-input {
    padding: 2px 4px 5px 0;
}

.ers-summary td {
    padding: 10px;
    vertical-align: top;
}

.ers-details-wrapper {
    overflow: hidden;
    display: block;
}

.ers-details-wrapper .child-left {
    float: left;
}

.ers-details-wrapper .child-right {
    position: absolute;
    left: 50%;
    overflow: hidden;
}

.ers-details-wrapper .ers-scroll-box-left {
    float: left;
    height: 150px;
    overflow: auto;
}

.ers-details-wrapper .ers-scroll-box-right {
    position: absolute;
    left: 50%;
    height: 150px;
    overflow: auto;
}

.ers-text-green {
    color: #00B050;
}

.ers-text-red {
    color: red;
}

.bg-orange {
    background-color: #fbb95f;
}

.bg-saturated-orange {
    background-color: #F8E5CE;
}

ul.no-bullets-list {
    list-style-type: none;
    padding: 0;
}

.inboxMessages { /* small red badge after user name */
    background-color: #ff0000;
    font-size: 10px;
    margin-left: 5px;
}

.badge-inboxMessage { /* Inbox notifications*/
    margin-top: 8px;
}

.xacta-inbox { /* Inbox notifications*/
    display: inline-block;
    height: 16px;
    line-height: 14px;
    vertical-align: text-top;
    width: 16px;
}

.badge-inbox { /* Inbox notifications*/
    display: inline;
    min-width: 10px;
    padding: 0 7px 3px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: 5px;
    border-radius: 10px;
    margin-left: -10px;
    background-color: #b94a48;
    font-size: 10px;
    z-index: -1;
}

.badge-inbox > a { /* Inbox notifications-changes link text to white*/
    color: #ffffff;
}

.badge-inbox-child {
    overflow: hidden;
    position: relative;
    margin-top: -5px;
    margin-right: -12px
}

.badge-padding { /* For use for padding left and right sides of a badge pill rather than relying on &nbsp;.*/
    padding-left: 20px;
    padding-right: 20px;
}

.manual-refresh-button {
    padding-right: 0;
    padding-left: 12px;
}

.label-auto-updated {
    padding: 6px;
    margin-right: 20px;
}

.label-auto-updated-enabled {
    background-color: #5cb85c;
}

.label-auto-updated-disabled {
    background-color: #dddddd;
    color: #7f7f7f;
}

.saas-usage-text {
    display: block;
}

.saas-usage-text .text-font-bold {
    font-weight: bold;
}

.saas-usage-text .text-left {
    float: left;
}

.saas-usage-text .text-right {
    float: right;
}

.clear-floats {
    clear: both;
}

.saas-table-subtext {
    font-size: 12px;
    color: #a6a6a6;
}

.saas-title-text {
    font-size: 20px;
    font-weight: bolder;
}

.saas-title-subtext {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
    color: #a6a6a6;
}

.saas-tier-title {
    padding-top: 30px;
    font-size: 20px;
    padding-bottom: 5px;
}

.current-tier-title {
    color: #5cb85c;
}

.saas-tier-text {
    font-size: 16px;
    padding-bottom: 5px;
}

#saasContainer {
    display: inline;
}

#saasUsageLeft {
    width: 50%;
    float: left;
}

#saasUsageRight {
    float: left;
    padding-left: 100px;
    overflow: hidden;
}

.cont-bndry-info-table td {
    border-spacing: 10px;
    padding: 5px 10px;
}

.tracking-num-edit-table td {
    border: none;
    padding: 20px 5px 30px;
}

.cont-bndry-edit-opt-outer-table td {
    padding: 0 0 0 80px;
}

.cont-bndry-edit-opt-table td {
    padding: 0 5px;
}

.tracking-num-edit-msg-grayText {
    color: #a6a6a6;
}

.req-edit-top-pad {
    padding-top: 5px;
}

.req-edit-right-pad {
    float: left;
    padding-right: 25px;
}

.display-table {
    display: table;
}


.registration-status-block {
    border: solid 1px #C5CBD7;
    border-radius: 4px;
    padding: 19px 20px;
    font-size: 20px;
    width: 283px;

    margin-right: 10px;
    line-height: normal;
    display: inline-block;
}

.registration-status-block > span{
    vertical-align: middle;
}

.registration-status-block > span > img{
    width: 32px;
    height: 32px;
}

.registration-status-text{
    font-weight: var(--font-weight-700-bold) !important;
}

.dataTables_scrollHeadInner > table.registrationList > thead > tr > th {
    border-bottom: 1px solid #dee2e6;
}

.dataTables_scrollBody > table.registrationList {
    border-collapse: separate;
    border-spacing: 0 20px;
    margin-top: -41px;
}

.dataTables_scrollBody > table.registrationList > tbody > tr > td {
    border-bottom: 1px solid #dee2e6;
}

.registrationList .req-proj-name > div {
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.registrationList .req-proj-name > div > div {
    color: var(--caption);
    padding-right: 15px;
    padding-left: 15px;
}

.registrationList .req-proj-name > div > div:first-child {
    width: 130px;
}

.registrationList .req-proj-name > div > div:nth-child(2) {
    /*
    width: 100%;
    */
}

.table-grey-background {
    background-color: #F5F5F5;
}

.table-margin-bottom{
    margin-bottom: 10px;
}

.registration-inprogress{
    color: #5BC0DE;
}

.registration-submitted{
    color: #499BE0;
}

.registration-approved{
    color: #5DB95D;
}

.registration-rejected{
    color: #D9534F;
}

.cell-left-border{
    border-style: solid;
    border-width: 0 0 0 5px;
}

.cell-leftborder-submitted{
    border-style: solid;
    border-width: 0 0 0 5px;
    border-color: #499BE0;
}

.cell-leftborder-accepted{
    border-style: solid;
    border-width: 0 0 0 5px;
    border-color: #5DB95D;
}

.cell-leftborder-rejected{
    border-style: solid;
    border-width: 0 0 0 5px;
    border-color: #D9534F;
}

.cell-leftborder-inprogress{
    border-style: solid;
    border-width: 0 0 0 5px;
    border-color: #5BC0DE;
}


.title-control-adjust {
    margin-top: -5px;
}

#projInfoTitle {
    padding-right: 15px;
    padding-top: 5px;
}

#trackingNo {
    padding-right: 10px;
    padding-top: 5px;

}

.column-shaded-bg {
    background: #F9FAFE;
}

.column-border-left{
    border-left: 1px solid #DCDCDC;
}


.reqRaqClass {
    color: #18bc75;
    font-style: italic;
}

.reqRaqDefaultClass {
    color: #E2483D;
    font-style: italic;
}

.header-stylingCPS {
    border-bottom: 1px solid #e0e0e0;
}

#overlayWindow { /* XIAM-4400: The overlay is used to block the screen so data is not visible when the session timeout alert is displayed. */
    position: absolute;
    opacity: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #ebeeef;
    z-index: 2002;
}

.idmProjLabel {
    color: green;
}

.ICRiskTestProc {
    font-size: var(--webca-font-size);
    line-height: 15px;
    text-align: left;
    color: #727272;
}

.twoPixelsUp {
    position: relative;
    top: -2px;
}

.preWrap {
    white-space: pre-wrap;
}

.severityCheck {
    padding: 2px;
    margin: 0;
    border-bottom: 1px solid #b9b9b9;
}

.testing {
    padding-left: 5px;

}

.ui-resizable-handle {
    transform: translateY(-100%);
}

.region_count_zero {
    color: white !important;
    text-decoration: none;
}

.region_count_zero:not(:disabled):not(.disabled):hover {
    color: white;
    text-decoration: underline;
}

.scanTitle {
    font-size: 15px;
    text-align: left;
}

.scan-line {
    background-color: #cccccc;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.dialog-hint {
    display: block;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 12px;
}

.boe-iframe {
    width: inherit;
    height: inherit;
    border: 0 solid #cccccc !important;
}

.mapping-import {
    background: #F2F2F2;
    border: 1px solid #DCDCDC;
    box-sizing: border-box;
    border-radius: 2px;
    padding: 20px;
    margin-top: 40px;
}

.mapping-import-header {
    color: #EA0041;
}

.search-label {
    margin-left: 5px;
    line-height: 14px;
    color: #ffffff;
}

.navbar-nav li.dropdown a.dropdown-toggle:focus { /* XIAM-13861 Focus Highlight for Nav Menu */
    outline: 5px auto -webkit-focus-ring-color;
}

.dropdown-toggle:focus { /* 2.4.7 Focus visible */
    outline: 5px auto -webkit-focus-ring-color;
}

.action-button-fieldset { /* 1.3.1 Info and Relationships*/
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.table-header {
    margin: 0;
}

.typeaheadInputTxt {
    padding-left: 40px;
    background-image: url(../images/iconSearch.png);
    background-position: 12px 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 31px;
}

.searchComponentTypeahead {
    border-radius: 0 4px 4px 0;
    position: relative;
    border: 1px solid #CBCBCB;
    box-sizing: border-box;
    right: 1px;
}

.projTypeaheadSearchMenuDiv,
.search-control {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    max-width: 500px;
    width: 100%;
}

.projTypeaheadSearchMenuDiv {
    float: right;
    background: initial;
    border-radius: 0;
    position: relative;
}

.search-control > .searchControlClass:nth-child(3) {
    align-self: stretch;
    flex-grow: 2;
}

.searchControlClass {
    display: inline;
}

.searchComponentDropDownBtnClass {
    height: 31px;
    border-radius: 4px 0 0 4px;
    padding: 0 12px;
    border: 1px solid var(--forms-box-stroke);
    background-color: var(--app-chrome-gray);
}


.projectSearchMenuTextClass, .filterSearchParameter {
    text-indent: 17px;
}

.filterSearchHistory {
    text-indent: 34px;
}

.searchComponentHistoryMenuCategoryClass {
    text-indent: 17px;
    color: black !important;
}

.searchComponentDropDownBtnClass > .caret {
    margin-left: 8px;
}

.projTypeaheadSearchMenuDiv > .searchControlClass > .searchComponentCloseButtonClass {
    border-left-width: 0;
    position: relative;
    border-radius: 0 4px 4px 0;
    height: 31px;
    right: 1px;
}

.projTypeaheadSearchMenuDiv > .searchControlClass > .searchComponentTypeahead {
    border-radius: 0 0 0 0;
    border-right: none;
}

.searchComponentCloseAction {
    visibility: hidden;
    display: none;
}

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000;
}

/*endregion*/


/*region WCAG 2.2.1 KEYBOARD; XIAM-14000 HELP. ADD WARNING FOR USERS  *************************************************/

span.wcag-warning {
    display: none;
    z-index: 999;
    position: absolute;
    top: 20px;
    left: 50%;
    min-width: 160px;
    margin-left: -20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    line-height: 18px;
    font-size: 14px;
    color: #333;
    text-align: center;
    word-break: break-word;
    background-color: rgb(255, 255, 255);
    background-clip: padding-box;
    box-shadow: rgba(0, 0, 0, 0.176) 0 6px 12px;
}

a:hover span.wcag-warning,
a:focus span.wcag-warning,
a:active span.wcag-warning,
button:not(:disabled):not(.disabled):hover span.wcag-warning,
button:focus span.wcag-warning,
button:not(:disabled):not(.disabled):active span.wcag-warning,
input:focus + div > span.wcag-checkbox {
    display: block;
}

.os-list a:hover span.wcag-warning,
.os-list a:focus span.wcag-warning,
.os-list a:active span.wcag-warning,
.os-list button:not(:disabled):not(.disabled):hover span.wcag-warning,
.os-list button:focus span.wcag-warning,
.os-list button:not(:disabled):not(.disabled):active span.wcag-warning {
    top: -50%;
    left: -220px;
}

a:hover span.warning-dropdown,
a:focus span.warning-dropdown,
a:active span.warning-dropdown {
    top: unset;
    left: -150%;
    width: fit-content;
}

span.wcag-checkbox {
    min-width: 0;
}

input:focus + div > span.wcag-checkbox {
    top: 5px !important;
}

input.tasklist-applicable:focus + div > span.wcag-checkbox {
    margin-left: -130px;
    min-width: 160px;
}

table tr td:first-child span.wcag-warning {
    margin-left: 0;
}

/*endregion*/


/*region  UNTITLED  ***************************************************************************************************/

#universal-modal {
    z-index: 9999;
}

#universal-modal #okay-button {
    min-width: 60px;
}

.xtable-header-sorter:focus, .cloned-focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: 3px;
}

.override-focus {
    outline: 0 !important;
}

.prjSearchContainer > a.nav-search-bar:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: 3px;
    color: #ffffff;
}

.prjSearchContainer > a.nav-search-bar:hover {
    cursor: pointer;
}

.select2-selection--single {
    height: 100% !important;
}

.select2-selection__rendered {
    word-wrap: break-word !important;
    text-overflow: inherit !important;
    white-space: normal !important;
}

.preview-div {
    border: 1px solid lightgray;
    padding: 0 0 10px 0;
    margin-top: 10px;
    height: 330px;
    overflow: auto
}

.Center {
    display: flex;
    align-items: center;
    justify-content: center;
}

ul#hamburger-menu {
    display: none;
}

.burger-menu-outline:focus {
    outline: 5px auto -webkit-focus-ring-color;
}

.toggledText span.trimmed {
    display: none;
}

.show-more .more:before {
    content: 'Show More';
}

.showAll .toggledText span.moreContent { /* morePoints*/
    display: none;
}

.showAll .toggledText span.trimmed {
    display: inline;
}

.showAll .show-more .more:before {
    content: 'Show Less';
}

.navbar-brand-360 a:focus { /* XIAM-14705: [XIAM-14218] Focus indicator for Xacta 360 logo (Homepage link) is not visible on firefox */
    color: #FFFFFF;
    display: inline-block !important; /* force inline block since firefox on QA environment is causing an issue*/
}

#main-layout-west-toggler:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.modal-text-content {
    overflow-wrap: break-word;
    white-space: pre-line;
}

.highlight-error {
    background: #ffff99 !important;
}

/*XACTA-13965*/
.chosen-container-multi.highlight-error .chosen-choices {
    background-color: inherit;
    background-image: inherit;
}

/*XACTA-14740*/
.chosen-container-single.highlight-error .chosen-single {
    background: inherit;
}

/* EDE Mappings List Page*/
.ede-complete {
    background-color: #5DB95D;
}

.ede-inprogress {
    background-color: #D9534F;
}

.override-fieldset { /* xacta-2654 pstep action is not centered*/
    margin: 0;
    padding: 0;
}

::placeholder:not(.trackingNoInputCard) {
    font-style: italic;
}

.Instructional-Text-Margin {
    margin: 0 0 1px;
}

.external-project-info {
    color: green;
    font-style: italic;
}

.artifact-library-tree-toggler img {
    margin-right: 2px;
}

.xtable td > table > tbody > tr > td.artifact-library-tree-folder {
    vertical-align: middle;
}

.artifact-library-tree-folder div {
    display: flex;
    gap: 5px;
}

.artifact-library-tree-folder div > img:first-child {
    align-self: flex-start;
}

.artifactMarking,
.xtable td > table > tbody > tr > td.artifactMarking {
    padding: 10px 0 0 21px;
    color: var(--normal);
    font-size: 11px;
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    line-height: 13px;
    /*noinspection CssNonIntegerLengthInPixels*/
    letter-spacing: 0.165px;
    word-wrap: normal;
}

.xtable td > table > tbody > tr > td > div > table > tbody > tr > td.artifact-library-tree-file {
    padding-top: 10px;
    padding-left: 21px;
}

/*endregion*/


/*region ACCORDION STYLING FOR BOOTSTRAP 4  ***************************************************************************/

.accordion .card-header .collapse-icon {
    float: right;
    font-size: 20px;
    width: 1.2em;
}

.accordion .card-header:not(.collapsed) .rotate-icon {
    transform: rotate(180deg);
}

.accordion-row-detail:not(.collapsed) {
    transform: rotate(270deg);
}

.accordion .card-header {
    padding: 13px 16px;
}

.accordion .card-title {
    font-weight: var(--font-weight-600-semi-bold-demi-bold);
    font-size: var(--webca-font-size);
    line-height: 19px;
    color: #333333;
}

.accordion .card-body {
    font-size: 14px;
    line-height: 20px;
    color: #333333;
}

/*endregion*/


/*region  RADIO BUTTON X360 2.0 STYLING  ******************************************************************************/

input[type="radio"] {
    appearance: none;
    background-color: var(--forms-box-fill);
    font: inherit;
    color: currentColor;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-top: 3px;
    transition: 250ms border cubic-bezier(0, 0, 0.44, 1.44);
}

input[type="radio"]:before {
    content: '';
    width: 60%;
    height: 60%;
    border-radius: 50%;
}

input[type="radio"]:checked {
    border: 4px solid var(--app-chrome-primary-blue);
}

input[type="radio"][disabled]:checked {
    border: 4px solid var(--forms-radio-fill-disabled);
    cursor: not-allowed;
}

input[type="radio"][disabled] {
    cursor: not-allowed;
}

.xinput-radio-label {
    margin-left: 8px;
}

.xinput-radio-inline-label {
    margin-left: 5px;
}

.form-check-inline {
    margin-right: 25px;
}

.xinput-radio-button-info { /* style is applied to display the  info icon next to a radio input ctrl class is applied via HtmlSelectResource.renderRadio() */
    display: inline-table;
    text-align: left;
}

/*endregion*/


/*region BTN-GROUP X360 2.0 STYLING   *********************************************************************************/

.x-btn-group-container {
    gap: 20px;
    flex-wrap: wrap;
}

.x-btn-group > .btn {
    font-size: var(--webca-font-size);
    line-height: 19px;
    font-weight: var(--font-weight-700-bold);
    flex: 1 0 0;
}

.x-btn-group > .btn:not(:disabled):not(.disabled).active,
.x-btn-group > .btn:not(:disabled):not(.disabled):active,
.x-btn-group > .btn:not(:disabled):not(.disabled):hover {
    border: none;
    background:#F0AD4E;
    border-radius: 2px;
    color: #FFFFFF;
}

.x-btn-group > .btn:not(:disabled):not(.disabled),
.x-btn-group > .btn:not(:disabled):not(.disabled) {
    border:  1px solid #DCDCDC;
    background:#FFFFFF;
    border-radius: 2px;
    color: #333333;
}

.x-btn-group {
    flex-direction: column;
}

.x-btn-group-subcaption {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 2 0 0;
}

.x-btn-group-subcaption > span {
    font-weight: 400;
}

/* XACTA-6830 */
.x-btn-group-primary > .btn {
    display: flex;
    font-size: 14px;
    line-height: 13px;
    font-weight: var(--font-weight-500-medium);
    padding: 9px 12px;
    align-items: center;
    gap: 5px;
}

.x-btn-group-primary > .btn:not(:disabled):not(.disabled).active,
.x-btn-group-primary > .btn:not(:disabled):not(.disabled):active,
.x-btn-group-primary > .btn:not(:disabled):not(.disabled):hover {
    border-radius: 4px;
    border: 1px solid #296FB5;
    background: #296FB5;
    color: #FFFFFF;
}

.x-btn-group-primary > .btn:not(:disabled):not(.disabled),
.x-btn-group-primary > .btn:not(:disabled):not(.disabled) {
    border-radius: 4px;
    border: 1px solid #C5CBD7;
    background: #FFFFFF;
    color: #333333;
}

/*endregion*/


/*region  SELECT INPUT X360 2.0 STYLING  ******************************************************************************/

select {
    margin: 0;
    /*noinspection CssUnknownProperty*/
    -moz-box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: var(--forms-box-fill);

    /* Custom dropdown triangle symbol rendered with CSS Background */
    background-image:
            linear-gradient(45deg, transparent 50%, var(--app-chrome-dropdown-triangle) 50%),
            linear-gradient(135deg, var(--app-chrome-dropdown-triangle) 50%, transparent 50%),
            linear-gradient(to right, transparent, transparent);
    background-position:
            calc(100% - 12px) calc(1em + 1px),
            calc(100% - 7px) calc(1em + 1px),
            100% 0;
    background-size:
            4px 4px,
            5px 5px,
            2.5em 2.5em;
    background-repeat: no-repeat;
    padding-right: 2em !important;
}

select:disabled { /* Custom dropdown triangle symbol rendered with CSS Background */
    background-color: var(--forms-box-fill-disabled);
}

select[multiple],
select[size] {
    height: auto;
    background-image: none;
}

select[multiple],
select[multiple]:focus,
select[multiple]:active {
    border-radius: 0;
    padding: unset !important;
}

select option { /* CSS for Option Elements will only work for some attributes like color & background. See https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element */
    margin: 3px 0;
    line-height: 19px !important;
    color: var(--normal);
}

select option:checked {
    color: #fff;
    background-color: var(--app-chrome-primary-blue);
}

select option:disabled {
    color: var(--disabled);
}

/*endregion*/


/*region  SELECT EFFECTIVE ROLE DIALOG STYLES  ************************************************************************/

.task-verify-role-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 5px;
    height: 100%;
}

.task-verify-role-btn-group {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.task-verify-role-btn-group > .x-btn-group-container {
    justify-content: center;
}

/*endregion*/


/*region DOUBLE LIST **************************************************************************************************/

div.doubleList {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

div.doubleList,
.xdialog-content-pane .row > div.doubleList {
    width: fit-content;
}

.doubleList label:nth-of-type(1)  { grid-area: 1 / 1 / 2 / 2; }
.doubleList select:nth-of-type(1) { grid-area: 2 / 1 / 3 / 2; }
.doubleList .moveLeftRight        { grid-area: 2 / 2 / 3 / 3; }
.doubleList label:nth-of-type(2)  { grid-area: 1 / 3 / 2 / 4; }
.doubleList select:nth-of-type(2) { grid-area: 2 / 3 / 3 / 4; }
.doubleList .moveUpDown           { grid-area: 2 / 4 / 3 / 5; }

.doubleList .moveLeftRight,
.doubleList .moveUpDown {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: center;
}

.doubleList .moveLeftRight > button,
.doubleList .moveUpDown > button {
    margin: 0;
}

div.r-container > div.row:not(:last-child){
    margin-bottom: 20px;
}

.hide {
    display: none;
}

#ui-datepicker-div {
    z-index: 3000 !important;
}

/*endregion*/


/*region  HOME PAGE ***************************************************************************************************/

.home.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1744px;
    padding: 0;
}

.search-container {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: nowrap;
    margin: 0 0 15px 0; /* Top Margin set to 0, since pages with no Action Bars will automatically have a margin of 20px at the top. If this changes, restore 20px top margin */
}

.search-container > .title {
    justify-content: center;
    align-items: center;
    display: flex;
    flex-shrink: 0;
    margin-right: 25px;
    font-weight: 600;
    font-size: 16px;
    line-height: 142.32%;
    color: #333333;
}

:root {
    --home-card-width: 420px;
    --home-card-gap: 16px;
}

.home.card-container.row {
    width: calc((var(--home-card-width) * 4) + (var(--home-card-gap) * 3));
    margin: unset;
    display: flex;
    gap: var(--home-card-gap) var(--home-card-gap);
}

@media (max-width: 1760px) {
    .home.card-container.row {
        width: calc((var(--home-card-width) * 3) + (var(--home-card-gap) * 2));
    }
}

@media (max-width: 1350px) {
    .home.card-container.row {
        width: calc((var(--home-card-width) * 2) + var(--home-card-gap));
    }
}

@media (max-width: 870px) {
    .home.card-container.row {
        width: var(--home-card-width);
    }
}

.home .card {
    width: var(--home-card-width);
    height: 220px;
}

.card:focus-within {
    background: #e6f0ff;
    border: 1px solid #C5CBD7;
    border-radius: 4px;
}

.card:hover {
    background: #e6f0ff;
    border: 1px solid #C5CBD7;
    border-radius: 4px;
}

.xcard-detail-pane .card:focus-within,
.xcard-detail-pane .card:hover {
    background: unset;
}

.card-body {
    padding: 20px;
}

.cardBackgroundDisabled {
    background: var(--forms-box-fill-disabled);
}

.cardBackgroundDisabled .card-body > .title > div,
.cardBackgroundDisabled .card-body > .description {
    color: var(--forms-caption-disabled);
}

.card-body > .title {
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
}

.card-body > .title > div {
    font-weight: bold;
    line-height: 142.32%;
    font-size: 15px;
    color: #333333;
}


.card-body > .divider {
    border-bottom: 1px solid var(--forms-box-stroke);
}

.card-body > .description {
    font-weight: 500;
    font-size: var(--webca-font-size);
    line-height: 120.3%;
    color: #666666;
    letter-spacing: 0.015em;
    padding-bottom: 20px;
}

.projectInfoCardText {
    background-image: url(../images/iconSearch.png);
    background-position: 12px 50%;
    background-repeat: no-repeat;
    border-radius: 4px 4px 4px 4px;
    padding-left: 36px;
    height: 35px;
}

li.dropdown.nav-item.selected {
    border-bottom: 4px solid var(--app-chrome-primary-nav-light-blue);
}


div.pre-line {
    white-space: pre-line;
}

/* overriding bootstrap 'overflow' attribute */
.overflow-visible {
    overflow: visible !important;
}

.cardPopulationExpWarning {
    padding-top: 5px;
    padding-left: 5px;
}


/*endregion*/