/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* Attempting to get input-group with search icon in navbar
.navbar .navbar-form{
    padding: 0 15px;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

*/
.table.small,
.table.small > tbody > tr > td,
.table.small > tbody > tr > td > .xdsoft_autocomplete,
.table.small > tbody > tr > td > .xdsoft_autocomplete > .form-control,
.table.small > tbody > tr > td > .form-control,
.table.small > tbody > tr > td > .form-group>.form-control,
.table.small > tbody > tr > td > .form-group>.input-group>.form-control,
.table.small > tbody > tr > td > .form-group,
.table.small > tbody > tr > td > .form-group>.input-group,
.table.small > tbody > tr > td > .form-group>div>.form-group>.input-group,
.table.small > tbody > tr > td > .form-group>div>.form-group>.input-group>.input-group-addon,
.table.small > tbody > tr > td > .form-group>.input-group>.input-group-text,
.table.small > tbody > tr > td > .form-group>div>.form-group>.input-group>.input-group-text,
.table.small > tbody > tr > td > .form-group>div>.form-group>.input-group>.form-control,
.table-sm,
.table-sm > tbody > tr > td,
.table-sm > tbody > tr > td > .xdsoft_autocomplete,
.table-sm > tbody > tr > td > .xdsoft_autocomplete > .form-control,
.table-sm > tbody > tr > td > .form-control,
.table-sm > tbody > tr > td > .form-group>.form-control,
.table-sm > tbody > tr > td > .form-group>.input-group>.form-control,
.table-sm > tbody > tr > td > .form-group,
.table-sm > tbody > tr > td > .form-group>.input-group,
.table-sm > tbody > tr > td > .form-group>div>.form-group>.input-group,
.table-sm > tbody > tr > td > .form-group>div>.form-group>.input-group>.input-group-addon,
.table-sm > tbody > tr > td > .form-group>.input-group>.input-group-text,
.table-sm > tbody > tr > td > .form-group>div>.form-group>.input-group>.input-group-text,
.table-sm > tbody > tr > td > .form-group>div>.form-group>.input-group>.form-control,
.spa-page .container.small .form-control,
div.row.small >div>div.form-group>.form-control,
div.row.small >div>div.form-group>.input-group>.form-control,
div.row.small >div>div.form-group,
div.row.small >div>div.form-group>label,
div.row.small >div>label,
div.row.small >div>div.form-group>div>.form-group>.input-group,
div.row.small >div>div.form-group>div>.form-group>.input-group>.input-group-addon,
div.row.small >div>div.form-group>.input-group>.input-group-text,
div.row.small >div>div.form-group>div>.form-group>.input-group>.input-group-text,
div.row.small >div>div.form-group>div>.form-group>.input-group>.form-control
{
  font-size: 8pt;
  padding: 1px!important;
  width: initial;
  line-height:inherit;
  height:inherit
}

/* BS5 sets .input-group > .form-control { flex: 1 1 auto; width: 1% } so the
   input grows to fill the input-group regardless of its size attribute. In
   compact tables we want the input to size to its content (per size= attr),
   so override flex/min-width here. width:initial is already set by the 8pt
   block above. */
.table.small > tbody > tr > td > .form-group>.input-group>.form-control,
.table.small > tbody > tr > td > .form-group>div>.form-group>.input-group>.form-control,
.table-sm > tbody > tr > td > .form-group>.input-group>.form-control,
.table-sm > tbody > tr > td > .form-group>div>.form-group>.input-group>.form-control,
div.row.small >div>div.form-group>.input-group>.form-control,
div.row.small >div>div.form-group>div>.form-group>.input-group>.form-control {
  flex: 0 0 auto;
  min-width: 0;
}
div.row.small >div
{
	padding: 1px!important;
	}
.table.small > tbody > tr > td > .form-group>div>.form-group,
.table-sm > tbody > tr > td > .form-group>div>.form-group
{
	margin-bottom:0
}
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group-addon,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group-text,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.input-group-addon,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.input-group-text,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.form-control,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.control-label,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-control,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-control>div,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>div>label>.form-control,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group>.input-group-addon,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group>.input-group-text,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group>.form-control,
.panel.small>.panel-body>.tab-content>.tab-pane>.panel .form-group>div>.form-control,
.panel.small>.panel-body>.tab-content>.tab-pane>.panel .form-group>.input-group,
.panel.small>.panel-body>.tab-content>.tab-pane>.panel .form-group>.input-group>.input-group-addon,
.panel.small>.panel-body>.tab-content>.tab-pane>.panel .form-group>.input-group>.input-group-text,
.panel.small>.panel-body>.tab-content>.tab-pane>.panel  .form-group>.input-group>.form-control,
.panel.small>.panel-body>.tab-content>.tab-pane>.panel  .form-group>.control-label{
  font-size: 8pt;
  padding: 1px 2px;
padding-top: 0px;
  /*width: auto;*/
  line-height:inherit;
  height:inherit;
  min-height:inherit;
}
.panel.small>.panel-body>.tab-content>.tab-pane>.panel .form-group,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group{
  /*width: inherit;*/
  margin-right:0;
  margin-left:0;
  margin-bottom:1px;
}
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group-addon,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group-text,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.input-group-addon,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.input-group-text,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.form-control,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.control-label,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-control,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-control>div,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>div>label>.form-control,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group>.input-group-addon,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group>.input-group-text,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group>.input-group>.form-control,
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel .form-group>div>.form-control,
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel .form-group>.input-group,
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel .form-group>.input-group>.input-group-addon,
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel .form-group>.input-group>.input-group-text,
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel  .form-group>.input-group>.form-control,
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel  .form-group>.control-label{

  padding: 1px 2px;
padding-top: 0px;
  /*width: auto;*/
  line-height:inherit;
  height:inherit;
  min-height:inherit;
}
.panel.compact>.panel-body>.tab-content>.tab-pane>.panel .form-group,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>div>.form-group{
  /*width: inherit;*/
  margin-right:0;
  margin-left:0;
  margin-bottom:1px;
}

.form-horizontal .form-group .form-group{
    margin-left: 0;
    margin-right: 0;
}
/*
.modal.small > form.modal-dialog > .modal-content > .modal-body > .form-group>.control-label{
  width:calc();
}
*/

 td > .form-control{
  display: inline;
  width: inherit;
  height: initial;
}
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
    line-height:inherit;
}
.table.small > tbody > tr > td > textarea.form-control{
  width: 100%;
}
.navbar-form *.form-control{
  width: inherit;
  margin-right: 3px;
}
div.navbar *.container-fluid{
  width:inherit;
}

.navbar .navbar-avatar{
  max-height: 40px;
  border-radius: 50%;
  border-top-left-radius: 50%;
    border-top-right-radius : 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    float: left;
}

