@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');

:root {
    --text-brown: #796B63;
    --text-dark-grey: #5D5D5D;
    --button-brown: #8C8077;
    --button-background: #F6F6F6;
    --kraftpaper: #EADBC3;
    --light-kraftpaper: #F5EDEA;
    --menu-background: #EFF0EA;
    --green: #85A181;
    --red: #e06b6b;
    --white: #fff;
    --yellow: #e7d6b5;
    --usual-font-family: '微軟正黑體';
}

/* 取消ios按鈕藍色邊框 */
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    position: fixed;
}

a,
input,
div,
p {
    outline: none;
    -moz-outline-style: none;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) {
    select {
        -webkit-appearance: none;
        appearance: none;
    }
}

a:focus,
input:focus,
p:focus,
div:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    /* -webkit-user-modify: read-write-plaintext-only; */
}

/* .toggle_menu {
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    color: #005D50 !important;
    background-color: #fff;
    background-image: url(../../image/toggle_menu.png);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.location_out {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 4rem;
    background-color: #fff;
    background-image: url(../../image/icon-locate-out.png);
    background-size: 65%;
    background-position: center;
    background-repeat: no-repeat;
} */


#map_container {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    /* filter: blur(2px); 或 透明調低 */
}

.kxd-map-container .map-right-top-ctrl {
    /* 右上圖層tag */
    top: 3.5em !important;
}

.leaflet-control-attribution,
.leaflet-control-attribution a {
    color: var(--text-dark-grey);
    background-color: transparent !important;
}

#history_link {
    position: absolute;
    left: 0;
    top: 4em;
    z-index: 3000;
}


/* 地圖選單 及 地圖選單按鈕 */
#map_menu {
    position: absolute;
    top: 11rem;
    left: 3.3rem;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: calc(100vw - 8em); */
    max-width: 18.5em;
    margin: 0 1em;
    /* bottom: 7em; */
    /* padding: 0.6em; */
    /* color: var(--text-brown); */
    color: #333;
    /* background-color: #e7d6b5; */
    background-color: #fff;
    z-index: 9999;
    transition: all 0.1s ease-in;
    border-radius: 0.5rem;
}

.menu-content {
    background: var(--menu-background);
    border: var(--text-brown) solid 0.1em;
    border-radius: 0.7em;
    font-family: var(--usual-font-family);
    border-bottom: 1px solid #ccc;
}

.menu-content-item {
    font-size: 0.9em;
    padding: 0.3rem 0;
}

/* radio, checkbox */
input[type='radio'],
input[type='checkbox'] {
    height: 7.5px;
    -webkit-appearance: none;
    border: 1px solid #777;
    border-radius: 2px;
    cursor: pointer;
    outline: none !important;
    padding: 7.5px !important;
    position: relative;
    transition: all 0.2s ease-in;
    vertical-align: middle;
    margin: 3px 4px 3px 3px;
}

input[type='radio']:after,
input[type='checkbox']:after {
    content: '';
    position: absolute;
    transition: all 0.2s ease-in;
}

input[type='radio']:checked,
input[type='checkbox']:checked {
    background-color: #ffffff00;
    transition: all 0.2s ease-in;
    border: 1.5px solid var(--text-brown);
}

input[type='radio']:checked:after,
input[type='radio'][disabled='disabled']:before,
input[type='checkbox']:checked:after,
input[type='checkbox'][disabled='disabled']:before {
    /* color: var(--text-brown); */
    color: #005D50;
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 1.1em;
    left: 6px;
    top: -7px;
    -webkit-text-stroke: 1px var(--menu-background);
    transition: all 0.2s ease-in;
}

label input[type='radio']:checked+span::before,
label input[type='checkbox']:checked+span::before {
    border: 0.125rem solid var(--red) !important;
    background-color: var(--red) !important;
}

/* 地圖左側按鈕 */
#map_container #map_btn_tool_container {
    overflow: visible;
    margin: 5.5em 1em 1em 1em;
}

