/* Generic pytis forms styles */

.pytis-form.edit-form .errors,
.pytis-form.query-fields-form .errors {
    color: #000;
    background-color: #fed;
    border: 1px solid #fcb;
    border-width: 1px 0;
    margin: 0.6em 0;
    text-align: left;
    padding: 0 3px;
}
.pytis-form.edit-form .errors div,
.pytis-form.query-fields-form .errors div {
    margin: 2px 0;
}
.pytis-form.edit-form .errors a,
.pytis-form.query-fields-form .errors a {
    color: #000;
}

.pytis-form .group, .pytis-form .submit-buttons, .pytis-form .paging-controls {
    background-color: #eee;
    border: 1px solid #ddd;
    border-width: 1px 0;
    margin: 0.4em 0;
}
.pytis-form .group {
    padding: 0.4em 0.6em;
}
.pytis-form .submit-buttons {
    margin-top: 6px;
    padding: 5px;
    text-align: center;
}
.pytis-form .submit-buttons button {
    margin: 3px 4px;
}

.pytis-form.query-fields-form > table {
    border-collapse: collapse;
    border: none;
    border-spacing: 0;
}
.pytis-form.query-fields-form > table > tbody > tr > td {
    padding: 0;
}
.pytis-form.query-fields-form .group {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
.pytis-form.query-fields-form .errors {
    text-align: left;
    margin: 0 0 0.3em 0;
}
.pytis-form.query-fields-form > .body {
    display: inline-block;
    margin-right: 0.8em;
    position: relative;
}
.pytis-form.query-fields-form > .submit-buttons {
    display: inline-block;
    vertical-align: bottom;
    background: none;
    background-color: white;
    border: none;
    margin: 0 0 5px 0;
    padding: 0;
    text-align: left;
}
.pytis-form.query-fields-form > .submit-buttons button {
    margin: 0;
    padding: 1px 5px;
}

.pytis-form .group div.group {
    border-width: 0;
    margin: 0;
    padding: 0;
}
.pytis-form .group fieldset.group {
    border-width: 1px;
}

@media print {
    .pytis-form .group {
	/* Make the border all around, not just top and bottom, when printing. */
	border-width: 1px !important;
    }
}

.pytis-form fieldset.outer {
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.pytis-form legend.empty { display: none; }
.pytis-form table.horizontal-group {
    border: none;
    border-spacing: 0;
    border-collapse: collapse;
}
.pytis-form table.vertical-group td.expanded,
.pytis-form table.horizontal-group.expanded {
    width: 100%;
}
.pytis-form div.horizontal-group table.vertical-group td.expanded,
.pytis-form div.horizontal-group table.horizontal-group.expanded {
    width: auto;
}
.pytis-form table.horizontal-group > tbody > tr > td,
.pytis-form table.vertical-group > tbody > tr > td {
    vertical-align: top;
    padding: 2px 0;
}
.pytis-form table.vertical-group > tbody > tr > td.spacer {
    width: 100%;
}
.pytis-form .horizontal-group fieldset.group {
    margin: 0 0 0.4em 0;
    /* margin-bottom: 100%; ** this breaks fieldset border. */
}
.pytis-form table.horizontal-group > tbody > tr > td { padding-right: 0.6em; }
.pytis-form table.horizontal-group > tbody > tr > td:last-child { padding-right: 0; }

.pytis-form div.horizontal-group {
    margin-left: -0.6em;
}
.pytis-form div.horizontal-group > div {
    display: inline-block;
    margin-bottom: 3px;
    margin-left: 0.6em;
    vertical-align: top;
}

.pytis-form .error, .pytis-form .validation-error {
    color: #a21;
}


/* Fix MSIE fieldset background */
* html .pytis-form table.horizontal-group { position: relative; }
* html .pytis-form fieldset.group { position: relative; margin: 1em 0; padding-top: 0.7em; }
* html .pytis-form .horizontal-group fieldset.group { margin: 0 0 1em 0; }
* html .pytis-form fieldset.group legend { color: #000; position: absolute; top: -0.6em; left: 0.2em; }

.pytis-form .ajax-loading,
.pytis-form .form-load-error {
    padding: 6px 8px;
}
.pytis-form .ajax-loading {
    color: #aaa;
}
.pytis-form .ajax-loading::before,
.pytis-form .form-load-error::before {
    /* The LCG loading and error icons (see lcg-widgets.css). */
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -.2em;
    margin-right: .5em;
    background-color: currentColor;
    -webkit-mask: var(--lcg-loading-icon) center / contain no-repeat;
    mask: var(--lcg-loading-icon) center / contain no-repeat;
    animation: lcg-spin 1s linear infinite;
}
.pytis-form .form-load-error::before {
    width: 1.25em;
    height: 1.25em;
    vertical-align: -.25em;
    background-color: #d02020;
    -webkit-mask-image: var(--lcg-error-icon);
    mask-image: var(--lcg-error-icon);
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .pytis-form .ajax-loading::before {
        animation-duration: 3s;
    }
}
.pytis-form .form-load-traceback {
    padding: 4px;
    margin-left: 6px;
    background-color: #eee;
    border: 1px solid #ddd;
}

.pytis-form.browse-form > .body,
.pytis-form.browse-form > .ajax-container > .body {
    margin-top: .3em;
}
.pytis-form.browse-form .data-table-wrapper {
    overflow-x: auto;
}
.pytis-form.browse-form table.data-table {
    border-collapse: collapse;
    border: none;
}
.pytis-form.browse-form table.data-table thead {
    display: table-header-group;
}
.pytis-form.browse-form table.data-table tr {
    page-break-inside: avoid;
}
.pytis-form.browse-form table.data-table tr.data-row > td,
.pytis-form.browse-form table.data-table tr.row-expansion > td,
.pytis-form.browse-form table.data-table tr.column-headings > th,
.pytis-form.browse-form table.data-table tr.group-heading > th {
    padding: 0.3em 0.5em;
    vertical-align: top;
    border: none;
}
.pytis-form.browse-form table.data-table tr.data-row > td.inline-edit {
    padding: 0;
}
.pytis-form.browse-form td.inline-edit .message,
.pytis-form.browse-form td.inline-edit form > .group,
.pytis-form.browse-form td.inline-edit .submit-buttons {
    margin: 0;
    border: none;
}

.pytis-form.browse-form table.data-table tr.column-headings th.column-heading,
.pytis-form.browse-form table.data-table tr.group-heading th {
    background-color: #eee;
    padding: 0.5em;
}
.pytis-form.browse-form table.data-table tr.column-headings th.column-heading.sortable-column {
    cursor: pointer;
}
.pytis-form.browse-form table.data-table tr.column-headings th span.sort-indicator {
    display: inline-block;
    float: right;
    padding: 3px 2px;
    width: 10px;
    height: 7px;
    background-color: currentColor;
    -webkit-mask: center / 12px 12px no-repeat content-box;
    mask: center / 12px 12px no-repeat content-box;
}
.pytis-form.browse-form table.data-table tr.column-headings th span.sort-direction-asc {
    -webkit-mask-image: var(--lcg-triangle-down-icon);
    mask-image: var(--lcg-triangle-down-icon);
}
.pytis-form.browse-form table.data-table tr.column-headings th span.sort-direction-desc {
    -webkit-mask-image: var(--lcg-triangle-up-icon);
    mask-image: var(--lcg-triangle-up-icon);
}

.pytis-form.browse-form table.data-table.expansible-rows td.expansion-ctrl {
    position: relative;
    width: 15px;
    padding: 0;
}
@media print {
    .pytis-form.browse-form table.data-table.expansible-rows th.expansion-ctrl-heading,
    .pytis-form.browse-form table.data-table.expansible-rows td.expansion-ctrl {
	display: none;
    }
}
.pytis-form.browse-form table.data-table.expansible-rows td.expansion-ctrl a.expand-row {
    width: 15px;
    height: 1.7em;
    position: absolute;
    left: 0;
    top: 0;
    text-indent: -9999px;
    overflow: hidden;
    background-color: currentColor;
    -webkit-mask: var(--lcg-triangle-right-icon) 1px center / 12px 12px no-repeat;
    mask: var(--lcg-triangle-right-icon) 1px center / 12px 12px no-repeat;
}
.pytis-form.browse-form table.data-table.expansible-rows tr.expanded a.expand-row {
    -webkit-mask-image: var(--lcg-triangle-down-icon);
    mask-image: var(--lcg-triangle-down-icon);
}
.pytis-form.browse-form table.data-table tr.row-expansion a.collapse-row {
    position: absolute;
    left: -9999px;
}

.pytis-form.browse-form table.data-table .tree-node {
    white-space: nowrap;
}
.pytis-form.browse-form table.data-table tr.data-row,
.pytis-form.browse-form table.data-table tr.row-expansion { background-color: #f8fafb; }
.pytis-form.browse-form table.data-table tr.data-row.even,
.pytis-form.browse-form table.data-table tr.row-expansion.even { background-color: #f1f3f2; }
.pytis-form.browse-form table.data-table tr.group-heading th { text-align: left; }

.pytis-form.browse-form table.data-table tr.data-row td.with-popup-menu {
    position: relative;
    padding-right: 20px;
}
.pytis-form.browse-form table.data-table .popup-menu-ctrl-widget {
    display: block;
    position: absolute;
    right: 0;
    top: 1px;
}
@media print {
    .pytis-form.browse-form table.data-table .popup-menu-ctrl-widget {
	display: none;
    }
}
.pytis-form.browse-form table.data-table pre {
    background-color: transparent;
    border: none;
}
.pytis-form.browse-form table.data-table span.tree-indent {
    padding-left: 0.6em;
}
.pytis-form.browse-form table.data-table tfoot td {
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 0;
    text-align: right;
}

/* Rows stacked as cards when the table doesn't fit the available width (the
   class 'stacked' is set by JavaScript, which also marks the title cells).
   The column headings are not displayed and the cells are labeled by them
   instead. */
.pytis-form.browse-form table.data-table.stacked,
.pytis-form.browse-form table.data-table.stacked > tbody,
.pytis-form.browse-form table.data-table.stacked > tfoot,
.pytis-form.browse-form table.data-table.stacked tr,
.pytis-form.browse-form table.data-table.stacked tr > td,
.pytis-form.browse-form table.data-table.stacked tr.group-heading > th {
    display: block;
}
.pytis-form.browse-form table.data-table.stacked > thead {
    display: none;
}
.pytis-form.browse-form table.data-table.stacked tr.data-row {
    padding: 0.4em 0;
}
.pytis-form.browse-form table.data-table.stacked tr.data-row > td {
    padding: 0.1em 0.5em;
    text-align: left;
    /* Break long words (such as URLs), which would overflow the card. */
    overflow-wrap: anywhere;
}
.pytis-form.browse-form table.data-table.stacked tr.data-row > td.row-title {
    font-weight: bold;
}
.pytis-form.browse-form table.data-table.stacked tr.data-row > td.row-title > .row-title-heading {
    /* Don't apply the page's heading styles. */
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}
.pytis-form.browse-form table.data-table.stacked tr.data-row > td:empty,
.pytis-form.browse-form table.data-table.stacked tr.data-row > td:has(> .field:empty) {
    display: none;
}
.pytis-form.browse-form table.data-table.stacked tr.data-row > td[data-label]::before {
    content: attr(data-label);
    margin-right: 0.25em;
}

.list-form-controls {
    margin: 0.8em 0;
    padding: 0;
}
.list-form-controls.empty {
    margin: 0;
}
.list-form-controls .paging-controls.one-page {
    text-align: right;
}
.pytis-form .paging-controls {
    padding: 0.2em;
}
/* The index search and page selection dropdowns ('lcg.Dropdown' widgets)
   display the links in rows wrapped at the maximal width. */
.list-form-controls .index-search-controls.expanded > .dropdown-panel,
.list-form-controls .offset-selection .dropdown-widget.expanded > .dropdown-panel {
    max-width: min(32em, calc(100vw - 2em));
    padding: 4px 0.4em;
}
.list-form-controls .index-search-controls.expanded a {
    padding: 0.1em 0.15em;
}
.list-form-controls .index-search-controls .dropdown-toggle .label {
    /* Only for assistive technologies (the button displays a symbol). */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.list-form-controls .index-search-controls .level {
    display: block;
}
.list-form-controls .index-search-controls .level + .level {
    margin-top: 0.3em;
}
.list-form-controls .index-search-controls .level > .label {
    font-weight: bold;
}
/* Selection of a value by links ('lcg.DropdownSelection'). */
.list-form-controls .query-fields-controls {
    margin-bottom: 0.6em;
}
.list-form-controls .query-fields-controls .dropdown-selection {
    display: inline-block;
    margin: 0 0.5em 0.3em 0;
}
.list-form-controls .dropdown-selection > .label,
.list-form-controls .dropdown-selection > .suffix,
.list-form-controls .dropdown-selection .dropdown-toggle {
    vertical-align: middle;
}
.list-form-controls .dropdown-selection .dropdown-widget.expanded a {
    display: block;
}
/* The page numbers are displayed in a grid. */
.list-form-controls .offset-selection .dropdown-widget.expanded > .dropdown-panel {
    max-height: 60vh;
    overflow-y: auto;
}
.list-form-controls .offset-selection .dropdown-widget.expanded a {
    display: inline-block;
    min-width: 2.2em;
    box-sizing: border-box;
    text-align: center;
    padding: 0.1em;
}
.list-form-controls .offset,
.list-form-controls .buttons,
.list-form-controls .limit {
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.list-form-controls .offset,
.list-form-controls .limit,
.list-form-controls .buttons {
    margin-right: 1em;
}
.list-form-controls .buttons button {
    margin-right: .3em;
}
.list-form-controls .query button {
    margin-right: 0;
}
/* The paging buttons use the generic LCG arrow icons, which have some space
   around the chevrons already. */
.list-form-controls button.prev-page .icon {
    margin: 0 0 0 -.25em;
}
.list-form-controls button.next-page .icon {
    margin: 0 -.25em 0 0;
}
@media only screen and (max-width: 767px) {
    /* Only the icons are displayed, the labels remain for assistive technologies. */
    .list-form-controls button.prev-page .label,
    .list-form-controls button.next-page .label,
    .list-form-controls button.search .label,
    .list-form-controls button.cancel-search .label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .list-form-controls button.prev-page .icon,
    .list-form-controls button.next-page .icon,
    .list-form-controls button.search .icon,
    .list-form-controls button.cancel-search .icon {
        margin: 0;
    }
    /* The search field shrinks to keep the search buttons on the same line. */
    .list-form-controls .query {
        display: flex;
        align-items: center;
    }
    .list-form-controls .query > * {
        flex: none;
    }
    .list-form-controls .query > input.text-search-field {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}
@media print {
    .list-form-controls .paging-controls {
        display: none;
    }
}

@media only screen and (max-width: 700px) {
.list-form-controls .offset,
.list-form-controls .limit,
.list-form-controls .buttons { margin-right: 0.5em; }
.list-form-controls.top .limit { display: none; }
}

.pytis-form.browse-form #found-record {
    outline: #f80 solid 1px;
    outline-offset: -1px;
}
.pytis-form.browse-form .results,
.pytis-form.browse-form .no-records {
    font-weight: bold;
}

.pytis-form.list-view .list-item {
    margin: 1em 0;
    overflow: auto; /* force floating image containment by Block Formatting Context */
}
.pytis-form.list-view .tree-indent {
    padding-left: 0.7em;
    border-left: 2px solid #ddd;
    overflow: auto; /* collapse inner margins to get continuous left border */
}
.pytis-form.list-view #found-record {
    background-color: #fff4f0;
}

.pytis-form.list-view .list-item h3 {
    margin: 0.0;
    font-size: 1.2em;
}
.pytis-form.list-view .list-item .meta {
    color: #206573;
    margin: 0.4em 0;
}
.pytis-form.list-view table.grid {
    border-collapse: separate;
    border-spacing: 0.6em;
}
.pytis-form.list-view table.grid td {
    vertical-align: top;
}
.pytis-form label {
    margin-right: 0.25em;
}
.pytis-form.list-view table.grid h3 {
    margin-top: 0;
}
.pytis-form .field-label {
    white-space: nowrap;
    font-weight: bold;
    position: relative;
}
.pytis-form.query-fields-form .field-label {
    font-weight: normal;
}
.pytis-form .not-null-indicator {
    color: #dd0000;
}
.pytis-form .field-label .not-null-indicator {
    position: absolute;
    line-height: 1em;
    top: -.3em;
    right: -.2em;
}
.pytis-form .range-field-separator {
    padding: 0 3px;
}
.pytis-form .field-label.disabled { color: #444; }
.pytis-form .field-label.disabled .not-null-indicator { display: none; }

.pytis-form .radio-group {
    margin: .15em 0 0.25em 0;
}
.pytis-form .radio-group div, .pytis-form .radio-group span {
    white-space: nowrap;
}
.pytis-form .radio-group input {
    vertical-align: baseline;
    margin-right: 0.2em;
}
.pytis-form .radio-group label {
    font-weight: normal;
    display: inline-block;
    margin: 0.3em 0 0.1em 0.1em;
}

.pytis-form .group table {
    border-collapse: collapse;
}
.pytis-form.show-form td.ctrl,
.pytis-form.list-view td.ctrl,
.pytis-form td.label,
.pytis-form.show-form td.label { /* The last rule = show form embedded in an edit form. */
    line-height: 1.4em;
}
.pytis-form td.label {
    white-space: nowrap;
}
.pytis-form.edit-form td.label {
    /* To display labels vertically centered with form controls. */
    line-height: 2.1em;
}
.pytis-form fieldset {
    /* Don't grow with the content beyond the available width. */
    min-width: 0;
}
.pytis-form td.ctrl > :is(input:not([type=checkbox], [type=radio]), textarea, select):not(.fullsize) {
    /* Let the fields shrink when the form doesn't fit the available width.
       The percentage width makes them shrinkable in the table layout, while
       'max-content' keeps their natural size given by 'size' or 'cols'. */
    width: 100%;
    max-width: max-content;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    /* Display the field labels above the fields on narrow screens. */
    .pytis-form table.vertical-group,
    .pytis-form table.horizontal-group,
    .pytis-form table.vertical-group > tbody,
    .pytis-form table.horizontal-group > tbody,
    .pytis-form table.vertical-group > tbody > tr,
    .pytis-form table.horizontal-group > tbody > tr,
    .pytis-form table.vertical-group > tbody > tr > td,
    .pytis-form table.horizontal-group > tbody > tr > td {
        display: block;
    }
    .pytis-form table.horizontal-group > tbody > tr > td {
        padding-right: 0;
    }
    .pytis-form td.ctrl {
        text-align: left;
    }
    .pytis-form td.label,
    .pytis-form.edit-form td.label {
        text-align: left;
        line-height: 1.4em;
        padding-top: 0.4em;
    }
}

.pytis-form.show-form a.print-field-link {
    float: right;
    display: block;
    font-size: 1.5em;
}

.pytis-form .group span.color-display {
    padding: 0 0.5em;
    border: 1px solid #bbb;
}
.pytis-form .group span.color-value {
    float: left;
    width: 6em;
}
.pytis-form.show-form, .pytis-form.edit-form {
    margin: 0;
    padding: 0;
}
.pytis-form.edit-form .help {
    color: #444;
    margin-bottom: 0.4em;
}
.pytis-form input.text-search-field,
.pytis-form.edit-form input.text-field,
.pytis-form.edit-form textarea,
.pytis-form.edit-form select {
    border: 1px solid #bbb;
    background-color: #fff;
}
.pytis-form.edit-form input.text-field:disabled,
.pytis-form.edit-form textarea:disabled,
.pytis-form.edit-form select:disabled {
    background-color: #e8e8e8;
}
.pytis-form input.fullsize,
.pytis-form textarea.fullsize {
    width: 100%;
    box-sizing: border-box;
}
.pytis-form .field .multiline.scrolled {
    overflow-y: scroll;
    resize: vertical;
    border: 1px solid #ddd;
    border-width: 1px 0;
}

@media print {
    .pytis-form .field .multiline.scrolled {
	height: auto !important;
	border: none;
    }
}

.pytis-form button.selection-invocation {
    margin-left: 2px;
}
.pytis-form .calendar-field {
    white-space: nowrap;
}

@media screen {
    /* Avoid inline-block in print as it triggers Firefox bug which causes
     * that only the first page of the table is printed. */
    .pytis-form.browse-form > .ajax-container > .body,
    .pytis-form.browse-form > .body {
	display: inline-block;
	/* Let the table wrapper scroll the table, which doesn't fit. */
	max-width: 100%;
    }
    .pytis-form.browse-form .summary {
	background-color: #eee;
	padding: .3em .5em;
	text-align: right;
    }
}
.pytis-form.list-view .summary {
    margin-top: 1.2em;
    border-top: 1px solid #ddd;
}
/*.pytis-form .invalid {
    background-color: #fdb;
}*/

.actions {
    margin: 1em 0;
}
.actions form {
    display: inline;
    margin: 0;
    padding: 0;
}
.actions a {
    vertical-align: top;
    padding-left: 0.5em;
}
.actions button {
    margin-bottom: 0.4em;
    margin-right: 0.4em;
}

.pytis-form.browse-form .new-row-button {
    position: relative;
    left: -1px;
    top: 3px;
    margin: 0;
}

.pytis-form.browse-form a.remove-row .icon {
    margin: 0 3px 0 2px;
}
.pytis-form.browse-form td.editable-cell .errors {
    border-width: 1px;
    margin: 1px 0;
}
.pytis-form.browse-form td.editable-cell form {
    white-space: nowrap;
}
/* Border-less table:
.pytis-form.browse-form.mapping table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 0;
}
.pytis-form.browse-form.mapping table tbody td {
    border-width: 0;
}
.pytis-form.browse-form.mapping table th {
    border-width: 1px 0;
} */

/* Date picker dialog */

.datepicker {
    position: absolute;
    width: 320px;
    clear: both;
    border: 1px solid #ddd;
    margin-top: 0.15em;
    border-radius: 5px;
    padding: 0;
    background-color: #fff;
    box-shadow: 1px 1px 12px rgba(0, 0, 0, .6);
}

.datepicker .header {
    cursor: default;
    background-color: #eee;
    padding: 7px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-around;
    border-radius: 5px 5px 0 0;
}

.datepicker h2 {
    margin: 0;
    padding: 8px;
    display: inline-block;
    font-size: 1em;
    text-transform: none;
    font-weight: bold;
    border: none;
}

.datepicker .dates {
    width: 320px;
}

.datepicker .prev-year,
.datepicker .prev-month,
.datepicker .next-month,
.datepicker .next-year {
    padding: 4px 6px;
    width: 44px;
    margin: 1px;
}

.datepicker .dialog-ok-cancel-group {
    text-align: right;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
}

.datepicker .dialog-ok-cancel-group button {
    min-width: 4.2em;
    margin-left: .5em;
}
.datepicker button[value="ok"] {
}

.datepicker .month-year {
    display: inline-block;
    width: 12em;
    text-align: center;
}

.datepicker table.dates {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
}

.datepicker table.dates th,
.datepicker table.dates td {
    text-align: center;
}


.datepicker table.dates td {
    padding: 3px;
    margin: 0;
    line-height: inherit;
    height: 40px;
    width: 40px;
    border-radius: 5px;
    font-size: 15px;
    background: #eee;
    cursor: pointer;
}

.datepicker table.dates td.disabled {
    padding: 2px;
    border: none;
    height: 41px;
    width: 41px;
}

.datepicker table.dates td[tabindex="0"] {
    background-color: #444;
    color: white;
}

.datepicker table.dates td:not(.disabled):hover {
    padding: 2px;
    border: 1px solid #bbb;
    background-color: #f8f8f8;
}

.datepicker table.dates td[tabindex="0"]:hover {
    background-color: #555;
    border: 1px solid #222;
}


.datepicker table.dates td[aria-selected] {
    padding: 1px;
    border: 1px solid #555;
}

.datepicker .echo {
    padding: 0.25em 1em;
    height: 1em;
    background-color: #eee;
    border-radius: 0 0 5px 5px;
}