:root {
  --bottom-nav-show-nav-mb: 0px;
  --checked-pos-top: 0px;
  --left-nav-show-nav-ml: 0px;
  --old-map-height-ratio: 1;
  --old-map-width-ratio: 1;
  --primary-color: #245298 !important;
  --top-nav-show-nav-mb: 0px;
}
* {
  margin: 0;
  padding: 0;
}
body {
  -webkit-touch-callout: none;
}
#app * {
  box-sizing: border-box;
}
.footer-wrapper {
  background: #fff;
  bottom: 0;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
@media screen and (min-width: 1201px) {
  .header_mmis_mob {
    display: none !important;
  }
  .menu-item {
    flex-direction: row !important;
  }
}
@media screen and (max-width: 1200px) {
  .header_mmis {
    display: none !important;
  }
  .header_mmis_mob {
    display: block !important;
    width: 100%;
  }
  .left-nav,
  .nav .top-nav {
    top: 105px !important;
  }
  .leaflet-bottom.leaflet-right {
    top: 179px;
  }
}
.hkmp_header {
  position: relative;
  z-index: 100;
}
.nav {
  z-index: 99;
}
.mapbox {
  z-index: 98;
}
.el-button {
  font-size: var(--fz14) !important;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #ccc;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}
/*leaflet*/
.leaflet-div-icon-all {
  background: #1896f0;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}
.leaflet-pane.leaflet-popup-pane {
  pointer-events: none;
}
.leaflet-pane.leaflet-overlay-pane > img,
.nav-box,
.header_mmis {
  user-select: none;
}
.leaflet-popup-tip-container {
  display: none !important;
}
.leaflet-popup-content {
  width: auto !important;
}
.leaflet-left {
  display: none !important;
  z-index: -99999 !important;
}
.leaflet-bottom.leaflet-right {
  height: fit-content !important;
  top: 160px;
}
.leaflet-top.leaflet-right {
  height: fit-content !important;
}
.leaflet-control-attribution.leaflet-control > a {
  display: none;
}
/* content*/
.con {
  border-left: 2px solid #e2e2e2;
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 50px;
}
.map-content-box {
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 1920px;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 99;
}
@media screen and (min-width: 1921px) {
  .map-content-box {
    border-left: 2px solid #e2e2e2;
  }
}
.mapbox {
  flex: 1;
  position: relative;
}
.top-nav-div {
  display: none;
}
.nav .top-nav {
  align-items: center;
  background-color: #fff;
  box-shadow: none;
  display: flex;
  height: 55px;
  left: 0;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 60px;
  transition: all 0.2s;
  z-index: 401;
}
.nav .top-nav .top-nav-criteria {
  align-items: center;
  display: flex;
  overflow: auto;
}
.nav .top-nav .top-nav-criteria::-webkit-scrollbar {
  display: block;
  height: 5px;
}
.nav .top-nav-show-left {
  left: 375px;
}
.nav .top-nav-show-all {
  box-shadow: 0px 6px 4px 2px rgb(0 0 0 / 20%);
  max-height: auto;
  min-height: 50px;
  top: 0;
}
.nav .top-nav .top-nav-label {
  margin: 0 25px 0 15px;
  white-space: nowrap;
}
.nav .top-nav .top-nav-list {
  display: flex;
}
.nav .top-nav .top-nav-list .nav-item {
  align-items: center;
  background-color: rgb(235, 235, 235);
  border: 1px solid rgb(206, 206, 206);
  border-radius: 15px;
  display: flex;
  margin-bottom: 5px;
  margin-right: 10px;
  padding: 5px;
  white-space: nowrap;
}
.nav .top-nav .top-nav-list .nav-item .item-icon {
  background: rgb(146, 146, 146);
  border-radius: 50%;
  color: #fff;
  height: 20px;
  line-height: 24px;
  text-align: center;
  width: 20px;
}
.nav .top-nav .top-nav-list .nav-item .item-title {
  color: rgb(30, 30, 30);
  flex: 1;
  margin: 0 10px;
}
.nav .top-nav .top-nav-list .nav-item .item-close,
.search-item .item-close {
  background: rgb(94, 94, 94);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  height: 18px;
  line-height: 22px;
  text-align: center;
  width: 18px;
}
.search-item .item-close {
  background: none;
  margin-left: 10px;
}
.left-nav,
.record-popup {
  background-color: #fff;
  border-right: none;
  bottom: 0;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  left: 0;
  position: absolute;
  top: 60px;
  transition: all 0.2s;
  width: 375px;
  z-index: 999;
}
.record-popup .record-popup-content {
  height: 100%;
  margin: 40px 0 20px 0;
  max-height: 100%;
  overflow-y: auto;
}
.record-popup .record-popup-content::-webkit-scrollbar {
  display: block;
}
.record-popup .record-popup-content .el-collapse {
  border: none;
}
.record-popup.mobile {
  height: 50vh;
  top: unset;
  width: 100vw;
}
@media screen and (max-width: 500px) {
  .left-nav {
    width: 100vw;
  }
}
.left-nav.show-nav,
.record-popup.show-left-nav {
  margin-left: var(--left-nav-show-nav-ml);
}
.record-popup.show-bottom-nav {
  margin-bottom: -50vh;
}
.bottom-nav.show-nav {
  margin-bottom: var(--bottom-nav-show-nav-mb);
}
.top-nav.show-nav {
  margin-top: var(--top-nav-show-nav-mb);
}
.left-nav .nav-box {
  flex: 1;
  overflow: auto;
  padding: 40px 0 20px 0;
}
.left-nav .nav-box::-webkit-scrollbar {
  width: 0;
}
.left-nav .nav-box .form-box {
  margin-bottom: 15px;
}
.left-nav .nav-box .form-box .form-tree {
  user-select: none;
}
.left-nav .nav-box .el-tabs {
  display: flex;
  flex: auto;
  flex-direction: column;
  height: 100%;
}
.left-nav .nav-box .el-tabs .el-tabs__header {
  padding-left: 20px;
}
.left-nav .nav-box .el-tabs .el-tabs__header .el-tabs__item {
  font-size: var(--fz22);
}
.left-nav .nav-box .el-tabs .el-tabs__content {
  flex-grow: 1;
  overflow-y: auto;
}
.left-nav .nav-box .el-tabs .el-tabs__content::-webkit-scrollbar {
  display: block;
}
#pane-search {
  padding: 0 10px 0 20px;
}
.form-map_group {
  background-color: #fff;
  border: 1px solid rgb(178, 153, 115);
  border-radius: 5px;
  direction: ltr;
  display: flex;
  padding: 3px 0;
}
.form-map_group .el-select__wrapper {
  box-shadow: none !important;
}
.form-map_group .el-select__placeholder,
.form-map_group .el-select-dropdown__item,
.form-map_group .el-select-dropdown__item.is-selected {
  color: #8a714b;
  font-size: var(--fz18);
}
.form-map_group .el-select-dropdown__item {
  border-bottom: 1px solid lightgray;
  height: auto;
  overflow: visible;
  text-overflow: initial;
  white-space: initial;
}
.form-map_group .el-select-dropdown__item.is-hovering {
  background-color: #0e4295;
  color: white;
}
.form-map_group:focus-within {
  border: 2px solid black;
}
.form-map_group select {
  border: none;
  color: #8a714b;
  flex: 1;
  font-size: 18px;
  outline: none;
  width: 100%;
}
.form-search .search-row {
  display: flex;
}
.form-search .search-row .clear-btn {
  align-content: center;
  color: #3c4b65;
  font-size: var(--fz14);
  font-weight: bold;
  margin-left: 10px;
  text-wrap: nowrap;
  width: max-content;
}
.search-box {
  flex-wrap: wrap !important;
}
.form-search .keyword-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}
.form-search .keyword-row .search-item {
  align-items: center;
  background: #245298;
  border-radius: 100px;
  color: #fff;
  display: flex;
  margin: 5px 3px;
  padding: 6px 14px;
}
.left-nav .nav-box .form-box .form-search .search-box,
#st_date,
#ed_date {
  background-color: #fff;
  border: 2px solid rgb(201 201 201);
  border-radius: 5px;
  display: flex;
  padding: 5px 0;
  padding-left: 10px;
  width: 100%;
}
#st_date,
#ed_date {
  font-size: 18px;
  margin-left: 14px;
}
.left-nav .nav-box .form-box .form-search .search-box input {
  border: none;
  color: rgb(178, 153, 115);
  flex: 1;
  font-size: 18px;
  outline: none;
  width: 100%;
}
.left-nav .nav-box .form-box .form-search .search-box input:focus {
  outline: none;
}
.left-nav .form-box > .search-btn {
  align-items: center;
  background-color: rgb(118, 74, 5);
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  font-weight: bold;
  height: 32px;
  justify-content: center;
  padding: 0 15px;
}
.left-nav .nav-box .form-box .box-line {
  background-color: #b6b6b2;
  border-top: 1px solid #dddcd7;
  height: 1px;
  margin-top: 20px;
}
.left-nav .nav-box .form-box .form-title {
  align-items: center;
  color: rgb(112, 112, 112);
  display: flex;
  font-weight: bold;
  margin-bottom: 5px;
}
.form-title > span {
  color: rgb(112, 112, 112);
  font-size: var(--fz18);
}
.form-title .field {
  padding-left: 0;
}
.form-title .field > label {
  align-items: center;
  font-size: var(--fz14);
}
.form-title-right {
  align-items: center;
  display: flex;
  font-size: var(--fz14);
  margin-left: auto;
}
.form-title-right > span {
  margin-right: 10px;
}
.form-title-right .checkmark {
  margin: 0;
}
.left-nav .nav-box .form-box .form-box-group {
  display: flex;
}
.left-nav .nav-box .form-box .form-box-group .dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.left-nav .nav-box .form-box .form-box-group.active .dropdown {
  max-height: 100%;
}
.left-nav .nav-box .form-box .form-radio_group {
  color: rgb(112, 112, 112);
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
.left-nav .nav-box .form-box .form-date {
  align-items: center;
  display: flex;
  margin-bottom: 10px;
  position: relative;
}
.left-nav .nav-box .date-top {
  display: flex;
  margin-bottom: 10px;
}
.left-nav .nav-box .date-top .el-button {
  margin: auto 0 0 auto;
}
.left-nav .nav-box .form-box .form-date-label {
  color: rgb(96, 98, 102);
  padding-right: 50px;
  width: 65px;
}
.left-nav .nav-box .form-box .form-date-picker {
  flex: 1;
  margin-right: 10px;
}
.left-nav .form-box > .form-date > .form-date-picker > .search-input {
  border: 1px solid rgb(178, 153, 115);
  border-radius: 5px;
  color: rgb(96, 98, 102);
  font-size: 14px;
  height: 28px;
  padding: 1px 8px;
  width: 47px;
}
.left-nav .form-box > .form-date > .form-date-picker > .search-input-option {
  border: 1px solid rgb(178, 153, 115);
  border-radius: 5px;
  color: rgb(96, 98, 102);
  font-size: 14px;
  height: 32px;
  padding: 1px 5px;
  width: 43px;
}
.form-date,
.form-date > input,
.form-box {
  color: #707070;
}
.form-date > label {
  min-width: 72px;
}
#submitBtnRow {
  display: flex;
  justify-content: end;
  padding: 15px 0;
  text-align: center;
}
#submit {
  background: #ec6317;
  color: #fff;
}
#reset {
  background: transparent;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  color: #2f3f5b;
}
.form-box > .dropdown {
  max-height: 200px;
  overflow-y: auto;
}
.dropdown_item > label,
.dropdown_item > button {
  font-size: var(--fz16);
}
#search-add-btn {
  background: transparent;
  border: 0px solid;
  border-radius: 50%;
  color: #555;
  cursor: pointer;
  font-size: 30px;
  height: 20px;
  line-height: 0px;
  margin: auto 10px;
  width: 20px;
}
.left-nav .nav-box .form-box .form-type {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.left-nav .nav-box .form-box .form-type .type-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  margin-bottom: 20px;
  width: 50%;
}
.left-nav .nav-box .form-box .form-type .type-item .type-item-icon {
  background-color: rgb(5, 78, 27);
  border-radius: 50%;
  color: #fff;
  font-size: 26px;
  height: 45px;
  line-height: 50px;
  margin-right: 20px;
  text-align: center;
  width: 45px;
}
.left-nav .nav-box .form-box .form-type .type-item .type-item-text {
  color: rgb(96, 98, 102);
}
/* The container */
.field {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  display: block;
  font-size: 18px;
  margin-bottom: 12px;
  padding-left: 10px;
  position: relative;
  text-align: justify;
  user-select: none;
}
/* Hide the browser's default radio button */
.field input {
  cursor: pointer;
  left: 6px;
  opacity: 0;
  position: absolute;
  top: 6px;
}
.field input:focus + span {
  border: 2px solid black;
}
.field button:focus {
  color: black;
  font-weight: bold;
}
/* Create a custom radio button */
.checkmark {
  border: 2px solid #868686;
  border-radius: 5px;
  height: 18px;
  left: 0px;
  margin-top: 2px;
  position: absolute;
  width: 18px;
}
/* .checkmark:not(.checked) */
/* On mouse-over, add a grey background color */
.field > label:hover .checkmark:not(.checked),
.field > span:hover .checkmark:not(.checked) {
  border: 2px solid black;
}
/* When the radio button is checked, add a blue background */
.field .checkmark.checked {
  background-color: #1e304e;
}
.field .checkmark.disabled {
  display: none;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  display: none;
  position: absolute;
}
/* Show the indicator (dot/circle) when checked */
.field .checkmark.checked:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.field .checkmark:after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  border: solid white;
  border-width: 0 2px 2px 0;
  height: 10px;
  left: 4px;
  top: 0px;
  transform: rotate(45deg);
  width: 5px;
}
.dropdown_item {
  margin-top: 12px;
  min-height: 20px;
}
.dropdown {
  display: none;
}
.dropdown.show {
  display: block;
}
.dropdown_item.field > label > button {
  background: transparent;
  border: 0px solid;
  cursor: pointer;
  outline: none;
}
.dropdown_item.field > label {
  display: flex;
  padding-left: 26px;
  text-align: start;
}
.dropdown_item.field > label,
.dropdown_item.field > span {
  cursor: pointer;
}
.left-border {
  background-color: rgb(118, 74, 5);
  bottom: -6px;
  position: absolute;
  right: 0px;
  top: -6px;
}
.left-nav-btn {
  align-items: center;
  background-color: rgb(255, 254, 247);
  border-left: 1px solid #ccc;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  display: flex;
  font-size: 30px;
  height: 60px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
}
.nav .bottom-nav {
  bottom: 0;
  box-shadow: none;
  left: 0;
  min-height: 100px;
  position: absolute;
  right: 0;
  transition: all 0.2s;
  z-index: 998;
}
.nav .bottom-nav .bottom-border {
  background-color: rgb(118, 74, 5);
}
.nav .bottom-nav .bottom-nav-btn,
.nav .record-popup .bottom-record-btn,
.nav .bottom-nav-switch-btn {
  align-items: center;
  background-color: rgb(255, 254, 247);
  border-radius: 10px 10px 0 0;
  border-top: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 22px;
  justify-content: center;
  left: 0;
  margin: 0 auto;
  padding: 0 10px;
  position: absolute;
  right: 0;
  top: -22px;
  width: fit-content;
}
.bottom-nav-btn > span,
.bottom-record-btn > span {
  margin-right: 6px;
}
.bottom-nav-btn > .el-button + .el-button {
  margin-left: 6px;
}
.nav .bottom-nav-switch-btn {
  right: unset;
}
.nav .bottom-nav-show-left {
  left: calc(var(--left-nav-show-nav-ml) * -1);
}
.nav .top-nav-div .top-nav-btn {
  align-items: center;
  background-color: rgb(255, 254, 247);
  border-radius: 0 0 10px 10px;
  border-top: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 22px;
  justify-content: center;
  padding: 0 10px;
  position: absolute;
  right: max(250px, 50%);
  top: 55px;
  width: 60px;
}
.disclaimer-dialog {
  margin-top: clamp(150px, 20%, 30vh);
  max-width: 1000px;
}
.disclaimer-dialog .el-dialog__header {
  display: none;
}
.disclaimer {
  max-height: calc(100vh - 350px);
  overflow: auto;
  padding: 0 10px;
  word-break: initial;
}
.disclaimer-title {
  font-size: var(--fz22);
  margin: 10px 0;
}
.disclaimer-content {
  font-size: var(--fz16);
  margin: 10px 0;
  text-align: justify;
}
.btn_box {
  border-radius: 10px;
  border-width: 0px;
  cursor: pointer;
  font-size: var(--fz14);
  height: 35px;
  margin: 0 10px;
  padding: 8px;
}
.map-copyright {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  margin-left: auto;
  padding-left: 5px;
  position: absolute;
  right: 0;
  text-wrap: nowrap;
  top: 55px;
  width: fit-content;
}
.map-copyright > a {
  color: #0078a8;
  margin-right: 10px;
}
.map-copyright > img {
  height: 25px;
  width: 25px;
}
@media screen and (min-width: 751px) {
  .footer-wrapper.active {
    display: block;
  }
}
/* MarkerCluster */
.marker-cluster {
  background-color: transparent !important;
  background-image: linear-gradient(to right, #245298, #245298);
}
.marker-cluster.selected {
  background-image: linear-gradient(to right, #ff4040, #ff4040);
}
.marker-cluster div {
  background-color: transparent !important;
}
.marker-cluster div span {
  color: white;
  font-size: 14px;
  font-weight: bold;
}
/* Old Map */
#pane-oldmap > .form-box:not(:has(#oldMapSelect)),
#oldMapSelect > div {
  padding: 0 10px 0 20px;
}
#oldMapSelect ul li {
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  padding: 10px 10px 10px 20px;
}
#oldMapSelect ul li:hover,
#oldMapSelect ul li.selected {
  background-color: #dadada;
}
#oldMapSelect ul li button {
  background: transparent;
  border: none;
  flex-grow: 1;
  text-align: left;
}
#oldMapSelect .image-wrap {
  align-content: center;
  background: #ececec;
  cursor: pointer;
  min-height: 80px;
  min-width: 80px;
  text-align: center;
}
#oldMapSelect .image-wrap img {
  max-height: 80px;
  max-width: 80px;
}
.hd-icon {
  background: transparent;
  border: none;
  margin-left: 12px;
}
.hd-icon img {
  width: 30px;
}
.old-map-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.old-map-return-btn {
  position: absolute;
  right: 10px;
}
#oldMapController {
  display: flex;
  margin: 10px 0;
  text-align: center;
}
#oldMapController .leftControl {
  margin: 30px 0;
  position: relative;
  width: 50%;
}
#oldMapController .rightControl {
  align-content: center;
  width: 50%;
}
#oldMapController .rightControl.oldMapAdvance {
  width: auto;
}
#oldMapController .rightControl > div {
  align-items: center;
  display: inline-flex;
  margin-bottom: 20px;
  text-wrap: nowrap;
}
#oldMapController button {
  padding: 0;
}
#oldMapController button.is-circle {
  border: 2px solid rgb(112, 111, 109);
}
@media screen and (max-width: 420px) {
  #oldMapController button {
    margin: 0 5px !important;
  }
  #oldMapController .el-button--large {
    height: 35px;
    width: 35px;
  }
}
.old-map-advance-btn {
  display: flex;
}
.old-map-opacity {
  display: block;
  margin-top: 10px;
}
.old-map-opacity-label {
  text-wrap: nowrap;
}
#opacity-slider {
  margin: 0 10px 0 20px;
  width: 100%;
}
#swipeBarBox {
  align-items: center;
  display: flex;
  height: 100%;
  position: absolute;
}
#swipeBarBox::before {
  border: 3px solid rgba(255, 255, 255, 0.8);
  border-width: calc(3px * var(--old-map-width-ratio));
  content: "";
  height: 100%;
  margin-left: calc(12px * var(--old-map-width-ratio));
  position: absolute;
  z-index: 2;
}
#swipeBarButton {
  background-color: transparent;
  border: none;
  cursor: ew-resize;
  display: block;
  pointer-events: all;
  z-index: 2;
}
#swipeBarButton > img {
  height: calc(30px * var(--old-map-height-ratio));
  width: calc(30px * var(--old-map-width-ratio));
}
/* datepicker css */
.js-datepicker {
  left: 84px;
  position: absolute;
  top: 100%;
  z-index: 3;
}
.ui-datepicker {
  text-align: center;
}
.ui-datepicker-trigger {
  margin: 0 0 0 5px;
  vertical-align: text-top;
}
.ui-datepicker {
  border-color: #c9f0f5 !important;
  font-family: Open Sans, Arial, sans-serif;
  margin-top: 2px;
  padding: 0 !important;
}
.ui-datepicker {
  width: 256px;
}
.openemr-calendar .ui-datepicker {
  width: 191px;
}
.ui-datepicker table {
  table-layout: fixed;
  width: 256px;
}
.ui-datepicker-header {
  background-color: #245298 !important;
  background-image: none !important;
  border-radius: 0;
}
.ui-datepicker-title {
  line-height: 35px !important;
  margin: 0 10px !important;
}
.ui-datepicker-prev span {
  display: none !important;
}
.ui-datepicker-next {
  text-align: center;
}
.ui-datepicker-next span {
  display: none !important;
}
.ui-datepicker-prev {
  background-color: transparent !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAMCAYAAACulacQAAAAUklEQVQYlXWPwQnAMAwDj9IBOlpH8CjdJLNksuujFIJjC/w6WUioFBcqJ7sGEAD5Y/hpqLRghRv4YQlUjqXI3Kql2MixraGbEhVcDXcFUR/1egEHNuTBpFW0NgAAAABJRU5ErkJggg==") !important;
  display: inline-block;
  height: 12px !important;
  left: 0 !important;
  margin: 14px 12px;
  top: 0 !important;
  width: 7px !important;
}
.ui-datepicker-next {
  cursor: pointer;
}
.ui-datepicker-prev {
  cursor: pointer;
}
.ui-datepicker-next {
  background-color: transparent !important;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAAVUlEQVQYlXWQ0Q3AIAhEL07gKI7kKN2kI3Wk1w9to3KQEELucQEECOizhhTQGHFnwOdgobWx0GkZILfYBhXl0STVbPoBarbkL7ozN/F8VBBXh8uJgF5r2hrI4GHUkAAAAABJRU5ErkJggg==") !important;
  display: inline-block;
  height: 12px !important;
  margin: 14px 12px;
  right: 0 !important;
  top: 0 !important;
  width: 8px !important;
}
.ui-datepicker-month {
  background-color: #245298;
  border: none !important;
  border-radius: 2px;
  color: #fff;
  font-family: Open Sans !important;
  font-size: 14px !important;
  font-weight: 600;
  height: 22px;
  margin-right: 17px !important;
  text-align: left;
  width: 110px !important;
}
.ui-datepicker-year {
  background-color: #245298;
  border: none !important;
  border-radius: 2px;
  color: #fff;
  font-family: Open Sans !important;
  font-size: 14px !important;
  font-weight: 600;
  height: 22px;
  text-align: left;
  width: 61px !important;
}
.ui-datepicker-year-suffix {
  color: white;
}
.ui-datepicker-month option,
.ui-datepicker-year option {
  background-color: #fff !important;
  color: #3985a0 !important;
  font-family: Open Sans !important;
  font-size: 14px !important;
  font-weight: 600;
}
.ui-datepicker-month option[selected],
.ui-datepicker-year option[selected] {
  background-color: #e5edf0 !important;
}
.ui-datepicker .ui-state-hover {
  border: 0 !important;
}
.ui-datepicker td {
  vertical-align: top;
}
.ui-datepicker .ui-state-default {
  border-color: #edebeb !important;
  border-radius: 2px;
  color: #000 !important;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400 !important;
  height: 24px;
  line-height: 24px;
  margin: 7px 0 0 4px;
  padding: 0 !important;
  text-align: center !important;
  width: 24px;
}
.ui-datepicker .ui-state-default.ui-state-highlight {
  background-color: #cff3f8 !important;
  border-color: #dcdcdc;
  color: #3e9aba !important;
}
.ui-datepicker td {
  width: 33px;
}
.ui-state-default.ui-state-hover {
  background-color: #cff3f8 !important;
  border-color: #dcdcdc;
}
.ui-datepicker .ui-state-active {
  background-color: #cff3f8 !important;
  border-color: #dcdcdc;
  color: #3e9aba !important;
}
.ui-datepicker-calendar thead tr th {
  color: #245298;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  padding: 0.45em 0.3em !important;
}
.ui-datepicker-close {
  display: none;
}
.ui-datepicker thead {
  background-color: #f5f5f5;
}
.ui-state-default.ui-datepicker-current {
  background-color: transparent !important;
  border: none;
  border-width: 0 !important;
  color: #fff !important;
  float: none !important;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold !important;
  margin: 0 !important;
  opacity: 1 !important;
  text-align: left;
  vertical-align: top;
}
.ui-datepicker-buttonpane.ui-widget-content {
  background-color: #245298;
  height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}
