:root {
    --primary: #79aec8;
    --secondary: #417690;
    --accent: #f5dd5d;
    --primary-fg: #fff;

    --body-fg: #333;
    --body-bg: #fff;
    --body-quiet-color: #666;
    --body-medium-color: #444;
    --body-loud-color: #000;

    --header-color: #ffc;
    --header-branding-color: var(--accent);
    --header-bg: var(--secondary);
    --header-link-color: var(--primary-fg);

    --breadcrumbs-fg: #c4dce8;
    --breadcrumbs-link-fg: var(--body-bg);
    --breadcrumbs-bg: #264b5d;

    --link-fg: #417893;
    --link-hover-color: #036;
    --link-selected-fg: var(--secondary);

    --hairline-color: #e8e8e8;
    --border-color: #ccc;

    --error-fg: #ba2121;

    --message-success-bg: #dfd;
    --message-warning-bg: #ffc;
    --message-error-bg: #ffefef;

    --darkened-bg: #f8f8f8; /* A bit darker than --body-bg */
    --selected-bg: #e4e4e4; /* E.g. selected table cells */
    --selected-row: #ffc;

    --button-fg: #fff;
    --button-bg: var(--secondary);
    --button-hover-bg: #205067;
    --default-button-bg: #205067;
    --default-button-hover-bg: var(--secondary);
    --close-button-bg: #747474;
    --close-button-hover-bg: #333;
    --delete-button-bg: #ba2121;
    --delete-button-hover-bg: #a41515;

    --object-tools-fg: var(--button-fg);
    --object-tools-bg: var(--close-button-bg);
    --object-tools-hover-bg: var(--close-button-hover-bg);

    --font-family-primary: "Segoe UI",
    system-ui,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
    --font-family-monospace: ui-monospace,
    Menlo,
    Monaco,
    "Cascadia Mono",
    "Segoe UI Mono",
    "Roboto Mono",
    "Oxygen Mono",
    "Ubuntu Monospace",
    "Source Code Pro",
    "Fira Mono",
    "Droid Sans Mono",
    "Courier New",
    monospace,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";

    color-scheme: light;
}

p.datetime {
    line-height: 20px;
    margin: 0;
    padding: 0;
    color: var(--body-quiet-color);
    font-weight: bold;
}

.datetime span {
    white-space: nowrap;
    font-weight: normal;
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}

.datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
    margin-left: 5px;
    margin-bottom: 4px;
}

table p.datetime {
    font-size: 0.6875rem;
    margin-left: 0;
    padding-left: 0;
}

.datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
    overflow: hidden;
}

.datetimeshortcuts .clock-icon {
    background: url(../img/icon-clock.svg) 0 0 no-repeat;
}

.datetimeshortcuts a:focus .clock-icon,
.datetimeshortcuts a:hover .clock-icon {
    background-position: 0 -16px;
}

.datetimeshortcuts .date-icon {
    background: url(../img/icon-calendar.svg) 0 0 no-repeat;
    top: -1px;
}

.datetimeshortcuts a:focus .date-icon,
.datetimeshortcuts a:hover .date-icon {
    background-position: 0 -16px;
}

.timezonewarning {
    font-size: 0.6875rem;
    color: var(--body-quiet-color);
}


.calendarbox, .clockbox {
    margin: 5px auto;
    font-size: 0.75rem;
    width: 19em;
    text-align: center;
    background: var(--body-bg);
    color: var(--body-fg);
    border: 1px solid var(--hairline-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}

.clockbox {
    width: auto;
}

.calendar {
    margin: 0;
    padding: 0;
}

.calendar table {
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    background: white;
    width: 100%;
}

.calendar caption, .calendarbox h2 {
    margin: 0;
    text-align: center;
    border-top: none;
    font-weight: 700;
    font-size: 0.75rem;
    color: #333;
    padding: 6px;
    background: var(--accent);
}

.calendar th {
    padding: 8px 5px;
    background: var(--darkened-bg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 400;
    font-size: 0.75rem;
    text-align: center;
    color: var(--body-quiet-color);
}

.calendar td {
    font-weight: 400;
    font-size: 0.75rem;
    text-align: center;
    padding: 0;
    border-top: 1px solid var(--hairline-color);
    border-bottom: none;
}

.calendar td.selected a {
    background: var(--secondary);
    color: var(--button-fg);
}

.calendar td.nonday {
    background: var(--darkened-bg);
}

.calendar td.today a {
    font-weight: 700;
}

.calendar td a, .timelist a {
    display: block;
    font-weight: 400;
    padding: 6px;
    text-decoration: none;
    color: var(--body-quiet-color);
}

.calendar td a:focus, .timelist a:focus,
.calendar td a:hover, .timelist a:hover {
    background: var(--primary);
    color: white;
}

.calendar td a:active, .timelist a:active {
    background: var(--header-bg);
    color: white;
}

.calendarnav {
    font-size: 0.625rem;
    text-align: center;
    color: #ccc;
    margin: 0;
    padding: 1px 3px;
}

.calendarnav a:link, #calendarnav a:visited,
#calendarnav a:focus, #calendarnav a:hover {
    color: var(--body-quiet-color);
}

.calendar-shortcuts {
    background: var(--body-bg);
    color: var(--body-quiet-color);
    font-size: 0.6875rem;
    line-height: 0.6875rem;
    border-top: 1px solid var(--hairline-color);
    padding: 8px 0;
}

.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
    display: block;
    position: absolute;
    top: 8px;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
    padding: 0;
    z-index: 9999999999999;
}

.calendarnav-previous {
    left: 10px;
    background: url(../img/calendar-icons.svg) 0 0 no-repeat;
}

.calendarnav-next {
    right: 10px;
    background: url(../img/calendar-icons.svg) 0 -15px no-repeat;
}

.calendar-cancel {
    margin: 0;
    padding: 4px 0;
    font-size: 0.75rem;
    background: var(--close-button-bg);
    border-top: 1px solid var(--border-color);
    color: var(--button-fg);
}

.calendar-cancel:focus, .calendar-cancel:hover {
    background: var(--close-button-hover-bg);
}

.calendar-cancel a {
    color: var(--button-fg);
    display: block;
}

ul.timelist, .timelist li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.timelist a {
    padding: 2px;
}