@media only screen and (max-width: 768px) {
    .headerrow, .timestampCell, .cloak-level-cell {
        display: none;
    }

    .charNameCell {
        font-weight: bold;
    }

    .dungeon-short-name:empty {
        display: none;
    }

    .dungeon-level-key-block {
        font-size: x-small;
    }

    .dungeon-level-key-block {
        width: 90% !important;
    }
}

@media all {
    
    [v-cloak] { display: none }

    .center {
        display: flex;
        justify-content: center;
    }

    .headerrow div {
        text-align: center;
    }

    .charlist {
        width: 80%;
        margin-bottom: 1em;
    }

    .charrow {
        margin-bottom: 1px;
    }

    .charrow:hover {
        background-color: lightskyblue !important;
    }

    .charrow.has-10 {
        background-color: lightpink !important;
    }
    .charrow.has-12 {
        background-color: lightblue !important;
    }    
    .charrow.has-15 {
        background-color: lightgreen !important;
    }    

    .headerrow {
        font-weight: bold;
        border-bottom: 2px solid black;
        margin-bottom: 2px;
    }

    .charNameCell a {
        text-decoration: none;
    }

    .charNameCell a:hover {
        text-decoration: underline;
    }

    .mPlusScore {
        text-align: right;
        padding-right: 10px;
        font-style: italic;
        color: darkgray;
    }

    .lastWeek {
        font-style: italic;
        text-align: center;
        color: darkblue;
    }

    .box-ilvl {
        text-align: center;
        min-height: 1em;
    }

    .keyCells div:after, .box-ilvl:after {
        content: '.';
        visibility: hidden;
    }
    .keyCells div {
        text-align: center;
        min-height: 1em;
    }
    .keyCells div:nth-child(-n+8).completedKey, .vaultBoxes .box-ilvl:nth-child(3):not(:empty) {
        background-color: lightsalmon;
    }
    .keyCells div:nth-child(-n+8), .vaultBoxes .box-ilvl:nth-child(3) {
        outline: 1px solid lightsalmon;
    }

    .keyCells div:nth-child(-n+4).completedKey, .vaultBoxes .box-ilvl:nth-child(2):not(:empty) {
        background-color: lightblue;
    }
    .keyCells div:nth-child(-n+4), .vaultBoxes .box-ilvl:nth-child(2) {
        outline: 1px solid lightblue;
    }

    .keyCells div:nth-child(1).completedKey, .vaultBoxes .box-ilvl:nth-child(1):not(:empty) {
        background-color: lightgreen;
    }
    .keyCells div:nth-child(1), .vaultBoxes .box-ilvl:nth-child(1) {
        outline: 1px solid lightgreen;
    }


    .info-block {
        font-size: x-small;
    }

    .dungeon-level-key-block {
        margin-bottom: 1em;
        width: 40%;
    }

    .dungeon-level-key-block .keyLevelCell {
        text-align: center;
    }

    .dungeon-short-name {
        font-size: x-small;
    }

    .dungeon-list .charrow:nth-child(even) {
        background-color: whitesmoke;
    }
}