.pos-rel {
    position: relative !important
}

svg.tetris {
    display: inline-block;
    will-change: auto;
}

.svg__swap-tetra {
    max-width: 18rem
}

.current-tetra-outline {
    fill: none;
    stroke: #fff;
    stroke-width: 4
}

.current-tetra-inner-line {
    stroke-width: 4
}

.tetris-game-container {
    position: relative;
    max-height: 100%;
    -ms-flex-direction: row;
    flex-direction: row
}

.content-side-panel, .tetris-game-container {
    display: -ms-flexbox;
    display: flex
}

.content-side-panel {
    flex: 0 1 20rem;
    padding-left: 1rem;
    padding-right: 1rem;
    flex-direction: column;
    align-items: center

}

.svg__game-area {
    max-height: 100%
}

.content-play-area {
    flex: 1 0 20rem
}

.tetra-count-display tr:last-child {
    height: 4rem
}

.tetra-count-display td:last-child {
    text-align: left;
    font-weight: 600;
    text-transform: uppercase
}

.tetra-count-display tr:first-of-type td:last-child {
}

.tetra-count-display td:last-child {
    text-align: right
}

.label__hiscore, .label__lines, .label__score {
    width: 100%;
    text-align: center;
    padding-left: 1rem;
    font-weight: 400;
    font-size: 2rem;
    margin-top:1rem;
}

label, td{
}

.label__lines {
    font-weight: 600;
    font-size: 1.6rem;
}

.pb2 {
    padding-bottom: 1rem
}

table.tetra-count-display {
    width: 100%;
    padding: 0 1rem;
    border: none;
    margin-top: 4rem;
    margin-bottom: 2rem
}

table.tetra-count-display td {
    padding: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    border: none
}

table.tetra-count-display td:first-child {
    text-align: left;
}
table.tetra-count-display tr:last-child {
height:4rem;
}


.pause-text {
    cursor: pointer;
    text-anchor: middle;
    font-size: 6rem
}

.pause-text-subheading {
    cursor: pointer;
    text-anchor: middle;
    font-size: 2.5rem
}

.pause-overlay {
    cursor: pointer;
    top: 0;
    left: 0
}