body {
    --ctrl_title: 36px;
    --unit_title: 36px;
}
.popu-ctrl-container.fixed-at-left{
    z-index:9999;
}
.leaflet-marker-icon {
    background-color: transparent !important;
}
.leaflet-tooltip-label{
    border:none !important;
    box-shadow:none !important;
    background-color:transparent !important;
}
.pin_label {
    /*background-color: transparent !important;*/
    /*word-break: keep-all;*/
    white-space:nowrap;
}
.leaflet-tooltip-label.leaflet-tooltip-top:before {
    border-top-color: transparent;
}
.ctrl-title {
    height: 36px;
    height: var(--ctrl_title);
}
.ctrl-title > .dt {
    float: right;
    margin: 0 6px;
}
.ctrl-title select{
    margin-right:6px;
}
.ctrl-units {
    height: calc( 100% - 36px );
    height: calc( 100% - var(--unit_title) );
    /*padding:2px;*/
    position:relative;
}
.ctrl-unit {
    height: 50%;
    /*border: 1px #eee solid;*/
    border-radius: 6px;
    padding: 3px;
    transition: width ease-in-out .4s;
    transition-property: width, height;
    /*margin:4px;*/
}
body.max-screen{
    overflow:hidden;
}
.ctrl-unit.max-screen {
    position: absolute;
    z-index: 1001;
    width:100%;
    left: 0;
    top:0;
    height: 100%;
    background: white;
}
.ctrl-unit > .unit-title {
    width: 100%;
    background-color: #5b9bd5;
    color: white;
    height: 36px;
    height: var(--unit_title);
    border-radius: 6px 6px 0 0;
    margin-bottom: 0px;
    padding-top: 6px;
    font-size: 1.2em;
    text-align: center;
    border: 1px #e5e5e5 solid;
    border-bottom: none;
}
.ctrl-unit > .unit-title > .glyphicon{
    position: absolute;
    right: 1.25rem;
    top:1.25rem;
    opacity: .15;
    cursor: pointer;
}
.flood-unit > .unit-title > .glyphicon {
    opacity: .3;
}
.ctrl-unit > .unit-title > .glyphicon:hover{
    opacity: .8;
}
.ctrl-unit .meter-chart-container {
    height:100% !important;
}
.ctrl-unit > .unit-content {
    height: calc( 100% - 36px ) !important;
    height: calc( 100% - var(--unit_title) ) !important;
    border: 1px #eee solid;
    border-top:none;
    border-radius:0 0 6px 6px;
}
body.f-adv .flood-unit > .unit-title {
    background-color: red !important;
}
.border-red{
    border:1px red dashed;
    padding-top:4px;
    margin-bottom:-4px;
    z-index:999;
}
body.f-adv .flood-unit.warn {
    border: 2px red dashed;
    animation: main_warn 2.8s infinite alternate;
    -moz-animation: main_warn 0.8s infinite alternate;
    -o-animation: main_warn 0.8s infinite alternate;
    -webkit-animation: main_warn 0.8s infinite alternate;
}
@keyframes main_warn {
    0% {
        border-style: dashed;
    }

    50% {
        border-style: dotted;
    }
}

@-moz-keyframes main_warn {
    0% {
        border-style: dashed;
    }

    50% {
        border-style: dotted;
    }
}

@-webkit-keyframes main_warn {
    0% {
        border-style: dashed;
    }

    50% {
        border-style: dotted;
    }
}

@-o-keyframes main_warn {
    0% {
        border-style: dashed;
    }

    50% {
        border-style: dotted;
    }
}
.ctrl-unit > .unit-content .data {
    color: #337ab7;
}
.ctrl-unit > .unit-title{
    border:none;
}
.ctrl-unit > .unit-content {
    border: 1px #ccc solid;
}
#chart-f24h {
    height: calc( 100% - 8rem );
}
#chart-r24h {
    margin-top:4rem; /*為切齊f-chart*/
    height: calc( 100% - 8rem );
}
#chart-s24h {
    /*margin-top: 2rem;*/ /*為切齊f-chart*/
    height: calc(100% - 8rem);
}
.highcharts-label .max-point{
    display:inline-block;
    margin-top:-9px;
}
body.f-adv .rain-unit > .unit-content > .row:first-child {
    padding-top: .5rem;
}

