/* Our global page styles unrelated to DayPilot */

/* @Tom is copying these styles from the html-version/style.css file */
/* By default -print will use 50% of the color lightness, and -text will use 40% of the color lightness */
/* You can define them here if we want to override that behavior. */
:root {
    --event-color-facepart:	             hsl(140, 39%, 84%);
    --event-color-facepart-print:	     hsl(140, 80%, 40%);
    --event-color-facepart-text:	     hsl(140, 80%, 30%);
    
    --event-color-non-facepart:          hsl(0, 0%, 90%);
    
    --event-color-combat: 	             hsl(0, 95%, 88%);
    --event-color-admin: 	             hsl(300, 40%, 88%);
    --event-color-ghoul:                 hsl(90, 70%, 80%);
    --event-color-ghost-dancer:          hsl(320, 80%, 90%);
    --event-color-saturday-night-wolven: hsl(0, 10%, 80%);
    --event-color-nightwalker:           hsl(40, 30%, 70%);
    --event-color-fallen:                hsl(30, 80%, 80%);
    --event-color-crypt:                 hsl(210, 60%, 80%);

    --milestone-color-chest:             hsl(45, 90%, 60%);
    --milestone-color-chest-print:       hsl(45, 90%, 50%);
    
    --milestone-color-trappedchest:      radial-gradient(var(--milestone-color-chest) 0%, var(--milestone-color-chest) 50%, hsl(200, 80%, 40%) 50%, hsl(200, 80%, 40%) 100%);
    --milestone-color-chest-ring:        hsl(200, 80%, 40%);
    --milestone-color-treasureitem:      hsl(45, 90%, 60%);
    --milestone-color-charge:            hsl(60, 90%, 80%);
    --milestone-color-meal:              hsl(90, 90%, 35%);
    --milestone-color-checkin:           hsl(250, 80%, 80%);

    --row-color-meal:                    hsl(240, 5%, 96%);
    --row-color-meal-print:              hsl(240, 10%, 93%);
    --row-color-eventbounds:             hsl(0, 25%, 84%);
    --row-color-eventbounds-print:       hsl(0, 20%, 88%);
    
    --row-color-zebra:                   hsl(45, 30%, 94%);
    --row-color-zebra-print:             hsl(0, 0%, 85%);
    
    --row-color-zebra-meal:              var(--row-color-zebra);
    --row-color-zebra-meal-print:        hsl(268, 12%, 79%);
    --row-color-zebra-eventbounds:       hsl(9, 32%, 82%);
    --row-color-zebra-eventbounds-print: hsl(0, 27%, 76%);

    --row-header-color-zebra:            hsl(45, 40%, 94%);
    --row-header-color-zebra-print:      hsl(0, 0%, 85%);
    
    --row-header-color-selected:         hsl(14, 100%, 50%);

    --event-color-green:                 hsl(140, 39%, 84%); /* hsl(120, 80%, 80%); */
    --event-color-red:                   hsl(0, 80%, 80%);
    --event-color-purple:                hsl(280, 80%, 85%);
    --event-color-black:                 hsl(0, 0%, 75%);
    --event-color-darkblue:              hsl(240, 80%, 80%);
    --event-color-lightgreen:            hsl(120, 80%, 80%);
    --event-color-pink:                  hsl(320, 80%, 80%);
    --event-color-orange:                hsl(34, 84%, 70%);
    --event-color-brown:                 hsl(28,54%,60%);
    --event-color-undefined:             hsl(0, 100%, 50%);
    --event-color-turquoise:             hsl(180, 59%, 80%);
    --event-color-lightbluegreen:      rgb(88, 202, 193);

    --milestone-color-orange:            hsl(30, 80%, 80%);
    --milestone-color-blue:              hsl(240, 80%, 80%);
    --milestone-color-orange-blue:       radial-gradient(var(--milestone-color-chest) 0%, var(--milestone-color-chest) 50%, hsl(200, 80%, 40%) 50%, hsl(200, 80%, 40%) 100%);
    --milestone-color-chest-ring-print:  rgb(63, 170, 242);
    --milestone-color-limegreen:         hsl(120, 80%, 80%);
    --milestone-color-pink:              hsl(320, 80%, 80%);
    --milestone-color-lightpurple:       hsl(300, 80%, 80%);
    --milestone-color-yellow:            hsl(60, 80%, 80%);
    --milestone-color-grey:              hsl(0, 0%, 50%);
    --milestone-color-adminpurple:       hsl(300, 40%, 88%);
    --milestone-color-turquoise:         hsl(180, 59%, 80%);
    --milestone-color-lightbluegreen:  rgb(88, 202, 193);

    --event-color-green-print:           rgb(35, 135, 62);
    --event-color-red-print:             hsl(2, 74%, 47%);
    --event-color-red-text:              hsl(2, 74%, 47%);
    --event-color-purple-print:          hsl(303, 32%, 30%);
    --event-color-black-print:           hsl(0, 0%, 0%);
    --event-color-darkblue-print:        rgb(34, 110, 224);
    --event-color-lightgreen-print:      rgb(34, 224, 85); 
    --event-color-pink-print:            rgb(224, 34, 132); 
    --event-color-orange-print:          rgb(224, 119, 34); 
    --event-color-brown-print:           rgb(158, 99, 5);
    --event-color-turquoise-print:       rgb(10, 141, 231);
    --event-color-lightbluegreen-print: rgb(88, 202, 193);

    --milestone-color-orange-print:      rgb(242, 156, 63);
    --milestone-color-blue-print:        hsl(240, 80%, 80%);
    --milestone-color-orange-blue-print: rgb(242, 156, 63);     /* For exporting, "orange-blue" is just orange, with hard-coded border. */
    --milestone-color-limegreen-print:   rgb(34, 224, 85);
    --milestone-color-pink-print:        hsl(320, 80%, 80%);
    --milestone-color-lightpurple-print: hsl(300, 80%, 80%);
    --milestone-color-yellow-print:      hsl(60, 80%, 80%);
    --milestone-color-grey-print:        hsl(0, 0%, 50%);
    --milestone-color-adminpurple-print: hsl(300, 40%, 88%);
    --milestone-color-turquoise-print:   hsl(180, 59%, 80%);
    --milestone-color-lightbluegreen-print:  rgb(88, 202, 193);

    --row-color-time:                    #f3f3f3;
    --row-color-time-selected:           #f6f6f6;

    --tooltip-background-color: #ffffe3;
    --tooltip-z-index: 999;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.modal_advanced {
    display: none;
}

body {
    padding: 0;
    margin: 0;
}

body, button, input, select, textarea {
    font-family: Helvetica, 'Helvetica Neue',Arial, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

button {
    padding: .4em .8em;
    font-size: 1em;
    border: 1px solid #888;
    border-radius: .4em;
    cursor: pointer;
}

input[type=checkbox],
label:has(input),
label[for] {
    cursor: pointer;
}

.modal_default_inner select {
    font-size: 1rem;
}

.jquery-modal.blocker {
    z-index: calc(var(--tooltip-z-index) + 1);
}

.tooltip-wrapper {
    box-sizing: border-box;
    position: relative;
    z-index: var(--tooltip-z-index);
    transition: all .3s;
    filter: drop-shadow(2px 2px 2px rgba(100, 100, 100, .2));
    cursor: help;

    .tooltip-content {
        position: absolute;
        top: calc(100% + .5em);
        left: .5em;
        opacity: 0;
        z-index: -1;
        width: fit-content;
        padding: .5em;
        font-size: .9em;
        background-color: var(--tooltip-background-color);
        border-radius: 4px;
    }

    /* arrowhead */
    .tooltip-content::before {   
        content: " ";
        position: absolute;
        top: -.4em;
        left: 1em;
        z-index: -1;
        display: block;
        width: .9em;
        height: .9em;    
        background-image: linear-gradient(135deg, var(--tooltip-background-color) 50%, transparent 50%);
        transform: rotate(45deg);
    }
}

.tooltip-wrapper:hover .tooltip-content {
    opacity: 1;
    z-index: 3;
    min-width: 150px;
}

/* make hint.css tooltips less ugly */
#error-table [class*="hint--"]::after {
    background: var(--tooltip-background-color);
    color: initial;
    font-weight: normal;
    font-style: normal;
    text-shadow: none;
    border-radius: 4px;
}
#error-table .hint--bottom::before {
    border-bottom-color: var(--tooltip-background-color);
}


