@font-face {
    font-family: "Karla";
    src: url("/static/fonts/Karla.ttf") format("truetype");
}
body {
  overflow-x: hidden;
  font-family: Karla, sans-serif;
}
.wallpaper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: .6;
    background: url('/static/assets/images/paper.webp');
    z-index: -1;
}
.vis {
    position: relative;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}
.menu_c {
    position: fixed;
    bottom: 4vh;
    left: 0;
    width: 100vw;
    height: 12vh;
    display: flex;
    justify-content: center;
    align-content: center;
    z-index: 12;
}
.menu {
    width: 64vw;
    border-radius: 1vw;
    background: #ddd8;
    display: grid;
    grid-template-columns: 4fr 7fr;
    margin: 1vw;
    height: 12vh;
}
.menu_tree {
    border-radius: 4vh 0 0 2vh;
    margin: 0 1vw 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu_list {
    border-radius: 0 2vh 4vh 0;
    margin: 0 0 0 1vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.kpi {
    position: absolute;
    z-index: 12;
    right: 2vw;
    width: 20vw;
    top: 10vh;
}

.kpi.expanded {
    display: grid;
    height: 88vh;
    width: 96vw;
    border-radius: 1vh;
    grid-template-columns: 1fr 20vw;
    grid-template-rows: 1fr;
    grid-template-areas: "map info";
    background: #111;
    right: -1vw;
    padding-right: 3vw;
    top: 8vh;
    padding-top: 2vh;
}
.statemap {
    grid-area: map;
    width: 100%;
    height: 95%;
}
.kpi_one {
    grid-area: info;
}
.kpi_row {
    padding-bottom: .2em;
}
.kpi_key {
    font-size: .54em;
    text-align: left;
}
.kpi_val {
    text-align: right;
}

.banner {
    position: fixed;
    top: .33vh;
    left: 20vw;
    width: 80vw;
    height: 9vh;
    display: flex;
    justify-content: center;
    align-content: center;
    z-index: 12;
}
.banner > div {
    text-align: center;
    width: 33vw;
    background: #3331;
    border-radius: 0vh 0vw 0vh 2vw;
    align-items: center;
    display: flex;
    justify-content: center;
}
.target {
    background: #333b;
    position: absolute;
    top: 9vh;
    left: .5vw;
    width: 76vw;
    height: 76vh;
    z-index: 20;
}
.tabl {
    position: relative;
    top: -5vh;
    width: 90vw;
    left: 5vw;
}
.hedr {
    background: #4443;
    position: sticky;
    top: 10vh;
    padding: 2vh 2vw 2vh 2vw;
    align-content: center;
    height: 7vh;
}
.fltr {
    background: gray;
    width: 100%;
    height: 5vh;
}
.rows {
    display: flex;
    flex-direction: column;
    padding: 0 2vw 0 2vw;
    max-height: 80vh;
    overflow: scroll;
}
.row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    border-bottom: 1px solid #3333;
    font-size: 1em;
    padding-bottom: .5vh;
    padding-top: .5vh;
}