﻿
/*!
*  bootstrap-overrides.css supports angular with Bootstrap 3.5.5 
   while Bankers Dashboard is running Bootstrap 5.3.3  
*  Upgrading angular would be a monumental effort.
*    
*  Classes beginning with "bso-" were created for directed overrides.
*/

/* jQuery-ui dialog rendering override for missing x in close box */

button.ui-dialog-titlebar-close:after {
    content: 'x' !important;
    position: absolute;
    top: -1px;
    right: 4px;
    font-size: .75em;
    color: #54504F;
    font-weight: bolder;
}

/* Startup widget styling overrides */

.widget-btn {
    border: none;
    padding: 0;
    line-height: normal;
    color: black !important;
    font-size: 12px;
}

#frameDialogContent > body {
    background: #C5C5C5;
    color: #2C2C2C;
    padding: 10px;
    display: inline-block;
    font-family: Arial;
    overflow: hidden;
}


button.chevron + ul.dropdown-menu > li > button {
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    font-size: 14px;
}

table.table.table-financial.table-wdgt-striped {
    --bs-table-bg: transparent !important;
    --bs-table-border-color: transparent;
}

table.table.table-financial tr, table.table.table-financial td, table.table.table-financial th {
    padding: 2px 7px 2px 7px;
}

.table > tbody > tr > td, .table > tbody > tr > th, 
.table > tfoot > tr > td, .table > tfoot > tr > th, 
.table > thead > tr > td, .table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid transparent; 
    border-bottom: 0;
}

#tblUpdateLog.table > tbody > tr > td, #tblUpdateLog.table > tbody > tr > th,
#tblUpdateLog.table > tfoot > tr > td, #tblUpdateLog.table > tfoot > tr > th,
#tblUpdateLog.table > thead > tr > td, #tblUpdateLog.table > thead > tr > th {

    border-top: 0;
}

/* TODO: need to refine what is going on... */
.ember-application .table > tbody > tr > td,
.ember-application .table > tfoot > tr > td,
.ember-application .table > thead > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.ember-application .table-condensed > tbody > tr > td,
.ember-application .table-condensed > tbody > tr > th,
.ember-application .table-condensed > tfoot > tr > td, 
.ember-application .table-condensed > tfoot > tr > th,
.ember-application .table-condensed > thead > tr > td, 
.ember-application .table-condensed > thead > tr > th {
    padding: 5px;
}

.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
    padding: 5px;
}

/* NOTE: #tbl's must be concatenated with .table-condensed and the #div's are not. */
#reportTable.table-condensed > thead > tr > th,
#tblUpdateLog.table-condensed > thead > tr > th,
#tblCdMaturityRateChange.table-condensed > thead > tr > th,
#divLoanConcentrationList .table-condensed > thead > tr > th,
#divAccrualMethodList .table-condensed > thead > tr > th,
#divRatedLoans .table-condensed > thead > tr > th,
#divGraphListing .table-condensed > thead > tr > th,
#divIndicators .table-condensed > thead > tr > th,
#divLoanTypes .table-condensed > thead > tr > th,
#divRiskWeightings .table-condensed > thead > tr > th {
    padding: 0px;
    border: 0;
}

/* NOTE: #tbl's must be concatenated with .table-condensed and the #div's are not. */
#reportTable.table > tbody > tr > td,
#tblUpdateLog.table > tbody > tr > td,
#tblCdMaturityRateChange.table > thead > tr > th,
#divLoanConcentrationList .table > tbody > tr > td,
#divAccrualMethodList .table > tbody > tr > td,
#divRatedLoans .table > tbody > tr > td,
#divGraphListing .table > tbody > tr > td,
#divIndicators .table > tbody > tr > td,
#divLoanTypes .table > tbody > tr > td,
#divRiskWeightings .table > tbody > tr > td {
    vertical-align: middle;
}

