/* CSS Document */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
a {color: #0067d5;}
/*------------system_box------------*/
.system_box {
  display: block;
  width: 100%;
  min-width: 990px;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #cccccc;
  border-top: solid 2px #69b200;
}
/*------menu_box------*/
.menu_box {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 170px;
  height: 100%;
  min-height: 640px;
  background: #fff url("../images/menu_bgd.png") no-repeat left bottom;
  background-size: 100% auto;
  border-right: 2px solid #69b200;
  z-index: 13;
}
.menu_box .sys_logo {
  display: block;
  margin: 0;
  padding: 0;
  font-size: small;
  background: linear-gradient(#44bea0, #fff)
}
.menu_btn {
  float: right;
  display: inline-block;
  margin: 0 -20px 0 0;
  padding: 0;
  border-radius: 0 0 4px 0;
  text-align: center;
  background: #69b200;
}
.menu_btn a {
  display: block;
  width: 20px;
  height: 24px;
  margin: 0;
  padding: 0 2px;
}
.main_menu {
  display: block;
  margin: 0;
  padding: 0.2em 0;
}
.main_menu li {
  position: relative;
}
.main_menu li a {
  list-style: none;
  display: block;
  margin: 0.2em 0 0.2em 0.1em;
  padding: 0.3em 0.5em;
  color: #333;
}
.main_menu .user_name {
  list-style: none;
  display: block;
  margin: 0 0.2em 0.2em 0;
  padding: 0.3em 0.5em;
  border-radius: 0 4px 4px 0;
  color: #2b410b;
  background: #d0e1b7;
}
.user_name i {
  margin-right: 0.2em;
}
.main_menu li a:hover {
  color: #fff;
  background: #84d017;
}
.main_menu li .f_act {
  color: #fff;
  background: #69b200;
  border-radius: 4px 0 0 4px;
}
/*--20210804_新增--*/
.main_menu li a i {
  width: 20px;
  margin-right: 0.2em;
  text-align: center;
}
.main_menu hr {
  margin: 0.1em 0;
}
.f_c_btn {
  position: absolute;
  right: -6px;
  top: 2px;
  width: 16px;
  height: 20px;
  margin: 0;
  padding: 4px 3px;
  text-align: center;
  border-radius: 0 10px 10px 0;
  background: #69b200;
  color: #fff;
  opacity: 0;
}
/*------con_box------*/
.con_box {
  position: relative;
  display: block;
  margin: 0 0 0 170px; /*--menu_box_寬度--*/
  padding: 0;
  min-height: 100%;
  background: #ddd;
}
/*----report_page----*/
.report_page {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px;
  background: #fff;
  z-index: 12;
  overflow-y: auto;
}
/*----top_box----*/
.top_box {
  display: block;
  margin: 0;
  padding: 0;
  height: 48px;
  background: #eee;
  border-bottom: 1px solid #666;
}
/*--nav_box--*/
.nav_box {
  line-height: 30px;
  border-bottom: none;
}
.nav_box li a {
  white-space: nowrap;
}
.nav_box li a:hover {
  text-shadow: 1px 1px 1px #999;
}
.nav_box .nav-link {
  margin: 0 2px;
  padding: .5rem 1.3rem .5rem 1rem;
  background: #cccccc;
  line-height: 29px;
  color: #fff;
}
.nav_box .nav-link.active {
  border-color: #666 #666 #fff;
  line-height: 30px;
  font-weight: bold;
}
.nav_box .nav-link:hover, .nav_box .nav-link:focus {
  border-color: transparent;
}
.nav_box li .close {
  margin-right: 5px;
}
.tab-content {
  background: #fff;
}
/*----right_box 與 map_box style----*/
.right_box {
  background: #69b200;
}
/*--right_box 即時監控--*/
.right_box_00 {
  float: right;
  position: relative;
  margin: 0;
  padding: 0 0 0 2px;
  width: 300px;
}
/*--right_box 右側面板收開按鈕--*/
.r_btn_box {
  font-size: 1.4rem;
  display: block;
  background: #69b200;
  border-radius: 4px 0 0 4px;
  width: 28px;
  height: 40px;
  line-height: 38px;
  margin: -1em 0 0 -26px;
  padding: 0;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
}
.r_btn_box a {
  width: 26px;
  height: 40px;
  margin: 0;
  padding: 0;
}
/*--即時監控_右側車輛清單_style--*/
.r_box_con_00 {
  display: block;
  height: 100%;
  background: #fff;
  margin: 0;
  padding: 0.2em 0.5em;
  overflow-y: auto;
}
.car_list_00 {
  display: block;
  margin: 0;
  padding: 0.2em 0 0 0;
}
.car_list_00 li {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0.6em 0.1em 0.1em 0.1em;
  border-bottom: 1px dashed #ccc;
  vertical-align: bottom;
}
.status_btn {
  float: right;
  margin-top: -0.3em;
}
.status_btn a {
  width: 24px;
  margin: 0 0.1em;
  padding: 0.1em;
}
/*----map_box 即時監控----*/
.map_box_00 {
  display: block;
  margin: 0 300px 0 0;
  padding: 0;
}
.map_con {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: url("../images/map.jpg") right top;
  background-size: 180% auto;
}
/*--alert_list_box 異常警示_彈出視窗--*/
.alert_box {
  position: absolute;
  left: 20px;
  top: 10px;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  z-index: 2;
} /*--20210809修改--*/
.alert_b_box {
  display: inline-block;
  margin: 0;
  padding: 0.2em;
  background: #fff;
  border-radius: 0.2em;
} /*--20210809新增--*/
.alert_list_box {
  display: inline-block;
  margin: 0;
}
/*--關閉/開啟異常警示_btn--*/
.alert_btn_c {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -10px -18px 0 6px;
  padding: 0;
  border-radius: 12px;
  text-align: center;
} /*--20210809修改--*/
.alert_btn_c a {
  color: #333;
}
.sound_box {
  margin: 0 -0.2em -0.3em 0;
  padding: 0;
}
.sound_box span {
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #aaa;
  border-radius: 16px;
  text-align: center;
  line-height: 28px;
  margin: 0;
  padding: 0;
}
.sound_box span a {
  color: #fff;
}
.alert_list_box .card-body, .alert_list_box .card-footer {
  margin: 0;
  padding: 0.1em;
}
.alert_list {
  margin: 0;
  padding: 0;
}
.alert_list li {
  margin: 0.1em;
  padding: 0.1em 0.5em;
  list-style: none;
  background: #9e1d29;
}
.alert_list li a {
  color: #ffffff;
}
/*--map_f_box 圖台功能_彈出視窗--*/
.map_f_box {
  position: absolute;
  top: 10px;
  left: 280px;
  display: inline-block;
  width: auto;
  margin: 0 8em 0 0;
  padding: 4px 0;
  z-index: 2;
}
.map_f_box2 {
  position: absolute;
  top: 15px;
  left: 520px;
  z-index: 2;
}
.f_box_con {
  display: inline-block;
  width: auto;
  margin-bottom: 0.1em;
}
.map_f_menu, .map_inf_menu {
  display: inline-block;
  margin: 0;
  padding: 0 0 0 0.5em;
  line-height: 24px;
  border-radius: 16px;
}
.map_f_btn, .map_inf_btn {
  font-size: medium;
  margin: auto 0.3em;
}
.map_f_menu a {
  color: #007bff;
}
.map_inf_menu a {
  color: #17a2b8;
}
.map_f_menu .f_act a, .map_inf_menu .f_act a {
  color: #333;
  font-weight: bold;
}
/*--20210804_新增--*/
.map_f_menu a i, .map_inf_menu a i {
  margin-right: 0.2em;
}
/*--關閉圖台功能_btn--*/
.map_f_cbtn {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  line-height: 19px;
  border-radius: 12px;
  text-align: center;
  border: #007bff 2px solid;
}
.map_f_cbtn a {
  color: #007bff;
}
.map_inf_cbtn {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  line-height: 19px;
  border-radius: 12px;
  text-align: center;
  border: #17a2b8 2px solid;
}
.map_inf_cbtn a {
  color: #17a2b8;
}
/*--map_switch_btn 圖資切換按鈕--*/
.map_switch_btn {
  display: inline-block;
  position: absolute;
  top: 14px;
  right: 13px;
  z-index: 2;
}
/*--map_car_inf 圖台車輛_彈出資訊--*/
.car_inf_box {
  position: absolute;
  left: 20em;
  top: 5em;
  border: #333 1px solid;
}
.map_car_inf {
  display: inline-block;
  margin: 0;
  padding: 0.5em 1em;
}
.map_car_inf p {
  margin: 0.2em;
  padding: 0.1em;
  font-size: small;
}
.map_car_inf .table {
    font-size: 13px;
}
.map_car_inf hr {
  margin: .6rem 0;
}
/*--inf_con 車輛資訊--*/
.inf_con_00 {
  position: absolute;
  left: 1%;
  bottom: 8px;
  display: block;
  width: 98%;
  height: 300px;
  margin: 0;
  padding: 0 10px 5px 10px;
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 2px 2px 2px #999;
  z-index: 11;
}
.car_s_box {
  display: inline-block;
  position: relative;
  z-index: 9;
}
.search_box {
display: block;
  width: 20em;
  position: absolute;
  left: 100px;
  top: 2px;
  background:rgba(255,255,255,.7);
  border: #666 1px solid;
  border-radius: 4px;
  margin: 0;
  padding: 20px;
}
.search_c_btn {
  display: inline-block;
  float: right;
  margin: -20px -16px 0 0;
  padding: 0;
}
.b_btn_box_00 {
  display: block;
  width: 20px;
  height: 10px;
  margin: 0 0 0 -0.8em;
  padding: 0;
  position: absolute;
  left: 50%;
  top: -5px;
}
.b_btn_box_00 a {
  margin: 0;
  padding: 0;
}
.b_btn_box_00 a i {
  color: #4b9374;
  font-size: 1.8rem;
  width: 20px;
  height: 10px;
  margin: 0;
  padding-top: 3px;
}
.inf_btn_box_00 {
  display: block;
  width: 40px;
  height: 20px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.inf_con_01 {
  display: block;
  width: 100%;
  height: 90px;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  border-bottom: 1px solid #999;
}
/*--right_box 行車軌跡/狀態追蹤/自訂點位/地圖查詢/即時路況/民生示警/大客車禁行路線/自動合車--*/
.right_box_01, .right_box_02, .right_box_03, .right_box_07, .right_box_08, .right_box_16,.right_box_111 {
    float: right;
    position: relative;
    margin: 0;
    padding: 0 0 0 2px;
    width: 500px;
}
.r_box_con_01, .r_box_con_02, .r_box_con_03, .r_box_con_07, .r_box_con_08, .r_box_con_16, .r_box_con_111 {
    display: block;
    height: 100%;
    background: #fff;
    margin: 0;
    padding: 0.2em 0.5em;
    overflow-y: auto;
}
.t_bg_line {
  margin: 0;
  padding: 0.5em;
  background: url("../images/t_bg_line.jpg") center repeat-y;
}
.t_bg_line .list_d {
  font-size: medium;
}
/*----map_box 行車軌跡/狀態追蹤/自訂點位/地圖查詢/即時路況/民生示警/大客車禁行路線/自動合車----*/
.map_box_01, .map_box_02, .map_box_03, .map_box_07, .map_box_08, .map_box_16 {
  display: block;
  margin: 0 500px 0 0;
  padding: 0;
}
/*--rwd_table_style--*/
.tableScroll_box {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
} /*----外層元件要設定固定高度----*/
.inf_con_box_00 .tableScroll {
  margin-bottom: 0;
}
.tableScroll thead th {
  position: sticky;
  width: auto;
  top: -1px; /* 列首永遠固定於上 */
  z-index: 7;
}
.inf_con_table {
  height: 270px;
}
.report_table {
  max-height: 720px;
}
/*--系統設定_style--*/
.modal_sys_set, .alert_set, .alert_report, .driving_report, .vehicle_set {
  max-width: 90%;
}
.add_box_s {
  max-width: 480px;
}
.system_set_box {
  display: block;
  margin: 0;
  padding: 0;
}
.sys_set_top {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
.sys_set_top .sys_logo {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.sys_set_title {
  display: inline-block;
  height: 3em;
  background: #333;
  color: #fff;
  margin: 0 0.5em;
  padding: 1em 1em 0.5em 1em;
  border-radius: 0 0 0.5em 0.5em;
  font-size: large;
}
.sys_set_top .nav-link {
  margin-top: 20px;
}
.sys_set_con {
  display: block;
  margin: 0;
  padding: 0.5em;
}
/*--車輛列表_style--*/
.v_list_box {
  display: block;
  margin: 0;
  padding: 0;
}
.v_list_l {
  display: inline-block;
  float: left;
  width: 15%;
  min-width: 120px;
  margin: 0;
  padding: 0.2em;
}
.v_list_line {
  display: block;
  margin: 0;
  padding: 0.5em 0;
}
.v_list_line li {
  list-style: none;
  display: block;
  border-bottom: 1px #666 dashed;
  margin: 0.1em;
  padding: 0.5em;
}
.v_list_img {
  display: inline-block;
  width: 40%;
  max-width: 360px;
  height: auto;
  float: left;
  margin: 0.5em;
  padding: 0.5em;
  box-shadow: 2px 2px 2px #aaa;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.3em;
}
.v_list_l01 {
  display: inline-block;
  width: 38%;
}
.vl_map01 {
  display: inline-block;
  float: right;
  width: 60%;
  min-width: 300px;
  min-height: 480px;
  margin: 0;
  padding: 0;
  background: url("../images/vehicle_map.jpg") top right no-repeat;
  border: 1px solid #ccc;
}
.v_list_r {
  display: block;
  margin: 0 0 0 15.2%;
} /*------style_20210929新增------*/
/*------車輛中控台_style------*/
.vehicle_set_box {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 1024px;
  height: 100%;
  min-height: 768px;
}
.vehicle_set_top {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 60px;
}
.vehicle_logo {
  display: block;
  width: 168px;
  height: 60px;
  margin: 0;
  padding: 0;
  float: right;
}
.vehicle_set_title {
  display: inline-block;
  height: 3em;
  background: #333;
  color: #fff;
  margin: 0 0.5em;
  padding: 1em 1em 0.5em 1em;
  border-radius: 0 0 0.5em 0.5em;
  font-size: large;
}
.vehicle_set_con {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  border-top: 1px solid #666;
  overflow-x: hidden;
}
/*----right_box 與 map_box style----*/
.vset_right_box {
  background: #666;
  float: right;
  position: relative;
  margin: 0;
  padding: 0 0 0 2px;
  width: 300px;
}
/*--right_box 右側面板收開按鈕--*/
.vset_rbtn_box {
  display: block;
  background: #666;
  border-radius: 4px 0 0 4px;
  width: 12px;
  height: 26px;
  margin: -0.8em 0 0 -10px;
  padding: 0;
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
}
.vset_rbtn_box a {
  width: 12px;
  height: 20px;
  margin: 0;
  padding: 0;
  font-size: 10px;
}
.vset_rbox_con {
  display: block;
  margin: 0;
  padding: 5px 0.2em;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}
.vset_list {
  display: block;
  margin: 0;
  padding: 0.5em 0;
}
.vset_list .btn-sm {
  padding: 0.1rem 0.5rem;
}
.vset_list .btn img {
  width: 30px;
  height: 30px;
  margin-right: 0.5em;
}
.ctrl_con {
  display: block;
  margin: 0 300px 0 0;
  padding: 0;
  background: #fff;
}
/*------20210813_新增-開始-----*/
.ctrl_con_div {
  position: relative;
  display: inline-block;
  margin: 0.25% 0 -0.1% 0.5%;
  padding: 0;
  background: #ffffff;
  border: 1px solid #999999;
}
.c_title {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  margin: 0;
  padding: 0.1em 0.5em 0.1em 0.2em;
  border-radius: 0 0 0.6em 0;
  font-size: small;
}
.c_title .vc_cbtn {
  margin: -3px 2px 0 -3px;
  padding: 0.1rem 0.2rem;
  line-height: 1.2;
}
.c_title img {
  width: 30px;
  height: 30px;
  margin: -0.5em 0.1em;
}
/*--視窗寬度小於320px
.cc_div_s .c_title {
	font-size: small;
}

.cc_div_s .c_title .vc_cbtn {
	padding: .1rem .3rem;
	font-size: small;
}--*/
.car_inf {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.center_map_box {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #333;
}
.center_btn_box {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.center_btn_box span {
  display: inline-block;
}
.center_btn_box span .btn-sm {
  padding: 0.1rem 0.2rem;
  line-height: 1.2;
}
/*------20210813_新增-結束-----*/
/*------web_style------*/
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}
.modal-xxl {
  max-width: 80%;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
  background-color: #333;
  padding: 1em;
  background-size: 60% 60%;
  border-radius: 2em;
}
.carousel-control-next-icon {
  position: absolute;
  right: 0;
}
.carousel-control-prev-icon {
  position: absolute;
  left: 0;
}
.carousel-indicators li {
  background-color: #333;
}
.map_function .nav-link {
  padding: 0.5rem 0.8rem;
}
.btn-secondary input[type=checkbox] {
  margin-right: 5px;
  cursor: pointer;
  font-size: 16px;
  width: 16px;
  height: 16px;
  position: relative;
}
.btn-secondary input[type=checkbox]:after {
  background-color: #0075ff;
  color: #fff;
}
.btn-secondary input[type=checkbox]:checked:after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f00c";
  font-size: 14px;
  position: relative;
  padding: 2px;
  top: -4px;
  left: -1px;
  border-radius: 2px;
}
.gutters_xs {
  margin-right: 0;
  margin-left: 0;
}
.gutters_xs > .col, .gutters_xs > [class*=col-] {
  padding-right: 1px;
  padding-left: 1px;
}
/*------折疊table------*/
.table_dp_c {
  display: none;
}
/*------table_點擊底色------*/
.table_active_bg td {
  background: #edfffc;
  font-weight: bold;
}
.table_active_bg td:first-child {
  border-left: 4px solid #70cfd3;
}
.table_td_l td {
  padding: 0.5em 0;
  line-height: 1.3em;
}
/*------20210804_新增------*/
/*----彈出視窗底色----*/
.fancybox-skin {
  background-color: #fff;
}
/*-20211028新增_圖台元件隱藏*/
.map__wedget {
  padding-top: 40px;
}
.map__wedget > .map__wedget__btn > .map__compass, .map__wedget > .map__wedget__btn > .map-3d, .map__wedget > .map__wedget__btn > .map-2d {
  display: none;
}
/*------20210813_新增------*/
/*-----------------320_web-------------------*/
/*Styles for screen 320px and lower*/
@media screen and (max-width: 320px) {
  .center_btn_box {
    top: 2px;
    right: 2px;
  }
  .center_btn_box span {
    margin-right: 2px;
  }
  .center_btn_box span .btn-sm {
    padding: .1rem .3rem;
    font-size: small;
  }
}
/*2021臺中*/
.iconimg {
  width: 17px;
  height: auto;
  margin-top: -5px;
}
.input-group label {
  align-self: center;
}
.no-w{
	min-width:auto!important;
}
h3.r_boxtitle {
  background: #69b200;
  color: #fff;
  font-size: 1.2rem;
  margin: -3px -8px 8px -8px;
  padding: 3px 10px;
}
.right_box hr, .r_box_con_01 hr {
  margin: .5rem 0;
}
.table{text-align: center;}
.table th {
  padding: .2rem;
}
.table td {
  padding: .25rem .2rem;
  vertical-align: middle
}
.table thead th {
	vertical-align: middle;
}
.form-control {
    height: calc(2rem + 2px);
    padding: 0.1rem 0.75rem;
}
.btn {
  padding: 0.25rem 0.8rem;
  font-size: 1rem;
  opacity: 1;
  border-radius: 5px;
}
.btn-primary {
  color: #fff;
  background-color: #068dd3;
  border-color: #068dd3
}
.btn-primary:hover, .btn-primary.focus, .btn-primary:focus {
  color: #fff;
  background-color: #0482c3;
  border-color: #0482c3
}
.btn-darkgreen {
  color: #fff;
  background-color: #018a66;
  border-color: #018a66
}
.btn-darkgreen:hover, .btn-darkgreen.focus, .btn-darkgreen:focus {
  color: #fff;
  background-color: #0e7a5e;
  border-color: #2eaaf2
}
.btn-darkblue {
    color: #fff !important;
    background-color: #003585;
    border-color: #003585
}
.btn-blue {
  color: #fff;
  background-color: #2bb1fe;
  border-color: #2bb1fe
}
.btn-blue:hover, .btn-blue.focus, .btn-blue:focus {
  color: #fff;
  background-color: #2eaaf2;
  border-color: #2eaaf2
}
.btn-orange {
  color: #fff;
  background-color: #ff8416;
  border-color: #ff8416
}
.btn-orange:hover, .btn-orange.focus, .btn-orange:focus {
  color: #fff;
  background-color: #ed7e1c;
  border-color: #ed7e1c
}
.btn-lightg {
  color: #2E5A0A;
  background-color: #c0f179;
  border-color: #c0f179
}
.btn-lightg:hover, .btn-lightg.focus, .btn-lightg:focus {
  color: #2E5A0A;
  background-color: #aae457;
  border-color: #aae457
}
.btn-pink {
  color: #fff;
  background-color: #fc3e8f;
  border-color: #fc3e8f
}
.btn-pink:hover {
  color: #fff;
  background-color: #ea3281;
  border-color: #f8257f
}
.btn-pink.focus, .btn-pink:focus {
  box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5)
}
.btn-pink.disabled, .btn-pink:disabled {
  color: #fff;
  background-color: #fc3e8f;
  border-color: #fc3e8f
}
.btn-pink:not(:disabled):not(.disabled).active, .btn-pink:not(:disabled):not(.disabled):active, .show > .btn-pink.dropdown-toggle {
  color: #fff;
  background-color: #ea3281;
  border-color: #f8257f
}
.btn-pink:not(:disabled):not(.disabled).active:focus, .btn-pink:not(:disabled):not(.disabled):active:focus, .show > .btn-pink.dropdown-toggle:focus {
  box-shadow: 0 0 0 .2rem rgba(38, 143, 255, .5)
}
.btn-whiteline {
  background: rgba(255, 255, 255, .2) !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #fff !important;
}
.btn-round {
  border-radius: 100px !important;
}
.badge {
  font-size: 90%;
}
.bg-y {
  background: #f6a800 !important;
}
.text-primary{
	color:#578515!important;
}
.bg-primary {
    background-color: #578515!important
}
.bg-blue {
    background-color: #3cacc7!important
}
.bg-pruple {
    background-color: #5c55bf!important
}
.bg-info {
    background-color: #48abf7!important
}
.bg-info2 {
    background-color: #3697e1!important
}
.bg-success2 {
    background-color: #2bb930!important
}
.bg-warning {
    background-color: #ffad46!important
}
.bg-warning2 {
    background-color: #ff9e27!important
}
.bg-warning3 {
    background-color: #ffe7c4!important
}
.bg-danger {
    background-color: #f25961!important
}
.bg-danger2 {
    background-color: #ea4d56!important
}
.bg-grey {
    background: #c9c9c9!important
}
.bg-grey1 {
    background: #f9fbfd!important
}
.bg-grey2 {
    background: #f5f5f5
}
.bg-pink{background:#fab3ff;}
.bg-lightinfo{background:#eff9f9}
.bg-brown{background:#987342}
.bg-lightgreen{background:#def7c6}
.bg-maroon{background:#9e2a2b}
.bg-bluegreen{background:#158774}
.bg-pinkpurple{background:#985f99}
.bg-darkpurple{background:#4f5d75}
.bg-skyblue{background:#2ec4b6}
.bg-olive{background:#b5b682}
.bg-orange{background:#ff4800}
.bg-yellow{background:#fcca00}
.bg-lightdanger {
  background: #feefef!important
}
.modal-header {
  padding: .5rem;
  background: #91cb3e;
  color: #fff;
}
.close {
  font-size: 2.5rem;
  line-height: 1.3rem
}
/*圖台圖層功能*/
.map_f_box {
  margin: 0;
  padding: 0;
}
.f_box_con {
  margin-bottom: 0;
  padding: 0;
}
.map_f_menu a {
  display: block;
  color: #fff;
  font-size: 15px;
  margin: 0;
  padding: .15rem .5rem;
  line-height: 1.6;
  background: #f6a800;
  border-radius: 20px;
}
.map_f_menu a:hover {
  text-decoration: none;
  background: #eaa000
}
/*system*/
.tablist a {
  display: block;
  padding: .3rem .5rem;
}
.tablist .tapbtn {
  display: inline-block;
  text-align: center;
  color: #58907e;
  font-weight: 600;
  border-top: 1px solid #c8c8c8;
  border-left: 1px solid #c8c8c8;
  border-right: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
  background: #f9f9f9;
  white-space: nowrap;
  vertical-align: middle;
  margin: 2px 1px;
  min-width: 140px;
}
.tablist .tapbtn:hover, .tablist .tapbtn:focus {
  background: #edf1ea;
  text-decoration: none;
}
.tablist .tapbtn:first-child {
  border-left: 1px solid #c8c8c8;
}
.tablist .tapbtn.active {
  color: #fff;
  border: 1px solid #06ab6e;
  background: #06ab6e;
}
/*版面*/
.wrapper {
  position: relative;
  top: 0;
}
.main-header {
  background: #91cb3e;
  min-height: 50px;
  line-height: 50px;
  width: 100%;
  position: fixed;
  z-index: 1001;
  box-shadow: 0 0 5px rgb(18 23 39 / 20%);
}
.main-header .navbar {
  padding: 0;
}
.main-header .Ptitle {
  font-size: 1.3rem;
  line-height: 1.1;
  font-weight: 500;
  color: #fff;
}
.logo-header {
  float: left;
  width: 218px;
  height: 50px;
  line-height: 45px;
  color: #fff;
  background: #6aa318;
  z-index: 1001;
  padding: 0;
  display: flex;
  position: relative;
  transition: all 0.3s;
}
.logo-header.active {
  margin-left: -218px;
}
.btn-toggle {
  border: 1px solid #fff;
  font-size: 20px !important;
	border-radius: 50%;
  line-height: 18px;
  padding: .4rem .5rem !important;
  margin-right: 3px;
  background: 0 0 !important;
  color: #fff !important;
  opacity: .8;
  cursor: pointer;
}
.btn-toggle:focus, .btn-toggle:hover {
  opacity: 1;
  outline: 0;
}

.main-panel {
  position: relative;
  width: calc(100% - 218px);
  height: 100vh;
  min-height: 100%;
  float: right;
  transition: all .3s;
}
.main-panel.active {
  width: 100%;
}
.main-panel > .content {
  padding: 0 !important;
  min-height: calc(100% - 95px);
  margin-top: 50px;
}
.page-inner {
  padding: 1em 2em;
  margin: 0 auto;
}
.main-panel .page-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.page-title {
  font-size: 23px;
  font-weight: 600;
  color: #578515;
  line-height: 30px;
}
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 218px;
  margin-top: 50px;
  display: block;
  z-index: 1000;
  color: #676660;
  font-weight: 200;
  background: #f6f6f6;
  transition: all 0.3s;
}
.sidebar.active {
  margin-left: -218px;
}
.sidebar .sidebar-wrapper {
  position: relative;
  max-height: calc(100vh - 75px);
  min-height: 100%;
  overflow: auto;
  width: 100%;
  z-index: 4;
  padding-bottom: 100px;
  transition: all .3s;
}
.sidebar .sidebar-wrapper .sidebar-content {
  padding-top: 0;
}
.sidebar .nav {
  display: block;
  float: none;
}
.sidebar .nav .nav-section {
  margin: 15px 0 0 0
}
.sidebar .nav .nav-section .sidebar-mini-icon {
  text-align: center;
  font-size: 15px;
  color: #909093;
  display: none
}
.sidebar .nav .nav-section .text-section {
  padding: 2px 30px;
  font-size: 12px;
  color: #727275;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 12px;
  margin-top: 20px
}
.sidebar .nav > .nav-item {
  display: list-item
}
.sidebar .nav > .nav-item:last-child {
  border-bottom: 1px solid #e4e4e4 !important;
}
.sidebar .nav .nav-item a:hover, .sidebar li.active {
  background: #dedede;
}
.sidebar .nav > .nav-item a {
  display: flex;
  align-items: center;
  color: #414141;
  padding: 7px 10px;
  width: 100%;
  font-size: 1rem;
  font-weight: 400;
  position: relative;
  border-top: 1px solid #dedede;
}
.sidebar .nav-collapse li a .sub-item:before {
  content: '';
  height: 4px;
  width: 4px;
  background: #676767;
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100%
}
.sidebar a:focus, .sidebar a:hover {
  text-decoration: none
}
.sidebar .nav > .nav-item a i {
  color: #7b7b7b;
  width: 25px;
  text-align: center;
  vertical-align: middle;
  float: left;
  font-size: 18px;
  line-height: 30px
}
.sidebar .nav > .nav-item a i[class^=flaticon-] {
  font-size: 20px
}
.sidebar .nav > .nav-item a p {
  font-size: 1rem;
  margin-bottom: 0;
  margin-left: 5px;
  white-space: nowrap;
}
.sidebar .nav > .nav-item a .caret{
  margin-left: auto;
  margin-right: 10px;
  transition: all .5s;
}
.sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true] .caret {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg)
}
.sidebar .nav-collapse {
  margin-top: 0;
  background: rgba(0,0,0,.06);
}
.sidebar .nav-collapse li.active > a {
  font-weight: 400;
  color: #fff !important;
  background-color: #91cb3e !important;
}
.sidebar .nav-collapse li a:before, .sidebar .nav-collapse li a:hover:before {
  opacity: 0 !important;
}
.sidebar .nav-collapse li a {
  margin-bottom: 3px !important;
  padding: 5px 15px !important;
  border-top: 0 !important;
}
.sidebar .nav-collapse li a .sub-item {
  position: relative;
  margin-left: 20px;
}
.sidebar .nav-collapse li a:hover .sub-item {
  opacity: 1
}
.sidebar .nav-collapse.subnav {
  padding-bottom: 6px;
  margin-bottom: 0
}
.sidebar .nav-collapse.subnav li a {
  padding-left: 30px !important
}
.sidebar .nav-collapse2 {
  margin-top: 0;
  padding-bottom: 0;
  padding-top: 0;
  background: #eff7f0
}
.sidebar .nav-collapse2 li a .sub-item {
  position: relative;
  margin-left: 30px;
  font-size: 90%;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent
}
.breadcrumbs {
  list-style: none;
  display: inline;
  width: auto;
  margin-left: 8px;
  padding-left: 8px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: 0;
  height: 100%;
  color: #434343;
}
.breadcrumbs li {
  display: inline-block;
}
.breadcrumbs li a {
  color: #656565
}
.breadcrumbs li a i {
  font-size: 16px
}
.breadcrumbs li a:hover {
  color: #006abb;
}
.breadcrumbs li.separator {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 12px
}
.form-inline .form-group {
  padding-bottom: 8px;
}
.form-check label{
	min-width: auto!important;
	justify-content: flex-start!important;
		margin-bottom:0
}
@media (min-width: 576px) {
 .form-inline label {
    min-width: 120px;
    justify-content: end;
  } 
	.checkboxstyle label {
		margin-left:.1rem;
		margin-right: 1rem;
  }
  .form-inline select {
    min-width: 206px;
  }
	.sys_set_con .form-inline label, .serchbox label {
    min-width: auto;
    justify-content: flex-start;
  }
	.serchbox.form-inline .form-group{
		margin-right:2rem;
	}
}
@media (max-width: 991.98px){
.navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid {
    padding-right: 5px;
    padding-left: 5px;
}
}
.modal-footer {
  justify-content: center;
}
.fw-bold{
	font-weight: bold;
}
[data-toggle=collapse] {
	cursor: pointer;
}
[data-toggle=collapse][aria-expanded=true] .caret {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg)
}
/*treeview*/
.card-body ul.checktree {
  list-style-type: none;
  margin: 3px;
  padding-left: 0;
}
.card-body ul.checktree ul {
  list-style-type: none;
  padding-left: 25px;
}
.card-body ul.checktree label {
  min-width: auto;
  color: #495057 !important;
  font-size: 16px !important;
	margin-left:2px;
}
ul.checktree li:before {
  height: 1em;
  width: 12px;
  border-bottom: 1px dashed;
  content: "";
  display: inline-block;
  top: -0.3em;
  margin-bottom: 5px;
}
ul.checktree li input {
  margin: 1px;
}
ul.checktree li {
  border-left: 1px dashed;
}
ul.checktree li:last-child:before {
  border-left: 1px dashed;
}
ul.checktree li.topli:before {
  border: 0 !important;
}
ul.checktree li:last-child {
  border-left: none;
}
ul.checktree h4 {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: bold;
}
.dobbleform{
	font-size: 18px;
}
.custom-select, .form-inline .input-group {
    width: 207px;
}
.fa-2x {
    font-size: 1.6em;
}
/*登入頁*/
.login-bg {
  background: url("../images/loginbg.png") no-repeat top center #47b681;
	background-size: cover;
}
.login-bg .container {
  width: 400px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -350px;
  margin-left: -200px;
  color: #474951;
}
.login-bg .toplogo {
  background:#7abb1c;
	border-radius: 30px 30px 0 0;
}
.login-bg .toplogo img {
  margin: 15px auto;
}
.login-bg .toplogo h1 {
  font-size: 1.6em;
  color: #fff;
  background: #ea9344;
  padding: 10px;
}

.login-bg .btn-line {
  font-size: 1.4rem;
  padding: .6rem 1.2rem;
}
.login-widget {
  background-color: rgba(255, 255, 255, .6);
  width: 380px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 1px 1px 5px 1px rgba(10, 10, 10, .2);	  
	border-radius: 30px;
}
.login-widget .form-control {
  height: auto;
  padding: 6px 20px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, .8);
  border: 0;
}
.login-widget .input-group-text{
	background: #222;
	color:#fff;
}
.login-widget .btn {
  padding: 8px 30px;
  font-size: 18px;
}

.login-widget .form-check-label {
  color: #474951 !important;
}
.login-form {
  padding: 20px 30px;
}
.login-form .spansy1 {
  margin-top: 10px;
  margin-left: 5px;
  text-align: left;
}
.login-form .input-group {
  margin-bottom: 8px;
}
.login-form .input-group-prepend span {
  padding: 10px;
  margin-right: 10px;
  font-size: 1.3em;
}
/*多日軌跡*/
.line {
    display: inline-block;
    width: 80%;
    height: 5px;
    margin-right: 5px;
    margin-bottom: 3px;
}
@media (min-width: 992px) {
    .modal-lg, .modal-xl {
        max-width: 900px;
    }
}

@media (min-width: 1200px) {
    .modal-lg, .modal-xl {
        max-width: 1100px;
    }
	.logo span{
		display: block;
	}
	.sidebar .nav > .nav-item a i {
         display: block;
        }
}

@media (min-width: 1400px) {
    .modal-lg, .modal-xl {
        max-width: 1280px;
    }
	
}

@media (min-width: 1600px) {
    .modal-xl {
        max-width: 1400px;
    }
	.sidebar .nav > .nav-item a {
        padding: 4px 15px;
		font-size: 16px;
    }
	
}

@media (min-width: 1800px) {
    .modal-xl {
        max-width: 1600px;
    }
}
.btn-xs {
    padding: .2rem .3rem;
    font-size: 15px;
  }

.strokeinfo{font-size:18px;line-height: 16px;}
.strokeinfo span {
    border-radius: 20px;
    display: inline-block;
	margin-right:5px;
    height: 20px;
    width: 20px;
}
.circular{
	display: inline-block;
	border-radius: 50%;
	padding: .2rem .5rem;
	font-size: 1rem;
	margin: 2px;
	font-weight: bold;
}
a:hover .circular{opacity:1;text-decoration: none!important;}
.circular.on{
	background-color: #2bb930;
	opacity:.9;
	color:#fff;
}
.circular.off{
	background-color: #a5a5a5;
	opacity:.8;
	color:#fff;
}
.tabssty .nav-pills .nav-link.active, .tabssty .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #69b200;
}
.tabssty .nav-pills .nav-link {
	border-radius: 0;
    color: #69b200;
    font-weight: 600;
    border-top: 1px solid #69b200;
    border-bottom: 1px solid #69b200;
    border-left: 1px solid #69b200;
    background: #f9f9f9;
    white-space: nowrap;
    vertical-align: middle;
	font-size: 1.05em;
}
.tabssty .nav-pills .nav-item:last-child{
	border-right: 1px solid #69b200;
}
.tabssty .table{
	margin-top:1em;
}
.tabssty .table thead, .tabssty .table th{
	background:#f3f3d6;
	border-color:#c5c8b1;
	border-bottom:1px solid #c5c8b1;
}


/*油料*/
.table .svg-inline--fa, .table i {
  font-size: 1.3em;
}
.btn .svg-inline--fa, .btn i {
  margin-right: 3px;
}
.table .btn .svg-inline--fa, .table .btn i {
  margin-right: 3px;
  font-size: 1em;
}
.hiddenRow {
  padding: 0 !important;
}
.topbox .card-header {
  border-bottom: 1px dashed #ebecec !important;
  padding: 0 !important;
}
.topbox .card-header p {
  padding: .35rem 1rem .25rem;
  font-size: 1.2rem;
	margin-bottom: 0;
}
.topbox .card-header .card-tools {
  position: absolute;
  top: 4px;
  right: .5rem;
}


/*車輛停留分析*/
.dragmap {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

    .dragmap .card-header {
        background: #018a66;
        color: #fff;
        cursor: move;
        padding: .5rem 1rem;
        text-align: center;
        font-size: 1.1rem;
        font-weight: bold;
    }

        .dragmap .card-header a {
            display: block;
        }

            .dragmap .card-header a:after {
                content: "\f067";
                font-family: 'Font Awesome\ 5 Free';
                font-weight: 900;
                position: absolute;
                top: .4rem;
                right: .8rem;
                color: #fff;
                font-size: 1.2rem;
                transition: all .5s ease-out;
            }

            .dragmap .card-header a[aria-expanded="true"]:after {
                content: "\f068";
            }

.dragbox {
    position: absolute;
    top: 1rem;
    left: 2rem;
    width: 450px;
    box-shadow: 0 0 .5rem rgba(0,0,0,.2);
    z-index: 1;
}

    .dragbox ol {
        padding-left: 1.5rem;
    }

.gpsarea {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    text-align: center;
}

    .gpsarea .dropdown-menu {
        min-width: 280px;
        padding: 0;
    }

        .gpsarea .dropdown-menu .btn {
            padding: .25rem .4rem;
            line-height: 1;
        }

.title-header {
    background: #018a66;
    color: #fff;
    padding: .15rem 1rem;
    text-align: center;
    font-size: 1.2rem;
}