.map-btn-group .map-btn-menu {
    top: 0;
}

.map-btn.map-item-style {
    position: relative;
    background: var(--kraftpaper) !important;
    border: 0.063em solid var(--text-brown) !important;
    box-shadow: none !important;
    transition: all .25s ease-out;
}

.map-btn.map-item-style:hover {
    background: var(--green) !important;
}

.map-btn.map-item-style:hover .map-btn-icon {
    color: var(--white) !important;
}

.map-btn.map-item-style::after {
    content: '';
    position: absolute;
    top: calc(-3px - 0.04em);
    left: calc(-3px - 0.04em);
    background: var(--light-kraftpaper);
    z-index: -1;
    border-radius: 0.188em;
    width: 36px;
    height: 36px;
    border: none !important;
    box-shadow: 0 0.125em 0.25em rgb(0 0 0 / 20%);
}

.map-btn-text.map-item-style {
    border: none;
    margin-left: 3.5em;
    width: max-content;
}

.is-mobile .map-btn-text.map-item-style {
    display: none !important;
}

.map-btn-text.map-item-style::before {
    content: '';
    position: absolute;
    height: 0;
    border: 0.35em solid #c0303000;
    border-left: 0;
    border-right: 0.7em solid #fafafaf2;
    left: -0.7em;
    top: 0.25em;
    bottom: 0;
    margin: auto;
}

.map-btn {
    color: var(--text-brown) !important;
}

.map-btn-icon {
    transition: all .25s ease-out;
}

/* 左側按鈕ICON */
.map-btn-icon::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.map-btn-icon-zoom_in::before {
    content: "\f067" !important;
}

.map-btn-icon-zoom_out:before {
    content: "\f068" !important;
}

.map-btn-icon-boundary {
    -ms-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    -moz-transform: rotate(90deg) !important;
    -webkit-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important;
}

.map-btn-icon-boundary::before {
    content: "\f5ad" !important;
}

.map-btn-icon-layer::before {
    content: "\f5fd" !important;
}

.map-btn-icon-basemap::before {
    content: "\f279" !important;
    content: "\f03e" !important;
}

.map-btn-icon-boundary,
.map-btn-icon-layer,
.map-btn-icon-basemap {
    height: auto !important;
    width: auto !important;
    background-image: none !important;
}

/* hover框 */
.map-btn-menu::before {
    content: none !important;
}

.map-btn-menu.map-item-style {
    border: 0.063em solid var(--text-brown) !important;
    background-color: var(--light-kraftpaper) !important;
}

.map-btn-menu .menu-title {
    padding: 0.4em 0.5em !important;
    /* color: var(--text-brown) !important; */
    color: #333 !important;
    text-align: center;
}

.map-btn-menu .menu-close {
    color: var(--text-brown) !important;
}

.map-btn-menu .menu-list label {
    /* color: var(--text-brown) !important; */
    color: #333;
    font-size: 0.9em !important;
}

.menu-list label[data-v-eb650bc2]:hover {
    background-color: #81CBCF80 !important;
}

label input[type='radio']+span[data-v-eb650bc2]:after label {
    margin-bottom: 0px !important;
}

label>span {
    padding: 0.5em 1em !important;
    padding-left: 2.5em !important;
}

/* 地圖右上pane */
.map-pane-tag {
    background-color: var(--kraftpaper) !important;
    border: 1.2px solid var(--text-brown) !important;
}

.map-pane-tag:hover {
    background-color: var(--light-kraftpaper) !important;
}

.map-pane-tag:first-child {
    margin-right: 1em !important;
}

/* 地圖特定按鈕設定 */
.draggable-list label>span::before {
    color: var(--red) !important;
}

.menu-list.draggable-list>label>span {
    padding-left: 1.5em !important;
    flex-wrap: wrap;
}

.menu-list.draggable-list .drag-part {
    padding: 0 !important;
}

.menu-list.draggable-list .drag-part>span {
    color: var(--red) !important;
}

