:root {
    --map_bg_gradient_color: rgb(26, 26, 26);
}

body {
    background-color: #555;
}

table {
    margin: auto !important;
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
}

.bg-navy {
    background: rgb(26, 26, 26) !important;
}

.bg-black {
    background-color: rgb(0, 0, 0, 0.4) !important;
}

.video-container {
    position: fixed;
    width: 100%;
    min-width: 1600px;
    top: -100%;
    bottom: -100%;
    left: 50%;
}

video {
    position: relative;
    width:100%;
    height:100%;
    left: -50%;
}

.inset {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: -100%;
}

.absolute {
    position: absolute;
}

.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 3px 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%);
}

.bg-dot {
    background-image: url(../img/dot.svg);
}

.parent {
    display: table;
    width: 100%;
    height: 100%;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

.container-fluid {
    max-width: 1300px !important;
    width: 1300px !important;
}

header {
    min-width: 1300px !important;
}

footer {
    min-width: 1300px !important;
}

.fs-1 {
    font-size: 100px !important;
    padding:10px 0;
}

.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%;
}

#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");
}