@font-face {
    font-family: myFirstFont;
    src: url("../ttf/Nunito-Light.ttf");
}
body {
    font-family: myFirstFont;
}
img.dx-flag{
    width: 24px;
}
img.call-item{
    width: 24px;
}
.alert {
    background-color: orange;
}
.new_call {
    background-color: greenyellow;
}

/* HEADER */
.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

#calllist-div {
    display: flex;
    flex-wrap: wrap;
}
.call-item-entry {
    display: flex;
    align-items: center;
    width: 25%;
    padding: 2px 4px;
    border-bottom: 1px solid #dee2e6;
    box-sizing: border-box;
    overflow: hidden;
}
.call-item-entry img.call-item {
    flex-shrink: 0;
    margin-right: 4px;
}
.call-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#dxcc-div {
    display: flex;
    flex-wrap: wrap;
}
.dxcc-item {
    display: flex;
    align-items: center;
    width: 33.33%;
    padding: 2px 4px;
    border-bottom: 1px solid #dee2e6;
    box-sizing: border-box;
    overflow: hidden;
}
.dxcc-item img.dx-flag {
    flex-shrink: 0;
    margin-right: 4px;
}
.dxcc-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#map {
    float: right;
    height: 92%;
    width:  100%;
}