// Somewhat specialised for use in eg POS-S survey results table because
// the attributes are quite finicky to get it to look right.
// If you need to use these classes elsewhere and the look is not right,
// please make sure PROMS survey results still look OK.
.table-header-rotated {
  width: auto;

  th.rotate {
    height: 138px;
    white-space: nowrap;

    // Firefox needs the extra DIV for some reason, otherwise the text disappears if you rotate
    > div {
      transform:
        // Magic Numbers
        translate(25px, 51px)
        // 45 is really 360-45
        rotate(315deg);
      width: 2rem;
    }

    > div > span {
      border-bottom: 1px solid #ccc ;
      display: inline-block;
      padding: .4rem .0rem;
      margin: 0 0 1.1rem -0.5rem;
    }
  }

  th.row-header {
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
  }

  th {
    overflow: visible;
    vertical-align: inherit;
  }
}