/* Main
-------------------------------------------- */
/* Core start */

/* Core end */

/* ---
-------------------------------------------- */

/* ---
-------------------------------------------- */


/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */
.xDiagSideBar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80px;
    background-color: rgb(68, 97, 175);
    overflow: auto;
    direction: rtl;
}

.xDiagDetail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    overflow: auto;
    height: 100%;
}

.xDiagDetail .toolbar {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    background-color: white;
    white-space: nowrap;
    border-bottom: 1px solid #efefef;
}

.xDiagDetail .toolbar>.btn {
    position: relative;
    display: inline-block;
    top: 1px;
    height: 18px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    float: left;
    margin: 3px 2px 0 1px;
    padding: 2px 2px 0 2px;
    border: solid 1px #ededed;
    background-color: #fafafa;
    color: black;
    border-radius: 2px;
    -moz-border-radius: 2px;
    cursor: pointer;
    width: auto;
}

.xDiagDetail .toolbar>.groupHeader {
    position: relative;
    display: inline-block;
    top: 1px;
    height: 18px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    float: left;
    margin: 3px 2px 0 1px;
    padding: 2px 2px 0 2px;
    border: solid 1px #ededed;
    background-color: #fafafa;
    color: black;
    border-radius: 2px;
    -moz-border-radius: 2px;
    cursor: pointer;
    width: auto;
}

.xDiagDetail .toolbar>.groupHeader {
    top: 3px;
    background-color: transparent;
    border-style: none;
}

.xDiagDetail .toolbar>.btn:first-child {
    margin-left: 5px;
}


.xDiagDetail .toolbar>.btn[ischecked="true"] {
    border-color: #cacaca !important;
    background-color: #d4defa;
}

.xDiagDetail .toolbar>.btn:hover {
    border-color: #ababab;
    background-color: #eaeaea;
    color: black;
}

.xDiagDetail .toolbar>.btn[ischecked="true"]:hover {
    border-color: #ababab !important;
    background-color: #e9edfa;
    color: black;
}



