body {
    background-color: #fff;
    font-size: 16px;
    font-family: Microsoft JhengHei;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

.btn > i.fa, a > i.fa {
    margin-right: 5px;
}

.form-control {
    height: calc(1.3em + 0.75rem + 2px);
}

.btn {
    padding: 0.2rem 0.75rem;
}

.text-red {
    color: #f00;
}

.text-green {
    color: #008800;
}

nav.navbar-default {
    background-color: #fff;
    transition: all .4s;
}

#page-wrapper {
    transition: all .4s;
}

    #page-wrapper .navbar-fixed-top {
        background-color: #fff;
        border-bottom-color: #b4b4b4 !important;
    }

.navbar-minimalize {
    background-color: transparent;
    border: none;
    color: #707070;
    font-size: 20px;
}

.nav.navbar-right .dropdown-menu {
    left: auto;
    right: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.nav.navbar-right > li > a {
    color: #707070;
}

.navbar-top-links li a {
    padding: 20px 10px;
}

.navbar-header {
    display: flex;
    align-items: center;
}

    .navbar-header .title {
        display: inline-block;
        font-size: 22px;
        color: #313d6e;
    }

.home img {
    height: 47px;
}

.show > a {
    outline: 0;
}

body.fixed-nav #wrapper .navbar-static-side, body.fixed-nav #wrapper #page-wrapper {
    margin-top: 0px;
    padding-top: 70px;
}

body.fixed-sidebar.mini-navbar .nav-label, body.fixed-sidebar.mini-navbar .navbar-default .nav li a span, body.canvas-menu.mini-navbar .nav-label, body.canvas-menu.mini-navbar .navbar-default .nav li a span {
    display: none;
}

body.fixed-sidebar.mini-navbar .navbar-default .nav > li > a, body.canvas-menu.mini-navbar .navbar-default .nav > li > a {
    font-size: 16px;
}


body.fixed-sidebar.mini-navbar #page-wrapper {
    margin-left: 70px;
    width: calc(100% - 70px);
}

.fixed-nav .slimScrollDiv #side-menu {
    padding-bottom: 0px;
}

body.mini-navbar #menu {
    width: 70px;
}

body.mini-navbar .nav-second-level {
    display: none;
}

body.fixed-sidebar.mini-navbar .navbar-static-side {
    width: 70px;
}

.loading {
    position: fixed;
    border-radius: 100%;
    background-color: #fff;
    width: 50px;
    height: 50px;
    left: 50%;
    top: -60px;
    margin-top: -25px;
    margin-left: -25px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 45px;
    font-size: 25px;
    opacity: 0;
    transition: all ease .5s;
    z-index: 9999;
}

    .loading.show {
        top: 15%;
        opacity: 1;
    }

/*.wrapper-content {
    margin-left: 70px;
}*/
/*#side-menu {
    position: fixed;
    top: 0px;
    bottom: 0px;
    overflow-y: auto;
    width: 70px;
}*/
#side-menu li {
    list-style: none;
    position: relative;
}

    #side-menu li.active {
        background: transparent;
        border: none;
    }

    #side-menu li > a {
        color: #707070;
        padding: 13px 15px;
        margin: 3px 9px;
        border-radius: 2px;
    }

        #side-menu li > a:hover, #side-menu li.active > a, .navbar-default .nav li > a:focus {
            background-color: #fff;
            color: #000;
            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
        }

            #side-menu li.active > a::after {
                content: "";
                background-color: #4cb0c9;
                display: block;
                height: 44px;
                position: absolute;
                width: 3px;
                top: 7px;
                right: 5px;
                border-radius: 1px;
            }

        #side-menu li > a img {
            width: 22px;
        }

#side-menu > li > ul > li a {
    display: block;
    padding: 10px 10px 10px 15px;
}

#side-menu .nav-count {
    content: "0";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    line-height: 14px;
    top: 10px;
    left: 40px;
    text-align: center;
    background-color: rgba(0,0,0,.5);
    border-radius: 30%;
    font-size: 10px;
}

#side-menu .nav-label {
    margin-left: 10px;
}

.fixed-sidebar.mini-navbar #side-menu .nav-count {
    display: none;
}

.mini-navbar #side-menu > li > ul {
    display: none;
    position: absolute;
    background-color: #FFF;
    padding: 5px;
    min-width: 160px;
    left: 66px;
    top: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
    margin-top: 3px;
}

.mini-navbar #side-menu > li:hover > ul {
    display: block;
}

.box-frame {
    background-color: #f2f9ff;
    padding: 20px;
    margin-bottom: 20px;
}

    .box-frame .row {
        margin-right: -10px;
        margin-left: -10px;
    }

        .box-frame .row > .col, .box-frame .row > [class*="col-"] {
            padding-right: 10px;
            padding-left: 10px;
        }

.box-title {
    background-color: #313d6e;
    color: #fff;
    padding: 5px 10px;
    position: relative;
}