div.navbar.navbar-xs { min-height:28px; }
.navbar-xs.navbar-brand{ padding: 8px 8px;font-size: 16px;line-height: 18px; }
.navbar-xs.navbar-nav > li > a {  padding-top: 7px; padding-bottom: 7px; line-height: 20px; }
div.navbar.navbar-sm { min-height:40px; }
.navbar-sm.navbar-brand{ padding: 12px 12px;font-size: 16px;line-height: 18px; }
.navbar-sm.navbar-nav > li > a { padding-top: 12px; padding-bottom: 12px; line-height: 20px; }
table.editable>tbody>tr>td.editing { padding:0!important; }
table.editable>tbody>tr>td:hover, table.editable>tbody>tr>th:hover, table.selectable>tbody>tr:hover>td, table.selectable>tbody>tr:hover>th {
  background-color: #550055;
  color:#eeeeee;
}
table.editable>tbody>tr>td:active, table.editable>tbody>tr>th:active table.selectable>tbody>tr:active>td, table.selectable>tbody>tr:active>th {
  background-color: #CBED2C;
  color:#eeeeee;
}
.table-striped > thead > tr:nth-child(2n+1) > th,
.table-hover > thead > tr:hover >th,
.table-striped > tbody > tr:nth-child(2n+1) > th,
.table-hover > tbody > tr:hover >th,
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
 th {
  /*background: #404853;
  background: linear-gradient(#687587, #404853);
  */
  background: rgb(243,243,243); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(243,243,243,1) 0%, rgba(219,219,219,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,1)), color-stop(100%,rgba(219,219,219,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(219,219,219,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(219,219,219,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(243,243,243,1) 0%,rgba(219,219,219,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(243,243,243,1) 0%,rgba(219,219,219,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f3', endColorstr='#dbdbdb',GradientType=0 ); /* IE6-9 */
  /*
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);

  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  padding: 9px 8px 7px 8px;
  */
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6);
  border: 1px outset;
  /*border-color: #808080;*/
  border-color: #C0C0C0;
  /* font-weight intentionally not set here — let th.tablesubtitle / th.tabletitle / browser default win, so hover doesn't strip the bold */
}
.table-striped > thead > tr:nth-child(2n+1) > th.tablelabel,
.table-hover > thead > tr:hover >th.tablelabel,
.table-striped > tbody > tr:nth-child(2n+1) > th.tablelabel,
.table-hover > tbody > tr:hover >th.tablelabel,
.table-condensed > thead > tr > th.tablelabel,
.table-condensed > tbody > tr > th.tablelabel,
 th.tablelabel {
   width:25%;
   max-width:150px;
   text-align:right;
   border:0;
   white-space:normal;
}


.table-striped > tbody > tr:nth-child(2n+1) >th.agentordermodified,
 .table-hover > tbody > tr:hover > th.agentordermodified,
 th.agentordermodified { background-color: yellow; border-bottom: thin outset; border-right: thin outset; }

.table-striped > tbody > tr:nth-child(2n+1) >th.agentorderack,
 .table-hover > tbody > tr:hover > th.agentorderack,
 th.agentorderack { background-color: lime; border-bottom: thin outset; border-right: thin outset; }

.table-striped > tbody > tr:nth-child(2n+1) >td.agentordermodified,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentordermodified,
 .table-hover > tbody > tr:hover >td.agentordermodified,
 td.agentordermodified,
 tr.agentordermodified { background-color: yellow;}

.table-striped > tbody > tr:nth-child(2n+1) >td.agentorderack,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentorderack,
 .table-hover > tbody > tr:hover >td.agentorderack,
 td.agentorderack,
 tr.agentorderack { background-color: lime;}

.table-striped > tbody > tr:nth-child(2n+1) >td.agentorderrush,
 .table-hover > tbody > tr:hover >td.agentorderrush,
 td.agentorderrush { background-color: pink;}

 .table-striped > tbody > tr:nth-child(2n+1) >td.agentorderpaidrush,
 .table-hover > tbody > tr:hover >td.agentorderpaidrush,
 td.agentorderpaidrush { background-color: red;}

.table-striped > tbody > tr:nth-child(2n+1) >td.agentordernewclient,
 .table-hover > tbody > tr:hover >td.agentordernewclient,
 td.agentordernewclient { background-color: lime;}

.table-striped > tbody > tr:nth-child(2n+1) >span.agentorderoverdue,
 .table-striped > tbody > tr:nth-child(2n+1) >td.agentorderoverdue,
 .table-striped > tbody > tr:nth-child(2n+1) >th.agentorderoverdue,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentorderoverdue,
 .table-hover > tbody > tr:hover >span.agentorderoverdue,
 .table-hover > tbody > tr:hover >td.agentorderoverdue,
 .table-hover > tbody > tr:hover >th.agentorderoverdue,
 span.agentorderoverdue,
 td.agentorderoverdue,
 th.agentorderoverdue,
 tr.agentorderoverdue { background-color: #66CCFF;}

.table-striped > tbody > tr:nth-child(2n+1) >span.agentordercoot,
 .table-striped > tbody > tr:nth-child(2n+1) >td.agentordercoot,
 .table-striped > tbody > tr:nth-child(2n+1) >th.agentordercoot,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentordercoot,
 .table-hover > tbody > tr:hover >span.agentordercoot,
 .table-hover > tbody > tr:hover >td.agentordercoot,
 .table-hover > tbody > tr:hover >th.agentordercoot,
 span.agentordercoot,
 td.agentordercoot,
 th.agentordercoot,
 tr.agentordercoot { background-color: #FE9967;}


.table-striped > tbody > tr:nth-child(2n+1) >span.agentordercomquote,
 .table-striped > tbody > tr:nth-child(2n+1) >td.agentordercomquote,
 .table-striped > tbody > tr:nth-child(2n+1) >th.agentordercomquote,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentordercomquote,
 .table-hover > tbody > tr:hover >span.agentordercomquote,
 .table-hover > tbody > tr:hover >td.agentordercomquote,
 .table-hover > tbody > tr:hover >th.agentordercomquote,
 span.agentordercomquote,
 td.agentordercomquote,
 th.agentordercomquote,
 tr.agentordercomquote { background-color: #FF0FCF;}

.table-striped > tbody > tr:nth-child(2n+1) >span.agentprescreenwaiting,
 .table-striped > tbody > tr:nth-child(2n+1) >td.agentprescreenwaiting,
 .table-striped > tbody > tr:nth-child(2n+1) >th.agentprescreenwaiting,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentprescreenwaiting,
 .table-hover > tbody > tr:hover >span.agentprescreenwaiting,
 .table-hover > tbody > tr:hover >td.agentprescreenwaiting,
 .table-hover > tbody > tr:hover >th.agentprescreenwaiting,
 span.agentprescreenwaiting,
 td.agentprescreenwaiting,
 th.agentprescreenwaiting,
 tr.agentprescreenwaiting { background-color: #66CC00;}
span.required {
  color: red;
  text-decoration: none;
  font: normal 6pt sans-serif;
  }
.table-striped > tbody > tr:nth-child(2n+1) >span.agentorderduetoday,
 .table-striped > tbody > tr:nth-child(2n+1) >td.agentorderduetoday,
 .table-striped > tbody > tr:nth-child(2n+1) >th.agentorderduetoday,
 .table-striped > tbody > tr:nth-child(2n+1) >tr.agentorderduetoday,
 .table-hover > tbody > tr:hover >span.agentorderduetoday,
 .table-hover > tbody > tr:hover >td.agentorderduetoday,
 .table-hover > tbody > tr:hover >th.agentorderduetoday,
 span.agentorderduetoday,
 td.agentorderduetoday,
 th.agentorderduetoday,
 tr.agentorderduetoday { background-color: #CC99CC;}


/*
.navbar-brand img
{
  max-height: 35px;
}
@media (max-width:320px) {
.navbar-brand img{
  max-height: 25px;
}
}
*/
span.tabletitle {
    color: #990000;
    /*font-size: 9pt;*/
    font-weight: bold;
}
span.tablelabel {
    /*background-color: #F3F3F3;
    font-size: 8pt;*/
}
span.tablesubtitle {
    /*font-size: 8pt;*/
}
th.tablesubtitle {
    /*background-color: #F3F3F3;*/
    /*border: 1px outset;*/
    /*font-size: 8pt;*/
    font-weight: 500;
}
span.tabletitle {
    color: #990000;
    /*font-size: 9pt;*/
    font-weight: bold;
}
th.tabletitle {
    /*background-color: #F3F3F3;*/
    /*border: 1px outset;*/
    /*font-size: 9pt;*/
    font-weight: 500;
}

table {
    border: 1px outset #FFFFFF;
}

/*a little color help when the tabs are on a background color like a panel-heading*/
.nav-tabs>li> a{
  background-color: #f3f3f3;
  border: 1px solid;
}

.small .panel-tabs>div.panel-heading,
.panel-tabs>div.panel-heading,
.small .panel-tabs>div.panel-heading,
.panel-tabs>div.panel-heading {
  padding:0;
  border-bottom:0px;
}

.panel .small .panel-heading .panel-title,
.panel .small .panel-heading,
.small .panel>.panel-heading,
.small .panel>.list-group> li,
.small .panel>.panel-body>.list-group> li {
  line-height: 100%;
  padding:4px;
  font-size:10pt;
}
.panel .small .panel-heading .panel-title{
    padding:0px;
}
.panel .small .panel-heading,
.small .panel .panel-heading,
.small .panel>.panel-heading{
    padding:8px;
  }
.small .panel {
    padding-left:0;
    padding-right:0
}
 .small .panel>.panel-body,
 .small .panel>.list-group,
 .small .panel>.panel-body>.list-group{
   margin:0;
   padding:0;
 }
 .container>.small>.panel-body>.row{
   margin-left:0;
   margin-right:0;
 }
checkbox.formcontrol {
  width:inherit;
}
input[type=checkbox]:not(.form-check-input),
input[type=radio]:not(.form-check-input) {
    width: inherit;
}
input.money,
input.ws-number,
input[type=number] {
  text-align: right;
}
/*ie <10 placeholder support*/
.placeholder { color: #aaa; }

.navbar-text {
  margin-top:1px;
  margin-bottom:1px;
    margin-right: 15px;
    margin-left: 15px;
    white-space: nowrap;
  overflow: hidden;
}

div.checkbox>label input,
div.radio>label input{margin:inherit;
  height:inherit;
  min-height:inherit;
}
.form-horizontal div.radio{
min-height:inherit;
}

.panel-heading .accordion-toggle:before {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: left;        /* adjust as needed */
    color: grey;         /* adjust as needed */
  display:block;
  /*display:inline-table;*/
}
.panel-heading .accordion-toggle.collapsed:before {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
/* Force the accordion to claim its own row when nested inside a flex/
   form-row parent (otherwise it becomes a narrow flex item and renders
   inline with the previous element). */
.accordion {
    flex: 0 0 100%;
    width: 100%;
}
/* Accordion status sub-row — inserted between .accordion-header and
   .accordion-collapse by kg_accordion_item:oStatus when app code attaches
   badges to the header. Always visible regardless of expand/collapse state. */
.accordion-item > .accordion-status {
    padding: .35rem .75rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    background-color: var(--bs-tertiary-bg);
    font-size: .875em;
}
.form-control.select2-container {display:block}
fieldset {
    border-radius: 10px;
    background: #eee;
    margin: 10px;
    padding: 20px;
  padding-top:30px;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    position: relative;
    border: 2px groove threedface;
}
fieldset legend {
    position: absolute;
    top: -2px;
    background: #fff;
    padding: 10px 20px;
    border: 2px groove threedface;
    border-top: none;
    box-shadow: inset 0 -5px 5px rgba(0,0,0,.2);
    text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    font-weight: bold;
  width: inherit;
  display: block;
    /*margin: -20px;*/
    background: #fff;
    padding: 0px 20px;
}
hr {border-style: inherit}
th > h4 {margin-top:0;margin-bottom:0;margin-right:20px;display:inline;}
th > .label {font-size:inherit;margin:2px;text-shadow:initial;font-weight:inherit;}
.panel-heading>.glyphicon {margin-right:5px;}
.panel-footer .button-next{
   float:right;
}
.panel-footer .button-next span.glyphicon,
.panel-footer .button-submit span.glyphicon{
   margin-left:5px;
}
.panel-footer .button-back span.glyphicon{
   margin-right:5px;
}

.small >tbody>tr>th,
.small >tbody>tr>td
{
  padding:2px;
}
.tablelabel>label{
  margin-bottom:inherit;
  font-weight:normal;
  margin-right:5px;
  margin-left:5px;
  /*width:auto;
  display:block;*/
/* needed for IE8 */
  /*float:right;*/
}

.tablelabel>.glyphicon{
  /*width:auto;
  display:block;*/
  /*float:right;*/
}

.small th>h4{
  font-size:9pt;
  font-weight:bold;
}
@media print {
  a[href]:after {
    content: "";
  }
}
@media print{.table-responsive {
    overflow-x: inherit;
    overflow-y: inherit;
    -webkit-overflow-scrolling: inherit;
    -ms-overflow-style: inherit;
  }
}
.tasknode .panel-body,
  .tasknode .list-group-item,
  .tasknode .panel-heading{
    padding-top:0;padding-bottom:0;
    padding-right:0;
    }
.tasknode .list-group-item{
  border-bottom:0;
  border-right:0;
}
.tasknode .list-group{
  margin-bottom:0;
  border-radius:0;
  box-shadow:initial;
  border-bottom:0;
  border-top:0;
  border-right:0;}
.tasknode .list-group-item:first-child,
  .tasknode .list-group-item:last-child{border-radius:0;}
.tasknode .panel-heading{display:flex;}
.tasknode .panel-heading input {
  height:inherit;
}
.small .list-group li {
  line-height: 100%;
  padding:4px;
  font-size:10pt;
}

.tab-content > .active {
    background-color: #fff;
}
.navbar.nav-tabs{
  min-height:inherit;
  margin-bottom:0;
  padding:4px;
  padding-bottom:0;
}
.form-horizontal td >.form-group>.form-control,
.form-horizontal td >.btn-toolbar,
.form-horizontal td .btn-toolbar .form-control,
.form-inline td >.form-group>.form-control,
.form-inline td >.btn-toolbar,
.form-inline td .btn-toolbar .form-control
{
  display:inline;
}
td .selectize-control.form-control,
td .selectize-control.form-select{
  display:inline-block;
}
div .selectize-control.form-control,
div .selectize-control.form-select{
   text-align: left;
}
/* BS5 .form-select has display:block + width:100%.  Selectize copies the
   <select>'s class onto its wrapper, so the widget landed on its own line
   next to sibling inputs in a td.  Inside a td keep inline+auto so it flows
   alongside siblings; everywhere else let width:100% fill the parent. */
td > .selectize-control.form-select,
td .selectize-control.form-select{
   display: inline-block;
   width: auto;
}
.selectize-control.form-select{
   display: block;
   width: 100%;
}
/* BS5 native <select class="form-select"> sizing. The big 8pt-everything rule
   block at the top of this file targets .form-control in small/sm/compact
   contexts; BS5 dropdowns are .form-select (not .form-control) so they render
   at default BS5 size next to compact inputs (date, text). Mirror those rules
   for .form-select, plus shrink the chevron + right-padding so 8pt text doesn't
   collide with the (default) full-size dropdown caret. */
.table.small > tbody > tr > td > .form-select,
.table-sm > tbody > tr > td > .form-select,
.table.small > tbody > tr > td > .form-group .form-select,
.table-sm > tbody > tr > td > .form-group .form-select,
.spa-page .container.small .form-select,
div.row.small > div .form-select,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-select,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.form-select,
.modal.small > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.form-select,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-select,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.form-select,
.modal.compact > form.modal-dialog > .modal-content > .modal-body .form-group>.input-group>.form-select,
.panel.small > .panel-body > .tab-content > .tab-pane > .panel .form-select {
  font-size: 8pt;
  padding: 1px 1.25rem 1px 2px;
  line-height: inherit;
  height: inherit;
  min-height: inherit;
  background-position: right 0.25rem center;
  background-size: 12px 9px;
}
/*keep selectize working on modal bs 3.1.1 z-index modal is 1040. The dropdown is bonded to the body and not technically on the modal.*/
div.selectize-dropdown.form-control{z-index:2000;}

.form-horizontal td >.form-group,
.form-horizontal td >.btn-toolbar,
.form-inline td >.form-group,
.form-inline td >.btn-toolbar
{
  margin:0;
  margin-right:10px;
  display:inline-block;
}
.form-horizontal td >.form-group>.control-label,
.form-inline td >.form-group>.control-label
{
  text-align:inherit;
  padding:0;
  line-height:inherit;
}
.form-horizontal td >.form-group>.control-label>.form-control,
.form-horizontal td >.form-group>.form-control,
.form-horizontal td >.form-group>.input-group>.form-control,
.form-horizontal td >.form-group>.input-group>.input-group-addon,
.form-horizontal td >.form-group>.input-group>.input-group-btn,
.form-horizontal td >.form-group>.input-group>.input-group-btn>.btn,
.form-horizontal td >.form-group>.input-group>.input-group-btn>.btn>.glyphicon,
.form-horizontal td .btn-toolbar .form-control,
.form-inline td >.form-group>.control-label>.form-control,
.form-inline td >.form-group>.form-control,
.form-inline td >.form-group>.input-group>.form-control,
.form-inline td >.form-group>.input-group>.input-group-addon,
.form-inline td >.form-group>.input-group>.input-group-btn,
.form-inline td >.form-group>.input-group>.input-group-btn>.btn,
.form-inline td >.form-group>.input-group>.input-group-btn>.btn>.glyphicon,
.form-inline td .btn-toolbar .form-control
{
  padding:0;
  font-size:inherit;
  width:inherit;
  /*height: initial;*/
  line-height:inherit;
}
td>.form-control>.selectize-input,
td>.form-control>.selectize-dropdown{
  padding:0;
  min-height:inherit;
  font-size:inherit;
  line-height:inherit;
  height:inherit;
}
tr>td>.form-group,
tr>td>.btn-toolbar{
  clear:inherit;
  margin:0;
}

/* BS5 redefined .btn-group as inline-flex (BS3 used floated buttons, which
   wrapped onto a new line for free once out of horizontal room). Flex
   containers don't wrap unless told to, so SubmitButtonMenu / kg_button_toolbar
   button rows overflowed sideways under BS5, forcing a horizontal scroll to
   reach the later buttons. Restore BS3's wrapping. Inert on a non-flex (BS3)
   .btn-group. */
.btn-toolbar .btn-group {
  flex-wrap: wrap;
}

td.nonhorizontaltd {
  display: block;
}

td.nonhorizontaltd >.checkbox{
  display: block;
}


/*need for select boxes on panels if the select box is towards the bottom of the panel it could be cut off*/
.panel-group .panel {overflow-y:visible;}
td .selectize-dropdown .option, td .selectize-dropdown .optgroup-header {padding-left:1px;}
.selectize-dropdown-content .option.active,
.selectize-dropdown-content .create.active{color:#FFF;background-color:#555}
/* Preserve leading/trailing whitespace in option labels — some call sites
   use whitespace prefixes/suffixes for sort ordering ("   Foo" sorts first)
   or nbsp hierarchy indents.  Default white-space:normal collapsed those
   runs so options displayed blank or indent-less. */
.selectize-dropdown .option,
.selectize-dropdown .optgroup-header,
.selectize-input .item {
   white-space: pre-wrap;
}
/* BS5 selectize widgets inherit body font-size (14-16px) via selectize.bootstrap5.css's
   `.selectize-dropdown, .selectize-input, .selectize-input input { font-size: inherit }`.
   BS3 rendered them much more compactly (10px).  selectize css loads after this
   file, so !important is required to beat the same-specificity rule. */
.selectize-input,
.selectize-input input,
.selectize-dropdown,
.selectize-dropdown-content {
  font-size: 10px !important;
}
/* Match BS3's compact selectize padding/min-height — BS5 skin uses
   .375rem .75rem padding with calc(1.5em + 0.75rem + 2px) min-height, which
   leaves a lot of whitespace around our 10px text. */
.selectize-input {
  padding: 2px 6px !important;
  min-height: 0 !important;
}
/* Single-select needs extra right padding so the arrow (absolute-positioned
   ~17px from the right edge) doesn't overlap the selected item's text. */
.selectize-control.single .selectize-input {
  padding-right: 22px !important;
}
/* Tom Select parks its control <input> off-screen (left:-10000px; opacity:0)
   to hide the caret on a single-select that has a value (.input-hidden). But
   clicking the control focuses that input, and the browser scrolls the nearest
   scroll container all the way to it - so a Tom Select in a horizontally
   scrolled editable browse (e.g. the far-right Size column) yanks the grid to
   the left and the control loses focus on click. Keep the input hidden via
   opacity:0 but in place (left:0) so focusing it never triggers a scroll. */
.input-hidden .ts-control > input {
  left: 0 !important;
}
/* Single-select-with-a-value should read like a native <select>: the chosen value
   stays visible the whole time the field is focused (tabbing/clicking in must NOT
   look like it cleared the cell), and typing filters the dropdown without showing the
   raw query in the box (native type-ahead). Tom Select's default lets the search input
   sit beside the .item; with its min-width:7rem it can't fit and flex-wraps to a 2nd
   line, which in a horizontally-scrolled spreadsheet scrolls the grid left to reveal
   the wrapped input (looked like "typing takes them left / didn't clear"). Fix: keep
   the item on one line (ellipsis, nowrap control) and collapse the input to zero size
   + opacity:0 so it stays functional but invisible and takes no space. The input is
   hidden IN PLACE (not off-screen), so focusing it never scrolls a scrolled grid.
   Everything is scoped to .has-items so an EMPTY single-select keeps a normal, visible,
   typeable input (placeholder shows, user can see what they type). */
.ts-wrapper.single.has-items .ts-control {
  flex-wrap: nowrap;
}
.ts-wrapper.single.has-items .ts-control > .item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ts-wrapper.single.has-items.input-active .ts-control > .item {
  display: block !important;   /* Tom Select would otherwise hide the value while active */
}
.ts-wrapper.single.has-items .ts-control > input {
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
}
/* Tighten a Tom Select rendered as a .form-select control inside a compact table
   (.table.small / .table-sm) so its .ts-control matches the reduced cell padding.
   Tom Select's bootstrap5 theme sets padding-right with max(...) !important to reserve
   room for the caret, so we can't just override padding-right normally - drive it via
   the theme's own custom props (--ts-pr-caret / --ts-pr-min) and set the shorthand. */
.table.small > tbody > tr > td > .ts-wrapper.form-select > .ts-control,
.table-sm    > tbody > tr > td > .ts-wrapper.form-select > .ts-control {
  --ts-pr-caret: 1.25rem;   /* library sets padding-right with !important via max() */
  --ts-pr-min: 2px;
  padding: 1px 1.25rem 1px 2px;
}
/* Match a native focused Bootstrap control. A Tom Select's visible border lives on the
   .ts-wrapper, but that's a <div> so :focus never fires on it, and the bootstrap5 theme
   only recolors the inner 0-width .ts-control border - so a focused Tom Select showed the
   focus glow (which the theme puts on .ts-control, using the same rgba(13,110,253,.25)
   ring as bootstrap) but kept a gray border where a native control turns blue. Recolor
   the wrapper border to bootstrap's own focus color so they're indistinguishable. Covers
   both flavors: dropdown selects (.form-select, from select.prg) and the free-text
   autocomplete comboboxes (.form-control, from formfld) - native .form-select:focus and
   .form-control:focus both use #86b7fe. (Resting sizing/chevron/font and the disabled
   #e9ecef fill already match - the theme handles those on .ts-control.) */
.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus {
  border-color: #86b7fe;   /* mirrors bootstrap's .form-select:focus / .form-control:focus */
}
.btn-xs,
.btn-group-xs > .btn{
  /* BS5 dropped .btn-xs / .btn-group-xs; recreate the BS3 sizing so legacy
     markup renders at the old extra-small scale instead of the default .btn. */
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  letter-spacing: 1px;
}
.btn-group-xs,.btn-group-xs > .btn.btn-info{
  text-shadow: 1px 1px 2px rgba(0,0,0,.3);
    font-weight: bold;
  }
/* BS3 button palette.  Applies automatically to every .btn-group-xs > .btn-info
   (the BS3-era compact toolbars carry through the migration) and opt-in to any
   other toolbar via .bs3-btns.  Restores BS3's white-on-teal .btn-info — the
   darker border draws the vertical divider between joined buttons. */
.bs3-btns .btn-info,
.bs3-btns > .btn-info,
.btn-group-xs > .btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5bc0de;
  --bs-btn-border-color: #46b8da;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #31b0d5;
  --bs-btn-hover-border-color: #269abc;
  --bs-btn-focus-shadow-rgb: 70, 184, 218;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #269abc;
  --bs-btn-active-border-color: #1b6d85;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #5bc0de;
  --bs-btn-disabled-border-color: #5bc0de;
}
.wait{cursor:'wait'}

.calender-here {
  background: url('/img/calender-icon.png') no-repeat;
  width: 69px;
  height: 81px;
  float: left;
}
.calendar-month {
  font-size: 13px;
  color: #FFFFFF;
  text-align: center;
  padding-top: 2px;
}
.calendar-day {
  font-size: 38px;
  color: #000000;
  padding-top: 10px;
  font-family: Arial;
  text-align: center;
}
/*the first two handle selectize*/
div.required.not-full,
div.required.invalid,
input:invalid,
textarea:invalid,
select:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
  &:focus {
    border-color: darken(#ee5f5b, 10%);
    .box-shadow(0 0 6px lighten(#ee5f5b, 20%));
  }
}
.container .container { width:100%}
/*
Horizontal row as list of Label/Value with an upper and lower div
*/
.list-separated {
  margin-top: 10px;
  margin-bottom: 15px;
  text-align:center;
}
.list-separated > div {
  border-right: 1px solid #f5f5f5;
}
.list-separated > div:last-child {
  border-right: 0;
}
@media (max-width: 767px) {
  .list-separated {
    /* 767px */
  }
  .list-separated > div {
    margin-bottom: 20px;
  }
}
.list-separated .input-group-addon{
    padding:0;
    /*border: 0;*/
    border-right: 0;
  }


.nav-tabs > li .close {
  margin: -5px -5px 0 10px;
  font-size: 12px;
}
input[type=checkbox]:not(.form-check-input) {
  width: auto;
}
[data-notify="progressbar"] {
  margin-bottom: 0px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 5px;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden !important;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
#ajax_loader {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2000000000;
  display: block;
}
/*webshim*/
.date-input-buttons .step-controls,
.time-input-buttons .step-controls,
.datetime-local-input-buttons .step-controls
{
    display: none;
}
.input-group .input-buttons {z-index: 3}
.form-group.form-md-line-input .form-control {
  background: none;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
  color: #333;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  font-size: 16px;
}
@media print {
  h1 {
    page-break-before: always;
  }
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
.page-break {  page-break-before: always; }
}
/* Google address autocomplete on a modal fix */
div.pac-container {
   z-index: 1050 !important;
}

/*Inspired by: http://bootsnipp.com/snippets/EKWKX*/
.fixed-col-table table {
    table-layout: inherit;
}
.fixed-col-table td, .fixed-col-table th {
  vertical-align: top;
}
th.fixed-col, td.fixed-col, col.fixed-col {
  position: absolute;
  left: 0;
}
.fixed-col-table.outer {
  position: relative
}
.fixed-col-table .inner {
  overflow-x: auto;
  overflow-y: visible;
}
.scroll {
  border: 0;
  border-collapse: collapse;
}

.scroll tr {
  display: flex;
}

.scroll td {
  padding: 3px;
  display: block;
  flex: 1 auto;
  border: 1px solid #aaa;
}

.scroll thead tr:after {
  content: '';
  overflow-y: scroll;
  visibility: hidden;
  height: 0;
}

.scroll thead th {
  flex: 1 auto;
  display: block;
  border: 1px solid #000;
}

.scroll tbody {
  display: block;
  width: 100%;
  overflow-y: auto;
  height: 200px;
}


/*Progress Bar with Markers   Inspired by: http://bootsnipp.com/snippets/1KnKq       */
.bar-step {
    position:absolute;
    margin-top:-20px;
  z-index:1;
    font-size:10px;
}

.bar-step-bottom {
    position:absolute;
    margin-top:25px;
  z-index:1;
    font-size:10px;
}

.label-txt {
    float: right;
}

.label-line {
    float: left;
    background: #000;
    height:40px;
  width:1px;
}
 /*margin-left: 5px;*/

.label-percent {
    float: right;
  margin-left: 5px;
}

.open-orders-status {
  text-align: center;
  margin: auto;
}

.open-orders-status td {
  font-size: 20px!important;
  padding: 4px!important;
}

.open-orders-status .title-row {
  background-color: #5a9bd5!important;
  color:white!important;
}

.open-orders-status .title-row-red {
  background-color: #b3002d!important;
  color:white!important;
}

.open-orders-status .title-row-green {
  background-color: #00b386!important;
  color:white!important;
}

.open-orders-status .title-row-orange {
  background-color: #e67300!important;
  color:white!important;
}

.open-orders-status .big-display-row td {
  font-size: 40px!important;
}

@media only screen and (min-width: 1100px)  {
   .open-orders-status .open-orders-cell {
     padding-left:20px;
     padding-right:20px;
   }
}

.open-orders-status .open-orders-regular-cell {
  font-size: 15px!important;
  padding: 4px!important;
}

.addstatustable .table-responsive {
  overflow: visible;
}

.addstatustable .table-responsive {
overflow: visible;
}

form[name="VOPENORDERS"] .table-responsive {
overflow: visible;
}

div[data-alias="ticket"].table-responsive {
overflow: visible;
}

div[data-alias="ticket"] .table-responsive {
overflow: visible;
}
/*From bootstrap 4.x */
.form-check {
    position: relative;
    display: block;
    padding-left: 1.25rem;
}
.form-check-inline {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 0;
    margin-right: .75rem;
}
.form-check-label {
    margin-bottom: 0;
}
.form-check .form-check-label {
    font-weight: inherit;
}
#oNotificationsList .unread {
    border-left: 7px solid red;
}
#oNotificationsList .read {
    border-left: 7px solid white;
}
#oNavNotifyIcon.notify {
    color: red;
}
#text-to-speech-controller {
  position: fixed;
  right: 0;
  bottom: 50%;
  border-radius: 7px 0 0 7px;
  text-align: center;
  background-color: gray;
}
#text-to-speech-controller > div {
  margin: 10px;
}

/* SPA */
#spa-page-container div.inactive-page, form.inactive-page {
  display: none;
}

#spa-page-container .hover-pointer:hover {
  cursor: pointer;
}

#spa-page-container .nav > li > .hover-pointer {
  position: relative;
  display: block;
  padding: 10px 15px;
}

#spa-page-container .nav > li > .hover-pointer:hover {
  color: white;
}

#spa-page-container .error {
  color: red;
}

#spa-page-container .text-white {
  color: white;
}

#spa-page-container .spa-form-table select,
#spa-page-container .spa-form-table input:not([type="checkbox"]),
#spa-page-container .spa-form-table textarea {
  max-width: 95%;
  width: 95%;
}

#spa-page-container textarea:not(.expanded-view-zoom) {
  width: 100%;
}

