.ColdChainChartDiv{
  background-color: #58568A;
  border: solid 1.5px transparent;
}
.SolutionMenuICon:hover{
  transition: 0.5s;
  /* border:solid 1px #c2c2c2; */
  background-color: rgba(255, 255, 255, 0.1);
}
.SolutionMenuICon_focus{
  transition: 0.5s;
  background-color: rgba(255, 255, 255, 0.3);
}
.SolutionItem:hover{
  transition: 0.5s;
  background-color: rgba(255, 255, 255, 0.1);
}
.SolutionList{
  background-color: #31314E;
  box-shadow: 0px 0px 8px #918bd5;
}
.CategoryTitle{
  color: white;
  /* border-bottom: 1px solid white; */
  background-color: #58568A;
  padding-bottom: 5px;
}
.chart-container-css{
  background-color:#121528;
}
.map-search-tool{
  box-shadow: 1px 2px 1px #918bd5;
}
.FileName{
  border-bottom:1px solid white;
}
.Menuborder{
  background-color: #31314E !important;
}
.active-vehicle-state{
  background-color: #31314E !important;
  box-shadow: 0px 0px 0px transparent !important;
  border: solid 0px #918BD5;
  border-bottom:solid 1px #918BD5;
  border-right:solid 1px #918BD5;
  position: relative;
  top: 2px !important;
  left: 2px !important;
}
.CarStatusBtnGroup .CarStatusBtn {
  height: 40px;
  min-width: 40px;
  background-color: #121528;
  border-radius: 50px;
  color: white;
  padding: 5px;
  box-shadow: 1px 2px 1px #918BD5;
  cursor: pointer;
}
.Menubtn-hover{
  opacity: .7;
}
.Menubtn-MB-hover{
  opacity: .7;
}
.AddressCss{
  background-color: #121528;
}
.AutoEmailSet{
  background-color:#31314E;
}
.DashBoardPageBackGround{
  background-color: #8E8BD5;
}
.DashBoardItemBackGround{
  background-color:#121528
}
/* .dashboard-border{
  border:1px solid #8E8BD5
} */
.edit-border{
  /* box-shadow: 1px 1px 4px 1px black; */
  border: 0.5px solid white;
}
.tbodyoverflow{
  border: 1px solid #8E8BD5;
  border-top: 0px;
}
.vehicleofreport td{
  border: 1px solid #8E8BD5 !important;
  border-top: 0px solid #8E8BD5 !important;
  min-height: 20px;
  padding: 0 !important;
}
.vehicleofreport th{
  border: 1px solid #8E8BD5 !important;
  border-bottom: 0px solid #8E8BD5 !important;
}
.vehicleofreport tbody{
  border-bottom: 1px solid #8E8BD5 important;
}
.transportborder{
  border: solid 0.5px #8E8BD5;
}
.ListDarkColor{
  background-color: #121528;
}
.OfflineHint{
  background-color:#31314e;box-shadow:1px 1px 5px 1px black
}
.Detail-Page-Button{
  background-color:#121528;border:solid 1px #121528;
}
.Detail-Page-Button.active{
  background-color:#31314E;border:solid 1px #31314E;
}
.CameraColor{
  color: white;
}
.page-btn{
  background-color: #121528;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.page-btn.active{
  background-color: #31314e;
  cursor: default;
}
.page-boxshadow{
  box-shadow: 0px 8px 5px -5px black;
}
.dataFormat{
  background-color:#31314e;box-shadow:1px 1px 5px 1px black
}
.PointCssSetting{
  background-color: #121528;
}
.EventCssSetting{
  background-color: #121528;
}
.POIIMGDIV{
  border:1px solid #121528
}
.POIicon {
  font-size: 27.5px !important;
  position: absolute;
  color: white;
}
.Loader span::before{
  background-color: white;
}
.leaflet-tile-pane img{
  -ms-filter:hue-rotate(180deg) invert(100%) !important;
  
  -moz-filter:hue-rotate(180deg) invert(100%) !important;
  
  filter: hue-rotate(180deg) invert(100%) !important;

  -webkit-filter: hue-rotate(180deg) invert(100%) !important;
}
.uploadimagediv:hover::before{
  transition:0.75s;
  content:'⇧';
  color:white;
  cursor:pointer;
  font-size: 30px;
}
.uploadimagediv{
  position:relative;
  border:1px solid #121528;
  background-color:transparent;
  height:70px;
  width:160px;
  display:flex;
  justify-content:center;
  align-items:center;
}
.uploadimagediv:hover{
  border:1px solid #8E8BD5;
  background-color:#8E8BD5;
  opacity:0.5;
  transition:0.5s;
}
.trackinglistlocation{
  background-color:#121528
}
.hashtag-css{
  border-radius: 10px;
  padding: 0 5px 0 5px;
  margin-right: 5px;
  border: 1px solid transparent;
  background-color: black;
}
.ManageGroup .togglecss {
  background-color: black;
  border: 1px solid white;
}
.ManageGroup ul li::before {
  position: absolute;
  left: -12.5px;
  top: 0px;
  content: "";
  display: block;
  border-left: 1px solid white;
  height: 1em;
  border-bottom: 1px solid white;
  width: 10px;
}
.ManageGroup ul li::after {
  position: absolute;
  left: -12.5px;
  bottom: -7px;
  content: "";
  display: block;
  border-left: 1px solid white;
  height: 100%;
  z-index: -1;
}
.UserListBtn:hover{
 background-color: #31314E;
}
.font{
  font-weight: 300;
}
.HeadTextColor{
  color: #8E8BD5;
}
.SearchSelect{
  border: 1.5px solid #121528;
  background-color: #121528;
}
.SearchSelect-focus{
  border: 1.5px solid #1aee36;
  background-color: #121528;
}
.MultiSelect{
  border: 1.5px solid #121528;
  background-color: #121528;
}
.MultiSelect-focus{
  border: 1.5px solid #1aee36;
  background-color: #121528;
}
.MultiSelect-FilterInput{
  border:1px solid #121528;
  background-color: #121528;
}
.MultiSelect-FilterInput:focus{
  border:1px solid #1aee36;
  background-color: #121528;
}
.MultiSelect-Content{
  border:0.1px solid #777777;
  background-color: #121528;
}
.input-gp-foc{
  border:1px solid #121528;
  background-color: #121528;
}
.input-gp-foc:focus{
  border:1px solid #1aee36;
  background-color: #121528;
}
.CommandTitleBorder{
  border-bottom: 1.5px solid white;
}

