.nf-button {
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 17px;
    padding: 10px 30px;
    text-decoration: none;
    text-transform: uppercase;
    appearance: none;
    &.primary {
        background: $cta_color;
        border: 1px solid #1EA9EA;
        color: #fff;
    }
    &.secondary {
        background: #fff;
        border: 1px solid $cta_color;
        color: $cta_color;
    }
    &.disabled {
        background: #ccc;
        border: 1px solid #ccc;
        cursor: default;
    }
    &.publish {
        float: right;
    }
}
.nf-cancel {
    color: #999;
    font-size: 15px;
}
.nf-mobile-menu {
    background: $cta_color;
    border-radius: 4px;
    color: #fff;
    display: none;
    float: right;
    padding: 5px 7px 5px 5px;
    text-decoration: none;
    transition: margin 0.5s ease;
    .dashicons {
        font-size: 30px;
        width: 32px;
        height: 30px;
    }
    &:hover {
        color: #fff;
    }
}

.ninja-forms-app {
    fieldset {
        border: 1px solid #ccc;
        clear: both;
        display: block;
        margin-bottom: 20px;
    }
    label {
        &::after {
            clear: both;
            content: "";
            display: block;
        }
    }
    legend {
        margin: 0 3px 10px;
        padding: 0 10px;
    }
    .nf-setting-label, label, legend {
        color: #424242;
        display: block;
        font-size: 13px;
        text-transform: uppercase;
    }
    input[type=text],
    input[type=number],
    textarea {
        background: #f9f9f9;
        border: 0;
        margin-top: 5px;
        padding: 12px 15px;
        width: 100%;
        height: 41px;
        text-transform: default;
    }
    textarea {
        height: 200px;
    }
    input[type=checkbox].nf-checkbox {
        appearance: none;
        background: #f9f9f9;
        border: 0;
        height: 25px;
        width: 25px;
        padding: 2px 1px 0px !important;
        margin: -3px -5px;
        &:checked {
            &::before {
                content: "\f147";
                font: 400 30px/1 dashicons;
            }
        }
    }
}
.ninja-forms-app {
    .nf-list-options {
        padding-bottom: 20px;
        .nf-add-new {
            margin-left: 20px;
        }
        .nf-div-table {
            .nf-table-row {
                > div {
                    //border-top: 16px solid red;
                    display: table-cell;
                    padding: 5px;
                    &:nth-child(1), &:nth-child(6) {
                        padding: 0 15px;
                        width: 20px;
                    }
                    &:nth-child(2), &:nth-child(3) {
                        width: 45%;
                    }
                    &:nth-child(4) {
                        min-width: 100px;
                    }
                    input {
                        margin: 0;
                    }
                }
                &.nf-table-header {
                    div {
                        font-size: 12px;
                        padding: 20px 5px 5px;
                        &:nth-child(1), &:nth-child(6) {
                            padding: 0 25px;
                        }
                    }
                }
            }
        }
        &.calculations {
            .nf-div-table {
                .nf-table-row {
                    div {
                        vertical-align: top;
                        position: relative;
                            &:nth-child(1), &:nth-child(4) {
                                padding: 0 15px;
                                width: 20px;
                                min-width: 20px;
                            }
                            &:nth-child(2) {
                                width: 30%;
                            }
                            &:nth-child(3) {
                                width: 70%;
                            }
                        textarea {
                            margin: 0;
                            height: 100px;
                        }
                        .merge-tags {
                            color: #999;
                            position: absolute;
                            right: 15px;
                            top: 5px;
                        }
                        .dashicons {
                            color: #999;
                            margin-top: 10px;
                        }
                    }
                }
            }
        }
    }
}
.nf-drawer-buttons {
    display: none;
    margin: 0 -20px;
    padding: 0;
    li {
        background: #424242;
        border-right: 1px solid #f1f1f1;
        float: left;
        margin: 0;
        padding: 15px;
        text-align: center;
        width: 50%;
        &:last-child {
            border: 0;
        }
        &.nf-drawer-delete {
            color: red;
        }
        &.nf-drawer-duplicate {
            color: $accent_color;
        }
        .dashicons {
            margin-right: 10px;
        }
    }
    &::after {
        clear: both;
        content: "";
        display: block;
    }
}

.dashicons.spin {
    animation: dashicons-spin 1s infinite;
    animation-timing-function: linear;
}
@keyframes dashicons-spin {
    0%   { transform: rotate( 0deg ); }
    100% { transform: rotate( 360deg ); }
}