/* ========================================================================== 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 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; } /* 08/27/26 GG: the compact block above drops .form-select to 8pt, but inside the SPA the matching 8pt rule for .form-control never wins - #spa-page-container input{font-size:110%} (id specificity, see ~line 1860) beats it. So every stayed at 110% (16.9px text, 29.4px tall) while the 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 , compounding to 18.6px; its 27.9px line box plus the theme's 6px padding made Doc Type 42px against 29.4px neighbours. Pin the inner input back to the wrapper's size and match the padding, which lands .ts-control at 27.4px + the wrapper's 1px borders = 29.4px exactly. */ #spa-page-container .container.small .ts-wrapper.form-select > .ts-control, #spa-page-container div.row.small > div .ts-wrapper.form-select > .ts-control { --ts-pr-caret: 1.35rem; /* library sets padding-right with !important via max() */ --ts-pr-min: 2px; padding: 1px 1.35rem 1px 2px; } #spa-page-container .container.small .ts-wrapper.form-select > .ts-control > input, #spa-page-container div.row.small > div .ts-wrapper.form-select > .ts-control > input { font-size: inherit; line-height: inherit; } /* Match a native focused Bootstrap control. A Tom Select's visible border lives on the .ts-wrapper, but that's a
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 */ } /* 09/02/26 CL OBO GG Vendor feedback (OLW/Exam): the bootstrap5 theme's hovered/active dropdown row is var(--bs-tertiary-bg) (#f8f9fa) - near-invisible, especially on small laptop screens. Match a native , 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 (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 (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 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
. 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; } /* BS3 .input-group was display:table and could never wrap; BS5's is display:flex + flex-wrap:wrap, so a money field's $ addon and its fixed-width input stack into two lines whenever a table cell is narrower than addon + input basis (flexbox wraps before it shrinks - seen on the taxid "Special Assessments" browse, Principal Balance Due column). Restore never-wrap inside table cells, and stop flexbox from shrinking the input below its basis: the compact rules above set width:initial so the basis is the input's size= attribute (size=18 on money fields), and BS3 could never shrink an input below that - the cell grew instead. With flex-shrink:0 the same happens here: under auto table layout the column widens into the table's horizontal scroll rather than crushing the field. min-width stays as a readability floor for groups the compact rules do not match (there BS5's width:1% basis + flex-grow sizes the input). */ td .input-group { flex-wrap: nowrap; } td .input-group > .form-control { flex-shrink: 0; min-width: 12ch; } /* BS5's Reboot sets textarea { resize: vertical }; BS3 never restricted it, and intranet users drag clause/feedback textareas wider to read them (the SPA already restores this inside #spa-page-container). The body prefix outranks Reboot's bare element selector regardless of load order. */ body textarea { resize: both; } /*EOF*/