* {
	box-sizing: border-box;
}

html {
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	font-size: 11px;
	height: 100%;
	overflow: hidden;
}

body {
	font-size: 100%;
	height: 100%;
	margin: 0;

	&.dark {
		background: rgb(31, 31, 31);
		color: rgb(178, 178, 178);
	}
}

table {
	border-collapse: collapse;
	font-size: 100%;
	width: 100%;

	th, td {
		text-align: left;
	}
}

a {
	color: rgb(105, 105, 105);
	cursor: default;

	&:hover {
		color: rgb(59, 59, 59);

		body.dark & {
			color: hsl(31, 98%, 48%);
		}
	}

	body.dark & {
		color: rgb(128, 128, 128);
	}
}

// Split view

.split-view {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;

	@media screen and (min-width: 900px) {
		flex-direction: row;
	}
}

.split-view-requests {
	height: 50%;
	width: 100%;

	@media screen and (min-width: 900px) {
		height: 100%;
		width: 480px;
	}
}

.split-view-details {
	height: 50%;
	min-width: 0;

	@media screen and (min-width: 900px) {
		flex: 1;
		height: 100%;
	}
}

// Requests list pane

.split-view-requests {
	cursor: default;

	table {
		line-height: 1.4;
		table-layout: fixed;
	}

	tr {
		height: 28px;

		&:first-child td {
			border-top: 1px solid rgb(209, 209, 209);

			body.dark & {
				border-top: 1px solid rgb(54, 54, 54);
			}
		}

		&:nth-child(even):not(.filler) {
			background: rgb(243, 243, 243);

			body.dark & {
				background: rgb(24, 24, 24);
			}

			td.method, td.status, td.duration {
				background: rgb(225, 225, 225);

				body.dark & {
					background: rgb(17, 17, 17);
				}
			}

			.notifications-count {
				background: rgba(243, 243, 243, 0.8);

				body.dark & {
					background: rgba(27, 27, 27, 0.8);
				}
			}
		}

		&.selected {
			td {
				background: rgb(39, 134, 243) !important;
				color: white;

				body.dark & {
					background: hsl(31, 98%, 48%) !important;
				}
			}

			small {
				color: white;

				body.dark & {
					color: white;
				}
			}

			.notifications-count {
				background: rgb(39, 134, 243) !important;

				.errors-count i, .warnings-count i {
					color: #fff;
				}

				body.dark & {
					background: hsl(31, 98%, 48%) !important;
				}
			}
		}

		&.sizing {
			height: 0;

			td {
				border-top: 0;
				padding: 0;

				body.dark & {
					border-top: 0;
				}
			}
		}

		&.filler {
			height: auto;
		}
	}

	th {
		border-bottom: 1px solid rgb(209, 209, 209);
		border-right: 1px solid rgb(209, 209, 209);
		font-weight: normal;
		height: 30px;
		line-height: 1.1;
		padding: 2px 4px;
		white-space: nowrap;

		body.dark & {
			border-bottom: 1px solid rgb(54, 54, 54);
			border-right: 1px solid rgb(54, 54, 54);
		}
	}

	td {
		border-right: 1px solid rgb(209, 209, 209);
		overflow: hidden;
		padding: 8px 6px;
		vertical-align: middle;
		white-space: nowrap;

		&.method, &.status, &.duration {
			background: rgb(237, 237, 237);

			body.dark & {
				background: rgb(29, 29, 29);
			}
		}

		body.dark & {
			border-right: 1px solid rgb(54, 54, 54);
		}
	}

	small {
		color: rgb(128, 128, 128);
		font-size: 100%;

		body.dark & {
			color: rgb(118, 118, 118);
		}
	}

	.method, .status {
		text-align: center;
		width: 50px;
	}

	.duration {
		text-align: right;
		width: 80px;
	}

	.notifications-count {
		background: rgba(255, 255, 255, 0.8);
		float: right;
		letter-spacing: -0.5px;
		line-height: 29px;
	    margin-right: -6px;
	    padding: 0 6px;
		position: relative;

		.errors-count i {
			color: rgb(179, 73, 46);
			margin-left: 2px;
		}

		.warnings-count i {
			color: rgb(244, 189, 0);
			margin-left: 2px;
		}

		body.dark & {
			background: rgba(31, 31, 31, 0.8);
		}
	}

	.requests-header {
		height: 31px;
	}

	.requests-container {
		height: calc(100% - 31px);
		overflow: auto;

		table {
			height: 100%;
		}
	}

	.load-more {
		align-items: center;
		border-bottom: 1px solid rgb(209, 209, 209);
		border-right: 1px solid rgb(209, 209, 209);
		display: flex;
		height: 36px;
		justify-content: center;

		body.dark & {
			border-bottom: 1px solid rgb(54, 54, 54);
			border-right: 1px solid rgb(54, 54, 54);
		}

		a {
			color: rgb(64, 64, 64);
			text-decoration: none;

			&:hover {
				color: rgb(37, 140, 219);

				body.dark & {
					color: hsl(31, 98%, 48%);
				}
			}

			body.dark & {
				color: rgb(178, 178, 178);
			}
		}
	}
}

