
#view-lanes {
    float: left;
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

td {
    padding: 8px;
    display: table-cell;
    text-align: left;
    vertical-align: top;
    border-bottom: solid 1px #d1af83;
}

td a {
    text-decoration: none;
}

.name[type="checkbox"] {
    opacity: 0;
    position: absolute;
    left: -9999px;
}

label.name-label-none {
    cursor: pointer;
    background-color: gainsboro;
    color: #0a0000;
    border-radius: 5px;
    padding: 5px;
}

.name[type="checkbox"]:checked ~ label.name-label-none {
    cursor: pointer;
    background-color: #d1af83;
    color: #f4f5f7;
    border-radius: 5px;
    padding: 5px;
}

.name[type="checkbox"]:checked ~ label.name-label-blue {
    cursor: pointer;
    background-color: #839eca!important;
    color: #f4f5f7;
    border-radius: 5px;
    padding: 5px;
}

.name[type="checkbox"]:checked ~ label.name-label-red {
    cursor: pointer;
    background-color: #d06e62!important;
    color: #f4f5f7;
    border-radius: 5px;
    padding: 5px;
}

.name[type="checkbox"]:checked ~ label.name-label-green {
    cursor: pointer;
    background-color: #86bc69!important;
    color: #f4f5f7;
    border-radius: 5px;
    padding: 5px;
}

.startGame,
.importGame {
    grid-column: 2;
    text-align: center;
    padding: 5px;
    cursor: pointer;
}

input#startGame,
input#importGame {
    opacity: 0;
    position: absolute;
    left: -9999px;
}

.fa-plus {
    background-color: #f4f5f7;
    border-radius: 5px;
    padding: 5px;
    margin-right: 5px;
}

.fa-minus {
    background-color: #f4f5f7;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
}

.name-span {
    margin: 1px;
}

.lane-num a {
    color: #d1af83;
}

.lane-num {    
    min-width: 75px;
}

input[name="checkbox"] {
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}

.grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 4px;
    min-width: 250px;
}

.label {
    color: #d1af83;
    grid-column: 1;
    text-align: right;
}

button#import {
    color: #d1af83;
    background-color: #3956bd;
    grid-column: 2;
}

button#match {
    color: #d1af83;
    background-color: #3956bd;    
    grid-column: 2;
}

.team-players {
    padding-top: 1px;
    display: grid;
    grid-template-columns: auto 110px;
}

.team-player {
    background-color: lightgray;
    border-radius: 5px;
    padding: 5px;
    margin: 1px;
    grid-column: 1;
}

.player-hcp {
    padding: 5px;
    grid-column: 2;
    text-align: right;
    cursor: pointer;
}

.hcp {
    width: 40px;
    text-align: center;
    border-width: 0px;
}