@font-face {
    font-family: Inter;
    src: url(Inter/Inter-VariableFont_opsz\,wght.ttf);
}

* {
    user-select: none;
}

#grid {
    position: absolute;
    left: 0px;
    top: 0px;

    margin: 0px;
    padding: 0px;

    /* width: 100%;
    height: 100%; */

    border-collapse: collapse;
}

tr {
    overflow-x: hidden;
}

.cell {
    width: 40px;
    height: 40px;

    padding: 0px;
    margin: 0px;

    /* border: 1px solid black; */
}

svg {
    padding: 0px;
    margin: 0px;

    stroke-linecap: butt;
    stroke-linejoin: bevel;

    pointer-events: none; /* such that clicking works */
}

.gridWire {
    stroke: rgba(168, 204, 201, 128);
}

.comp {
    stroke: black;
    stroke-width: 2px;
    fill: none;
}

.wire {
    stroke: black;
    stroke-width: 2px;
}

.ghost {
    stroke: firebrick;
    stroke-width: 2px;
}

.control {
    stroke: red;
    fill: none;
    stroke-width: 3px;
}

.toolBtn {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: cadetblue;
    position: fixed;
    right: 20px;
    /* top: 20px; */
    padding: 0px;
    margin: 0px;
    border: none;
}

.toolBtn.selected {
    background-color: blueviolet;
}

.toolBtnImage {
    width: 80px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}

.toolBtnText {
    position: absolute;
    bottom: 0px;
    text-align: center;
    width: 80px;
    margin-bottom: 7px;
}

#tooltip {
    position: fixed;
    right: 120px;
    top: 20px;
    border: 1px solid black;
    background-color: darksalmon;

    font-size: large;
    font-family: Inter;

    margin: 5px;
    padding: 5px;
    visibility: hidden;
}

#tooltip > h3 {
    margin: 3px;
}

.arrow {
    stroke:crimson;
    stroke-width: 2px;
    fill: none;
}

#toggleArrows {
    visibility: hidden;
}

#examples {
    position: fixed;
    left: 20px;
    bottom: 220px;
    font-size: large;
    background-color: aquamarine;
}