body.f-adv .rain-unit > .unit-content > .row {
    line-height: .75;
    margin-left: 0;
    margin-right: 0;
}
body.f-adv .rain-unit > .unit-content > .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.flood-unit > .unit-content > .row:first-child {
    padding-top: .5rem;
}
.flood-unit > .unit-content > .row {
    line-height: .75;
    margin-left: 0;
    margin-right: 0;
}
.flood-unit > .unit-content > .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.flood-unit > .unit-content > .row img {
    margin-top:-.5rem;
}
.rain-unit select {
    height: 18px;
    padding: 0px 4px;
    margin-right: 4px;
}
.check-unit.none-sewer-data .s-container {
    display: inherit !important;
}
.check-unit.none-sewer-data .s-container.s-sewer, .check-unit.none-sewer-data .s-ctrl {
    display: none !important;
}
.check-unit img, .flood-unit img {
    width: 1.2em;
    margin-left: 3px;
}
.check-unit .bootstrap-table {
    padding:4px;
    height: calc( 100% - 75px );
}
.check-unit table{
    height:100%;
}
.check-unit .table > tbody > tr > td {
    padding: 0 8px;
}
.check-unit .table > thead > tr > th {
    line-height: 1;
   /* background-color: #abebf5;
    color: white;*/
}
.check-unit:not(.s-sewer) .s-sewer {
    display: none;
}
.check-unit.s-sewer .s-container:not(.s-sewer) {
    display: none;
}
.check-unit .s-ctrl {
    cursor: pointer;
    position: absolute;
    right: 3rem;
    font-size: 14px;
    opacity: .75;
    font-weight:100;
}
.check-unit > .unit-content > .s-container{
    width:100%;
    height:100%;
}
.check-unit > .unit-content > .s-sewer > .row:first-child {
    padding-top: .5rem;
}

.check-unit > .unit-content > .s-sewer > .row {
    line-height: .75;
    margin-left: 0;
    margin-right: 0;
}

.check-unit > .unit-content > .s-sewer > .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.cctv-unit > .unit-content .carousel, .cctv-unit > .unit-content .carousel > .carousel-inner, .cctv-unit > .unit-content .carousel > .carousel-inner > .carousel-item, .cctv-unit > .unit-content img, .cctv-unit > .unit-content iframe,
.pic-unit > .unit-content .carousel, .pic-unit > .unit-content .carousel > .carousel-inner, .pic-unit > .unit-content .carousel > .carousel-inner > .carousel-item, .pic-unit > .unit-content img {
    height: 100%;
    width: 100%;
}
.pic-unit > .unit-content img {
    height: 100%;
    width: auto;
    margin: auto;
}
.cctv-unit .carousel-indicators, .pic-unit .carousel-indicators{
    display:none;
}
.no-data{
    display:none;
    position:absolute;
    left:6px;
    bottom:6px;
    color:black;
}
.carousel-control {
    opacity: .2;
}
.ctrl-unit .carousel-indicators{
    opacity:.5;
}
.ctrl-unit .carousel-indicators:hover {
    opacity:.9;
}
.cctv-unit .carousel-caption {
    right: inherit;
    left: .8em;
    padding-bottom: 0px;
    bottom: 2px;
    text-align: left;
    font-weight: bold;
    line-height: 1.1;
}

.streetview-ctrl {
    position: absolute;
    right: 3rem;
    top: 1.2rem;
    display:none;
 
}
.streetview-ctrl a {
    color: #eee;
    cursor: pointer;
    font-weight:100;
}
.streetview-ctrl a:hover {
    color: #cfcfcf;
}
.list-container .search .form-control {
    width: calc( 100% - 60px );
}

.list-container .meter-list-count {
    /*line-height:2;*/
    padding-top: 7px;
    float: right;
}

    .list-container .meter-list-count::before {
        content: "共 ";
    }

    .list-container .meter-list-count::after {
        content: " 筆";
    }

.fixed-at-left.fixed-single > .fix-popu-ctrl-toleft {
    width: 356px;
}
.list-container .fixed-table-container{
    padding-bottom:0 !important;
}

