:root {
    --carBooked: #00b4d8;
    --carLocked: #06d6a0;
    --carBookedBack: #bfe3ab;
    --carDiscountBack: #fff2cc;
    --stripeOddBack: #eee;
    --hubChangeBack: #ffea80;
    --hubChangeBorder: #ffb533;
    --monthHeaderBack: #abdbe3;
    --sundayTextColor: #af3123;

    --darkThemeBack: #232323;
    --darkThemeStripeOddBack: #343434;
    --darkThemeCarBookedBack: #386020;
    --darkThemeMonthHeaderBack: #286C77;
}

table.planner {
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 12px;
    table-layout: fixed;
    width: auto;
}

table.planner.striped tr:nth-child(even) {
    background-color: var(--stripeOddBack);
}

table.planner td {
    min-width: 1.6em;
    max-width: 1.6em;
    border-bottom: 1px solid gray;
    text-align: center;
    padding: 4px 1px;
}

table.planner th {
    font-size: 120%;
    border-bottom: 1px solid gray;
    text-transform: capitalize;
}

table.planner th.model,
table.planner th.plate {
    text-align: left;
}

table.planner th.model,
table.planner td.header {
    padding-left: 4px;
} 

table.planner th.month {
    font-weight: bold;
    background: var(--monthHeaderBack);
    padding: 8px 4px;
    border-right: 1px solid gray;
    text-transform: capitalize;
}

table.planner td.month-break {
    border-left: 3px solid white;
}

table.planner td.header {
    /* min-width: 12em; */
    text-align: left;
    text-overflow: ellipsis;
    padding-right: 4px;
}

table.planner td.plate {
    min-width: 7em;
    text-align: left;
    text-overflow: ellipsis;
    padding-right: 4px;
}

table.planner td.M {
    background: var(--carLocked);
}

table.planner td.M-B {
    background: linear-gradient(55deg, white 0% 50%, var(--carLocked) 50% 100%) no-repeat;
}

table.planner td.M-E {
    background: linear-gradient(55deg, var(--carLocked) 0% 50%, white 50% 100%) no-repeat;
}

table.planner.striped tr:nth-child(even) td.M-B {
    background: linear-gradient(55deg, var(--stripeOddBack) 0% 50%, var(--carLocked) 50% 100%) no-repeat;
}

table.planner.striped tr:nth-child(even) td.M-E {
    background: linear-gradient(55deg, var(--carLocked) 0% 50%, var(--stripeOddBack) 50% 100%) no-repeat;
}

table.planner td.disabled {
    background-color: var(--darkThemeStripeOddBack);
    opacity: 0.8;
}

table.planner td.H {
    background: var(--hubChangeBack) !important;
    border-left: 1px solid var(--hubChangeBorder);
    border-right: 1px solid var(--hubChangeBorder);
}

table.planner td.p {
    background: var(--carBooked);
}

table.planner td.p-B {
    background: linear-gradient(55deg, white 0% 50%, var(--carBooked) 50% 100%) no-repeat;
}

table.planner td.p-E {
    background: linear-gradient(55deg, var(--carBooked) 0% 50%, white 50% 100%) no-repeat;
}
table.planner td.E {
    background: linear-gradient(55deg, var(--carDiscountBack) 0% 50%, white 50% 100%) no-repeat !important;
    border-left: 0;
    border-right: 0;
}

table.planner.striped tr:nth-child(even) td.p-B {
    background: linear-gradient(55deg, var(--stripeOddBack) 0% 50%, var(--carBooked) 50% 100%) no-repeat;
}

table.planner.striped tr:nth-child(even) td.p-E {
    background: linear-gradient(55deg, var(--carBooked) 0% 50%, var(--stripeOddBack) 50% 100%) no-repeat;
}

table.planner span.sun {
    font-weight: bold;
    color: var(--sundayTextColor);
}

/* Alternate visualization of intervals */
table.planner.radial td.p {
    background: var(--carBookedBack);
}

table.planner.radial td.B {
    background: radial-gradient(150% 100% at right, var(--carBookedBack) 0% 50%, white 50% 100%);
}

table.planner.radial td.E {
    background: radial-gradient(150% 100% at left, var(--carBookedBack) 0% 50%, white 50% 100%);
}

table.planner.striped.radial  tr:nth-child(even) td.B {
    background: radial-gradient(150% 100% at right, var(--carBookedBack) 0% 50%, var(--stripeOddBack) 50% 100%);
}

table.planner.striped.radial  tr:nth-child(even) td.E {
    background: radial-gradient(150% 100% at left, var(--carBookedBack) 0% 50%, var(--stripeOddBack) 50% 100%);
}

/* Dark theme */
.dark table.planner {
    background: var(--darkThemeBack);
    color: white;    
}

.dark table.planner td.p {
    background: var(--darkThemeCarBookedBack);
}

.dark table.planner td.B {
    background: linear-gradient(55deg, var(--darkThemeBack) 0% 50%, var(--darkThemeCarBookedBack) 50% 100%) no-repeat;
}

.dark table.planner td.E {
    background: linear-gradient(55deg, var(--darkThemeCarBookedBack) 0% 50%, var(--darkThemeBack) 50% 100%) no-repeat;
}

.dark table.planner span.sun {
    color: #FFB1A8;
}

.dark table.planner td.H {
    background: #615100;
}

.dark table.planner th.month {
    background: var(--darkThemeMonthHeaderBack);
    border-right: 1px solid #ddd;
}

.dark table.planner.striped tr:nth-child(even) {
    background-color: var(--darkThemeStripeOddBack);
}

.dark table.planner.striped tr:nth-child(even) td.B {
    background: linear-gradient(55deg, var(--darkThemeStripeOddBack) 0% 50%, var(--darkThemeCarBookedBack) 50% 100%) no-repeat;
}

.dark table.planner.striped tr:nth-child(even) td.E {
    background: linear-gradient(55deg, var(--darkThemeCarBookedBack) 0% 50%, var(--darkThemeStripeOddBack) 50% 100%) no-repeat;
}

.dark table.planner.radial td.B {
    background: radial-gradient(150% 100% at right, var(--darkThemeCarBookedBack) 0% 50%, var(--darkThemeBack) 50% 100%);
}

.dark table.planner.radial td.E {
    background: radial-gradient(150% 100% at left, var(--darkThemeCarBookedBack) 0% 50%, var(--darkThemeBack) 50% 100%);
}

.dark table.planner.striped.radial  tr:nth-child(even) td.B {
    background: radial-gradient(150% 100% at right, var(--darkThemeCarBookedBack) 0% 50%, var(--darkThemeStripeOddBack) 50% 100%);
}

.dark table.planner.striped.radial  tr:nth-child(even) td.E {
    background: radial-gradient(150% 100% at left, var(--darkThemeCarBookedBack) 0% 50%, var(--darkThemeStripeOddBack) 50% 100%);
}

.dark table.planner td.month-break {
    border-left: 3px solid black;
}

/* Compact */
table.planner.compact {
    font-size: 11px;
}

table.planner.compact td {
    padding: 3px 0px;
}

table.planner.compact td.plate {
    min-width: 6em;
}

.model-header{
    text-align: left !important;
    min-width: 8em !important;
}

table.planner td.discount {
    background: var(--carDiscountBack);
    border-left: 0;
    border-right: 0;
}

table.planner td.B {
    background: linear-gradient(55deg, white 0% 50%, var(--carDiscountBack) 50% 100%) no-repeat !important;
    border-left: 0;
    border-right: 0;
}