header {
    box-sizing: border-box;    
    height: 80px;
    width: 100%;
    padding: 8px 10px 0 10px;
    background: hsl(196, 60%, 85%);
}

.header-top {
    box-sizing: border-box;    
    display: flex;
    align-items: center;
    gap: .5em;
    width: 100%;
    
    button {
        font-size: 1em;
        padding: .4em .4em;
        white-space: nowrap;
    }
}

.header-logo-container {
    flex-grow: 9;
    display: flex;
    gap: .3em;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    white-space: nowrap;
}

.header-logo {
    max-width: 75px;
}

.header-logo-name {
    display: flex;
    align-items: center;
    gap: .3em;
}

.header-logo-by {
    font-size: 10px;
    font-weight: normal;

    sup {
        font-size: .7em;
    }
}

.header-button-group {
    flex-grow: 3;
    justify-self: flex-end;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .4em;
    margin-left: 30px;
}

.header-io {
    button {
        font-size: .8em;
        padding: .2em .4em;
    }
}

#validator-errors {
    min-width: 65px;
}
#validator-errors .error-count-errors {
    color: hsl(0, 100%, 50%);
}
#validator-errors .error-count-none {
    color: hsl(140, 70%, 30%);
}

.page-filters {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 10px 0 0 0;
}
.page-filters > span {
    display: flex; 
    flex-wrap: nowrap;
    gap: 2px;
}
.page-filters .page-filters-checkboxes {
    display: flex;
    gap: 8px;

    & > span {
        display: flex;
        gap: 3px;
        flex-wrap: nowrap;
    }
}
.page-filters input[type=search] {
    max-width: 150px;
}

