@media (min-width: 992px) {
    div#billing_planRow.row {
        margin-left: -130px;                                /* Setting x-margin to -130px makes total width 990px on lg+ screens*/
        margin-right: -130px;
    }
}

body { max-width: 760px; }                                  /* Initial max-width. Once KO bindings are applied, that takes over. */

label { margin-bottom: 0.25rem; }                           /* BS4's default is 0.50rem, which is a bit much. */

.route { display: none; }                                   /* Redundant rules, for preventing any possible flicker. */
.route.active {
  display: block;
  min-height: 80vh;
}



.lhAndRhPanelContainer {
    /*height: set-via-ko-binding*/
    margin: 0 -15px;                                        /* Cancel's 15px padding on bootstrap's .container(-fluid)'s. */
    x-background-color: black;
}
.lhPanel, .rhPanel {
    display: inline-block;
    height: 100%;
    max-height: 100%;
    overflow: scroll;
    vertical-align: top;                                    /* This is req'd for proper v-alignment, esp. on Safari. */

    scrollbar-width: thin;
    /*scrollbar-color: <different for .lhPanel vs .rhPanel> */
}
.lhPanel {
    background-color: black; /*cornflowerblue; /*lightGray;*/
    overflow-x: auto;                                                       /* Req'd for putting 'Add Column' btn on board. */
    white-space: nowrap;                                                    /* Req'd for putting 'Add Column' btn on board. */
    scrollbar-color: #ecf0f1 transparent;                                   /*<-- Flat clouds*/
}
.rhPanel {
    background-color: #f5f9fa;                                              /* <-- Flat clouds++++++. Was: lightCyan;*/
    padding: 15px;
    /*border-left: 2px solid #7f8c8d;                                         /*<-- Flat asbestos. Was: navy;*/
    scrollbar-color: #95a5a6 transparent;                                   /*<-- Flat concrete*/
}

.stageList {
    overflow-x: auto;
    white-space: nowrap;
    /*min-height: 90vh;*/
    background-color: inherit; /*lightSeaGreen, cornflowerblue; /*lightGray;*/
    /*border-radius: 8px;*/
    /*margin: 0 -15px;    /* Cancel's 15px padding on bootstrap's .container(-fluid)'s. */
    display: inline-block;
    min-height: 300px;      /* Min. 250px req'd by column-menu dropdown. Keeping 300px w/ room, to pre-accomodate new menu items. */
}
.stage {
    vertical-align: top;
    display: inline-block;
    max-width: 270px;
    min-width: 270px;
    background-color: white;
    margin: 8px 4px;
    padding: 8px;
    border-radius: 4px;
    white-space: normal;

    /*min-height: 90vh;
    max-height: 90vh;
    overflow: auto;*/
}
.stage.wipLimitExceeded {
    background-color: #fea                                /* Color #ffbe76=SPICED NECTARINE from Flat AU pallet. */
}
.stage:first-child {
    margin-left: 8px;  /* LR margin is 4px, but L-margin 8px for 1st stage.*/
}
/*.stage:last-child {
    margin-right: 15px; /* Applied to div.justAfter_stageList instead. *x/
}*/
div.justAfter_stageList {
    display: inline-block;
    vertical-align: top;
    margin: 8px;   /* Y-margin matches .stage, double X-dirn margin.*/
    margin-right: 48px; /* 6x .stage's right margin. */
}
.stage_dragHandle {
    touch-action: none;
    cursor: pointer;
}
/*.stageHeader { x-border-bottom: 1px solid #ecf0f1; }  /*flat clouds*x/
.stageFooter { x-border-top: 1px solid #ecf0f1; }*/


.modal-backdrop.fade.show.underBootbox { z-index: 1038; }   /* Normally, z-indices are 1040 and 1050 for backdrop and modal resp.ly */
.modal.underBootbox { z-index: 1039; }                      /* We use 1038 & 1039 to ensure that .underBootbox appears under 1040. */


.bayCardList {
    /*padding-top: 15px;
    padding-bottom: 15px;*/

    /*min-height: 90vh;*/
    /*max-height: 70vh;*/

    min-height: 30px; /* Minimum drop-tagert height. */
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: lightGray transparent;                   /* <-- Flat silver */

}
.bayCard {                                                  /* Using .bayCard, as .card is already defined by BS4.*/
    border: 1px solid lightGray;
    margin: 6px 2px;
    padding: 8px;   /* <-- XXX:Note: Seems necessary to offset right-floated edit icon/btn. */
    /*background-color: lightYellow;*/
    border-radius: 2px;
}
.bayCard_dragHandle {
    touch-action: none;
    cursor: pointer;
}
.bayCard_dragHandle.touchIntent {
    float: right;
    /*background-color: lightYellow;*x/
    padding: 0.8rem;
    border-radius: 50%;*/
    margin: -4px -4px +4px +4px;
}


.bayCard:hover {
    border: 3px solid lightGray; /*lightSkyBlue; #80bdff; darkGray; deepSkyBlue; '#80bdff' also used on form-control:focus. */
    padding: 6px;    /*Adjust padding (-2) against border (+2) */
    /*background-color: lemonChiffon;*/
    border-radius: 4px;
}
.gu-mirror {
    transform: rotate(4deg);
}

/*.bayCard.bayCardLink {    --deprecated. Was used only for testing.
    display: block;
    color: black;
}
.bayCard.bayCardLink:hover {
    text-decoration: none;
}*/

.bizFeature {
    background-color: lightYellow;
    font-size: 110%;
    border: 2px solid gray;
    border-radius: 4px;
    max-width: 330px;
    margin: 10px auto;
    padding: 16px 8px;
}
.upgradeToBusiness_freqDiv {
    background-color: lightCyan;
    font-size: 110%;
    border: 1px solid lightGray;
    border-radius: 4px;
    padding: 15px;
}

.trainingColor {
    color: orangeRed;
}
/*.btn.trainingColor {
    background-color: orangeRed;
    color: white;
}*x/
.btn.trainingColor {
    background-color: white;
    border-color: orangeRed;
    color: orangeRed;
}*/

.bb_cardInCalendar {
    cursor: pointer;
    margin: 2px;
    border: 1px solid lightGray;
}

.donelyColor { color: #0cc; }