#spa-page-container textarea {
  resize: both;
}

#spa-page-container .spa-row td {
  padding: 5px;
}

#spa-page-container .link {
  cursor: pointer;
  color: #337ab7;
}

#spa-page-container form.main {
  border-top: 1px solid gray;
}

#spa-page-container .doc-border-top {
  height: 3px;
  /*background-color: #9e469e;*/
  background-color: #1000B0;
  margin: 5px auto 5px;
}

#spa-page-container form.highlighted {
  border: 2px solid #1902FF;
  border-radius: 10px;
}
#spa-page-container form.highlighted.spa-form-bordered-red {
  border: 2px solid red;
  border-radius: 10px;
}
#spa-page-container form.partial-highlighted {
  /*border: 1px solid #99cc00;
  border-radius: 10px;*/
  background-color: #ddebdd;
}
#spa-page-container form.ignore {
   background-color: rgb(220, 220, 220);
}
#spa-page-container form.ignore.highlighted {
   background-image: none;
}
.no-bullets {
   list-style: none;
   padding-left: 0;
}
#spa-page-container form.partial-highlighted.spa-form-bordered {
  border-width: 2px;
}
#spa-page-container form.spa-form-bordered-red:not(.highlighted) {
  /*border-left: 1px solid plum;
  border-right: 1px solid plum;*/
  border-left: 1px solid red;
  border-right: 1px solid red;
  border-radius: 10px;
  padding-top: 5px;
}
#spa-page-container form.spa-form-bordered:not(.highlighted) {
  /*border-left: 1px solid plum;
  border-right: 1px solid plum;*/
  border-left: 1px solid #3F2CFB;
  border-right: 1px solid #3F2CFB;
  border-radius: 10px;
  padding-top: 5px;
}
#spa-page-container .highlighted-show {
  display: none;
}
#spa-page-container .highlighted .highlighted-show {
  display: block;
}
/* When .highlighted-show lands on a .row, don't let `display: block` override
   BS5's `display: flex` — that was the old BS3 float-based behaviour, which
   under BS5 collapses the grid and every cell falls to its own line. */