.ember-application .table-condensed > tbody > tr > td,
.ember-application .table-condensed > tfoot > tr > td,
.ember-application .table-condensed > thead > tr > td {
    vertical-align: middle;
}


/* Dialog control button group */

.bso-control .table > tbody > tr > td,
.bso-control .table > tbody > tr > th,
.bso-control .table > tfoot > tr > td,
.bso-control .table > tfoot > tr > th,
.bso-control .table > thead > tr > td,
.bso-control .table > thead > tr > th {
    border-top: 1px solid #ddd;
}

/*  bso-border1 added to tables where border=1.  */
table.bso-border1 td {
    border: 1px solid #000; 
}


/* Bootstrap modal-content overrides */

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal-content {
    --bs-modal-bg: white;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0,; .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5)
}

.show {
    opacity: 1;
}

/* Enhanced Reports */

/*report-custom-component .collapse {
    display: none;
}

report-custom-component .collapse.in {
    display: block;
}*/

.bso-modal.show,
#tipSheetModal.show {
    opacity: 1;
    display: block !important;
}

.modal-dialog {
    top: 30px;
    max-width: 600px;
}

.modal-header {
    display: block; /* required for moving x to the right */
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}

.modal-header .close {
    margin-top: -2px;
    flex: none;
}

.modal-title {
    margin-top: 0px;
    margin-bottom: 0px;
}

.modal-body {
    position: relative;
    padding: 15px;
}

.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 1px solid #e5e5e5;
}

.modal-footer .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

.modal-footer .btn + .btn {
    margin-bottom: 0;
    margin-left: 5px;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-block + .btn-block {
    margin-top: 5px;
}

/* tool tips */

.tooltip {
    font-size: 12px;
}

/* Miscellanious overrides */

#divUserListing a {
    color: #337ab7;
    text-decoration: none;
}

#divUserListing a:focus, #divUserListing a:hover {
    color: #23527c;
    text-decoration: underline;
}

/* Dialog form styling overrides */


body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.h1, .h2, .h3, h1, h2, h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.h4, .h5, .h6, h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
    font-size: 65%;
    font-weight: 400;
    line-height: 1;
    color: #777;
}

.h4, h4 {
    font-size: 18px;
}

/* Does this need to be qualified?  ember-view */
.btn {
    --bs-btn-font-size: 14px;
}

.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    pointer-events: auto;
    filter: alpha(opacity = 65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary,
.btn-primary:hover {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}

.btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primar {
    background-color: #337ab7;
    border-color: #2e6da4;
}

.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default,
.btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover,
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}

/*.btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default {
    cursor: not-allowed;
    pointer-events: auto;
    filter: alpha(opacity = 65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}*/

.btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}

.btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, 
.btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, 
.open > .dropdown-toggle.btn-default.focus, 
.open > .dropdown-toggle.btn-default:focus, 
.open > .dropdown-toggle.btn-default:hover {
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
}

/* class table-outlined can be used for this because there is only one reference */
.table-outlined > tbody > tr > th,
.table-outlined > tfoot > tr > th,
.table-outlined > thead > tr > th,
.table-outlined > tbody > tr > td,
.table-outlined > tfoot > tr > td,
.table-outlined > thead > tr > td {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
}



#divUserListing .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 0; 
    padding-bottom: 0;
    padding-top: 0;
}

#divUserListing .fixed-table-container-inner {
    overflow-x: hidden;
}

#divUserListing .table > tbody > tr > td {
    vertical-align: middle;
}

.bso-package {
    width: 100%;
    max-width: 100%;
}

.bso-package.table > tbody > tr > td {
    background-color: #C5C5C5;
    padding: 5px;
    border-top: 0;
}

/* 
    Overrides for HTML generated by Ember Application.  Search on ‘Ember.Application.create()’.
  
    Affects the following
    o	customCalculations	Tools > Custom Calculations
    o	profitCenterRegion	Admin > G/L Mappings > Profit Centers
    o	reportPackages 		Report Packages > Setup Report Packages
    o	supportMedia		Help > Tip Sheet & Webinars

*/
    
