.roster-athlete img {
    /* 3:4 aspect ratio*/
    width: 84px;
    height: 112px;
}

.roster-athlete {
    color: #4d021b;
    color: black;
    border-bottom: 1px solid #ccc
}

    .roster-athlete:nth-child(even) {
        background-color: #f2f2f2;
    }

    .roster-athlete .name {
        color: #333;
        font-size: 1.3rem;
        text-transform: uppercase;
        font-weight: bold;
    }

        .roster-athlete .name:hover {
            text-decoration: none;
        }

    .roster-athlete .details {
        font-size: 1.1rem;
    }

@media(max-width: 767px) {
    .roster-athlete .name {
        line-height: 1.4rem;
    }

    .roster-athlete .details {
        font-size: 1rem;
        text-transform: uppercase;
    }
}

.roster-athlete .no {
    background-color: #4d021b;
    color: white;
    width: 35px;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    line-height: 1.4rem;
}

.roster-athlete .position {
    font-size: .85rem;
}

.width-dynamic {
    padding: 0 3px;
}

.delete-btn {
    margin-left: auto;
    margin-right: 1rem;
    height: 2rem;
    line-height: 2rem !important;
    margin-top: 1rem;
    padding: 0 .5rem !important;
}

#selected-roster, .selected-athlete-input-group {
    padding: 2px 5px;
}

.selected-athlete-input-group {
    margin-bottom: 1rem;
    width: auto !important;
}

.clear {
    clear: both !important;
}

.athlete-bar, .athlete-no, .athlete-name {
    line-height: 4rem;
}

.athlete {
    overflow: hidden;
}

.athlete-no {
    background: white;
    color: black;
    padding: 0 1rem;
    font-weight: bold;
    outline: 2px inset #4d021a;
    outline-offset: -2px;
}

.athlete-name {
    text-transform: uppercase;
    margin-left: 1rem;
}

.athlete-bar {
    background-color: #4d021b;
    width: 100%;
    color: white;
    font-size: 1.8rem;
    outline: 2px solid #4d021b;
    outline-offset: 2px;
    margin-top: 1.2rem;
}

    .athlete-bar > div {
        min-height: 4rem;
    }

.athlete-img {
    float: left;
    z-index: 1;
    position: relative;
    margin: -0.8rem 0 0 0.5rem;
    max-width: 20%;
}

.athlete li {
    padding: 0 .2rem;
}

.athlete ul {
    list-style-type: none;
    padding: .4rem;
    margin: 0;
}

@media (max-width: 991px) {
    .athlete-bar {
        font-size: 1.5rem;
    }
}

@media (max-width: 767px) {
    .athlete ul {
        padding: 0;
        margin-top: .3rem;
        clear: left;
    }

    .athlete-name {
        line-height: 2rem;
        margin-left: .5rem;
    }

    .athlete-no {
        padding: 0 .5rem;
    }

    .athlete-img {
        max-width: 25%;
    }
}

.athlete dl, .athlete dd {
    margin-bottom: 0;
}

.athlete dl {
    padding: .3rem;
    border-bottom: 1px solid #cccccc;
}

.athlete dt {
    text-transform: uppercase;
    margin-right: .5rem;
}

    .athlete dt::after {
        content: ':';
    }

a:hover {
    text-decoration: none !important;
}

.photo-upload {
    width: 84px;
    height: 112px;
    opacity: 0;
}

.photo-upload-container {
    display: inline-block;
    background-size: cover;
    position: relative;
    height: 112px;
    width: 84px;
    text-align: center;
    font-size: .8rem;
}

    .photo-upload-container .spinner-border {
        position: absolute;
        left: calc(50% - 1rem);
        top: calc(50% - 1rem);
        display: none;
    }

li.col-12.col-md-6 {
    padding: 0 .2rem;
}

.athlete .form-control {
    height: 1.5rem;
    color: black;
    padding: 0 .375rem;
}

.athlete dd {
    flex-grow: 1;
}


.collapsed .collapsible {
    display: none !important;
}

.athlete .collapsed hr {
    margin: .2rem 0;
}

.errors {
    color: red;
}