#spa-page-container .highlighted .row.highlighted-show,
#spa-page-container .highlighted .spa-row.highlighted-show {
  display: flex;
}
#spa-page-container .highlighted .highlighted-hide {
  display: none;
}
#spa-page-container .input-group .form-control {
  z-index: 0;
  float: none;
}
#spa-page-container .spa-page table.small td, .spa-page table.small .form-control {
  /*font-size: 10pt !important;*/
  font-size: 11px;
}
#spa-page-container .spaopenordersproperty td {
  font-size: 10pt !important;
}
#spa-page-container.container {
  width: 95%;
}
#spa-page-container .spa-jqload-form.changed,
#spa-page-container .spa-jqload-form.changed tr {
  background-color: #f2dede; /* danger */
}
#spa-page-container .spa-jqload-form.saving,
#spa-page-container .spa-jqload-form.saving tr {
  background-color: #fcf8e3; /* warning */
}
#spa-page-container .spa-jqload-form.saved,
#spa-page-container .spa-jqload-form.saved tr {
  background-color: #d9edf7; /* info */
}
#spa-page-container .float-left {
  position: relative;
  float: left;
}
#spa-page-container .float-right {
  position: relative;
  float: right;
}
#spa-page-container .navbar-item {
  padding-right: 10px;
  padding-left: 10px;
  /*border-right: 1px solid #337ab7;*/
  border-right: 2px solid lightblue;
}
#spa-page-container .navbar-item:first-child {
  /*border-left: 1px solid #337ab7;*/
  border-left: 2px solid lightblue;
}
#spa-page-container .left-pane {
  /*border-right: 1px solid gray;*/
  position: sticky;
  top: 0;
 }
