@charset "utf-8";

.MiniSideTool, .Themes {
    overflow-y: auto;
    display: block
}

.MFHolder h3, .ThemeMenu li a, .Themes {
    color: #FFF
}

.MapContainer {
    position: relative
}

.MyMap {
    min-height: 500px;
    height: calc(100vh - 66px);
    display: block;
    background-color: #D5E8EB
}

@media only screen and (max-width:47.9735em) {
    .MyMap {
        height: calc(100vh - 66px - 50px);
        min-height: calc(320px - 66px)
    }
}

.MapComponent {
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
    display: block
}

.MiniSideTool {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 64px;
    height: calc(100vh - 66px);
    z-index: 401
}

.ThemeMenu {
    float: right;
    /*width: 64px;*/
    width: 92px;
    height: 100%;
    display: block;
    background-color: #23AD9D
}

    .ThemeMenu li {
        text-align: center;
        color: #FFF;
        font-size: 2rem;
        padding: 5px 0
    }

        .ThemeMenu li:hover {
            background-color: rgba(255,255,255,.16)
        }

        .ThemeMenu li span.Desc {
            /*font-size: .625rem;*/
            font-size: 1rem;
            line-height: 1.5em;
            display: block
        }

    .ThemeMenu .Title {
        margin-top: 5px
    }

    .ThemeMenu li.Title:hover {
        background-color: transparent
    }

    .ThemeMenu .Title .Circle {
        width: 3rem;
        height: 3rem;
        margin: 0 auto;
        line-height: 3rem;
        vertical-align: middle;
        display: block;
        background-color: #68C7A6;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%
    }

.Themes {
    float: right;
    width: 320px;
    height: 100%;
    overflow-y: auto;
    vertical-align: top;
    background-color: #1A706B;
    margin-right: 2px
}

.MFHolder h3 {
    font-size: 1.25rem;
    text-align: left;
    margin: 10px 40px 10px 10px
}

    .MFHolder h3 i {
        margin-right: .5em
    }

.MFHolder .btnClose {
    text-align: right;
    display: block;
    margin-top: -3rem;
    margin-right: 10px;
    margin-bottom: 10px
}

    .MFHolder .btnClose .fa-circle {
        color: rgba(220,220,220,.35)
    }

    .MFHolder .btnClose a:hover .fa-circle {
        color: rgba(186,186,186,.35)
    }

.MFHolder .MapToc li {
    /*padding: 6px 6px 6px 12px;*/
    padding: 0px 0px 0px 12px;
    margin-bottom: 2px
}

    .MFHolder .MapToc li.break {
        border-bottom: 1px solid rgba(188,223,211,.27);
        padding: 0;
        margin: 6px 12px
    }

    .MFHolder .MapToc li.Lyr:hover {
        background-color: rgba(0,0,0,.16)
    }

.MFHolder .MapToc input[type=checkbox], .MFHolder .MapToc input[type=radio] {
    position: absolute;
    left: -9999px
}

.MFHolder .MapToc label {
    position: relative;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
    vertical-align: top;
    display: inline-block;
    width: 100%;
    padding: 10px 10px 10px 0px;
}

.MFHolder .MapToc .siteName {
    position: relative;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0;
    vertical-align: top;
}

.MFHolder .MapToc label:before {
    content: "";
    background-color: rgba(255,255,255,.5);
    display: inline-block;
    position: absolute;
    left: -12px;
    top: 0px;
    width: 6px;
    height: 2.75rem;
}

    .MFHolder .MapToc .siteName::before {
        content: "";
        background-color: #61BEE9;
        display: inline-block;
        position: absolute;
        left: -12px;
        top: 0;
        width: 6px;
        height: 1.5rem
    }

    .MFHolder .MapToc .siteName.newtaipei::before {
        background-color: #A399D5;
    }

.TopTool, .UnderTool {
    position: absolute;
    left: 10px
}

