.nf-field-wrap {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #888;
    cursor: pointer;
    margin-bottom: 20px;
    padding: 15px 20px;
    position: relative;
    &.active {
        //background: #fafafa;
        border: 2px solid #84CC1E;
        color: #424242;
        font-weight: bold;
        .nf-item-controls {
            font-weight: normal;
            a {
                background: #fff;
                color: $accent_color;
                &:hover {
                    border-color: #fff;
                }
            }
            .nf-item-delete,
            .nf-item-duplicate {
                display: none;
            }
            .nf-item-editing {
                display: inline;
            }
            .nf-item-edit {
                .dashicons {
                    margin-right: 12px
                }
            }
        }
    }
}

.nf-group-wrap {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 4px;
    color: #888;
    margin: 0 -10px 20px;
    padding: 15px 30px;
    position: relative;
    //transition: all 1.0s ease;
    .nf-item-controls {
        width: 128px;
    }
    .nf-item-expand {
        display: inline !important;
    }
    .nf-field-wrap {
        margin-left: -20px;
        margin-right: -20px;
        visibility: hidden;
        opacity: 0.0;
        filter: alpha(opacity=0);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        //transition: all 1.0s ease;
    }
    &.expanded {
        border-color: $accent_color;
        color: $accent_color;
        //transition: all 1.0s ease;
        .nf-item-expand {
            .dashicons {
                transform: rotate(90deg);
            }
        }
        .nf-field-wrap {
            opacity: 1.0;
            visibility: visible;
            filter: alpha(opacity=100);
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            transition: all 1.0s ease;
            &:nth-child(2) {
                margin-top: 20px;
            }
            &:last-child {
                margin-bottom: 0;
            }
            .nf-item-controls {
                width: 96px;
                .nf-item-expand {
                    display: none !important;
                }
            }
        }
    }
}