:root {
    --map_bg_gradient_color: #212529;
}

body {
    background-color: #1b1b1d !important;
}

.logo {
    width: 250px;
}

table {
    margin: auto !important;
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
}

.bg-navy {
    background: rgb(34, 37, 45) !important;
}

.map_bg {
    background-size: 256px 128px;
    background-repeat:no-repeat;
    background-position:right top;
    border-top-right-radius: 0.25rem !important;
}

.text_shadow {
    text-shadow: 1px 1px 2px black;
}

.progress {
    height: 23px  
}

.progress-bar {
    display: table;
    font-size:15px;
}

.progress-bar > .percent {
    display: table-cell;
    vertical-align:middle;
    height: 23px;
    line-height:22px;
    font-size:14px;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
}

footer {
    margin-top: auto;
}

.footer_bottom {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.text-success-emphasis {
    color: #61e3a8 !important;
}

.text-danger-emphasis {
    color: #db5b68 !important;
}

.bg-warning-subtle-1 {
    background-color: #c5b34b !important;
}

#error_main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
}

@media (min-width: 768px) {
    .container-fluid {
        max-width: 1300px !important;
        width: 1300px !important;
    }

    header {
        min-width: 1300px !important;
    }

    footer {
        min-width: 1300px !important;
    }

    .modal {
        overflow-x:auto !important;
        overflow-y:auto !important;
    }

    .modal-xl {
        max-width: 900px !important;
        width: 900px !important;
    }

    .modal-dialog {
        padding: .75rem !important;
    }

    .navbar-collapse {
        max-width: 1300px !important;
        width: 1300px !important;
    }

    table.tb01 th.sharp {
        width: 6%;
    }

    table.tb01 th.name_1 {
        width: 63%;
    }

    table.tb01 th.time_1 {
        width: 20%;
    }

    table.tb01 th.name_2 {
        width: 74%;
    }

    table.tb01 th.time_2 {
        width: 25%;
    }

    table.tb01 th.ping {
        width: 11%;
    }
}

@media (max-width: 767px) {
    .modal-dialog {
        max-width: 100% !important;
        margin: .75rem !important;
    }

    .tb01 .head {
        display:none;
    }

    .tb01 {
        width: 100%;
    }

    table.tb01 td {
        display: block;
        width: 100%;
    }

    table.tb01 td {
        display: block;
        width: 100%;
    }

    table.tb01 td:before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight:bold;
        color: #777;
        display: block;
    }

    table.tb01 td:first-child {
        font-weight: bold;
        border-color: #cbccce !important;
        border-width:1px;
        background-color:#e2e3e5 !important;
    }
}

#data_map[data-mapname="c1m1_hotel"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c1m1_hotel.png");
}


#data_map[data-mapname="c1m2_streets"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c1m2_streets.png");
}

#data_map[data-mapname="c1m3_mall"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c1m3_mall.png");
}

#data_map[data-mapname="c1m4_atrium"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c1m4_atrium.png");
}

#data_map[data-mapname="c2m1_highway"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c2m1_highway.png");
}

#data_map[data-mapname="c2m2_fairgrounds"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c2m2_fairgrounds.png");
}

#data_map[data-mapname="c2m3_coaster"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c2m3_coaster.png");
}

#data_map[data-mapname="c2m4_barns"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c2m4_barns.png");
}

#data_map[data-mapname="c2m5_concert"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c2m5_concert.png");
}

#data_map[data-mapname="c3m1_plankcountry"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c3m1_plankcountry.png");
}

#data_map[data-mapname="c3m2_swamp"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c3m2_swamp.png");
}

#data_map[data-mapname="c3m3_shantytown"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c3m3_shantytown.png");
}

#data_map[data-mapname="c3m4_plantation"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c3m4_plantation.png");
}

#data_map[data-mapname="c4m1_milltown_a"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c4m1_milltown_a.png");
}

#data_map[data-mapname="c4m2_sugarmill_a"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c4m2_sugarmill_a.png");
}

#data_map[data-mapname="c4m3_sugarmill_b"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c4m3_sugarmill_b.png");
}