.menu-list .menu-range>span {
    background-color: var(--red) !important;
}

.draggable-list .menu-order {
    background-color: var(--red) !important;
}

/* bottom */
#bottom_menu {
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 0.25em;
    left: 0.25em;
    width: calc(100vw - 0.25em);
}

/* 地圖清單按鈕 */
#map_menu_btn {
    position: absolute;
    z-index: 999;
    top: 7.5rem;
    left: 1rem;
    height: 3em;
    width: 3em;
}

#map_menu_btn button {
    display: block;
    height: 3em;
    width: 3em;
    color: #005d50;
    background: var(--button-background);
    border: none;
    border-radius: 50%;
    transition: all 0.1s ease-in;
}

/* #map_menu_btn::before {
    content: '';
    height: 5em;
    width: 5em;
    position: absolute;
    left: -0.5em;
    top: -0.5em;
    background-image: url('../../image/btn-bg.png');
    background-size: cover;
} */

#map_menu_btn button i {
    -webkit-text-stroke: 1px #005d50;
    transition: all .25s ease-out;
}

#map_menu_btn button:hover {
    /* background: var(--kraftpaper); */
    background: #81CBCF80 !important;
}

#map_menu_btn button:hover i {
    color: #005d50 !important;
    -webkit-text-stroke: 1px #005d50;
}

/* 時間軸timebar */
#map_timebar {
    flex: 1;
}

.timebar {
    align-items: center;
    background-color: #ffffff00 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--usual-font-family) !important;
    color: var(--text-dark-grey) !important;
}

/* play button */
.timebar-ctrl {
    margin: auto 1em 0.7em 0.5em !important
}

.timebar-ctrl-btn {
    height: 4em !important;
    width: 4em !important;
    /* color: var(--text-brown) !important; */
    color: #005d50;
    background: var(--button-background) !important;
    border: none !important;
    border-radius: 50% !important;
    transition: all 0.1s ease-in !important;
    box-shadow: none !important;
}

/* .timebar-ctrl-btn::before {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 5em !important;
    width: 5em !important;
    position: absolute !important;
    left: -0.5em !important;
    top: -0.5em !important;
    background-image: url('../../image/btn-bg.png') !important;
    background-size: cover !important;
} */

.timebar-btn-play::before {
    /* content: '➤' !important; */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -webkit-text-stroke: 1px #005d50;
    color: #005d50;
}

.timebar-ctrl-btn:hover {
    /* background: var(--kraftpaper) !important; */
    background: #81CBCF80 !important;
    opacity: 1 !important;
}

.timebar-ctrl-btn:hover .timebar-btn-play::before {
    color: #464140 !important;
    -webkit-text-stroke: 1px #464140 !important;
}

/* row time */
.timebar-block {
    background: var(--menu-background);
    height: 2em !important;
}

.timebar-block-item>span {
    background-color: var(--green) !important;
    color: var(--white) !important;
    box-shadow: none !important;
    padding: 0.4em 0.4em !important;
    top: -3.5em !important;
}

.timebar-block-item>span::before {
    border-top: .9em solid transparent !important;
}

.timebar-block-item>span::after {
    border-top: .9em solid var(--green) !important;
}

.timebar-block::before,
.timebar-block::after {
    content: '';
    background-color: var(--menu-background);
    height: inherit;
    width: .5em;
    -ms-transform: translate(-.5em, 0);
    -o-transform: translate(-.5em, 0);
    -moz-transform: translate(-.5em, 0);
    -webkit-transform: translate(-.5em, 0);
    transform: translate(-.5em, 0);
    border-radius: 0.188em 0 0 0.188em;
}

.timebar-block::after {
    right: 0;
    -ms-transform: translate(.5em, 0);
    -o-transform: translate(.5em, 0);
    -moz-transform: translate(.5em, 0);
    -webkit-transform: translate(.5em, 0);
    transform: translate(.5em, 0);
    border-radius: 0 0.188em 0.188em 0;
}

