/* Body */
body {
	overflow-x: hidden;
	overflow-y: auto;
	text-align: left;
	color: #000;
	background: #EBEFF3;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: 1.5;
}
p {
	margin: 0;
}
p:not(:first-child) {
	margin-top: 1em;
}
a {
	text-decoration: none;
	color: #728CA5;
}
img {
	max-width: 100%;
}

/* Login */
section.login {
	display: flex;
	display: -ms-flexbox;
	display: flex;
	overflow: hidden;
	flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	align-items: center;
	min-height: 100vh;
	text-align: center;
}
section.login > .wrapper {
	display: block;
	width: 100%;
	height: auto;
	padding: 50px 25px;
}
section.login .login-logo {
	width: 100%;
	max-width: 232px;
	margin: 0 auto;
	padding: 15px;
	border: 1px solid #728CA5;
}
section.login .login-logo > img {
	width: 100%;
	height: auto;
}
section.login .login-form {
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	padding: 45px;
	background: #FFF;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
}
section.login .login-form:not(:first-child) {
	margin-top: 50px;
}
section.login .login-form .form-input {
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 0 15px;
	transition: box-shadow 200ms ease-in-out;
	color: #000;
	border: none;
	border-radius: 0;
	outline: none;
	background: #F2F2F2;
	font-family: inherit;
	font-size: 14px;
	font-size: .875rem;
	line-height: 1.5;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
section.login .login-form .form-input:focus {
	color: #000;
	outline: none;
	background-color: #F2F2F2;
	box-shadow: 0 0 0 2px rgba(0, 123, 255, .25), inset 0 0 0 1px #80BDFF;
}
section.login .login-form .form-input:not(:first-child) {
	margin-top: 15px;
}
section.login .login-form .form-submit {
	display: block;
	width: 100%;
	padding: 0 15px;
	cursor: pointer;
	user-select: none;
	transition: background-color 200ms ease-in-out;
	text-align: center;
	text-decoration: none !important;
	color: #FFF;
	border: none;
	border-radius: 0;
	outline: none;
	background: #728CA5;
	font-size: 14px;
	font-size: .875rem;
	line-height: 45px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
section.login .login-form .form-submit:hover {
	background-color: #506C88;
}
section.login .login-form .form-submit:not(:first-child) {
	margin-top: 15px;
}

/* Header */
section.header {
	overflow: hidden;
	padding: 15px;
	background: #728CA5;
}
section.header .header-logo {
	max-width: 50px;
	margin: 0 auto;
}
section.header .header-logo > img {
	width: 100%;
}

/* Wrapper */
section.wrapper {
	overflow: hidden;
	max-width: 1050px;
	margin: 0 auto;
	padding: 50px 25px;
}

/* Table */
.table-button {
	width: 100%;
	max-width: 100px;
	margin-left: auto;
}
table.table {
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
}
table.table:not(:first-child) {
	margin-top: 25px;
}
table.table td.center {
	text-align: center;
}
table.table tbody td {
	background: #FFF;
}
table.table i.fas {
	min-width: 24px;
	cursor: pointer;
	transition: color 200ms ease-in-out;
	font-size: 16px;
	line-height: 24px;
}
table.table i.fas.fa-play {
	color: #81C784;
}
table.table i.fas.fa-play:hover {
	color: #66BB6A;
}
table.table i.fas.fa-pause {
	color: #E57373;
}
table.table i.fas.fa-pause:hover {
	color: #EF5350;
}
table.table i.fas.fa-edit,
table.table i.fas.fa-trash-alt {
	color: #728CA5;
}
table.table i.fas.fa-edit:hover,
table.table i.fas.fa-trash-alt:hover {
	color: #506C88;
}

/* Form */
.form-cbox {
	padding: 25px;
	background: #FFF;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
}
.form-group.small-width {
	max-width: 600px;
}
.form-row > .col.dash {
	max-width: 30px;
	text-align: center;
	line-height: 38px;
}
.form-submit {
	width: 100%;
	max-width: 100px;
	margin-left: auto;
}
.form-submit:not(:first-child) {
	margin-top: 25px;
}
.input-group-dash {
	display: block;
	text-align: center;
	line-height: 38px;
}


body > .header {
	line-height: 32px;
	background: #203540;
	color: #FFF;
	padding: 16px 0;
	z-index: 100;
}
body > .header > div > .logo {
	float: left;
	display: block;
	color: #FFF;
	font-size: 24px;
	text-decoration: none;
}
body > .header > div > .logo > i {
	font-weight: 300;
}
body > .header > div > .navi {
	float: right;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
body > .header > div > .navi > .tab {
	display: inline-block;
	vertical-align: top;
}
body > .header > div > .navi > .tab > a {
	color: #FFF;
	font-size: 14px;
	text-decoration: none;
	border-bottom: 4px solid transparent;
	padding: 16px 24px 12px;
	margin: -16px 0;
	transition: background 240ms cubic-bezier(.4, 0, .6, 1);
}
body > .header > div > .navi > .tab > a:hover,
body > .header > div > .navi > .icon > a:hover {
	background: #2E424D;
}
body > .header > div > .navi > .tab > a.current {
	border-bottom-color: #2996CC;
}
body > .header > div > .navi > .icon {
	display: inline-block;
}
body > .header > div > .navi > .icon > a {
	font-size: 14px;
	text-decoration: none;
	padding: 16px 24px;
	margin: -16px 0;
	transition: background 240ms cubic-bezier(.4, 0, .6, 1);
}
body > .header > div > .navi > .icon > a > i:before {
	content: "\f0c1";
}
body > .header > div > .navi > .icon > a.cog > i:before {
	content: "\f085";
}
body > .header > div > .navi > .icon > a.user > i:before {
	content: "\f007";
}
body > .header > .container {
	max-width: 1248px;
	padding: 0 24px;
	margin: 0 auto;
}
body > .header > .container:after {
    content: "";
    display: block;
    clear: both;
}