#spa-page-container .right-pane {
  position: sticky;
  top: 0;
  float: right;
}
#spa-page-container .last-pane {
  margin-left: -1px;
  /*border-left: 1px solid gray;
  border-right: 1px solid gray;*/
}

#spa-page-container .left-pane,
#spa-page-container .right-pane, 
#spa-page-container .top-pane,
#spa-page-container .last-pane {
  padding-left: 0;
  padding-right: 0;
}
@media only screen and (max-width: 1400px) {
  #spa-page-container .last-pane {
    width: 100%;
    background-color: white;
    border-left: none;
    border-right: none;
    margin-left:0;
  }
  #spa-page-container .left-pane {
    width: 50%;
    position:relative;
  }
  #spa-page-container .right-pane {
    width: 50%;
    float: left;
    margin-left: -1px;
    /*border-left: 1px solid gray;*/
    position:relative;
  }
}
#spa-page-container .nav-page {
  padding-bottom: 40px;
}
#spa-page-container .add-item-row {
  position: sticky;
  bottom: 35px;
  z-index: 5;
}
/* Docs + (add-item-fixed): float within its column, pinned just above the bottom
   navbar so it stays reachable while scrolling the Documents pane (07/15/26 per
   searcher feedback — the + stays in the column; Create Chains is the one that
   floats to the corner, see .create-chains-float). */
#spa-page-container .add-item-row.add-item-fixed {
  position: sticky;
  bottom: 50px;   /* clear the fixed bottom navbar */
  z-index: 6;     /* navbar is z-index 5 */
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border-radius: 10px;
}
/* Create Chains: compact button pinned to the bottom-right corner of the
   (column-scoped) Documents pane. Swaps places with the docs + above. */
#spa-page-container .create-chains-float {
  position: fixed;
  bottom: 55px;
  right: 30px;
  width: auto;
  z-index: 6;
  padding: 5px 14px;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  border-radius: 8px;
}
#spa-page-container .add-item-row h3{
  border-radius: 10px;
  text-align: center;
}
#spa-page-container [class^='selectize'] {
  font-size: 10px;
}
#spa-page-container form.highlighted .spa-row.border-row {
  border-bottom: 1px solid gray;
}
#spa-page-container .spa-row {
  text-align: center;
  margin: 0;
}
#spa-page-container .spa-row.spa-sub-row {
  padding: 0;
}
#spa-page-container .spa-form-table-cell b.highlighted-show {
  display: none;
}
#spa-page-container .highlighted .spa-form-table-cell b.highlighted-show {
  display: block;
}
#spa-page-container .spa-form-table-cell b {
  white-space: nowrap;
  overflow: hidden;
  display: block;
}
#spa-page-container .spa-form-table-cell .input-group-addon {
  display: none;
}
#spa-page-container .spa-form-table-cell {
  padding-left: 0px;
  padding-right: 0px;
  position: relative; /* 07/08/26 CL OBO GG BS5 columns lost position:relative; keeps .zoom-field:focus 200% relative to the cell, not the page */
}
#spa-page-container #service-document-table .spa-form-table-cell.col-sm-1 {
  min-width: 50px;
}
#spa-page-container #service-document-table .spa-form-table-cell.col-sm-2 {
  min-width: 100px;
}
#spa-page-container #sc_pin-image-container { 
  height:550px;
  width: 100%;
}
#spa-page-container .fake-hidden {
  position: absolute;
  left: -10000px;
  height: 10px;
}
#spa-page-container .doc-image {
  overflow-x:scroll;
  overflow-y:hidden;
}
#spa-page-container #service-notes-header {
  cursor: pointer;
}
#spa-page-container .spa-title {
  background-color: gainsboro;
  border-radius: 10px;
  padding: 10px;
  margin-bottom:2px;
}
#spa-page-container h4.spa-title.collapse-header {
  cursor: pointer;
}
/*#spa-page-container th h4, #spa-page-container #LOGIN h4 {
  background-color: initial;
  border-radius: initial;
  padding: initial;
}*/
#spa-page-container .header-row {
  margin-top:10px;
  margin-bottom:10px;
}
#spa-page-container .header-row > div {
  text-align: center;
}
#spa-page-container .header-row .header-text {
  padding-top: 15px;
  font-size: 16px;
}
#spa-page-container .form-group {
  margin-bottom: 8px;
  /*display: block;*/
  margin-left:0;
  margin-right:0;
}
#spa-page-container .spa-account-controls-header {
  font-size: 18px;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px 5px;
}
#spa-page-container .spa-account-controls-header:hover {
  background-color: #CEE0F5;
}
#spa-page-container .spa-account-controls-list-container {
  width: 100%;
  margin-top: -1px;
  position: absolute;
  z-index: 25;
}
#spa-page-container .spa-account-controls-list {
  background-color: #4C688B;
  border-radius: 5px;
  padding: 0;
  width: 60%;
  margin: auto;
  border: 2px solid #1F3146;
}
#spa-page-container .spa-account-controls-item {
  /*cursor: pointer;*/
  padding: 5px 15px;
  border-top: 1px solid #1F3146;
  list-style-type: none;
}
#spa-page-container .spa-account-controls-item a {
  color: #CEE0F5;
}
#spa-page-container .spa-account-controls-item:first-child {
  border-top: none;
}
#spa-page-container .spa-account-controls-item.open-submenu {
  color: white;
}
#spa-page-container .spa-account-submenu {
  position: absolute;
  margin-top: -24px;
  left: 75%;
  background-color: #7288A5;
  border-radius: 5px;
  padding: 0;
  z-index: 30;
  border: 2px solid #1F3146;
}
#spa-page-container #spa-service-navbar, #spa-search-navbar {
  position:fixed;
  bottom:0;
  width:104%;
  background-color: #1F3146;
  color: white;
  margin-bottom: 0;
  margin-left: -60px;
  padding-left: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
  z-index: 5;
}
#spa-page-container #spa-service-navbar .link, #spa-search-navbar .link {
  color: #B3CFEF;
}
#spa-page-container #spa-service-navbar .link:hover, #spa-search-navbar .link:hover {
  color: white;
}
#spa-page-container .spa-navbar-list {
  background-color: #4B5D74;
  position: absolute;
  bottom: 20px;
  margin: 0;
  padding: 0;
  border-radius: 5px;
}
#spa-page-container .spa-navbar-list-item {
  cursor: pointer;
  padding: 5px 15px;
  border-top: 1px solid black;
  list-style-type: none;
  color: #B3CFEF;
}
#spa-page-container .spa-navbar-list-item:first-child {
  border-top: none;
}
#spa-page-container .spa-navbar-list-item:hover {
  color: white;
}
#spa-page-container .create-new-button {
  cursor: pointer;
}
#spa-page-container #open-orders-table td {
  max-width: 100px;
}
#spa-page-container .no-border-table {
  border: none;
}
/*#spa-page-container .no-border-table tr {
  border: none;
}
#spa-page-container .no-border-table th {
  border: none;
}
#spa-page-container .no-border-table td {
  border: none;
}*/
#spa-page-container .spa-service-row:hover {
  background-color: #f0f0f0 !important;
  /*cursor: pointer;*/
}
#spa-page-container .spaopenordersproperty tbody tr:nth-of-type(odd) {
  background-color: white;
}
#spa-page-container .spaopenordersproperty tbody tr:nth-of-type(4n) {
  background-color: #f9f9f9;
}
#spa-page-container .spa-service-spacer {
  height: 2px;
}
#spa-page-container .doc-image-title {
  text-align: center;
}
#spa-page-container .doc-image-title button {
  width: 80%;
}
#spa-page-container .btn.btn-light {
  background-color: white;
}
#spa-page-container .btn.btn-light:hover {
  background-color: gainsboro;
}
#spa-page-container #spa-open-orders-summary {
  text-align: center;
}
#spa-page-container form.grayed:not(.highlighted) .form-control {
  color: #aaaaaa;
}
/*#spa-page-container btn-group hidden-print form-group {
  display:none;
}*/
#spa-page-container #form_spa_service_submit input {
  max-width: 300px;
}
#spa-page-container .spa-tab-panel.inactive {
  display: none;
}
#spa-page-container .spa-tab-button.inactive {
  background-color: white;
  color: #017AFF;
}
#spa-page-container .spa-tab-button.active {
  background-color: #017AFF;
  color: white;
  cursor: default;
}
#spa-page-container .spa-tab-button.disabled {
  color: lightgray;
  cursor: not-allowed;
}
#spa-page-container .spa-tab-container {
  padding: 3px;
}
#spa-page-container .spa-tab-header {
  display: inline-block;
}
#spa-page-container .spa-tab-button {
  border: 1px solid #017AFF;
  margin-left: -1px;
  font-size: 16px;
  padding: 5px 10px;
}
#spa-page-container .spa-tab-button:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  margin-left:0;
}
#spa-page-container .spa-tab-button:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px; 
}
#spa-page-container #jump-to-vendor, #spa-page-container #jump-to-service {
  width: 70%;
}
#spa-page-container .spa-timer {
  margin: -5px 5% -5px 0;
}
#spa-page-container .spa-timer .timer-container {
  /*margin: auto;*/
}
#spa-page-container .spa-timer input {
  width: 30px;
  text-align: center;
  color: black;
}
#spa-page-container .spa-timer.paused button.pause {
  display: none;
}
#spa-page-container .spa-timer:not(.paused) button.play {
  display: none;
}
#spa-page-container .spa-timer button {
  margin-left:10px;
  background-color: #017AFF;
  height: 24px;
  font-size: 16px;
  padding: 0 6px;
}
#spa-page-container #spa-service-navbar .btn-group.hidden-print, #spa-search-navbar .btn-group.hidden-print {
  display: none;
}
#spa-page-container #oqi_entry_form .btn-group.hidden-print {
  display: block;
}
#spa-page-container .selectize-input {
  padding: 0;
  min-height: 0;
}
#spa-page-container .selectize-input.full input {
  position: absolute;
}
#spa-page-container .selectize-input .item {
  line-height: 14px;
}