#data_map[data-mapname="c4m4_milltown_b"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c4m4_milltown_b.png");
}

#data_map[data-mapname="c4m5_milltown_escape"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c4m5_milltown_escape.png");
}

#data_map[data-mapname="c5m1_waterfront"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c5m1_waterfront.png");
}

#data_map[data-mapname="c5m2_park"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c5m2_park.png");
}

#data_map[data-mapname="c5m3_cemetery"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c5m3_cemetery.png");
}

#data_map[data-mapname="c5m4_quarter"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c5m4_quarter.png");
}

#data_map[data-mapname="c5m5_bridge"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c5m5_bridge.png");
}

#data_map[data-mapname="c6m1_riverbank"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c6m1_riverbank.png");
}

#data_map[data-mapname="c6m2_bedlam"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c6m2_bedlam.png");
}

#data_map[data-mapname="c6m3_port"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c6m3_port.png");
}

#data_map[data-mapname="c7m1_docks"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c7m1_docks.png");
}

#data_map[data-mapname="c7m2_barge"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c7m2_barge.png");
}

#data_map[data-mapname="c7m3_port"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c7m3_port.png");
}

#data_map[data-mapname="c8m1_apartment"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c8m1_apartment.png");
}

#data_map[data-mapname="c8m2_subway"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c8m2_subway.png");
}

#data_map[data-mapname="c8m3_sewers"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c8m3_sewers.png");
}

#data_map[data-mapname="c8m4_interior"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c8m4_interior.png");
}

#data_map[data-mapname="c8m5_rooftop"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c8m5_rooftop.png");
}

#data_map[data-mapname="c9m1_alleys"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c9m1_alleys.png");
}

#data_map[data-mapname="c9m2_lots"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c9m2_lots.png");
}

#data_map[data-mapname="c10m1_caves"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c10m1_caves.png");
}

#data_map[data-mapname="c10m2_drainage"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c10m2_drainage.png");
}

#data_map[data-mapname="c10m3_ranchhouse"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c10m3_ranchhouse.png");
}

#data_map[data-mapname="c10m4_mainstreet"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c10m4_mainstreet.png");
}

#data_map[data-mapname="c10m5_houseboat"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c10m5_houseboat.png");
}

#data_map[data-mapname="c11m1_greenhouse"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c11m1_greenhouse.png");
}

#data_map[data-mapname="c11m2_offices"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c11m2_offices.png");
}

#data_map[data-mapname="c11m3_garage"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c11m3_garage.png");
}

#data_map[data-mapname="c11m4_terminal"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c11m4_terminal.png");
}

#data_map[data-mapname="c11m5_runway"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c11m5_runway.png");
}

#data_map[data-mapname="c12m1_hilltop"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c12m1_hilltop.png");
}

#data_map[data-mapname="c12m2_traintunnel"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c12m2_traintunnel.png");
}

#data_map[data-mapname="c12m3_bridge"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c12m3_bridge.png");
}

#data_map[data-mapname="c12m4_barn"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c12m4_barn.png");
}

#data_map[data-mapname="c12m5_cornfield"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c12m5_cornfield.png");
}

#data_map[data-mapname="c13m1_alpinecreek"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c13m1_alpinecreek.png");
}

#data_map[data-mapname="c13m2_southpinestream"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c13m2_southpinestream.png");
}

#data_map[data-mapname="c13m3_memorialbridge"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c13m3_memorialbridge.png");
}

#data_map[data-mapname="c13m4_cutthroatcreek"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c13m4_cutthroatcreek.png");
}

#data_map[data-mapname="c14m1_junkyard"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c14m1_junkyard.png");
}

#data_map[data-mapname="c14m2_lighthouse"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/c14m2_lighthouse.png");
}

#data_map[data-mapname="addon_map"] {
    background-image: linear-gradient(to bottom, transparent 50%, var(--map_bg_gradient_color) 100%), linear-gradient(to left, transparent 50%, var(--map_bg_gradient_color) 100%), url("../img/map/addon_map.png");
}