@import "compass";
.team {
    vertical-align: top;
    padding: 1em;
    > label {
      display: block;
      font-weight: bold;
      text-align: center;
      margin-bottom: .25em;
    }
    ul {
       list-style: none;
       label {
          display: block;
          min-width: 8em;
          padding: .5em .5em .5em .5em;
          cursor: pointer;
       }
    }
}

.team .grade-12 label:before {
    content: "12";
    padding-right: 4px;
}
.team .grade-11 label:before {
    content: "11";
    padding-right: 4px;
}
.team .grade-10 label:before {
    content: "10";
    padding-right: 4px;
}
.team .grade-9 label:before {
    content: "9";
    padding-right: 12px;
}
.team .grade-8 label:before {
    content: "8";
    padding-right: 12px;
}
.team .grade-7 label:before {
    content: "7";
    padding-right: 12px;
}
.team .grade-6 label:before {
    content: "6";
    padding-right: 12px;
}
.team ul label {
    display: block;
    min-width: 8em;
    padding: .5em .5em .5em .5em;
    cursor: pointer;
}
.team .grade-12 label:before {
    content: "12";
    padding-right: 4px;
}
.team .grade-11 label:before {
    content: "11";
    padding-right: 4px;
}
.team .grade-10 label:before {
    content: "10";
    padding-right: 4px;
}
.team .grade-9 label:before {
    content: "9";
    padding-right: 12px;
}
.team .grade-8 label:before {
    content: "8";
    padding-right: 12px;
}
.team .grade-7 label:before {
    content: "7";
    padding-right: 12px;
}
.team .grade-6 label:before {
    content: "6";
    padding-right: 12px;
}
.player {
    margin-bottom: .5em;
    background: linear-gradient(top,  #fff,  #eee);
    border-radius: 3px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.22);
}
.player > label {
    border-radius: 3px;
}
.grade-12 > label {
    color: #4a47ff;
}
.grade-11 > label {
    color: #b60000;
}
.grade-10 > label {
    color: #672491;
}
.grade-9 > label {
    color: #115a5d;
}
.grade-8 > label {
    color: #c25b0f;
}
.grade-7 > label {
    color: #2e9ea8;
}
.grade-6 > label {
    color: #b050ad;
}
.beingDragged {
    height: 30px;
    margin-bottom: .5em;
    border: 2px dotted #ccc;
}