#spa-page-container #service-document-table form[data-group_id='A'] .not-a {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='C'] .not-c {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='D'] .not-d {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='E'] .not-e {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='I'] .not-i {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='M'] .not-m {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='N'] .not-n {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='P'] .not-p {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='S'] .not-s {
  display: none;
} 
#spa-page-container #service-document-table form[data-group_id='T'] .not-t {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='V'] .not-v {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id='X'] .not-x {
  display: none;
}
#spa-page-container #service-document-table form[data-group_id=''] [class^='not-'] {
  display: none;
}
#spa-page-container .btn-info {
  background-image: none;
  background-repeat: no-repeat;
  background-color: #6BA4E3;
}
#spa-page-container .btn-info:hover {
  background-color: #017AFF;
}
#spa-page-container .open-orders-status .title-row {
  background-color: #017AFF !important;
}
#spa-page-container .bg-info {
  background-color: #CEE0F5;
}
#spa-page-container input {
  /*font-weight: 600;*/
  font-size: 110%;
  color: #333;
}
#spa-page-container textarea {
  /*font-weight: 600;*/
  font-size: 110%;
  color: #333;
}
#spa-page-container .selectize-input .item {
  /*font-weight: 600;*/
  font-size: 110%;
  color: #333;
}
#spa-page-container #service-report-body input {
  max-width: 200px;
}
#spa-page-container .form-check {
  display: inline-block;
}
#spa-page-container #text-to-speech-controller {
  z-index: 20;
  position: absolute;
  bottom: 0;
}
#spa-page-container .spa-bordered-section {
  border: 1px solid #017AFF;
  border-radius: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}
.zoom-field:focus {
  z-index: 10;
  position: absolute;
  min-width: 200%;
}
.small-zoom-field:focus {
  z-index: 10;
  position: absolute;
  min-width: 60%;
}
#spa-page-container .display-table {
   display: table;
}
#spa-page-container .display-tr {
   display: table-row;
}
#spa-page-container .display-td {
   display: table-cell;
   border: 1px solid #ddd;
}
#spa-page-container .display-th {
   display: table-cell;
   background-color: #017AFF;
   color: white;
   font-size:120%;
   padding-top:2px;
   border: 1px solid #ddd;
   text-align: center;
}
#spa-page-container .display-th:first-child {
   border-top-left-radius: 5px;
   padding-left: 2px;
}
#spa-page-container .display-th:last-child {
   border-top-right-radius: 5px;
   padding-right: 2px;
}
#spa-page-container .display-table-title {
   display: table-caption;
   text-align: center;
   font-size: 140%;
}
#spa-page-container .display-contents {
   display: contents;
}
#spa-page-container a.no-underline {
   color: #303030;
}
#spa-page-container a.no-underline:hover {
   text-decoration: none;
   color: black;
}
#spa-page-container .expanded-view {
   position: absolute;
   z-index: 50;
   width: 100%;
   background-color: white;
   margin-bottom: 60px;
}
#spa-page-container .left-pane.expanded-view textarea.expanded-view-zoom {
   min-height: 500px;
}
#spa-page-container .spacer-row div {
   text-align: center;
   font-size: 120%;
}
#spa-page-container .option-section ul{
   list-style-type: square;
}
#spa-page-container .option-section-header {
   font-size: 16px;
}
#spa-page-container input.invalid-input,
#spa-page-container select.invalid-input,
#spa-page-container textarea.invalid-input {
   border: 1px solid red;
}

.strike-text {
   text-decoration: line-through;
}

.sortable-space-filler{
   background-color: blanchedalmond;
   height: 1in;
}

.ws-po-arrow{
   width:400px;
}

.taxpullrow td div,
.taxpullrow td,
.taxpullrow th{
   font-size: 12pt !important;
}
.taxpullrow td:first-of-type {
   cursor:pointer;
}
.tp-doc-deed {
   background-color: lightgreen !important;
}
.tp-doc-open {
   background-color: yellow !important;
}
.tp-doc-closed {
   background-color: lightblue !important;
}
.tp-doc-starter {
   background-color: orange !important;
}
.tp-doc-other {
   background-color: lightgray !important;
}

@media screen {
   #printSection {
      display: none;
   }
}

@media print {
   body * {
      visibility:hidden;
   }
   #printSection, #printSection * {
      visibility:visible;
   }
   #printSection {
      position:absolute;
      left:0;
      top:0;
   }
}
/* Font stack — match BS3 default. Cleaner/smaller at body sizes than
   Segoe UI + Inter, which rendered a bit fuzzy at the small sizes this app uses. */