.timebar-date-item::after {
    /* 時間中間的分隔線 */
    border-right: 0.05em solid var(--text-brown) !important;
}

.timebar-progress::before {
    /* 時間條白色 */
    top: 0.6em !important;
}

.timebar-value {
    /* 咖啡色進度條 */
    top: 0.6em !important;
    /* box-shadow: inset 3px 3px 4px #d8c2b7; */
    /* background-color: var(--text-brown) !important; */
    background-color: #81CBCF !important;
}

.timebar-hover-value {
    top: 0.6em !important;
    background-color: #005D50 !important;
}

/* block time(active time) */
.timebar-block-item.active>span {
    background: var(--light-kraftpaper) !important;
    top: -4.5em !important;
    line-height: 1.1em !important;
    padding: 0.5em 0.5em !important;
    box-shadow: 0em 0.2em 0.4em #0000004d !important;
    border-radius: 0.188em !important;
    font-size: .9em !important;
    color: var(--text-brown) !important;
}

.timebar-block-item.active>span::after {
    box-shadow: none !important;
    border-top: 1em solid var(--light-kraftpaper) !important;
}

/* colorbar */
#map_container .colorbar {
    padding: 0.2em;
    bottom: 9em;
    max-height: calc(100% - 16em);
    /* background-color: #000000aa; */
    background-color: #005D50;
}

.colorbar .colorbar-collapse {
    background-color: #009983;
}

#map_container .colorbar-title {
    font-weight: 900;
}

#map_container .colorbar .colorbar-content {
    margin: 0em 0.2em 1em 0.2em;
}

#map_container .colorbar .colorbar-content .colorbar-color-item {
    border-radius: 0;
    border-color: var(--text-dark-grey);
}

#map_container .colorbar .colorbar-content .colorbar-color-item>div,
#map_container .colorbar .colorbar-content .colorbar-value-item>div {
    width: fit-content;
    height: 2em;
}

#map_container .colorbar .colorbar-content .colorbar-value-item .colorbar-value {
    /* color level文字 */
    line-height: 1.8em;
}

#map_container .colorbar .colorbar-content .colorbar-color-item>div {
    width: 1.725em;
}

#map_container .colorbar .colorbar-content .colorbar-color-item .colorbar-color:first-child,
#map_container .colorbar .colorbar-content .colorbar-color-item .colorbar-color:last-child {
    border-radius: 0;
}

#map_container .colorbar .colorbar-content .colorbar-color-item .colorbar-color.cursor-color.active {
    border-radius: 0.126em;
}

#map_container .colorbar .colorbar-header .colorbar-help-btn {
    /* 右上？資訊 */
    width: 1.2em;
    height: 1.2em;
    top: 0.1em;
    right: 0.1em;
    display: none !important;
}

/* 森林遊樂區 */
/* 讓marker維持在svg(zindex:200)之上 */
.leaflet-recreationArea-pane .icon-maker {
    z-index: 201 !important;
}

/* 測站林火危險度 */
.stn-tooltip {
    padding: 0.2em;
    color: #837a73;
    background-color: #fafafa;
    border-radius: 0.25em;
    z-index: 3000;
}

.stn-tooltip .stn-tooltip-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em 2em 1em 1em;
    background-color: #eadcc2;
    border: 0.15em solid #ada193;
    border-radius: 0.25em;
}

.stn-tooltip .stn-tooltip-text {
    margin: 0 1em;
    text-align: center;
}

.stn-tooltip .stn-tooltip-text div:first-child {
    width: 5em;
    font-weight: bolder;
    font-size: 1.5em;
    white-space: normal;
}

.stn-tooltip .stn-tooltip-alert {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
    margin: 0 1em;
    padding: 0.4em;
    color: #ddd;
}

.stn-tooltip .stn-tooltip-alert-text {
    font-weight: bolder;
    font-size: 1.5em;
}

