html,
body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}

body {
	font-family: "PT Mono", "Inconsolata", Courier;
	font-size: 1.4rem;
	background-color: #222;
	color: #f7f7f7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 250%;
	/*border-bottom: 1px dashed #484848;*/
}

a {
	color: #1c7bff;
}

a:visited {
	color: #971cff;
}

input,
textarea {
	font-family: "PT Mono", "Inconsolata", Courier;
	padding: 0.5rem;
}

.btn-icon {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}

.btn-cast {
	width: 4.4rem;
	height: 3.6rem;
	background-image: url("../images/icon-cast-white-44x36.png");
	background-image: url("../images/icon-cast-white-44x36.svg"), none;
	opacity: 0.4;
}

.btn-cast.available {
	opacity: 1;
}

.btn-cast.active {
	background-image: url("../images/icon-cast-connected-white-44x36.png");
	background-image: url("../images/icon-cast-connected-white-44x36.svg"), none;
}

.btn-play-pause {
	width: 4rem;
	height: 5rem;
	background-image: url("../images/icon-play-white-40x50.png");
	background-image: url("../images/icon-play-white-40x50.svg"), none;
}

.btn-play-pause.playing {
	background-image: url("../images/icon-pause-white-40x50.png");
	background-image: url("../images/icon-pause-white-40x50.svg"), none;
}

.site-header {
	overflow: hidden;
	padding: 3rem;
}

.site-header h1 {
	float: left;
}

.site-header .cast-button {
	float: right;
}

.site-footer {
	padding: 3rem;
}

.sender {
	padding: 3rem;
}

.sender label {
	display: block;
	margin-bottom: 0.5rem;
}

.sender input {
	width: 100%;
	margin-bottom: 1rem;
}

.media-controls {
	overflow: hidden;
	opacity: 0.4;
	padding: 3rem;
}

.media-controls.active {
	opacity: 1;
}

.media-controls .btn-play-pause {
	float: left;
}

.media-controls .media-time {
	float: right;
	font-size: 4.8rem;
}

.logs {
	padding: 3rem;
}

.logs .message-logs {
	width: 100%;
	min-height: 50rem;
}

.notes {

}