#content .open-project-time-cards {
    border-collapse: collapse;
    width: 400px;
    max-width: 100%;
}
.open-project-time-cards td {
    padding: 1em 0.5em;
    vertical-align: middle;
}
.open-project-time-cards tbody tr td {
    border-bottom: 1px solid #CCC;
}
.open-project-time-cards tbody tr:first-child td {
    border-top: 1px solid #CCC;
}
.company-project span {
    display: block;
}
.company-icon img.class_icon, 
.company-icon img.class_logo {
    max-height: 3em;
    max-width: 3em;
    height: auto;
}
.company {
    font-weight: bold;
}
.start-stop .button {
    font-size: 1.25em;
    padding: 0.5em 1em;
}
.open-project-time-card.running .start-stop .button {
    background: #aaa;
    background: none;
    border-color: #aaa;
    color: #aaa;
}
.start-stop .button {
    background: none;
    background: #aaa;
    border-color: #aaa;
}
.start-stop .button:before {
    content: '';
    display: inline-block;
    height: 1.5em;
    width: 1.5em;
    background: url(/images/clock.png) center center no-repeat;
    background-size: 169%;
    vertical-align: -0.35em;
    margin-right: 0.5em;
}
.start-stop .button:after {
    content: 'Start';
}
.open-project-time-card.running .start-stop .button:before {
    background-image: url(/images/clock.gif);
}
.open-project-time-card.running .start-stop .button:after {
    content: 'Stop';
}
.open-project-time-card.running .hours {opacity: 0; }
.open-project-time-cards tfoot {font-size: 1.5em; }
.open-project-time-cards tfoot td {padding: 0.25em; }
.open-project-time-cards tfoot tr:first-child td {padding-top: 1em; }
.open-project-time-cards tfoot tr:last-child td {padding-bottom: 1em; }
.open-project-time-cards tfoot td.total-billable:not(:empty):before {content: '$';}
.open-project-time-cards tr.time-cards {display: none; }
.open-project-time-cards tr .expand:before {content: '+'; font-size: 3em; cursor: pointer;}
.open-project-time-cards tr.expanded .expand:before {content: '-'; }
.open-project-time-cards tr.expanded + tr.time-cards {display: table-row; }
.open-project-time-cards table.lined td.edit, 
.open-project-time-cards table.lined td.delete {
    max-width: none;
}
.open-project-time-cards td.edit:before,
.open-project-time-cards td.delete:before {
    content: '';
    background: center center no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 1.25em;
    width: 1.25em;
    display: block;
}
.open-project-time-cards td.edit:before {
    background-image: url('/images/edit.png');
}
.open-project-time-cards td.delete:before {
    background-image: url('/images/delete.png');
}
.open-project-time-card.template,
.open-project-time-card.template + .time-cards {display: none; }
.button.new-project-time-card {float: none; }
body:not(.today) .open-project-time-card:not(.running) .start-stop .button,
body:not(.today) .button.new-project-time-card,
body.today #report-nav .button.today {display: none; }

.open-project-time-cards .time-cards > td {padding: 1em; background: #EEE; }
.open-project-time-cards .time-card.in-progress .edit,
.open-project-time-cards .time-card.in-progress .delete {opacity: 0.5; cursor: default; }

a.check_email_link.button,
a.manage-project-btn.button {
    margin-left: 0;
    font-size: 1em;
    padding: 0.25em 0.5em;
    float: right;
}

body.today .open-project-time-card.not-today,
body.not-today .open-project-time-card.today {
    background: #ffffcd;
}
body.today .open-project-time-card.not-today .hours:before,
body.not-today .open-project-time-card.today .hours:before {
    content: attr(data-date);
    display: block;
    font-weight: bold;
    font-size: 0.8em;
    margin-bottom: 0.5em;
}
.time-cards .time-card td {
	transition: background-color 0.5s ease;
}
.time-cards .time-card.time-card-moved td {
	background-color: #fffbcc !important; /* pale yellow highlight */
}
/* =========================================================
   SPLIT TIME CARD — scissors icon
   ========================================================= */
.open-project-time-cards td.split:before {
    content: '';
    background: center center no-repeat;
    background-size: contain;
    cursor: pointer;
    height: 1.25em;
    width: 1.25em;
    display: block;
    background-image: url('/images/scissors.png');
    opacity: 1;
}
.open-project-time-cards .time-card.in-progress .split {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* =========================================================
   SPLIT TIME CARD — modal overlay
   ========================================================= */
.split-tce-overlay {
    min-width: 340px;
    max-width: 520px;
    padding: 0 0.5em;
}
.split-tce-overlay .split-entry-summary {
    text-align: center;
    color: #666;
    margin: 0.25em 0 0.75em;
}

/* 2 / 3 toggle buttons */
.split-count-toggle {
    display: flex;
    gap: 0.5em;
    justify-content: center;
    margin-bottom: 1em;
}
.split-count-toggle .split-count {
    /* font-size: 0.9em; */
    /* padding: 0.3em 0.9em; */
}

/* ---- timeline bar + sliders ---- */
.split-timeline-wrapper {
    margin: 5em 0 2em;  /* top margin leaves room for input bubbles */
    position: relative;
}

/* Input bubbles float above the bar, positioned by JS */
.split-handles-row {
    position: absolute;
    top: -2.75em;
    left: 0;
    right: 0;
    pointer-events: none; /* let clicks fall through to slider */
}
.split-handle-group {
    position: absolute;
    transform: translateX(-50%);
    pointer-events: all;
}

.split-handle-group:after {
    content: '';
    position: absolute;
    bottom: -1.05em;
    left: 50%;
    border: 0.5em solid transparent;
    border-top: 0.75em solid white;
    transform: translateX(-50%);
}

input.split-time-input[type=text] {
    width: 6.5em;
    text-align: center;
    /* font-size: 0.85em; */
    padding: 0.25em 0.4em;
    /* border: 1px solid #aaa; */
    /* border-radius: 4px; */
    /* background: #fff; */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.15); */
    /* transition: border-color 0.15s; */
    border: none;
box-shadow: 0 0 10px rgba(0,0,0,0.25)
}
.split-time-input:focus {
    outline: none;
    border-color: #5b9bd5;
}
.split-time-input.invalid {
    border-color: #c00;
    background: #fff0f0;
}

/* Color bar */
.split-timeline-bar {
    height: 14px;
    border-radius: 7px;
    background: #5b9bd5;
    transition: background 0.2s;
    position: relative;
    z-index: 0;
}

/* Slider row overlays the bar */
.split-slider-row {
    position: absolute;
    top: -4px; /* vertically center 22px thumb over 14px bar */
    left: 0;
    right: 0;
    height: 22px;
    z-index: 1;
}
/* The two sliders are stacked full-width on top of each other. A native range
   input captures clicks across its entire track, so the top one would swallow
   every drag and the other handle could never be grabbed. Turning off pointer
   events on the input and turning them back on for the thumb only lets each
   handle be grabbed on its own, and stops bare track clicks from jumping a thumb. */
.split-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 22px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    pointer-events: none;
}
/* Transparent track — the color bar underneath shows through */
.split-slider::-webkit-slider-runnable-track {
    background: transparent;
    height: 14px;
    border-radius: 7px;
}
.split-slider::-moz-range-track {
    background: transparent;
    height: 14px;
    border-radius: 7px;
}
.split-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #444;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: grab;
    margin-top: 0;
    pointer-events: auto;
}
.split-slider:active::-webkit-slider-thumb { cursor: grabbing; }
.split-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #444;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    cursor: grab;
    pointer-events: auto;
}