div.bso-flex .ember-view { 
    display: flex;
    flex-wrap: wrap;
}

.fa-star.bso-star {
    color: white;
}

.fa-star.bso-star-gold {
    color: gold;
}

.bso-content hr,
div.ember-view hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
    opacity: 1;
}

.table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
}

#mcTable > thead > tr > th {
    border: 0;
}

.ember-view.dataTable a {
    color: #337ab7;
    text-decoration: none;
}

.ember-view.dataTable a:focus, .ember-view.dataTable a:hover {
    color: #23527c;
    text-decoration: underline;
}

/* TODO: group with other .bso-modal's */

.bso-modal .form-group {
    display: flex;
    margin-bottom: 15px;
}


/* TODO: is this needed? */
.bso-calc .form-control {
    height: 34px;
}


/* TODO: what is the height in QA? */
.bso-modal .form-control {
    height: 37px;
    width: 100%;
}

.bso-float .form-control {
    height: 34px;
    width: 100%;
}

.bso-float label {
    white-space: nowrap;
}

.bso-btn-grp.input-group-btn > .btn + .btn {
    margin-left: -5px;
}

.bso-float .btn {
    --bs-btn-line-height: 1.4;
}
.bso-pkg .form-group {
    margin-right: -15px;
    margin-left: -15px;
    margin-bottom: 15px;
    display: flex;
}


.bso-pkg table {
    --bs-table-bg: #C5C5C5;
}

.bso-pkglist .glyphicon {
    font-size: 14px;
}

.bso-pkglist a > .glyphicon, .bso-pkglist button > .glyphicon {
    position: relative;
    top: 0px;
}


.bso-pkglist.table > tbody > tr > td, 
.bso-pkglist.table > tfoot > tr > td, 
.bso-pkglist.table > thead > tr > td {
    border-top: 0;
}


.ember-view .input-sm,
.bso-calc .input-sm,
.bso-modal .input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

#body_FileUploadControl {
    font-size: 0.75rem;
}

.upload-template .modal-body .btn.btn-default {
    white-space: nowrap;
}

.bso-modal .modal-footer > * {
    margin: 0;
    margin-right: 10px;
}

.pagination > li > a, .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination > .disabled > a, .pagination > .disabled > a:focus, .pagination > .disabled > a:hover, .pagination > .disabled > span, .pagination > .disabled > span:focus, .pagination > .disabled > span:hover {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    z-index: 2;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

/* end of ember-application */

.bso-control .table,
.bso-background .table,
.fixed-table-container .table,
.projections-menu .table,
#content .table,
#processing .table,
#dialogMessage .table,
#divAccess .table,
#divAccrualMethodList .table,
#divAccrualMethodEdit .table,
#divAddNewCategory .table,
#divAddNewLoanType .table,
#divAddNewRiskWeighting .table,
#divALData .table,
#divCategory .table,
#divDataSource table,
#divDefaults .table,
#divEdit .table,
#divFinished .table,
#divGraphListing .table,
#divGraphSettings .table,
#divGroup .table,
#divIndicators .table,
#divIndicatorRadios .table,
#divLedgerType .table,
#divListing .table,
#divLoanConcentrationList .table,
#divLoanTypes .table,
#divPeerGroupEdit .table,
#divPeerGroupListing .table,
#divRange .table,
#divRatedLoans .table,
#divRiskWeightings .table,
#divSearchBanks .table,
#divSearchResults .table,
#divSettings .table,
#divSettings2 .table,
#divSlide .table,
#divSmartFill .table,
#divTransferPackages .table,
#divTrainingSchedule .table,
#divUserAccess .table,
#divUserStatistics .table,
#divUserEdit .table,
#divUserListing .table,
#divUserSettings .table,
#divAccrualMethodList.table,
#divAccrualMethodEdit.table,
#tblUpdateLog.table {
    --bs-table-bg: #c5c5c5;
}