.MFHolder .MapToc li.Lyr input[type=checkbox]:checked ~ label:before, .MFHolder .MapToc li.Lyr input[type=radio]:checked ~ label:before {
    background-color: #FFB297
}

.MFHolder .MapToc label + .Desc {
    margin-top: 5px
}

.MFHolder .MapToc .Desc {
    font-size: .75rem;
    line-height: 1.75em;
    color: #cbcbcb;
    float: right;
}

.MFHolder .MapToc li.Lyr:hover .Desc {
    color: #78efe8
}

.MFHolder .MapToc .Desc.DataTime i, .MFHolder .MapToc .Desc.Legend i {
    margin-right: .5em
}

.MFHolder .MapToc fieldset {
    padding-top: 5px
}

    .MFHolder .MapToc fieldset input[type=radio] {
        position: static
    }

    .MFHolder .MapToc fieldset label:before {
        content: none
    }

.MFHolder .MapToc .siteTable {
    width: calc(100% + 18px);
    margin-top: 5px;
    margin-left: -12px;
}

    .MFHolder .MapToc .siteTable th, .MFHolder .MapToc .siteTable td {
        color: #fff;
        font-size: .75rem;
        text-align: center;
        padding: 5px;
        border: 1px solid #1A706B;
    }

    .MFHolder .MapToc .siteTable thead th {
        background-color: #7DB3B0;
    }

    .MFHolder .MapToc .siteTable tbody td {
        background-color: #317E7A;
    }

@media only screen and (max-width:47.9735em) {
    .MiniSideTool {
        min-width: 32px;
        height: calc(100vh - 66px - 50px);
        min-height: calc(320px - 66px)
    }

    .ThemeMenu {
        width: 42px;
        overflow-y: auto
    }

        .ThemeMenu li {
            font-size: 1.4rem;
            padding: 8px 0;
        }

            .ThemeMenu li span.Desc {
                font-size: .5rem;
                display: none
            }

        .ThemeMenu .Title .Circle {
            width: 1.8rem;
            height: 1.8rem;
            line-height: 1.8rem;
        }

    .MFHolder {
        padding-bottom: 30px
    }
}

.TopTool {
    top: 10px;
    min-width: 200px;
    height: 48px;
    vertical-align: middle
}

.UnderTool {
    top: calc(100vh - 66px - 32px - 10px - 50px);
    width: 750px;
    min-height: 32px
}

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
    .UnderTool {
        top: calc(100vh - 66px - 32px - 10px - 50px - 22px)
    }
}

.UnderTool section {
    margin-bottom: 1rem
}

    .UnderTool section:last-child {
        margin-bottom: .5rem
    }

@media only screen and (max-width:47.9735em) {
    .UnderTool {
        top: calc(100vh - 66px - 32px - 10px - 50px - 90px);
        width: calc(100% - 32px - 20px)
    }

        .UnderTool .ItemsSet {
            overflow-y: hidden;
            overflow-x: auto
        }

        .UnderTool fieldset.QueryTool {
            height: 41px;
            white-space: nowrap;
            display: inline;
            vertical-align: top
        }

            .UnderTool fieldset.QueryTool .Legend {
                margin-right: 0
            }

                .UnderTool fieldset.QueryTool .Legend .Desc {
                    display: none
                }

        .UnderTool .MyGroupControls.Round label {
            margin-bottom: 0;
            margin-right: 2px
        }

        .UnderTool section {
            margin-bottom: 10px
        }

            .UnderTool section:last-child {
                margin-bottom: 0
            }
}

.QueryTool {
    display: flex;
    align-items: center;
}

fieldset.QueryTool .Legend {
    color: #1B6561;
    font-size: 1.125rem;
    margin-right: 8px;
    font-weight: 700;
}

    fieldset.QueryTool .Legend i {
        color: #1B6561;
        font-size: 1.25rem;
        margin-right: 6px
    }

    fieldset.QueryTool .Legend .Desc {
        font-weight: 700
    }

