@import url('https://fonts.googleapis.com/css?family=Syncopate|Unica+One');
@import url(http://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic,900,900italic,300italic,300,100italic,100);

body {
	font-family: 'Roboto', sans-serif;
	display: none;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}


#style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 15px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

/*
 *  STYLE 2
 */

#style-2::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-2::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}

.container {
	position: absolute;
	background-color: rgba(23, 29, 38, 1);
	width: 50%;
	top: 25%;
	left: 25%;
    height: 360px;

}

.header {
  background-color: rgba(67, 137, 249, 1);
  font-family: 'Unica One', cursive;
  padding-top: 5px;
  height: 30px;
  width: 100%;
  position: relative;
}

.header h1 {
	margin: 0;
	font-size: 1.25rem;
	color: #fff;
	text-align: center;
	font-weight: normal;
}

.body {
	padding: 10px;
	color: #fff;

}



.section {
	display: flex;
	flex-wrap: wrap;
}

.section.characters .character:first-child {
	margin-left: 18px;
}

.section.characters .character {
	width: 30%;
	position: relative;
	height: 260px;
	border: 2px solid #2b2e39;
	border-radius: 5px;
	text-align: center;
	margin-left: 8px;
}

.section.characters .character.selected {
	border-color: #308bcd;
}

.section.characters .character span {
	color: #2f8135;
}

.section.characters .character .new {
	font-size: 7rem;
	margin: 0;
	color: #2b2e39;
}

.section.characters .character h3:first-child {
	padding-top: 8px;
}

.section.characters .character h3 {
	margin: 0;
	color: #6b7186;
	font-size: 0.9rem;
	text-align: left;
	padding: 11px 20px;
}

.section.characters .character h4 {
	margin: 0;
	color: #54596a
}

.section.characters .character b {
	margin: 0;
	color: #36719c;

}

.create {
	display: none;
}

.form-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 5px;
}

label {
	padding-left: 10px;
	min-width: 100px;
}

input[type=text] {
	flex: 1;
	flex-grow: 1;
	color: #fff;
	background: #363a48;
	border: 1px solid #2b2e39;
	padding: 10px;
	outline: 0;
	width: auto;
}

.option {
	flex: 1;
	flex-grow: 1;
	color: #fff;
	background: #363a48;
	border: 1px solid #2b2e39;
	outline: 0;
	width: auto;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
}

.option p {
	display: inline-block;
	width: 49.7%;
	text-align: center;
	margin: -1.5px 0;
	padding: 10px 0;
	border-bottom: 3px solid transparent;
}

.option p.selected {
	border-color: #308bcd;
}

.footer {
	background-color: rgba(40, 50, 66, 1);
	padding-top: 15px;
	text-align: right;
    position: absolute;
	height: 30px;
    width: 100%;
	bottom: 0%;
}

.footer button {
	padding: 8px 15px;
	background: #308bcd;
	border: 0;
	color: #fff;
	border-radius: 0px;
	outline: 0;
	position: relative;
	bottom: 25%;
	right: 20px;
}

.footer a[href="http://login/disconnect"] button {
	background-color: rgba(168, 52, 43, 1);
	padding: 8px 15px;
	color: white;
	float: left;
	border-width: 0px;
	float: left;
	left: 20px;
}

.footer a[href="http://login/list"] button {
	background-color: #002e4d;
	color: #626777;
	float: left;
	left: 20px;
}

.footer button.disabled {
	 background-color: #002e4d;
	color: #626777;
}

.footer button.back {
	background-color: #002e4d;
	float: left;
}

h3{
    text-align: center;
}

h5{
    position: relative;
    right: -40px;
    color: aqua;
}

li{
    font-size: 12px;
    color: #6b7186;
}