/* Now the DayPilot-specific styles  -- still just overriding at the bottom for now */
.scheduler_grid_main
{
    color: #000;
    /*font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;*/
    font-size: 13px;
    border: 1px solid #999;
    /*background: #ffffff;*/
}

.scheduler_grid_event {
    font-size: 13px;
    color: #333;
    /*text-shadow: 0px -1px 0px rgba(007,155,235,1), 0px 0px 0px rgba(000,000,000,0);*/
}

.scheduler_grid_event_inner
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding: 4px;

    background: #09b2ef;
    border-radius: 5px;
    border: 1px solid #999999;
    /* box-shadow: 0px 0px 5px rgba(000,000,000,0.5), inset 0px 1px 0px rgba(072,211,246,1); */
    display: flex; align-items: center;
}

.scheduler_grid_event_hover .scheduler_grid_event_inner
{
    background: #5BC8EF;
}

.scheduler_grid_event .scheduler_grid_action:hover
{
    opacity: 1;
    filter: none;
}

.scheduler_grid_message
{
    opacity: 0.9;
    filter: alpha(opacity=90);
    padding: 10px;
    color: #fff;
    background: #045776;
    border-radius: 10px;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
}

.scheduler_grid_timeheadergroup,
.scheduler_grid_timeheadercol,
.scheduler_grid_rowheader,
.scheduler_grid_corner
{
    color: #045776;
    background: #fff;
}

.scheduler_grid_timeheadergroup,
.scheduler_grid_timeheadercol
{

}

.scheduler_grid_timeheadergroup_inner
{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-right: 1px solid #ddd;
    display: flex; align-items: center; justify-content: center;
}

.scheduler_grid_timeheadercol_inner
{
    position: absolute;
    left: 4px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    display: flex; align-items: center; justify-content: left;
}

.scheduler_grid_cellcolumn
{
    background: #fff;
}

.scheduler_grid_tree_image_no_children {}
.scheduler_grid_tree_image_expand { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxwYXRoIGQ9J00gMS41IDAuNSBMIDYuNSA1IEwgMS41IDkuNScgc3R5bGU9J2ZpbGw6bm9uZTtzdHJva2U6Izk5OTk5OTtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLWxpbmVjYXA6YnV0dCcgLz48L3N2Zz4=); }
.scheduler_grid_tree_image_collapse { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTSAwLjUgMS41IEwgNSA2LjUgTCA5LjUgMS41JyBzdHlsZT0nZmlsbDpub25lO3N0cm9rZTojOTk5OTk5O3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbGluZWNhcDpidXR0JyAvPjwvc3ZnPg==); }

