.irc-version {
    font-size: 74%;
    vertical-align: 2px;
    margin-left: 0.34rem;
    color: #6694AA;
}
.irc-version + .sw-version {
    padding-left: 0.5em;
}
.dead-software {
    font-size: 80%;
    font-weight: bold;
    margin-left: 0.16rem;
}
.dead-software:before {
    content: "(";
}
.dead-software:after {
    content: ")";
}

.support-table {
  width: 96vw;
  position: relative;
  left: calc(-48vw + 50%);
  overflow-x: auto;
  margin: 0 auto;

  + .support-table {
    margin-top: 2em;
  }

  &.network td:first-child {
    min-width: 11em;
    text-align: center;
  }

  .ircd-ver, .language {
    display: block;
    color: #6b6b6b;
    font-size: 0.94em;
  }

  .supported {
    background-color: #a7eeaa;
    color: #0E3010;
  }
  .partial {
    background-color: #eeeeaa;
    color: #303010;
  }
  .na {
    background-color: #ddd;
    color: #101010;
  }
  .unsupported {
    background-color: rgb(247, 213, 211);
    color: #303010;
  }

  > table {
    width: auto;
    min-width: 30.65%; // pulled out of the air because it looks nice
    margin: 0;

    a {
      text-decoration: none;

      &:hover {
        text-decoration: underline;
      }
    }

    th, td {
      min-width: 5rem;
      text-align: center;
      padding: 0.3em 0.5em;

      &.required + .optional, &.optional + .draft {
        border-left: 0.35rem solid #aaa;
      }

      a {
        white-space: nowrap;
      }
    }

    th {
      vertical-align: top;
      text-align: center;
      font-size: 95%;
      position: sticky;
      top: 0;
      z-index: 3;
      background: #fff;

      &:first-child {
        text-align: left;
        font-size: 100%;
        min-width: 7em;
        left: 0;
        z-index: 4;
      }
    }

    td {
      vertical-align: middle;
      white-space: nowrap;

      &:first-child {
        text-align: left;
        white-space: normal;
        position: sticky;
        left: 0;
        z-index: 2;
        border-right: 1px #aaa solid
      }
    }
    tbody td:first-child {
      background: #fff
    }
    tbody tr:nth-child(odd) td:first-child {
      background: #e4e4e4
    }

    tbody {
      .support {
        box-sizing: border-box;
      }
      tr:first-child{
        border-top: 1px rgba(0,0,0,0.01) solid;
      }
      tr:last-child{
        border-bottom: 1px rgba(0,0,0,0.01) solid;
      }
      tr:not(:first-child) {
        border-top: 1px #C0C0C0 solid;
      }
      tr {
        transition: background 200ms;
        
        &:hover {
          background-color: #eee;
          &:nth-child(odd) {
            background-color: #ddd;
          }

          .supported {
            background-color: #8fea94;
          }
          .unsupported {
            background-color: rgba(243, 150, 146, 0.5);
          }
          .partial {
            background-color: #ecec90;
          }
        }
      }

      tr:first-child, tr:first-child td:first-child {
        border-top-left-radius: 0.25em;
      }
      tr:first-child td:last-child {
        border-top-right-radius: 0.25em;
      }
      tr:last-child, tr:last-child td:first-child {
        border-bottom-left-radius: 0.25em;
      }
      tr:last-child td:last-child {
        border-bottom-right-radius: 0.25em;
      }
    }
  }

  .support.supported .hover-popup > div {
    background: #382;
    border-color: #271;
  }
  tr.popup-below .support.supported .hover-popup > div:after {
    border-bottom-color: #271;
  }
  tr.popup-above .support.supported .hover-popup > div:after {
    border-top-color: #271;
  }
  .support.unsupported .hover-popup > div {
    background: #833;
    border-color: #722;
  }
  tr.popup-below .support.unsupported .hover-popup > div:after {
    border-bottom-color: #722;
  }
  tr.popup-above .support.unsupported .hover-popup > div:after {
    border-top-color: #722;
  }
  .support.partial .hover-popup > div {
    background: #707232;
    border-color: #606222;
  }
  tr.popup-below .support.partial .hover-popup > div:after {
    border-bottom-color: #606222;
  }
  tr.popup-above .support.partial .hover-popup > div:after {
    border-top-color: #606222;
  }
  .support.na .hover-popup > div {
    background: #666;
    border-color: #555;
  }
  tr.popup-below .support.na .hover-popup > div:after {
    border-bottom-color: #555;
  }
  tr.popup-above .support.na .hover-popup > div:after {
    border-top-color: #555;
  }

  .os-support {
    text-align: right;
    margin-left: .5em;
    float: right;
  }
}