#loading_msg {
    position: fixed;
    top: 0;
    z-index: 9999;
}

.map-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.map-btn-icon.map-btn-icon-locate::before {
    content: "\f3c5";
}

.map-btn-icon.map-btn-icon-function::before {
    content: "\f002";
}

#function_menu {
    position: absolute;
    top: 29.5rem;
    left: 3.3rem;
    margin: 0 1rem;
    width: max-content;
    min-width: 8rem;
    border-radius: 0.188em;
    background: var(--white);
    border: 0.063em solid var(--text-brown) !important;
    background-color: var(--light-kraftpaper) !important;
    color: rgb(51, 51, 51) !important;
}

#function_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#function_menu li {
    padding: 0.25rem 0.5rem;
    border-radius: 0.188em;
    cursor: pointer;
}

#function_menu li:hover {
    /* background: var(--yellow); */
    background: #81CBCF80;
}

#function_menu li a {
    text-decoration: none;
    color: unset;
    cursor: pointer;
}

#coordinate_menu {
    position: absolute;
    /* top: 75px; */
    /* right: 60px; */
    top: 26rem;
    left: 4.3rem;
    z-index: 9999;
}

#geo_info {
    position: absolute;
    bottom: calc(8vh + 5px);
    right: 1rem;
    z-index: 9999;
    color: var(--text-brown);
    background-color: #e7d6b5;
    padding: 0.6rem;
}

.geo_info_title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 5px;
}

.geo_info_content {
    /* border: blue 1px dashed; */
    width: 45vw;
    max-width: 300px;
}

.geo_info_content img {
    display: block;
    width: 100%;
}

/* map ctrl custom */
.map-btn.map-item-style::after {
    display: none !important;
}

.map-btn {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    color: #005D50 !important;
}

.map-btn-text {
    color: #333;
    left: 1rem !important;
}

.map-btn-icon-menu {
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-image: url(../../image/icon-menu.png) !important;
}

.map-btn-icon-basemap {
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-image: url(../../image/icon-basemap.png) !important;
}

.map-btn-icon-boundary {
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-image: url(../../image/icon-boundary.png) !important;
    transform: rotate(0deg) !important;
}

.map-btn-icon-layer {
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-image: url(../../image/icon-layer.png) !important;
}

.map-btn-icon-search {
    width: 1.5rem !important;
    height: 1.5rem !important;
    background-image: url(../../image/icon-search.png) !important;
}

.map-btn-icon-basemap::before,
.map-btn-icon-boundary::before,
.map-btn-icon-layer::before {
    display: none;
}

.map-btn.map-item-style {
    background: #fff !important;
    border: none !important;
}

.map-btn.map-item-style:hover {
    background: #81CBCF80 !important;
}

label input[type='radio']+span[data-v-eb650bc2]:after {
    background-color: #005D50 !important;
}

.custom-btn-text.custom-item-style {
    border: none;
    margin-left: 3.5em;
    width: max-content;
}

.custom-btn-text.custom-item-style::before {
    content: '';
    position: absolute;
    height: 0;
    border: 0.35rem solid #c0303000;
    border-left: 0;
    border-right: 0.7em solid #fafafaf2;
    left: -0.7em;
    top: 0.25em;
    bottom: 0;
    margin: auto;
}

.custom-map-shadow {
    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.2);
}

.custom-item-style {
    background-color: rgba(250, 250, 250, 0.95);
    border-radius: 0.188em;
}

.custom-item-style:hover {
    background-color: #fffae4;
    border: 0.063em solid #777;
}

.custom-btn-text {
    position: absolute;
    top: 0.5rem;
    left: 0;
    padding: 0.4em 0.8em;
    margin-left: 4em;
    font-size: 0.8em;
}

.custom-btn-text {
    color: #333;
    left: 1rem !important;
    font-weight: bold;
    cursor: pointer;
}

/* map ctrl custom end*/