.box-body {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 20px;
}

    .box-body.light-blue {
        background-color: #f2f9ff;
    }

    .box-body > .box-body {
        margin-bottom: 0px;
    }

.ibox-tools {
    top: 5px;
}

    .ibox-tools a {
        color: #fff !important;
    }

        .ibox-tools a i {
            margin-right: 0px;
        }

/*feature-panel樣式*/
.feature-panel {
    transition: all ease .4s;
}

    .feature-panel.left.open {
        left: 220px;
    }

.mini-navbar .feature-panel.left.open {
    left: 70px;
}

.table-responsive table {
    background-color: #fff;
    border-spacing: 0;
}

    .table-responsive table th, .table-responsive table td {
        white-space: nowrap;
        text-align: center;
        vertical-align: middle !important;
    }

.table-responsive .dataTables_wrapper {
    padding-right: 0px;
    padding-left: 0px;
}
/*.table-bordered > thead > tr > th, .table-bordered > thead > tr > td {
    background-color: #313d6e;
    color: #fff;
}*/
.table.table-bordered > thead:first-child > tr:first-child > th {
    border-top: 1px solid #e7eaec;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    background-color: #F5F5F6;
}

    table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
        bottom: 0.5em;
    }

    table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
        bottom: 0.5em;
    }

.feature-panel .header {
    margin-top: 70px;
    height: 40px;
    background-color: #2c7cbd;
    color: #fff;
}

    /*.feature-panel .body {
    margin-top: 100px;
}*/

    .feature-panel .header i {
        margin-right: 5px;
    }

.crud .search {
    margin-bottom: 10px;
}

/*owl-carousel*/
.owl-carousel {
}

    .owl-carousel .owl-nav {
        position: absolute;
        top: 50%;
        margin-top: -20px;
        width: 100%;
        opacity: 0;
        transition: all ease .5s;
    }

    .owl-carousel:hover .owl-nav {
        opacity: 1;
    }

    .owl-carousel .owl-item .memo {
        position: absolute;
        height: 30px;
        background-color: rgba(0,0,0,.5);
        width: 100%;
        bottom: -30px;
        color: #fff;
        padding: 5px;
        font-size: 14px;
        transition: all ease .5s;
    }

    .owl-carousel:hover .owl-item .memo {
        bottom: 0px;
    }

    .owl-carousel .owl-prev, .owl-carousel .owl-next {
        width: 20px;
        height: 40px;
        background-color: rgba(0,0,0,.5);
        text-align: center;
        line-height: 40px;
        color: #fff;
        position: absolute;
    }

    .owl-carousel .owl-prev {
        left: 0px;
    }

    .owl-carousel .owl-next {
        right: 0px;
    }

    .owl-carousel .owl-prev:before {
        content: "\f104";
        font-family: FontAwesome;
    }

    .owl-carousel .owl-next:before {
        content: "\f105";
        font-family: FontAwesome;
    }

#map .ol-marker {
    left: -15px;
    bottom: 0px;
    width: 30px;
    height: 30px;
}

#map .ol-popup {
    bottom: 40px;
}

#map .station {
    width: 30px;
    height: 30px;
    background-size: contain;
    /*background-color: #fff;
    border-radius: 100%;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.5);*/
}

    /*#map .station::after {
        content: "";
        border-radius: 100%;
        background-color: #808080;
        position: absolute;
        width: 16px;
        height: 16px;
        margin-left: 2px;
        margin-top: 2px;
    }*/

    #map .station.rain {
        background-image: url("/Images/Map/ie_rain_station.png");
    }

        #map .station.rain.warning0 {
            background-image: url("/Images/Map/ie_rain_station_warning0.png");
        }

        #map .station.rain.warning1 {
            background-image: url("/Images/Map/ie_rain_station_warning1.png");
        }

        #map .station.rain.warning2 {
            background-image: url("/Images/Map/ie_rain_station_warning2.png");
        }

        #map .station.rain.warning3 {
            background-image: url("/Images/Map/ie_rain_station_warning3.png");
        }

    #map .station.level {
        background-image: url("/Images/Map/ie_water_station.png");
    }

        #map .station.level.warning1 {
            background-image: url("/Images/Map/ie_water_station_warning1.png");
        }

        #map .station.level.warning2 {
            background-image: url("/Images/Map/ie_water_station_warning2.png");
        }

        #map .station.level.warning3 {
            background-image: url("/Images/Map/ie_water_station_warning3.png");
        }

    #map .station.levelPT {
        background-image: url("/Images/Map/ie_water_station.png");
    }

        #map .station.levelPT.warning1 {
            background-image: url("/Images/Map/ie_water_station_warning1.png");
        }

        #map .station.levelPT.warning2 {
            background-image: url("/Images/Map/ie_water_station_warning2.png");
        }

        #map .station.levelPT.warning3 {
            background-image: url("/Images/Map/ie_water_station_warning3.png");
        }

    #map .station.sensor {
        background-image: url("/Images/Map/ie_sensor.png");
    }

        #map .station.sensor.warning0 {
            background-image: url("/Images/Map/ie_sensor_warning0.png");
        }


    #map .station.powder {
        background-image: url("/Images/Map/ie_powder.png");
    }

    #map .station.tilt {
        background-image: url("/Images/Map/ie_tilt.png");
    }

    #map .station.cctv {
        background-image: url("/Images/Map/ie_cctv.png");
    }

    #map .station.flood {
        background-image: url("/Images/Map/ie_flood_warning.png");
    }

