/* @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300,400,500,600,700&display=swap"); */

body {
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	background: #f9f9f9;
	margin: 0;
	padding: 0;
}

table.list {
	width: calc(100% - 400px);
	border-collapse: collapse;
	border-spacing: 0;
    margin: 1em;
    border: solid 1px #aaa;
    background: #fff;
    border-radius: 8px;
    padding: 1px;
    overflow: hidden;

    :where(thead, tbody) tr {
        border-block-end: solid 1px #ddd;

        td {
            padding: 0.5em 1em;
        }
    }

    thead tr {
        font-weight: 500;
        border-block-end-color: #aaa;
    }

    tbody:empty {
        display: table-row-group;
        height: 5em;
        font-style: italic;
        color: #aaa;
        position: relative;
        text-align: center;
        vertical-align: middle;

        &::before {
            position: absolute;
            inset: 0;
            inset-block: auto;
            padding: 2em;
            content: attr(data-list-empty);
        }
    }

}