* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    overflow: hidden;

    font-family: monospace;

    background-color: #000;

    width: 100vw;

    height: 100vh;

}



.dashboard-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr;

    width: 100%;

    height: 100vh;

    gap: 1px;

}



.grid-cell {

    position: relative;

    width: 100%;

    height: 100%;

}



.placeholder {

    background-color: #F2F2F2;

    border: 1px solid #CCCCCC;

}



.radar-cell {

    background-color: #111111;

    padding: 10px;

    position: relative;

    overflow: hidden;

}



.radar-canvas {

    display: block;

    position: absolute;

    top: 10px;

    left: 10px;

    right: 10px;

    bottom: 10px;

    width: calc(100% - 20px);

    height: calc(100% - 20px);

}



.tooltip {

    position: absolute;

    background-color: rgba(0, 0, 0, 0.75);

    border: 1px solid #39FF14;

    border-radius: 4px;

    padding: 8px;

    color: white;

    font-size: 9px;

    font-family: monospace;

    pointer-events: none;

    z-index: 1000;

    max-width: 200px;

    white-space: nowrap;

}