.scheduler_grid_divider,
.scheduler_grid_splitter
{
    background-color: #ccc;
}

.scheduler_grid_divider_horizontal
{
    background-color: #ccc;
}

.scheduler_grid_matrix_vertical_line
{
    background-color: #eee;
}

.scheduler_grid_matrix_vertical_break
{
    background-color: #000;
}

.scheduler_grid_matrix_horizontal_line
{
    background-color: #eee;
}

.scheduler_grid_resourcedivider
{
    background-color: #ccc;
}

.scheduler_grid_rowheader_inner {
    padding: 7px;
    position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; display: flex; align-items: center;
}

.scheduler_grid_shadow_inner
{
    background-color: #666666;
    opacity: 0.5;
    height: 100%;
    border-radius: 5px;
}


.scheduler_grid_milestone_shadow {
    margin-left: 20px;
    margin-top: 15px;

/* This is the shadow that appears when dragging a milestone */
.scheduler_grid_milestone_shadow_inner
{
    background-color: #666666;
    opacity: 0.5;
    height: 50%;
    width: 50%;
    border-radius: 20px;
}

}

.scheduler_grid_timeheader_float {
    display: flex; align-items: center; justify-content: center;
}

.scheduler_grid_timeheader_float_inner {
}

.scheduler_grid_event_float {
    display: flex; align-items: center;
}
.scheduler_grid_event_float_inner {
    padding: 2px 4px 4px 8px;
    position: relative;
}

.scheduler_grid_event_float_inner:after {
    content:"";
    border-color: transparent #333 transparent transparent;
    border-style:solid;
    border-width:5px;
    width:0;
    height:0;
    position:absolute;
    top: 4px;
    left:-4px;
}