.MyGroupControls.Round label {
    color: #1B6561;
    border-color: #219089;
    background-color: rgba(255,255,255,.46);
    margin-right: 6px
}

    .MyGroupControls.Round input[type=radio]:checked + label, .MyGroupControls.Round label:hover, .MyGroupControls.RoundBullet input[type=radio]:checked + label {
        background-color: #219089
    }

.MyGroupControls.RoundBullet label {
    border-color: #219089;
    background-color: rgba(255,255,255,.46);
    color: #1B6561
}

    .MyGroupControls.RoundBullet label:hover {
        background-color: #219089;
        color: #FFF
    }

.gTimer .Ctrl, .gTimer .inTimer, .gTimer .inTimerOutput {
    display: inline-block
}

.gTimer .Ctrl {
    margin-right: .5rem
}

    .gTimer .Ctrl i {
        text-align: center;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.25rem;
        line-height: 2.5rem;
        background-color: #1A706B;
        color: #FFF;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        cursor: pointer
    }

        .gTimer .Ctrl i:hover {
            -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.54);
            box-shadow: 0 1px 4px 0 rgba(0,0,0,.54)
        }

        .gTimer .Ctrl i.Play {
            padding-left: 2px;
            width: calc(2.5rem - 2px)
        }

.gTimer .inTimerOutput {
    font-size: 1rem;
    font-weight: 700;
    background-color: rgba(255,255,255,.7);
    color: #1B6561;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px 1rem;
    margin-left: .5rem
}

input[type=range].inTimer {
    -webkit-appearance: none;
    margin: 8px 0;
    width: 400px;
    padding: 0
}

    input[type=range].inTimer:focus {
        outline: 0
    }

    input[type=range].inTimer::-webkit-slider-runnable-track {
        width: 100%;
        height: 14px;
        transition: .2s;
        background-color: rgba(33,144,137,.5);
        border-radius: 15px
    }

    input[type=range].inTimer::-webkit-slider-thumb {
        -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.54);
        box-shadow: 0 1px 4px 0 rgba(0,0,0,.54);
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        background-color: #1A706B;
        cursor: pointer;
        margin-top: -10px;
        -webkit-appearance: none
    }

    input[type=range].inTimer:focus::-webkit-slider-runnable-track {
        background-color: rgba(33,144,137,.7)
    }

    input[type=range].inTimer::-moz-range-track {
        width: 100%;
        height: 8px;
        transition: .2s;
        background-color: rgba(33,144,137,.7);
        border-radius: 15px
    }

    input[type=range].inTimer::-moz-range-thumb {
        box-shadow: 0 1px 4px 0 rgba(0,0,0,.54);
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        background-color: #1A706B;
        cursor: pointer
    }

    input[type=range].inTimer::-ms-track {
        width: 100%;
        height: 14px;
        cursor: pointer;
        transition: .2s;
        background: 0 0;
        border-color: transparent;
        color: transparent;
        margin: 11px 0
    }

    input[type=range].inTimer::-ms-fill-lower {
        background-color: #3aa39d;
        border: .2px solid #FFF;
        border-radius: 7px
    }

    input[type=range].inTimer::-ms-fill-upper {
        background: #c3eae8;
        border: .2px solid #FFF;
        border-radius: 7px
    }

    input[type=range].inTimer::-ms-thumb {
        height: 2rem;
        width: 2rem;
        border-radius: 50%;
        background: #1A706B;
        cursor: pointer;
        border: none;
        box-shadow: 0 1px 4px 0 rgba(0,0,0,.54)
    }

    input[type=range].inTimer:focus::-ms-fill-lower {
        background: #1A706B
    }

    input[type=range].inTimer:focus::-ms-fill-upper {
        background: #a9e7e4
    }

    input[type=range].inTimer::-ms-tooltip {
        display: none
    }

