#church-wrap .church-name {
    font-size: 38px;
    font-weight: 600;
    margin-bottom: 20px;
}

#church-wrap .cards-count {
    font-size: 1.2em;
    font-weight: 600;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
}

#church-wrap .cards-count .card {
    padding: 20px;
    border-radius: 10px;
    background-color: #f5f5f5;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: default;
    border: 0;
    transition: all 0.3s;
}
#church-wrap .cards-count .card .value {
    font-size: 1.5em;
    font-weight: 600;
    text-align: center;
}


#church-wrap .color-1 {
    background-color: #f76521 !important;
}

#church-wrap .color-2 {
    background-color: #57f721 !important;
}

#church-wrap .color-3 {
    background-color: #21e9f7 !important;
}

#church-wrap .color-4 {
    background-color: #f9fe27 !important;
}

#church-wrap .church {
    padding: 20px 0px;
    border-bottom: 1px solid black;
}

#church-wrap .tabs {
    margin-top: 40px;
    display: flex;
    gap: 5px;
}

#church-wrap .tab-button {
    padding: 10px 20px;
    border: 0;
    border-radius: 20px 20px 0px 0px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
    background-color: #f5f5f5;
    font-weight: 600;
}

#church-wrap .tab-button.active, #church-wrap .tab-button:hover {
    background-color: #d2d2d2;
}

#church-wrap .tab-content {
    padding: 30px;
    display: none;
    background-color: #d2d2d2;
}

#church-wrap .tab-content.active {
    display: block;
}

#church-wrap .church-info-wrap, #church-wrap .church-groups-wrap {
    background: white;
    padding: 10px;
    color: #474747;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

#church-wrap #church-members, #church-wrap #church-coaches {
    padding: 10px;
    background: white;
}

#church-wrap .members-container {
    border: var(--borders);
    background: #f7f7f7;
    border-radius: var(--border-radius);
    padding: 20px 10px;
    margin-top: 20px;
}

#church-wrap .church-group {
    margin-bottom: 30px;
}

#church-wrap .members-filter {
    margin: 0 0 20px;
    padding: 0 10px 10px;
    border: var(--borders);
    background: #f7f7f7;
    border-radius: var(--border-radius);
}


#church-wrap #addChurchMemberForm .email_action, #church-wrap #addChurchCoachForm .email_action {
    display: block;
    text-align: right;
}

#church-wrap #addChurchMember, #church-wrap #addChurchCoach {
    display: block;
    width: 100%;
    text-align: right;
}


#church-wrap #addChurchMember button, #church-wrap #addChurchCoach button, #church-wrap #saveAddChurchMember button, #church-wrap #cancelAddChurchMember button, #church-wrap #saveAddChurchCoach button, #church-wrap #cancelAddChurchCoach button, #church-wrap #create_group button {
    background: var(--green);
    color: #fff;
    transition: all .3s;
    text-transform: uppercase;
    border: 0;
    padding: 5px 10px;
    font-size: 14px;
}

#church-wrap #cancelAddChurchMember button, #church-wrap #cancelAddChurchCoach button {
    background-color: red;
}

#church-wrap #addChurchMember button:hover, #church-wrap #addChurchCoach button:hover, #church-wrap #saveAddChurchMember button:hover, #church-wrap #cancelAddChurchMember button:hover, #church-wrap #saveAddChurchCoach button:hover, #church-wrap #cancelAddChurchCoach button:hover, #church-wrap #create_group button:hover {
    opacity: .7;
    transition: all .3s;
}

#church-wrap #addChurchMemberForm, #church-wrap #addChurchCoachForm {
    width: 100%;
}

#church-wrap #addChurchMemberForm fieldset, #church-wrap #addChurchCoachForm fieldset{
    padding: 0 0 10px 10px;
    border: var(--borders);
    background: #f7f7f7;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    display: flex;
    width: 100%;
    gap: 20px;
}

#church-wrap #addChurchMemberForm .the_email, #church-wrap #addChurchCoachForm .the_email {
    width: 48%;
}

#church-wrap #addChurchMemberForm .the_group, #church-wrap #addChurchCoachForm .the_group {
    width: 48%;
}

#church-wrap .removeChurchMember, #church-wrap .removeGroup, #church-wrap .addMemberOrLeader, #church-wrap .editGroupName, #church-wrap .saveGroupName, #church-wrap .cancelGroupName, #church-wrap .saveAddUser,#church-wrap .cancelAddUser, #church-wrap .removeGroupMember, #church-wrap .moveMember, #church-wrap .editRole, #church-wrap .saveMoveUser, #church-wrap .cancelMoveUser, #church-wrap .cancelChangeRole, #df_groups .editGroupName, #df_groups .saveGroupName, #df_groups .cancelGroupName, #df_groups .moveMember, #df_groups .editRole, #df_groups .saveMoveUser, #df_groups .cancelMoveUser, #df_groups .cancelChangeRole {
    opacity: 0.8;
    padding: 10px 15px;
    transition: all .3s;
}