a.irc-extension {
  margin: 0 0.5rem;
}

/* hover popups */
.hover-popup {
    display: none;
    position: relative;
    left: 50%;
    white-space: nowrap;
    width: 0;
}
.content .hover-popup p {
    margin-top: 0.26em;
}
.content .hover-popup p:first-child {
    margin-top: 0;
}
.support:hover {
    border: 1px rgba(20, 20, 20, 0.65) solid;
}
.support:hover .hover-popup {
    display: block;
}
.support .hover-popup > div {
    position: absolute;
    float: right;
    background: #333;
    border: 1px #111 solid;
    padding: 0.75rem 1.25rem;
    color: #f7f7f7;
    text-align: left;
    left: 0;
    border-radius: 0.5rem;
    z-index: 999;
    transform: translateX(-50%);
}
.sw-table.fullwidth .support:last-child .hover-popup {
    left: initial;
    right: -20%;
}
.support .hover-popup > div p {
    margin-bottom: 0;
}
.support .hover-popup > div p + p {
    margin-top: 0.25;
}
.support .hover-popup > div p.note {
    margin-top: 0.3rem;
    border-top: 1px rgba(20, 20, 20, 0.3) solid;
    padding-top: 0.1rem;
}
.support .hover-popup > div p code {
    color: #e7e7a7;
}

tr.popup-below .hover-popup > div {
    top: 2rem;
}
tr.popup-below .support .hover-popup > div:after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #333;
	border-width: 0.9rem;
	margin-left: -0.9rem;
}

tr.popup-above .hover-popup > div {
    transform: translate(-50%, calc(-100% - 2rem));
}
tr.popup-above .support .hover-popup > div:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
    border-top-color: #333;
	border-width: 0.9rem;
	margin-left: -0.9rem;
}

.os-support {
  color: #666;
  display: block;
}
.os-support i + i {
  margin-left: 0.5rem;
}
.os-support-windows-phone {
  color: #229eda;
}
.os-support-ios {
  color: #444;
}
.os-support-android {
  color: #9fc234;
}
.os-support-linux {
  color: #222;
}

@media only screen and (max-width: 500px)  {
  .support-table {
    overflow: initial;
    max-height: none;

    thead {
      display: none;
    }

    tbody, th, td, tr { 
      display: block; 
    }

    table {
      width: 100%;
    }

    tr {
      background: none !important; // override the even vs odd backgrounds
      border-top: none;

      td {
        border: none;
        &:not(:first-child) {
          border-top: 1px #C0C0C0 solid;
          &:before {
            content: attr(data-capname);
            float: left;
            min-width: 9em;
            text-align: right;
            background: rgba(255,255,255,0.8);
            margin: -0.3em -0.5em;
            padding: .3em .5em;
            color: #111;
          }
        }
        &.required + .optional, &.optional + .draft {
          border-left: none;
          border-top: 0.35rem solid #aaa;
        }

        &:first-child {
          margin-top: 2em;
          border-right: none;
          text-align: center;
          background: #fff !important; // override the even vs odd backgrounds
          position: sticky;
          top: 0;
          z-index: 5;
        }
      }
    }
  }
}