#BalSheet .table,
#IncomeStatement .table,
#Other .table,
.alert-table {
    --bs-table-bg: #B9CAE7;
}


.bso-background {
    --bs-table-bg: #c5c5c5;
}

/*.dlg_moduleCell > table {
    --bs-table-bg: #fff;
}*/

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

/* fixes down caret on select drop downs */
.form-control {
    appearance: auto;
    display:inline-block;
}

/* Does this need to be qualified? ember-view */
.ember-view .form-control {
    font-size: 14px;
}


.bso-package .form-control,
#tblColumn1 .form-control,
#tblProperties .form-control {
    font-size: 12px;
}

#divSuppressZeros label {
    display: inline-block;
    margin-bottom: 5px;
}

.dlg_moduleCell > table > tbody > tr > td {
    vertical-align: top;
    height: 100px;
    background-color: white;
}

/* TODO: do we need to expand to .pc-region and or .blue? */
.table > tbody > tr > td.dlg_Group,
.table > tbody > tr > th.dlg_Group,
.table > tfoot > tr > td.dlg_Group,
.table > tfoot > tr > th.dlg_Group,
.table > thead > tr > td.dlg_Group,
.table > thead > tr > th.dlg_Group, .pc-region, .blue {
    color: blue;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity = 20);
    opacity: .2;
}

button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}


/* panel overrides */

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.panel-default {
    border-color: #ddd;
}

.panel-body {
    padding: 15px;
}

p {
    margin: 0 0 10px;
}

.panel .form-group {
    margin-bottom: 15px;
}

/*.ember-checkbox, */
.panel .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.panel .form-control[disabled], .panel .form-control[readonly], .panel fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-default > .panel-heading {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.panel-title > .small, .panel-title > .small > a, .panel-title > a, .panel-title > small, .panel-title > small > a {
    color: inherit;
}

#dashboard-groups-container .group.modified > * {
    background-color: #E9E9E9;
}

#dashboard-groups-container .panel {
    margin-bottom: 0px;
}

#dashboard-groups-container a {
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
}


/* page overrides */

.page-header {
    padding-bottom: 9px;
    margin: 0 0 20px;
    border-bottom: 1px solid #eee;
}

.ember-view .small, .ember-view small,
.bd-page-header .small, .bd-page-header small {
    font-size: .580em;
    font-weight: 400;
    line-height: 1;
    color: #777;
}

/* Overrides to allow angular ui to process popovers at 3.3.1 while running Bootstrap 5.3.3 */

.fade.in {
    opacity: 1;
}

.modal-backdrop.in {
    filter: alpha(opacity = 50);
    opacity: .5;
}

.popover {
    width: 100%;
    position: absolute;
    word-wrap: normal;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}

.popover.bottom > .arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #fff;
}

.popover > .arrow, .popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover > .arrow:after {
    content: "";
    border-width: 10px;
}

.popover.bottom > .arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #fff;
}

.popover > .arrow {
    border-width: 11px;
}

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25);
}

.popover-content {
    padding: 9px 14px;
}


.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

/* Overrides for Alerts popover formatting and bootstrap 5.3.3 tabs */


.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row > .tab-content {
    width: 100%;
    max-width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

/*.tab-content > .active {
    display: block;
    opacity: 1;
}*/

.popover-content .row > * {
    flex-shrink: 1;
}

.col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, 
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9,
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9,
.col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9,
.col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

/* Overrides for custom report */

.report-page .report-row {
    padding-top: 11px;
    padding-bottom: 11px;
    margin-left: 11px;
    margin-right: 11px;
    padding-right: 0px;
    padding-left: 0px;
}

.collapse.ng-scope[ng-if="account.isExpanded"] {
    display: block;
}

.report-page .report-body-container .row > * {
    flex-shrink: 1;
}

#dashboard-groups-container.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    width: 99%;
}

#dashboard-groups-container .table-condensed {
    border-spacing: 0;
}

