:root {
	--highlight-color:#009cdc;
}
.table {
	width:100%;
	border-collapse:collapse;
}
.table th,
.table td {
	text-align:left;
	vertical-align: top;
}
.table td {
	padding:0;
}
.table .table-cell  {
	padding:0.2em 0.5em;
}
.table td .editable {
	text-align:left;
	vertical-align: top;
	max-height:5em;
	overflow:auto;
	height: 100%;
}
.edit-table .table-cell {
	border:1px solid #eee;
    position: relative;
}
[contenteditable=true] {
    -webkit-user-select: text;
    user-select: text;
}
td.highlight .editable {
	outline:1px solid var(--highlight-color);
}

td.highlight .editable:focus {
	outline:2px solid var(--highlight-color);
}


.datable .cell-tools {
    position: absolute;
    top: 50%;
    right: 0.1rem;
    transform: translateY(-50%);
    font-size: 0.7em;
    font-family: webdings, wingdings;
}
.datable .cell-tool {
    width: 0.4rem;
    height: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.datable .cell-tool:hover {
	background-color: rgba(0,0,0,0.1);
}




.datable {
	max-width: 100%;
	overflow-x: auto;
}



.pagination {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.pagination button,
.pagination span {
    display: block;
    padding: 0.2em 0.5em;
    border-radius: 0;
    font: inherit;
    outline: 0;
    border: 1px solid transparent;
}
.pagination span {
    background-color: #eee;
    border-color: #bbb;
}
.pagination button {
    background-color: #fff;
    cursor: pointer;
}
.pagination button:hover {
	background-color: #eee;
}



input,
button {
	outline: 0;
}