#year_slider_range {
  margin: 25px auto 40px auto;
  width: calc(100% - 20px);
}
.el-slider__bar {
  background: #245298;
}
.el-slider__button {
  background-color: #245298;
  border: 4px solid white;
  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
}
.form-map_group .el-select-dropdown__item:nth-child(1) {
  display: none;
}
.con {
  z-index: 99;
}
.old-map-advance {
  display: none;
  margin-top: 10px;
}
.record-popup-content .el-collapse-item__header .el-collapse-item__arrow {
  transform: rotate(90deg);
}
.record-popup-content .el-collapse-item__header.is-active .el-collapse-item__arrow {
  transform: rotate(270deg);
}
.record-title {
  align-items: center;
  display: flex;
  padding: 10px 0;
  width: 100%;
}
.record-title > span {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-size: var(--fz16);
  margin-right: auto;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}
.record-title > span:hover {
  display: block;
}
.record-title .image-wrap {
  align-content: center;
  background: #ececec;
  cursor: pointer;
  margin: 0 10px;
  min-height: 80px;
  min-width: 80px;
  text-align: center;
}
.record-title .image-wrap img {
  max-height: 80px;
  max-width: 80px;
}
.record-detail {
  font-size: var(--fz14);
  line-height: var(--fz18);
}
.record-detail > span {
  font-weight: bold;
}
.record-detail > p,
.record-detail > ul {
  margin: 5px 0 20px 0;
}
.record-desc > p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-line;
}
.record-detail > ul > li {
  margin-bottom: 8px;
}
.record-detail .record-other-place-btn {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
}
.record-bottom {
  align-items: center;
  display: flex;
}
.record-bottom .field .checkmark {
  margin: 0;
}
.record-bottom .field .checkmark:after {
  border-width: 0 2px 2px 0;
  left: 4px;
  top: 0;
}
.record-bottom .field label {
  align-items: center;
  font-size: var(--fz12);
  padding-left: 15px;
  text-wrap: nowrap;
}
.record-bottom .btn_box {
  background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  color: #1d4168;
  font-weight: bold;
  margin-left: auto;
}
.el-collapse-item {
  padding: 0 10px 0 20px;
}
.el-collapse-item.highlighted {
  background-color: #dadada;
}
.el-collapse-item.highlighted > * {
  background-color: transparent;
}
.el-collapse-item__header {
  height: max-content;
}
.swiper-lock {
  padding-right: 36px;
}
.information {
  background: #fff;
  bottom: 0px;
  display: flex;
  flex-direction: column;
}
.information.active {
  height: calc(100% - 75px);
}
.preview-rotate {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.preview-rotate-content {
  align-items: center;
  display: flex;
  gap: 10px;
}
.preview-lat-lng {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0 10px 0;
}
.preview-lat-lng-1 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.toggle-form-option-arrow {
  padding-left: 2px;
  padding-right: 2px;
}
.toggle-form-option-arrow i {
  color: #707070;
}
.toggle-form-option-arrow.active i {
  transform: rotate(90deg);
}
a.disclaimer-close,
a.left-nav-close,
a.record-popup-close {
  align-items: center;
  color: #929292;
  cursor: pointer;
  display: flex;
  font: 30px/14px Tahoma, Verdana, sans-serif;
  height: 30px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 30px;
  z-index: 99;
}