.scheduler_grid_event_move_left {
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid #ccc;
    background: #fff;
    background: linear-gradient(to bottom, #ffffff 0%, #eeeeee);
}

.scheduler_grid_event_move_right {
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid #ccc;
    background: #fff;
    background: linear-gradient(to bottom, #ffffff 0%, #eeeeee);
}

.scheduler_grid_event_delete {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAI5JREFUKFNtkLERgCAMRbmzdK8s4gAUlhYOYEHJEJYOYOEwDmGBPxC4kOPfvePy84MGR0RJ2N1A8H3N6DATwSQ57m2ql8NBG+AEM7D+UW+wjdfUPgerYNgB5gOLRHqhcasg84C2QxPMtrUhSqQIhg7ypy9VM2EUZPI/4rQ7rGxqo9sadTegw+UdjeDLAKUfhbaQUVPIfJYAAAAASUVORK5CYII=) center center no-repeat;
    opacity: 0.6;
    cursor: pointer;
}

.scheduler_grid_event_delete:hover {
    opacity: 1;
    -ms-filter: none;
}

.scheduler_grid_rowmove_handle { background-repeat: no-repeat; background-position: center center; background-color: #ccc; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAKCAYAAACT+/8OAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAClJREFUGFdj+P//P4O9vX2Bg4NDP4gNFgBytgPxebgAMsYuQGMz/jMAAFsTZDPYJlDHAAAAAElFTkSuQmCC); cursor: move; }
.scheduler_grid_rowmove_source { background-color: black; opacity: 0.2; }
.scheduler_grid_rowmove_position_before, .scheduler_grid_rowmove_position_after { background-color: #999; height: 2px; }
.scheduler_grid_rowmove_position_child { margin-left: 10px; background-color: #999; height: 2px; }
.scheduler_grid_rowmove_position_child:before { content: '+'; color: #999; position: absolute; top: -8px; left: -10px; }
.scheduler_grid_rowmove_position_forbidden { background-color: red; height: 2px; margin-left: 10px; }
.scheduler_grid_rowmove_position_forbidden:before { content: 'x'; color: red; position: absolute; top: -8px; left: -10px; }

.scheduler_grid_link_horizontal { border-bottom-style: solid; border-bottom-color: red }
.scheduler_grid_link_vertical { border-right-style: solid; border-right-color: red }
.scheduler_grid_link_arrow_right:before { content: ''; border-width: 6px; border-color: transparent transparent transparent red; border-style: solid; width: 0px; height:0px; position: absolute; }
.scheduler_grid_link_arrow_left:before { content: ''; border-width: 6px; border-color: transparent red transparent transparent; border-style: solid; width: 0px; height:0px; position: absolute; }
.scheduler_grid_link_arrow_down:before { content: ''; border-width: 6px; border-color: red transparent transparent transparent; border-style: solid; width: 0px; height:0px; position: absolute; }

.scheduler_grid_shadow_overlap .scheduler_grid_shadow_inner { background-color: red; }
.scheduler_grid_overlay { background-color: gray; opacity: 0.5; filter: alpha(opacity=50); }

.scheduler_grid_event_group { box-sizing: border-box; font-size:13px; color:#666; padding:2px 2px 2px 2px; overflow:hidden; border:1px solid #ccc; background-color: #fff; }

.scheduler_grid_header_icon {
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
}
.scheduler_grid_header_icon:hover { background-color: #ccc; }
.scheduler_grid_header_icon_hide:before { content: '\00AB'; }
.scheduler_grid_header_icon_show:before { content: '\00BB'; }

.scheduler_grid_rowheader.scheduler_grid_rowheader_selected { background-color: #aaa;background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-size: 20px 20px; }

.scheduler_grid_row_new .scheduler_grid_rowheader_inner { cursor: text; background-position: 0px 5px; background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABUSURBVChTY0ACslAaK2CC0iCQDMSlECYmQFYIAl1AjFUxukIQwKoYm0IQwFCMSyEIaEJpMMClcD4Qp0CYEIBNIUzRPzAPCtAVYlWEDgyAGIdTGBgAbqEJYyjqa3oAAAAASUVORK5CYII=); }
.scheduler_grid_row_new .scheduler_grid_rowheader_inner:hover { background: white; }
.scheduler_grid_rowheader textarea { padding: 3px; }
.scheduler_grid_rowheader_scroll { cursor: default; }


.filter-highlight {
    background-color: #aaa;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

.scheduler_grid_cell-filter-highlight {
    background-color: #aaa;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

.scheduler_grid_shadow_forbidden .scheduler_grid_shadow_inner { background-color: red; }

.scheduler_grid_event_moving_source { opacity: 0.5; filter: alpha(opacity=50); }

.scheduler_grid_linkpoint { background-color: white; border: 1px solid gray; border-radius: 5px; }
.scheduler_grid_linkpoint.scheduler_grid_linkpoint_hover { background-color: black; }

.scheduler_grid_event.scheduler_grid_event_version .scheduler_grid_event_inner { background-color: #cfdde8;background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-size: 20px 20px; }

.scheduler_grid_crosshair_vertical, .scheduler_grid_crosshair_horizontal, .scheduler_grid_crosshair_left, .scheduler_grid_crosshair_top { background-color: gray; opacity: 0.2; filter: alpha(opacity=20); }
.scheduler_grid_link_dot { border-radius: 10px; background-color: red; }
/*.scheduler_grid_task_milestone .scheduler_grid_event_inner { position:absolute;top:16%;left:16%;right:16%;bottom:16%; background: #38761d; border: 0px none; transform: rotate(45deg); filter: none; }*/
.scheduler_grid_event_left { white-space: nowrap; padding-top: 5px; color: #666; cursor: default; }
.scheduler_grid_event_right { white-space: nowrap; padding-top: 5px; color: #666; cursor: default; }
.scheduler_grid_selectionrectangle { background-color: #0000ff; border: 1px solid #000033; opacity: 0.4; }
.scheduler_grid_link_shadow { border:1px solid black; }
.scheduler_grid_link_shadow_circle { background-color:black; }

.scheduler_grid_block { background-color: #808080; opacity: 0.5; }


/* Otherworld-specific customizations below here, copied over from the old style.css */

/* row headers */ /* TRR Moved to scheduler_grid */
.scheduler_grid_rowheader_scroll {
    font-weight: bold;
    font-size: 1.2em;

    /*div[unselectable*=on]:nth-of-type(odd) .scheduler_grid_rowheader {
        background-color: red;
    }*/
}

/* a regular event, e.g. a person's timeslot */ /* TRR Moved to scheduler_grid */
.scheduler_grid_event {
    height: 33px !important; /* rows are 35px tall, so put a little gap below each event, for legibility */
    font-size: 1.1em;
    border-radius: .5em;
    white-space: normal !important;
    line-height: 1em;
}

/* the text for events */ /* TRR Moved to scheduler_grid */
.scheduler_grid_event_line0 .scheduler_grid_event_inner,
.scheduler_grid_event_float {
    align-items: flex-start; /* the text top-aligned, to leave room for milestones */
    font-variant: small-caps;
    font-weight: bold;
}

.scheduler_grid_event_line0 {
    .scheduler_grid_event_inner {
        padding: .1em .25em;
    }
}

/* when floating */
.scheduler_grid_event_float {
    padding-top: .05em;
}

/* the bar atop an event */
.scheduler_grid_event_bar {
    background: none;
}
.scheduler_grid_event_bar_inner {
    height: 2px;
    background-color: rgba(90 90 90 / 0.2); /* translucent grey, to darken whatever background color it's used with */
}

/* a milestone, aka a sticker */
.scheduler_grid_task_milestone {
    margin-left: 10px;
    margin-top: 9px;

    /* the actual sticker shape */
    .scheduler_grid_event_inner {
        inset: 30%; /* this is essentially "the amount to shrink the sticker down to"; by default it's too large */
        background: var(--event-color-undefined);
        border: 1px solid #444;
        border-radius: .4em; /* rounding the corners of the diamond shape */
        transform: translateY(-1px); /* we can't use the top property here, because inset is being used to shape the sticker */
    }
}

/* text to the right of something, e.g. a milestone/sticker */
.scheduler_grid_event_right {
    margin-left: -8px; /* there's too much gap, so shift it over */
    margin-top: 2px;
    padding-top: 1.3em;
    font-size: .9em;
    font-style: italic;
    pointer-events: none;
}

/* Our default row color */
/*.scheduler_grid_cell {*/
/*    background: white;*/
/*}*/

.scheduler_grid_cell-zebra-selected {
    background: var(--row-color-zebra);
}
.scheduler_grid_cell-selected {
    background: var(--row-color-zebra);
}

/* Our alternating color for zebra & special striping */
.scheduler_grid_cell-zebra {
    background: var(--row-color-zebra);
}

.scheduler_grid_cell-meal {
    background: var(--row-color-meal);
}

.scheduler_grid_cell-zebra-meal {
    background: var(--row-color-zebra-meal);
}

.scheduler_grid_cell-eventbounds {
    background: var(--row-color-eventbounds);
}

.scheduler_grid_cell-zebra-eventbounds {
    background: var(--row-color-zebra-eventbounds);
}


/*
* INPUTS AND MODAL DIALOGS
* I'm sticking this here because I don't have a better location for it.
* DayPilot appears to do all the modal dialog styling inline.
*/

input[type="text"] {
    min-height: 2em;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #444;
}

.modal_default_main {
    border-radius: 1em;
    box-shadow: 5px 5px 10px hsla(0, 0, 0, 0.3);
}

.modal_default_form_item.modal_default_form_title {
    margin-top: 0;
    padding-top: 0;
}

.modal_default_form_item_annotation {
    font-size: .9em;
    color: #666666;
}

.modal_default_form_item:has(.modal_default_form_item_annotation) {
    margin-top: -18px;
}

.modal_default_buttons {
    display: flex;
    gap: 8px;
}


/*
* Validator error dialog
*/
#validation-modal {
    max-width: 650px;
}

.icon-info {
    display: inline-block;
}

.icon-info:before {
    content: "i";
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    font-family: serif;
    font-style: normal;
    text-align: center;
    color: hsl(0, 0%, 20%);
    background: hsla(60, 90%, 90%, 80%);
    border-radius: 9999px;
    border: 1px solid currentColor;
}

#validation-modal .icon-info {
    margin-left: .5em;
}

.error-table,
.ignoring-table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
}

.error-table-head {
    font-weight: bold;
}

.error-category-wrapper {
    /* */
}

.error-table-category::-webkit-details-marker,
.error-table-category::marker {
    display: none; 
    content: "";
}

.error-category-header {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 1em);
    padding: 4px .5em;
    margin-top: 2px;
    color: white;
    font-style: italic;
    font-weight: bold;
    background-color: #444;
}
.error-table-category-bad .error-category-header {
    background-color: hsl(0, 50%, 40%);;
}
.error-table-category-good .error-category-header {
    background-color: hsl(110, 30%, 25%);
}

/* 
    The default icon for the header is a checkmark.
    This will only be displayed if that category has no entries in it.
*/
.error-category-header::after {
    content: '✔'; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: .2em; /* to correct for vertical centering illusion */
    min-width: 1.2em;
    height: 1em;
    color: hsl(120, 50%, 60%);
    font-style: normal;    
    border: 0px solid currentColor;
    border-radius: 9999px;
}
.error-category-header-count {
    font-weight: normal;
}

/*
    But if the category has entries, turn that checkmark into an up- or down-arrow,
    depending on the category's open/closed state.
*/
.error-category-wrapper:has(.error-table-entry),
.error-category-wrapper:has(.error-table-progbar)  {
    .error-category-header {
        cursor: pointer;
    }
    
    /* icon for expanded categoies, where the associated checkbox is unchecked */
    .error-category-header::after {
        content: '−';
        color: inherit;
        border-width: 1px;
    }

    /* icon for collapsed categoies, where the associated checkbox is checked */
    .error-category-checkbox:checked ~ .error-table-category {
        .error-category-header::after {
            content: "+";
            color: inherit;
            border-width: 1px;
        }
    }
}

.error-table-head,
.error-table-entry,
.error-table-progbar {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding: 10px;
    justify-content: space-between;
    align-items: center;

    & > *:empty {
        display: none;
    }
}

.error-table-entry:nth-child(even),
.error-table-progbar:nth-child(even) {
    background-color: hsl(0, 0%, 95%);
}

.error-table-entry-empty,
.error-table-entry-name,
.error-table-entry-type,
.error-table-entry-errors,
.error-table-entry-ignore,
.error-table-entry-missing,
.error-table-entry-progressbar {
    padding: 2px 8px 2px 4px;

    &:last-child {
        justify-content: flex-end;
    }
}

.error-table-entry-empty {
    width: 5px;
    max-width: 5px;
}
.error-table-entry-name { 
    min-width: 110px;
}
.error-table-entry-type { 
    min-width: 150px;
}
.error-table-entry-type:empty {
    width: 0;   
}
.error-table-entry-errors { 
    min-width: 195px;
}
.error-table-entry-type:empty + .error-table-entry-errors { 
    min-width: 395px;
}
.error-table-entry-ignore {
    min-width: 65px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.error-table-entry-missing {
    display: flex;
    align-items: center;
    justify-content: stretch;
    max-width: 300px;
    min-width: 80px;
}

.error-table-entry-ignore,
.ignoring-table-entry-unignore {
    button {font-size: .7em}
}

.error-table-entry-progressbar { 
    width: 240px;
    max-width: 240px;
    display: flex;
    align-items: center;
    justify-content: stretch;
}

.error-table-progress-bar {
    width: 100%;
    max-width: 100%;
    border: 1px solid hsl(120, 80%, 40%); 
    border-radius: 2px;
}
.error-table-progress-bar-filled {
    background-color: hsl(120, 80%, 80%); 
    height: 1.1em;
}
.error-table-progress-bar-label {
    display: inline-block;
    padding: 1px .5em;
    font-size: .8em;
}
.error-table-progress-bar.error-table-progress-bar-bad {
    border: 1px solid hsl(20, 80%, 40%); 
    
    .error-table-progress-bar-filled {
        background-color: hsl(0, 80%, 80%); 
    }
}

#ignored-error-table {
    margin-top: 1.8em;
}
.ignoring-table-head,
.ignoring-table-entry {
    display: flex;
    justify-content: space-between;
}
.ignoring-table-head {
    font-weight: bold;
}
.ignoring-table-entry-message,
.ignoring-table-entry-unignore {
    padding: 2px;
}
.ignoring-table-entry-message {
    padding-right: 10px;
}
.ignoring-table-entry-unignore {
    width: 130px;
}

/*@font-face {*/
/*    font-family: 'ChalkboardBold';*/
/*    src: url('fonts/ChalkboardBold.woff2') format('woff2'),*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/