*, *:before, *:after {
    box-sizing: border-box;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
    margin: 0;
    padding: 0;
}

html, body, .map-area, .map {
    height: 100%;
    width: 100vw;
    overflow: hidden;
    position: relative;
    line-height: initial;
}

.clickable {
    cursor: pointer;
}

.panel {
    position: absolute;
    opacity: 85%;
}

.panel .panel-title {
    font-family: 'Courier New', Courier, monospace;
    padding: 5px 5px 3px 5px;
    background-color: #333;
    display: inline-block;
    color: #ddd;
    line-height: .8em;
    font-weight: bold;
}

.panel .panel-title.inactive {
    background-color: #999;
}

.wrap {
    border: 2px #333 solid;
    background-color: #fff;
    width: 100%;
}

.filter-panel {
    top: 10px;
    left: 10px;
    width: calc(100vw - 20px);
    z-index: 10;
}

.filter {
    font-size: 1.3em;
    line-height: 2.4rem;
    width: 100%;
    border: none;
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: 'Courier New', Courier, monospace;
}

.filter-panel .suggestions {
    font-family: monospace;
    font-size: 1.5rem;
    padding: 5px;
    border-left: 2px solid #ccc;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    overflow-y: scroll;
    max-height: 250px;
    background-color: #fff;
}

.filter-panel .suggestions:empty {
    display: none;
}

.filter-panel .suggestions .suggestion {
    line-height: 2rem;
    padding-left: .5em;
    padding-right: .5em;
    cursor: pointer;
}

.filter-panel .suggestions .suggestion .name {
    font-weight: bold;
    padding-right: .5em;
}

.filter-panel .suggestions .suggestion .details {
    color: #666;
    font-size: .8em;
}

.filter-panel .suggestions .suggestion.active {
    background-color: #ccc;
}

.filter-panel .suggestions .suggestion:hover:not(.active) {
    background-color: #eee;
}

.log-panel {
    font-family: 'Courier New', Courier, monospace;
    bottom: 10px;
    left: 10px;
    width: calc(100vw - 20px);
}

.log-panel.bump {
    bottom: 35px;
}

.log-wrap.minimized {
    display: none;
}

.replay-panel {
    top: 85px;
    right: 10px;
    width: 300px;
    height: 133px;
}

.info-plate-panel {
    font-family: 'Courier New', Courier, monospace;
    top: 225px;
    right: 10px;
    min-width: 300px;
}

.info-plate, .replay-plate {
    padding: .25em;
    font-size: .85em;
}

.replay-plate div {
    margin-bottom: 5px;
}

#replay-seek {
    width: 100%;
}

.info-plate .title {
    font-size: 1.15rem;
    font-weight: bold;
    padding-left: .35em;
    border-left: 5px solid #333;
    margin-bottom: .25em;
}

.info-plate .description {
    margin-bottom: .25em;
    margin-top: .5em;
    max-width: 340px;
}

.info-plate.loading .title {
    border-left: 5px solid #999;
}

.info-plate .section .title {
    font-size: 1rem;
    border-left: none;
    margin-bottom: 0;
    padding-left: 0;
}

.info-plate .label {
    font-weight: bold;
}

.info-plate .inline-action-link {
    padding-left: .5em;
}

.info-plate .action-link {
    display: block;
}

.info-plate .label:after {
    content: ':';
    padding-right: .5em;
}

.info-plate .section {
    margin-top: .8em;
}

.info-plate .caption {
    color: #666;
}

.info-plate.loading,
.info-plate.loading a,
.info-plate.loading a:visited,
.info-plate.loading a:hover {
    background-color: #ddd !important; 
    color: #999 !important;
}

.log {
    width: 100%;
    max-height: 180px;
    overflow-y: scroll;
}

a, a:visited, a:hover {
    color: #000 !important; /* overwrites bootstrap */
    text-decoration: underline !important; /* overwrites bootstrap */
}

label {
    margin-bottom: 0 !important; /* overwrites bootstrap */
}

.log th {
    background-color: #ccc;
    text-align: left;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.log tr:hover {
    background-color: #eee;
}

.filter-wrap.error, .filter.error {
    color: red;
    border-color: red;
}

.input-wrap.disabled, .input.disabled {
    background-color: #ccc;
}

#multiplier {
    width: 200px;
}

#current-multiplier::after {
    content: 'x';
}