/** Data tables (and properly marked-up index tables) *************************/
/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

.list-with-heading h3 {
    font-weight: normal;
}

table {
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

    table.data,
    table.index {
        margin: 2em auto;
        margin-left: 0;
        border-collapse: collapse;
        border: hidden;
        width: 60%;
        table-layout: auto;
    }

        table.data caption,
        table.index caption {
            max-width: 50em;
            margin: 0 auto 1em;
        }

        table.data td, table.data th,
        table.index td, table.index th {
            padding: 1em 1em;
            border-width: 1px;
            border-color: black;
            /*border-color: var(--datacell-border);*/
            border-top-style: solid;
            text-align: left;
        }

        table.data thead td:empty {
            padding: 0;
            border: 0;
        }

        table.data thead,
        table.index thead,
        table.data tbody,
        table.index tbody {
            /*border-bottom: 2px solid silver;*/
        }

        /*
        table.data colgroup,
        table.index colgroup {
            border-left: 2px solid silver;
        }
            */

        /*
        table.data tbody tr:first-child,
        table.index tbody tr:first-child {
            border-right: 2px solid silver;
            border-top: 1px solid silver;
            padding-right: 1em;
        }
        */

        table.data tr, table.data td, table.data th {
            /*border-right: 1px solid silver;*/
        }

        table.data .multi-item-header {
            width: 30%;
            background-color: #CCCCCC;
        }

        table.data td {
            width: 70%;
        }

            table.data th[colspan],
            table.data td[colspan] {
                text-align: left;
            }

            table.data.longlastcol td:last-child,
            table.data td.long {
                vertical-align: baseline;
                text-align: left;
            }
/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
    */

.autocomplete_completionListElement {
    visibility: hidden;
    margin: 0px !important;
    background-color: white;
    color: black;
    /*border : solid 1px gray;*/
    cursor: pointer;
    text-align: left;
    list-style-type: none;
    font-family: Verdana;
    font-size: small;
    padding: 0;
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 100
}

.listItem {
    background-color: white;
    padding: 1px;
}

.highlightedListItem {
    background-color: #c3ebf9;
    padding: 1px;
}

#divwidth {
    width: 200px !important;
}

    #divwidth div {
        width: 200px !important;
    }

.dl-app-textbox {
    background-color: #EEEEEE;
    /*border: 1px solid #999999;*/
    width: 75%;
    padding-left: 8px;
}


h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

#UpdatePanel1 .title span {
    background: #fff;
    padding-right: 9px;
    position: relative;
    top: 2px;
}

#UpdatePanel1 .results-label {
    font-weight: bold;
}

#UpdatePanel1 .results-data {
    padding-left: 4px;
}


.pager span {
    color: #000000;
    font-weight: bold;
}

#UpdatePanel1 .dl-app-textbox {
    background-color: #EEEEEE;
    /*border: 1px solid #999999;*/
    width: 100%;
    padding-left: 8px;
}

.app-detail .table .value-data-left {
    text-align: left;
}

.app-detail .table {
    width: 150%;
}

#UpdatePanel1 {
    font-size: 1.2em;
    line-height: 1.5;
    width: 100%;
    margin-top: 10px;
}


.simple-content-text table {
    border-collapse: collapse;
}

.app-sr .table, .app-detail .table {
    border-collapse: separate;
}

/*Below is pertaining to the table grid which displays search results*/


.annotate {
    font-style: italic;
    color: #366ed4;
}

.hidden {
    display: none !important;
}

.list-links {
    font-size: 0;
}

.list-link {
    background: #eee;
    border: 1px solid #bbb;
    display: inline-block;
    font-size: 14px;
    height: 40px;
    margin: 5px 0 0;
    padding: 5px;
    position: relative;
    vertical-align: middle;
    width: 120px;
}

[role="button"] {
    cursor: pointer;
}

.hyperlink {
    display: block;
    width: 100%
}

[aria-sort="ascending"] {
    position: relative;
}

    [aria-sort="ascending"]::after {
        content: " ";
        border-bottom: 0.4em solid black;
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        position: absolute;
        right: 1em;
        top: 0.8em;
    }

[aria-sort="descending"] {
    position: relative;
}

    [aria-sort="descending"]::after {
        content: " ";
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        border-top: 0.4em solid black;
        position: absolute;
        right: 1em;
        top: 0.8em;
    }

.edit-text-button {
    color: #360;
    display: block;
    position: relative;
}

    .edit-text-button::after {
        background-image: url("../imgs/pencil-icon.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 44px;
        content: " ";
        height: 17px;
        opacity: 0.6;
        position: absolute;
        right: -24px;
        top: 0;
        width: 20px;
    }

    .edit-text-button:hover,
    .edit-text-button:focus {
        color: black;
    }

        .edit-text-button:hover::after,
        .edit-text-button:focus::after {
            opacity: 1;
        }

[role="gridcell"],
[role="gridcell"] [tabindex] {
    display: inline-block;
    position: relative;
}

    [role="gridcell"]:focus,
    [role="gridcell"] *:focus,
    [role="grid"] [tabindex="0"]:focus {
        outline: #005a9c;
        outline-style: dotted;
        outline-width: 3px;
    }

#arrow-keys-indicator {
    bottom: 10px;
    left: 0;
    position: fixed;
    height: 65px;
    width: 85px;
    background: url("../imgs/black_keys.png") no-repeat;
    background-size: contain;
}

@media screen and (max-width: 1000px) {
    #arrow-keys-indicator {
        display: none;
    }
}

button {
    cursor: pointer;
    font-size: 110%;
}

.menu-wrapper {
    position: relative;
}

ul[role="menu"] {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    z-index: 1;
}

    ul[role="menu"] li {
        list-style: none;
    }

[role="menu"] {
    padding: 0;
    width: 8em;
    border: thin solid black;
    background-color: #eee;
}

[role="menuitem"] {
    padding: 0.25em;
}

    [role="menuitem"]:focus,
    [role="menuitem"]:hover {
        background-color: #fff;
    }