// Request details pane

.split-view-details {
	display: flex;
	flex-direction: column;
	position: relative;
}

.details-header {
	border-bottom: 1px solid rgb(204, 204, 204);
	display: flex;
	flex-shrink: 0;
	height: 31px;

	body.dark & {
		border-bottom: 1px solid rgb(54, 54, 54);
	}

	.details-header-tabs {
		display: flex;
		flex: 1;

		.details-header-tab {
			color: rgb(64, 64, 64);
			cursor: default;
			flex: 1;
			font-size: 12px;
			line-height: 31px;
			text-align: center;
			text-decoration: none;

			&.active {
				color: rgb(37, 140, 219);

				body.dark & {
					color: hsl(31, 98%, 48%);
				}
			}

			body.dark & {
				color: rgb(158, 158, 158);
			}
		}
	}

	.icons {
		align-items: center;
		display: flex;
		font-size: 15px;
		padding: 0 5px;

		a {
			padding: 0 5px;
		}
	}
}

.details-content {
	flex: 1;
	overflow: auto;
	padding: 10px;

	h3 {
	    border-bottom: 1px solid #d1d1d1;
		font-size: 13px;
		font-weight: 600;
		margin: 0;
		padding: 4px 10px;
	}

	table {
		font-size: 12px;
		margin-bottom: 18px;

		thead {
			th:last-child {
				padding-right: 20px;
				position: relative;
			}

			.fa-angle-down, .fa-angle-up {
				font-weight: bold;
				margin-left: 4px;
			}

			.toggle-filter {
				position: absolute;
				right: 0;
				top: 4px;
				visibility: hidden;
			}

			&:hover {
				.toggle-filter {
					visibility: visible;
				}
			}
		}

		tr {
			&:first-child td {
				border-top: 1px solid rgb(209, 209, 209);

				body.dark & {
					border-top: 1px solid rgb(54, 54, 54);
				}
			}

			&:nth-child(even) {
				background: rgb(245, 245, 245);

				body.dark & {
					background: rgb(27, 27, 27);
				}
			}
		}

		th {
			font-size: 13px;
			font-weight: 600;
			padding: 4px 10px;
			white-space: nowrap;
		}

		td {
			padding: 8px 10px;
			vertical-align: top;

			&.key {
				font-size: 12px;
				white-space: nowrap;
			}

			&.value {
				word-break: break-all;
			}
		}

		.filter {
			background: none !important;

			td {
				border-top: 1px solid #d1d1d1;
				padding: 2px 10px;

				body.dark & {
					border-top: 1px solid rgb(54, 54, 54);
				}
			}

			label {
				align-items: center;
				display: flex;
				position: relative;
			}

			.fa {
				color: #696969;
				padding: 0 4px;
			}

			input {
				background: transparent;
				border: none;
				width: 100%;

				&:focus {
					outline: none;
				}

				&::placeholder {
					color: #a9a9a9;

					body.dark & {
						color: #777;
					}
				}

				body.dark & {
					color: #b2b2b2;
				}
			}

			.example {
				color: #a9a9a9;
				font-size: 11px;
				pointer-events: none;
				position: absolute;
				right: 0;

				body.dark & {
					color: #777;
				}
			}
		}
	}

	.counters-row {
		display: flex;
		margin: 0 0 10px;

		.counter {
			border: 1px solid rgb(209, 209, 209);
			border-radius: 3px;
			box-shadow: 0 2px 3px #e5e5e5;
			margin: 0 5px;
			flex: 0 1 120px;
			padding: 8px 20px 10px;
			text-align: center;

			body.dark & {
				border: 1px solid rgb(64, 64, 64);
				box-shadow: 0 2px 3px #292929;
			}

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}

			.counter-value {
				font-size: 175%;
			}

			.counter-title {
				font-size: 120%;
				font-variant: small-caps;
				text-transform: lowercase;
			}
		}
	}

	// Request tab

	.request-tab-info {
		display: flex;
		margin: 4px 0 8px;

		.field {
			display: flex;
			flex-direction: column;
			margin: 0 5px;
			padding: 0 20px;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}

			.field-value {
				display: flex;
				flex: 1;
				flex-direction: column;
				font-size: 130%;
				justify-content: center;

				.small {
					color: #888;
					font-size: 75%;
					padding-top: 2px;
				}
			}

			.field-title {
				font-size: 120%;
				font-variant: small-caps;
				padding-bottom: 5px;
				text-transform: lowercase;
			}

			&.action {
				flex: 1;
			}

			&.link {
				font-size: 90%;
				padding: 0;
			}
		}
	}

	.request-tab-exception {
	    margin: 12px -10px;

		.exception-info {
			align-items: center;
			background: rgb(255, 235, 235);
			color: rgb(197, 31, 36);
		    display: flex;
		    padding: 10px 30px;

			&:nth-child(even) {
				background: hsl(0, 100%, 94%);
			}

			&:first-child {
				padding-top: 15px;
			}

			&:last-child {
				padding-bottom: 15px;
			}

			body.dark & {
				background: hsl(0, 100%, 11%);
				color: rgb(237, 121, 122);

				&:nth-child(even) {
					background: hsl(0, 100%, 9%);
				}
			}

			h3 {
			    border-bottom: 0;
		        padding: 6px 0;
			}

		    .exception-message {
			    flex: 1;
	    	    font-size: 15px;
			    line-height: 1.5;
		    }

    		.exception-previous, .exception-trace .stack-trace > a {
	    	    border: 1px solid #aaa;
			    border-radius: 4px;
			    font-size: 11px;
			    font-variant: small-caps;
				padding: 3px 12px;
			    text-transform: uppercase;

			    body.dark & {
					border-color: gray;
			    }
			}

			.exception-previous {
				margin-right: 4px;
				text-decoration: none;
			}

			.exception-trace {
				display: inline-block;
			}
		}
	}

	// Performance tab

	.performance-chart-container {
		flex: 0 1 100px;
	}

	.performance-chart {
		height: 60px;
		margin: 0 auto;
		position: relative;
		width: 60px;
	}

	.performance-chart-legend {
		&.style1 {
			border-left: 3px solid rgb(120, 177, 222) !important;

			body.dark & {
				border-left: 3px solid rgb(100, 157, 202) !important;
			}
		}

		&.style2 {
			border-left: 3px solid rgb(231, 150, 151) !important;

			body.dark & {
				border-left: 3px solid rgb(211, 130, 131) !important;
			}
		}

		&.style3 {
			border-left: 3px solid rgb(177, 202, 109) !important;

			body.dark & {
				border-left: 3px solid rgb(157, 182, 89) !important;
			}
		}

		&.style4 {
			border-left: 3px solid rgb(186, 148, 230) !important;

			body.dark & {
				border-left: 3px solid rgb(166, 128, 210) !important;
			}
		}
	}

	.performance-tabs {
		display: flex;
		flex: 1;
		justify-content: center;
		padding: 8px 0 4px;

		.performance-tab {
			color: rgb(64, 64, 64);
			cursor: default;
			font-size: 12px;
			line-height: 31px;
			padding: 0 31px;
			text-align: center;
			text-decoration: none;

			&.active {
				color: rgb(37, 140, 219);

				body.dark & {
					color: hsl(31, 98%, 48%);
				}
			}

			body.dark & {
				color: rgb(158, 158, 158);
			}
		}
	}

	.timeline {
		position: relative;

		.timeline-duration, .timeline-description {
			display: none;
		}

		&.table-view {
			.timeline-duration, .timeline-description {
				display: table-cell;
			}

			.timeline-graph {
				padding: 12px 0 0;
				width: 25%;
			}

			.timeline-legend {
				display: none;
			}

			.timeline-bar {
				.label {
					display: none;
				}
			}
		}
	}

	.timeline-controls {
		position: absolute;
		right: 0;
		top: 4px;
		z-index: 100;

		.timeline-control-group {
			margin: 0 5px;
		}

		.toggle-filter {
			position: static;
			visibility: visible;
		}

		.fa-bar-chart {
			font-size: 110%;
		}

		.fa-bars {
			font-size: 115%;
		}

		a {
			margin: 0 2px;
			text-decoration: none;

			&.active {
				color: rgb(37, 140, 219);

				body.dark & {
					color: hsl(31, 98%, 48%);
				}
			}

			body.dark & {
				color: rgb(158, 158, 158);
			}
		}
	}

	.timeline-graph {
		background-image: linear-gradient(to right, transparent 99.5%, #e5e5e5 99.5%, #e5e5e5 100%);
		background-size: 80px 1px;
		padding: 6px 4px 8px;

		body.dark & {
			background-image: linear-gradient(to right, transparent 99.5%, #333 99.5%, #333 100%);
		}
	}

	.timeline-legend {
		color: #a1a1a1;
		height: 14px;
		margin-bottom: 6px;
		margin-top: -2px;
		position: relative;

		body.dark & {
			color: hsl(0, 0%, 40%);
		}

		.timeline-legend-time {
			font-size: 10px;
			font-weight: normal;
			position: absolute;
			top: 0;
		}
	}

	.timeline-bar {
		.label {
			color: hsl(206, 30%, 30%);
			font-size: 11.5px;
			margin-bottom: 2px;
			white-space: nowrap;
		}

		.bar {
			background: rgb(120, 177, 222);
			border: 1px solid rgb(66, 149, 197);
			border-radius: 3px;
			padding: 3px;

			body.dark & {
				background: rgb(100, 157, 202);
				border: 1px solid rgb(46, 129, 177);
			}
		}

		&.style1 {
			.label {
				color: hsl(206, 30%, 30%);

				body.dark & {
					color: hsl(206, 20%, 70%);
				}
			}

			.bar {
				background: rgb(120, 177, 222);
				border: 1px solid rgb(66, 149, 197);

				body.dark & {
					background: rgb(100, 157, 202);
					border: 1px solid rgb(46, 129, 177);
				}
			}
		}

		&.style2 {
			.label {
				color: hsl(359, 30%, 30%);

				body.dark & {
					color: hsl(359, 20%, 70%);
				}
			}

			.bar {
				background: rgb(231, 150, 151);
				border: 1px solid rgb(209, 107, 108);

				body.dark & {
					background: rgb(211, 130, 131);
					border: 1px solid rgb(189, 87, 88);
				}
			}
		}

		&.style3 {
			.label {
				color: hsl(75, 30%, 30%);

				body.dark & {
					color: hsl(75, 20%, 70%);
				}
			}

			.bar {
				background: rgb(177, 202, 109);
				border: 1px solid rgb(152, 186, 81);

				body.dark & {
					background: rgb(157, 182, 89);
					border: 1px solid rgb(132, 166, 61);
				}
			}
		}

		&.style4 {
			.label {
				color: hsl(267, 30%, 30%);

				body.dark & {
					color: hsl(267, 20%, 70%);
				}
			}

			.bar {
				background: rgb(186, 148, 230);
				border: 1px solid rgb(151, 114, 181);

				body.dark & {
					background: rgb(166, 128, 210);
					border: 1px solid rgb(131, 94, 161);
				}
			}
		}
	}

	.timeline-duration {
		text-align: right;
		width: 100px;
	}

	.profiler {
		.profiler-controls {
			position: absolute;
			right: 0;
			top: 4px;

			.profiler-control-group {
				margin: 0 5px;
			}

			.profiler-show-metric {
				font-size: 105%;

				.fa-clock-o {
					font-size: 110%;
				}
			}

			.profiler-shown-fraction {
				font-size: 85%;
			}

			.toggle-filter {
				position: static;
				visibility: visible;
			}

			a {
				margin: 0 2px;
				text-decoration: none;

				&.active {
					color: rgb(37, 140, 219);

					body.dark & {
						color: hsl(31, 98%, 48%);
					}
				}

				body.dark & {
					color: rgb(158, 158, 158);
				}
			}
		}

		.profiler-metric {
			white-space: nowrap;
		}

		.profiler-function {
			display: flex;
		    flex-wrap: wrap;

			.profiler-function-name {
				flex: 1 1 auto;
				word-break: break-all;
			}

			.profiler-path {
				color: #aaa;
			    flex: 0;
			    font-size: 90%;
			    margin-top: 3px;
			}
		}
	}

	.profiler-loading, .profiler-not-available {
		align-items: center;
		display: flex;
		flex-direction: column;
		font-size: 16px;
		padding: 40px 0;
		text-align: center;
		width: 100%;

		.message {
			color: #aaa;
			font-size: 75%;
			margin: 10px 0 0 0;
		}
	}

	.profiler-not-available {
		font-size: 15px;
		line-height: 1.5;

		.message {
			font-size: 90%;
			margin: 15px 0 0;
		}

		a {
			color: #aaa;
			cursor: pointer;
		}

		.profiler-enable {
			a {
				color: rgb(37, 140, 219);

				body.dark & {
					color: hsl(31, 98%, 48%);
				}
			}
		}
	}

	// Log tab

	.log-row {
		&.error {
			background: rgb(255, 235, 235);
			color: rgb(197, 31, 36);

			&:nth-child(even) {
				background: hsl(0, 100%, 94%);
			}

			.log-message-path {
				color: hsl(358, 55%, 70%);
			}

			body.dark & {
				background: hsl(0, 100%, 11%);
				color: rgb(237, 121, 122);

				&:nth-child(even) {
					background: hsl(0, 100%, 9%);
				}

				.log-message-path {
					color: hsl(359, 38%, 62%);
				}
			}
		}

		&.warning {
			background: rgb(255, 250, 226);
			color: rgb(168, 89, 25);

			&:nth-child(even) {
				background: hsl(50, 100%, 88%);
			}

			.log-message-path {
				color: hsl(27, 55%, 65%);
			}

			body.dark & {
				background: hsl(50, 100%, 11%);
				color: rgb(250, 216, 159);

				&:nth-child(even) {
					background: hsl(50, 100%, 9%);
				}

				.log-message-path {
					color: hsl(38, 42%, 68%);
				}
			}
		}
	}

	.log-date, .log-level {
		width: 70px;
	}

	.log-message {
		display: flex;
		flex-wrap: wrap;

		.log-message-content {
			flex: 1 0 auto;
			max-width: 100%;
		}

		.log-message-exception {
			flex: 0;
			font-size: 90%;
			margin: 3px 5px 0 0;
		    white-space: nowrap;

		    .exception-previous {
	    	    border: 1px solid #aaa;
			    border-radius: 4px;
			    text-decoration: none;
			    padding: 2px 4px;
			    margin-right: 5px;

			    body.dark & {
					border-color: gray;
			    }
		    }
		}

		.log-message-path {
			color: #aaa;
			flex: 0;
			font-size: 90%;
			margin-top: 3px;

			body.dark & {
				color: #777;
			}
		}
	}

	// Events tab

	.fired-event {
		display: flex;
		flex-wrap: wrap;

		.fired-event-content {
			flex: 1 0 auto;
			max-width: 100%;
		}

		.fired-event-path {
			color: #aaa;
			flex: 0;
			font-size: 90%;
			margin-top: 3px;

			body.dark & {
				color: #777;
			}
		}
	}

	.fired-event-details {
		h4 {
			margin: 6px 0 3px;
		}
	}

	.fired-event-actions {
		padding-left: 5px;
		width: 10px;
	}

	// Database tab

	.database-query {
		display: flex;
		flex-wrap: wrap;

		.database-query-content {
			flex: 1 0 auto;
			max-width: 100%;
		}

		.database-query-path {
			color: #aaa;
			flex: 0;
			font-size: 90%;
			margin-top: 3px;

			body.dark & {
				color: #777;
			}
		}
	}

	.database-duration {
		text-align: right;
	}

	// Cache tab

	.cache-query-type {
		font-size: 125%;
		font-variant: small-caps;
	}

	// Session tab

	.session-user {
		align-items: center;
		border: 1px solid rgb(209, 209, 209);
		border-radius: 3px;
		box-shadow: 0 2px 3px #e5e5e5;
		display: flex;
		font-size: 130%;
		margin: 0 5px 10px;
		padding: 12px 20px 14px;

		body.dark & {
			border: 1px solid rgb(64, 64, 64);
			box-shadow: 0 2px 3px #292929;
		}

		.fa {
			color: rgb(128, 128, 128);
			font-size: 28px;
			margin-right: 16px;
		}

		.name {
			margin-right: 4px;
		}

		.title {
			font-size: 13px;
			font-variant: small-caps;
			text-transform: lowercase;
		}

		.dimmed {
			color: rgb(128, 128, 128);
			font-size: 90%;

			body.dark & {
				color: rgb(118, 118, 118);
			}
		}

		.session-user-details {
			margin-left: auto;
		}
	}
}

.details-loading-overlay, .details-error-overlay, .details-authentication-overlay {
	align-items: center;
	background: #fff;
	display: flex;
	flex-direction: column;
	font-size: 16px;
	height: calc(100% - 31px);
	justify-content: center;
	left: 0;
	position: absolute;
	top: 31px;
	width: 100%;
	z-index: 999;

	body.dark & {
		background: rgb(31, 31, 31);
	}

	.fa {
		color: #696969;
		font-size: 46px;
	}

	.title {
		margin: 10px 0 0 0;
	}

	.message {
		color: #aaa;
		font-size: 75%;
		margin: 5px 0 0 0;
	}
}

.details-authentication-overlay {
	text-align: center;

	.title, .message {
		font-size: 80%;
	}

	.title.failed {
		display: none;
	}

	p {
		margin: 1.3em 0;
	}

	input {
		background: #eee;
		border: 1px solid #eee;
		border-radius: 4px;
		font-size: 14px;
		height: 30px;
		padding: 0 10px;

		body.dark & {
			background: #2e2e2e;
			border: 1px solid #2e2e2e;
			color: #ccc;
		}
	}

	button {
		background: transparent;
		border: none;
		color: #258cdb;
		font-size: 90%;

		body.dark & {
		    color: #f27e02;
		}
	}

	&.failed {
		.title {
			display: none;

			&.failed {
				display: block;
			}
		}

		.fa {
			animation: shake 0.77s linear;
		}

		@keyframes shake {
			10%, 90% { transform: translate(-2px); }
			20%, 80% { transform: translate(3px); }
			30%, 50%, 70% { transform: translate(-5px); }
			40%, 60% { transform: translate(5px); }
		}
	}
}

.update-notification, .parent-request {
	background: hsl(206, 71%, 95%);
	border-radius: 3px;
	display: flex;
	margin-bottom: 10px;
	padding: 6px 10px;

	body.dark & {
		background: hsl(30, 97%, 20%);
	}

	a {
		color: rgb(37, 140, 219);
		text-decoration: none;

		body.dark & {
			color: hsl(31, 98%, 48%);
		}
	}

	.updateNotification-close, .parentRequest-close {
		margin-left: auto;
	}
}

.settings-container {
	.popover {
	    right: -11px !important;
	    top: 14px;

    	.popover-content {
		    padding: 6px 18px;
		    text-align: left;

	    	a {
				padding: 0;
			}
		}
	}

	.controls-group {
		margin: 8px 0 14px;
	}

	.controls-input-vgroup {
		font-size: 90%;

		input {
			border: 1px solid #ccc;
			padding: 1px 4px;
		}

		input:first-child {
			border-radius: 4px 4px 0 0;
		}

		input:last-child {
			border-radius: 0 0 4px 4px;
		    margin-top: -2px;
		}
	}

	.help-text {
	    font-size: 80%;
		margin-top: 8px;
	}

	label {
		display: block;
		font-size: 90%;
		margin-bottom: 6px;
	}

	input, select {
		font-size: 90%;
		margin: 0 -6px;
		width: calc(100% + 12px);

		body.dark & { color: rgb(233, 233, 233); }
	}

	input {
		body.dark & {
			background: rgb(113, 112, 111);
			border-color: rgb(124, 122, 120);

			&::placeholder {
				color: rgb(147, 146, 145);
				opacity: 1;
			}
		}
	}

	select {
		body.dark & {
			background: rgb(106, 104, 102);
			border: 1px solid rgb(124, 122, 120);
			border-radius: 5px;
		}
	}

	.settings-save {
		text-align: center;
	}

	button {
		background: transparent;
		border: none;
		color: #258cdb;
		font-size: 90%;

		body.dark & {
		    color: #f27e02;
		}
	}
}

.stack-trace {
	cursor: pointer;

	.popover {
		cursor: default;
	}

	a {
		text-decoration: none;
	}

	.stack-frame {
		color: #000;
		padding: 6px 10px;
		text-align: left;
		word-break: break-word;

		body.dark & {
			color: rgb(178, 178, 178);
		}

		&:nth-child(even) {
			background: rgb(245, 245, 245);

			body.dark & {
				background: rgb(27, 27, 27);
			}
		}

		.stack-frame-call {
			font-size: 12px;
			padding-bottom: 3px;
		}

		.stack-frame-file {
			color: #aaa;
			font-size: 11px;
		}

		&.is-vendor {
			.stack-frame-call {
				font-size: 10px;
			}

			.stack-frame-file {
				font-size: 10px
			}
		}
	}
}

.popover {
	left: 0;
	padding-top: 20px;
	position: absolute;
	top: 100%;
	width: 300px;
	z-index: 666;

	&.right-aligned {
		left: auto;
		right: 0;

		.popover-content:before {
			left: auto;
			right: 8px;
		}

		.popover-content:after {
			left: auto;
			right: 7px;
		}
	}

	.popover-content {
		background: #fff;
		border: 1px solid rgb(209, 209, 209);
		border-radius: 5px;
		box-shadow: 0 0 4px #e5e5e5;
		max-height: 400px;
		overflow: auto;
		padding: 5px 0;
		text-align: center;
		width: 100%;

		body.dark & {
			background: rgb(31, 31, 31);
			border: 1px solid #404040;
			box-shadow: 0 0 4px #292929;
		}

		&:before, &:after {
			border-style: solid;
			content: '';
			height: 0;
			position: absolute;
			width: 0;
		}

		&:before {
			border-color: transparent transparent #fff transparent;
			border-width: 0 14px 14px 14px;
			left: 8px;
			top: 7px;
			z-index: 500;

			body.dark & {
				border-color: transparent transparent rgb(31, 31, 31) transparent;
			}
		}

		&:after {
			border-color: transparent transparent #e5e5e5 transparent;
			border-width: 0 15px 15px 15px;
			left: 7px;
			top: 5px;

			body.dark & {
				border-color: transparent transparent #292929 transparent;
			}
		}
	}
}

.popover-container {
	position: relative;
}

.hidden {
	display: none;
}

// Directives

[stupid-table] th {
	cursor: default;
}

[tab-content] {
	display: none;
}

body.dark {
	.pretty-jason {
		color: rgb(213, 213, 213);
	}

	.pretty-jason-key {
		color: rgb(227, 110, 236);
	}

	.pretty-jason-value-number {
		color: rgb(153, 127, 255);
	}

	.pretty-jason-value-string {
		color: rgb(227, 62, 58);
	}

	.pretty-jason-value-null,
	.pretty-jason-value-undefined {
		color: rgb(127, 127, 127);
	}

	.pretty-jason-value-boolean,
	.pretty-jason-value-anonymous-function,
	.pretty-jason-value-resource {
		color: rgb(130, 150, 255);
	}

	.pretty-jason-icon-closed {
		border-color: transparent transparent transparent rgb(145, 145, 145);
	}

	.pretty-jason-icon-open {
		border-color: rgb(145, 145, 145) transparent transparent transparent;
	}
}