table {
    width: 100%;
    font-weight: 700;
    font-size: 17px;
    border-collapse: collapse;
    border-radius: 10px;
}

tbody {
    background-color: #181C2D;
}
thead i { 
    margin-right: 2px;
}
td {
    white-space: nowrap;
}

td:first-child {
    padding-left:20px;
    width: 20px;
}
td:last-child {
    padding-right: 16px;
}
td:nth-child(4) {
    padding-right: 8px;
}

/* Hidden delta */
td:nth-child(3) { 
    display: none;
} 

/* Hide Abbr col */
td:nth-child(5) {
    display: none;
}

#table_container {
    margin: 14px 0 50px 0;
    padding-bottom: 10px;
}

thead td {
    user-select: none;
    padding: 20px 0px 14px 0px;
    background-color: #1C2134;
}
td:nth-child(2) {
    width: 30px;
}

table .selected_col {
    padding-bottom: 8px; /* 3px smaller accounting for :after */
}
table .selected_col:after {
    content:"";
    background: -moz-linear-gradient(left, rgba(255,151,86,0) 0%, rgba(255,151,86,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255,151,86,0) 0%,rgba(255,151,86,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255,151,86,0) 0%,rgba(255,151,86,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff9756', endColorstr='#ff9756',GradientType=1 ); /* IE6-9 */
    display: block;
    height:3px;
    width: 83%;
    position: relative;
    bottom: -10;
    right: 9;
}
thead td:nth-child(8).selected_col:after, thead td:nth-child(9).selected_col:after {
    background: -moz-linear-gradient(left, rgba(63,139,252,0) 0%, rgba(63,139,252,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(63,139,252,0) 0%,rgba(63,139,252,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(63,139,252,0) 0%,rgba(63,139,252,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
thead td:nth-child(8).selected_col:after {
    width: 96%;
}

thead td:first-child {
    border-top-left-radius: 10px;
}
thead td:last-child {
    border-top-right-radius: 10px;
}
tbody tr:first-child {
    height: 34px;
    vertical-align: bottom;
    box-shadow: inset -1px 32px 26px -27px #12121D;
    -webkit-box-shadow: inset -1px 32px 26px -27px #12121D;
    -moz-box-shadow: inset -1px 32px 26px -27px #12121D;
    -o-box-shadow: inset -1px 32px 26px -27px #12121D;
}
tbody tr:nth-child(even) {
    background-color: #151525;
}

.card {
    padding: 0;
}
.light_card {
    background-color: #1C2134
}

#atk, #def {
    width: 130px;
    cursor: pointer;
}

#atk_delta, #def_delta {
    width: 120px;
}
#atk_delta {
    color: #ff914b;
}
#def_delta {
    color: #5b8bff;
}

/* Numbers */
tbody tbody td:nth-child(6), tbody td:nth-child(7), tbody td:nth-child(8), td:nth-child(9) {
    font-size: 20px;
    font-variant-numeric: tabular-nums;
}

td:nth-child(1) {
    color: #5b6481;
}

/* ATK */
td:nth-child(6) {
    color: #ff914b;
}

/* DEF */
td:nth-child(8) {
    color: #5b8bff;
}

/* DELTAS */
td:nth-child(7), td:nth-child(9) {
    color: #4af77b; /* Default delta col has positive color */
    text-align: left;
}

td:nth-child(10) {
    color: #5b6481;
    text-align: right;
}

tbody tr:hover {
    background-color: #3A2E35;
}

tbody tr:hover td:nth-child(1) {
    color: white;
}
tbody tr:hover td:nth-child(4) {
    color: #f1e77a;
}

#atk {
    color: #ff914b;
}
#def {
    color: #5b8bff;
}
.sortable {
    cursor: pointer;
}
.sortable:hover {
    background-color: #1c2138;
}

#elo_chart {
    max-width: 600px;
    max-height: 600px;
    margin: auto;
}

#chart_container {
    margin: 10 auto;
    padding: 20px 0px;
    max-width: 650px;
}

@media only screen and (max-width: 850px) {
    tbody td {
        font-size: 16px !important;
    }
    td:nth-child(4) {
        letter-spacing: 3px;
    }
    td:nth-child(10) {
      display: none
    }
}

.flex_desk {
    display: flex;
}

@media only screen and (max-width: 600px) {
    td:nth-child(7), td:nth-child(9) {
      display: none
    }
    .flex_desk {
        display: block;
    }
}

@media only screen and (max-width: 470px) {
  
    thead td {
        padding-bottom: 4px;
    }
    thead td {
        padding: 16px 0px 10px 0px;
    }
    table .selected_col {
        padding-bottom: 7px;
    }
    table .selected_col:after {
        bottom: -7px !important;
        right: 9;
    }
    
    .long_name {
        display: none;
    }
    table {
        table-layout: fixed;
    }
    td:first-child {
        padding-left: 6px;
    }
    td:nth-child(1), td:nth-child(2) {
        width: 22px;
    }
    td:nth-child(4) {
        letter-spacing: 0.6px;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    td:nth-child(6), td:nth-child(8) {
        width: 80px !important;
    }
    .selected_col:after {
        bottom: -5px !important;
    }
    tbody td {
        font-size: 14px !important;
    }
}