.warn_level_text {
    position: absolute;
    bottom: 42px;
    width: 5rem;
    text-align: center;
    color: #fff;
    font-weight: bold;
    background: rgb(160, 160, 160);
    border-radius: 5px;
    font-size: 1.3rem;
    border: 1px solid #fff;
}

.latlng_info {
    font-size: 0.6rem;
}

.warn_level_text.safe {
    background: rgb(0, 146, 69);
}

.warn_level_text.notice {
    background: rgb(140, 198, 63);
}

.warn_level_text.warning {
    background: rgb(252, 200, 33);
}

.warn_level_text.dangerous {
    background: rgb(247, 147, 30);
}

.warn_level_text.most_dangerous {
    background: rgb(255, 0, 0);
}

@media (max-width: 1280px) and (min-width: 1024px) {
    #coordinate_menu {
        top: unset;
        bottom: 10px;
    }
}

@media (max-width: 768px) {
    .kxd-map-container .map-right-top-ctrl {
        /* 右上圖層tag */
        top: 2.2em !important;
    }

    #map_menu_btn button {
        height: 3em;
        width: 3em;
    }

    .timebar-ctrl-btn {
        /* 刺蝟btn */
        margin-right: 0 !important;
        height: 3em !important;
        width: 3em !important;
    }

    /* .timebar-ctrl-btn::before {
        height: 4em !important;
        width: 4em !important;
    } */

    .timebar-ctrl-btn::after {
        height: 70px;
        width: 70px;
    }

    .timebar-block-item.active>span {
        top: -4.2em !important;
    }

    .timebar-block-item>span {
        top: -3em !important;
    }

    #map_container .colorbar {
        bottom: 12em;
    }

    #map_timebar .timebar-progress {
        margin-right: 2em;
    }

    #coordinate_menu {
        right: calc((100% - 375px) / 2);
    }
}

@media (max-width: 580px) {
    .map-btn-menu {
        max-height: 400px;
        overflow-y: auto;
    }
}

@media (max-width: 430px) {
    #coordinate_menu {
        width: 80vw;
    }

    #coordinate_menu .menu-content {
        max-height: calc(50vh - 64px - 75px);
    }

    #coordinate_menu .singleSpot input {
        width: calc(100% - 1.5em);
    }

    #coordinate_menu .multipleSpot input {
        width: calc(100% - 0.2rem);
    }
}

@media (max-width: 426px) {
    #map_container #map_btn_tool_container {
        margin: 4.4em 1em 1em 1em;
    }

    #map_menu {
        opacity: 0.8;
        top: 4.5rem;
        left: 3.3rem;
        bottom: unset;
    }

    #map_menu_btn {
        position: absolute;
        top: 4.5rem;
        left: 1rem;
    }

    #function_menu {
        top: 23rem;
    }

    #coordinate_menu {
        top: 19.5rem;
    }

    #coordinate_menu .menu-content-item-label>span:has(.special_span) {
        flex: unset;
    }
}

@media (max-width: 375px) {
    #coordinate_menu {
        width: 95vw;
        top: 23rem;
        left: 0;
        right: 0;
        margin: auto;
    }
}

@media (max-width: 320px) {
    .navbar-brand {
        font-size: larger;
    }

    .map-btn,
    #map-btn,
    #map_menu_btn button,
    .timebar-ctrl-btn {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    #map_menu {
        top: 3.5rem;
        left: 2.3rem;
    }

    #map_menu_btn {
        top: 3.5rem;
        left: 0.5rem;
    }

    #function_menu {
        top: 19.5rem;
        margin: unset;
    }

    #map_container #map_btn_tool_container {
        margin: 3.7em .5em .5em .5em;
    }

    #coordinate_menu {
        top: 20rem;
    }

}

/* 額外設定 */
@media (max-width: 1160px) {
    .timebar-date {
        display: none !important;
    }
}

.leaflet-tile-pane::before {
    /* content: ''; */
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 99999;
    background-image: url(../../image/background.png);
    opacity: 0.7;
}