/* following two classes set float-end for edit, save and cancel icons  */

#dashboard-groups-container .bso-nowrap {
    display: inline-block;
    width: 100%;
}

#dashboard-groups-container .bso-nowrap .col-xs-11 {
    float: left;
}

    /* TODO: At 1200px or less the rows wrap with col-lg-3 on first row and col-lg-9 on second.
    The previous bootstrap used float left to align to one row.  We need to flex equivalent. 
*/
    /*@media (min-width: 1200px) {
    .report-page .report-row {
        flex-wrap: nowrap;
    }
}*/


@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}


@media (min-width: 768px) {
    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }
}

@media (min-width: 1200px) {
    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }
}

@media (min-width: 1200px) {
    .modal-header .h4,.modal-header h4 {
        font-size: 18px;
    }
}

@media (min-width: 992px) {
    .bso-float .col-md-1, .bso-float .col-md-2, .bso-float .col-md-3,
    .bso-float .col-md-4, .bso-float .col-md-5, .bso-float .col-md-6,
    .bso-float .col-md-7, .bso-float .col-md-8, .bso-float .col-md-9,
    .bso-float .col-md-10, .bso-float .col-md-11, .bso-float .col-md-12 {
        float: left;
    }
}

@media (min-width: 1200px) {
    .bso-float .col-lg-1, .bso-float .col-lg-2, .bso-float .col-lg-3,
    .bso-float .col-lg-4, .bso-float .col-lg-5, .bso-float .col-lg-6,
    .bso-float .col-lg-7, .bso-float .col-lg-8, .bso-float .col-lg-9,
    .bso-float .col-lg-10, .bso-float .col-lg-11, .bso-float .col-lg-12 {
        float: left;
    }
}

.bso-float .col-xs-1, .bso-float .col-xs-2, .bso-float .col-xs-3, .bso-float .col-xs-4,
.bso-float .col-xs-5, .bso-float .col-xs-6, .bso-float .col-xs-7, .bso-float .col-xs-8, 
.bso-float .col-xs-9, .bso-float .col-xs-10, .bso-float .col-xs-11, .bso-float .col-xs-12 {
    float: left;
}

.bso-float .col-xl-1, .bso-float .col-xl-2, .bso-float .col-xl-3, .bso-float .col-xl-4,
.bso-float .col-xl-5, .bso-float .col-xl-6, .bso-float .col-xl-7, .bso-float .col-xl-8,
.bso-float .col-xl-9, .bso-float .col-xl-10, .bso-float .col-xl-11, .bso-float .col-xl-12 {
    float: left;
}

/* TODO: the following needs to be addressed. */
.col-xs-12 {
    /*    flex: 0 0 auto; */
    width: 100%;
}

.col-xs-11 {
    /*    flex: 0 0 auto; */
    width: 91.66666667%;
}

.col-xs-10 {
    /*    flex: 0 0 auto; */
    width: 83.33333333%;
}

.col-xs-9 {
    /*    flex: 0 0 auto; */
    width: 75%;
}

.col-xs-8 {
    /*    flex: 0 0 auto; */
    width: 66.66666667%;
}

.col-xs-7 {
    /*    flex: 0 0 auto; */
    width: 58.33333333%;
}

.col-xs-6 {
    /*    flex: 0 0 auto; */
    width: 50%;
}

.col-xs-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}

.col-xs-4 {
    /*    flex: 0 0 auto; */
    width: 33.33333333%;
}

.col-xs-3 {
    /*    flex: 0 0 auto; */
    width: 25%;
}

.col-xs-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}

.col-xs-1 {
    /*    flex: 0 0 auto; */
    width: 8.33333333%;
}


/* Following overrides col classes and media forcing a fixed width for each column count. */
.report-width-13 {
    width: 1556px;
    max-width: 1556px;
}

.report-width-12 {
    width: 1466.24px;
    max-width: 1466.24px;
}

.report-width-11 {
    width: 1376.47px;
    max-width: 1376.47px;
}

