* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0px;
    outline: none;
    margin: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #333;
    user-select: none;
    line-height: 18px;
}
b{font-weight: 500;}
.mb-1{margin-bottom: 1rem;}
.mb-05{margin-bottom: 0.5rem;}
.mt-1{margin-top: 1rem;}
.mt-05{margin-top: 0.5rem;}
.ml-1{margin-left: 1rem;}
.ml-05{margin-left: 0.5rem;}
.mr-1{margin-right: 1rem;}
.mr-05{margin-right: 0.5rem;}
.d-flex{display: flex;}
.gap-1{gap: 1rem;}
.flex-1{flex: 1;}
.text-link{color: #0666f4;text-decoration: underline;cursor: pointer;}
.text-link:hover{opacity: 0.8;}

.btn-sm{height: 30px !important;font-size: 0.9rem;}
.btn-primary {background-color: #0666f4;color: #fff;display: flex;align-items: center;justify-content: center;height: 36px;border: none;padding: 0px 15px;cursor: pointer;border-radius: 3px;font-weight: 500;position: relative;white-space: nowrap;}
.btn-primary:hover {opacity: 0.9;}
.btn-primary:active {opacity: 0.8;}
.btn-default {background-color: #eee;display: flex;align-items: center;justify-content: center;height: 36px;border: none;padding: 0px 10px;cursor: pointer;border-radius: 3px;font-weight: 500;position: relative;}
.btn-default:hover {opacity: 0.9;}
.btn-default:active {opacity: 0.8;}

#app{width: 100vw;height:100vh;position: relative;background: #ccc;}

.loadingpage{position: fixed;top:0;bottom:0;right:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition: all 0.5s;opacity: 1;background: #fff;z-index:9999;visibility: visible;}
.loadingpage .logo-img{width: 60px;height: 60px;overflow: hidden;border-radius: 10px;margin-bottom: 20px;box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.05)}
.loadingpage .logo-img img{width: 100%;height: 100%;object-fit:cover;}
.loadingpage .text-loading{position:relative;display: inline-block;font-family: monospace;}
.loadingpage .text-loading:after{content: '';left: 0px;right: 0px;bottom: 0px;top: 0px;background: rgba(255,255,255,0.8);z-index: 1;position: absolute;-webkit-animation: loading-translate 1s infinite linear;animation: loading-translate 1.5s infinite linear;transition: all 1.5s;-webkit-transition: all 1.5s;-webkit-transform: translateX(-100%);transform: translateX(-100%);}
.loadingpage.hide{opacity: 0;visibility: hidden;}

.absolute-input-icon {position: absolute;right: 0px;top: 0px;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.absolute-input-icon svg {height: 15px;fill: #888;}

.app-header{height: 50px;position:fixed;left: 0px;right: 0px;top: 0px;display:flex;align-items: center;background: #fff;z-index: 2;box-shadow: 0px 0px 3px 1px rgb(0 0 0 / 10%);}
.app-header .app-logo{height: 100%;width: 60px;display:flex;align-items: center;justify-content: center;cursor: pointer;}
.app-header .app-logo img{height: 80%;border-radius: 10px;}
.app-header .app-menu{flex: 1;}
.app-header .app-menu ul{display: flex;align-content:center;}
.app-header .app-menu ul li{height: 50px;position: relative;display: flex;align-items:center;justify-items:center;padding: 0px 15px;}
.app-header .app-menu ul li a{font-size: 1.1rem;cursor: pointer;opacity: 0.9;display:flex;align-items:center;text-decoration: none;white-space: nowrap;}
.app-header .app-menu ul li a.has-icon{padding-right: 10px;}
.app-header .app-menu ul li a svg{height: 20px;width: 20px;position:absolute;top: 50%;right: 0px;transform:translate(0%, -40%);fill: #777;}
.app-header .app-menu ul li a:hover{opacity: 1;}
.app-header .app-menu ul li a:active{opacity: 0.6;}
.app-header .app-menu ul li ul{position: absolute;top:100%;right: 0px;display:block;background: #fff;border-radius: 5px;box-shadow: 0px 1px 3px 1px rgba(0,0,0,0.05);transform:translate(0px, 0px);transition: all 0.2s;opacity: 0;visibility: hidden;overflow: hidden;padding: 10px 0px;}
.app-header .app-menu ul li ul li{white-space: nowrap;height:auto;padding: 8px 15px;}
.app-header .app-menu ul li:hover ul{transform:translate(0px, 5px);opacity: 1;visibility: visible;}
.app-header .app-menu ul li ul li:hover{color: #3390ec;cursor: pointer;}
.app-header .app-menu ul li ul li:active{opacity: 0.6;}
.app-header .user-info{margin-right: 10px;}
.app-header .user-info .account-name{height: 50px;display: flex;align-items: center;gap: 7px;white-space: nowrap;}
.app-header .user-info .account-name svg{height: 20px;fill: #777;}
.app-header .user-info .account-menu{position:absolute;top: 100%;background: #fff;border-radius: 6px;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgba(0, 0, 0, 0.02);padding: 15px;margin-top: 10px;right: 10px;visibility: hidden;opacity: 0;transform:translate(0px, -10px);transition: all 0.2s;}
.app-header .user-info .account-menu .account-package{background: #edf1fc;border-radius: 3px;margin-bottom:  10px;padding: 5px 0px;}
.app-header .user-info .account-menu .menu-row{display:flex;gap: 15px;padding: 5px 10px;}
.app-header .user-info .account-menu .menu-row .label{min-width: 60px;}
.app-header .user-info .account-menu .menu-item{padding: 6px 0px;border-bottom: 1px solid #eee;cursor: pointer;}
.app-header .user-info .account-menu .menu-item:last-child{border:none;}
.app-header .user-info .account-menu .menu-item:hover{color: #3390ec;}
.app-header .user-info .account-menu:after{content: '';position: absolute;top: 0%;left: 0;width: 100%;height: 10px;margin-top: -10px;}
.app-header .user-info .account-menu:before{content: '';position: absolute;top: -5px;right: 30px;width: 10px;height: 10px;background: #fff;display:block;transform:rotate(-135deg)}

.app-header .user-info:hover .account-menu{visibility: visible;opacity: 1;transform:translate(0px, 0px);}


.lmap{display: block;position: absolute;top: 50px;right: 0px;left: 0px;bottom: 0px;z-index: 1;}
.lmap .gmap{width: 100%;height: 100%;}
.lmap .province-box.hide{display: none;}
.lmap .province-box{position: absolute;top: 15px;left: 15px;z-index: 999;}
.lmap .province-box .province-container{background: #fff;padding: 15px;border-radius: 6px;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgba(0,0,0,0.02);}
.lmap .province-box .province-container .close-btn{position:absolute;top: 10px;right: 10px;width: 20px;height: 20px;cursor: pointer;opacity: 0.8;display: none;display:flex;align-items:center;justify-content:center;}
.lmap .province-box .province-container .close-btn svg{height: 15px;fill: #888;}
.lmap .province-box .province-container .close-btn:hover{opacity: 1;}
.lmap .province-box .province-container .close-btn:active{opacity: 0.8;}
.lmap .province-box .province-container .province-title{font-size: 1.1rem;height: 30px;font-weight: 500;}
.lmap .province-box .province-container .groupsearch {display: flex;height: 30px;align-items: center;width: 275px;}
.lmap .province-box .province-container .groupsearch .group-icons {display: flex;}
.lmap .province-box .province-container .groupsearch .group-icons .icon {cursor: pointer; margin-left: 10px;}
.lmap .province-box .province-container .groupsearch .group-icons .icon:active{opacity: 0.9}
.lmap .province-box .province-container .groupsearch .group-icons .icon:hover{opacity: 0.8;}
.lmap .province-box .province-container .groupsearch .group-icons .icon span.svg-icon {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;background: #edf1fc;border-radius: 6px;}
.lmap .province-box .province-container .groupsearch .group-icons .icon span.svg-icon svg {height: 15px;fill: #333;}
.lmap .province-box .province-container .quick-search {height: 30px;display: flex;align-items: center;justify-content: center;margin: 0px;position: relative;flex: 1;}
.lmap .province-box .province-container .quick-search .icon {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;position: absolute;left: 0px;top: 0px;cursor: pointer;}
.lmap .province-box .province-container .quick-search .icon svg {height: 15px !important;fill: #333;}
.lmap .province-box .province-container .quick-search input {outline: none;border: 1px solid #edf1fc;line-height: 30px;padding-left: 30px;background: #edf1fc;border-radius: 6px;flex: 1;}
.lmap .province-box .province-container .quick-search input:focus {border: 1px solid #3390ec;background: #fff;}
.lmap .province-box .province-container .menu {padding-bottom: 0vw;height: calc(100vh - 180px);display: flex;flex-direction: column;margin-top: 10px;}
.lmap .province-box .province-container .slide-box{overflow: hidden;flex: 1;width: 275px;}
.lmap .province-box .province-container .slide-box .slide-container{display: flex;width: calc(275px * 2);transition: all 0.3s;}
.lmap .province-box .province-container .slide-box .slide-container.level-3{width: calc(275px * 3);}
.lmap .province-box .province-container .slide-box .slide-container .slide-item{flex: 1;height: calc(100vh - 180px);overflow: auto;}
.lmap .province-box .province-container .menu ul {margin: 0px;padding: 0px;}
.lmap .province-box .province-container .menu ul li {display: flex;align-items: center;padding: 10px 0px;cursor: pointer;border-bottom: 0.5px solid var(--border-color);}
.lmap .province-box .province-container .menu ul li:hover{color: #3390ec;}

.lmap .change-base-layer{position: absolute;bottom: 40px;right: 15px;z-index: 999;background: #fff;padding: 2px;border-radius: 8px;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgba(0,0,0,0.02);overflow:hidden;width: 60px;height: 60px;cursor: pointer;}
.lmap .change-base-layer .layer-icon{width: 100%;height:100%;}
.lmap .change-base-layer .layer-icon img{width: 100%;height:100%;object-fit:cover;border-radius: 6px;}
.lmap .change-base-layer .layer-name{position:absolute;bottom: 2px;left: 2px; right: 2px;background: rgba(0,0,0,0.5);color: #fff;white-space:nowrap;font-size:0.7rem;text-align:center;border-radius:0px 0px 8px 8px;}

.lmap .map-note{position: absolute;bottom: 5px;right: 15px;z-index: 999;background: rgba(255, 255, 255, 0.6);padding: 2px 5px;border-radius: 3px;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgba(0,0,0,0.02);overflow:hidden;font-size: 0.8rem;text-shadow: -1px 0 0 white, -1px -1px 0 white, 0 -1px 0 white, 1px -1px 0 white, 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 1px 0 white;}

.modal.absolute-marker{top: unset;left:50%; right: unset;bottom: 20px;;transform:translate(-50%, 0px);background: none;}
.modal.absolute-marker.open .modal-body.animate{margin:0px;}
.modal.absolute-marker.open .modal-close-btn{top: 5px;right: 5px;}
.modal.absolute-marker .marker-properties{}
.modal.absolute-marker .marker-properties .row{display: flex;padding: 5px 0px;}
.modal.absolute-marker .marker-properties .row .label{min-width: 115px;}
.modal.absolute-marker .marker-properties .row .value{user-select:text;}

.modal {position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);display: flex;align-items: center;justify-content: center;visibility: hidden;z-index: 99993;}
.modal.open {visibility: visible;}
.modal .scrollbox {overflow: auto;width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;}
.modal .modal-body {background-color: #fff;width: 350px;padding: 20px;border-radius: 4px;box-shadow: 0px 10px 10px 2px rgb(0 0 0 / 5%);position: relative;margin: 30px auto;}
.modal.full-screen .modal-body{background:none;width: 100vw;padding:0px;margin:0px;height: 100vh;}
.modal .modal-body.lg {width: 600px;}
.modal .modal-body.sm{width: 250px;}
.modal .modal-close-btn {position: absolute;right: 10px;top: 10px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.modal .modal-close-btn svg {height: 17px;fill: #c1c1c1;}
.modal .modal-close-btn:hover svg {fill: #888;}
.modal .modal-body .modal-title {font-size: 1.1rem;font-weight: 500;margin-bottom: 10px;display: flex;align-items: center;}
.modal .modal-body .modal-title .icon {padding-right: 15px;display: flex;align-items: center;cursor: pointer;}
.modal .modal-body .modal-title .icon svg {height: 17px;}
.modal .modal-body .tab {display: flex;position: relative;gap: 15px;}
.modal .modal-body .tab:after {content: '';position: absolute;height: 1px;bottom: 0px;left: 0px;width: 100%;background: #e3e3e3;}
.modal .modal-body .tab .item {height: 30px;border-bottom: 3px solid #fff;display: flex;align-items: center;justify-content: center;margin-right: 15px;cursor: pointer;}
.modal .modal-body .tab .item.active {border-bottom: 2px solid #0666f4;font-weight: 500;}
.modal .modal-body .inner-tab{max-height: 70vh;overflow: auto;}
.modal .modal-body input {width: 100%;height: 36px;border: 1px solid #e1e1e1;padding: 0px 10px;line-height: 36px;outline: none;box-sizing: border-box;border-radius: 3px;}
.modal .modal-body input:focus {border: 1px solid #0666f4;}
.modal .modal-body textarea {width: 100%;height: 72px;border: 1px solid #e1e1e1;padding: 8px 10px;line-height: 20px;outline: none;box-sizing: border-box;border-radius: 3px;}
.modal .modal-body textarea:focus {border: 1px solid #0666f4;}
.modal .modal-body select {width: 100%;height: 36px;border: 1px solid #e1e1e1;padding: 0px 10px;line-height: 36px;outline: none;box-sizing: border-box;cursor: pointer;border-radius: 3px;}
.modal .modal-body select:focus {border: 1px solid #0666f4;}
.modal .modal-body .checkparcel {margin-top: 20px;}
.modal .modal-body .checkparcel .sub-title {margin-bottom: 5px;display: block;}
.modal .modal-body .checkpolygon .rmicon {width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.modal .modal-body .checkpolygon .rmicon svg {height: 17px;fill: #c1c1c1;}
.modal .modal-body .checkpolygon .rmicon:hover svg {fill: #888;}
.modal .modal-body .login {margin-top: 20px;max-height: calc(100vh - 130px);overflow: auto;padding-right: 20px;margin-right: -20px;}
.modal .modal-body .login .sub-title {margin-bottom: 5px;display: block;}
.modal .modal-body .download {}
.modal .modal-body .download .store-icon img {width: 180px;}
.modal .modal-body .download .store-icon .ios-store {width: 180px;height: 52px;overflow: hidden;position: relative;}
.modal .modal-body .download .store-icon .android-store {width: 180px;height: 52px;overflow: hidden;position: relative;margin-top: 20px;}
.modal .modal-body .download .store-icon .android-store img {margin-top: -60px;}
.modal .modal-body .mobile-web-btn {margin-top: 15px;position: relative;padding-top: 30px;display: none;}
.modal .modal-body .mobile-web-btn:after {content: '';height: 1px;left: 40%;right: 40%;position: absolute;top: 10px;background: #eee;}
.modal .modal-body .mobile-web-btn a {display: flex;color: #0666f4;align-items: center;justify-content: center;text-decoration: none;font-size: 17px;}
.modal .modal-body .download .qr-icon img {width: 125px;}
.modal .modal-body .download .qr-icon {display: flex;align-items: center;justify-content: center;}
.modal .modal-body .quick-search {height: 36px;display: flex;align-items: center;justify-content: center;margin-bottom: 0px;position: relative;}
.modal .modal-body .quick-search .icon {width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;position: absolute;left: 0px;top: 0px;}
.modal .modal-body .quick-search .icon svg {height: 17px;}
.modal .modal-body .quick-search input {outline: none;border: 1px solid #e1e1e1;width: 100%;height: 100%;line-height: 32px;padding-left: 32px;background: #fff;border-radius: 4px;font-size: 1rem;}
.modal .modal-body .quick-search input:focus {border: 1px solid #0666f4;background: #fff;}

.modal .coordinate-table{user-select: text;}
.modal .coordinate-table *{user-select: text;}

.province-type-box{margin-top: 15px;}
.province-type-box .item{display: flex;align-items: center;margin-bottom: 10px;}
.province-type-box .item .label{flex: 2;margin-right: 15px;}
.province-type-box .item .value{flex: 2;}

.virtual-selectbox.sm{height: 30px;border-radius: 3px;}
.virtual-selectbox.sm .icon svg{height: 12px;}
.virtual-selectbox {display: inline-flex;height: 36px;border: 1px solid #ccc;align-items: center;padding: 0px 15px;border-radius: 4px;position: relative;box-sizing: border-box;cursor: pointer;}
.virtual-selectbox:hover{border-color: #27c;}
.virtual-selectbox:after {content: '';position: absolute;left: 0px;top: 0px;right: 0px;bottom: 0px;z-index: 1;}
.virtual-selectbox .text {flex: 1;white-space: nowrap;}
.virtual-selectbox .icon {display: flex;align-items: center;margin-left: 10px;}
.virtual-selectbox .icon svg {height: 12px;fill: var(--text-normal)}

.modal .modal-body.animate {transition: transform 0.2s;-webkit-transition: transform 0.2s;transform: scale(0.9);-webkit-transform: scale(0.9);opacity: 0;}
.modal.open .modal-body.animate {transform: scale(1);-webkit-transform: scale(1);opacity: 1;}
.modal .modal-body .colorlist {max-height: calc(100vh - 235px);overflow: auto;margin-right: -20px;}
.modal .modal-body .colorlist .item {display: flex;align-items: flex-start;margin-bottom: 5px;}
.modal .modal-body .colorlist .item .color-item {width: 50px;height: 15px;border: 1px solid #333;}
.modal .modal-body .colorlist .item .color-code {margin: 0px 10px;width: 55px;}
.modal .modal-body .colorlist .item .color-name {line-height: 17px;width: calc(100% - 75px);}
.modal .modal-body .colorlist .item .line-item {display: flex;align-items: center;justify-content: center;width: 50px;height: 15px;position: relative;overflow: hidden;}
.modal .modal-body .colorlist .item .line-item span {height: 1px;width: 100%;display: block;}
.modal .modal-body .colorlist .item .line-item .img {height: 15px;}
.modal .modal-body .coortable {max-height: calc(100vh - 135px);overflow: hidden auto;margin-right: -20px;padding-right: 20px;}
.modal .modal-body table {border-collapse: collapse;margin-bottom: 15px;width: 100%;}
.modal .modal-body table tr th, .modal .modal-body table tr td {border: 1px solid #999;padding: 2px 5px;}
.modal .modal-body table tr th {font-weight: 500;}
.modal .tutorial-body {max-height: 80vh;overflow: auto;margin-right: -20px;padding-right: 20px;}
.modal .tutorial-tabs {border: 0.5px solid #cccfda;border-radius: 6px;overflow: hidden;}
.modal .tutorial-tabs .item {border-bottom: 0.5px solid #cccfda;}
.modal .tutorial-tabs .item .tab-content {overflow: hidden;max-height: 0px;padding: 0px 15px;}
.modal .tutorial-tabs .item .tab-content .row {display: flex;margin-bottom: 5px;}
.modal .tutorial-tabs .item .tab-content .row .step {font-weight: 500;margin-right: 10px;white-space: nowrap;}
.modal .tutorial-tabs .item .tab-content .row .step-text {flex: 1;}
.modal .tutorial-tabs .item.active .tab-content {max-height: 9999px;padding: 5px 15px 15px 15px;}
.modal .tutorial-tabs .item.active .tab-content * {font-size: 14px;line-height: 20px;}
.modal .tutorial-tabs .item.active .tab-title .icon svg {transform: rotate(-180deg);-webkit-transform: rotate(-180deg);}
.modal .tutorial-tabs .item.active .tab-title .text {font-weight: 500;color: #3a81f7;}
.modal .tutorial-tabs .item:last-child {border-bottom: none;}
.modal .tutorial-tabs .item .tab-title {height: 36px;display: flex;align-items: center;cursor: pointer;}
.modal .tutorial-tabs .item .tab-title:hover {background: #f0f2f5;}
.modal .tutorial-tabs .item .tab-title .text {flex: 1;padding: 0px 15px;}
.modal .tutorial-tabs .item .tab-title .icon {width: 36px;height: 36px;align-items: center;justify-content: center;display: flex;}
.modal .tutorial-tabs .item .tab-title .icon svg {height: 17px;fill: #a9abb8;transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transition: all 0.1s;-webkit-transition: all 0.1s;}
.modal .sending-ocr .modal-close-btn {display: none;}
.modal .sending-ocr .modal-title {display: none;}
.modal .sending-ocr .modal-body.lg {width: auto;background: #333;padding: 10px;}
.modal .sending-ocr .img-cropper {text-align: center;}
.modal .sending-ocr .loading {height: auto;margin-bottom: 10px;}
.modal .sharecodenumber {display: flex;position: relative;height: 50px;justify-content: center;margin: 30px auto;max-width: 280px;}
.modal .sharecodenumber .one_number {width: 34px;height: 50px;display: flex;align-items: center;justify-content: center;border: 1px solid #c1c1c1;margin: 0px 5px;box-sizing: border-box;border-radius: 4px;font-size: 28px;}
.modal .sharecodenumber input {position: absolute;left: 0px;top: 0px;height: 50px;line-height: 50px;z-index: 1;padding: 0px 15px;background: none;letter-spacing: 20px;font-size: 28px;}
.modal .quick-items{max-height: 80vh;overflow-y:auto;overflow-x:hidden;}
.modal .quick-items .title{font-size: 0.9rem;margin-bottom: 1rem;opacity: 0.5;}
.modal .quick-items .item{padding: 6px 15px;margin: 0px -15px;border-radius: 3px;}
.modal .quick-items .item:hover{cursor:pointer;color: #0666f4;}

.modal .modal-body.simplemap .staticmap .gmap{width: 800px;height: 80vh;}
.modal .modal-body.simplemap{width: 800px;}

.savedlist{}
.savedlist .items{max-height: calc(100vh - 180px);overflow: auto;margin: 0px 0px;min-height: 60vh;padding-top: 1rem;}
.savedlist .items .item{padding:8px 0px;border-bottom:1px solid #eee;position:relative;cursor:pointer;}
.savedlist .items .item:hover .name{color: #0666f4;}
.savedlist .items .item:after{content: '';position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;z-index: 1;cursor: pointer;z-index:-1;}
.savedlist .items .item .name{padding-right: 0;font-weight: 500;}
.savedlist .items .item .note{color: #777;font-size:0.9rem;margin-top: 5px;}
.savedlist .items .item .remain{color: #777;font-size:0.9rem;margin-top: 5px;}
.savedlist .items .btn{margin: 1rem;}

.grouplist{}
.grouplist .items{max-height: calc(100vh - 180px);overflow: auto;margin: 0px 0px;min-height: 60vh;margin-top: 1rem;}
.grouplist .items .item{position: relative;padding: 8px 0px;cursor: pointer;user-select: none;border-bottom: 0.5px solid #eee;}
.grouplist .items .item:last-child{border: none}
.grouplist .items .item:after{content: '';position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;z-index: 1;cursor: pointer;}
.grouplist .items .item .name{margin-bottom: 10px;}
.grouplist .items .item .properties{display: flex;gap: 15px;}
.grouplist .items .item .properties > div{font-size: 0.9rem;color: #777;}
.grouplist .items .item:hover .name{color: #0666f4;}
.grouplist .items .d-flex{margin: 3vw;}
.grouplist .items .is-shared{height: 5vw;font-size: 0.7rem;background-color: rgb(109 107 255 / 10%);color: rgb(109 107 255 / 100%);display:inline-flex;align-items:center;justify-content:center;padding:0px 2vw;margin-bottom: 2vw;border-radius:1vw;}

.modal .modal-body .permission{}
.modal .modal-body .permission table tr th{border: none;text-align: left;padding: 10px 5px; border-bottom: 1px solid #eee;}
.modal .modal-body .permission table tr td{border: none;padding: 10px 5px; border-bottom: 1px solid #eee;}
.modal .modal-body .permission table tr td svg{height: 15px;fill: #999;cursor: pointer;}
.modal .modal-body .permission table tr:last-child td{border:none;}
.modal .modal-body .permission .items{max-height: 60vh;overflow:auto;}

.detailgroup{}
.detailgroup .items{max-height: calc(100vh - 180px);overflow: auto;margin: 0px 0px;min-height: 60vh;margin-top: 15px;}
.detailgroup .items .item{padding: 8px 0px;border-bottom:1px solid #eee;position:relative;}
.detailgroup .items .item .name:hover{color: #0666f4;cursor:pointer;}
.detailgroup .items .item:after{content: '';position: absolute;left: 0px;right: 0px;top: 0px;bottom: 0px;z-index: 1;cursor: pointer;z-index:-1;}
.detailgroup .items .item .name{padding-right: 0;font-weight: 500;}
.detailgroup .items .item .note{color: #777;font-size:0.9rem;margin-top: 5px;}
.detailgroup .items .item .remain{color: #777;font-size:0.9rem;margin-top: 5px;}
.detailgroup .items .btn{margin: 1rem;}
.detailgroup .items .attachs{display:flex;gap: calc(50px / 5);margin-top: 10px;margin-bottom: 10px;position: relative;}
.detailgroup .items .attachs .image-item{width: 60px;height: 60px;overflow: hidden;border-radius: 6px;position: relative;border:1px solid #fff;cursor: pointer;}
.detailgroup .items .attachs .image-item img{width: 100%;height: 100%;object-fit:cover;}
.detailgroup .items .attachs .image-item .more-image-item{position:absolute;right: 0px;top:0px;bottom:0px;width: 60px;background: rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;letter-spacing: 2vw;border-radius: 2vw;z-index:1;}

.image-uploaded-list {display: flex;flex-wrap: wrap;justify-content: flex-start;gap: 15px;}
.image-uploaded-list .item {width: 60px;height: 60px;overflow: hidden;position: relative;box-sizing: border-box;border: 1px solid rgba(0,0,0,0.2);border-radius: 6px;}
.image-uploaded-list .item .remove-image-btn {position: absolute;top: 3px;right: 3px;background: rgba(0,0,0,0.5);width: 14px;height: 14px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.image-uploaded-list .item .remove-image-btn:hover{background: rgba(0,0,0,0.7);}
.image-uploaded-list .item .remove-image-btn svg {fill: #fff;height: 10px;}
.image-uploaded-list .item img {width: 100%;height: 100%;object-fit: cover;}
.image-uploaded-list .btn-attach-image{display: flex;align-items: center;justify-content: center;font-size: 2rem;color: #0666f4;border: 1px dashed #0666f4;}
.image-uploaded-list .btn-attach-image label{font-size: 2rem;color: #0666f4;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;cursor:pointer;}
.image-uploaded-list .btn-attach-image:hover{opacity: 0.8;}

.image-list {margin-top: 15px;}
.image-list .item {display: flex;align-items: center;margin-bottom: 10px;}
.image-list .item .image {width: 35px;height: 35px;overflow: hidden;border-radius: 4px;margin-right: 15px;}
.image-list .item .image img {width: 100%;height: 100%;object-fit: cover;}
.image-list .item .size {flex: 1;}

.slider-box {width: 100vw;height: 100vh;overflow:hidden;}
.slider-box .slider-container {display: flex;flex-wrap: nowrap;height: 100vh;transition: opacity 0.3s ease-in-out;opacity: 1;}
.slider-box .slider-container .slider-item {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;flex-shrink: 0;pointer-events: none;}
.slider-box .slider-container .slider-item img {max-height: 80vh;max-width: 80vh;border-radius: 4px;}
.slider-current-image{position: absolute;top: 15px;left: 50%;z-index: 1;display: flex;align-items: center;justify-content: center;transform: translate(-50%, 0px);gap: 15px;}
.slider-current-image .nav{border-radius: 3vw;align-items: center;justify-content: center;background: rgba(0,0,0,0.5);color: rgba(255,255,255,0.9);padding: 0px 15px;height: 30px;display:flex;}
.slider-current-image .prev-icon{border-radius: 50%;display:flex;align-items:center;justify-content:center;background: rgba(0,0,0,0.5);height: 30px;width: 30px;cursor: pointer;}
.slider-current-image .prev-icon svg{fill: #fff;height: 12px;opacity:0.7;transform:rotate(-180deg)}
.slider-current-image .prev-icon:hover svg{opacity: 1;}
.slider-current-image .next-icon{border-radius: 50%;display:flex;align-items:center;justify-content:center;background: rgba(0,0,0,0.5);height: 30px;width: 30px;cursor: pointer;}
.slider-current-image .next-icon svg{fill: #fff;height: 12px;opacity:0.7;}
.slider-current-image .next-icon:hover svg{opacity: 1;}
.slider-current-image .close-icon{border-radius: 50%;display:flex;align-items:center;justify-content:center;background: rgba(0,0,0,0.5);height: 30px;width: 30px;cursor: pointer;}
.slider-current-image .close-icon svg{fill: #fff;height: 12px;opacity:0.7;}
.slider-current-image .close-icon:hover svg{opacity: 1;}


.modal .modal-close-btn.white {background: var(--text-white);z-index: 9;border-radius: 50%;border: none;left: 3vw;z-index: 999;}
.modal .modal-close-btn.white svg {height: 17px;fill: var(--text-dark);}

.payment{}
.payment .body{max-height: calc(100vh - 180px);overflow: auto;margin: 0px -20px;min-height: 60vh;}
.payment .sub-title{padding: 5px 20px;font-size: 1rem;color: #777;}
.payment .packages{border-radius: 10px;margin-bottom:20px;border:1px solid #eee;margin: 0 20px;}
.payment .packages .package-item{padding: 6px 10px;border-bottom: 1px solid #eee;}
.payment .packages .package-item div{font-size: 0.9rem;}
.payment .packages .package-item:last-child{border:none;}
.payment .packages .package-item .name{font-weight: 500;margin-bottom:0px;color: #090;margin-bottom: 3px;}
.payment .payment_method{padding: 10px;border-radius: 8px;margin-bottom: 15px;background: #f3f3f3;position: relative;}
.payment .payment_method .name{font-weight: 500;margin-bottom:5px;margin-top:5px;font-size: 1rem;}
.payment .payment_method .qr-item{position: absolute;top:15px;right:10px;font-size:13px;border:1px solid #27c;color:#0880f9;padding:3px 5px;border-radius: 3px;}
.payment .alert{text-align: center;padding: 10px;border-radius: 6px;margin: 0 20px;margin-top: 1rem;}
.payment .alert-success{background: #f6ffe9;}
.payment .alert-success *{color: var(--text-green);}
.payment .payment-account{margin: 15px 20px;}
.payment .payment-account .item{padding: 10px 15px;border-radius: 6px;margin-bottom: 10px;background: #f7f7f7;position: relative;}
.payment .payment-account .item .bank-name{font-weight: 500;margin-bottom:10px; font-size: 1rem;}
.payment .payment-account .item .qr-item{position: absolute;top:10px;right:10px;font-size: 0.8rem;border:1px solid #333;padding:1px 4px;border-radius: 6px;cursor: pointer;}
.payment .payment-account .item .account-name{font-size: 0.9rem;}
.payment .payment-account .item .branch{font-size: 0.9rem;margin-top: 3px;}

.payment .open-messenger{display:flex;position: relative;padding: 5px 15px;padding-left: 55px;border: 1px solid #eee;border-radius: 10px;cursor:pointer;}
.payment .open-messenger:hover{opacity: 0.8;}
.payment .open-messenger:active{opacity: 1;}
.payment .open-messenger:after{content:'';position:absolute;top:0;bottom:0;right:0;left:0;z-index: 1;}
.payment .open-messenger .logo-icon{width: 30px;height: 30px;position:absolute;left: 10px;top:50%;transform:translate(0,-50%);}
.payment .open-messenger .messenger-content{text-align:left;}
.payment .open-messenger .messenger-content .messenger-title{font-weight: 500;}
.open-messenger .messenger-content .messenger-content{font-size:0.8rem;opacity:0.7;}

.qrbox .qrbody{background: #fff;}
.qrbox .qrbody .qr{width: 100%;min-height: 30vw;margin: 20px 0px;}
.qrbox .qrbody .qr span{position: absolute;top:50%;left: 0;right:0px;display: block;text-align: center;}
.qrbox .qrbody .qr img{width: 100%;position: relative;z-index: 2;}
.qrbox .qrbody .action{display: flex;margin-top: 3vw;}
.qrbox .qrbody .action button{}
.qrbox .qrbody .action button.btn{flex: 1;}
.qrbox .qrbody .priceList{display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #e1e1e1;margin: 0px -20px;gap: 15px;padding: 0px 20px;}
.qrbox .qrbody .priceList .item{font-weight: 500;flex: 1;text-align: center;transition: all 0.2s;height: 32px;display:flex;align-items: flex-start;justify-content:center;position: relative;overflow: hidden;cursor: pointer;}
.qrbox .qrbody .priceList .item:after{content: '';height: 3px;position:absolute;left: 0;bottom: 0;right: 0;transition: all 0.2s;transform: translate(0px, 100%);background: #0880f9;}
.qrbox .qrbody .priceList .item.active:after{transform: translate(0px, 0%);}

.cropper-box {position: fixed;top: 50%;left: 50%;z-index: 999999;overflow: auto;background: #fff;transition: all 0.3s;-webkit-transition: all 0.3s;display: none;width: 600px;height: 90vh;max-height: 600px;transform: translate(-50%, -50%);border-radius: 4px;box-shadow: 0px 10px 10px 2px rgb(0 0 0 / 5%);}
.cropper-box.open {display: flex;flex-direction: column;}
.cropper-box .modal-title {height: 42px;display: flex;align-items: center;justify-content: center;font-size: 1.1rem;font-weight: 500;border-bottom: 1px solid #eee;}
.cropper-box .modal-close-btn {height: 36px;width: 36px;position: absolute;right: 0px;top: 0px;display: flex;align-items: center;justify-content: center;z-index: 11;}
.cropper-box .modal-close-btn svg {height: 15px;fill: #777;}
.cropper-box .img-cropper {width: 100%;flex: 1;overflow: hidden;background: #222;display: flex;align-items: center;justify-content: center;}
.cropper-box .img-cropper img {max-width: 100%;max-height: 100%;}
.cropper-box .btn-block {height: 36px;display: flex;align-items: center;justify-content: center;margin: 0px 0px;border-top: 1px solid #eee;padding: 15px 0px;}
.cropper-box .btn-block button {display: flex;align-items: center;justify-content: center;flex: 1;margin: 0px 15px;border: none;}

.color-list{}
.color-list .tab{display: flex;height: 34px;justify-content: center;align-items:center;padding: 0px;}
.color-list .tab .item{flex:1;border-bottom:2px solid transparent;display:flex;align-items:center;height: 100%;justify-content:center;}
.color-list .tab .item.active{border-color: rgb(109 107 255 / 100%);font-weight: 500;}
.color-list .quick-search{display: flex;height: 32px;align-items:center;border-radius:6px;margin: 15px 0px !important;}
.color-list .quick-search .icon{display:flex;align-items:center;justify-content:center;width: 32px;height:100%;}
.color-list .quick-search .icon svg{height: 17px;}
.color-list .quick-search input{flex:1;margin-right: 10px;height:100%;background:none;border:none;outline:none;}
.color-list .items{height: 50vh;overflow:auto;padding: 0px 0px;}
.color-list .items.no-search-box{height: 60vh;margin-top: 20px;}
.color-list .items .item {display: flex;align-items: flex-start;margin-bottom: 10px;}
.color-list .items .item .color-item {width: 30px;height: 14px;border: 1px solid #333;}
.color-list .items .item .color-code {margin: 0px 15px;width: 50px;}
.color-list .items .item .color-name {width: 200px;}
.color-list .items .item .line-item {display: flex;align-items: center;justify-content: center;width: 50px;height: 15px;position: relative;overflow: hidden;}
.color-list .items .item .line-item span {height: 1px;width: 100%;display: block;}
.color-list .items .item .line-item img {height: 20px;}


.spinner {position: relative;width: 54px;height: 54px;display: block;padding: 12px;border-radius: 10px;transform: scale(0.5);margin: auto;}
.spinner div {width: 4%;height: 16%;background: #777;position: absolute;left: 49%;top: 43%;opacity: 0;-webkit-border-radius: 50px;-webkit-animation: fade 1s linear infinite;}
.spinner div.bar1 {-webkit-transform: rotate(0deg) translate(0, -130%);-webkit-animation-delay: 0s;}
.spinner div.bar2 {-webkit-transform: rotate(30deg) translate(0, -130%);-webkit-animation-delay: -0.9167s;}
.spinner div.bar3 {-webkit-transform: rotate(60deg) translate(0, -130%);-webkit-animation-delay: -0.833s;}
.spinner div.bar4 {-webkit-transform: rotate(90deg) translate(0, -130%);-webkit-animation-delay: -0.7497s;}
.spinner div.bar5 {-webkit-transform: rotate(120deg) translate(0, -130%);-webkit-animation-delay: -0.667s;}
.spinner div.bar6 {-webkit-transform: rotate(150deg) translate(0, -130%);-webkit-animation-delay: -0.5837s;}
.spinner div.bar7 {-webkit-transform: rotate(180deg) translate(0, -130%);-webkit-animation-delay: -0.5s;}
.spinner div.bar8 {-webkit-transform: rotate(210deg) translate(0, -130%);-webkit-animation-delay: -0.4167s;}
.spinner div.bar9 {-webkit-transform: rotate(240deg) translate(0, -130%);-webkit-animation-delay: -0.222s;}
.spinner div.bar10 {-webkit-transform: rotate(270deg) translate(0, -130%);-webkit-animation-delay: -0.2497s;}
.spinner div.bar11 {-webkit-transform: rotate(300deg) translate(0, -130%);-webkit-animation-delay: -0.167s;}
.spinner div.bar12 {-webkit-transform: rotate(330deg) translate(0, -130%);-webkit-animation-delay: -0.0833s;}

.input-group{display: flex;height: 36px;position: relative;}
.input-group input{padding-right: 36px;}
.input-group .icon{width: 36px; height: 36px;display:flex;align-items: center; justify-content: center;position: absolute; top: 0px; right:0px;cursor: pointer;}
.input-group .icon svg{height: 18px;fill: #888}
.input-group .icon:hover svg{fill: #777;}

.checkbox{display:flex;cursor: pointer;}
.checkbox input{display: none;}
.checkbox span{padding-left: 25px;position:relative;}
.checkbox span:after{content: '';width: 14px;height: 14px;border:1px solid #ccc;position:absolute;left: 0px; border-radius: 2px;}
.checkbox input:checked ~ span:before{content: '';width: 3px; height: 8px;border-top: 2px solid #fff;border-left: 2px solid #fff;position: absolute;left: 6px;transform: rotate(-135deg);top: 2px;z-index: 1;}
.checkbox input:checked ~ span:after{background: #0666f4;border-color: #fff;border-radius: 3px;}

.leaflet-measure-path-measurement {position: absolute;color: black;text-shadow: -1px 0 0 white,-1px -1px 0 white,0 -1px 0 white,1px -1px 0 white,1px 0 0 white,1px 1px 0 white,0 1px 0 white,-1px 1px 0 white;white-space: nowrap;transform-origin: 0;pointer-events: none;}
.leaflet-measure-path-measurement > div {position: relative;margin-top: -25%;left: -50%;font-size: 0.7rem;}

.parcel-properties-box{position: absolute;left: 15px;top: 60px;background: #fff;box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%);border-radius: 6px;z-index: 999;padding: 10px 15px;overflow-y: auto;overflow-x: hidden;max-height: calc(100vh - 150px);min-width: 230px;max-width: 420px;}
.parcel-properties-box .close-btn {position: absolute;right: 5px;top: 5px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.parcel-properties-box .close-btn svg {height: 15px;fill: #c1c1c1;}
.parcel-properties-box .close-btn:hover svg {fill: #888;}
.parcel-properties-box .item {padding: 4px 0px;display: flex;border-bottom: 1px solid #eee;align-items: center;}
.parcel-properties-box .item .label {min-width: 110px;font-weight: 500;font-size: 0.9rem;}
.parcel-properties-box .item .value {font-size: 0.9rem;user-select: text;}
.parcel-properties-box sup {font-size: 0.5rem;}
.parcel-properties-box .item .name {flex: 1;}
.parcel-properties-box .item .trash {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.parcel-properties-box .item .trash svg {height: 17px;fill: #c1c1c1;cursor: pointer;color: #999;}
.parcel-properties-box .item .trash:hover svg {fill: #999;}
.parcel-properties-box .title {font-weight: 500;font-size: 1.1rem;margin-bottom: 1rem;}
.parcel-properties-box .plan_info {margin-top: 10px;}
.parcel-properties-box .plan_info .plan-row {position: relative;line-height: 20px;display: flex;align-items: center;background: aliceblue;padding: 3px 10px;margin-top: 5px;}
.parcel-properties-box .plan_info .plan-row.has-detail{background: aliceblue;}
.parcel-properties-box .plan_info .plan-row .note-icon {position: absolute;right: 0px;top: 0px;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;}
.parcel-properties-box .plan_info .plan-row .note-icon svg {height: 16px;fill: #888;}
.parcel-properties-box .plan_info .plan-row .note-icon .text-hover {position: absolute;bottom: 100%;right: -3px;background: rgba(0,0,0,0.7);color: #fff;font-size: 12px;min-width: 150px;padding: 5px 10px;border-radius: 3px;line-height: 18px;display: none;margin-bottom: 8px;}
.parcel-properties-box .plan_info .plan-row .note-icon .text-hover:after {content: '';width: 6px;height: 6px;border: 3px solid rgba(0,0,0,0.7);position: absolute;box-sizing: border-box;border-top-color: transparent;border-left-color: transparent;transform: rotate(45deg);bottom: -3px;right: 15px;}
.parcel-properties-box .plan_info .plan-row .note-icon:hover .text-hover {display: block;}
.parcel-properties-box .plan_info .plan-row .plan-color {width: 35px;height: 18px;display: flex;align-items: center;justify-content: center;font-size: 10px;margin-right: 10px;border-radius: 2px;}
.parcel-properties-box .plan_info .plan-row .plan-area {min-width: 65px;font-size: 0.9rem;margin-right: 10px;}
.parcel-properties-box .plan_info .plan-row .plan-name {font-size: 0.9rem;display: block;max-width: 220px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.parcel-properties-box .plan_info .detail-plan-row{margin-bottom: 10px;padding: 0px 10px;border: 1px solid #f0f8ff;}
.parcel-properties-box .plan_info .detail-plan-row .detail-label{min-width: 130px;font-size: 0.9rem;font-weight: 500;}
.parcel-properties-box .plan_info .detail-plan-row .detail-value{font-size: 0.9rem;}
.parcel-properties-box .plan_info .detail-plan-row .item{border-bottom: 1px dashed #eee !important;}
.parcel-properties-box .plan_info .detail-plan-row .item:last-child{border: none !important;}
.parcel-properties-box .checkbox span{font-size: 0.9rem;}

.map-tool{position: absolute;top: 15px;left: 15px;z-index: 9999;display:flex;}
.map-tool .item{display:flex;align-items: center;justify-content:center;height: 30px;background: #fff;box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%);border-radius: 6px;padding: 0px 10px;margin-right: 10px;cursor: pointer;position: relative;white-space: nowrap;font-size: 0.9rem;font-weight: 500;}
.map-tool .item *{font-size: 0.9rem}
.map-tool .item .selected-ward{display:flex;align-items:center;}
.map-tool .item .selected-ward div{white-space: nowrap}
.map-tool .item .selected-ward span{margin: 0px 10px;display:flex;align-items:center;justify-content: center;}
.map-tool .item .selected-ward svg{height: 12px;fill: #888}
.map-tool .item .tooltip{position:absolute;top: 100%;background: rgba(0,0,0,0.6);padding: 15px;left: 50%;transform: translate(-50%, 10px);width: 180px;border-radius: 6px;display: none;z-index: 1;}
.map-tool .item:hover .tooltip{display:block;}
.map-tool .item .tooltip *{color: #fff;font-size: 0.9rem;white-space: break-spaces;}
.map-tool .item .tooltip .tooltip-title{font-weight: 500;margin-bottom: 10px;}
.map-tool .item .tooltip:after{content: '';position: absolute;top: 0%;left: 0;width: 100%;height: 10px;margin-top: -10px;}
.map-tool .item .tooltip:before{content: '';position: absolute;top: -5px;right: 50%;width: 10px;height: 10px;display:block;transform:rotate(-135deg);box-sizing:border-box;border:5px solid rgba(0,0,0,0.5);border-top-color:rgba(0,0,0,0);border-left-color:rgba(0,0,0,0)}
.map-tool .item:active{opacity: 0.9;}
.map-tool .item.layers{position:relative;padding-right: 30px;}
.map-tool .item.layers span{position:absolute;right:0px;bottom:0px;top: 0px;width: 30px;display:flex;align-items:center;justify-content:center;}
.map-tool .item.layers span svg{height: 20px;fill: #888;}
.map-tool .item.layers .layer-items{position:absolute;top: 100%;right: 0px;background: #fff;padding: 5px 15px;border-radius: 6px;display:none;box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%);margin-top: 10px;}
.map-tool .item.layers .layer-items:after{content: '';position: absolute;top: 0%;left: 0;width: 100%;height: 10px;margin-top: -10px;}
.map-tool .item.layers .layer-items:before{content: '';position: absolute;top: -5px;right: 30px;width: 10px;height: 10px;background: #fff;display:block;transform:rotate(-135deg)}
.map-tool .item.layers .layer-items div{padding: 0px 0px;min-height: 30px;display:flex;align-items:center;white-space: nowrap;}
.map-tool .item.layers .layer-items div:hover{color: #0666f4;}
.map-tool .item.layers:hover .layer-items{display:block;}
.map-tool .item.layer-opacity{display: flex;}
.map-tool .item.layer-opacity .rangeslider {position: relative;margin-left: 15px;margin-right: -10px;}
.map-tool .item.layer-opacity .rangeslider:after {content: '';position: absolute;left: 8px;right: 8px;height: 2px;background: #ccc;top: 50%;}
.map-tool .item.layer-opacity .rangeslider input {position: relative;z-index: 1;background: none;margin-top: 8px;cursor: pointer;width: 100px;}
.map-tool .item.layer-opacity .rangeslider .mask-range {content: '';position: absolute;left: 0px;height: 2px;background: #0666f4;top: 50%;z-index: 1;}
.map-tool .item.layer-opacity .rangeslider input::-webkit-slider-thumb {background: #0666f4;-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius: 50%;}
.map-tool .item.layer-opacity .rangeslider input::-moz-range-thumb {background: #0666f4;-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius: 50%;}

.map-tool ~ .province-box{top: 65px}
.map-tool ~ .province-box .province-container .menu{height: calc(100vh - 230px);}
.map-tool ~ .province-box .province-container .close-btn{display: flex;}

.ruler-controller {position: absolute;top: 60px;left: 15px;background: #fff;z-index: 9999;padding: 15px;border-radius: 4px;max-width: 350px;box-shadow: 0px 0px 4px 1px rgb(0 0 0 / 10%);}
.ruler-controller .close-btn {position: absolute;right: 5px;top: 5px;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.ruler-controller .close-btn svg {height: 15px;fill: #cccfda;}
.ruler-controller .close-btn:hover svg {fill: #888;}
.ruler-controller .item{padding: 10px 0px;display: flex;border-bottom: 1px solid #eee;align-items: center;gap: 35px;}
.ruler-controller .item .label {min-width: 120px;font-weight: 500;}
.ruler-controller .item sup {font-size: 0.5rem;position:absolute;margin-top: -3px;}
.ruler-controller .item .name {flex: 1;font-size: 0.9rem;font-weight: 500;}
.ruler-controller .item .area {font-size: 0.9rem;}
.ruler-controller .item .action-icons{display:flex;gap: 10px;}
.ruler-controller .item .action-icons span{display:flex;width: 20px;height:20px;align-items:center;justify-content:center;cursor: pointer;opacity: 0.8;}
.ruler-controller .item .action-icons span svg{fill: #c1c1c1;height: 17px;}
.ruler-controller .item .action-icons span svg path{fill: #c1c1c1;}
.ruler-controller .item .action-icons span:hover{opacity: 1;}
.ruler-controller .title {font-weight: 500;margin-bottom: 10px;}
.ruler-controller .description{font-size: 0.9rem;}
.ruler-controller .items {max-height: 30vh;overflow: auto;}
.ruler-controller .checkbox span {font-size: 0.9rem;}

.sharecode-text{font-size:2rem;letter-spacing: 10px;user-select:text !important}

.compass.open {display: flex;}
.compass {position: fixed;top: 50%;left: 50%;z-index: 999999;display: flex;align-items: center;justify-content: center;display: none;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
.compass .body-compass .close-btn {position: absolute;left: 50%;top: -52px;height: 32px;display: flex;align-items: center;justify-content: center;white-space: nowrap;z-index: 10;background: #fff;padding: 0px 15px;border-radius: 20px;transform: translate(-50%, 0px);-webkit-transform: translate(-50%, 0px);cursor: pointer;box-sizing: border-box;box-shadow: 0 1px 2px rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);}
.compass .body-compass .close-btn span {font-size: 12px;font-weight: 500;margin-right: 8px;}
.compass .body-compass .close-btn svg {height: 14px;fill: #888;}
.compass .body-compass {width: 300px;height: 300px;position: relative;border-radius: 50%;}
.compass .body-compass:after {content: '';position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;border: 24px solid #0666f4;border-radius: 50%;}
.compass .body-compass:before {content: '';position: absolute;top: 24px;bottom: 24px;left: 24px;right: 24px;border: 26px solid #1751a7;border-radius: 50%;}
.compass .body-compass .direction-items {width: 100%;height: 100%;position: relative;z-index: 2;}
.compass .body-compass .direction-items .direction-name {position: absolute;width: 100%;height: 100%;text-align: center;transform: rotate(var(--rotate));box-sizing: border-box;padding-top: 3px;text-transform: uppercase;font-weight: 400;font-size: 0.8rem;color: #fff;text-shadow: 1px 1px #666;}
.compass .body-compass .direction-items .direction-name.item-1 {--rotate: 0deg;}
.compass .body-compass .direction-items .direction-name.item-2 {--rotate: 45deg;}
.compass .body-compass .direction-items .direction-name.item-3 {--rotate: 90deg;}
.compass .body-compass .direction-items .direction-name.item-4 {--rotate: 135deg;}
.compass .body-compass .direction-items .direction-name.item-5 {--rotate: 180deg;}
.compass .body-compass .direction-items .direction-name.item-6 {--rotate: 225deg;}
.compass .body-compass .direction-items .direction-name.item-7 {--rotate: 270deg;}
.compass .body-compass .direction-items .direction-name.item-8 {--rotate: 315deg;}
.compass .body-compass .mini-direction-items {width: 100%;height: 100%;position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;z-index: 3;}
.compass .body-compass .mini-direction-items .direction-name {position: absolute;width: 100%;height: 100%;text-align: center;transform: rotate(var(--rotate));box-sizing: border-box;padding-top: 27px;text-transform: uppercase;font-weight: 400;font-size: 0.8rem;color: #fff;text-shadow: 1px 1px #333;}
.compass .body-compass .mini-direction-items .direction-name.item-1 {--rotate: 0deg;}
.compass .body-compass .mini-direction-items .direction-name.item-2 {--rotate: 45deg;}
.compass .body-compass .mini-direction-items .direction-name.item-3 {--rotate: 90deg;}
.compass .body-compass .mini-direction-items .direction-name.item-4 {--rotate: 135deg;}
.compass .body-compass .mini-direction-items .direction-name.item-5 {--rotate: 180deg;}
.compass .body-compass .mini-direction-items .direction-name.item-6 {--rotate: 225deg;}
.compass .body-compass .mini-direction-items .direction-name.item-7 {--rotate: 270deg;}
.compass .body-compass .mini-direction-items .direction-name.item-8 {--rotate: 315deg;}
.compass .body-compass .lines {position: absolute;left: 0;top: 0;bottom: 0;right: 0;z-index: 1;}
.compass .body-compass .lines.center-line {position: absolute;left: 45px;top: 45px;bottom: 45px;right: 45px;z-index: 1;}
.compass .body-compass .lines .line-item {position: absolute;bottom: 50%;left: 50%;width: 1px;height: 50%;transform: translateX(-50%) rotate(var(--rotate));transform-origin: bottom;background: linear-gradient(0deg, transparent, transparent, transparent 126px, #fff 150px)}
.compass .body-compass .lines .line-item.mini-line {background: linear-gradient(0deg, transparent, transparent, transparent, #fff 195px);}
.compass .body-compass .lines.center-line .line-item {background: linear-gradient(0deg, transparent, transparent, transparent 100px, #fff 10px)}
.compass .body-compass .lines.center-line:after {content: '';width: 1px;bottom: 50%;left: 50%;height: 15px;background: #000;position: absolute;transform: translate(-50%, 50%);}
.compass .body-compass .lines.center-line:before {content: '';height: 1px;bottom: 50%;left: 50%;width: 15px;background: #000;position: absolute;transform: translate(-50%, 50%);}

@-webkit-keyframes loading-translate {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

@-webkit-keyframes fade {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.25;
    }
}

@-webkit-keyframes ispinner-fade {
    0% {
        opacity: .85
    }

    50% {
        opacity: .25
    }

    100% {
        opacity: .25
    }
}

@keyframes ispinner-fade {
    0% {
        opacity: .85
    }

    50% {
        opacity: .25
    }

    100% {
        opacity: .25
    }
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes popup {
    0% {
        -webkit-transform: scale(1);
        -webkit-transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }

    78% {
        -webkit-transform: scale(0.9);
        -webkit-transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.bounce-6 {
    -webkit-animation: bounce-6 1.3s infinite;
    animation: bounce-6 1.3s infinite;
}

@keyframes bounce-6 {
    0% {
        transform: scale(1,1) translateY(0);
    }

    10% {
        transform: scale(1.1,.9) translateY(0);
    }

    30% {
        transform: scale(.9,1.1) translateY(-20px);
    }

    50% {
        transform: scale(1.05,.95) translateY(0);
    }

    57% {
        transform: scale(1,1) translateY(-7px);
    }

    64% {
        transform: scale(1,1) translateY(0);
    }

    100% {
        transform: scale(1,1) translateY(0);
    }
}

@keyframes zoom-in-out {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(0,123,255,0)
    }

    30% {
        transform: scale(1);
        box-shadow: 0 0 2px 25px rgba(0,123,255,.2)
    }

    50% {
        transform: scale(1);
        box-shadow: 0 0 1px 10px rgba(0,123,255,.1)
    }

    80% {
        transform: scale(1);
        box-shadow: 0 0 2px 30px rgba(0,123,255,.1)
    }

    100% {
        transform: scale(1.2);
        box-shadow: 0 0 0 20px rgba(0,123,255,0)
    }
}

@media only screen and (max-width: 1024px) {
    .app-header{display: none;}
    .lmap{display: none}
    .app-header .app-menu{max-width: 80vw;overflow:auto;}
    .modal-close-btn{display: none !important}
}