#schemaTreePanel {
    box-sizing: border-box;
}

#tableViewSchemaTree {
    overflow: auto;
    border: 1px solid #ccc;
    white-space: nowrap;
    padding: 2px 0;
    box-sizing: border-box;
    background: white;
}

.dr-tree-i-sel {
    border: none;
    padding: 1px 4px;
}

.onTop {
    z-index: 100;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.leftCol {
    text-align: left;
    font-weight: bold;
    padding-right: 10px;
}

.rightCol {
    text-align: left;
    vertical-align: text-top;
}

.linkHeader {
    margin: 4px 0;
}

/* Schema Tree */

.schemaTree .rf-trn-lbl {
    padding-left: 2px;
}

.schemaTree .rMargin {
    margin-right: 4px;
}

.schemaTree .rMarginLarge {
    margin-right: 10px;
}

.schemaTree .rf-trn-lbl,
.schemaTree .rf-trn-cnt {
    cursor: default;
}

.schemaTree .rf-trn-lbl > * {
    font-size: 11px;
}

.schemaTree .rf-trn-cnt *,
.schemaTree .rf-trn-lbl * {
    vertical-align: middle;
}

.schemaTree .inlineImgLink {
    display: inline-block;
    font-size: 0;
}

.multiLineContainer {
    display: inline-block;
}

.tableOnlyMarker {
    color: #ff7f00;
    font-weight: bold;
}

.schemaTree .childCount {
    color: #2e77d0;
}

.levelSelectWrapper {
    position: relative;
    display: inline-block;
}

.levelSelectBox {
    font-size: 11px;
    margin: 0;
    position: absolute;
    top: -6px;
    left: 0;
    z-index: 1;
    padding: 2px;
}

.schemaNodeLevelSelect {
    margin-right: 2px;
    width: 12px;
    height: 12px;
}

.schemaTreeNodeText {
    white-space: nowrap;
}

.schemaNodeSummationGroup {
    margin-bottom: 2px;
}
.schemaNodeSummationGroup .rf-trn-ico {
    margin: 1px 4px 1px 0;
}

.schemaNodeSummationLeaf {
    margin-bottom: 6px;
}
.schemaNodeSummationLeaf .rf-trn-ico {
    margin: 1px 2px 1px 0;
}

.schemaNodeSummationLeaf .multiLineContainer {
    border-left: 2px solid #cde3c1;
    border-radius: 4px;
    padding-left: 5px;
    height: 100%;
    padding-bottom: 1px;
}

.schemaNodeSelectMany {
    display: inline-block;
    border-spacing: 0;
}

.schemaNodeWeightName,
.schemaNodeFunctions {
    display: block;
    margin-top: 4px;
}

.schemaNodeFunctions {
    font-size: 0;
}

.statFunctionCb {
    position: relative;
    display: inline-block;
    font-size: 11px;
    margin-right: 10px;
    vertical-align: middle;
}

.mandatoryStatFn {
    position: absolute;
    right: -6px;
}

.notSelectableStatFn {
    color: grey;
}

.schemaNodeSelectMany td > * {
    padding-right: 6px;
}

.treeNodeElement .fieldInTable,
span.fieldInTable,
table.fieldInTable,
div.fieldInTable {
    white-space: nowrap;
    font-weight: bold;
    font-style: italic;
}

.rf-ind {
    z-index: 100;
    height: 20px;
    width: auto !important;
    border-radius: 3px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 1px #ccc;
    vertical-align: middle;
    overflow: hidden;
    background: white;
}

.dragInd_image {
    display: inline-block;
    height: 20px;
    width: 20px;
}

.rf-ind .dragInd_image {
    background: url(../images/richfaces_3_3_3/reject.gif) no-repeat;
    background-size: contain;
}

.rf-ind-acpt .dragInd_image {
    background: url(../images/richfaces_3_3_3/accept.gif) no-repeat;
    background-size: contain;
}

.rf-ind-rejt .dragInd_image {
    background: url(../images/richfaces_3_3_3/reject.gif) no-repeat;
    background-size: contain;
}

.dragInd_text {
    display: inline-block;
    background: white;
    padding: 4px;
    border: none;
    width: auto;
    max-width: 250px;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: top;
    overflow: hidden;
    font-weight: bold;
}

/* Spinner */
.spinnerContainer {
    min-width: 60px;
    height: 25px;
    margin: -10px 0;
}

.spinnerContainer #tableSpinner {
    display: block;
    filter: none;
}

