body {
	background: #222d32;
	font-family: "Roboto", sans-serif;
}

.login-box {
	height: auto;
	background: #1a2226;
	text-align: center;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.login-key {
	height: 100px;
	font-size: 80px;
	line-height: 100px;
	background: -webkit-linear-gradient(#27ef9f, #0db8de);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.login-title {
	margin-top: 15px;
	text-align: center;
	font-size: 30px;
	letter-spacing: 2px;
	margin-top: 15px;
	font-weight: bold;
	color: #ecf0f5;
}

.login-form {
	margin-top: 25px;
	text-align: left;
}

input[type="text"],
input[type="number"],
input[type="password"],
select[id="joinType"],
select[id="mediaDirection"] {
	background-color: #1a2226;
	border: none;
	border-bottom: 2px solid #0db8de;
	border-top: 0px;
	border-radius: 0px;
	font-weight: bold;
	outline: 0;
	margin-bottom: 20px;
	padding-left: 0px;
	color: #ecf0f5;
	padding-left: 10px;
	padding-right: 10px;
}

input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
select[id="joinType"]:disabled {
	background-color: #535f6b;
}

.form-group {
	margin-bottom: 40px;
	outline: 0px;
}

.form-control:focus {
	border-color: inherit;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-bottom: 2px solid #0db8de;
	outline: 0;
	background-color: #1a2226;
	color: #ecf0f5;
}

input:focus {
	outline: none;
	box-shadow: 0 0 0;
}

label {
	margin-bottom: 0px;
}

.form-control-label,
th,
td {
	font-size: 16px;
	color: #dadada;
	font-weight: bold;
	letter-spacing: 1px;
}

.btn-outline-primary {
	border-color: #0db8de;
	color: #0db8de;
	border-radius: 0px;
	font-weight: bold;
	letter-spacing: 1px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-outline-primary:hover {
	background-color: #0db8de;
	right: 0px;
}

.login-btm {
	text-align: center;
}

.login-button {
	padding-right: 0px;
	margin-bottom: 25px;
}

.login-text {
	text-align: left;
	padding-left: 0px;
	color: #a2a4a4;
}

.loginbttm {
	padding: 0px;
}

.advanced-options-trigger {
	color: #dadada;
	text-decoration: underline;
	cursor: pointer;
}

.advanced {
	display: none;
}

.advanced.visible {
	display: block;
}