.report-width-10 {
    width: 1286.7px;
    max-width: 1286.7px;
}

.report-width-9 {
    width: 1196.93px;
    max-width: 1196.93px;
}

.report-width-8 {
    width: 1107.16px;
    max-width: 1107.16px;
}

.report-width-7 {
    width: 1017.39px;
    max-width: 1017.39px;
}

.report-width-6 {
    width: 927.62px;
    max-width: 927.62px;
}

.report-width-5 {
    width: 837.85px;
    max-width: 837.85px;
}

.report-width-4 {
    width: 748.08px;
    max-width: 748.08px;
}

.report-width-3 {
    width: 658.31px;
    max-width: 658.31px;
}

.report-width-2 {
    width: 568.54px;
    max-width: 568.54px;
}

.report-width-1 {
    width: 478.77px;
    max-width: 478.77px;
}


.btn-group-vertical > .btn-group:after, .btn-group-vertical > .btn-group:before, .btn-toolbar:after, .btn-toolbar:before, 
.clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, 
.dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, 
.modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, 
.navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, 
.pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}

.nav {
    padding-right: 1px;
    padding-left: 1px;
    margin-bottom: 0px;
    list-style: none;
}

.nav-tabs.nav-justified {
    width: 100%;
    border-bottom: 0;
}

.nav-tabs.nav-justified > li {
    float: none;
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li {
        display: table-cell;
    }
}

.nav > li > button {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-tabs .nav-link {
    color: white;
    background-color: lightgray;
    border: none;
    text-decoration: none;
    outline: none;
    border-radius: 0;
    width: 97px;
}

.nav-tabs .nav-item.active {
    outline: none;
    border-top: 1px solid lightgray;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: black;
    background-color: white;
}

.alerts-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 0;
}

.alerts-title {
    font-weight: bold;
    width: 100%;
}

ul[role="tablist"] > li > button {
    min-height: 4em;
    max-height: 4em;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

/* Override for dialog buttons ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only and ui-button-text */
.ui-dialog-buttonset > button {
    margin-right: .1em;
    margin-left: 0;
    margin-right: -.3em;
    border: none;
    padding: .4em 1em;
    color: #2C2C2C;
    background: #e6e6e6 url(../../images/jQueryUI/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    display: inline-block;
    position: relative;
    line-height: normal;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    overflow: visible; /* removes extra width in IE */
}

.bso-pkgbtn .ui-dialog-buttonset > button {
    padding: 0px;
}

    .ui-dialog-buttonset > button:hover,
    .ui-dialog-buttonset > button:focus {
        background: #dadada url(../../images/jQueryUI/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
        color: #212121;
    }

.btn-group-xs > .btn, .btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

    /* input group classes for Display Names */

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}

.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.input-group-addon:last-child {
    border-left: 0;
}

/* Loan Pricing > Loan Pricing Model */

@media (min-width: 768px) {
    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }
}

@media (min-width: 768px) {
    .col-sm-offset-3 {
        margin-left: 25%;
    }
}


.table > tbody + tbody {
    border-top: 2px solid #ddd;
}

.table-no-padding > tbody > tr > td,
.table-no-padding > tbody > tr > th,
.table-no-padding > tfoot > tr > td,
.table-no-padding > tfoot > tr > th,
.table-no-padding > thead > tr > td,
.table-no-padding > thead > tr > th {
    padding: 1px;
}

.table > tbody > tr > td.loan-default-header {
    text-align: center;
    padding: 5px;
    background-color: #5C7590;
    color: white;
    font-weight: bold;
}

/* for Monthly and Quarterly Dashboard reports. GL Executive Summary reports */

.bso-dash tbody, .bso-dash td, .bso-dash tfoot, .bso-dash th, .bso-dash thead, .bso-dash tr {
    padding: 0;
}

.bso-dash td.td_Numeric {
    padding-left: 15px;
    text-align: right;
}