@charset "UTF-8";
/*$font-size: 16px;*/
.font-size-inherit {
  font-size: inherit;
}

.fill-height {
  flex: 1 0 auto;
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  position: relative;
}

.cursor-point {
  cursor: pointer;
}

.mst-main-app .toolPanel, .esri-widget#BasemapDiv {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), linear-gradient(to bottom, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.54) 100%);
}

/* 無障礙 AA  */
.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo-map {
  background-image: url(../images/logo-map.svg);
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 0;
  height: 60px;
  /*  將文字推出 <h1>  */
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}

.nav-link {
  font-size: 1.2em;
  font-weight: 600;
  padding: 0.5rem !important;
}
.nav-link:hover {
  background: #137D6A;
}

.esri-widget {
  /* background-color: rgb(255 255 255 / 60%);*/
}
.esri-widget#BasemapDiv {
  border-radius: 8px;
}

.mst-header {
  background-image: linear-gradient(178deg, #101010 -24%, rgba(52, 52, 52, 0) 428%);
  border-bottom: solid 2px #6da765;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}
.mst-header .drop-down-menu li {
  float: left;
}
.mst-header .drop-down-menu li a {
  display: block;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
}
.mst-header .drop-down-menu li a:hover, .mst-header .drop-down-menu li a:focus, .mst-header .drop-down-menu li a:focus-visible {
  background-color: #5e8b58;
  color: #fff;
  outline: none;
}
.mst-header .drop-down-menu li ul {
  display: none;
  position: absolute;
  top: 40px;
  right: 0px;
  background: #484646;
  z-index: 100;
}
.mst-header .drop-down-menu li ul li {
  border-bottom: #ccc 1px solid;
  float: none;
}
.mst-header .drop-down-menu li ul li:last-child {
  border-bottom: none;
}
.mst-header .drop-down-menu li ul li a {
  padding: 0.75rem;
}
.mst-header .drop-down-menu li:hover ul {
  display: block;
}

.mst-main-app .toolPanel {
  height: auto;
  box-shadow: 2px 6px 13px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
.mst-main-app .toolPanel .toolHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #486f44;
}
.mst-main-app .toolPanel .toolBody .toolPanel-wrapper {
  overflow-x: hidden;
}
.mst-main-app .toolPanel .toolBody .toolPanel-menu {
  background-color: rgba(0, 0, 0, 0.8) !important;
  width: 25%;
  padding: 0 !important;
}
.mst-main-app .toolPanel .toolBody .toolPanel-menu .toolPanel-menu-item {
  padding: 0.5rem !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
.mst-main-app .toolPanel .toolBody .toolPanel-menu .toolPanel-menu-item.active {
  background-color: #5e8b58 !important;
  border: solid 1px rgba(255, 255, 255, 0.5) !important;
  border-radius: 0 !important;
  color: #fff !important;
  outline: none !important;
}
.mst-main-app .toolPanel .toolBody .toolPanel-menu .toolPanel-menu-tips {
  padding: 0.4rem;
  opacity: 0.65;
}
.mst-main-app .toolPanel .toolBody .toolPanel-menu-content {
  width: 75%;
}
.mst-main-app .toolPanel .toolBody .toolPanel-content div {
  padding: 0.5rem;
  margin: 0 !important;
}
.mst-main-app .toolPanel .mst-tool-panel-tab {
  color: #fff;
}
.mst-main-app .toolPanel .mst-tool-panel-tab input:checked + label.mst-tool-panel-tab-label {
  opacity: 1;
  border-bottom: 4px solid #ffb300;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-label {
  text-align: center;
  /*  width: calc(50% - 20px);
  margin: 0 10px;*/
  width: 50%;
  padding: 0.75rem;
  background-color: rgba(0, 0, 0, 0.8);
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content {
  color: #000;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content .mst-card-list-wrapper {
  padding: 1rem 0rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content .mst-tool-panel-tab-content-footer {
  height: auto;
  text-align: center;
  padding: 0.375rem 0;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content .mst-tool-panel-btn {
  background-image: none !important;
  min-width: 150px !important;
  width: auto !important;
  height: auto !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0px !important;
  border: none !important;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content .featurelayers-layerList-name {
  width: 40%;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content .featurelayers-layerList-name2 {
  width: 30%;
}
.mst-main-app .toolPanel .mst-tool-panel-tab .mst-tool-panel-tab-content .featurelayers-layerList-buttons {
  width: 30%;
}

.mst-main-content .mst-drawer-btn {
  top: 35%;
  border-radius: 0 !important;
  padding: 0.5rem;
  width: auto !important;
  height: auto !important;
  writing-mode: vertical-lr;
  letter-spacing: 0.5rem;
}
.mst-main-content .mst-float-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1rem;
  margin-bottom: 0;
  box-shadow: none;
}
.mst-main-content .mst-float-panel .esri-component {
  margin: 0;
  box-shadow: none;
}

.mst-card {
  width: 90%;
  margin: 0 auto;
  background-color: rgba(52, 52, 52, 0.75);
  color: #fff;
}
.mst-card .mst-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0.5rem;
  background-color: rgba(127, 189, 174, 0.75);
}
.mst-card .mst-card-header .mst-card-header-item-end {
  display: flex;
}
.mst-card .mst-card-body {
  background-color: rgba(52, 52, 52, 0.75);
}
.mst-card .mst-card-body .mst-input-group {
  padding: 0.5rem !important;
  margin: 0 !important;
}

.mst-tab {
  display: flex;
  gap: 1rem;
}
.mst-tab .mst-tab-btn {
  background-color: #343434;
  color: #fff;
}

.mst-footer {
  position: absolute;
  bottom: 0;
  right: 0;
  /*    left: 0;*/
  background-image: linear-gradient(178deg, #101010 -24%, rgba(52, 52, 52, 0) 428%);
  width: 100%;
  padding: 0.5rem;
  color: #fff;
  font-size: 0.9rem;
  border-top: solid 2px #6da765;
}
.mst-footer .mst-footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
  gap: 0.5rem;
}
.mst-footer .mst-footer-wrapper .mst-footer-item-center {
  display: flex;
  gap: 1rem;
}
.mst-footer .mst-footer-wrapper .mst-footer-item-end {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mst-hide {
  display: none;
}

.mst-select {
  padding: 0.375rem 0.75rem;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.mst-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0px !important;
}

.mst-icon-btn {
  cursor: pointer;
  border-radius: 0 !important;
  background-color: rgba(0, 0, 0, 0.5);
  border: solid 1px rgba(255, 255, 255, 0.5);
  padding: 0.375rem 0.75rem;
}
.mst-icon-btn.active {
  background-color: #5e8b58;
  border: solid 1px rgba(255, 255, 255, 0.5);
  color: #fff;
  outline: none;
}
.mst-icon-btn:hover, .mst-icon-btn:focus, .mst-icon-btn:focus-within {
  opacity: 0.75;
}
.mst-icon-btn i {
  margin-right: 0.25rem;
}

.mst-bg-btn {
  width: 5rem;
  height: 1.95rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.mst-img-btn {
  padding: 0.375rem;
}
.mst-img-btn img {
  height: 20px;
  width: 20px;
  vertical-align: middle;
}

.mst-block-btn {
  /*  width: 135px;*/
  text-align: center;
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 3rem;
}

.mst-primary-btn {
  background-color: #5e8b58 !important;
  color: #fff;
  border: solid 1px rgba(255, 255, 255, 0.5);
}
.mst-primary-btn:hover {
  opacity: 0.75;
}

.mst-secondary-btn {
  background-color: #343434 !important;
  color: #fff !important;
  border: solid 1px rgba(255, 255, 255, 0.5);
}
.mst-secondary-btn:hover {
  opacity: 0.75;
}

.mst-widget-btn {
  background-image: linear-gradient(178deg, #101010 -24%, rgba(52, 52, 52, 0) 428%);
  border: none;
  color: #fff;
}
.mst-widget-btn:hover {
  opacity: 0.75;
  color: #fff;
}

.esri-button--primary {
  background-color: #5e8b58;
  border: solid 1px rgba(255, 255, 255, 0.5);
}
.esri-button--primary:hover {
  background-color: inherit;
  border: inherit;
  opacity: 0.75;
}
.esri-button--primary:focus, .esri-button--primary:focus-within {
  outline: 2px solid #5e8b58;
}

.esri-layer-list__no-items {
  padding: 0.5rem;
}

.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}

.mst-object-search .toolPanel-content {
  width: 100%;
  padding: 0.5rem;
}
.mst-object-search label {
  font-weight: 700;
}
.mst-object-search .mst-input-group {
  display: flex;
  width: 100%;
  padding: 0.5rem 0 !important;
  /*  input[type="date"] {
      width: 100% !important;
  }*/
}
.mst-object-search .mst-input-group input, .mst-object-search .mst-input-group select {
  width: 100%;
}
.mst-object-search .mst-input-group .mst-btn {
  white-space: nowrap;
}
.mst-object-search .mst-input-group.mst-date {
  gap: 0.5rem;
}

.mst-afasi-content .mst-input-group {
  display: flex;
  width: 100%;
  padding: 0.5rem 0 !important;
}
.mst-afasi-content .mst-input-group input, .mst-afasi-content .mst-input-group select {
  width: 100%;
}
.mst-afasi-content .mst-input-group .mst-btn {
  white-space: nowrap;
}
.mst-afasi-content .mst-input-group.mst-date {
  gap: 0.5rem;
}
.mst-afasi-content .mst-label {
  padding: 0 !important;
}
.mst-afasi-content .mst-label label {
  margin-right: 0.5rem;
}
.mst-afasi-content .ms-afasi-search {
  flex-grow: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mst-afasi-content .ms-afasi-search .featurelayers-layerList-header {
  flex-shrink: 0;
}
.mst-afasi-content .ms-afasi-search .featurelayers-layerList-body {
  flex-grow: 1;
}

.mst-footer-item-start {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* =================  RWD =========================*/
@media (max-width: 767px) {
  .mst-footer .mst-footer-wrapper {
    flex-direction: column;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse {
    flex-grow: 0;
  }
}