* {
    font-family: 'Roboto', Arial, sans-serif;
}

body {
    background-color: rgb(16,16,48);
    color: white;
}

a.glyphicon:before{
    margin-right:2px;
}

a, form button {
    color:white;
    text-decoration:none;
    font-weight:bold;
    border-radius : 5px;
    font-size: 12px;
    background-color: #800080;
    border:1px #922292 solid;
    padding:4px;
    margin:1px;
    cursor:pointer;
}
a:hover, form button:hover {
    background-color: #922292;
    text-decoration:none;
    color:white;
    border:1px white solid;
}
a.activate {
    background: none;
    color: #DC143C;
    border: 0;
    margin: 2px;
}
a.unactivate  {
    background: none;
    color: #32CD32;
    border: 0;
    margin: 2px;
}
a.activate:hover, a.unactivate:hover {
    background: none;
    color: white;
}

a.menu {
   background-color: #333; 
   margin-top:12px;
   font-size:12px;
}
.full-list-item {
    padding:3px;
    margin:10px;
}
.list-item {
    border:1px #333 solid;
    position: relative;
}

.list-item.inactive {
    opacity: 0.8;
}

.list-item h2 {
    text-align: center;
}
.list-item aside {
    position: absolute;
    top: 5px;
    right: 5px;
}
.list-item p {
    width: 100%;
    font-size: small;
    text-align: center;
}
.list-item ul {
    padding: 50px;
}
.list-item {    
    background: black;
    width:450px;
    padding:3px;
    margin:1px;
    margin-right:10px;
    color: white;
}

.player-item {
    margin-left:14px;
    margin-bottom:10px;
}
ul {
    list-style-type: none;
   
}
ul li {
    width:100%;
    border-bottom:1px gray solid;
    padding:4px;
    margin:4px;
    display:flex;
    flex-direction: row;
    justify-content: space-between
}

ul li.absent {
    opacity: 0.5;
}

ul li .left, ul li .right, ul li .center {
    display: flex;
    flex-direction: row;
    align-items: center;
}
ul li .left {
    justify-content: flex-start ;
    flex: 1;
}
ul li .left b {
    width:30px;
    text-align: right;
    font-size: small;
}
ul li .center {
    justify-content: center;
    flex: 2;
}
ul li .right {
    justify-content: flex-end;
    flex: 2;
}
ul.wide li {
    width : 1100px;
    font-size: small;
}
ul.wide li b {
    font-size:smaller;
    color: #999;
}
form {
    border:1px white solid;
    background-color: #111;
    width:400px;
    padding:5px 5px 55px 5px;
    margin:10px 0;
    position : relative
}
form label {
    width:120px;
    display:inline-block;
    padding:3px;
    margin:1px;
}
form input, form textarea {
    width :250px;
    display:inline-block;
    padding:3px;
    margin:3px;
}
form button {
    position: absolute;
    bottom: 5px;
    right: 5px;
}
#form div {
    position: relative;
    padding-bottom:20px;
}
#form ul {
    position: absolute;
    bottom:5px;
    right: 12px;
    padding:0;
    margin: 0;
    color: red;
}
#form ul li {
    border: none;
    padding:0;
    margin: 0;
    font-size: small;
    font-weight: bold;
    text-align: right;
}
div.lists {
    display:flex;
    flex-direction: row;
    justify-content: start;
    margin-top:10px;
}
#filter {
    border: red;
}
#filter label {
    display: inline-block;
    width:120px;
    border-bottom: 1px #333 solid;
    padding-bottom: 3px;
}
.hidden {
    display:none;
}
.not-selected {
    display:none;
}