/* Basalt Default Styles */

@media print {
  div.panel-toolbar span.select2 {display:none;}
  body > span.select2-container {display:none;}
}

/* Non-existent classes for the 12-column layout, but they are useful all the same for practical use */
@media (max-width:767px){.col-xs-0 {width: 0 !important;}}
@media (min-width:768px) and (max-width:991px){.col-sm-0 {width: 0 !important;}}
@media (min-width:992px) and (max-width:1199px){.col-md-0 {width: 0 !important;}}
@media (min-width:1200px){.col-lg-0 {width: 0 !important;}}

/* Dashboard Backgrounds (visibility 0.25x, opacity 0.3s, height dashboard screens) */
body.dashboard.bg-light { background: url("/images/pattern/arches.png") repeat #FFF; }
body.dashboard.bg-dark { background: url("/images/pattern/arches_dark.png") repeat #444; }
/* Fade out the disabled dashboard items */
a.disabled img { opacity: 0.4; filter: alpha(opacity=40); }

/* Basalt/Aspen Theme Styles */

/* general background and color for theme */
.bg-light { background: #FFF6E8 none !important; color: #222222 !important; }

/* theme table rows */
.bg-light .table-striped>tbody>tr:nth-child(odd)>td { background-color: #FFF6E8; }
.bg-light .table-striped>tbody>tr:nth-child(even)>td { background-color: #c6d7ec; }
.bg-light .table-striped>tbody>tr:not(.first):not(.second):nth-child(odd):hover>td { background-color: #E5EAF1 !important; }
.bg-light .table-striped>tbody>tr:not(.first):not(.second):nth-child(even):hover>td { background-color: #A9C3E3 !important; }

.bg-light div.row.table-striped:nth-child(odd) { background-color: #F9F9F9; }
.bg-light div.row.table-striped:nth-child(even) { background-color: #c6d7ec; }
.bg-dark div.row.table-striped:nth-child(odd) { background-color: #2A2A2A; }

div.row.table-striped { margin-left: 0; margin-right: 0; }

/* TODO: what are these for? (where span is after b within an a) */
.bg-dark a>b+span { color:#FFF; }
.bg-light a>b+span { color:#333; }
.de-emphasized { color: #A0A0A0 !important; }

/* make .form-list-nav match rest of theme */
nav.form-list-nav, table.table>thead>th { background: #ebe0d0; }
.bg-dark nav.form-list-nav, .bg-dark table.table>thead th { background: #333; }

/* make nav-tabs background match rest of theme; add borders around tabs in dark theme like in light theme */
.nav-tabs>li>a { background-color: #ebe0d0; border-color: #ddd; }
.bg-dark .nav-tabs>li>a { background-color: #333; border-color: black; }
/* Bounded tab panel (Aspen contract v1.10.4, card #983): the tabs widget's content area is a
   visible panel continuous with the active tab. Scoped to the tabs macro's wrapper
   (data-tabs-parm-name, emitted unconditionally by DefaultScreenMacros.vuet.ftl) so
   hand-written .tab-content markup elsewhere (Login.ftl, InvoicesTabs.xml) is untouched.
   No top border: ul.nav-tabs already draws that edge. The :last-child reset removes the
   10px div.panel bottom margin so the last box sits flush on the panel's bottom border. */
div[data-tabs-parm-name] > div.tab-content {
  border: 1px solid var(--aspen-panel-border);
  border-top: none;
  border-radius: 0 0 4px 4px;
  padding: 10px;
  background: var(--aspen-bg);
}
div[data-tabs-parm-name] > div.tab-content > div.tab-pane > div.panel:last-child { margin-bottom: 0; }

/* makes form-list header row titles plain white; needed? without is 245,245,245 */
.bg-dark div.form-title { color: white; }

/* Explicit variation styles */
.text-min:not(input) { width: 1%; white-space: nowrap; }
.block { display: block !important; }
p.no-margin { margin: 0; }
.w5 { width: 5em; }
.w10 { width: 10em; }
.w15 { width: 15em; }
.nowrap { white-space: nowrap; }
.text-bold {font-weight: bold !important; }
.text-left {text-align: left !important; }
.text-float-left {float: left !important; }
.text-center {text-align: center !important; }
.text-right {text-align: right !important; }
.text-inline {display: inline !important;}
.text-block {display: block !important;} /* same as block, but after text-inline */
.text-block-center {display: block !important; text-align: center !important; }
.text-float-right {float: right !important; }
.text-italic {font-style: italic !important; }
.text-overline {text-decoration: overline; }
.text-underline {text-decoration: underline; }
.text-line-through {text-decoration: line-through !important; -webkit-text-decoration-line: line-through !important;}
.text-transparent { color: transparent; }
.text-red { color: red !important; }
.text-darkred { color: darkred !important; }
.text-gray { color: gray !important; }
.text-boxheader { line-height : 17.6px; font-size : 16px; }
.bg-dark .text-darkred { color: red !important; }

.display-auto { display:auto; }
.display-none { display:none; }

.shaded-area.condensed { margin-bottom: 10px; }

/* Use for aligning display text with input text */
.input-align-top    { padding-top   : 0.50em; }
.input-align-right  { padding-right : 0.94em; }
.input-align-bottom { padding-bottom: 0.49em; }
.input-align-left   { padding-left  : 0.94em; }
.input-align-vertical { line-height : 2.43em; }

.input-pad-right { padding-right: 2em; }
.input-margin-top { margin-top: 1em; }
hr.narrow { margin: 0; }

.min-width-50,
select.min-width-50 + span.select2.select2-container { min-width: 50px !important; }
.min-width-75,
select.min-width-75 + span.select2.select2-container { min-width: 75px !important; }
.min-width-100,
select.min-width-100 + span.select2.select2-container { min-width: 100px !important; }
.min-width-125,
select.min-width-125 + span.select2.select2-container { min-width: 125px !important; }
.min-width-150,
select.min-width-150 + span.select2.select2-container { min-width: 150px !important; }
.min-width-175,
select.min-width-175 + span.select2.select2-container { min-width: 175px !important; }
.min-width-200,
select.min-width-200 + span.select2.select2-container { min-width: 200px !important; }
.min-width-250,
select.min-width-250 + span.select2.select2-container { min-width: 250px !important; }
.min-width-300,
select.min-width-300 + span.select2.select2-container { min-width: 300px !important; }
.min-width-350,
select.min-width-350 + span.select2.select2-container { min-width: 350px !important; }
.min-width-400,
select.min-width-400 + span.select2.select2-container { min-width: 400px !important; }
.min-width-450,
select.min-width-450 + span.select2.select2-container { min-width: 450px !important; }
.min-width-500,
select.min-width-500 + span.select2.select2-container { min-width: 500px !important; }
.min-width-550,
select.min-width-550 + span.select2.select2-container { min-width: 550px !important; }
.min-width-600,
select.min-width-600 + span.select2.select2-container { min-width: 600px !important; }
.min-width-650,
select.min-width-650 + span.select2.select2-container { min-width: 650px !important; }
.min-width-700,
select.min-width-700 + span.select2.select2-container { min-width: 700px !important; }
.min-width-750,
select.min-width-750 + span.select2.select2-container { min-width: 750px !important; }
.min-width-800,
select.min-width-800 + span.select2.select2-container { min-width: 800px !important; }
.min-width-850,
select.min-width-850 + span.select2.select2-container { min-width: 850px !important; }

.max-width-50,
select.max-width-50 + span.select2.select2-container { max-width: 50px !important; }
.max-width-75,
select.max-width-75 + span.select2.select2-container { max-width: 75px !important; }
.max-width-100,
select.max-width-100 + span.select2.select2-container { max-width: 100px !important; }
.max-width-125,
select.max-width-125 + span.select2.select2-container { max-width: 125px !important; }
.max-width-150,
select.max-width-150 + span.select2.select2-container { max-width: 150px !important; }
.max-width-175,
select.max-width-175 + span.select2.select2-container { max-width: 175px !important; }
.max-width-200,
select.max-width-200 + span.select2.select2-container { max-width: 200px !important; }
.max-width-250,
select.max-width-250 + span.select2.select2-container { max-width: 250px !important; }
.max-width-300,
select.max-width-300 + span.select2.select2-container { max-width: 300px !important; }
.max-width-350,
select.max-width-350 + span.select2.select2-container { max-width: 350px !important; }
.max-width-400,
select.max-width-400 + span.select2.select2-container { max-width: 400px !important; }
.max-width-450,
select.max-width-450 + span.select2.select2-container { max-width: 450px !important; }
.max-width-500,
select.max-width-500 + span.select2.select2-container { max-width: 500px !important; }
.max-width-550,
select.max-width-550 + span.select2.select2-container { max-width: 550px !important; }
.max-width-600,
select.max-width-600 + span.select2.select2-container { max-width: 600px !important; }
.max-width-650,
select.max-width-650 + span.select2.select2-container { max-width: 650px !important; }
.max-width-700,
select.max-width-700 + span.select2.select2-container { max-width: 700px !important; }
.max-width-750,
select.max-width-750 + span.select2.select2-container { max-width: 750px !important; }
.max-width-800,
select.max-width-800 + span.select2.select2-container { max-width: 800px !important; }
.max-width-850,
select.max-width-850 + span.select2.select2-container { max-width: 850px !important; }

/* select2 hides the original select with .select2-hidden-accessible (position:absolute, clip,
   width:1px !important) — but the .min-width-* utilities above still apply to it, and min-width
   beats width, so every hidden select became an invisible 200-250px box sticking out past its
   grid and dragging blank horizontal scroll onto the page (card #904 push-back). left:0 matters
   too: absolute elements escape a plain overflow-x box (it isn't positioned), so even a 1px
   select at its static position inside a wide scrolled grid still pokes past the viewport.
   The visible select2 container keeps its width via the sibling rules above. */
select.select2-hidden-accessible { min-width: 0 !important; left: 0 !important; }


div.checkbox-align > span {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

div.checkbox-align > span > input[type=checkbox] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -3px;
    *overflow: hidden;
}

div.radio-align > span {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

div.radio-align > span > input[type=radio] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -3px;
    *overflow: hidden;
}div.radio-align > div {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}

div.radio-align > div > input[type=radio] {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -3px;
    *overflow: hidden;
}


/* Tighten up the nav bread crumbs a bit */
.navbar-inverse .navbar-nav > li > a { font-size: 1.1em; color: #DDD; padding-left: 7px; padding-right: 7px; }
.navbar-text { font-size: 1.1em; line-height: 20px; margin-left: 7px; margin-right: 7px; }
#navbar-buttons > .navbar-text { font-style: oblique; }

/* Bootstrap tooltips must stack above the AFS detail/dialog overlays (custom fixed overlays at
   z-index ~1000002); Bootstrap's default 1070 leaves a tooltip hidden behind any such overlay */
.tooltip { z-index: 1000005; }

/* Our custom, more terse, pagination navigation */
nav.form-list-nav ul.pagination { float: left !important; }
nav.form-list-nav ul.pagination li a.current-page { background-color: #c6d7ec !important; }

/* Right align numeric fields in forms */
td .BigDecimal, td .BigInteger, td .Long, td .Double, td .Float, td .Integer, td .Number {
  text-align: right; display: inline-block; width:100%; }
/* Right align inputs for numeric fields in form-list, but not form-single */
td > input.form-control.number { float:right; }

/* Right align numeric data inside inputs */
input.number { text-align: right; display: inline-block; }

/* For aligning text when intermingled with inputs in columns */
/* <label text="&amp;nbsp;" encode="false" style="inputAlign"/> */
span.inputAlign { display:inline-block; width:.94em; }

/* DEJ NOTE: these should not be needed, there is some sensitive formatting that these cause issues with too
    see webroot-layout.css around line 115 with comment "Similar styles to Bootstrap .form-control-static"

/ * Fixes form-single alignment when there are no text inputs * /
div.form-group > div > span, div.form-group > div > a { display: inline-block; padding-top: 7px; }
/ * Fix the fix because selects are treated differently * /
div.form-group > div > span.select2 { padding-top: initial; }
*/

/* This may be better to set by $.fn.select2.defaults.set("minimumResultsForSearch", "0"); and
   override the default for moqui in MoquiLib.js.  It makes it so all dropdowns offer the
   search as you type functionality */
span.select2-search.select2-search--dropdown.select2-search--hide {display: block;}
td span.select2-container,
th span.select2-container {margin-top:0; margin-bottom: 1px;}
select.dynamic-options.select2-hidden-accessible {margin-top:0 !important;}

/* TODO: notes needed for these */
.btn-sm, .btn-group { padding-left: 9px; }
.btn-compact { padding: 0 2px; }

/* Make material icons larger */
i.mdi { font-size: 12px; }

/* Make ionicons larger */
i.icon { font-size: 12px; }

/* Change spacing around buttons so they align better with input fields */
th .btn, td .btn {margin: 1px 4px 1px 0;}
button.btn, th a.btn, td a.btn, div.panel-toolbar > button.btn {margin-top: 4px; margin-bottom: 4px;}
tr.first button.btn, tr.second button.btn, div.form-group button.btn {margin-top: 2px !important; margin-bottom: 2px !important;}
div.form-header-field > a.btn {margin-top: 0px !important;}

div.input-group.date {margin-top: 0; margin-bottom: 2px}

.form-group {margin-bottom: 5px;}
.panel-body > .form-group:last-child { margin-bottom: 0; }
th > .form-group, td > .form-group { margin-bottom: 0px; }

div.panel { margin-bottom: 10px }

/* Fix the navigation and search control alignment */
nav.form-list-nav button.btn, nav.form-list-nav a.btn { margin-top: 0px; }
nav.form-list-nav > .btn-group { margin-top: 0; padding-left: 0; }
nav.form-list-nav ul.pagination { margin-top: 0px; }
nav.form-list-nav > form.form-inline { margin-top: 0px; }
nav.form-list-nav input[type=text] { margin-top: -4px; }

/* Don't make the header input boxes bold; it affects alignment */
th * {font-weight:normal; }
/* Make the date objects not have an extra 39px on their right */
div.input-group.date { margin-right:0; }

/* Modal Over/Under Field Header/Input */
/*div.modal-dialog .col-md-1,
div.modal-dialog .col-md-2,
div.modal-dialog .col-md-3,
div.modal-dialog .col-md-4,
div.modal-dialog .col-md-5,
div.modal-dialog .col-md-6,
div.modal-dialog .col-md-7,
div.modal-dialog .col-md-8,
div.modal-dialog .col-md-9,
div.modal-dialog .col-md-10,
div.modal-dialog .col-md-11,
div.modal-dialog .col-md-12,
div.modal-dialog .col-sm-1,
div.modal-dialog .col-sm-2,
div.modal-dialog .col-sm-3,
div.modal-dialog .col-sm-4,
div.modal-dialog .col-sm-5,
div.modal-dialog .col-sm-6,
div.modal-dialog .col-sm-7,
div.modal-dialog .col-sm-8,
div.modal-dialog .col-sm-9,
div.modal-dialog .col-sm-10,
div.modal-dialog .col-sm-11,
div.modal-dialog .col-sm-12 {
  float: initial;
  white-space: nowrap;
  width: auto;
}
*/

/* Trim the padding on the outside gutters in a container row */
/*
div > div.row > div.col-xs-1:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-1:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-1:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-1:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-2:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-2:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-2:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-2:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-3:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-3:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-3:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-3:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-4:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-4:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-4:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-4:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-5:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-5:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-5:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-5:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-6:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-6:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-6:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-6:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-7:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-7:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-7:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-7:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-8:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-8:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-8:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-8:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-9:first-child:not(.datepicker, .pad),  div > div.row > div.col-sm-9:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-9:first-child:not(.datepicker, .pad),  div > div.row > div.col-lg-9:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-10:first-child:not(.datepicker, .pad), div > div.row > div.col-sm-10:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-10:first-child:not(.datepicker, .pad), div > div.row > div.col-lg-10:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-11:first-child:not(.datepicker, .pad), div > div.row > div.col-sm-11:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-11:first-child:not(.datepicker, .pad), div > div.row > div.col-lg-11:first-child:not(.datepicker, .pad),
div > div.row > div.col-xs-12:first-child:not(.datepicker, .pad), div > div.row > div.col-sm-12:first-child:not(.datepicker, .pad),
div > div.row > div.col-md-12:first-child:not(.datepicker, .pad), div > div.row > div.col-lg-12:first-child:not(.datepicker, .pad) {
  padding-left: 5px; }

div > div.row > div.col-xs-1:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-1:last-child:not(:first-child, .pad),
div > div.row > div.col-md-1:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-1:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-2:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-2:last-child:not(:first-child, .pad),
div > div.row > div.col-md-2:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-2:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-3:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-3:last-child:not(:first-child, .pad),
div > div.row > div.col-md-3:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-3:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-4:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-4:last-child:not(:first-child, .pad),
div > div.row > div.col-md-4:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-4:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-5:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-5:last-child:not(:first-child, .pad),
div > div.row > div.col-md-5:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-5:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-6:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-6:last-child:not(:first-child, .pad),
div > div.row > div.col-md-6:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-6:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-7:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-7:last-child:not(:first-child, .pad),
div > div.row > div.col-md-7:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-7:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-8:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-8:last-child:not(:first-child, .pad),
div > div.row > div.col-md-8:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-8:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-9:last-child:not(:first-child, .pad),  div > div.row > div.col-sm-9:last-child:not(:first-child, .pad),
div > div.row > div.col-md-9:last-child:not(:first-child, .pad),  div > div.row > div.col-lg-9:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-10:last-child:not(:first-child, .pad), div > div.row > div.col-sm-10:last-child:not(:first-child, .pad),
div > div.row > div.col-md-10:last-child:not(:first-child, .pad), div > div.row > div.col-lg-10:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-11:last-child:not(:first-child, .pad), div > div.row > div.col-sm-11:last-child:not(:first-child, .pad),
div > div.row > div.col-md-11:last-child:not(:first-child, .pad), div > div.row > div.col-lg-11:last-child:not(:first-child, .pad),
div > div.row > div.col-xs-12:last-child:not(:first-child, .pad), div > div.row > div.col-sm-12:last-child:not(:first-child, .pad),
div > div.row > div.col-md-12:last-child:not(:first-child, .pad), div > div.row > div.col-lg-12:last-child:not(:first-child, .pad) {
  padding-right: 5px; }
*/

/* Tighten up the padding on panel-body and .table-condensed>tbody>tr>td */
.panel-body { padding: 7px; overflow: auto; }
.table-condensed>tbody>tr>td { padding: 2px; }
.panel-body>table.table { margin: -7px; width: calc(100% + 14px); max-width: none; }
.panel-body>div.row { margin-left: -7px; margin-right: -7px; }

table.pad-right>tr>td {
  padding-right: 3px;
}

table.extra-space {
  margin-bottom: 10px;
}
table.extra-space>tr>td {
  padding-right: 3px;
}
table.extra-space>tr>td:nth-child(2), table.extra-space>tr>td:nth-child(4) {
  padding-right: 10px;
}

table > thead > tr > th {
    vertical-align: bottom !important;
}


/* TODO: Only apply this when the screen is at full width 992 */
@media screen and (min-width: 768px) {
  div.bootstrap-datetimepicker-widget {
    width: 29em !important;
  }
}

div.timepicker-picker a.btn {
  margin-right: 0px;
}

div.timepicker-picker span.timepicker-hour,
div.timepicker-picker span.timepicker-minute {
  margin-right: 2px;
}

/* Change the formatting of date-find so it doesn't necessarily wrap. Also remove the verbiage
   and put a dash between the from and thru date */
div.modal-content .form-date-find { display:inline-block; }
div.modal-content .form-date-find > span { display:none; }
div.modal-content .form-date-find:first-child > div { margin-right: .85em; }
div.modal-content .form-date-find:not(:first-child):before { content:'-'; padding-right:1em; }
thead > tr .form-date-find > span { display:none; }

/* Change the formatting of range-find so it doesn't necessarily wrap. Also remove the verbiage
   and put a dash between the from and thru range */
div.modal-content .form-range-find { display:inline-block; }
div.modal-content .form-range-find > span { display:none; }
div.modal-content .form-range-find:first-child > input { margin-right: .85em; }
div.modal-content .form-range-find:not(:first-child):before { content:'-'; padding-right:1em; }
thead > tr .form-range-find { text-align:right; }
thead > tr .form-range-find > span { display:none; }

/* Animate the collapse/reveal of field-group bodies */
div.panel-collapse {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
div.panel-collapse.collapse {
  display: block;
  visibility: hidden;
   opacity: 0;
  max-height: 0;
  overflow: hidden;
}
div.panel-collapse.collapse.in {
  display: block;
  visibility: visible;
  opacity: 1;
  max-height: 99999px;
  overflow: visible;
}
table.top > thead > tr > th,
table.top > tbody > tr > td{
  vertical-align:top;
}
table.bottom > thead > tr > th,
table.bottom > tbody > tr > td{
  vertical-align:bottom;
}

/* Delineate the bottom of form-list headers */
thead > tr:last-child > th {
  border-bottom: 2px solid #BBBBBB;
}

table > tbody > tr.first > td,
table > tbody > tr.first:hover > td {
  background-color: #7F8CA9 !important;
}
table > tbody > tr.second > td,
table > tbody > tr.second:hover > td {
  background-color: #606E8E !important;
}
.bg-dark table > tbody > tr.first > td,
.bg-dark table > tbody > tr.second > td,
.bg-dark table > tbody > tr.first:hover > td,
.bg-dark table > tbody > tr.second:hover > td {
  background-color: #555555 !important;
}

/* Fix dark theme dialog headers */
.bg-dark .panel-heading {
  color: white;
}

/* Delineate 'first-row' in form-lists if it is not the only row */
table > tbody > tr.first:not(:last-child) > td,
table > tbody > tr.second:not(:last-child) > td,
table > tbody > tr.first:not(:last-child):hover > td,
table > tbody > tr.second:not(:last-child):hover > td {
  border-bottom: 2px solid #BBBBBB;
}


/* Change shadow (outer glow) for input elements to make them more universally visible in light or dark backgrounds */
.form-control:focus,
button:focus,
input[type=checkbox]:focus,
.select2-container--bootstrap.select2-container--focus .select2-selection,
.select2-container--bootstrap.select2-container--open .select2-selection,
.select2-container--bootstrap .select2-dropdown
{
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),  0px 0px 12px 4px rgba(165,  225,  250,  0.90) !important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),  0px 0px 12px 4px rgba(165,  225,  250,  0.90) !important;
}
/* Experimental CSS, but when it works, it fixes the double shadow on select2 drop downs */
.select2-container--bootstrap .select2-dropdown {
    clip-path: inset(0 -4px -4px -4px);
}

span.select2.select2-container { text-align: left; margin-top: 0; margin-bottom: 1px; }
div.form-group > span.select2.select2-container { margin-bottom: 2px !important; }
div.form-group > input[type=text] {margin-bottom: 2px !important;}
div.big-row-item > div.form-group { margin-top: 3px !important; margin-bottom: 3px !important; }
div.big-row-item > div.form-group > button.btn { margin-top: 0px !important; margin-bottom: 2px !important; }
div.big-row-item > div.form-group > a.btn { margin-top: 0px !important; margin-bottom: 2px !important; }

/* Fix padding when there is a drop-down in a box-header (usually they're in the box-toolbar) */
.panel-heading div.form-group { margin-bottom: 0 !important;}
.panel-heading div.big-row-item > div.form-group { margin-top: -6px !important; margin-bottom: -8px !important; }
.panel-toolbar div.big-row-item > div.form-group { margin-top: 3px !important; margin-bottom: 3px !important; }

/* Fix button positions for multiple form singles in a toolbar */
div.panel-toolbar > form:not(:first-child) div.form-group, div.panel-toolbar fieldset.form-horizontal {
  display: inline-block !important;
}
div.panel-toolbar {white-space: nowrap !important;}
div.panel-toolbar > form:not(:first-child) div.form-group > button.btn { margin-top: -20px !important; margin-bottom: 2px !important; }

div.modal-body div.panel-toolbar > form:not(:first-child) div.form-group,
div.panel-toolbar div.modal-body fieldset.form-horizontal {
  display: block !important;
}
div.panel-toolbar div.modal-body {white-space: normal !important;}


/* Align form single lines that only have a text line */
table div.form-group > div > span.text-inline { line-height : 2.43em; }

.no-tab input[type=text],
.no-tab input[type=checkbox],
.no-tab a,
.no-tab button,
.no-tab .select2-selection,
.no-tab span.glyphicon-calendar {
    opacity: 0.9 !important;
}

/* Delineate 'last-row' in form-lists */
table > tbody > tr.last > td {
  border-top: 2px solid #BBBBBB;
}
/* Dileneate 'last-row' in form-lists if it is not the actual last row (e.g. multi-form) */
/*
table > tbody > tr.last:not(:last-child) > td {
     border-bottom: 2px solid #BBBBBB;
}
*/

.faded {
    opacity: 0.65;
    filter: alpha(opacity=65); /* For IE8 and earlier */
}

/* A convenience class for vertically aligning most any element */
.vertical-align-middle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#screen-document-dialog-body {
    padding-top: 0;
}

#screen-document-dialog-body table th:not(:first-child),
#screen-document-dialog-body table td:not(:first-child) {
    padding-left: 1em;
}

div.progress-bar-message {
    color: #ffffff;
    font-weight: bold;
    margin-left: 1em;
    position: fixed;
    text-shadow: 0 0 10px #000000;
}