.MultiMapCss{
  background-color:#31314E;
  /* border-radius:10px */
  border: 1px solid #121528;
}
.DashBoardMapCss{
  background-color:#31314E;
}
.DashBoardMap{
  background-color: #272740;
}
.MultiMapSwitchMap{
  background-color: #272740;
  border-radius: 10px;
  height: 35px;
  width: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:absolute;left:10px;top:200px;z-index:500
}
.KML-Font{
  color: #333;
}
.Query-btn {
  border: none;
  border-radius:10px;
  background-color: #121528;
  box-shadow: 1.5px 2.5px #8E8BD5;
}

.Query-btn:active {
  box-shadow: 0.5px 1.5px #4c4b70;
  transform: translateY(1px) translateX(1px);
}
.UnitDetailBorder{
  /* border-top: 0.1px solid white;
  border-left: 0.5px solid white;
  border-right: 0.5px solid white; */
  border-bottom: 0.1px solid white;
}
.UnitDetailBorder-Parnt{
  border-top: 0.1px solid white;
}
.Command{
  background-color:#31314E;
  box-shadow: -1px 1px 10px 1px #121528;
}
.LockCommandPassword{
  background-color:#31314E;
  box-shadow: -1px 1px 10px 1px #121528;
}
.UnitList-Detail{
  background-color:#31314E;
}
.Video-player{
  background-color:#31314E;
}
.History-Video-player{
  background-color:#31314E;
}
/* .Tracking-Video-player{
  background-color:#31314E;
} */
.Menu-icon-globe:hover{
  transition: 0.5s;
  opacity: .6;
  color: white;
}
.Menu-icon-file:hover{
  transition: 0.5s;
  opacity: .6;
  color: white;
}
.globe-active:hover{
  transition: 0.5s;
  opacity: 1;
  color: white !important;
}
.globe-active{
  color: white !important;
}
.file-active:hover{
  transition: 0.5s;
  opacity: 1;
  color: white !important;
}
.file-active{
  color: white !important;
}
.TableExport:hover{
  transition: 0.5s;
  background-color: #31314E;
}
.tool-tipR{
  position:absolute;z-index:1;
  /* width:150px; */
  background:#121528;border: 2px solid #00C768;border-radius:5px
}
.tool-tip{
  position:absolute;z-index:1;
  /* width:150px; */
  background:#121528;border: 2px solid #00C768;border-radius:5px
}
.tool-tip-sub{
  position:absolute;z-index:1;height:16px;width:16px;background:#121528;transform:rotate(45deg);border-bottom:2px #00C768 solid;border-left:2px #00C768 solid;
}
.MaintanceReport-BG{
  background-color: #272740;
}
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar{
  background-color: #31314E;
  border: 0 !important;
}
.ShowUserCss{
  border-bottom:1.5px solid #333;border-top:1.5px solid #333
}
.change-map-background:hover{
  transition: 0.5s;
  background-color: #8E8BD5;
  border-radius: 0px 0 0 0px;
}
.change-map-background{
  background-color: transparent;
  cursor: pointer;
}
.Only-home-background:hover{
  transition: 0.5s;
  background-color: #8E8BD5;
}
.Only-home-background{
  background-color: transparent;
  cursor: pointer;
}
.thumbtack-home-background:hover{
  transition: 0.5s;
  background-color: #8E8BD5;
  border-radius: 0px 0 0 0px;
}
.thumbtack-home-background{
  background-color: transparent;
  cursor: pointer;
}
.Icon-Slash{
  font-weight:100 !important;font-size:35px !important;transform: rotate(-45deg);position:absolute !important;left:6px !important;top:-13px !important;
  color: white !important;
}
.Icon-Focos{
  font-size: 30px !important;
  color: white !important;
}
.icon-color{
  color: #8E8BD5;
}
.icon-map-switch {
  content: url('./images/map_switch.svg');
  height: 37.5px;
}
.icon-map-distance {
  content: url('./images/map_distance.svg');
  height: 30px;
}
.icon-angle-up {
  content: url('./images/angle-up.svg');
  cursor: pointer;
  width: 45px;
  height: 45px;
  filter: invert(100%) sepia(51%) saturate(0%) hue-rotate(14deg) brightness(109%) contrast(101%);
}
.icon-angle-down {
  content: url('./images/angle-down.svg');
  cursor: pointer;
  width: 45px;
  height: 45px;
  filter: invert(100%) sepia(51%) saturate(0%) hue-rotate(14deg) brightness(109%) contrast(101%);
}
.Iconcheckbox{
  border: 2px solid #58568A;
}
.Iconcheckboxdisabled{
  border: 2px solid #58568A;
  background-color: #c2c2c2;
  pointer-events: none;
  cursor: default;
}
.Importfilealert{
  background-color:#31314E !important;border:0 !important;box-shadow: 1px 1px 1px 1px black;
}
.Resultalert{
  background-color:#31314E !important;border:0 !important;box-shadow: 1px 1px 1px 1px black;
}
.file-upload .file-upload-select{
  background-color: #121528 !important;
  color: white !important;
  border:0 !important
}
.menuitem{
  background-color:#31314E;
  transition: 0.4s;
}
.menuitem:hover{
  background-color:#212135;
  transition: 0.25s;
}
.menuitem-active{
  background-color:black;
  transition: 0.3s;
}
/* .menuitem:hover{
  transition: 0.5s;
  background-color:#333;
} */
.menuroot{
  background-color:#58568A
}
/*table*/
.table-css {
  position: relative;
  /* min-width: 100%; */
  background-color: #272740;
}
  .table-css tr:nth-child(even) {background: #121528}
  .table-css tr:nth-child(odd) {background: #272740}
  .table-css  th {
    background: #31314E;
    color: #8E8BD5;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .Ttitle{
    background: #31314E;
    color: #8E8BD5;
  }
  .table-css  td{
    color: white;
  }
  .table-css tr:hover td{
    transition: 0.5s;
    background-color: #303050;
  }
/*table*/
/* .ControlListItemborder{
  border-bottom:1.5px solid #58568A
} */
select{
  background-image:url("./images/svg/white-arow-down.png");
  background-repeat: no-repeat;
  background-size: 20px;
  background-attachment:scroll;
  background-position: right center;
}
@media (min-width: 320px) and (max-width: 1024px){
  .disable{
    background-color: #333;
  }
}
.Imgexample-Title{
  height:50px;
  width: 100%;
  background-color: rgba(142, 139, 213, 0.1);
  border:1.5px solid rgba(142, 139, 213, 0.1);
}
.Imgexample-Item{
  height: 50px;
  width: 100%;
  border: 1.5px solid #58568A;
  border-radius: 5px;
}
.LoginTitleBg{
  background:url('./images/SVG SQUARE WHITE.svg');
  background-repeat: no-repeat; /* 防止圖片重複 */
  background-size: contain;    /* 核心：等比例縮放至高度，完整顯示圖片 */
  background-position: center; /* 讓圖片置中 */
}
/* .FleetWebbg{
  background: url('./images/Loginbackgroundimage.svg');
  background-size: cover;
  position: relative;
  height: 100vh;
} */
.FleetWebbg{
  background: url('./images/main-website-picture-.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.bodybg{
  background: #272740;
}
.AccPW{
  background-color: #272740;
}
.input-gp{
  background-color: #121528;
  border-radius: 10px;
  border: 0px;
  border: 1.5px solid #121528
}
.input-gp-focus{
  background-color: #121528;
  border-radius: 10px;
  border: 1.5px solid #1aee36;
  width:100%;
}
.history-input{
  background-color: #121528;
  border: 1.5px solid transparent;
  width:60px;border-radius:5px;
}
.history-input:focus{
  border: 1.5px solid #1aee36
}
.Command-input{
  background-color: #121528;
  border: 1.5px solid transparent;
  width:100%;border-radius:5px;
}
.Command-input:focus{
  border: 1.5px solid #1aee36
}
.inputbg{
  background-color: #121528;
  border:0;
  outline: none;
  color: white;
}
.gray-border{
  border: 1.5px solid #121528;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #58568A;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #58568A;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #58568A;
}
.Origincheckbox{
  position: relative;
  z-index: 2;
  top:0;
  left:0;
  width: 20px;
  height: 17px;
  -moz-appearance:none;
  -webkit-appearance:none;
  -o-appearance:none;
}
.font{
  color:white;
}
.font-hover{
  transition: 0.5s;
  color:white;
}
.font-purple{
  color: #8E8BD5;
}
.setting{
  content: url('./images/settings_hover.svg');
  position: absolute;
  top:0;
  right: 0;
  z-index: 1;
  cursor: pointer;
}
.SettingBox{
  background-color: #272740;
  box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 20%);
  margin: 0 auto;
  border-radius: 20px;
  position: relative;
  top: 15vh;
}
@media (max-height: 719px) and (min-width: 1024px)  {
  .SettingBox{
    top: 3vh;
  }
}
@media (min-width: 320px) and (max-width: 374px) {
  .SettingBox{
    /* height: 460px; */
    max-width: 300px;
    top: 8vh;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 97.5%;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 97.5%;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 97.5%;
  }
  .Main-Logo-bg{
    /* background-color: #00C768; */
    background-color: white;
    width: 250px;
  }
}
@media (min-width: 375px) and (max-width: 767px) {
  .SettingBox{
    /* height: 460px; */
    max-width: 350px;
    top: 10vh;
  }
  ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 97.5%;
  }
  
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 97.5%;
  }
  
  ::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 97.5%;
  }
  .Main-Logo-bg{
    background-color: white;
    width: 300px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .SettingBox{
    /* height: 570px; */
    max-width: 480px;
    top: 15vh;
  }
  .Main-Logo-bg{
    background-color: white;
    width: 300px;
  }
}
@media (min-width: 1025px) {
  .SettingBox{
    /* height: 570px; */
    max-width: 480px;
  }
  .Main-Logo-bg{
    background-color: white;
    width: 350px;
  }
}
/* scrollbar */
/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 7.5px
}

