table {
	border: 1px solid #c0c0c0;
	font-family: arial, sans-serif;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	border-radius: var(--border-radius);
	border-style: hidden;
	box-shadow: 0 0 0 1px #c0c0c0;
	overflow: hidden;
}

td,
th {
	border-left: 1px solid #c0c0c0;
	text-align: left;
	padding: 8px;
	box-sizing: border-box;
}

th {
	border-bottom: 1px solid #c0c0c0;
}

tr {
	background-color: var(--body-background-color);
	transition: background-color 1s, color 1s;
}

tr:nth-child(even) {
	background-color: var(--table-tr-background);
}

#debug tr:nth-child(even) {
	background-color: var(--table-tr-background-dark);
}

tr.blue_row td,
tr.blue_row th {
	background-color: color-mix(in srgb, var(--blue-color) 30%, transparent);
}

tr.green_row td,
tr.green_row th {
	background-color: color-mix(in srgb, var(--green-color) 30%, transparent);
}

tr.yellow_row td,
tr.yellow_row th {
	background-color: color-mix(in srgb, var(--yellow-color) 30%, transparent);
}

tr.red_row td,
tr.red_row th {
	background-color: color-mix(in srgb, var(--red-color) 30%, transparent);
}

.red_row .yellow_text,
.red_row .text_yellow {
	mix-blend-mode: multiply;
}


table[data-axi="sheet"] textarea {
	width: 100%;
	height: 100%;
	background: none;
	resize: none;
	padding: 0;
	margin: -8px;
	overflow: hidden;
	font-family: inherit;
	border: none;
	padding-left: 8px;
	padding-top: 3px;
	height: 24px;
}

table[data-axi="sheet"] textarea::-webkit-input-placeholder {
	opacity: 0.4;
}

table[data-axi="sheet"] select {
	background-color: transparent;
	border: none;
	width: 100%;
}

table[data-axi="sheet"] input {
	border: none;
	background: none;
}

table[data-axi="sheet"] input[type="color"] {
	height: 40px;
	width: 44px;
}

table[data-axi="sheet"] button {
	background: none;
	border: none;
	padding: 0;
	color: var(--body-text-color);
	cursor: pointer;
}

tr[data-axi="template"] {
	visibility: collapse;
}

tr[data-axi-id=""] {
	border: 2px solid var(--green-color)
}

li[data-axi="template"] {
	display: none;
}

.mobile_table {
    display: none;
    margin: 15px 0 15px 0;
}
.mobile_table th {
    text-align: center;
}

.mobile_table tr td:first-child {
    font-weight: bold;
}

@media (max-width:767px) {
    table {
        display: none;
        height: 0;
    }

    .mobile_table {
        display: table;
    }
}