:root {
   --bs-font-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Restore BS3's 14px body font.  BS5 bumped the base from 14px to 16px which
   inflates every .table / form / card child that inherits body size
   (bootstrap-table, in particular, went from 14px to 16px). */
body { --bs-body-font-size: .875rem; }
/* Match BS3 .small / small sizing instead of BS5's .875em.
   Fixed pixel size — short-lived during the BS3→BS5 transition.
   body prefix bumps specificity above BS5's plain .small/small rule. */
body .small, body small { font-size: 15.4px; }

/* wdb_browse table title — make the heading a touch larger than default h4.
   Full ancestor chain so it beats .small .panel > .panel-heading { font-size: 10pt } above.
   Scoped to .wdb-browse (wdb_brws' container class): the unscoped selectors also
   caught every table_base addTitle() banner (panel-heading th > h4) and blew them
   up to 28px — e.g. Wayne scrape "search conducted" banners. Those now fall back
   to .small th>h4 { 9pt }. */
.wdb-browse .small .panel > .panel-heading > h4,
.wdb-browse .small .panel > .panel-heading,
.wdb-browse .panel-heading > h4 { font-size: 1.75rem; }

/* Preserve bold on hover for column heading th classes — the hover selector in
   the big `th` rule above sets font-weight:normal (higher specificity than
   th.tablesubtitle / th.tabletitle), stripping the bold on row hover. */
.table-hover > thead > tr:hover > th.tablesubtitle,
.table-hover > thead > tr:hover > th.tabletitle,
.table-hover > tbody > tr:hover > th.tablesubtitle,
.table-hover > tbody > tr:hover > th.tabletitle {
   font-weight: 500;
}
/* Aliases for legacy BS3 table contextual classes under BS5.
   BS5 renamed these to .table-warning, .table-success, etc. — restore the
   bare class names so existing webclass:='warning' code paths still color cells. */
.table > :not(caption) > * > td.warning,
.table > :not(caption) > * > th.warning,
.table > :not(caption) > tr.warning > td,
.table > :not(caption) > tr.warning > th,
td.warning, th.warning, tr.warning > td, tr.warning > th {
   background-color: #fff3cd; color: #000;
}
.table > :not(caption) > * > td.success,
.table > :not(caption) > * > th.success,
.table > :not(caption) > tr.success > td,
.table > :not(caption) > tr.success > th,
td.success, th.success, tr.success > td, tr.success > th {
   background-color: #d1e7dd; color: #000;
}
.table > :not(caption) > * > td.danger,
.table > :not(caption) > * > th.danger,
.table > :not(caption) > tr.danger > td,
.table > :not(caption) > tr.danger > th,
td.danger, th.danger, tr.danger > td, tr.danger > th {
   background-color: #f8d7da; color: #000;
}
.table > :not(caption) > * > td.info,
.table > :not(caption) > * > th.info,
.table > :not(caption) > tr.info > td,
.table > :not(caption) > tr.info > th,
td.info, th.info, tr.info > td, tr.info > th {
   background-color: #cff4fc; color: #000;
}
/* Chrome-like button — vertical gradient, inset top highlight, subtle drop
   shadow, lift on hover, pressed inset on active.  Uses !important on
   background-image to beat BS5's .bg-gradient utility (still sent on the
   markup for backward-compat). */
.btn-chrome {
   --bs-btn-color:                 #333;
   --bs-btn-bg:                    #f2f2f2;
   --bs-btn-border-color:          #b8b8b8;
   --bs-btn-hover-color:           #222;
   --bs-btn-hover-bg:              #e9e9e9;
   --bs-btn-hover-border-color:    #9e9e9e;
   --bs-btn-focus-shadow-rgb:      130,138,145;
   --bs-btn-active-color:          #222;
   --bs-btn-active-bg:             #d8d8d8;
   --bs-btn-active-border-color:   #9e9e9e;
   --bs-btn-active-shadow:         inset 0 2px 4px rgba(0,0,0,.18);
   --bs-btn-disabled-color:        #888;
   --bs-btn-disabled-bg:           #e0e0e0;
   --bs-btn-disabled-border-color: #ccc;
   background-image: linear-gradient(180deg, #ffffff 0%, #f2f2f2 55%, #e1e1e1 100%) !important;
   box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.10);
   text-shadow: 0 1px 0 #fff;
   font-size: 14px;
   font-weight: 500;
   transition: transform .12s ease, box-shadow .12s ease, background-image .12s ease;
}
.btn-chrome:hover {
   background-image: linear-gradient(180deg, #ffffff 0%, #f6f6f6 55%, #e6e6e6 100%) !important;
   box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 2px 5px rgba(0,0,0,0.14);
   transform: translateY(-1px);
}
.btn-chrome:active,
.btn-chrome.active {
   background-image: linear-gradient(180deg, #d8d8d8 0%, #e1e1e1 100%) !important;
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
   transform: translateY(0);
}
/* Tighten the spacing between joined chrome buttons so the toolbar reads as
   a single pill-shaped control, like the BS3 render. */
.btn-group > .btn-chrome + .btn-chrome {
   margin-left: -1px;
}
/* .label-chrome — flat label that sits in the chrome toolbar without looking
   like a clickable button. Matches the chrome palette but no gradient/shadow.
   Also neutralizes the surrounding <h5>'s heading margins so it aligns with
   the buttons in the .btn-group row. */
.label-chrome {
   display: inline-block;
   color: #333;
   background-color: #e8e8e8;
   border: 1px solid #b8b8b8;
   border-radius: .25rem;
   padding: .35rem .6rem;
   font-size: 14px;
   font-weight: 500;
   text-shadow: 0 1px 0 #fff;
   white-space: nowrap;
}
.btn-group > h5,
.btn-toolbar > h5 {
   margin: 0;
   align-self: center;
   padding-right: .5rem;
}
.btn-group > h5 > .label-chrome {
   /* slightly recessed look so it reads as a section heading, not an action */
   background-color: #ececec;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
/* BS5 dropped .form-group styling. When a form-group contains a <select>,
   inline the label + select on one row instead of stacking. Wide selects
   still wrap to a new line via flex-wrap. Text-input form-groups are not
   affected (most expect label-above-input). */
.form-group:has(> .form-select) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: .5rem;
   margin-bottom: .5rem;
}
.form-group:has(> .form-select) > label {
   margin-bottom: 0;
}
.form-group > .form-select {
   width: auto;
   flex: 0 1 auto;
}
/* ============================================================
   BS3 legacy class aliases — BS5-path only.
   Lets existing markup keep BS3 class names without per-call-site
   rewrites. Only loaded via main_bs5.css (::lJQuery4 path), so
   these rules never affect the BS3/v1 path.
   ============================================================ */

/* BS3 bundled .hide { display: none !important }; BS5 dropped it in favor
   of .d-none. Many call sites use addClass('hide')/removeClass('hide') in
   embedded JS strings, which bypass bs5class(). CSS alias restores behavior. */
.hide { display: none !important; }

/* .right-pane used float:right under BS3 to sit to the right of .last-pane.
   BS5's .row is flex (ignores float), so items appeared in DOM order (swapped).
   order:99 pushes .right-pane to the end of its flex container, matching v1.
   margin-left:auto is a flex equivalent of float:right and a no-op in non-flex. */
#spa-page-container .right-pane {
   order: 99;
   margin-left: auto;
}
/* ≤1400px: the panes reflow (left+right 50/50 on top, last-pane 100% below).
   order:99 would push .right-pane below .last-pane there — v1 floats kept it
   on the top line beside .left-pane, so restore source order at this width. */
@media only screen and (max-width: 1400px) {
   #spa-page-container .right-pane {
      order: 0;
      margin-left: -1px;
   }
}

/* .container was effectively full-width under BS3 via main.css overrides
   (.container .container { width:100% } and #spa-page-container.container { width:95% }).
   BS5 switched .container from width to max-width, so those overrides get clamped
   by BS5's max-width cap (540/720/960/1140/1320px). Reset the cap under v2 so
   existing call sites keep their v1 full-width behavior. */
body .container { max-width: 100%; }

/* Selectize appends its dropdown to <body> (dropdownParent:'body'); the vendor
   theme gives .selectize-dropdown z-index:1000, which sits BEHIND the BS5 modal
   (z-index:1055). So an autocomplete opened inside a modal renders its list
   hidden under the modal — "text shows in the box, no list drops down" (e.g. the
   recording Add-Document "Document Type" picker). Lift it above the modal, still
   below BS5 popover/tooltip (1070/1080). selectize.bootstrap5.css is cdn_load-ed
   after main_bs5.css, so !important is required to win. */
.selectize-dropdown { z-index: 1060 !important; }

/* Tom Select now parents its dropdown to <body> (dropdownParent:'body' in
   gg_tomselect_init / gg_combobox) so an open list is neither clipped by, nor resets
   the scrollLeft of, the .table-responsive scroll box every kg table sits in. The
   earlier approach kept the dropdown INSIDE .ts-wrapper and lifted the clip while open
   (.table-responsive:has(.ts-wrapper.dropdown-active){overflow:visible}); but a
   non-scrollable box can't hold a scroll offset, so opening a list snapped a
   horizontally-scrolled table hard to the left and back on close. Body-parenting fixes
   that, but the list then leaves the modal's stacking context, so lift it above the BS5
   modal (z-index:1055) exactly as the Selectize dropdown above is lifted - else a picker
   opened in a modal renders its list hidden under the modal. (gg_tomselect_post_init
   copies the control's font-size onto the body-parented list so it keeps the cell's type.) */
.ts-dropdown { z-index: 1060 !important; }

/* Wayne County scrape (#search-display, waynescrape_getTabs): examiners asked
   for slightly larger document rows than the global 8pt .table.small sizing.
   Override the table + td leg of the big .table.small/.table-sm 8pt rule. */
#search-display .table.small,
#search-display .table.small > tbody > tr > td,
#search-display .table-sm,
#search-display .table-sm > tbody > tr > td {
   font-size: 9pt;
}

/* Checkboxes/radios: framework always emits .form-check-input; BS3 ignored it
   (native control, crisp dark outline), BS5 draws a 1em box with a faint
   #dee2e6 border — near-invisible inside .small tables. Darken + floor size. */
.form-check-input {
   border-color: #6c757d;
}
input.form-check-input[type=checkbox],
input.form-check-input[type=radio] {
   min-width: 14px;
   min-height: 14px;
}

/* Checkboxes/radios built via the generic addInput() path keep the formfld
   default class=form-control. BS5's .form-control sets appearance:none, which
   erases the native control and leaves an invisible collapsed blob (v1/BS3
   rendered these natively). Restore native rendering. */
input[type=checkbox].form-control,
input[type=radio].form-control {
   appearance: auto;
   -webkit-appearance: auto;
   width: auto;
   height: auto;
   min-width: 14px;
   min-height: 14px;
   padding: 0;
   display: inline-block;
   background: none;
   border: none;
   box-shadow: none;
}

/* Framework modals set size via an inline width on .modal-dialog
   (oDiv:oForm:width:='75%' — basev width assign emits style="width:...").
   BS3 sized dialogs with width:600px so the inline style overrode it; BS5 uses
   max-width:500px, which CLAMPS inline widths — e.g. the Template Assistant
   modal capped tiny with its fields cut off. Lift the clamp when an explicit
   inline width is present. */
.modal-dialog[style*="width"] {
   max-width: none;
}

/* BS5 dropped .form-horizontal (and .col-* no longer float outside a flex .row),
   so label-beside-input forms collapsed into stacked labels — e.g. the tax bill
   modal. Recreate BS3: a form-group with grid-classed children becomes the flex
   row (the :has() guard leaves plain label-over-input form-groups untouched),
   children get BS3 gutters, grid labels right-align like .control-label did. */
.form-horizontal .form-group:has(> [class*="col-"]) {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
}
.form-horizontal .form-group > [class*="col-"] {
   padding-left: 15px;
   padding-right: 15px;
}
.form-horizontal .form-group > label[class*="col-"] {
   text-align: right;
   padding-top: 7px;
   margin-bottom: 0;
}

/* BS3's .input-group was display:table — shrink-to-fit; BS5 makes it width:100%
   flex and stretches the .form-control (width:1%; flex:1 1 auto). In .small
   contexts (worksheets, form tables) that balloons money/addon fields — e.g. the
   E&R doc Amount box grew to fill the row and pushed Ref Liber/Rename/Doc Group
   off the line. The compact overrides at the top of this file target exact child
   chains and miss other nestings; this loose descendant rule restores BS3
   content-sizing for every .small context. */
.small .input-group {
   width: auto;
   flex-wrap: nowrap;
}
.small .input-group > .form-control {
   /* 07/13/26 CL OBO GG r14263 used flex:0 0 auto+width:initial, sizing the input
      to its intrinsic width (e.g. 204px) — which overflowed a narrower group
      (179px), so right-aligned money values spilled past the field's right edge
      (recording fee fields). flex:0 1 auto (grow-off keeps E&R Amount compact in
      a WIDE group; shrink-on fits a NARROW group) + max-width:100% caps at group. */
   flex: 0 1 auto;
   width: initial;
   max-width: 100%;
   min-width: 0;
}

