#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: 0.5;
    transition: opacity 0.15s;
}
.open-project-time-cards td.split:hover:before {
    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 ---- */
.split-timeline-wrapper {
    margin: 1em 0 0.5em;
    position: relative;
}
.split-timeline-bar {
    height: 14px;
    border-radius: 7px;
    background: #5b9bd5;
    margin: 0 0 0.25em;
    transition: background 0.2s;
}

/* axis labels */
.split-axis-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    color: #888;
    margin-bottom: 0.25em;
}

/* slider row — overlapping sliders via absolute positioning */
.split-slider-row {
    position: relative;
    height: 2em;
    margin: 0.25em 0;
}
.split-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    accent-color: #444;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    height: 2em;
    cursor: pointer;
    pointer-events: all;
}
/* hide the track so both sliders share the single bar above */
.split-slider::-webkit-slider-runnable-track { background: transparent; height: 14px; }
.split-slider::-moz-range-track              { background: transparent; height: 14px; }
.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);
    margin-top: -4px;
    cursor: grab;
}
.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;
    cursor: grab;
}

/* time-input bubbles */
.split-handles-row {
    display: flex;
    position: relative;
    height: 2.5em;
    margin-bottom: 0.25em;
}
.split-handle-group {
    position: absolute;
    transform: translateX(-50%);
}
#split-hg-1 { left: 50%; }
#split-hg-2 { left: 75%; }

.split-time-input {
    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;
}
.split-time-input:focus {
    outline: none;
    border-color: #5b9bd5;
}
.split-time-input.invalid {
    border-color: #c00;
    background: #fff0f0;
}

/* ---- segment rows ---- */
.split-segments {
    margin: 1.25em 0 0.75em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}
.split-segment-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.875em;
}
.split-seg-label {
    font-weight: bold;
    min-width: 3em;
}
.split-seg-times {
    color: #555;
    min-width: 11em;
    flex-shrink: 0;
}
.split-seg-project {
    flex: 1;
    max-width: 200px;
}

/* ---- 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;
    font-size: 0.875em;
    margin-top: 0.5em;
}

@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 {
        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;
    }
}