body {
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

table tr td input {
    max-width: 100px;
}

* {
    border-radius: 0 !important;
}

.btn-xlarge {
    padding: 15px 28px;
    font-size: 22px;
    font: bold;
    line-height: normal;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

input.form-fixer {
    padding: 5px;
}

.field-validation-error, .error {
    color: #cc0000
}

.input-xs {
    padding: 5px;
}

body {
    /*background: rgba(0, 0, 0, 0) url("http://greenmotion.com/images/tracks.png") no-repeat;*/
    height: auto;
}

.form-group label.white, .btn-xlarge {
    color: #fff;
    font: normal 16px sans-serif !important;
}

.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #a9d300 !important;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

    .bootstrap-datetimepicker-widget table td.active,
    .bootstrap-datetimepicker-widget table td.active:hover,
    .bootstrap-datetimepicker-widget table td span.active {
        background-color: #a9d300;
    }

.bootstrap-datetimepicker-widget table td.today::before {
    border-color: rgba(0, 0, 0, 0.2) transparent #a9d300 !important;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #a9d300;
    color: white;
    text-align: center;
    z-index: 3;
}

.pt-btn {
    background-color: #a9d300;
    color: #fff;
}

    .pt-btn:hover, .pt-btn:focus {
        background-color: #a9d300 !important;
        color: #000;
    }

.selected-row {
    background-color: #cbcfba;
    border: 3px solid green;
}

.p-overflow {
    background-color: #f37676;
}

.p-below {
    background-color: #8c8cff;
}

.p-ok {
    background-color: #75d175;
}

.p-good {
    background-color: #efed89;
}

/* Green Motion price collected alongside CarsRent/U-Save/DiscoverCars Choice but the two don't
   match (see offersTable.js getCellType) - a distinct red from .p-overflow's pastel background
   so the two signals don't read as the same alert. */
.gm-usave-mismatch {
    border: 3px solid #d90429;
}

.pt-btn {
    padding: 9px 10px !important;
}

.main-form {
    /*padding-bottom: 0px;*/
    /*max-width: 850px !important;
    width: 850px !important;*/
}

.main-form-inner {
    background: rgba(51, 51, 51, 0.6);
    padding: 10px 15px 0px 15px;
}

.main-form-cbox {
    padding-top: 20px;
    min-width: 25px;
    padding-right: 0px;
    color: white;
}

.control-label-custom {
    color: white;
    font-weight: 500;
}

.ratesBtn, .ratesBtnSelect {
    background-color: #a9d300;
    margin-top: 19px;
    height: 33px;
    padding: 5px
}

.dataTable tr {
    height: 1px;
}

    .dataTable tr td {
        height: inherit;
        width: 100px;
        padding: 0 !important;
        margin: 0px;
        font-size: 11px;
    }

        .dataTable tr td p {
            height: 100%;
            padding: 4px 6px;
        }

/* Preview tables built by priceHistory.js - Price History's "Preview results"/"Preview all days"
   and the Scheduler run detail page's "Rates collected" preview, which reuses the same renderer
   (see priceHistory.js's phBuildOffersTable/phBuildBatchOffersTable and offersTable.js's
   createCell). Same compact colored-cell look as the live IndexNew grid above, instead of default
   Bootstrap table-condensed padding, so a stored response previews the way a live search renders.
   No explicit height here: a <td> background already fills the row table layout gives it, so
   forcing height on the cell/paragraph is unnecessary - and actively wrong once a cell holds more
   than one <p> (multiple suppliers on the same day), since each sibling <p> would then stretch to
   the *whole* row's height and spill over the rows beneath it. */
.offers-preview-table tr td {
    width: 100px;
    padding: 0 !important;
    margin: 0px;
    font-size: 11px;
}

    .offers-preview-table tr td p {
        padding: 4px 6px;
        margin: 0;
    }

.offers-preview-table thead th:not(:first-child) {
    width: 100px;
    font-size: 11px;
}

.refresh-day-rates{
    font-size:18px;
}

/* Each category tab's action bar ("Submit other" / "Calculate Price" / "Submit <CAT>") is
   float:right, so it leaves normal flow and the form that follows it in the same pane paints
   over it. Block boxes ignore floats - only line boxes flow around them - so the form's
   .form-group divs covered the bar completely: hit-testing every point of "Calculate Price"
   returned the form-group, never the button, on all 16 category tabs. Clearing the float on the
   form puts the bar back on its own line above the table, where it can actually be clicked. */
.tab-content > .tab-pane > form {
    clear: both;
}

/* Fixed-position busy indicator (see _Layout.cshtml). Fixed rather than inline because the
   per-button spinners it backs up can be scrolled far out of view on these long pricing pages. */
#globalLoading {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    padding: 6px 14px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#globalLoading[hidden] {
    display: none;
}

/* Reports Index results table (see reports.js) - clickable column headers with a plain
   CSS-arrow indicator instead of an icon font, so no extra asset is needed. */
.reports-sortable {
    cursor: pointer;
    user-select: none;
}

    .reports-sortable::after {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 6px;
        vertical-align: middle;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        opacity: 0.3;
    }

    .reports-sortable.sort-asc::after {
        border-bottom: 5px solid #333;
        opacity: 1;
    }

    .reports-sortable.sort-desc::after {
        border-top: 5px solid #333;
        opacity: 1;
    }