.xDiagDetail .body {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

/* if the .body is preceded via a .toolbar, bump the body down to accommodate */
.xDiagDetail .toolbar~.body {
    top: 31px;
}

.xDiagDetail .header,
.xDiagInspect .header {
    color: #222;
    font-size: 15px;
    padding: 2px 0 2px 5px;
    font-weight: 500;
}

.xDiagDetail .subheader,
.xDiagInspect .subheader {
    color: #555;
    font-size: 13px;
    padding: 2px 0 2px 5px;
    font-weight: 500;
    font-variant: small-caps;
    background-color: #efefef;
}

.xDiagDetail .headerInfo,
.xDiagInspect .headerInfo {
    color: #777;
    margin-left: 15px;
    margin-bottom: 2px;
}

.xDiagDetail .contentBlock,
.xDiagInspect .contentBlock {
    margin-top: 6px;
    margin-bottom: 5px;
    padding-bottom: 8px;
    border-bottom: solid 1px #efefef;
}

.xDiagDetail .contentBlock table,
.xDiagInspect .contentBlock table {
    border-collapse: collapse;
}

.xDiagDetail .contentBlock table td,
.xDiagDetail .contentBlock table th .xDiagInspect .contentBlock table td,
.xDiagInspect .contentBlock table th {
    padding-left: 5px;
    padding-right: 10px;
}

.xDiagDetail .contentBlock table th,
.xDiagInspect .contentBlock table th {
    border-bottom: solid 1px #ddd;
    font-weight: 500;
    background-color: #eee;
    text-align: left;
}

.xDiagDetail .xSection,
.xDiagInspect .xSection {
    margin-top: 0;
    margin-right: 5px;
    margin-left: 5px;
}

.ruleTokenBlock {
    margin-left: 7px;
    padding-left: 8px;
}

.xDiagToken {
    position: relative;
    display: inline-block;
    margin: 2px;
    border: solid 1px transparent;
    white-space: nowrap;
    background-repeat: no-repeat;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* an 'info token' is one that has no mouse-over effects or adding spacing */
.xDiagToken[infoToken] {
    margin: 0;
    border-style: none;
}

.xDiagToken[tokenType='Invalid']>span:before,
.xDiagToken[tokenType='Option']>span:before,
.xDiagToken[tokenType='Selection']>span:before,
.xDiagToken[tokenType='Category']>span:before,
.xDiagToken[tokenType='Formula']>span:before,
.xDiagToken[tokenType='Defn']>span:before,
.xDiagToken[tokenType='Rule']>span:before,
.xDiagToken[tokenType='Property']>span:before,
.xDiagToken[tokenType='Checkbox']>span:before {
    position: absolute;
    top: 2px;
    left: 2px;
}

.xDiagToken[tokenType='SystemPropertiesNode'],
.xDiagToken[tokenType='ContextPropertiesNode'],
.xDiagToken[tokenType='CategoriesNode'] {
    height: 15px;
    line-height: 15px;
    padding: 2px 5px 2px 0;
    border-radius: 2px;
    -moz-border-radius: 2px;
    color: black;
}

.xDiagToken[tokenType='Operator'],
.xDiagToken[tokenType='Literal'] {
    color: #555;
    height: 15px;
    line-height: 15px;
    padding: 2px 0;
}

.xDiagToken[tokenType='Invalid'],
.xDiagToken[tokenType='Option'],
.xDiagToken[tokenType='Selection'],
.xDiagToken[tokenType='Category'],
.xDiagToken[tokenType='Formula'],
.xDiagToken[tokenType='Defn'],
.xDiagToken[tokenType='Rule'],
.xDiagToken[tokenType='Property'],
.xDiagToken[tokenType='Checkbox'] {
    height: 15px;
    line-height: 15px;
    padding: 2px 5px 2px 20px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    color: black;
}

.xDiagToken[tokenType='Invalid']:not([infoToken]):hover,
.xDiagToken[tokenType='Option']:not([infoToken]):hover,
.xDiagToken[tokenType='Selection']:not([infoToken]):hover,
.xDiagToken[tokenType='Category']:not([infoToken]):hover,
.xDiagToken[tokenType='Formula']:not([infoToken]):hover,
.xDiagToken[tokenType='Defn']:not([infoToken]):hover,
.xDiagToken[tokenType='Rule']:not([infoToken]):hover,
.xDiagToken[tokenType='Property']:not([infoToken]):hover,
.xDiagToken[tokenType='Checkbox']:not([infoToken]):hover {
    border: solid 1px lightgrey;
    background-color: ghostwhite;
    cursor: pointer;
}

.xDiagToken[tokenType='Invalid']>span:before { content: url(iconTokenInvalid.png); }
.xDiagToken[tokenType='Option']>span:before { content: url(iconTokenOption.png); }
.xDiagToken[tokenType='Selection']>span:before { content: url(iconTokenSelection.png); }
.xDiagToken[tokenType='Category']>span:before { content: url(iconTokenCategory.png); }
.xDiagToken[tokenType='Formula']>span:before { content: url(iconTokenFormula.png); }
.xDiagToken[tokenType='Defn']>span:before { content: url(iconTokenDefinition.png); }
.xDiagToken[tokenType='Rule']>span:before { content: url(iconTokenRule.png); }
.xDiagToken[tokenType='Property']>span:before { content: url(iconTokenProperty.png); }
.xDiagToken[tokenType='Checkbox']>span:before { content: url(iconTokenCheckboxEmpty.png); }
.xDiagToken[tokenType='Checkbox'][isChecked='1']>span:before { content: url(iconTokenCheckboxChecked.png); }

/* target the 'value' span that is immediately adjacent to the rule token */
.xDiagToken+span.val { vertical-align: 8px; display: inline-block; color: green; }
.xDiagToken+span.val:before { content: ' = '; color: darkgray; margin-left: -5px; margin-right: 3px; }
.xDiagToken[ruleState='0'], /* False */
.xDiagToken[ruleState='2'] /* NotSelected */ {}

.xDiagToken[ruleState='1'], /* True */
.xDiagToken[ruleState='3'] /* True */ { color: blue; }
.xDiagToken[ruleState='4'] /* Excluded */ { color: darkgray; }
.xDiagToken[ruleState='5'] /* Error */ { color: red; }
.xDiagToken[ruleState='6'] /* NotInConfig */ { color: darkgray; text-decoration: line-through; }
.xDiagToken[emptyNode='true'] { filter: opacity(25%); }
.xDialogContainer[paneltype='4'] .xDiagToken { overflow: visible; }
.xDiagStructuredText {}
.xDiagStructuredText>div { font-family: var(--font-family--code); white-space: pre; margin: 5px; }
.xDiagInspect { overflow: auto; height: 100%; }
.xInspectTitlebar { height: 26px; white-space: nowrap; overflow: hidden; background-color: rgb(218, 228, 255); border-bottom: solid 1px darkgrey; margin-bottom: 7px; }
.xInspectTitlebarText { color: rgb(50, 70, 128); position: relative; top: 5px; left: 5px; text-transform: uppercase; }
.xPropInspectGrid { margin-left: 10px; border-collapse: collapse; width: 90%; }
.xPropInspectGrid th,
.xPropInspectGrid td { border: 1px solid black; text-align: left; padding: 5px; }

.xPropInspectGrid th {
    background-color: ghostwhite;
    font-size: 12px;
    text-transform: uppercase;
}

.xPropInspectGrid tr td {
    background-color: white;
}

.xPropInspectGrid tr.alt td {
    background-color: azure;
}


/* target the 'value' span that is immediately adjacent to the rule token */
.xRuleToken+span.val {
    vertical-align: 4px;
    color: green;
}

.xRuleToken+span.val:before {
    content: ' = ';
    color: darkgray;
}


.xRuleFilter {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

.xRuleSearch {
    position: relative;
    top: 2px;
    z-index: 10;
    margin-left: 20px;
    width: 200px;
    height: 16px !important;
    /*background-image: url(iconMagGlass.png);
   background-position: right center;
   background-repeat: no-repeat;*/
    background-color: white !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    border: solid 1px #666 !important;
    vertical-align: middle !important;
}

.xRuleSearch:hover {
    padding-left: 4px !important;
}

.xRuleSearch[disabled] {
    background-color: lightgrey !important;
}

/* TODO: Combine the detail search styles (rule search may need to be updated anyway)*/
.xRuleDetailSearch {
    position: absolute;
    float: right;
    background-color: #4461af;
    z-index: 99999;
    border-left: solid 1px #171717;
    border-bottom: solid 1px #171717;
    -moz-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
    padding: 4px;
}

.xRuleDetailSearch input {
    width: 167px;
}

.xFormulaDetailSearch {
    float: right;
    background-color: #4461af;
    z-index: 99999;
    border-left: solid 1px #171717;
    border-bottom: solid 1px #171717;
    -moz-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
    padding: 4px;
}

.xRuleGraphInfoBlock {
    position: absolute;
    left: 0;
    top: 0;
    margin-bottom: 0;
    width: 100%;
    background-color: white;
    margin-top: 0 !important;
}
.xSection>#outerGraphContainer { position: absolute; top: 66px; left: 0; right: 0; bottom: 0; }
.xDiagDetailGraphView { overflow: hidden; }
.xDiagTip { position: absolute; background-color: white; z-index: 99999; border: 1px solid black; border-radius: 2px; max-width: 75%; overflow: hidden; }
.xDiagTip>.xDiagToken { display: block; }
.xDiagTip .xDiagTipDetail { color: black; background-color: #eaeaea; border-top: solid 1px #ababab; }
.xDiagTip .xDiagTipDetail table { width: 100%; border-collapse: collapse; }
.xDiagTip .xDiagTipDetail table td { padding: 3px 6px 3px 3px; border-bottom: solid 1px #eaeaea; }
.xDiagTip .xDiagTipDetail table tr:last-child td { border-bottom-style: none; }
.xDiagTip .xDiagTipDetail table tr>td:not(:first-child) { background-color: white; }
.xLogControls { display: inline-block; position: absolute; z-index: 99999; right: 0; top: 0; background-color: gainsboro; border: solid 1px darkgray; border-top: none; border-right: none; border-bottom-left-radius: 2px; }
.xRuleControls { display: inline-block; position: absolute; z-index: 99999; right: 0; top: 0; background-color: gainsboro; border: solid 1px darkgray; border-top: none; border-right: none; border-bottom-left-radius: 2px; }
.xTree ul { list-style-type: none; }
.xTree li { list-style-type: none; }
.xTreeRoot { margin: 5px; padding: 0; }
.xTreeBranch { padding: 0; margin-left: 25px; }
.xTreeLeaf { margin-left: 16px; }
.xTreeNodeExpand { vertical-align: 7px; }
.xTreeNodeCollapse { vertical-align: 7px; }
.xExpandIcon { margin-right: 7px; content: url('logDetailPlus.png'); }
.xExpandIcon.expanded { content: url('logDetailMinus.png'); }
.xExpandableTree li { list-style: none; display: flex; flex-direction: column; align-items: flex-start; }
.xExpandableTree li ul { display: none; }
.xExpandableTree li>a { display: flex; }
.xExpandableTree li>a:before { margin-right: 7px; content: url('logDetailPlus.png'); }
.xExpandableTree li.xTreeNodeExpand>a:before { content: url('logDetailMinus.png'); }
.xExpandableTree li>a>span { display: flex; }
.xExpandableTree li.xTreeNodeExpand>ul { display: block; }
.xExpandableTree .xDiagToken { display: flex; padding-left: 0; }
.xExpandableTree .xDiagToken>span { display: flex; }
.xExpandableTree .xDiagToken>span:before { margin-right: 7px; position: static; }
.xInspectHeader { background-color: gainsboro; height: 25px; margin-bottom: 10px; display: flex; align-items: center; padding: 0 10px; }
table.xInspect { width: 100%; border-collapse: collapse; }
table.xInspect td { padding: 3px 6px 3px 3px; border-bottom: solid 1px #eaeaea; border-right: solid 1px #f0f0f0; }
table.xInspect tr:not(:first-of-type) td:first-of-type { background-color: #d4defa; border-right: solid 1px #afc3fa; border-bottom: solid 1px #d4defa; white-space: nowrap; width: 0; min-width: 100px; padding-right: 8px; }
table.xInspect td.xHeader { text-transform: uppercase; padding: 2px; cursor: pointer; }
table.xInspect tr[propid] td.na { background-color: #fafafa; }
table.xInspect tr[propid] td:first-child:after { content: ':'; }
table.xInspect tr[propid]:hover td:not(:first-of-type) { background-color: #f6fbc7; }
table.xInspect tr[propid]:hover td:first-of-type { background-color: burlywood; }
table.xInspect tr:last-child td { border-bottom-style: none; }
table.xInspect tr>td:not(:first-of-type) { background-color: white; }
table.xInspect tr:first-of-type td { background-color: #eaeaea; }
table.xInspect tr:first-of-type td:not(:first-of-type) { font-weight: bold; cursor: pointer; }
table.xInspect tr:first-of-type td:not(:first-of-type):hover { background-color: burlywood; }
table.xInspect tr>td>a { text-decoration: none; color: maroon; }
table.xInspect tr>td>a:hover { text-decoration: underline; }
div.xItemList { margin-left: 25px; white-space: nowrap; }
div.xItemList img.xItemAction { cursor: pointer;display: inline-block; float: left; margin-right: 6px; margin-top: 5px; }
div.diagMenu { z-index: 99999; position: absolute; border: solid 1px black; background-color: white; overflow: auto; white-space: nowrap; }
div.diagMenu div.sep { height: 1px; border-top: solid 1px #efefef; border-bottom: solid 1px #efefef; background-color: black; }
div.diagMenu div.item { cursor: pointer; padding: 5px; color: black; position: relative; }
div.diagMenu div.item:hover { background-color: burlywood; }
div.diagMenu div.item[icon] { height: 15px; line-height: 15px; padding-left: 20px; }
div.diagMenu div.item[icon]>span:before { position: absolute; top: 5px; left: 3px; }
div.diagMenu div.item[icon='del']>span:before { content: url(iconDelete.png); }
div.diagMenu div.item[icon='mag']>span:before { content: url(iconMagGlass.png); }
.xTreeNode[xNodeSelected='true'] { background-color: #bddbff; }
.xTooltip>.xNoSelContents { margin-top: 4px; border-top: burlywood 1px solid; }
.xTooltip>.xNoSelContents>img { float: left; margin-top: 6px; margin-right: 6px; }
.xTooltip>.xNoSelContents>div { margin-top: 6px; }
.xDiagContent[paneltype='1'] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.xDiagContent[paneltype='1'] div.watermarkPrompt { margin-top: 20px; }
.xDiagContent[paneltype='4'],
.xDiagContent[paneltype='5'] { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; }
.xDiagDetail .toolbar>.filterBtn { background-image: url('btnFilter.png'); background-position: 2px 2px; background-repeat: no-repeat; padding-left: 22px; }
.xDiagDetail .toolbar>.deleteBtn { background-image: url('iconDelete.png'); background-position: 2px 2px; background-repeat: no-repeat; padding-left: 22px; }
.xDiagDetail .toolbar>input[type='text'] { margin-top: 4px; margin-left: 5px; height: 16px; }
.xFormulaTypeFilter { height: 22px; width: 100px; margin-left: 5px; }
.xFormulaTokens { padding: 10px 10px 0 15px; }
.xFormulaTokens .xDiagToken { margin: 0; padding: 2px 0 2px 16px; }
.xBasic[paneltype='3'] .xDiagToken { margin: 0; padding: 2px 0 2px 16px; }
.xFormulaTokens .xDiagToken>span::before { left: -1px; }
.xBasic[paneltype='3'] .xDiagToken>span::before { left: -1px; }
.xFormulaTokens>span { margin: -2px; }

.panel1Cover,
.panel2Cover {
    background-color: transparent;
    z-index: 100000;
    position: fixed;
}