@-webkit-keyframes color_change {
    from { background-color: $cta_color; color: #fff }
    to { background-color: #3B454D; color: #A2A5A8 }
}
@-moz-keyframes color_change {
    from { background-color: $cta_color; color: #fff }
    to { background-color: #3B454D; color: #A2A5A8 }
}
@-ms-keyframes color_change {
    from { background-color: $cta_color; color: #fff }
    to { background-color: #3B454D; color: #A2A5A8 }
}
@-o-keyframes color_change {
    from { background-color: $cta_color; color: #fff }
    to { background-color: #3B454D; color: #A2A5A8 }
}
@keyframes color_change {
    from { background-color: $cta_color; color: #fff }
    to { background-color: #3B454D; color: #A2A5A8 }
}
.nf-item.clicked {
    //background: #1EA9EA;
    animation-name: color_change;
    animation-duration: 2s;
    animation-iteration-count: 1;
    animation-direction: alternate;
}
@media only screen and (max-width: 1400px) {
    .nf-field-type-button {
        width: 50%;
    }
}
@media only screen and (max-width: 1065px) {
    .nf-app-menu {
        .preview {
            .app-menu-text {
                text-indent: -9999px;
                display: inline-block;
                width: 0;
            }
        }
    }
    .nf-drawer-opened {
        .nf-actions-table {
            th, td {
                &:nth-child(3) {
                    display: none;
                }
            }
        }
    }
}
@media only screen and (max-width: 900px) {
    #nf-header {
        ul {
            display: none;
        }
        .nf-button.primary {
            display: none;
        }
    }

    .nf-mobile-menu {
        display: inline-block;
    }
    #nf-app-sub-header {
        h2 {
            padding-left: 0;
            transition: all 1.0s ease 0s
        }
    }

    .nf-add-new.nf-open-drawer {
        position: fixed;
        text-indent: -9999px;
        height: 54px;
        width: 54px;
        top: auto;
        left: auto;
        bottom: 20px;
        right: 20px;
        &:after {
            background: $accent_color;
            border: 2px solid $accent_color;
            border-radius: 40px;
            color: #fff;
            content: "+";
            font-size: 50px;
            padding: 8px;
            position: absolute;
            left: 0;
            width: 28px;
            height: 28px;
            line-height: 24px;
            text-indent: 0px;
        }
    }

    #nf-main-header {
        .nf-button {
            display: none;
        }
    }
    // .nf-item-controls {
    //     li {
    //         margin: -4px 15px 0;
    //         height: 26px;
    //         a {
    //             width: 30px;
    //             height: 30px;
    //             &:hover {
    //                 .nf-tooltip {
    //                     top: -45px;
    //                     visibility:visible;
    //                     opacity: 1.0;
    //                     filter: alpha(opacity=100);
    //                     transition: all 1.0s ease;
    //                     transition-delay: 1.4s;
    //                 }
    //             }
    //             .dashicons {
    //                 font-size: 26px;
    //                 padding-top: 1px;
    //             }
    //         }
    //         &.nf-item-duplicate {
    //             .nf-tooltip {
    //                 left: -32px;
    //                 &:after {
    //                     left: 36px;
    //                 }
    //             }
    //         }
    //         &.nf-item-edit {
    //             .nf-tooltip {
    //                 left: -16px;
    //                 &:after {
    //                     left: 20px;
    //                 }
    //             }
    //         }
    //         &.nf-item-delete {
    //             margin-top: -4px;
    //         }
    //         &.nf-item-expand {
    //             display: none;
    //             .dashicons {
    //                 transform: rotate(-90deg);
    //             }
    //         }
    //         .nf-item-editing {
    //             display: none;
    //         }
    //     }
    //     &.nf-editing {
    //         font-weight: normal;
    //         a {
    //             color: #424242;
    //         }
    //         .nf-item-delete,
    //         .nf-item-duplicate {
    //             display: none;
    //         }
    //         .nf-item-editing {
    //             display: inline;
    //             line-height: 26px;
    //         }
    //     }
    // }
    .nf-one-half, .nf-one-third {
        float: none;
        width: 100%;
    }
    .nf-drawer-expand {
        .nf-one-half {
            float: left;
            width: 50%;
        }
        .nf-on-third {
            float: left;
            width: 33%;
        }
    }

    #nf-app-form-title {
        margin-top: -55px;
    }
    #nf-main {
        top: 120px;
    }

    #nf-table-display {
        .nf-item-controls {
            width: auto;
        }
    }
}
@media only screen and (max-width: 1023px) {
    .ninja-forms-app {
        &.folded {
            #wpcontent {
                margin-left: 36px;
                padding: 0;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                #wpbody {
                    left: 0;
                }
            }
        }
    }

    .nf-setting-wrap {
        width: 50%;
    }
    #nf-drawer {
        width: 100%;
    }
    .nf-drawer-opened {
        #nf-main {
            width: 100%;
        }
        .nf-setting-wrap {
            width: 50%;
        }
    }
    .nf-drawer-closed {
        .nf-setting-wrap {
            width: 50%;
        }
    }
    .nf-toggle-drawer {
        display: none;
    }

}
@media only screen and (max-width: 960px) {
    .ninja-forms-app {
        &.auto-fold {
            #wpcontent {
                margin-left: 36px;
                padding: 0;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                #wpbody {
                    left: 0;
                }
            }
        }
    }
    .nf-drawer-opened .nf-toggle-drawer {
        display: none;
    }



}

