/* 726 TECH TILE CSS 2017 - 2022 */


/* TILE CSS */

.TileBox {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10vh;
}

.TileBox.compact {
    margin-top: 4vh;
}

.Tile {
    border-radius: 6px;
    margin: 1vh 1.5vw;
    width: 16vh;
    height: 16vh;
    position: relative;
    background-color: #5558;
    text-align: center;
    font-size: 2.0vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}

.Tile.bar {
    width: 100%;
    height: 8vh;
    padding-left: 2vh;
    font-size: 2vh;
    font-family: monospace;
    font-weight: bold;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.Tile.tabular {
    width: 24vh;
    height: 12vh;
    font-size: 1.5vh;
    flex-direction: row;
    align-items: center;
}

.Tile:hover {
    background: #87cefa7f;
    cursor: pointer;
}

.TileAnchor {
    text-decoration: none;
}

.TileIconCustomSVG {
    width: 8vh;
    height: 8vh;
    margin-top: 0.25vh;
}

.Tile.tabular .TileIconCustomSVG {
    width: 6vh;
    height: 6vh;
    margin: 0.25vh 0.5vh;
}

.Tile:not(.disabled):hover .TileIconCustomSVG {
    cursor: pointer;
}

.TileLabel {
    width: 100%;
    font-size: 2.0vh;
    font-family: monospace;
    color: #eee;
}

.Tile.tabular .TileLabel {
    font-size: 1.5vh;
    text-align: left;
}

.full-width {
    width: 100%;
}


/* TILE DATA */

.TileData {
    font-size: 1.5vw;
    font-family: monospace;
    color: #333;
}

.TileData.mini {
    font-size: 1.0vw;
}

.TileData.maxi {
    font-size: 2.0vw;
}


/* TILE BUTTON SVG */

.TileButtonSVG {
    width: 12vh;
    height: 12vh;
    margin-top: 1vh;
}


/* TILE BUTTON SIZES */

.TileButtonHalf {
    width: 50%;
    text-align: center;
}

.TileButtonHalf:not(.disabled):hover .TileButtonSVG {
    cursor: pointer;
}

.TileButtonThird {
    width: 33%;
    text-align: center;
}

.TileButtonThird:not(.disabled):hover .TileButtonSVG {
    cursor: pointer;
}

.TileButtonHalf.selected,
.TileButtonThird.selected {
    background-color: #777;
}

.disabled .TileButtonSVG {
    opacity: 0.25;
}