@font-face {
	font-family: "source-sans";
	src: url(SourceSansPro-Regular.otf) format('opentype');
	font-weight: normal;
}

@font-face {
	font-family: "source-sans";
	src: url(SourceSansPro-Semibold.otf) format('opentype');
	font-weight: 500;
}

@font-face {
	font-family: "source-sans";
	src: url(SourceSansPro-Bold.otf) format('opentype');
	font-weight: bold;
}

html {
	font-size: 62.5%;/* 10px */
}

body {
	font-family: "source-sans", Arial, Helvetica, sans-serif;
	font-size: 1.6rem;
	line-height: 1.5;
	color: #333;
}

h1, .h1 {
	font-size: 3.2rem;
	font-weight: bold;
}

h2, .h2 {
	font-size: 2.4rem;
	font-weight: bold;
}

h3, .h3 {
	font-size: 1.8rem;
	font-weight: bold;
}

a {
	color: cornflowerblue;
}

a:hover,
a:focus {
	text-decoration: none;
}

button:not([disabled]) {
	cursor: pointer;
}

.button[disabled] {
	opacity: 0.5;
}

p {
	margin: 0 0 1em;
}

p:last-child {
	margin-bottom: 0;
}

ul {
	padding: 0;
}

form {
	--label-width: 10em;
	--label-pr: 1em;
	transition: opacity 200ms ease-in-out;
}

form.is-disabled {
	opacity: 0.2;
	pointer-events: none;
}

fieldset {
	margin-bottom: 2em;
	border: none;
	padding: 1em;
}

legend {
	padding: 0;
	font-weight: bold;
}

label {
	display: block;
	font-weight: bold;
}

input,
textarea,
select,
option {
	background-color: transparent;
	vertical-align: middle;
	font: inherit;
	line-height: inherit;
}

input[type="text"],
textarea,
select {
	margin-bottom: 0.6em;
	padding: 0 0 0.1em;
	border: none;
	border-bottom: 1px solid;
	width: 58ch;
	width: 36ch;
	font-variant-numeric: tabular-nums slashed-zero;
}

input[type="text"][readonly] {
	border-bottom: 1px dotted;
}

input.input--write-value {
	width: 24ch;
}

select {
	margin: 0;
	width: auto;
}

::placeholder {
	/* color: yellow; */
	font-style: italic;
}

.o-content-width {
	margin: 2em auto;
	max-width: 66em;
}

.connection-details {
	margin-bottom: 1em;
	padding: 1em;
	background-color: rgba(204, 0, 0, 0.2);
}

.connection-details--is-connected {
	background-color: rgba(0, 128, 0, 0.2);
}

.connection-details__device-name {
	font-weight: bold;
}

.btn {
	color: white;
	border: none;
	padding: 0.3em 1em;
	background: cornflowerblue;
	font: inherit;
}

.btn:not([disabled]):hover,
.btn:not([disabled]):focus {
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.btn[disabled] {
	opacity: 0.3;
}

.btn--connect {
	background: green;
}

.btn--disconnect {
	background: #c00;
}

.form-list {
	list-style: none;
}

.form-row {
	padding: 0.5em 0 0.5em calc(var(--label-width) + var(--label-pr));
}

.explanation,
.weak {
	color: #666;
	font-weight: normal;
	font-size: smaller;
}

.explanation a,
.weak a {
	color: cornflowerblue;
}

.u-list--bare {
	list-style: none;
}

/*-- Start filters --*/

	.device-presets-picker {
		padding-bottom: 1em;
	}

	.device-presets-picker label {
		display: inline-block;
		font-weight: normal;
	}

	.connection-options,
	.service-row {
		background: #f8f8f8;
		padding: 1em;
	}

	.request-device-options {
		display: flex;
	}

	.service-row {
		margin: 0 0 1em;
	}

	.connection-option {
		margin: 0 2em 2em 0;
		width: 36ch;
	}

	.optional-services {
		--lh: 1.5em;
		padding-top: 2px;
		min-height: 4.3em;
		background: repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent calc(var(--lh) - 1px),
			#999 0,
			transparent var(--lh)
		);
	}

/*-- Start characteristic --*/

	.characteristics-list {
		margin-top: 2em;
	}

	.characteristic {
		margin: 0 0 2em;
	}

	.characteristic__controls {
		display: flex;
	}

	.characteristic__control {
		margin-right: 2em;
	}

	.value-radix {
		margin: -0.5em 0 0.6em;
	}

	.value-radix input {
		margin: 0;
		margin-right: 0.3em;
	}

	.value-radix__label {
		display: inline-block;
		margin-right: 1em;
		font-weight: normal;
		vertical-align: middle;
	}


	
	@media screen and (max-width: 900px) {
		.request-device-options,
		.characteristic__controls {
			flex-direction: column;
		}
	}

/*-- End characteristic --*/

.input--uuid {
	/* width: 38ch; */
}

.uuid {
	font-variant-numeric: tabular-nums slashed-zero;
}

.clone-src {
	/* display: none; */
}