/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

table.trip-calculator { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 18px; width: 100%; }

table.trip-calculator thead > * { background-color: #D62827; color: #FFF; font-weight: 700; }

table.trip-calculator th,
table.trip-calculator td,
div.trip-calculator div.flex__heading,
div.trip-calculator div.flex__cell { padding: 10px; text-align: center; word-break: keep-all; }
div.trip-calculator-output div.flex__cell:nth-child(even) { background-color: #EEE }
div.trip-calculator small { display: block; }
div.trip-calculator div.flex__cell input,
div.trip-calculator div.flex__cell select { border: #EEE 1px solid; color: #000;  font-family: 'Open Sans', sans-serif; font-size: 18px; text-align: center; width: 100%; border-radius: 3px; }

div.trip-calculator div.flex__cell select { height: auto; line-height: initial; padding: 12px; max-width: 100%; width: fit-content; }
div.trip-calculator div.flex__cell input:active,
div.trip-calculator div.flex__cell input:focus { color: #5BBC2E; }
div.trip-calculator div.flex__cell button,
div.trip-calculator div.flex__cell a { font-family: 'Open Sans', sans-serif; vertical-align: middle }
div.trip-calculator div.flex__cell a.restore { display: none; margin-left: 10px; }
div.trip-calculator div.flex__cell.dollar:before { content: '$'; }
div.trip-calculator div.flex__cell.dollar input { display: inline-block; margin-left: 4px; width: 90%; }

div.trip-calculator div.flex__row.optional { display: none; }
div.trip-calculator div.flex__row.optional.show { display: flex; }
div.trip-calculator div.flex__row.total div.flex__cell { font-size: 20px; font-weight: 700; line-height: 24px; }
div.trip-calculator div.flex__row.total div.flex__heading,
div.trip-calculator div.flex__row.total div.flex__cell { border-bottom: #000 3px solid; border-top: #000 3px solid; }
div.trip-calculator div.flex__row.total div.flex__heading { border-left: #000 3px solid; }
div.trip-calculator div.flex__row.total div.flex__cell:last-child { border-right: #000 3px solid; }
div.trip-calculator div.flex__row div.flex__cell a.show-options:before { content: 'Show more options'; }
div.trip-calculator div.flex__row div.flex__cell a.hide-options:before { content: 'Hide options'; }

table.trip-calculator tfoot td { font-size: 12px; line-height: 18px; padding: 20px; word-break: keep-all; }

.flex-table { display: block; flex-direction: column; width: 100%; }
.flex__row { display: flex; width: 100%; }
.flex__heading,
.flex__cell { box-sizing: border-box; flex-grow: 1; font-size: 14px; }

.mobile-scroll { overflow-x: scroll; overflow-y: visible; width: 100%; }

@media only screen and (max-width: 600px) {
    .flex__row { border-top: #DDD 2px solid; flex-wrap: wrap; }
    .flex__row.no-border { border-top: none; }
    .trip-cost-plugin div.trip-calculator div.flex__row--heading { border-top: none; }
    .flex__heading { font-size: 12px; font-weight: bold; }

    div.trip-calculator div.flex__row.total div.flex__heading { border-top: #000 3px solid; border-left: #000 3px solid; border-right: #000 3px solid; border-bottom: none; }
    div.trip-calculator div.flex__row.total div.flex__cell { border: none; border-bottom: #000 3px solid; font-size: 16px; }
    div.trip-calculator div.flex__row.total div.flex__cell:nth-child(2) { border-left: #000 3px solid; }
    div.trip-calculator div.flex__row.total div.flex__cell:last-child { border-right: #000 3px solid; }
}