/* Tax worksheet (table.onlinetax) compound rows pack several fields inline into a
   single cell — date input, money fields, status select, payoff. BS5 renders each
   money field's .form-group wrapper as display:block full-width, so every money
   field dropped to its own line and one tax row ballooned to 5+ stacked lines
   (searchers couldn't see a whole row at once). Make the wrappers inline-block,
   content-sized, so the row flows on one line like v1. */
table.onlinetax td > .form-group {
   display: inline-block;
   width: auto;
   vertical-align: middle;
   margin: 0 4px 0 0;
}
table.onlinetax td > .form-group > .input-group {
   display: inline-flex;
   width: auto;
}

/* Expanded-view popouts (⤢ on the pane tab strips and the Legal/Patriot boxes):
   .expanded-view{position:absolute} + the panes' sticky top:0 pins the expanded
   pane over the very top of the page, hiding the order heading. Under v2's flex
   .row, reflow instead: the pane takes its own full-width line, the heading stays
   visible and the sibling panes wrap below. */
#spa-page-container .left-pane.expanded-view,
#spa-page-container .right-pane.expanded-view,
#spa-page-container .last-pane.expanded-view {
   position: relative;
   top: auto;
   width: 100%;
}

/* Struck rows (DataTrace strike checkbox, applyStrikeCheckBox): line-through on
   the <tr> never propagates into form-control text, so e.g. the DataTrace Notes
   box stayed unstruck. Strike the controls explicitly — covers both the inline
   style the strike handlers set and the .strike-text class path. */
tr[style*="line-through"] input[type="text"],
tr[style*="line-through"] textarea,
tr.strike-text input[type="text"],
tr.strike-text textarea {
   text-decoration: line-through;
}

/* Float utilities (BS5: float-end / float-start) */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }
.navbar-right { margin-left: auto !important; }

/* Images (BS5: img-fluid) */
.img-responsive { max-width: 100%; height: auto; display: block; }

/* Form helper text (BS5: form-text) */
.help-block {
   display: block;
   margin-top: .25rem;
   margin-bottom: .5rem;
   font-size: .875em;
   color: #6c757d;
}

/* Buttons (BS5 replaced btn-default with btn-secondary) */
.btn-default {
   --bs-btn-color:                 #333;
   --bs-btn-bg:                    #fff;
   --bs-btn-border-color:          #ccc;
   --bs-btn-hover-color:           #333;
   --bs-btn-hover-bg:              #e6e6e6;
   --bs-btn-hover-border-color:    #adadad;
   --bs-btn-focus-shadow-rgb:      130,138,145;
   --bs-btn-active-color:          #333;
   --bs-btn-active-bg:             #d4d4d4;
   --bs-btn-active-border-color:   #8c8c8c;
   --bs-btn-disabled-color:        #333;
   --bs-btn-disabled-bg:           #fff;
   --bs-btn-disabled-border-color: #ccc;
}

/* Labels (BS5 removed, replaced with badge) */
.label {
   display: inline-block;
   padding: .35em .65em;
   font-size: .75em;
   font-weight: 700;
   line-height: 1;
   color: #fff;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: .375rem;
}
.label-default { background-color: #6c757d; }
.label-primary { background-color: #0d6efd; }
.label-success { background-color: #198754; }
.label-info    { background-color: #0dcaf0; color: #000; }
.label-warning { background-color: #ffc107; color: #000; }
.label-danger  { background-color: #dc3545; }

/* Input sizing (BS5: form-control-sm / form-control-lg) */
.input-sm {
   min-height: calc(1.5em + .5rem + 2px);
   padding: .25rem .5rem;
   font-size: .875rem;
   border-radius: .25rem;
}
.input-lg {
   min-height: calc(1.5em + 1rem + 2px);
   padding: .5rem 1rem;
   font-size: 1.25rem;
   border-radius: .5rem;
}

/* Well (BS5 removed) */
.well {
   padding: 1rem;
   background-color: #f8f9fa;
   border: 1px solid #e9ecef;
   border-radius: .375rem;
   margin-bottom: 1rem;
}
/* well-sm — small inline well (BS3 had .well.well-sm). Used as an info
   chip next to form controls; must flow inline so it doesn't wrap to a
   new line below the adjacent input/select. */
.well-sm {
   display: inline-block;
   vertical-align: middle;
   padding: .35rem .6rem;
   margin-bottom: 0;
   background-color: #f8f9fa;
   border: 1px solid #e9ecef;
   border-radius: .25rem;
   font-size: .875rem;
}

/* col-xs-* → BS5 col-* equivalents (flex-basis based) */
[class*="col-xs-"] {
   position: relative;
   width: 100%;
   padding-right: calc(var(--bs-gutter-x) * .5);
   padding-left: calc(var(--bs-gutter-x) * .5);
}
.col-xs-1  { flex: 0 0 auto; width:  8.33333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

/* Panel base — matches BS5 card surface so existing .panel structure renders. */
.panel {
   background-color: #fff;
   border: 1px solid rgba(0,0,0,.175);
   border-radius: .375rem;
   margin-bottom: 1rem;
}
.panel-heading {
   padding: .5rem 1rem;
   background-color: rgba(0,0,0,.03);
   border-bottom: 1px solid rgba(0,0,0,.175);
   border-top-left-radius: calc(.375rem - 1px);
   border-top-right-radius: calc(.375rem - 1px);
}
.panel-body   { padding: 1rem; }
.panel-footer {
   padding: .5rem 1rem;
   background-color: rgba(0,0,0,.03);
   border-top: 1px solid rgba(0,0,0,.175);
   border-bottom-right-radius: calc(.375rem - 1px);
   border-bottom-left-radius: calc(.375rem - 1px);
}
.panel-title  { margin: 0; font-size: 1rem; }

/* BS3 breadcrumb had background-color #f5f5f5; BS5 dropped it. */
.breadcrumb { background-color: #f5f5f5; padding: .5rem 1rem; border-radius: .375rem; }

/* SPA cells sometimes carry both a col-* class (sizing) and .input-group
   (layout) on the same <div>.  BS5's .input-group is width:100% which
   overrides the col's width and pushes the cell onto its own row.  Let the
   col keep ownership of width. */
[class*="col-"].input-group,
[class*="col-"].input-group-sm,
[class*="col-"].input-group-lg {
   width: auto;
}

/* Panel contextual variants (BS3 had panel-default/primary/success/...) */
.panel-default { border-color: #dee2e6; }
.panel-default > .panel-heading { color: #212529; background-color: #f8f9fa; border-color: #dee2e6; }
.panel-primary { border-color: #0d6efd; }
.panel-primary > .panel-heading { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
.panel-success { border-color: #198754; }
.panel-success > .panel-heading { color: #fff; background-color: #198754; border-color: #198754; }
.panel-info    { border-color: #0dcaf0; }
.panel-info    > .panel-heading { color: #000; background-color: #0dcaf0; border-color: #0dcaf0; }
.panel-warning { border-color: #ffc107; }
.panel-warning > .panel-heading { color: #000; background-color: #ffc107; border-color: #ffc107; }
.panel-danger  { border-color: #dc3545; }
.panel-danger  > .panel-heading { color: #fff; background-color: #dc3545; border-color: #dc3545; }

/* Responsive hidden-*/visible-* helpers — BS5 dropped these in favor of
   .d-none / .d-*-block. Breakpoints match BS5: sm≥576, md≥768, lg≥992. */
.hidden-xs { display: none !important; }
@media (min-width: 576px) { .hidden-xs { display: initial !important; } .hidden-sm { display: none !important; } }
@media (min-width: 768px) { .hidden-sm { display: initial !important; } .hidden-md { display: none !important; } }
@media (min-width: 992px) { .hidden-md { display: initial !important; } .hidden-lg { display: none !important; } }

.visible-xs { display: none !important; }
.visible-sm { display: none !important; }
.visible-md { display: none !important; }
.visible-lg { display: none !important; }
@media (max-width: 575.98px) { .visible-xs { display: initial !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .visible-sm { display: initial !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .visible-md { display: initial !important; } }
@media (min-width: 992px) { .visible-lg { display: initial !important; } }

/* form-inline -> d-flex flex-wrap (translated by bs5class()) makes the form a
   flex container. Block-level groups like an .accordion (translated from
   .panel-group) used to render as their own block in BS3's inline-block
   form-inline; under flex they share rows with siblings unless forced to 100%
   width. Force panel groups onto their own line so the 'Submit and Return'
   button + delete checkbox can stay on row 1 while each accordion gets its
   own row. */
form.d-flex > .accordion,
form.d-flex > .panel-group {
  width: 100%;
}

/* CSS spec: floats are ignored on flex items. So .float-end / .float-right on
   a direct child of a flex form does nothing visually under BS5's flex form
   (form-inline -> d-flex flex-wrap). Translate it to margin-start:auto so the
   item actually pushes to the end of the row, matching the developer's intent
   from BS3 days where form-inline children were inline-block and float worked.
   Mirror float-start with margin-end:auto for symmetry. */
form.d-flex > .float-end,
form.d-flex > .float-right {
  margin-left: auto !important;
}

/* BS3 -> BS5 inline-by-default restoration.
   BS3 .form-control was display:inline-block; BS5 made form-control/form-select
   display:block; width:100%, which stacks fields that previously sat on one line
   (e.g. a date input followed by a select inside a single table cell). Restore
   inline behavior inside compact tables so existing layouts render as before. */
.table.small > tbody > tr > td > .form-control,
.table.small > tbody > tr > td > .form-select,
.table-sm > tbody > tr > td > .form-control,
.table-sm > tbody > tr > td > .form-select {
  display: inline-block;
  width: auto;
}

/* Bold the native file input's "Choose Files" button so it reads as the
   action it is (requested for the OLW TAXES Image File row, applies to all
   file inputs). ::file-selector-button is the only way to reach it - the
   button is a pseudo-element, inline styles on the input can't target it. */
input[type="file"]::file-selector-button {
  font-weight: bold;
}
/*EOF*/