.fsk {
    border: 1px solid lightgray;
    padding: 0 5px;
    margin-right: 10px;
    font-family: sans-serif;
}

.fsk0 {
 background: #fff;
 color: #231f20;
}

.fsk6 {
    background: #ffe600;
    color: #191700;
}

.fsk12 {
    background: #0db14b;
    color: #000b00;
}

.fsk16 {
    background: #00a4e0;
    color: #00011f
}

.fsk18 {
    background: #ed1c24;
    color: #240001;
}

.bsp {
    background: #e8e8e8; font-style: italic; padding: 3px 6px
}

.showsymbols {
    margin-left: -10px; margin-right: -10px
}

.showsymbols > div {
    display: -webkit-flex; display: flex; border-bottom: 1px solid lightgray
}

.showsymbols > div > div:first-child {
    width: 10%; font-size: 25px; text-align: center; display: block; padding: 5px; 
}

.showsymbols > div > div:last-child {
    width: 90%; -webkit-align-self: center; align-self: center
}

@media (max-width: 900px){
    .showsymbols > div > div:first-child {
        width: 20%;
    }

    .showsymbols > div > div:last-child {
        width: 80%;
    }
}