@font-face {
    font-family: 'Noto Sans';
    src: url('/static/NotoSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/static/NotoSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/static/NotoSans-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('/static/NotoSans-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}


body {
    /* zoom: 80%; */
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans', sans-serif;
    /* font-family: 'Source Sans 3', sans-serif; */
    /* font-family: 'Segoe UI', BlinkMacSystemFont; */

    /* BlinkMacSystemFont; */
    /* font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Oxygen; */
    /* others: Roboto, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}


#text_L {
    /* border: 1px solid magenta; */
    height: 200px;
    font-family: 'Noto Sans', sans-serif;
    font-style: italic;
    font-size: 16px;
    margin-left: 20px;
    /* outside margin */
    text-align: left;
    line-height: 1.1;
}


/* this prevents strange gene label highlighting behavior when dragging polygon */
svg text {
    user-select: none;
}


/* #div_left {
grid-column: 1/2;
grid-row: 1/3;
display: flex;
flex-direction: row;
justify-content: flex-start;
} */

.hidden {
    display: none !important;
    /* This overrides the inline style="display: flex;". */
}


.tab {
    display: flex;
    justify-content: center;
    align-items: bottom;
    width: 167px;
    height: 28px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    color: #cccccc;
    /* base color for inactive */
    background-color: white;
    /* base background */
    /* transition: color 0.2s ease, background-color 0.2s ease; */
}




/* Hover color override for all tabs */
.tab:hover {
    color: #888888 !important;
}

.tab.active {
    color: #000000;
    background-color: #cccccc;
}

.tab.inactive {
    color: #cccccc;
    background-color: white;
}

#scatter {
    font-family: 'Noto Sans', sans-serif;
}

.tableT {
    font-family: 'Noto Sans' !important;
    /* height: 280px !important; */
}

/* Make rows more compact */
.tableT .tabulator-row {
    height: 26px !important;
}

.tableT .tabulator-cell {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.tableT .tabulator-header {
    height: 29px !important;
}

.tableT .tabulator-tableholder {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

.tableT .tabulator-table {
    line-height: normal;
}

/* 
#table_red {
    width: 100%;
    border: 2px solid #0000ff !important;
}
    */
/*
#table_red:empty {
    display: none;*/
/* collapses completely when empty */
/* } */





#sendEmailBtn {
    border: none;
    height: 30px;
    width: 70px;
    border-radius: 4px;
    font-weight: bold;
    color: #37d;
    background-color: #bef;
    cursor: pointer;
    font-size: 18px !important;
    position: absolute;

    /* align-items: center; */
    align-items: top;
    justify-content: center;
}

.on {
    background-color: #333;
    /* dark gray */
    color: #000;
    /* black text */
}

.off {
    background-color: #ccc;
    /* very light gray */
    color: #999;
    /* light gray text */
}

#labelsBtn {
    border: none;
    height: 30px;
    width: 70px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.toggleBtn-on {
    color: #000;
    background-color: #bbb;
}

.toggleBtn-off {
    color: #bbb;
    background-color: #eee;
}

#polygonBtn {

    height: 30px;
    width: 170px !important;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.polygonBtn-on {
    border: 1px solid red;
    color: #000;
    background-color: #ffc0cb;
}

.polygonBtn-off {
    border: none;
    color: #bbb;
    background-color: #eee;
}



/* #infoIcon {
    cursor: pointer;
    display: inline-block;
} */


#infoPanel {
    position: absolute;
    left: 10px;
    top: 20px;
    line-height: 1.2;

    /* display: inline-block; */
    justify-content: left;
    /* horizontal centering */
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
    /* vertical centering */
    border: 1px solid black;
    /* padding: 8px; */
    color: black;
    background-color: white;
    font-size: 14px;
    width: 440px;
    height: 160px;
    z-index: 1000;
    display: none;
}

#infoPanel.visible {
    display: block;
}