input::placeholder,
textarea::placeholder {
  color: $form-hint-colour
}

.panel {
  p {
    padding-left: 0;
  }

  &.compact {
    padding: 0.5rem 1rem;
  }

  .muted {
    color: $dashboard-muted-color;
  }
}

textarea.monospace {
  font-family: Consolas,Monaco,Lucida Console,Bitstream Vera Sans Mono,Courier New, monospace;
}

.filters {
  .actions {
    margin-top: 0.7rem;
  }
  @media print {
    display: none;
  }
}

.chosen-container-multi {
  margin-bottom: 0.5rem;
}

// Hide up down arrows on number inputs
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cancel-link {
  font-size: 0.9rem;
  margin-left: 15px;

  &.disabled {
    color: $disabled-colour;
    pointer-events: none;
  }
}

.datepicker {
  width: 240px;

  &.dropdown-menu {
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  }
}

form {
  .striped {
    > .row {
      padding-bottom: .35rem;
      padding-top: .35rem;

      input {
        margin-bottom: 0;
      }

      &:nth-of-type(even) {
        background-color: $ghost;
      }
    }
  }

  .row .row.datepicker-wrapper {
    margin-bottom: 10px;
  }

  &.simple_form div.boolean {
    label {
      padding-left: 0;

      input {
        margin-left: 0;
      }
    }
  }

  .error.medium-input {
    max-width: 500px;
  }

  @media screen and (min-width: 40.063em) {
    .small-input {
      max-width: 250px !important;
    }
  }

  .medium-input {
    max-width: 500px !important;
  }

  .tiny-input {
    max-width: 125px !important;
  }

  .very-tiny-input {
    max-width: 75px !important;
  }

  .row.actions {
    margin-top: 2rem;
  }

  .error {

    small.error {
      padding: 0.3rem 0.5rem 0.2rem 0.5rem;
    }

    .datepicker_error {
      clear: both;
      float: left;
      width: 100%;
    }
  }
}

article {
  background-color: $white;
  border: 0;
  border-top: 2px solid $link-colour;
  float: left;
  margin: 0 0 1.5rem;
  padding: 0.5rem 0 0;
  position: relative;
  width: 100%;

  &.secondary {
    border-color: lighten($link-colour, 20%);
    border-width: 1px;
  }

  h3 {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
  }

  header {
    float: left;
    margin: 0 0 0.5rem;
    width: 100%;

    h1,
    h2,
    h3 {
      float: left;
      font-size: 1.2rem;
      font-weight: bold;
      line-height: 1.8rem;
      margin: 0 .5rem 0 0;
      padding: 0;

      a {
        font-weight: bold;
      }
    }

    .supplemental {
      display: inline-block;
      // float: left;

      span {
        color: $mid-grey;
        font-size: 1.1rem;
        line-height: 1.78rem;
        margin: 0 .5rem 0 0;
      }

      a {
        display: inline-block;
        margin-right: .5rem;
      }
    }

    h3 {
      color: $muted-dark-grey;
      font-size: 1.1rem;
    }

    ul {
      list-style-type: none;

      li {
        a.button {
          margin-left: 0.5rem;
        }
      }
    }

    .button {
      background-color: $steel;
      border-radius: 3px !important;
      color: $white;
      display: block;
      float: right;
      padding: 0.4rem;
      text-decoration: none;
    }

    .button:hover {
      background-color: $nhs-blue;
      text-decoration: underline;
    }
  }

  .no-bullet {
    float: left;
    width: 100%;

    li {
      border-bottom: 1px dotted $iron;
      // font-weight: bold;
      padding-bottom: 0.2rem;

      a {
        font-weight: normal;
        text-decoration: underline;
      }
    }

    li:last-child {
      border: 0;
      padding-bottom: 0;
    }

    li[class^="drug-"] {
      font-weight: normal;

      span {
        font-weight: bold;
      }
    }
  }

  legend {
    .fieldset-action {
      font-size: 1rem;
      font-weight: normal;
      padding-left: 1rem;
    }
  }

  dt {
    color: rgb(153, 153, 153);
    font-weight: normal;
  }

  .button {
    margin-bottom: 0;
  }

  .radio {
    input.radio_buttons {
      margin-right: 5px;
    }

    address {
      color: $form-hint-colour;
      display: inline;
      font-size: 0.9em;
    }
  }

  &.with-actions-above-table {
    padding-top: 3px;

    .actions {
      margin-bottom: 13px;
    }
  }
}

.document form,
.profile-info-form {

  .form-content {
    // max-width: 960px;
  }

  label.radio_buttons {
    padding: 0;
  }

  label.inline {
    margin-right: 0.3rem;
  }

  table {
    border: 0;

    &.no-stripes tr:nth-of-type(even) {
      background-color: transparent !important;
    }

    td {
      vertical-align: top;

      .row.datepicker-wrapper {
        margin-top: -4px !important;
      }

      input,
      select {
        margin: 0;
      }
    }

    th:first-child,
    td:first-child {
      min-width: 24%;
      padding-top: 11px;
      text-align: right;
    }
  }
}

.profile-info-form table {
  td:first-child {
    min-width: 120px;
    width: 34%;
  }

  td:nth-child(2) {
    min-width: 200px;
    width: 24%;
  }

  td:last-child {
    min-width: 63px;
    width: 40%;

    select {
      width: 80px;
    }
  }
}

.search-form,
.filters__form {

  fieldset {
    margin-top: 0;
  }

  .columns {
    padding-right: 0;
  }

  .actions {
    padding-top: 8px;
  }

  &.search-form-vertical {
    .actions {
      padding-top: 1.3rem;
    }
  }
}

fieldset {

  &.borderless {
    border: 0;
    padding: 0 !important;

    legend {
      display: none;
    }
  }

  &.simple {
    border-width: 1px 0 0 0;
    margin: 40px 0 10px 0;
    padding: 0.8rem 0 0 0;
    position: relative;

    legend {
      font-size: 1.3rem;
      left: 0;
      line-height: 1.3rem;
      position: absolute;
      top: -28px;
      width: 100%;

      span {

        &.title {
          font-weight: normal;
          padding-right: 1rem;
        }

        &.actions {
          color: $link-colour;
          font-size: 1rem;
          font-weight: normal;

          &.action-links {
            a {
              font-size: 1rem;
              font-weight: normal;
            }
          }

          &.action-buttons {
            position: absolute;
            top: -5px;

            a {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  &.simple-table {
    margin-top: 50px;
  }
}

.button {

  &.slimline {

    &.small {
      padding: 0.3rem 0.6rem;
    }
  }
}

.panel.danger-zone {
  background-color: $white;
  color: $nhs-red;

  h4 {
    color: inherit;
  }

  a {
    color: inherit;
    font-weight: bold;
    background-color: $table-border-color;

    &:hover,
    &:active   {
      background-color: $nhs-red;
      color: $white;
    }
  }
}