@import 'ctl_base_ui/colors';
@import 'ctl_base_ui/mixins';
@import 'ctl_base_ui/icons';

#template_flow {
  h3 {
    padding-top: 20px;
    margin-bottom: 20px;
    border-bottom: $grey 1px solid;
  }

  dl {
    font-size: 0.9em;

    &:after {
      content: '';
      clear: both;
      display: block;
    }

    dt, dd {
      float: left;
      line-height: 30px;
      margin-bottom: 15px;
    }
    dt {
      clear: left;
      font-weight: bold;
      margin-right: 10px;
    }
  }

  form dl {
    dt {
      width: 170px;
      margin-right: 10px;
      color: $medium_grey;
      line-height: 38px;
    }

    dd {
      width: 780px;
    }

    input[type='text'],
    textarea {
      width: 460px;
    }

    label.required {
      position: relative;
    }

    label.required:after {
      position: absolute;
      right: -10px;
      top: -12px;
      width: 6px;
      height: 6px;
      content: '*';
      display: inline;
    }

    .template-icons {
      label {
        @include border-box;
        @include border-radius(3px);
        float: left;
        height: 50px;
        line-height: 50px;
        width: 195px;
        padding-left: 10px;
        border: transparent 1px solid;

        &:hover {
          border: $dark_grey 1px solid;
        }

        input:checked + img +span {
          color: $dark_grey;
          font-weight: bold;
        }

        img {
          margin-bottom: -5px;
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  select + .chosen-container {
    width: 450px !important;
    margin-right: 10px;
  }

  textarea {
    height: 140px;
  }

  .documentation {
    font-size: 13px;

    strong {
      display: block;
      margin-bottom: 0.6em;
    }

    textarea {
      @include border-box;
      margin-top: 1.6em;
      width: 100%;
      height: 300px;
    }
  }

  form.update-github-token {
    border-top: $light_grey 1px solid;
    margin-top: 30px;
    padding-top: 30px;

    input[type='text'] {
      margin-left: 100px;
      width: 500px;
    }

    button {
     margin-top: 0;
    }

    .subscribe-flag {
      display: block;
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }

  .button-secondary {
    margin-top: 20px;
    float: right;
    position: relative;
    margin-right: 10px;
  }

  .button-positive {
    margin-top: 20px;
    float: right;
    position: relative;
    padding-right: 40px;

    &:after {
      position: absolute;
      top: 15px;
      right: 10px;
      content: '';
      @extend .icon-thick-arrow-right;
      @include icon-white;
      width: 15px;
      height: 15px;
    }
  }

  #update-token-modal {
    form {
      border-top: 0;
      padding-top: 0;
    }
  }
}


#post-run-html {

  padding: 20px;
  background-color: $light_grey;
  font-size: 1rem;

  h2 {
    color: $blue_grey;
  }

  h3, h4, h5, h6 {
    color: $dark_grey;
  }

  blockquote {
    border-left: 11px solid $grey;
    font-style: italic;
    font-size: 1.2rem;
    background-color: $white;
    padding: 11px 11px 11px 20px;
    margin-bottom: 20px;
  }

  ul, ol {
    margin-left: 20px;
    margin-bottom: 20px;
    list-style-position: outside;
    li {
      line-height: 1.6rem;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  pre > code {
    margin: 0;
    padding: 0;
    white-space: pre;
    border: none;
    background: transparent;
  }

  .highlight pre {
    background-color: $white;
    border: 1px solid $grey;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
  }

  pre {
    background-color: $white;
    border: 1px solid $grey;
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
  }

  /* This is Github style markdown */
  code {
    margin: 0 2px;
    padding: 0 5px;
    white-space: nowrap;
    border-radius: 3px;
    font-family: monospace;
    font-style: italic;
    color: $blue_grey;
    background-color: $white;
    border: 1px solid $grey;
  }

  hr {
    border: 0;
    height: 2px;
    background-color: $grey;
  }

  img {
    background-color: $white;
    padding: 11px;
  }

  em {
    font-style: italic;
  }
}