.modal-dialog-下水道-full-window .highcharts-legend text {
    margin-top:.3rem;
    font-size: 1.2rem !important;
}
/*.check-unit .table > thead > tr > th:first-child{
    border-radius:8px 0 0 0;
}
.check-unit .table > thead > tr > th:last-child {
    border-radius: 0 8px 0 0;
}*/
.meter-chart-container .highcharts-data-labels > .highcharts-label{
    opacity:1 !important;
}
.meter-chart-container .highcharts-data-labels > .highcharts-label > span{ /*> .series-name-label {*/
    font-size: .8em !important;
    margin-top: .5em !important;
    white-space: nowrap
}
/*.series-name-label {
    margin-top: 8px;
}*/
@media (max-height: 655px) {
    .check-unit .th-inner {
        padding: 0 .75rem !important;
    }
}
@media (max-width: 768px) {
    body{
        padding:6px;
    }


    .btn-confirm{
        margin-top:6px;
        width:100%;
    }
    .ctrl-title {
        height: auto;
        padding:0 2vw;
        text-align:initial !important;
    }
    .ctrl-title .sensor-name {
        font-size: 2.2rem !important;
    }
    .ctrl-title > label{
        display: inline-grid;
        margin-top: 1.5rem;
    }
    .ctrl-units {
        height: 100%;
        padding: 6px 8px;
    }
    .ctrl-unit{
        height:auto;
        min-height:50%;
    }
    .ctrl-unit > .unit-content {
        min-height: 240px !important;
        height:auto !important;
    }
    .unit-title .glyphicon-resize-full{
        display:none;
    }
    #chart-r24h {
        margin-top:1px;
    }

    body.f-adv .ctrl-units {
        padding: 2vw 2vw;
    }

    body.f-adv .ctrl-units {
        display: grid;
    }
    body.f-adv .flood-unit{
        order:0;
    }
    body.f-adv .check-unit {
        order: 2;
    }
    body.f-adv .rain-unit {
        order: 1;
    }
    body.f-adv .map-unit {
        order: 3;
    }
    body.f-adv .cctv-unit {
        order: 4;
    }
    body.f-adv .pic-unit {
        order: 5;
    }

    body.f-adv .ctrl-unit {
        height: 80vh;
       /* min-height: 80vh;*/
        max-height: 500px;
        width: 96vw;
    }
    body.f-adv .ctrl-unit > .unit-content {
        height: calc(100% - var(--unit_title)) !important;
    }
    body.f-adv #chart-f24h, body.f-adv #chart-s24h {
        padding-right: 2rem;
    }
}
 /* light mode */
/*:root {
    --background-color: #ffffff;
    background-color: var(--background-color);
    --text-color: #292b2c;
    --hilight-color: #0275d8;
    --panel-border-color: #eee;
    --title-bg-color: #5b9bd5;
    --table-border-color: #ddd;
    --input-bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1f1836;
        --text-color: #c0c0c0;
        --hilight-color: #8db4d6;
        --panel-border-color: rgba(68, 170, 213, 0.175);
        --title-bg-color: #4168df;
        --title-bg-color: #00008B;
        --title-bg-color: rgba(68, 170, 213, 0.25);
        --table-border-color: rgba(68, 170, 213, 0.75);
        --input-bg-color: rgba(0, 0, 0, 0.75);
    }


    .highcharts-color-0 {
        fill: #0460ba;
        stroke: #0460ba;
    }

    .highcharts-color-1 {
        fill: #9696ab;
        stroke: #9696ab;
    }
}

body {
    background-color: var(--background-color);
    color:var(--text-color);
}

.highcharts-background {
    fill: var(--background-color);
}

.highcharts-container text {
    fill: var(--text-color);
}

.highcharts-subtitle,
.highcharts-credits,
.highcharts-axis-title {
    fill-opacity: 0.7;
}

.highcharts-grid-line {
    stroke: var(--text-color);
    stroke-opacity: 0.2;
}

.highcharts-tooltip-box {
    fill: var(--background-color);
}

.highcharts-column-series rect.highcharts-point {
    stroke: var(--background-color);
}
.ctrl-unit > .unit-title,.ctrl-unit > .unit-content {
    border: 1px var(--panel-border-color) solid;
}
.ctrl-unit > .unit-title{
    border-bottom:none;
}
.ctrl-unit > .unit-content {
    border-top: none;
}
.ctrl-unit > .unit-title {
    background-color:var(--title-bg-color);
}
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid var(--table-border-color);
}
.unit-content select {
    background-color: var(--input-bg-color);
}
.fix-popu-ctrl-toleft.selected:not(.fixed-show) > .jsPanel-hdr {
    background-color: var(--title-bg-color) !important;
}
.leaflet-container {
    background-color:transparent !important;
}
.meter-chart-container .highcharts-data-labels > .highcharts-label >span>span{
    color:var(--text-color) !important;
}
*/