
.alerts {
  position: fixed;
  top: 60px;
  right: 0;
}

nav a, nav button {
  word-break: keep-all;
}

.close-inline {
  font-size: 20px;
  font-weight: bold;
  line-height: 18px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.close-inline:hover {
  color: #000000;
  text-decoration: none;
  opacity: 0.4;
  filter: alpha(opacity=40);
  cursor: pointer;
}

.label-not-relayable {
  background-color: #f80694;
}

.label-not-relayable:hover {
  background-color: #c60576;
}

ul.relayTree {
  list-style: none;
}

.ipv4 {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
}
.ipv6{
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/icon-v6.svg");
}

.relayable {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_0.png");
}
.relayFull {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_1.png");
}
.notRelayable {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_2.png");
}
.firewalled {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_3.png");
}
.firewalledRelaying {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_4.png");
}
.unknown {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_5.png");
}
.notReceiving {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_6.png");
}
.connectionToRoot {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_7.png");
}
.connectionToTracker {
  display: inline-block;
  margin: auto 2px;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-image: url("../images/relay_icon_8.png");
}

.source-tracker {
  font-weight: 800;
}

.channel-list {
  table-layout: auto;
}

.channel-list th {
  font-weight: normal;
}

.channel-column {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sorted {
  font-weight: bold;
}

.ui-grid {
  display:table;
  table-layout:auto;
}

.ui-header {
  padding:0px 2px 0px 4px;
  display:table-cell;
  font-weight:800;
}

.ui-label {
  padding:0px 2px 0px 4px;
  display:table-cell;
  text-align:right;
}

.ui-control {
  width:auto;
  display:table-cell;
}

.ui-control button {
  margin-bottom:10px;
}

.ui-row {
  display:table-row;
}

.channel-list .column-play      { width:1.5em; }
.channel-list .column-name      { flex:16; }
.channel-list .column-genre     { flex:8; }
.channel-list .column-desc      { flex:40; }
.channel-list .column-bitrate   { width:4em; }
.channel-list .column-uptime    { width:4em; }
.channel-list .column-listeners { width:4em; }
.channel-list .column-type      { width:4em; }
.channel-list .column-yp        { width:2em; }
.channel-list .column-tags      { width:30px; }

.channel-table>.channel-list-body>.row:nth-of-type(odd) {
  background-color: #eeeeee;
}

.channel-list-body .selected {
  background-color: #cccccc !important;
}

.badge-mini {
  display: inline-block;
  padding: 2px 4px;
  font-size: 9px;
  font-weight: bold;
  line-height: 12px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #3a87ad;
  -webkit-border-radius: 9px;
     -moz-border-radius: 9px;
          border-radius: 9px;
}

.hidden {
  display:none;
}

.vjs-channel-info {
  margin-left: 3px;
  text-overflow:ellipsis;
}
a.vjs-channel-info {
  color: inherit;
}
