/**
 * Compatibility settings tab
 */
/**
 * Basic structure
 */
div.row {
  display: table-row; }
  div.row > div {
    display: table-cell; }
    div.row > div:first-child {
      width: 200px; }
  div.row:not(:last-child) > div {
    padding-bottom: 0.5em; }
  div.row p {
    margin-bottom: 0.5em; }
  div.row.header p {
    margin-bottom: 1em; }

/**
 * Elements
 */
.wrap.wpmtst h2 {
  margin: 2em 0 1em; }
  .wrap.wpmtst h2.nav-tab-wrapper {
    margin-top: 6px; }

input.element {
  width: 15em; }

/**
 * Behavior
 */
.hidden {
  display: none; }

[data-sub] {
  display: none; }

/**
 * Common scenarios table
 */
div.scenarios div.row {
  border: 1px solid #DDD; }
  div.scenarios div.row > div {
    padding: 1em; }
    div.scenarios div.row > div:first-child {
      width: 35%;
      border-right: 1px dotted #DDD; }
    div.scenarios div.row > div:last-child {
      width: 30%;
      border-left: 1px dotted #DDD; }
  div.scenarios div.row p {
    font-size: 14px;
    margin: 0; }
    div.scenarios div.row p:not(:last-child) {
      margin-bottom: 1em; }
  div.scenarios div.row.header > div {
    font-weight: 600;
    padding: 0.5em 1em; }

/**
 * Settings table
 */
div.row:not(:last-child) > div:nth-child(2) {
  padding-bottom: 0.5em; }
div.row > div.radio-sub label {
  text-indent: 24px;
  width: 200px; }
div.row p.about {
  display: inline-block;
  vertical-align: middle; }
  div.row p.about.adjacent {
    margin-left: 0.5em; }
div.row p.description {
  display: inline-block;
  font-size: 14px; }
div.row label.current {
  font-weight: 600; }

/**
 * Lazy load class name pairs
 */
.pair-actions {
  margin-top: 10px; }

.pair-sep {
  margin-right: 1em; }

@media only screen and (max-width: 1024px) {
  .lazyload-pairs .pair {
    border: 1px solid #DDD;
    padding: 5px 10px; } }
/**
 * Number spinner
 */
.number-style {
  display: inline-block;
  margin-right: 10px;
  /**
   * Disable text selection on buttons. Seems to help jittery pointers.
   */ }
  .number-style input {
    margin: 0 5px;
    font-family: Consolas, Monaco, monospace;
    text-align: center;
    width: 4em; }
  .number-style > span {
    cursor: pointer; }
    .number-style > span.number-minus, .number-style > span.number-plus {
      height: 24px;
      width: 24px;
      display: inline-block;
      text-align: center;
      vertical-align: top;
      border-radius: 3px;
      background: #0085ba;
      border-width: 1px;
      border-style: solid;
      border-color: #0073aa #006799 #006799;
      -webkit-box-shadow: 0 1px 0 #006799;
      box-shadow: 0 1px 0 #006799;
      text-shadow: 0 -1px 1px #006799, 1px 0 1px #006799, 0 1px 1px #006799, -1px 0 1px #006799;
      color: #FFF; }
      .number-style > span.number-minus:hover, .number-style > span.number-plus:hover {
        background: #008ec2; }
      .number-style > span.number-minus:active, .number-style > span.number-plus:active {
        background: #0073aa;
        border-color: #006799;
        -webkit-box-shadow: inset 0 2px 0 #006799;
        box-shadow: inset 0 2px 0 #006799;
        -webkit-transform: translateY(1px);
        -ms-transform: translateY(1px);
        transform: translateY(1px);
        outline: none; }
      .number-style > span.number-minus.disabled, .number-style > span.number-plus.disabled {
        background: #AAA;
        border-color: #999 #777 #777;
        -webkit-box-shadow: 0 1px 0 #777;
        box-shadow: 0 1px 0 #777;
        text-shadow: 0 -1px 1px #777, 1px 0 1px #777, 0 1px 1px #777, -1px 0 1px #777; }
    .number-style > span.number-minus::after, .number-style > span.number-plus::after {
      font-family: dashicons;
      font-size: 24px;
      line-height: 24px;
      height: 24px;
      width: 24px;
      display: inline-block;
      color: #FFF;
      text-align: center;
      position: relative;
      left: -1px; }
    .number-style > span.number-minus::after {
      content: "\f140"; }
    .number-style > span.number-plus::after {
      content: "\f142"; }
  .number-style input[type='number'] {
    -moz-appearance: textfield; }
  .number-style input::-webkit-outer-spin-button,
  .number-style input::-webkit-inner-spin-button {
    -webkit-appearance: none; }
  .number-style .number-minus,
  .number-style .number-plus,
  .number-style .number-minus::after,
  .number-style .number-plus::after {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
               supported by Chrome and Opera */ }