@media only screen and (max-width:47.9735em) {
    input[type=range].inTimer {
        width: calc(100% - 32px - 20px - 24px)
    }

    .gTimer .inTimerOutput {
        margin-left: 48px
    }
}

.leaflet-container {
    font-family: "\5FAE\8EDF\6B63\9ED1\9AD4",Arial,"Helvetica Neue",Helvetica,sans-serif
}

.leaflet-popup h5 {
    font-size: 1.25rem;
    color: #1B6561;
    font-weight: 700;
    line-height: 1.5rem;
    margin-bottom: .5rem;
    padding-left: 2px
}

    .leaflet-popup h5 i {
        color: #43A7A1
    }

        .leaflet-popup h5 i.right {
            margin-left: .5em
        }

.leaflet-popup table.DataTable {
    font-size: .875rem
}

    .leaflet-popup table.DataTable tr:hover {
        background-color: #eff6f7
    }

    .leaflet-popup table.DataTable td, .leaflet-popup table.DataTable th {
        line-height: 1.5em;
        vertical-align: top;
        padding: 2px 4px
    }

.leaflet-div-icon, .leaflet-tooltip {
    font-size: .875rem;
    line-height: 1.25em
}

.leaflet-popup table.DataTable th {
    width: 5rem;
    font-weight: 400;
    color: #555;
    text-align: right
}

    .leaflet-popup table.DataTable th:after {
        content: "";
        margin-left: .5em;
        border-right: 1px solid #adadad
    }

.leaflet-popup table.DataTable td {
    color: #333;
    padding-left: .5em;
    font-weight: 700
}

.leaflet-popup .UnderBar {
    margin-top: 2px;
    text-align: right
}

    .leaflet-popup .UnderBar .btn {
        font-size: .875rem;
        padding: 2px 6px;
        color: #1A706B;
        border: 1px solid #43A7A1;
        -webkit-transition: all .35s ease-out;
        -moz-transition: all .35s ease-out;
        -o-transition: all .35s ease-out;
        transition: all .35s ease-out
    }

        .leaflet-popup .UnderBar .btn:hover {
            background-color: #43A7A1;
            color: #FFF
        }

.leaflet-popup-content #divGragh {
    min-width: 300px;
    min-height: 200px;
}

.leaflet-tooltip {
    color: #333
}

.leaflet-div-icon {
    color: #333;
    background: rgba(249, 218, 130, .75);
    border: none
}

.leaflet-marker-icon.mSite1,
.leaflet-marker-icon.mSite2,
.leaflet-marker-icon.mSite3 {
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);
}

    .leaflet-marker-icon.mSite2 div, .leaflet-marker-icon.mSite3 div {
        font-size: 1rem;
        text-align: center;
        width: 100%;
        height: 100%;
        background-color: rgba(249, 218, 130, 1);
        color: #333
    }

.leaflet-marker-icon.mSite1 {
    border: 1px solid #5A5A5A;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

.leaflet-marker-icon.mSite2, .leaflet-marker-icon.mSite3 {
    border-width: 6px;
    border-style: solid;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

    .leaflet-marker-icon.mSite2 div {
        line-height: 3rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%
    }

    .leaflet-marker-icon.mSite3 div {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%
    }

        .leaflet-marker-icon.mSite3 div dd, .leaflet-marker-icon.mSite3 div dt {
            line-height: 1.5rem
        }

        .leaflet-marker-icon.mSite3 div dt {
            padding-top: .5rem
        }

        .leaflet-marker-icon.mSite3 div dd {
            font-size: 1rem;
            padding-bottom: .5rem
        }

.bg_taipei {
    background-color: #61BEE9;
}

.bg_newtaipei {
    background-color: #A399D5;
}

.boder_taipei {
    border-color: #61BEE9;
}

.boder_newtaipei {
    border-color: #A399D5;
}