/** TABLES **********************/

table.table {
	width:100%;
	border-bottom: solid 1px var(--gray20);
	border-spacing: 0px;
	margin-bottom:30px;
}

table.table th {
	font-weight:600;
	text-align:left;
}

table.table th,
table.table td {
	padding: 10px 6px;
	vertical-align: top;
}

table.table td {
	border-top: solid 1px var(--gray20);
}

table.table thead th,
table.table thead td
{
	font-weight:700;
	border-top: none;
}

table.table tr.edit td {
	background-color: var(--blue10);
	border: solid 1px var(--blue20);
}

table.table [role=link]:hover td,
table.table [role=link]:focus td,
table.table [role=button]:hover td,
table.table [role=button]:focus td,
table.table .clickable:hover td,
table.table .clickable:focus td {
	background-color:var(--gray10);
	cursor:pointer;
}

table.table input,
table.table button,
table.table select {
	margin: 0px;
	padding: 5px 10px;
}

/** DIV "TABLES" ****************/

div.table {
	border-bottom: solid 1px var(--gray20);
}

div.table > * {
	border-top: solid 1px var(--gray20);
	padding: 10px 0px;
}

div.table > .table-header {
	border-top:none;
}

div.table > [role=link]:hover,
div.table > [role=link]:focus, 
div.table > [role=button]:hover,
div.table > [role=button]:focus,
div.table > .clickable:hover,
div.table > .clickable:focus {
	background-color:var(--gray15);
	cursor:pointer;
}

div.table > .selected {
	background-color:var(--blue50);
	color:var(--white);
}

div.table > .selected:hover,
div.table > .selected:focus {
	background-color:var(--blue60);
	color:var(--white);
}


div.table + div.table {
	border-top: none;
}

/** Some Modifiers ***********************/

.table.no-top-border > :first-child {
	border-top: none;
}

.table.no-bottom-border {
	border-bottom: none;
}

/** EDITABLE GRIDS ***********************/

table.grid {
	width:100%;
	background-color:var(--white);
	border-top: solid 1px var(--gray20);
	border-collapse: collapse;
	border-spacing: 0px;
	margin-bottom:10px;
}

tr.grid-header {
	border-bottom: solid 1px var(--gray20);
	font-weight:600;
}

tr.grid-row {
	border-bottom: solid 1px var(--gray20);
}

tr.grid-row:hover {
	cursor: pointer;
	background-color:var(--gray10);
}

td.grid-cell {
	text-align:left;
	vertical-align: top;
	padding: calc(var(--rhythm) * 1.5) calc(var(--rhythm) * 1.5);
}

td.grid-cell.grid-editable {
	border-top:solid 1px var(--grid-highlight-background)!important;
	border-bottom:solid 1px var(--grid-highlight-background);
	background-color: var(--grid-highlight-background);
	cursor:default;
}

td.grid-cell.align-right {
	text-align:right;
}

td.grid-cell input,
td.grid-cell select,
td.grid-cell div {
	display:block;
	width:100%;
	background-color:rgba(0,0,0,0);
	font-size: calc(var(--rhythm) * 2);
	line-height: calc(var(--rhythm) * 2);
	padding: 0px 0px;;
	margin: 0px 0px;
	border:none;
}

td.grid-cell:has(input:focus),
td.grid-cell:has(select:focus) {
	outline: medium auto currentColor;
    outline: medium auto invert;
    outline: 5px auto -webkit-focus-ring-color;
}

td.grid-cell input:focus,
td.grid-cell select:focus {
	outline:none;
}

td.grid-cell.grid-controls {
	text-align:right;
	padding: var(--rhythm) var(--rhythm);
	white-space: nowrap;
}

.grid button, 
td.grid-controls > button {
	background-color: rgba(0,0,0,0);
	border: none;
	margin: 0px;
	padding: 0px var(--rhythm);

	font-size: calc(var(--rhythm) * 2);
	line-height: calc(var(--rhythm) * 2);
}
