@mixin tablemix($total-columns, $label-columns, $field-columns) {
    .table {
        @include nested-reset;
        p, div {
            display:inline;
        }

        caption{
            margin-bottom: 0.5em;
        }

        .errors{
            outline: 2px solid red !important;
        }

        .error{
            display: inline-block;
            background: #ffbbbb;
            outline: 1px solid #ff3333;
            &.hidden{
                display:none;
            }
        }
        .noUi-target, .noUi-target div {
            display: block;
        }
        table{
            *{
                width:auto;
            }

            .option {
                white-space:normal;
            }

            td > div > *{
              margin-top: 0.5em;
              margin-bottom: 0.5em;
            }

            border-bottom: 1px solid black;

            border-collapse: collapse;
            .row{
                td, th{
                    display:table-cell;
                    border: 0;
                    border-bottom:1px solid #bbb;
                    vertical-align:top;
                    &.main{
                        vertical-align:middle;
                    }
                    float: none;
                }
                &.inner_row td{border:0;}
                &:first-child td{border-top:1px solid #bbb;}

                @include span-columns($total-columns omega);
                float:none;
                display:table-row;

                input {
                    &.float , &.integer {
                        width: 54px;
                        // float: left;
                    }
                    &.string , &.textarea {
                        width: 92%;
                    }
                    &.slider {
                      width: 80%;
                    }
                    &.sized { width: auto;}

                    /* These properties get overriden by our table reset, so we have to re-apply them with a more specific selector */
                    &.fd-form-element-hidden { display: none; }
                }

                .fd-slider {
                  /* These properties get overriden by our table reset, so we have to re-apply them with a more specific selector */
                  width: 100%;
                  .fd-slider-wrapper { width: 100%; }
                  .fd-slider-handle { width: 20px; }
                }

                .unit {
                    vertical-align: -20%;
                    padding-left: 4px;
                }
            }
            margin:0;
        }
        .item {
            @include reset-columns;
        }
        .main {
            width: (100%/3);
            float:none !important;
            display: table-cell !important;
            label small { font-size: 0.7em; }
        }
        .description{
            text-align: right;
        }

        .option_sets{
            .option{
                padding-left:1em;
                padding-bottom: 0.5em;
                vertical-align:bottom;
            }
        }
        .dark{
            background-color: #eee;
        }
        .light{
            background-color: #fff;
        }
    }
}