#map .ol-popup {
    width: 300px;
}

#map .ol-marker-layer {
    position: absolute;
    bottom: 1em;
    left: .5em;
    padding: 8px 8px 14px 8px;
    font-size: 12px;
}

    #map .ol-marker-layer button {
        display: block;
        margin: 1px;
        padding: 0;
        color: #555;
        font-size: 2em;
        text-decoration: none;
        text-align: center;
        height: 1.4em;
        width: 1.4em;
        line-height: 1em;
        background-color: #fefefe;
        border-radius: 2px;
        border: 1px solid #ddd;
    }

        #map .ol-marker-layer button::-moz-focus-inner {
            border: none;
            padding: 0;
        }

#map .ol-marker-layer-check {
    position: absolute;
    bottom: 1em;
    left: .5em;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px 8px 14px 8px;
}

    #map .ol-marker-layer-check label {
        white-space: nowrap;
    }

        #map .ol-marker-layer-check label .station {
            display: inline-block;
            margin: 0 5px -10px 5px;
        }

        #map .ol-marker-layer-check label .stationPT {
            display: inline-block;
            margin: 0 5px -10px 5px;
        }

#map .ol-marker-layer-btn {
    background-image: url("/Images/layers.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.select ul {
    padding: 0px;
    margin-bottom: 0px;
}

.select li {
    display: inline-block;
    padding: 5px;
}

    .select li a {
        padding: 3px 5px;
    }

        .select li a.active, .select li a:hover {
            background-color: #55c4e0;
            border-radius: 5px;
            color: #fff !important;
        }

    .select li + li:before {
        content: "|";
        margin-right: 10px;
    }

/* Collapse
---------------------------------- */
.panel-group .panel-default {
    border-color: #eaeaea;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

.panel-group .panel-heading {
    padding: 0;
    border-radius: 0;
    border: none;
}

    .panel-group .panel-heading a {
        font-weight: 400;
        display: inline-block;
        width: 100%;
        position: relative;
        text-decoration: none;
        padding: 10px 40px 10px 15px;
        color: inherit;
    }

        .panel-group .panel-heading a:after {
            font-family: "FontAwesome";
            content: "\f146";
            position: absolute;
            right: 15px;
            font-size: 14px;
            font-weight: 300;
            top: 50%;
            line-height: 1;
            margin-top: -7px;
        }

        .panel-group .panel-heading a.collapsed:after {
            content: "\f0fe";
        }

.accordion-sub a {
    color: #000;
    position: relative;
    padding-left: 15px;
    margin-bottom: 0.5rem;
    display: block;
}

    .accordion-sub a:before {
        font-family: "FontAwesome";
        content: "\f146";
        position: absolute;
        left: 0px;
        font-size: 14px;
        font-weight: 300;
        top: 50%;
        line-height: 1;
        margin-top: -7px;
    }

    .accordion-sub a.collapsed:before {
        content: "\f0fe";
    }

.accordion-sub .panel-collapse {
    padding-left: 15px;
}

@media (max-width:767px) {
    .home img {
        height: 35px;
    }

    .navbar-header .title {
    }

    .nav.navbar-right > li > a {
        width: 60px;
        text-align: center;
    }

        .nav.navbar-right > li > a span {
            display: none;
        }

    .fixed-sidebar.body-small .navbar-static-side {
        display: block;
        width: 0px;
    }

    body.body-small.fixed-sidebar.mini-navbar .navbar-static-side {
        width: 70px;
    }

    body.body-small.fixed-sidebar.mini-navbar #page-wrapper {
        margin-left: 70px;
        width: calc(100% - 70px);
    }

    body.fixed-sidebar.mini-navbar #side-menu a {
        display: block;
    }

    .feature-panel.left.open {
        left: 0px;
    }

    .mini-navbar .feature-panel.left.open {
        left: 70px;
    }

        .mini-navbar .feature-panel.left.open .header, .mini-navbar .feature-panel.left.open .body, .mini-navbar .feature-panel.left.open .feature {
            padding-right: 85px;
        }

    .mini-navbar .feature-panel.right.open {
        left: 70px;
    }

        .mini-navbar .feature-panel.right.open .header, .mini-navbar .feature-panel.right.open .body, .mini-navbar .feature-panel.right.open .feature {
            padding-right: 85px;
        }

    .control-label.text-right {
        text-align: left !important;
    }
}

@media (max-width: 350px) {
    .home img {
        height: 30px;
    }

    .navbar-header .title {
        width: 80px;
        font-size: 11px;
    }

    .nav.navbar-top-links li.dropdown {
        display: block;
    }
}