Template:CharacterPotentialTable/style.css

/* CharacterPotentialTable */
.character-potentialtable {
    width: 100%;
    /* min-width: 575px; */
    max-width: 900px;
}

.character-potentialtable .summary {
    height: 52px;
}
.character-potentialtable .summary > td {
    padding-left: 56px;
    position: relative;

    padding-left: 56px;
    background-image: url(https://static.miraheze.org/bluearchivewiki/thumb/5/5c/Item_Icon_WorkBook_PotentialAttack.png/128px-Item_Icon_WorkBook_PotentialAttack.png);
    background-position: -38px -10px;
    background-repeat: no-repeat;
}


td.lv {
    text-align: center;
    width:20px
}

td.stat {
    width: 33%;
}


.summary div,
td.stat div {
    display: flex;
    flex-flow: row;
    justify-content: space-between;

}

.summary div {
    margin-right: 16px;
}


.summary [class^='potential-bonus'] {
    min-width: 32px;
}


.character-potentialtable td.stat {
    cursor: pointer;
}

.character-potentialtable td.stat:hover {
    background-color: rgba(255, 255, 255, 0.8);
}


.character-potentialtable .summary input {
    width: 38px;
    font-size: 17px;
    border: none;
    background-color: rgba(255,255,255,1);
    border-radius: 3px;
}