@media only screen and (max-width: 782px) {
    .ninja-forms-app {
        &.folded, &.auto-fold {
            #wpcontent {
                margin-left: 0;
            }
        }
    }
    // .nf-item-controls {
    //     top: 15px;
    // }
    #nf-builder {
        padding: 80px 20px 10px;
    }
    #nf-main {
        padding: 20px 0 80px;
    }
    #nf-drawer {
        padding: 20px;
    }


    #nf-main-content {
        width: 100%;
        max-width: 100%;
    }
    #nf-main {
        border: 0;
    }
    // .nf-field-wrap {
    //     border: 0;
    //     border-top: 8px solid #f1f1f1;
    //     border-radius: 0;
    //     margin: 0;
    //     padding: 20px;
    //     &:first-child {
    //         border-top: 8px solid #fff;
    //     }
    // }
    // .nf-fields-sortable-placeholder { margin-top: 0; margin-bottom: 0; border: 4px solid #84CC1E }
    // .nf-fields-sortable-placeholder + .nf-field-wrap {
    //     border: 0;
    // }
    // .nf-fields-sortable {
    //     border: 0;
    //     padding: 0;
    // }
    // .nf-field-wrap.ui-sortable-helper {
    //     background: transparent;
    //     border: 2px solid $accent_color;
    // }

}
@media only screen and (max-width: 660px) {

    #nf-builder {
        //margin-top: 46px;
    }
    .nf-one-half, .nf-one-third {
        width: 100%;
    }
    // .nf-field-wrap {
    //     border: 0;
    //     border-bottom: 1px solid #ccc;
    //     border-radius: 0;
    //     margin: 0;
    //     padding: 20px;
    //     &:first-child {
    //         border-top: 1px solid #ccc;
    //     }
    // }
    .nf-actions-table {
        td:nth-child(3),th:nth-child(3) {
            display: none;
        }
    }
    //     display: block;
    //     table, thead, tbody, th, td, tr {
    //         display: block;
    //     }
    //     thead tr {
    //         position: absolute;
    //         top: -9999px;
    //         left: -9999px;
    //     }
    //     tr { border: 1px solid #ccc; }
    //     td {
    //         /* Behave  like a "row" */
    //         border: none;
    //         border-bottom: 1px solid #eee;
    //         position: relative;
    //         padding-left: 50%;
    //         text-align: right;
    //         width: auto !important;
    //         &::before {
    //             /* Now like a table header */
    //             line-height: 36px;
    //             position: absolute;
    //             /* Top/left values mimic padding */
    //             top: 6px;
    //             left: 6px;
    //             width: 45%;
    //             padding-right: 10px;
    //             text-align: left;
    //             white-space: nowrap;
    //         }
    //         &:last-child {
    //             height: 50px;
    //         }
    //     }
    //     td:nth-of-type(1):before { content: ""; }
    //     td:nth-of-type(2):before { content: "Name"; }
    //     td:nth-of-type(3):before { content: "Type"; }
    //     td:nth-of-type(4):before { content: "Actions"; }
    // }

    .nf-drawer-buttons {
        display: block;
    }
    // .nf-drawer-header {
    //     background: #fff;
    //     margin: -20px -20px 20px;
    //     //padding: 0;
    //     h2 {
    //         font-size: 16px;
    //         line-height: 46px;
    //         margin: 0;
    //         .dashicons {
    //             background: #fff;
    //             font-size: 30px;
    //             padding-top: 7px;
    //             width: 45px;
    //             height: 45px;
    //         }
    //     }
    //     .nf-button {
    //         border-radius: 0;
    //     }
    // }
    .nf-item {
        padding: 15px;
        .fa {
            padding: 14px;
            width: 48px;
        }
    }
    .nf-saved .nf-item::after {
        padding: 14px;
    }
}

@media only screen and (max-width: 600px) {
    // #nf-builder {
    //     margin-top: 46px;
    // }


}