.panel.active .content.optional, /* optional panel on default */
.panel.active.optional .content { /* default panel when optional should be displayed */
    display: none;
}

.panel.active.optional .content.optional { /* optional panel on optional display */
    display: block;
}

@media (max-width: 480px) {
    #panels .panel.active .content.optional, /* optional panel when menu is opened */
    #panels.opened .panel.active .content.optional, /* optional panel on default */
    #panels.opened .panel.active.optional .content { /* default panel when optional should be displayed */
        display: none;
    }

    #panels.opened .panel.active.optional .content.optional { /* optional panel on optional display */
        display: block;
    }
}


.content.optional {
    padding: 0 .5em;
}

@media (max-width: 480px) {
    .content.optional {
        padding: 0;
    }
}


.content.optional.loading {
    background: rgba(0,0,0,.15) url("../img/ajax-loader-big.ad6911b3613e.gif") no-repeat center center;
    min-height: 10em;
}
    .content.optional.loading * {
        display: none !important;
    }

.profile-back,
#charity-back {
    display: block;
    margin-top: .5em;
    padding: .2em 0;
    border: 1px solid var(--race-panel-border);

    background: rgba(255,255,255,.8);
    text-decoration: none;

    cursor: pointer;
    text-align: center;

    -webkit-transition: background .6s;
            transition: background .6s;
}
    .profile-back:hover,
    #charity-back:hover {
        background: rgba(255,255,255,.6);
        opacity: .7;

        -webkit-transition: background .15s;
                transition: background .15s;
    }


#user-info,
.group-recruit,
.user-profile-info,
.group-info,
.team-info {
    margin: .5em 0;
    padding: 1em 1em 1.5em;

    background: rgba(255, 255, 255, .8);
    color: #5c626d;
}
.group-recruit {
    padding-bottom: 0;
}
.group-recruit h4 {
    margin: 0;
}
    .user-profile-info.has_bio,
    #user-info.has_bio {
        padding: 1em;
    }

    .team-info {
        padding: .3em 0 0;
    }

    .user_data_container {
        float: left;
        width: 190px;
    }

    .team-pic {
        height: 70px;
        width: 70px;
        margin: .7em 1em 1em;
        float: left;
        overflow: hidden;
    }
    .user-pic,
    #user-pic {
        height: 70px;
        width: 70px;
        margin-bottom: 1em;
        margin-right: 1em;
        float: left;
        overflow: hidden;
    }
        .team-pic img,
        .user-pic img,
        #user-pic img {
            background: #fff;

            display: block;
            height: 100%;
            width: 100%;
        }
            .team-info.no-pic .team-pic img {
                background: #666 url("../img/runners.19d20d9d6b1f.png") no-repeat center center;
                background-size: 90%;
            }
            .user-profile-info.no-pic .user-pic img,
            #user-info.no-pic .user-pic img,
            .user-profile-info.no-pic #user-pic img,
            #user-info.no-pic #user-pic img {
                background: #666 url("../img/runner.a00662b56e81.png") no-repeat center center;
            }

    #user-info .user-name,
    .user-profile-info .user-name,
    .team-info .team-name,
    .group-info .group-name,
    .group-info .group-data,
    .user-profile-info .user-nick,
    #user-info .user-nick {
        margin: .4em 0 0;

        font-weight: normal;
        line-height: 1em;
    }
    .group-info .group-data {
        white-space: pre;
    }
    .team-info .team-name,
    .group-info .group-name,
    .user-profile-info .user-nick,
    #user-info .user-nick {
        font-size: 1.6em;
    }
    .group-info .group-note {
        margin-top: 1em;
        display: none;
    }
    .user-profile-info .user-raised-amount,
    #user-info .user-raised-amount,
    .team-info .team-raised-amount {
        clear: both;
        margin-bottom: 1em;
        text-align: center;
    }
        .user-profile-info .user-raised-amount a,
        #user-info .user-raised-amount a,
        .team-info .team-raised-amount a {
            text-decoration: none;
        }
    #user-since {
        padding-left: .1em;

        font-size: .9em;
    }
        #since-date {
            text-transform: capitalize;
        }

    .team-info .team-name {
        margin: .2em 0;
        text-align: left;
    }

    .team-info .team-spots-left {
        text-align: left;
        margin: 0 auto;
    }

    #race-signup #form_message_team_name {
       display: none;
    }

    .team-info .team-raised-amount h3 {
        margin: 0 0 .4em 0;
        text-align: center;
    }

    .runnerlist.team-runners {
        clear: both;
        margin: 0;
        padding: .5em;

        border: none;
    }

    .team-info .affiliations,
    .team-info .bio {
        font-size: .9em;
        margin: .5em 1em;
    }
    .user-profile-info .affiliations,
    .user-profile-info .bio,
    #user-info .affiliations,
    #user-info .bio {
        display: block;
        margin: .5em 0 0;

        font-size: .9em;

        clear: both;
        overflow: hidden;
    }
        .user-profile-info .affiliations.see-more,
        #user-info .affiliations.see-more {
            max-height: 3.9em;
        }

        .user-profile-info .bio.see-more,
        #user-info .bio.see-more {
            max-height: 6.5em;
        }

        .user-profile-info .affiliations.see-more:before,
        #user-info .affiliations.see-more:before {
            content: '...see more';
            position: relative;
            float: right;
            cursor: pointer;
            margin-top: 3.1em;
            line-height: 1.6em;
            color: #177fa5;
            font-size: .85em;
            font-weight: bold;
            display: block;
        }

        .user-profile-info .bio.see-more:before,
        #user-info .bio.see-more:before {
            content: '...see more';
            position: relative;
            float: right;
            cursor: pointer;
            margin-top: 6.3em;
            line-height: 1.6em;
            color: #177fa5;
            font-size: .85em;
            font-weight: bold;
            display: block;
        }

        .user-profile-info.has_bio .bio,
        #user-info.has_bio .bio {
            display: block;
        }

    .team-profile-link,
    .edit {
        color: #177fa5;
        text-decoration: none;
        float: right;
        font-size: .85em;
        margin-top: 10px;
    }
        .team-profile-link:hover,
        .edit:hover {
            opacity: 0.7;
        }

    .team-link,
    .team-spectators-link {
        color: #177fa5;
        text-decoration: none;
        font-size: .85em;
        margin-top: 10px;
    }
        .team-link:hover,
        .team-spectators-link:hover {
            opacity: 0.7;
        }

    .team-pic img,
    .team-profile-link,
    .user-pic img,
    #user-pic img,
    .edit {
        -webkit-transition: background-color .6s;
                transition: background-color .6s;
    }
        .team-pic img:hover,
        .team-profile-link:hover,
        .user-pic img:hover,
        #user-pic img:hover,
        .edit:hover {
            -webkit-transition: background-color .15s;
                    transition: background-color .15s;
        }

    .team-profile-link.loading,
    .edit.loading {
        background: #888 url("../img/ajax-loader-small.ad7910a0d856.gif") no-repeat center center;
        color: transparent;

        cursor: default;
    }