.spinnerContainer #tableSpinner.noDisplay {
    display: none;
}

/* Labels */
.databaseSchema {
    font-size: 12px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
}

.treeControlLabel {
    white-space: nowrap;
    color: #666;
}

div.treeControlLabel #help {
    color: inherit;
    text-decoration: none;
}

div.treeControlLabel #help img {
    vertical-align: middle;
    margin: -2px 1px 0 0;
}

.treeRowClose {
    float: right;
}

/* Buttons */

/* Align text to baseline in floated spans */
div.treeControlButtons > span {
    display: inline-block;
    line-height: 2em;
}
div.treeControlButtons > span > span {
    vertical-align: baseline;
}

.dropdownButtonGroup {
    display: flex;
}

.dropdownButtonGroup .dropdown-menu {
    min-width: 12rem;
    padding: 0;
    border: 1px solid rgba(240, 240, 240, 0.8);
    color: #333;
    box-shadow: 0 1px 1px #aaa;
    border-collapse: separate;
    background: #f5f5f5;
    cursor: pointer;
}

.dropdownButtonGroup .dropdown-menu > li > a {
    padding: 5px 8px;
    color: #333;
    text-decoration: none;
}
.dropdownButtonGroup .dropdown-menu > li:hover {
    background-color: #e9e9e9;
}

/**
 * Actually 8x8 but IE 9 defaults to the 'unknown' size of 300x150 (aspect ratio of 2:1) for the SVG within the IMG tag.
 * It scales and centers the SVG to fit within that size (150x150), then scales it to the requested size of 8x8 by
 * assuming it hadn't doubled the width (16x8) and just ignores that extra width. This leaves a correctly sized IMG
 * (8x8) and SVG within it, the SVG is just moved 50% to the right and cropped!
 *
 * This fix simply uses that aspect ratio and adjusts for it via the margin.
 * Note: This may be limited to this use case of an image within a button since it can not be wrapped in another element
 * to fix the size detection.
 *
 * Fixme: Find a better solution for using SVG images as we really should be using them wherever possible.
 */
.dropdownButton > img {
    width: 16px; /* This gives the 2:1 aspect ratio with the square SVG shrunk and centered to fit completely within it. */
    height: 8px;
    margin-left: -4px; /* Adjustment to account for the 2:1 aspect ratio above. */
    margin-right: -4px; /* Adjustment to account for the 2:1 aspect ratio above. */
}

/* Schema Tree Bottom Panel */

.searchPanel {
    padding-top: 6px;
}

.schemaSearchFilter {
    width: 175px;
}

.schemaTreeFilterSearch {
    display: inline-block;
}

.schemaTreeFilterSearch > * {
    vertical-align: middle;
}

.schemaTreeFilterSearchButtons {
    display: inline-block;
}

.schemaTreeFilterSearchButtons .activeButton {
    padding: 5px;
    width: 22px;
    height: 22px;
    vertical-align: middle;
}

#clearSearchButton {
    margin-left: 2px;
}

.customDataButtonContainer {
    padding-top: 6px;
    float: right;
}

.schemaTreeFilterSearchResult {
    white-space: nowrap;
}

.schemaSearchResultPagination {
    display: inline-block;
    margin-right: 2px;
    vertical-align: middle;
}

.schemaSearchResultMessage {
    display: inline-block;
    font-weight: bold;
    font-size: 9px;
    vertical-align: middle;
    max-width: 99%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.treeNodeIconContainer {
    position: relative;
    display: inline-block;
    margin-right: 3px;
}

.treeNodeIconContainer .treeNodeIcon {
    margin-left: 0;
    margin-right: 1px;
    position: relative;
}

.treeNodeIconContainer .treeNodeMandatoryOverlay {
    position: absolute;
    left: 0;
    top: 0;
}

/* Saved Tables Panel */
#tableViewPanelContent .rf-tab,
#tableViewPanelContent .rf-tab-cnt {
    height: 100%;
}