/* ++
    ScrollView control
-- */

div.scroll-view table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--scrollview-border-color);
}

@media all and (max-aspect-ratio: 13/9) {
    div.scroll-view thead, div.scroll-view tbody {
        width: calc(100% - 0px); /* - 5px because of the scrollbar width */
    }
}
/* iPad */
@media all and (min-aspect-ratio: 13/9) and (max-height: 740px) {
    div.scroll-view thead {
        width: calc(100% - 0px); /* - 17px because of the scrollbar width */
    }
}

/* Desktop */
@media all and (min-aspect-ratio: 13/9) and (min-height: 741px) {
    div.scroll-view thead {
        width: calc(100% - 17px); /* - 17px because of the scrollbar width */
    }
}

div.scroll-view thead {
    display: table; /* to take the same width as tr */
}

div.scroll-view th {
    background-color: var(--scrollview-header-background-color);
    vertical-align: middle;
    color: var(--scrollview-header-foreground-color);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    word-break: break-all;
}

    div.scroll-view th span.heading {
        display: block;
        font-family: 'roboto', var(--nice-font);
        font-size: 110%;
        font-weight: normal;
    }

    div.scroll-view th span.heading a {
        display: inline-block;
        vertical-align: middle;
        font-family: 'roboto', var(--nice-font);
        font-size: 100%;
        font-weight: normal;
    }

div.scroll-view th span.heading a:hover {
    text-decoration:underline;
}

    div.scroll-view th span.heading i {
        font-size: 14pt;
        display: inline-block;
        vertical-align: middle;
        margin-left: 3px;
        /*margin-top:-2px;*/
    }

    div.scroll-view th span.sub-heading:not(:empty) {
        display: inline-block;
    }

div.scroll-view tbody {
    display: block; /* to enable vertical scrolling */
    overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

    div.scroll-view tbody tr {
        display: table; /* display purpose; th's border */
        width: 100%;
        box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
    }

div.scroll-view td {
    border-collapse: collapse;
    border: 1px solid var(--scrollview-border-color);
    border-top: none;
    border-left: none;
    border-right: none;
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
}

div.scroll-view td {
    font-family: 'roboto', var(--nice-font);
    font-size: 110%;
}

    div.scroll-view td span {
        font-family: 'roboto', var(--nice-font);
        font-size: 100%;
    }


div.scroll-view tr.deleted td {
    text-decoration: line-through;
}

div.scroll-view td.edited {
    text-decoration: line-through;
}

div.scroll-view tr.clickable:hover td {
    background-color: var(--scrollview-item-hover-color);
}

div.scroll-view td.clickable {
    cursor: pointer;
}


div.scroll-view div.footer {
    text-align: center;
    padding-top: 15px;
    font-weight: bold;
}

div.scroll-view span.highlight-result {
    background-color: #ffff80;
}

@media all and (min-aspect-ratio: 13/9) {
    a.action-link {
        text-decoration: none;
    }
}

a.action-link:hover {
    color: var(--action-color-hover);
    text-decoration: underline;
}

a.action-link, a.action-link:visited {
    color: var(--action-link-color);
    font-family: 'roboto', Arial;
    font-size: 100%;
}