#church-wrap .select2-container.select2-container--default {
    min-width: 250px;
}

#church-wrap .move-user-input .select2-container.select2-container--default {
    min-width: 200px;
}

#church-wrap .move-user-actions, #church-wrap .add-user-actions {
    display:inline-block;
    margin-top: 10px;
    text-align: right;
}

#church-wrap .removeChurchMember, #church-wrap .removeGroup, #church-wrap .cancelGroupName, #church-wrap .cancelAddUser, #church-wrap .removeGroupMember, #church-wrap .cancelMoveUser, #church-wrap .cancelChangeRole, #df_groups .cancelGroupName, #df_groups .cancelMoveUser, #df_groups .cancelChangeRole {
    color: #ea5e5e;
}

#church-wrap .saveGroupName, #church-wrap .saveAddUser, #church-wrap .saveMoveUser, #church-wrap .saveChangeRole, #df_groups .saveGroupName, #df_groups .saveMoveUser, #df_groups .saveChangeRole {
    color: #4caf50;
}

#church-wrap .removeChurchMember:hover, #church-wrap .removeGroup:hover, #church-wrap .cancelGroupName:hover, #church-wrap .cancelAddUser:hover, #church-wrap .removeGroupMember:hover, #church-wrap .cancelMoveUser:hover, #church-wrap .cancelChangeRole:hover, #df_groups .cancelGroupName:hover, #df_groups .cancelMoveUser:hover, #df_groups .cancelChangeRole:hover {
    color: #ff0000;
    opacity: 1;
}


#church-wrap .addMemberOrLeader, #church-wrap .editGroupName, #church-wrap .saveGroupName:hover, #church-wrap .saveAddUser:hover, #church-wrap .moveMember, #church-wrap .editRole, #church-wrap .saveMoveUser:hover, #church-wrap .saveChangeRole, #df_groups .editGroupName, #df_groups .saveGroupName:hover, #df_groups .moveMember, #df_groups .editRole, #df_groups .saveMoveUser:hover, #df_groups .saveChangeRole {
    opacity: 1;
}

#church-wrap .members-filter input {
    padding: 0 10px;
}

#church-wrap .filter-input {
    display: block;
    height: 40px;
    font-size: 1.3em;
    width: 100%;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
}

#church-wrap .member-assets {
    background: #fff;
    font-size: 12px;
    margin-bottom: 20px;
    padding: 10px;
}

#church-wrap .member-assets .member-title{
    font-size: 14px;
    padding: 0 10px 5px;
    margin-bottom: 10px;
    color: #474747;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    justify-content: space-between;
}


#church-wrap .count_members {
    border-radius: 1px;
    display: inline-block;
    border: solid 1px var(--border-color);
    position: relative;
    bottom: -7px;
    z-index: 1;
    background: #fff;
    font-size: 11px;
    padding: 0 5px;
    left: 10px;
    color: #676767;
}

#church-wrap summary {
    width: 90%;
    cursor: pointer;
    border: var(--borders);
    background: #f7f7f7;
    border-radius: var(--border-radius);
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#church-wrap summary::before {
    content: '▼';
    position: absolute;
    left: 10px;
    top: 20%;
    transition: all 0.3s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

#church-wrap details[open] summary::before {
    transform: rotate(0deg);
}

#church-wrap .group-name  {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-color);
    padding: 10px;
    display: inline-block;
    margin-left: 30px;
}

#church-wrap .group-name-input {
    margin-left: 30px;
    padding: 10px;
}

#church-wrap .group-members {
    margin: 0 10px;
    list-style: none;
    border: solid 1px var(--border-color);
    border-radius: var(--border-radius);
    border-top: none !important;
    padding: 10px;
    background-color: #f7f7f7;
}

#church-wrap .member-assets div[data-assessment] {
    display: inline-block;
    padding: 0 10px;
    border: solid 1px #e4e4e4;
    margin-right: 7px;
    margin-bottom: 7px;
    border-radius: 3px;
}

#church-wrap .member-assets div[data-assessment] a {
    color: #777;
}

#church-wrap .member-assets .no-assessment, .assets .no-assessment {
    color: #777;
    font-size: 12px;
    padding: 0 10px 10px;
    font-style: italic;
}

@media (max-width: 768px) {
    #church-wrap  {
        margin-top:150px;
    }

    #church-wrap .church {
        padding: 10px 0;
    }

    #church-wrap .cards-count {
        display:none;
    }

    #church-wrap .tabs {
        flex-direction: column;
    }

    #church-wrap .tab-button {
        border-radius: 0;
    }
}


#church-wrap .addMemberOrLeaderForm .form-container, #church-wrap .move-user-input .form-container {
    padding: 20px 10px 10px;
    border: var(--borders);
    background: #f7f7f7;
    border-radius: var(--border-radius);
    margin-bottom: 10px;
    width: 100%;
}

#church-wrap .addMemberOrLeaderForm .form-container select {
    width: 48%;
    margin: 10px 0;
}

#df_groups .hidden {
    display: none;
}