/* HyTable (Hytale themed) */

.hy-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font:14px Arial,sans-serif;
  background:#0b1220;
  border:1px solid rgba(120,180,255,.18);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.hy-table th{
  text-align:left;
  padding:14px 16px;
  background:linear-gradient(135deg,#102447,#153b6a);
  color:#d7ecff;
  font-weight:700;
  letter-spacing:.2px;
  border-bottom:1px solid rgba(120,180,255,.18);
}

.hy-table td{
  padding:14px 16px;
  color:#d6e6ff;
  border-bottom:1px solid rgba(120,180,255,.12);
}

.hy-table tr:last-child td{border-bottom:none;}
.hy-table tbody tr{background:rgba(255,255,255,.02); transition:background .15s ease;}
.hy-table tbody tr:hover{background:rgba(120,180,255,.08);}

.hy-table code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:13px;
  color:#9fe3ff;
  background:rgba(0,180,255,.10);
  border:1px solid rgba(120,220,255,.20);
  padding:4px 8px;
  border-radius:10px;
  display:inline-block;
  white-space:nowrap;
}

@media (max-width:700px){
  .hy-table thead{display:none;}
  .hy-table,.hy-table tbody,.hy-table tr,.hy-table td{display:block; width:100%;}
  .hy-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:6px;
    font-size:12px;
    font-weight:700;
    color:rgba(215,236,255,.75);
    text-transform:uppercase;
    letter-spacing:.6px;
  }
}

/*
  Spacing modifiers
  NOTE: If you load multiple CSS files that define .hy-table th/td padding,
  make sure THIS file is loaded last, or keep the !important flags below.
*/

.hy-table.hy-table--compact th,
.hy-table.hy-table--compact td{
  padding:10px 12px !important;
  font-size:13px;
}

.hy-table.hy-table--tight th,
.hy-table.hy-table--tight td{
  padding:7px 10px !important;
  font-size:13px;
}

.hy-table.hy-table--tight code{
  padding:3px 6px !important;
  border-radius:9px;
  font-size:12px;
}