.group-info {
    text-align: center;
}

.group-info div.group-add-button-container {
    margin-top: 1em;
}

    .group-info .group-add-button {
        display: inline-block;
        padding: .25em 1em .35em;
        background: var(--race-accent);
        border: none;
        border-radius: 1.5em;
        color: #fff;
        text-transform: none;
        text-decoration: none;
        font-size: 1.3em;
    }

.group-log {
    display: none;
    text-align: left;
    background-color: white;
    padding: 0.5em;
}

.edit-message {
    margin-top: .75em;

    color: rgb(43, 167, 63);
    font-size: .9em;

    display: block;
}

.team-recruit {
    margin: .5em .5em;
    padding: .5em .5em;
    text-align: center;
}
    .team-recruit h4 {
        margin: .3em 0 .5em;
        font-size: 1.1em;
    }

.group-mileage-log,
.team-mileage-log {
    margin: .5em 0;
    padding: 1em 0 0;

    color: #5c626d;
}

    .group-mileage-log h4,
    .team-mileage-log h4 {
        margin-top: 0;
        text-align:center;
    }

    .group-mileage-log .runnerlist,
    .team-mileage-log .runnerlist {
        border:none;
        margin: 0;
    }

.user-inactive {
    margin-bottom: 4em;
}

.user-stats,
#user-stats {
    margin: 0 0 .5em;
    overflow: hidden;
}
    .user-stats li,
    #user-stats li {
        width: 33.3%;
        padding-bottom: .4em;

        color: #fff;
        text-shadow: 0 0 2px rgba(0,0,0,.3);

        font-size: .8em;

        float: left;
        text-align: center;
        text-transform: uppercase;
    }
        .user-stats li strong,
        #user-stats li strong {
            display: block;

            font-size: 1.5em;
            line-height: 1.8em;
        }

    .user-stats li:nth-child(1),
    #user-stats li:nth-child(1) { background-color: #41b8d3 }
    .user-stats li:nth-child(2),
    #user-stats li:nth-child(2) { background-color: #e77a3b }
    .user-stats li:nth-child(3),
    #user-stats li:nth-child(3) { background-color: #3dbca3 }

.user-log,
#user-log {
    display: none;
    margin: 0 0 .5em;

    width: 100%;
}
    .user-inactive h4,
    .user-log h4,
    #user-log h4 {
        margin: .3em 0 0 0;
        font-size: 1.1em;
        text-align: center;
    }

    .user-log #activity,
    #user-log #activity {
        margin: 0.5em 0;
    }

.captain-marker {
    position: absolute;
    color: yellow;
    text-align: right;
    width: 53px;
    height: 50px;
    line-height: 1;
}