.logs {
	width: 100%;
	white-space: normal;
	table-layout: fixed;

	th {
		color: var(--color-text-maxcontrast);
	}

	td, th {
		vertical-align: top;
		padding: .8em;
		text-align: left;
		font-weight: normal;
		position: relative;
		word-wrap: break-word;
		border-bottom: 1px solid var(--color-border);
	}

	th.level.active .log-settings-toggle,
	th.level:hover .log-settings-toggle {
		opacity: 1;
	}

	.time {
		width: 220px;

		> span {
			margin: -0.8em;
			padding: .8em;
			display: block;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}

	.time.relative {
		width: 120px;

		> span {
			margin: -0.8em;
			padding: .8em;
			display: block;
			width: 100%;
			height: 100%;
			cursor: pointer;
		}
	}

	.app {
		width: 100px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	td.app, th.app {
		@media only screen and (max-width: 1100px) {
			display: none;
		}
	}

	.level {
		width: 100px;
	}

	/* warning*/

	.level_2 td.level {
		border-left: 5px solid #FEEFB3;
	}

	/*error*/

	.level_3 td.level {
		border-left: 5px solid #FFBABA;
	}

	/*fatal*/

	.level_4 td.level {
		border-left: 5px solid #ff8080;
	}

	div.column {
		box-sizing: border-box;
		padding: 7px;
	}

	div.level {
		font-weight: bold;
	}

	div.level, div.app, div.time {
		display: inline-block;
		width: 33%;
	}

	div.time {
		padding-right: 20px;
	}

	div.row {
		position: relative;
	}

	div.message {
		border-bottom: 1px solid var(--color-border);
	}

	td.copy, th.copy {
		position: relative;
		width: 42px;
		margin: 0;
		overflow: visible;

		button {
			position: relative;
			opacity: 0;
			transition: opacity 0.5s;
			top: -5px;
			padding: 0;
			background-color: transparent;
			border: none;
			width: 42px;
		}
	}

	tr:hover {
		td.copy button {
			opacity: 0.5;

			&:hover {
				opacity: 1;
			}
		}
	}

	tr.active td.copy button {
		opacity: 1;
	}

	div.level_1 {

	}

	div.level_2 {
		border-left: 5px solid #FEEFB3;
	}

	div.level_3 {
		border-left: 5px solid #FFBABA;
	}

	div.level_4 {
		border-left: 5px solid #ff8080;
	}

	tr.empty td {
		border-bottom: none;
	}

	tr.highlight {
		background-color: var(--color-background-hover);
	}
}

.smallHeader,
th.level {
	overflow: visible;

	margin: -0.8em;
	padding: .8em;
	height: 100%;
	cursor: pointer;

	.log-settings-toggle {
		cursor: pointer;
		display: block;
		float: right;
		margin: 2px;
		opacity: 0.5;
		transition: opacity 0.2s;
	}
}

.smallHeader {
	margin-left: 44px;
	width: 62px;
	padding: 10px;

	.log-settings-toggle:hover {
		opacity: 1;
	}
}

.copyMenu {
	right: -10px;
	top: 50px;
	width: auto;
}