/* Track */
/* ::-webkit-scrollbar-track {
  background: #31314E;
} */

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

  /* Handle on hover 
  transition: 0.5s;*/
  ::-webkit-scrollbar-thumb:hover {
      background: #555;
      transition: 0.5s;
  }
  /* scrollbar */
  .global-select{
    /* outline: 0; */
    border: 1.5px solid #121528;
    background-color: #121528;
    color: white !important;
  }
  @media (min-height: 600px) and (max-height: 767px){
    .global-select{
      /* outline: 0; */
      border: 1px solid #121528;
      background-color: #121528;
      color: white !important;
    }
  }
  .global-select:focus{
    border: 1.5px solid #1aee36;
  }
  .global-btn{
    background-color: #00C768;
    color: white;
    border-radius: 6px;
    width: 130px;
    height: 46px;
    outline:0;
    border:0
  }
  .Imgexample{
    background-color: #272740;
    box-shadow: 0px 9px 10px 0px black;
    position: absolute;
    z-index: 1;
    height: calc(100vh + -112px);
  }
  .Imgexample-close{
    background-color: #272740;
    position: absolute;
    z-index: 1;
    height: calc(100vh + -80px);
  }
  .Imgexample-btn{
    box-shadow: 0px 0px 10px 0px black;
    cursor: pointer;
    background-color: #272740;
    height: 250px;
    width: 15px;
    position: absolute;
  }
  .Imgexample-btn-child{
    cursor: pointer;
    background-color: white;
    border-radius: 10px;
    height: 75px;
    width: 4px;
  }
  /*icon*/
  @media (min-width: 320px) and (max-width: 767px) {
    .thumbtack {
      font-size: 20px !important;
      position: absolute;
      right:30px;
      transform: rotate(-45deg);
      color: white;
    }
    .home {
      font-size: 25px !important;
      position: absolute;
      left:24px;
      color: white;
    }
    .home-only {
      font-size: 27.5px !important;
      position: absolute;
      color: white;
    }
    .icon-query {
      content: url('./images/query.svg');
      filter: invert(67%) sepia(77%) saturate(1477%) hue-rotate(200deg) brightness(86%) contrast(93%);
      cursor: pointer;
    }
    .icon-angle-up {
      content: url('./images/angle-up.svg');
      cursor: pointer;
      filter: invert(100%) sepia(51%) saturate(0%) hue-rotate(14deg) brightness(109%) contrast(101%);
      width: 50px !important;
      height: 35px !important;
    }
    .icon-angle-down {
      content: url('./images/angle-down.svg');
      cursor: pointer;
      filter: invert(100%) sepia(51%) saturate(0%) hue-rotate(14deg) brightness(109%) contrast(101%);
      width: 50px !important;
      height: 35px !important;
    }
    .MaintanceInputPage{
      height: 70vh;
      position:absolute;
      z-index:0;
      top: calc(50% + -35vh);
      background-color:#31314E;
      border-radius:20px;
    }
    .MaintanceInputContent{
      position: absolute;top:25px;background-color:#31314E;height:calc(100% + -80px);overflow-y:auto;border-radius:20px
    }
    .map-switch{
      height:35px;background-color:#272740;border-radius:10px 10px 10px 10px;
    }
    ::-webkit-scrollbar {
      width: 0px;
      height: 0px
    }
    .Allnumcss{
      height: 18px;
      width: 40px;
      background-color: #121528;
      color: #8E8BD5;
      border-radius: 10px;
    }
    .ControlList{
      width: 100%;
      border-top: 1.5px solid #3D3D63;
      border-bottom: 1.5px solid #3D3D63;
      background-color: rgba(142, 139, 213, 0.1);
    }
    .Imgexample{
      z-index: 1 !important;
      top:51px;
      right: 0;
      width: 250px;
      height: calc(100vh + -112px);
      display: block;
      animation-name: open;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.3s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .Imgexample-close{
      display: block;
      top:calc(-100vh + 112px);
      right: 0px;
      width: 250px;
      height: calc(100vh + 112px + 51px);
      animation-name: close;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.3s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    @keyframes open {
      100% {
        top:51px;  
      }
    
      0% { 
        top:calc(-100vh + 112px + 51px);         
      }
    }
    @keyframes close {
      100% {
        top:calc(-100vh + 112px + 51px);
      }
    
      0% {     
        top:51px;
      }
    }
    .Main-Logo-btn{
      width:35px;
      height:25px;
      outline:0;
      border:0;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
  }
    .Main-Logo{
      content: url('./images/logo.svg');
      height: 30px;
    }
    .Menu{
      width: 100vw;
      box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
      height: 50px;
      background-color:#31314E;
    }
    .Main-btn-icon{
      content: url('./images/arrow-w.svg');
      height: 25px;
      /* animation 參數設定 */
      animation-name: rotateleft;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/  
    }
    .Main-btn-icon-rotate-right{
      content: url('./images/arrow-w.svg');
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      height: 25px;
      /* animation 參數設定 */
      animation-name: rotateright;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .Main-btn-icon-rotate-up{
      content: url('./images/arrow-w.svg');
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      /* animation 參數設定 */
      animation-name: rotateup;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 25px;
      cursor: pointer;
    }
    .Main-btn-icon-rotate-down{
      content: url('./images/arrow-w.svg');
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
      /* animation 參數設定 */
      animation-name: rotatedown;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 25px;
      cursor: pointer;
    }
    .caret-icon-up{
      content: url('./images/caret-up.svg');
      filter: invert(51%) sepia(60%) saturate(297%) hue-rotate(203deg) brightness(99%) contrast(94%);
      animation-name: rotateleft;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 25px;
      cursor: pointer;
    }
    .caret-icon-down{
      content: url('./images/caret-down.svg');
      filter: invert(51%) sepia(60%) saturate(297%) hue-rotate(203deg) brightness(99%) contrast(94%);
      animation-name: rotatedownnormal;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 25px;
      cursor: pointer;
    }
    .menu_off_svg{
      content: url('./images/menu_off.svg');
      cursor: pointer;
      height: 30px;
    }
    .user_changepswd-icon{
      content: url('./images/user_changepswd.svg');
      height: 20px;
    }
    .user_logout-icon{
      content: url('./images/user_logout.svg');
      height: 20px;
    }
    .user_regroup-icon{
      content: url('./images/user_regroup.svg');
      height: 20px;
    }
    .Remove-icon{
      content: url('./images/remove-format.svg');
      filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(25deg) brightness(112%) contrast(100%);
      cursor:pointer;
      height: 15px;
    }
    .Vehicle-icon{
      content: url('./images/menu_car.svg');
      height: 30px;
    }
    .Event-icon{
      content: url('./images/menu_event.svg');
      height: 30px;
    } 
    .Video-icon{
      content: url('./images/user_video.svg');
      height: 30px;
    }
    .History-icon{
      content: url('./images/menu_path.svg');
      height: 30px;
    } 
    .Report-icon{
      content: url('./images/menu_chart.svg');
      height: 30px;
    }
    .Manage-icon{
      content: url('./images/menu_management.svg');
      height: 30px;
    }
    .user-image{
      content: url('./images/home_img_thumbnail_default@2x.png');
      height: 30px;
    }
    .Vehicle-icon_avtive{
      content: url('./images/menu_car_active.svg');
      height: 30px;
      transition: 0.5s;
    }
    .Event-icon_active{
      content: url('./images/menu_event_active.svg');
      height: 30px;
    } 
    .Video-icon_active{
      content: url('./images/user_video.svg');
      filter: invert(98%) sepia(12%) saturate(2%) hue-rotate(225deg) brightness(400%) contrast(100%);
      height: 30px;
    }
    .History-icon_active{
      content: url('./images/menu_path_active.svg');
      height: 30px;
      transition: 0.5s;
    } 
    .Report-icon_active{
      content: url('./images/menu_chart_active.svg');
      height: 30px;
      transition: 0.5s;
    }
    .Manage-icon_active{
      content: url('./images/menu_management_active.svg');
      height: 30px;
      transition: 0.5s;
    }
    .Mobile-Menu-Off{
      position: absolute;
      display: none;
      top:50px;
      right: -200px;
      width: 200px;
      background-color: #31314E;
      /* animation 參數設定 */
      animation-name: Off;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .Mobile-Menu-On{
      position: absolute;
      z-index: 1;
      top:50px;
      right: 0px;
      width: 200px;
      background-color: #31314E;
      /* animation 參數設定 */
      animation-name: On;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .mobile-menu{
      border:0
    }
    .font{
      font-size: 97.5%;
    }
    .font-hover{
      transition: 0.5s;
      font-size: 97.5%;
    }
    .font-purple{
      font-size: 97.5%;
    }
    .ShowUserList{
      position:absolute;top:48px;right:0;background-color: #121528;border-bottom:3px solid #00C768;width: 180px;z-index: 1001;
    }
  }

  @media (min-width: 768px){
    .thumbtack {
      font-size: 20px !important;
      position: absolute;
      right:30px;
      transform: rotate(-45deg);
      color: white;
    }
    .home {
      font-size: 25px !important;
      position: absolute;
      left:24px;
      color: white;
    }
    .home-only {
      font-size: 27.5px !important;
      position: absolute;
      color: white;
    }
    .MaintanceInputPage{
      height:87.5vh;
      position:absolute;
      z-index:0;
      top:calc(50% + -45vh);
      border-radius:20px;
      background-color:#31314E;
    }
    .MaintanceInputContent{
      position: absolute;top:25px;background-color:#31314E;height:calc(100% + -80px);overflow-y:auto;border-radius:20px
    }
    .map-switch{
      height:45px;background-color:#272740;border-radius:10px 10px 10px 10px;
    }
    .Allnumcss{
      height: 20px;
      width: 45px;
      background-color: #121528;
      color: #8E8BD5;
      border-radius: 10px;
    }
    .ControlList{
      width: 100%;
      border-top: 1.5px solid #3D3D63;
      border-bottom: 1.5px solid #3D3D63;
      background-color: rgba(142, 139, 213, 0.1);
    }
    .Imgexample{
      z-index: 1 !important;
      display: block;
      top:71px;
      right: 0;
      width: 302px;
      height: calc(100vh + -112px);
      animation-name: open;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.3s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .Imgexample-close{
      display: block;
      top:calc(-100vh + 112px + 71px);
      right: 0px;
      width: 302px;
      height: calc(100vh + -112px);
      animation-name: close;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.3s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    @keyframes open {
      100% {
        top:71px;  
      }
    
      0% { 
        top:calc(-100vh + 112px + 71px);         
      }
    }
    @keyframes close {
      100% {
        top:calc(-100vh + 112px + 71px);
      }
    
      0% {     
        top:71px;
      }
    }
    .Main-Logo-btn{
      width:42px;
      height:30px;
      outline:0;
      border:0;
      border-radius: 6px;
      background-color: rgba(255, 255, 255, 0.2);
    }
    .Menu{
      width: 100vw;
      box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.2);
      height: 70px;
      background-color:#31314E;
    }
    .Main-btn-icon{
      content: url('./images/arrow-w.svg');
      height: 27px;
      /* animation 參數設定 */
      animation-name: rotateleft;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/  
    }
    .Main-btn-icon-rotate-right{
      height: 27px;
      content: url('./images/arrow-w.svg');
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      /* animation 參數設定 */
      animation-name: rotateright;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .Main-btn-icon-rotate-up{
      content: url('./images/arrow-w.svg');
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
      /* animation 參數設定 */
      animation-name: rotateup;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 38px;
      cursor: pointer;
    }
    .Main-btn-icon-rotate-down{
      content: url('./images/arrow-w.svg');
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
      /* animation 參數設定 */
      animation-name: rotatedown;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 38px;
      cursor: pointer;
    }
    .caret-icon-up{
      content: url('./images/caret-up.svg');
      filter: invert(51%) sepia(60%) saturate(297%) hue-rotate(203deg) brightness(99%) contrast(94%);
      animation-name: rotateleft;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 30px;
      cursor: pointer;
    }
    .caret-icon-down{
      filter: invert(51%) sepia(60%) saturate(297%) hue-rotate(203deg) brightness(99%) contrast(94%);
      content: url('./images/caret-down.svg');
      animation-name: rotatedownnormal;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
      height: 30px;
      cursor: pointer;
    }
    .icon-query {
      content: url('./images/query.svg');
      filter: invert(67%) sepia(77%) saturate(1477%) hue-rotate(200deg) brightness(86%) contrast(93%);
      cursor: pointer;
    }
    .menu_off_svg{
      content: url('./images/menu_off.svg');
      cursor: pointer;
      height: 30px;
    }
    .Remove-icon{
      content: url('./images/remove-format.svg');
      filter: invert(99%) sepia(0%) saturate(0%) hue-rotate(25deg) brightness(112%) contrast(100%);
      cursor:pointer;
      height: 20px;
    }
    .DashBoard-icon{
      content: url('./images/dashboard.svg');
      height: 40px;
      width: 40px;
    }
      /*icon*/
    .Dispatch-icon{
      content: url('./images/dispatch.svg');
      height: 40px;
      width: 40px;
    }
    .Vehicle-icon{
      content: url('./images/menu_car.svg');
      height: 40px;
      width: 40px;
    }
    .Event-icon{
      content: url('./images/menu_event.svg');
      height: 40px;
    } 
    .Video-icon{
      content: url('./images/user_video.svg');
      height: 40px;
    }
    .History-icon{
      content: url('./images/menu_path.svg');
      height: 40px;
      width: 40px;
    } 
    .Report-icon{
      content: url('./images/menu_chart.svg');
      height: 40px;
      width: 40px;
    }
    .Manage-icon{
      content: url('./images/menu_management.svg');
      height: 40px;
      width: 40px;
    }
    .user_changepswd-icon{
      content: url('./images/user_changepswd.svg');
      height: 30px;
      width: 30px;
    }
    .user_logout-icon{
      content: url('./images/user_logout.svg');
      height: 30px;
      width: 30px;
    }
    .user_regroup-icon{
      content: url('./images/user_regroup.svg');
      height: 30px;
      width: 30px;
    }
    .user-image{
      content: url('./images/home_img_thumbnail_default@2x.png');
      height: 44px;
    }
    .Dispatch-icon_avtive{
      content: url('./images/dispatch.svg');
      filter: invert(98%) sepia(12%) saturate(2%) hue-rotate(225deg) brightness(400%) contrast(100%);
      height: 40px;
      width: 40px;
      transition: 0.25s;
    }
    .DashBoard-icon_active{
      content: url('./images/dashboard.svg');
      filter: invert(98%) sepia(12%) saturate(2%) hue-rotate(225deg) brightness(400%) contrast(100%);
      height: 40px;
      width: 40px;
      transition: 0.25s;
    }
    .Vehicle-icon_avtive{
      content: url('./images/menu_car_active.svg');
      height: 40px;
      width: 40px;
      transition: 0.25s;
    }
    .Event-icon_active{
      content: url('./images/menu_event_active.svg');
      height: 40px;
    } 
    .Video-icon_active{
      content: url('./images/user_video.svg');
      filter: invert(98%) sepia(12%) saturate(2%) hue-rotate(225deg) brightness(400%) contrast(100%);
      height: 40px;
    }
    .History-icon_active{
      content: url('./images/menu_path_active.svg');
      height: 40px;
      width: 40px;
      transition: 0.25s;
    } 
    .Report-icon_active{
      content: url('./images/menu_chart_active.svg');
      height: 40px;
      width: 40px;
      transition: 0.25s;
    }
    .Manage-icon_active{
      content: url('./images/menu_management_active.svg');
      height: 40px;
      width: 40px;
      transition: 0.25s;
    }
    .Mobile-Menu-Off{
      position: absolute;
      display: none;
      top:71px;
      right: -245px;
      width: 245px;
      background-color: #31314E;
      /* animation 參數設定 */
      animation-name: Off;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .Mobile-Menu-On{
      position: absolute;
      z-index: 1;
      top:71px;
      right: 0px;
      width: 245px;
      background-color: #31314E;
      /* animation 參數設定 */
      animation-name: On;    /*動畫名稱，需與 keyframe 名稱對應*/
      animation-duration: 0.5s;    /*動畫持續時間，單位為秒*/
      animation-delay: 0s;    /*動畫延遲開始時間*/
      animation-iteration-count: 1;    /*動畫次數，infinite 為無限次*/
    }
    .mobile-menu{
      border:0
    }
    .ShowUserList{
      position:absolute;z-index: 1001;top:70px;right:0;background-color: #121528;border-bottom:3px solid #00C768;width: 200px;
    }
  }
  @keyframes rotateright {
    0% {    
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);}
  
    100% {         
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  @keyframes rotateleft {
    100% {    
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);}
  
    0% {         
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  @keyframes rotateup {
    0% {    
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);}
  
    100% {         
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }
  @keyframes rotatedown  {
    100% {    
      -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);}
  
    0% {         
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }
  }
  @keyframes rotatedownnormal  {
    100% {    
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);}
  
    0% {         
      -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
      transform: rotate(-180deg);
    }
  }

  @keyframes On {
    0% {    
      right: -245px;
    }
    100% {  
      right: 0x;       
    }
  }
  @keyframes Off {
    0% {    
      right: 0px;
    }
    100% {  
      right: -245px;       
    }
  }
  .Settingbar{
    background-color: #272740;
    box-shadow: 0px 9px 10px 0px black;
  }
  ::-webkit-calendar-picker-indicator {
      filter: invert(1);
  }