
.flex-form {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  padding-bottom: 6px;

  .with-line {
    position: relative;
    text-align: center;
    margin: 6px 0;
    margin-top:12px;
    &:before {
      content: "";
      display:block;
      border-top: 1px solid #ccc;
      width: 40%;
      height: 1px;
      position: absolute;
      top: 50%;
    }
    &:after {
      content: "";
      display:block;
      border-top: 1px solid #ccc;
      width: 40%;
      right:0;
      height: 1px;
      position: absolute;
      top: 50%;
    }

    span {
      margin: auto;
      padding: 0 20px;
      color: #CCC;
    }

  }
  .cancel {
    margin: auto;
  }


  @include display(flex);
  @include flex(1);

  @include flex-direction(column);
  @include flex-wrap(nowrap);
  &.split-form {
    @include flex-direction(row);
    @include flex-wrap(nowrap);
    .flex-form-left {
      @include display(flex);
      @include flex(1);
      @include flex-direction(column);
      @include flex-wrap(nowrap);

      padding-right:10px;
      border-right: 1px solid #ccc;
      > div {
        @include display(flex);
        @include flex(1);
      
      }
    }
    .flex-form-right {
      padding-left: 10px;
      @include flex(0 0 210px);
    }
  }
  label {
    @include display(flex);
    input, textarea {
      @include flex(1);
    }
  }
  input, textarea {
    padding: 7px 8px;
  }
  .tabbable {
    textarea {
     @include box-sizing(border-box);
     width: 100%;
     resize:none;
     border: none;
     outline: none;
     box-shadow:none;
    }
    .nav-tabs > .active > a {
      background-color: transparent;
      border-bottom-color: #fafafa;
    }
  }

  .markdown-editor {
    @include flex(1);
    @include display(flex);
    > div {
      @include flex(1);
      @include display(flex);
      
    }
    .tabbable {
      @include flex(1);
      @include flex-direction(column);
      @include flex-wrap(nowrap);
      @include display(flex);
      .tab-content {
       padding-bottom: 6px;
       @include flex(1);
       @include display(flex);
      }
      .tab-content {
        @include flex-direction(column);
        @include flex-wrap(nowrap);
      }
    }
  }
}