/* axis labels */
.split-axis-labels {
    display: flex;
    justify-content: space-between;
    color: #888;
    margin-top: 0.5em;
}

/* ---- segment rows ---- */
.split-segments {
    width: 423px;
    margin: 1.25em auto 0.75em;
    border-collapse: collapse;
}
.split-segment-row > * {
    vertical-align: middle;
    padding: 0.5em 0.25em;
    border-bottom: 1px solid #CCC;
    border-top: 1px solid #CCC;
}
.split-seg-label {
    font-weight: bold;
    white-space: nowrap;
}
.split-seg-times {
    color: #555;
    min-width: 14em;        /* wiggle room so the row doesn't jump as the times change */
    white-space: nowrap;
    text-align: right;
}
.split-seg-project-cell {
    width: 100%;            /* take up the remaining width */
}

/* tabular figures keep live-updating times from shifting the layout */
.open-project-time-cards .time-in,
.open-project-time-cards .time-out,
.open-project-time-cards .time-diff,
.open-project-time-cards .hours,
.split-seg-times {
    font-variant-numeric: tabular-nums;
}

/* ---- actions row ---- */
.split-actions {
    display: flex;
    gap: 0.5em;
    justify-content: flex-end;
    margin-top: 0.75em;
}
.split-actions .confirm-split.disabled {
    opacity: 0.5;
    pointer-events: none;
}
.split-error {
    color: #c00;
    margin-top: 0.5em;
}

/* ---- project-selector time pills (start-time + clock-out) ---- */
.project-selector .when-toggle {
    text-align: center;
    margin: 0.5em 0 1em;
}
.project-selector .field-caption {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.75em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #888;
}
/* lighter, sentence-case hint appended to a caption (e.g. "— optional…") */
.project-selector .field-caption-hint {
    text-transform: none;
    letter-spacing: 0;
    color: #aaa;
}
.project-selector .when-toggle .pill-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}
.project-selector .when-toggle .pill-icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}
/* icons inherit the label's text color: gray when unselected, white when selected */
.project-selector .when-toggle .pill-icon path,
.project-selector .when-toggle .pill-icon rect,
.project-selector .when-toggle .pill-icon circle {
    fill: currentColor;
}
/* You can't start and stop at the same instant — picking "Now" on one pill
   disables it on the other */
.project-selector .when-toggle .pill-toggle input:disabled + label {
    opacity: 0.4;
    cursor: not-allowed;
}
/* revealed date/time field for the "Set time" options — on its own row */
.project-selector .when-toggle .when-field {
    margin-top: 0.6em;
}
.project-selector .when-toggle .when-input {
    width: 13em;
    max-width: 100%;
    padding: 0.35em 0.6em;
    font-size: 0.95em;
}

@media only screen and (max-width:721px) {
    #content #time_cards_container .open-project-time-cards {
        width: auto;
    }
    #content #time_cards_container .open-project-time-cards .time-cards > td {
        padding: 0;
    }
    #content #time_cards_container .open-project-time-cards .time-cards td.edit,
    #content #time_cards_container .open-project-time-cards .time-cards td.delete,
    #content #time_cards_container .open-project-time-cards .time-cards td.split {
        font-size: 1.5em;
        margin: 0.25em;
    }
    #content #time_cards_container .open-project-time-cards .time-cards td.edit {
        clear: both;
    }
    #content #time_cards_container .open-project-time-cards tr.open-project-time-card {
        font-size: 0.75em;
    }
    #content #time_cards_container .open-project-time-cards .time-cards table.lined {
        margin: 0;
        border-width: 0;
        background: #f4f4f4;
    }
    #time_cards_container .check_email_link {
        display: none;
    }
}