@charset "UTF-8";
/******* RESPONSIVE ********/
/****Màn hình máy tính thông thường****/
/****Màn hình desktop loại bé****/
/**** Màn hình ipad hiển thị theo chiều ngang (Landscape) ****/
/****Màn hình ipad loại bé hiển thị theo chiều ngang (Landscape)****/
/****Màn hình ipad hiển thị theo chiều dọc (Portrait)****/
/****Màn hình ipad loại bé hiển thị theo chiều dọc (Portrait)****/
/****Màn hình điện thoại hiển thị theo chiều ngang (Landscape)****/
/****Màn hình điện thoại Iphone Plus****/
/****Màn hình điện thoại Iphone****/
/****Màn hình điện thoại loại bé****/
@import url("../../fonts/Roboto/font-roboto.css");
@font-face {
  font-family: 'Manrope';
  src: url("../../fonts/Manrope/Manrope-VariableFont_wght.ttf") format("truetype"); }

ul, li {
  list-style: none; }

body {
  color: #0a2540;
  font-family: Manrope, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; }

p {
  margin: 0 auto; }

a:hover {
  text-decoration: none; }

/*$mapcolor-lv2: $color-secondary ;
$mapcolor: $color-primary ;*/
#pagebody {
  position: fixed;
  top: 78px;
  width: 100%;
  height: 100%;
  padding: 0;
  /* Style the button that is used to open the sidepanel */
  /*RESPONSIVE*/ }
  #pagebody .pointActive {
    background: url(/assets/images/pointActive.gif);
    width: 41px;
    height: 41px; }
  #pagebody #legend {
    position: absolute;
    display: none;
    height: auto;
    width: 300px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ddd; }
    #pagebody #legend .close {
      padding: 3px; }
    #pagebody #legend img {
      width: 100%;
      height: auto; }
  #pagebody #legend_map {
    position: absolute;
    display: none;
    height: calc(100vh - 78px - 50px);
    top: 98px;
    right: 57px;
    width: 400px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ddd; }
    #pagebody #legend_map .close {
      padding: 3px; }
    #pagebody #legend_map img {
      width: 100%;
      height: auto; }
    #pagebody #legend_map .content {
      height: calc(100vh - 130px);
      position: relative; }
  #pagebody #warning-icon {
    position: absolute;
    right: 9px;
    top: 74px;
    z-index: 9; }
    #pagebody #warning-icon .warning-icon {
      width: 30px; }
  #pagebody .UI-DROP .dropdown-menu, #pagebody #fieldTool .dropdown-menu {
    max-height: 300px;
    overflow: auto;
    background: #fff; }
    #pagebody .UI-DROP .dropdown-menu li, #pagebody #fieldTool .dropdown-menu li {
      cursor: pointer; }
      #pagebody .UI-DROP .dropdown-menu li:hover, #pagebody #fieldTool .dropdown-menu li:hover {
        background-color: #eee; }
    #pagebody .UI-DROP .dropdown-menu li:not(:last-child), #pagebody #fieldTool .dropdown-menu li:not(:last-child) {
      border-bottom: 1px dashed #ccc; }
  #pagebody #warningBox {
    position: fixed; }
    #pagebody #warningBox.collapse {
      transition: all .25s ease-in;
      top: 0;
      right: -30%;
      width: 30%;
      display: block; }
      #pagebody #warningBox.collapse.show {
        width: 520px;
        right: 70px;
        top: 82px;
        z-index: 9;
        background: #ffffffd6;
        border-radius: 4px;
        padding: 15px; }
        #pagebody #warningBox.collapse.show .wn-header {
          font-weight: 600;
          color: red;
          text-align: center;
          width: 100%;
          float: left; }
          #pagebody #warningBox.collapse.show .wn-header .title {
            border-bottom: 3px solid #4e6b8e;
            padding-bottom: 4px; }
        #pagebody #warningBox.collapse.show .wn-content {
          color: rgba(59, 91, 130, 0.9);
          padding-top: 20px;
          width: 100%;
          float: left;
          text-align: justify; }
    #pagebody #warningBox.collapsing {
      transition: all .3s ease-out;
      top: 0;
      right: -30%;
      width: 30%;
      /*display: block;*/ }
  #pagebody #sCloseW {
    padding: 9px;
    border-left: 1px solid #ddd;
    cursor: pointer; }
  #pagebody .item-r {
    width: 100%; }
  #pagebody .dropdown li {
    cursor: pointer;
    min-height: 28px;
    line-height: 28px;
    padding-left: 11px; }
  #pagebody button, #pagebody a {
    outline: none !important;
    text-decoration: none !important; }
  #pagebody .fas.fa-folder {
    padding: 6px 4px; }
  #pagebody .nav > li > a {
    outline: none; }
  #pagebody .nav-item a.active {
    color: #333; }
  #pagebody .nav-link {
    color: #999;
    text-transform: uppercase; }
  #pagebody .nav-link:hover {
    color: #000; }
  #pagebody table {
    font-size: 0.9em; }
    #pagebody table #gridbody tr:hover {
      background-color: #FFFDDE; }
  #pagebody th {
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    background: #3e4185;
    color: #fff;
    vertical-align: middle;
    padding: 2px; }
  #pagebody .table-striped tbody tr:nth-of-type(odd) {
    background: #f5f6f7 !important; }
  #pagebody button {
    background: none;
    border: none;
    padding: 10px; }
  #pagebody svg:hover, #pagebody svg:focus {
    fill: #DA4567; }
  #pagebody li img {
    width: 20px;
    margin-right: 7px;
    height: 20px;
    border-radius: 3px; }
  #pagebody .far.fa-dot-circle, #pagebody .far.fa-circle {
    padding: 8px;
    font-size: 17px; }
  #pagebody .icon-folder-add:before {
    color: red; }
  #pagebody .icon-line:before, #pagebody .icon-trash:before {
    color: #000; }
  #pagebody .icon-folder {
    background-position: 0 0;
    padding: 6px 20px; }
  #pagebody .icon-survey {
    background-position: 0 -344px;
    padding: 6px 20px; }
  #pagebody .icon-news {
    background-position: 0 -582px;
    padding: 6px 20px; }
  #pagebody .icon-table {
    background-position: 0 -286px;
    padding: 6px 20px; }
  #pagebody .icon-style {
    background-position: 0 -237px;
    padding: 6px 20px; }
  #pagebody .icon-map {
    background-position: 0 -441px;
    padding: 3px 20px; }
  #pagebody .icon-folder-add {
    font-size: 18px;
    margin: 6px; }
  #pagebody .icon-square, #pagebody .icon-square-check, #pagebody .fa-square, #pagebody .fa-check-square {
    padding: 6px; }
  #pagebody .ui-resizable-e {
    background-color: #ebebeb;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 5px;
    position: absolute;
    top: 0;
    height: 100%;
    right: -6px; }
  #pagebody .ui-resizable-e:hover {
    background-color: #edf2d6;
    cursor: col-resize; }
  #pagebody #eResize {
    background: #bbb;
    height: 40px;
    margin-top: 71%; }
  #pagebody #eResize:hover {
    background-color: gold; }
  #pagebody .viewToolMap {
    display: none;
    position: absolute;
    z-index: 10; }
  #pagebody .fullscreen #pagebody {
    top: 0; }
  #pagebody #leftpanel {
    height: calc(100vh - 78px);
    /* margin-left: -400px;*/
    background: #fff;
    width: 0;
    max-width: calc(100vw - 50px);
    position: absolute;
    z-index: 5;
    display: block; }
    #pagebody #leftpanel.show {
      width: 400px;
      border-right: 6px solid #cccccc87;
      border-top: 1px solid #cccccc87;
      box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 8px; }
    #pagebody #leftpanel .sidebar-body {
      display: none; }
      #pagebody #leftpanel .sidebar-body.show {
        display: block;
        height: 100%; }
    #pagebody #leftpanel #toggleLeftMenu {
      z-index: 5;
      position: absolute;
      top: 0;
      padding: 0;
      line-height: 17px;
      /*  box-shadow: rgb(186, 186, 186) 1px 3px 3px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;*/
      border-left: 1px solid #ddd;
      background: white;
      cursor: pointer;
      right: 0; }
      #pagebody #leftpanel #toggleLeftMenu i {
        font-size: 24px;
        color: #3e4185;
        padding: 5px 12px; }
      #pagebody #leftpanel #toggleLeftMenu:hover {
        background: #3e4185;
        color: white;
        font-weight: bold;
        box-shadow: unset; }
        #pagebody #leftpanel #toggleLeftMenu:hover i {
          color: white; }
    #pagebody #leftpanel .tab-content {
      padding: 10px; }
      #pagebody #leftpanel .tab-content #dataPage {
        position: absolute;
        right: 5px;
        top: 5px;
        z-index: 10;
        text-decoration: underline;
        font-size: 15px; }
  #pagebody .d-filter > div:first-child {
    width: 100%;
    margin: 0;
    line-height: 20px;
    padding: 5px;
    margin: 2px 0 0 0;
    background: #d9def9;
    border-radius: 5px;
    color: #1967d2;
    font-weight: bold; }
    #pagebody .d-filter > div:first-child p {
      vertical-align: middle;
      display: flex;
      align-items: center; }
    #pagebody .d-filter > div:first-child .icon-layer {
      padding: 0px 5px;
      font-size: 16px;
      font-weight: bold;
      display: inline-block; }
  #pagebody .sLayers #ulTabs {
    border-bottom: solid #3e4185;
    padding-bottom: 1px;
    padding-top: 2px;
    padding-top: 2px;
    position: relative; }
  #pagebody .sLayers .nav-link {
    color: #999;
    text-transform: unset;
    padding: 7px 9px;
    background: #f5f6f7;
    margin-right: 1px;
    font-size: 0.8rem;
    font-weight: 700;
    border: none; }
    #pagebody .sLayers .nav-link.active {
      background-color: #3e4185;
      color: #fff; }
    #pagebody .sLayers .nav-link:hover {
      background-color: #3e4185;
      color: #fff;
      opacity: 0.8; }
  #pagebody .sLayers .nav-item {
    position: relative; }
    #pagebody .sLayers .nav-item .icon-close {
      position: absolute;
      top: 0;
      right: 0px;
      background: rgba(210, 218, 241, 0.5);
      border-radius: 50%;
      padding: 1px;
      font-size: 11px;
      cursor: pointer; }
      #pagebody .sLayers .nav-item .icon-close:hover {
        font-weight: bold; }
  #pagebody .sLayers #btnSearchQH {
    float: right;
    margin-right: 7px;
    font-size: 0.9rem;
    font-weight: 700;
    background: #3e4185; }
    #pagebody .sLayers #btnSearchQH:hover {
      opacity: 0.8; }
  #pagebody .sLayers #opSearch {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    background: #d9def9;
    padding: 10px;
    border-radius: 3px; }
    #pagebody .sLayers #opSearch label {
      padding: 5px 10px;
      border-radius: 5px;
      border: solid 2px transparent;
      align-self: center;
      transition: all ease 500ms;
      margin: 0; }
    #pagebody .sLayers #opSearch label:has(input:checked) {
      border: solid 2px #0075ff;
      color: #0075ff; }
  #pagebody .sLayers .sLocation, #pagebody .sLayers .sThuaDat {
    padding: 10px;
    margin: 10px 0; }
    #pagebody .sLayers .sLocation > span, #pagebody .sLayers .sThuaDat > span {
      font-weight: 700; }
  #pagebody .sLayers #sThuaDat {
    padding-top: 15px; }
    #pagebody .sLayers #sThuaDat > span {
      font-weight: 700; }
  #pagebody .sLayers #opProject {
    justify-content: space-between;
    padding: 10px 0; }
  #pagebody .sLayers .title-heading {
    font-weight: 600;
    color: #3e4185;
    height: 30px;
    padding: 7px 0;
    border-bottom: 1px solid #ddd;
    width: 100%; }
  #pagebody .sLayers #tabKetQua {
    height: calc(100vh - 138px);
    position: relative; }
    #pagebody .sLayers #tabKetQua > div {
      margin-bottom: 15px; }
    #pagebody .sLayers #tabKetQua #bar4ketqua {
      background-color: unset;
      color: #3e4185; }
    #pagebody .sLayers #tabKetQua #ThuaDatInfo {
      display: none; }
    #pagebody .sLayers #tabKetQua .items {
      padding: 10px;
      margin: 10px 7px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      font-size: 1.1em;
      line-height: 22px; }
      #pagebody .sLayers #tabKetQua .items:hover {
        border-bottom: unset;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; }
      #pagebody .sLayers #tabKetQua .items .title {
        font-weight: 600; }
      #pagebody .sLayers #tabKetQua .items .ritem .slabel {
        font-weight: 600; }
      #pagebody .sLayers #tabKetQua .items .ritem .img-scale {
        height: 120px;
        width: 100%; }
      #pagebody .sLayers #tabKetQua .items .ritem.layername {
        font-style: italic;
        font-size: 0.9em;
        font-weight: 500;
        color: #3e4185; }
    #pagebody .sLayers #tabKetQua #dResult, #pagebody .sLayers #tabKetQua #ThuaDatInfo {
      line-height: 30px;
      margin-top: 15px;
      position: relative;
      height: calc(100vh - 100px - 78px); }
      #pagebody .sLayers #tabKetQua #dResult .slabel, #pagebody .sLayers #tabKetQua #ThuaDatInfo .slabel {
        font-weight: 600; }
      #pagebody .sLayers #tabKetQua #dResult .svalue, #pagebody .sLayers #tabKetQua #ThuaDatInfo .svalue {
        font-weight: 400; }
  #pagebody .sLayers #tabCompare .box-filter {
    width: 100%;
    display: flex;
    flex-direction: column; }
    #pagebody .sLayers #tabCompare .box-filter button {
      width: 120px; }
  #pagebody .sLayers #lstLienQuan ul {
    padding: 10px 0px; }
    #pagebody .sLayers #lstLienQuan ul li {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      background: #f5f6f7;
      padding: 5px 10px;
      border-radius: 4px; }
      #pagebody .sLayers #lstLienQuan ul li:hover {
        color: #3e4185; }
  #pagebody .sLayers #lstLienQuan .viewMapQH {
    color: forestgreen; }
    #pagebody .sLayers #lstLienQuan .viewMapQH:hover {
      color: #3e4185; }
  #pagebody #myLegend {
    display: none;
    position: absolute;
    z-index: 3;
    right: 80px;
    top: 60px;
    background: #fff;
    border-radius: 2px;
    width: 300px;
    overflow: auto;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    max-height: calc(100vh - 70px);
    padding: 10px; }
    #pagebody #myLegend .title {
      display: flex;
      justify-content: start; }
      #pagebody #myLegend .title .icon-close {
        margin-left: auto; }
    #pagebody #myLegend #lgContent {
      max-height: calc(100vh - 120px);
      position: relative; }
    #pagebody #myLegend .layerLegend {
      width: 100%;
      height: auto; }
  #pagebody #tbResults th {
    position: sticky;
    top: 0;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    background: #047ea4;
    color: #fff; }
  #pagebody #tbResults tr:hover {
    background-color: #fbf2e6;
    cursor: pointer; }
  #pagebody #tbResults tr.active {
    background-color: #fbf2e6; }
  #tbTongHop tr:last-child td {
    font-weight: 600; }
  #pagebody #tbResults td {
    vertical-align: middle; }
  #pagebody .item-r {
    width: 100%; }
    #pagebody .item-r .pIcon {
      width: 100%;
      display: flex;
      justify-content: space-between; }
      #pagebody .item-r .pIcon .source_data {
        background: #f1fbe1;
        color: green;
        padding: 7px 7px;
        font-size: 11px;
        border-radius: 5px;
        margin-right: 5px;
        width: 80%; }
      #pagebody .item-r .pIcon .add2map {
        color: #444;
        padding: 5px 7px;
        border-radius: 5px;
        font-size: 12px;
        background: #ededed;
        font-weight: 500;
        height: 30px; }
        #pagebody .item-r .pIcon .add2map:hover {
          background: #d9def9;
          color: #3e4185;
          outline: 1px solid #3e4185; }
    #pagebody .item-r .des {
      color: #666;
      padding: 7px;
      font-style: italic;
      font-size: 0.9em; }
  #pagebody #barChiTiet {
    height: 60px;
    border: 1px solid #ddd;
    margin-bottom: -1px;
    display: flex;
    justify-content: flex-start; }
  #pagebody #barChiTiet > div {
    text-align: center;
    padding: 5px;
    color: #4a63ea;
    width: 50%; }
  #pagebody .input-group-addon {
    background-color: #fff; }
  #pagebody #barChiTiet p {
    margin: 0; }
  #pagebody #barChiTiet .icon {
    font-size: 26px; }
  #pagebody #bar4ketqua {
    width: 100%; }
  #pagebody #bar4layer {
    height: 36px;
    border-bottom: 1px solid #ddd;
    float: left;
    width: 100%; }
    #pagebody #bar4layer .icon-filter, #pagebody #bar4layer .fa-search {
      padding: 8px 3px;
      color: #3e4185;
      font-weight: 900; }
    #pagebody #bar4layer #btnAddLayer {
      padding-top: 4px;
      cursor: pointer; }
    #pagebody #bar4layer a {
      width: 100%; }
    #pagebody #bar4layer > div {
      margin-left: 0 !important;
      display: flex; }
    #pagebody #bar4layer li {
      padding: 2px;
      min-width: 35px; }
  #pagebody #bar4layer .icon-search {
    font-weight: 800;
    background: #7c8a74;
    padding: 6px;
    margin-right: 5px;
    border-radius: 3px;
    color: #fff;
    align-self: center; }
  #pagebody #bar4layer a, #pagebody #bar4ketqua {
    min-width: 35px;
    text-align: center;
    padding: 2px;
    color: #444;
    text-decoration: none; }
  #pagebody #bar4ketqua {
    background-color: #599688;
    color: #fff;
    font-weight: 600; }
  #pagebody #tabXungQuanh .input-group {
    margin: 3px auto; }
  #pagebody #pointName {
    min-height: 40px;
    padding: 7px;
    font-size: 18px;
    color: #444; }
  #pagebody #cboSelectLayers li {
    min-height: 35px;
    line-height: 35px;
    padding-left: 11px; }
  #pagebody #tbChiTiet {
    color: #444; }
  #pagebody #dRouting {
    padding: 6px; }
  #pagebody #top {
    display: flex;
    position: absolute;
    height: 65px;
    top: 0;
    width: 100%;
    /*background: linear-gradient(180deg, rgba(90,85,189,1) 0%, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 95%);*/
    background: url(https://maps.hcmgis.vn/core/themes/maps/assets/img/bando_02.png); }
  #pagebody .highlight:hover, #pagebody highlight:hover, #pagebody .highlight.active > i {
    cursor: pointer; }
  #pagebody .boxleft {
    height: 45px; }
  #pagebody #treefolder {
    height: auto;
    overflow: auto;
    float: left;
    position: relative;
    width: 100%; }
    #pagebody #treefolder .iconLayer {
      height: 18px;
      width: auto;
      padding-right: 5px;
      padding-bottom: 2px;
      padding-left: 3px; }
    #pagebody #treefolder .cmenu[unit="folder"] .icon-layer, #pagebody #treefolder .cmenu[unit="folder"] .icon-square, #pagebody #treefolder .cmenu[unit="folder"] .icon-square-check {
      font-weight: bold;
      color: #3e4185 !important;
      padding: 5px !important; }
    #pagebody #treefolder p {
      margin: 0 auto;
      margin-right: auto;
      display: flex;
      width: 100%;
      line-height: 27px;
      font-size: 15px;
      color: #333;
      margin-right: 26px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      align-items: center; }
      #pagebody #treefolder p svg {
        margin: 4px 6px 0 0; }
      #treefolder .noData p {
        color: #bcbcbc;
        cursor: default; }
    #pagebody #treefolder .c1 p, #pagebody #treefolder .c2 p {
      line-height: 34px !important; }
    #pagebody #treefolder .c1 p {
      font-weight: bold;
      align-items: center; }
    #pagebody #treefolder .c2 p {
      color: #3e4185 !important;
      font-weight: bold; }
    #pagebody #treefolder .active {
      background-color: #d9def9;
      border-radius: 5px;
      color: #3e4185;
      font-weight: bold; }
    #pagebody #treefolder > div {
      cursor: pointer; }
    #pagebody #treefolder div {
      height: auto;
      line-height: 25px;
      padding: 5px;
      border-radius: 3px; }
    #pagebody #treefolder .c1 {
      padding-left: 0; }
      #pagebody #treefolder .c1 i {
        margin-left: 4px; }
    #pagebody #treefolder .c2 {
      padding-left: 10px;
      align-items: center; }
    #pagebody #treefolder .c3 {
      padding-left: 20px; }
    #pagebody #treefolder .c4 {
      padding-left: 30px; }
    #pagebody #treefolder .c5 {
      padding-left: 40px; }
    #pagebody #treefolder .c6 {
      padding-left: 50px; }
  #pagebody #toolRight {
    right: 10px;
    top: 50px;
    position: absolute;
    height: auto;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: none; }
    #pagebody #toolRight a {
      color: #777;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: solid 1px #ccc;
      height: 40px;
      width: 40px;
      text-align: center; }
      #pagebody #toolRight a:hover {
        color: #3e4185; }
      #pagebody #toolRight a i {
        font-size: 16px; }
  #pagebody #expData {
    padding: 0 !important;
    margin-right: 10px; }
    #pagebody #expData i {
      margin-right: 10px; }
    #pagebody #expData:focus {
      box-shadow: none !important; }
  #pagebody #listWorkCT {
    margin-top: 0 !important; }
  #pagebody #datastores {
    position: absolute;
    left: 405px;
    bottom: 5px;
    height: calc(100vh - 78px - 50px);
    width: 400px;
    z-index: 10;
    background: white;
    border-right: 1px solid #ccc;
    display: none;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; }
    #pagebody #datastores .icon-search {
      padding: 10px;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer; }
    #pagebody #datastores #sCloseW {
      padding: 9px;
      border-left: 1px solid #ddd;
      cursor: pointer;
      font-weight: bold;
      font-size: 20px; }
  #pagebody .toolgroup {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    background: #fff; }
  #pagebody #aAvatarMap, #pagebody #mapeditor {
    display: none; }
  #pagebody #ulBaseMaps {
    width: 315px; }
    #pagebody #ulBaseMaps li {
      padding: 5px 10px;
      cursor: pointer; }
      #pagebody #ulBaseMaps li:hover {
        background: #f5f6f7; }
  #pagebody #myToolBar {
    border-bottom: 1px solid #ddd;
    float: left;
    width: 100%;
    padding: 7px;
    height: unset !important; }
  #pagebody #resultMyLayers {
    background: #f1efef;
    position: relative;
    width: 100%;
    padding: 7px;
    height: calc(100vh - 170px); }
    #pagebody #resultMyLayers .items {
      padding: 15px;
      border-bottom: 1px solid #fff;
      background: white;
      margin-bottom: 7px;
      width: 100%;
      position: relative;
      border-radius: 5px; }
      #pagebody #resultMyLayers .items h5 {
        font-size: 1rem; }
      #pagebody #resultMyLayers .items .pIcons {
        display: inline-block; }
  #pagebody #btshowTable {
    z-index: 100;
    position: fixed;
    display: none;
    bottom: 0;
    right: 35%;
    padding: 5px 19px;
    border-radius: 5px 5px 0 0;
    line-height: 17px;
    box-shadow: 0px 0px 5px 2px #c2c2c2;
    background: white; }
    #pagebody #btshowTable:hover {
      background: #10a5e0;
      color: white;
      font-weight: bold; }
  #pagebody #searchPoi {
    padding-left: 5px;
    margin: 3px 5px;
    border-radius: 5px;
    border: solid 1px #ccc; }
  #pagebody #cbox {
    display: none;
    border-right: 1px solid #bbb; }
  #pagebody #searchXY {
    width: 236px;
    border: none; }
  #pagebody .opsearch {
    font-size: 0.8em;
    background-color: #f5f5f5;
    border-left: 1px solid #ddd;
    color: #333;
    padding: 10px 5px; }
    #pagebody .opsearch.active {
      background-color: antiquewhite;
      color: red; }
  #pagebody .cmenu.active .sTool {
    display: block; }
  #pagebody #leftpanel .cmenu:hover {
    background-color: #d9def9;
    cursor: pointer; }
  #pagebody .cmenu i.icon-square, #pagebody .cmenu i.icon-square-check {
    font-size: 14px;
    font-weight: bold; }
  #pagebody div.cmenu {
    display: flex; }
  #pagebody div.cmenu:hover .sTool {
    display: block; }
  #pagebody .cmenu.active p {
    color: #000 !important;
    font-weight: normal; }
  #pagebody .folder {
    font-weight: 500; }
  #pagebody .cmenu.active {
    border-bottom: 1px solid #fff; }
  #pagebody .chkgroup {
    color: #3fc6a0; }
  #pagebody #layerBases {
    display: flex;
    align-items: center;
    height: 40px !important; }
    #pagebody #layerBases::hover {
      background-color: rgba(204, 204, 204, 0.2); }
    #pagebody #layerBases > .dropdown-toggle {
      height: inherit; }
  #pagebody #cboGoogle li {
    height: 33px;
    padding: 8px; }
  #pagebody #btTurnRoute {
    font-size: 21px;
    margin-top: 0;
    width: 37px;
    text-align: center;
    height: 39px;
    border-right: 1px solid #bbb;
    padding: 4px; }
  #pagebody #boxSearch {
    height: 38px;
    margin-top: 1px;
    border-radius: 0;
    display: flex; }
  #pagebody #boxSearch li i {
    color: red;
    padding: 2px 5px;
    font-size: 13px; }
  #pagebody #toolbar {
    position: absolute;
    height: 40px;
    max-width: 50%;
    top: 5px;
    right: 10px;
    z-index: 5;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 5px; }
    #pagebody #toolbar #boxSearch {
      height: 38px;
      margin-top: 1px;
      border-radius: 0;
      display: flex;
      padding: 0 5px; }
      #pagebody #toolbar #boxSearch #poiSearch {
        display: flex; }
        #pagebody #toolbar #boxSearch #poiSearch #searchPoi {
          padding-left: 5px;
          border-radius: 5px;
          border: solid 1px #f1hif1f1; }
        #pagebody #toolbar #boxSearch #poiSearch ul {
          border-radius: 5px;
          top: 37px;
          left: -28px;
          width: 100%;
          max-height: 350px;
          overflow-y: auto; }
          #pagebody #toolbar #boxSearch #poiSearch ul li:not(:last-child) {
            border-bottom: 1px dashed #ccc; }
      #pagebody #toolbar #boxSearch li i {
        color: red;
        padding: 2px 5px;
        font-size: 13px; }
    #pagebody #toolbar > ul {
      display: flex; }
    #pagebody #toolbar ul {
      margin-bottom: 0; }
      #pagebody #toolbar ul li a {
        display: inline-block;
        padding: 10px 0;
        text-align: center; }
        #pagebody #toolbar ul li a:hover {
          color: #3e4185;
          cursor: pointer; }
  #pagebody .highlight.viewData, #pagebody .sTool {
    margin-bottom: 3px;
    border-radius: 3px;
    margin-right: 2px;
    padding: 6px;
    right: 6px;
    cursor: pointer;
    color: #848484; }
    #pagebody .highlight.viewData:hover, #pagebody .sTool:hover {
      background: #d9def9;
      color: #3e4185 !important; }
    #pagebody .highlight.viewData.active > i, #pagebody .sTool.active > i {
      cursor: pointer; }
  #pagebody #gridview th, #pagebody #detailPanel th {
    position: sticky;
    top: 0;
    text-align: center;
    vertical-align: middle;
    padding: 7px;
    line-height: 18px;
    background: #fff;
    color: unset !important;
    box-shadow: inset 0 1px 0 #ccc, inset 0 -3px 0 #3e4185;
    border-bottom: none; }
  #pagebody #gridview tr td, #pagebody #detailPanel tr td {
    vertical-align: middle;
    padding: 10px;
    color: #555;
    font-family: Arial; }
    #pagebody #gridview tr td[col="geom"], #pagebody #detailPanel tr td[col="geom"] {
      text-align: center; }
    #pagebody #gridview tr td.number, #pagebody #detailPanel tr td.number {
      text-align: end; }
    #pagebody #gridview tr td.stt, #pagebody #detailPanel tr td.stt {
      text-align: center; }
  #pagebody #gridview .ui-resizable-e, #pagebody #detailPanel .ui-resizable-e {
    background: transparent; }
  #pagebody .ol-mouse-position {
    top: unset;
    bottom: 10px;
    left: 50%;
    z-index: 3;
    font-weight: 600; }
  #pagebody .ol-attribution {
    display: none; }
  #pagebody .ol-popup::after, #pagebody .ol-popup::before {
    top: 100%;
    border: solid transparent;
    border-top-color: transparent;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; }
  #pagebody .ol-popup::after {
    border-top-color: white;
    border-width: 10px;
    left: 46.7px;
    margin-left: -10px; }
  #pagebody .ol-zoom.ol-unselectable.ol-control {
    right: 10px;
    top: unset;
    bottom: 30px;
    left: unset !important;
    border-radius: 7px;
    overflow: hidden;
    outline: solid 1px #ccc;
    padding: 0 !important; }
    #pagebody .ol-zoom.ol-unselectable.ol-control button {
      height: 40px;
      width: 40px;
      margin: 0;
      border-top: solid 1px #ccc;
      border-right: none;
      border-left: none;
      border-bottom: none;
      display: block;
      padding: 0;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      line-height: .4em;
      background-color: white;
      color: #848484;
      opacity: 0.8;
      cursor: pointer; }
      #pagebody .ol-zoom.ol-unselectable.ol-control button:hover {
        opacity: 1;
        color: #444; }
  #pagebody .ol-overlay-container.ol-selectable {
    /*    top: -400px;*/ }
  #pagebody #popup-closer {
    color: #444;
    position: absolute;
    right: -2px;
    top: -4px;
    padding: 10px;
    z-index: 9;
    font-size: 19px; }
  #pagebody #popup-closer:hover {
    color: #333; }
  #pagebody #popup-closer::before:hover {
    color: #333; }
  #pagebody #popup-closer::before {
    color: #555; }
  #pagebody #popup {
    background: #fff;
    width: 300px;
    position: absolute;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: -400px;
    left: -50px; }
    #pagebody #popup #popup-content {
      max-height: 360px;
      padding: 10px;
      position: relative; }
      #pagebody #popup #popup-content .img-scale {
        width: 100%;
        height: auto;
        object-fit: cover; }
      #pagebody #popup #popup-content p {
        line-height: 33px;
        margin-bottom: unset;
        min-height: 35px;
        border-bottom: 1px dashed #ccc; }
      #pagebody #popup #popup-content #tab_bandosohoa {
        max-height: 350px;
        text-align: center; }
        #pagebody #popup #popup-content #tab_bandosohoa img {
          max-width: 100%;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          height: auto;
          max-height: 350px;
          text-align: center; }
    #pagebody #popup .dmore {
      padding: 7px; }
    #pagebody #popup .pGroup {
      font-weight: 500;
      font-size: 1.1em;
      color: #1e6b02;
      display: inline-block;
      width: 100%; }
    #pagebody #popup li.nav-item .active {
      border-bottom: 5px solid #5EBAAD !important; }
    #pagebody #popup li.nav-item a {
      border: none !important;
      padding: 10px 10px 10px 6px; }
    #pagebody #popup .p-title {
      background: #3e4185;
      padding: 6px;
      color: #fff;
      font-size: 1.2em;
      font-weight: 600;
      border-radius: 0 0 5px 0;
      max-width: 85%;
      margin-left: 0;
      width: fit-content; }
    #pagebody #popup p {
      line-height: 23px;
      margin-bottom: unset; }
    #pagebody #popup .chartBox {
      height: 180px;
      width: 280px; }
    #pagebody #popup .fright {
      float: right; }
    #pagebody #popup .slabel {
      font-weight: 800; }
    #pagebody #popup .svalue {
      font-weight: 400; }
    #pagebody #popup .detail {
      cursor: pointer;
      font-style: italic;
      text-decoration: underline;
      font-size: 0.9em; }
      #pagebody #popup .detail:hover {
        color: green; }
  #pagebody #detailPanel {
    display: none;
    position: absolute;
    z-index: 1000;
    right: 0;
    top: 0;
    background: #fff;
    border-radius: 2px;
    width: 300px;
    overflow: auto;
    box-shadow: 4px 8px 15px 4px #ccc;
    height: calc(100vh - 78px); }
    #pagebody #detailPanel .title {
      background: #3e4185;
      color: #fff;
      font-weight: 600;
      padding: 10px;
      position: sticky;
      top: 0;
      z-index: 99; }
    #pagebody #detailPanel .img-scale {
      height: 150px;
      width: 100%;
      object-fit: cover; }
    #pagebody #detailPanel .detailClose {
      color: #fff;
      float: right;
      cursor: pointer;
      padding: 10px;
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%); }
      #pagebody #detailPanel .detailClose:hover {
        color: #333; }
    #pagebody #detailPanel .content {
      padding-left: 10px;
      padding-right: 10px;
      height: calc(100vh - 78px - 100px); }
    #pagebody #detailPanel p {
      line-height: 28px;
      margin-bottom: unset; }
    #pagebody #detailPanel .slabel {
      font-weight: 600; }
  #pagebody p.dmore {
    display: flex;
    justify-content: space-between; }
    #pagebody p.dmore span {
      background: #d9def9;
      color: #3e4185;
      padding: 3px 7px;
      border-radius: 5px;
      font-size: 0.8rem;
      font-weight: 600;
      display: inline-block;
      margin: 5px 5px 0 0;
      font-style: italic;
      text-decoration: none !important;
      cursor: pointer; }
      #pagebody p.dmore span:hover {
        background: #d9def9;
        color: green; }
  #pagebody #contextLayer {
    border-radius: 5px;
    background: rgba(94, 93, 93, 0.4);
    padding: 3px;
    position: absolute;
    z-index: 12 !important; }
    #pagebody #contextLayer ul {
      margin: 0;
      padding: 5px;
      list-style: none;
      background: #fff;
      width: 190px; }
      #pagebody #contextLayer ul li {
        display: flex;
        align-items: center;
        border-radius: 3px;
        height: 34px;
        line-height: 34px;
        cursor: pointer;
        padding: 5px; }
        #pagebody #contextLayer ul li:hover {
          background-color: rgba(204, 204, 204, 0.2); }
  #pagebody #liOpacity {
    position: relative; }
  #pagebody #txtSearch, #pagebody #txtSearchLayer {
    width: 100%;
    font-size: 0.75rem;
    border: none;
    padding-left: 8px;
    background: #f5f6f7;
    border-radius: 3px; }
    #pagebody #txtSearch:focus-visible, #pagebody #txtSearchLayer:focus-visible {
      outline: solid 1px #ddd; }
  #pagebody #loading {
    position: absolute;
    left: 60%;
    top: 74px;
    color: red;
    display: none; }
  #pagebody #rightpanel {
    height: calc(100vh - 78px);
    width: 100vw;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    position: relative;
    bottom: 0;
    overflow: hidden; }
    #pagebody #rightpanel .TabTable {
      height: inherit; }
      #pagebody #rightpanel .TabTable #tbOutputContent {
        z-index: 1000;
        height: inherit; }
    #pagebody #rightpanel #ThongKe {
      z-index: 1000;
      position: relative;
      background-color: #fff; }
  #pagebody .tabs-line {
    display: flex;
    justify-content: flex-start;
    background: #fff; }
  #pagebody .far.fa-square, #pagebody .far.fa-check-square {
    padding: 6px;
    font-size: 17px; }
  #pagebody .wrap {
    display: flex;
    line-height: 19px;
    padding: 15px;
    width: 88px;
    position: relative; }
  #pagebody .wrap svg {
    position: absolute;
    right: -10px;
    padding: 11px;
    height: 40px;
    width: 40px;
    top: 4px; }
  #pagebody #box-new ul {
    margin-top: -46px;
    margin-left: 20px;
    width: 226px; }
  #pagebody #modalSharing .modal-content {
    border-radius: 0;
    padding: 14px; }
  #pagebody #modalSharing tr {
    height: 50px; }
  #pagebody #modalSharing tr td:nth-child(1) {
    width: 70%; }
  #pagebody #modalSharing tr td:nth-child(2) {
    display: flex;
    justify-content: flex-end; }
  #pagebody #modalSharing table {
    border-bottom: 1px solid #ddd; }
  #pagebody #modalSharing h2 {
    margin: 0 auto;
    font-size: 20px;
    padding-bottom: 20px; }
  #pagebody .dSharing .editSharing {
    margin-right: 1px;
    padding: 5px 12px;
    background: no-repeat url(css/sprites.svg) center -267px;
    color: #ccc;
    opacity: 0.5; }
  #pagebody .dSharing .editSharing:hover {
    opacity: 1; }
  #pagebody .editSharing i {
    float: right; }
  #pagebody .dSharing button, #pagebody .sCloseSharing, #pagebody .btNormal {
    border: 1px solid #fff;
    padding: 3px 10px;
    margin-right: 5px; }
  #pagebody .btNormal.active, #pagebody .btNormal:hover {
    border: 1px solid #3079ed;
    color: white;
    background: #4d90fe; }
  #pagebody .dSharing:hover button, #pagebody .sCloseSharing:hover {
    border: 1px solid #ccc; }
  #pagebody .sCloseSharing i {
    padding: 2px;
    color: #bbb; }
  #pagebody #inviteSharing {
    display: flex; }
  #pagebody #boxSharing {
    padding: 15px;
    height: 120px;
    background: #f8f8f8; }
  #pagebody .cmenu-settingPopup svg {
    width: 14px;
    margin-top: 1px;
    margin-right: 11px; }
  #pagebody #contextMenu li:hover {
    background-color: #f9f9f9; }
  #pagebody #contextMenu {
    width: 235px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px; }
  #pagebody #cboTool ul {
    list-style: none;
    padding-left: 0;
    background: #fff;
    width: 190px; }
  #pagebody #tabLopBanDo {
    height: calc(100vh - 78px - 25px); }
    #pagebody #tabLopBanDo #map-layers {
      padding: 10px 0; }
      #pagebody #tabLopBanDo #map-layers .disabled i, #pagebody #tabLopBanDo #map-layers .disabled span {
        color: #000000;
        opacity: .5;
        pointer-events: none; }
  #pagebody #cboTool .dropdown-toggle:after, #pagebody #toolRight .dropdown-toggle:after {
    border: none !important; }
  #pagebody #searchNear {
    border: 1px solid #a9a9a9;
    text-shadow: 0 1px #eaf9fc;
    background-position: 0 -62px;
    background-color: #f5f5f5;
    padding: 9px;
    padding-right: 9px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    padding-right: 27px; }
  #pagebody #searchNear:hover {
    background-color: #f1f1f1; }
  #pagebody #contextMenu li {
    padding: 8px;
    cursor: pointer;
    display: flex;
    height: 35px;
    background: #fff;
    line-height: 20px; }
  #pagebody #contextMenu i {
    padding: 3px; }
  #pagebody #contextMenu span {
    padding-left: 25px;
    position: absolute; }
  #pagebody .sText {
    position: absolute;
    left: 30px; }
  #pagebody .cmenu-addlayers ul, #pagebody .cmenu-newgroup ul {
    position: absolute;
    right: -211px;
    background: #fff;
    list-style: none;
    border: 1px solid #ddd;
    top: 41px;
    padding: 0;
    display: none;
    width: 210px;
    height: 168px; }
  #pagebody .sidepanel {
    height: 0;
    width: calc(100vw - 400px);
    position: absolute;
    z-index: 11;
    right: 0;
    background-color: #fff;
    transition: 0.3s;
    padding: 0 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
    #pagebody .sidepanel a {
      padding: 4px 9px;
      text-decoration: none;
      font-size: 14px;
      color: #000;
      display: block;
      transition: 0.3s;
      background: #b4b5b6cf; }
      #pagebody .sidepanel a:hover {
        background: #2d72ca; }
    #pagebody .sidepanel .closebtn {
      position: absolute;
      top: -5px;
      right: 10px;
      font-size: 28px;
      cursor: pointer; }
  #pagebody #myDataView {
    height: 400px;
    bottom: 0;
    display: none; }
    #pagebody #myDataView .tab-content {
      height: 335px; }
    .exmyslide #myDataView {
      height: 100% !important; }
      .exmyslide #myDataView .tab-content {
        height: calc(100vh - 115px); }
    .fullscreen #myDataView {
      bottom: 0 !important;
      top: auto !important; }
      .fullscreen #myDataView .tab-content {
        height: calc(100vh - 115px); }
  #pagebody .dRoute {
    margin: 6px auto; }
  #pagebody #dOpacity, #pagebody #dAnalyst {
    margin-left: 175px;
    background: rgba(94, 93, 93, 0.4);
    position: absolute;
    padding: 3px;
    width: auto;
    display: none; }
  #pagebody #dOpacity .slidecontainer {
    width: 350px; }
  #pagebody #dOpacity .slabel {
    width: 85px;
    font-weight: 600; }
  #pagebody #dOpacity .slider {
    width: 200px;
    font-weight: 600;
    margin-top: 17px; }
  #pagebody #dOpacity .svalue {
    padding-left: 7px;
    width: 30px;
    font-weight: 600; }
  #pagebody #liOpacity:hover #dOpacity, #pagebody #liAnalyst:hover #dAnalyst {
    display: block; }
  #pagebody .mb-0 {
    background: #f9f9f9;
    text-decoration: none;
    margin: 2px auto;
    outline: none;
    min-height: 34px;
    line-height: 22px;
    padding: 5px;
    cursor: pointer; }
  #pagebody .accordion i {
    font-size: 16px;
    padding: 5px;
    color: red; }
  #pagebody #frmPhanTich {
    display: none; }
  #pagebody .opRadius {
    padding-top: 9px;
    padding-right: 7px; }
  #pagebody #tabPhanTich ul {
    padding-left: 0;
    width: 100%; }
  #pagebody #btCluster {
    border: 1px solid #ccc;
    margin: 7px auto;
    padding: 7px;
    border-radius: 4px; }
  #pagebody #hPhanTich {
    font-weight: bold;
    background: #f9f9f9;
    padding: 7px;
    color: red;
    margin: 0; }
  #pagebody #boxSearch li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-height: 35px; }
  #pagebody #lbox {
    width: 100%; }
  #pagebody #lbox label {
    font-weight: normal;
    padding: 4px; }
  #pagebody #tabPhanTich li {
    list-style: none;
    line-height: 34px;
    padding-left: 20px;
    border-bottom: 1px dashed #ddd; }
  #pagebody .btn-link {
    color: #444; }
  #pagebody .ptitle {
    height: 35px;
    padding: 5px;
    position: absolute;
    top: 2px;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; }
    #pagebody .ptitle .gButton {
      display: flex;
      margin-right: 30px; }
      #pagebody .ptitle .gButton .btnclick {
        color: green;
        display: inline-block;
        padding: 0 5px;
        border: 1px solid #f1f1f1;
        margin-right: 2px;
        border-radius: 4px; }
  #pagebody #phantrang {
    text-align: center;
    margin-top: 0;
    margin-right: 30px; }
    #pagebody #phantrang .pagination {
      display: flex;
      flex-direction: row;
      width: 100%;
      margin: 0; }
      #pagebody #phantrang .pagination .p-current {
        display: flex;
        flex-direction: row;
        width: 76px;
        padding: 0 5px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ebebeb;
        height: 23px;
        align-items: center; }
        #pagebody #phantrang .pagination .p-current .ip-current {
          height: 20px;
          font-weight: 700;
          border: none;
          text-align: right;
          width: 30px;
          font-size: 12px; }
          #pagebody #phantrang .pagination .p-current .ip-current:focus-visible {
            outline: none; }
        #pagebody #phantrang .pagination .p-current span {
          background: #fff;
          font-size: 12px;
          border: none;
          margin: 0;
          padding: 1px 0 0px 0;
          display: block; }
      #pagebody #phantrang .pagination li a, #pagebody #phantrang .pagination li span {
        color: #3e4185;
        font-size: 11px;
        background-color: #FCFCFC;
        font-weight: bold;
        cursor: pointer;
        border-radius: 3px;
        border: 1px solid #ebebeb;
        padding: 5px 7px;
        padding-left: 7px;
        margin: 0 3px; }
      #pagebody #phantrang .pagination > .active > a, #pagebody #phantrang .pagination > .active a:focus, #pagebody #phantrang .pagination > .active a:hover {
        background-color: #11998E;
        border-color: #11998E;
        color: #fff; }
  #pagebody .ulProcessing i {
    position: absolute;
    right: 5px;
    font-size: 7px;
    padding: 6px 6px;
    color: #7da15e;
    border: 1px solid;
    border-radius: 20px;
    top: 7px;
    cursor: pointer; }
  #pagebody .ulProcessing .fa-share-alt {
    right: 57px; }
  #pagebody .no-ready #modalLogin {
    display: block !important; }
  #pagebody body.no-ready {
    min-height: 100vh;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F9FBFF; }
  #pagebody .no-ready > div {
    display: none !important; }
  #pagebody .ulProcessing .fa-trash {
    right: 30px;
    font-size: 12px;
    padding: 3px 5px; }
  #pagebody .ulProcessing li {
    position: relative; }
  #pagebody .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none; }
  #pagebody .openbtn:hover {
    background-color: #444; }
  #pagebody .cmenu-addlayers:hover ul, #pagebody .cmenu-newgroup:hover ul {
    display: block; }
  #pagebody div[unit="basemap"] p svg {
    margin-top: 4px;
    margin-right: 7px;
    margin-left: 5px; }
  #pagebody div[unit="basemap"] p svg:nth-child(2) {
    margin-top: 2px; }
  #pagebody #settingLayer label {
    padding: 8px 1px 4px 0;
    font-weight: bold; }
  #pagebody .sv-inline {
    display: inline-flex;
    border: 1px solid #ddd;
    margin: 0 auto !important;
    width: 100%; }
  #pagebody .sv-inline input {
    border-radius: 0px;
    border: none;
    box-shadow: none;
    padding-left: 5px; }
  #pagebody .sv-inline button {
    background: #fff;
    border: none;
    border-left-color: currentcolor;
    border-left-style: none;
    border-left-width: medium;
    border-left: 1px solid #ddd;
    padding: 5px 11px;
    cursor: pointer;
    margin-left: -1px; }
  #pagebody li.liclick:hover {
    background-color: #f9f9f9;
    cursor: pointer; }
  #pagebody #modalSetting .map-items {
    display: none;
    width: 100%; }
  #pagebody #modalSetting[cmenu="cmenu-newgroup"] #newgroup {
    display: block; }
  #pagebody #modalSetting[cmenu="cmenu-rename"] #rename {
    display: block; }
  #pagebody #modalSetting[cmenu="cmenu-dataSource"] #dataSource {
    display: block; }
  #pagebody #modalSetting[cmenu="cmenu-remove"] #remove {
    display: block; }
  #pagebody #modalSetting[cmenu="mapsetting"] #mapsetting {
    display: block; }
  #pagebody #modalSetting[cmenu="cmenu-settingPopup"] #popupsetting {
    display: block;
    min-height: 380px; }
  #pagebody #modalSetting[cmenu="cmenu-settingFilter"] #filtersetting {
    display: block;
    min-height: 380px; }
  #pagebody #modalSetting[cmenu="cmenu-settingLayer"] #settingLayer {
    display: block; }
  #pagebody #modalSetting[cmenu="cmenu-remove"] .modal-dialog,
  #pagebody #modalSetting[cmenu="cmenu-rename"] .modal-dialog,
  #pagebody #modalSetting[cmenu="cmenu-newgroup"] .modal-dialog {
    width: 300px; }
  #pagebody #modalSetting[cmenu="cmenu-settingPopup"] .modal-dialog, #pagebody #modalSetting[cmenu="cmenu-settingFilter"] .modal-dialog {
    width: 70%; }
  #pagebody #cboSuggestDataSource .dropdown-menu {
    width: 100%; }
  #pagebody #cboSuggestDataSource li {
    height: 39px;
    line-height: 30px;
    padding: 5px 0 5px 21px;
    font-size: 15px; }
  #pagebody #poptable, #pagebody #filtertable {
    height: 330px;
    max-height: 330px;
    overflow-y: scroll;
    overflow-x: hidden; }
  #pagebody #poptable input, #pagebody #filtertable input {
    background: none;
    border: none;
    width: 100%;
    height: 100%;
    padding: 0; }
  #pagebody #popMove, #pagebody #filterMove {
    float: right; }
  #pagebody #popupsetting ul, #pagebody #filtersetting ul {
    padding-left: 0;
    overflow: hidden scroll; }
  #pagebody #popupsetting ul {
    height: 326px; }
  #pagebody #filtersetting ul {
    margin-top: 12px;
    height: 365px; }
  #pagebody #ulFilterOut {
    height: 288px !important; }
  #pagebody #popupsetting li, #pagebody #filtersetting li {
    list-style: none;
    height: 35px;
    line-height: 34px;
    border-bottom: 1px solid #ddd; }
  #pagebody .popbuttons {
    display: flex;
    justify-content: space-around;
    margin-top: 15px; }
  #pagebody .pop-items label {
    width: 100%;
    padding: 6px;
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
    margin-top: 9px; }
  #pagebody .popbuttons button {
    width: 30%;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 24px;
    height: 30px;
    line-height: 0px;
    margin-top: -10px; }
  #pagebody .UI-SUGGEST ul {
    width: 100%;
    max-height: 300px;
    overflow: hidden scroll; }
  #pagebody .UI-SUGGEST li {
    height: 39px !important;
    padding: 9px 17px;
    font-size: 15px;
    line-height: 22px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden; }
  #pagebody .popbuttons button.active {
    color: #000;
    background-color: lemonchiffon; }
  #pagebody #popupsetting li i, #pagebody #filtersetting li i {
    float: right;
    padding: 7px; }
  #pagebody .lbthongtin {
    width: 40%;
    display: flex;
    line-height: 23px;
    height: 30px;
    padding: 5px; }
  #pagebody .selected {
    background-color: #f9f9f9; }
  #pagebody #poptable tbody i, #pagebody #filtertable tbody i {
    display: none; }
  #pagebody .selected i {
    display: block !important; }
  #pagebody .modal-header {
    border: none; }
  #pagebody #modalSetting .modal-body {
    width: 100%;
    display: flex;
    border-top: 1px solid #ddd;
    padding: 5px; }
  #pagebody #settingLayer .UI-DROP button {
    background: none;
    border: none;
    width: 100%;
    height: 39px;
    padding: 0 0 0 9px;
    border: 1px solid #ddd;
    line-height: 34px;
    text-align: left; }
  #pagebody #settingLayer .UI-DROP i {
    float: right;
    padding: 10px 10px;
    border-left: 1px solid #ddd; }
  #pagebody #settingLayer .UI-DROP li i {
    float: unset; }
  #pagebody #settingLayer .UI-DROP {
    width: 100%;
    padding: 0; }
  #pagebody #settingLayer .UI-DROP ul {
    width: 100%; }
  #pagebody #mapsetting .col-sm-8, #pagebody #mapsetting .col-sm-4, #pagebody #mapsetting .col-sm-12 {
    padding: 2px 5px; }
  #pagebody #mapsetting label {
    font-weight: normal; }
  #pagebody #map {
    position: absolute;
    top: 0;
    cursor: default;
    z-index: 3;
    /*cursor: -webkit-grab;
    cursor: grab;*/ }
  #pagebody #zoneIsland {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    padding: 0;
    background: #fff;
    border-radius: 5px; }
    #pagebody #zoneIsland img {
      width: 180px;
      height: 140px;
      z-index: 1000; }
  #pagebody i.right {
    float: right;
    color: #666;
    padding: 3px;
    position: absolute;
    right: 7px; }
  #pagebody i.left {
    float: left;
    padding: 3px;
    margin-right: 8px; }
  #pagebody .slidecontainer {
    width: 100%;
    padding: 10px;
    background: #fff; }
  #pagebody .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px; }
  #pagebody .slider:hover {
    opacity: 1; }
  #pagebody .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer; }
  #pagebody .slider::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #FF901A;
    cursor: pointer;
    border: 2px solid #fff; }
  #pagebody #boxAccount {
    top: 0;
    position: fixed;
    right: 0; }
  #pagebody #myavatar {
    width: 50px;
    height: 50px;
    padding: 6px;
    margin: 0;
    border-radius: 50%; }
  #pagebody #myName:hover {
    text-decoration: underline; }
  #pagebody #myName {
    padding: 8px 0;
    font-size: 13px;
    margin: 10px;
    cursor: pointer; }
  #pagebody #myavatar:hover {
    border: 2px solid #4be34b; }
  #pagebody #spatialTool {
    border-bottom: 3px solid #ddd;
    display: flex;
    justify-content: center;
    padding: 10px 0; }
    #pagebody #spatialTool #filterLine {
      background-position: -23px 7px; }
    #pagebody #spatialTool #filterPolygon {
      background-position: 7px 7px; }
    #pagebody #spatialTool #filterCircle {
      background-position: -49px 8px; }
    #pagebody #spatialTool #filterBox {
      background-position: -104px 7px; }
  #pagebody #spatialTool button:hover {
    background-color: #f9f9f9;
    cursor: pointer; }
  #pagebody #spatialTool button {
    height: 33px;
    width: 33px;
    padding: 0;
    border: solid 1px #ddd;
    border-radius: 5px;
    margin-right: 5px;
    background-image: url("../../images/spatial.png");
    background-repeat: no-repeat; }
  #pagebody .filterTool {
    height: 34px;
    line-height: 23px;
    padding: 5px;
    border-bottom: 1px solid #ddd; }
  #pagebody #fieldTool {
    display: flex;
    flex-direction: column;
    padding: 10px 0; }
  #pagebody .btFilter {
    width: 100%;
    padding: 20px 0; }
  #pagebody #btFilter {
    padding: 5px 10px;
    width: 100%;
    background: #3e4185; }
  #pagebody .fieldData {
    min-height: 20px;
    padding: 5px;
    line-height: 20px;
    /*border-bottom: 1px dashed #bbb;*/
    float: left;
    width: 100%;
    position: relative;
    display: flex; }
    #pagebody .fieldData label {
      width: 100%; }
    #pagebody .fieldData input {
      text-align: right; }
    #pagebody .fieldData .ui-nhan {
      padding: 6px;
      position: absolute; }
    #pagebody .fieldData .dropdown-toggle:after {
      position: absolute;
      right: 16px;
      bottom: 19px;
      display: none; }
    #pagebody .fieldData i {
      float: right;
      padding: 10px 0; }
  #pagebody #dsFilter {
    max-height: 424px;
    position: relative; }
  #pagebody #dsTable {
    height: calc(100vh - 327px);
    position: relative; }
  #pagebody .ddl-label {
    float: right;
    color: #000;
    padding: 0px 10px;
    border: 1px solid #ddd; }
  #pagebody .oNumber {
    list-style: none;
    float: right;
    position: absolute;
    padding: 5px; }
  #pagebody .oNumber li {
    float: left;
    margin: 0 1px;
    border: 1px solid #ccc;
    padding: 0 11px;
    height: 23px;
    line-height: 20px;
    border-radius: 4px;
    font-size: 12px; }
  #pagebody .text.operator {
    position: absolute;
    padding: 4px;
    color: #159515; }
  #pagebody .dnav {
    padding: 5px;
    display: flex; }
  #pagebody .ihelp {
    padding: 9px 9px 9px 0px; }
  #pagebody .ihelp::before {
    color: #555; }
  #pagebody .oNumber li.active {
    background: #faf3b8; }
  #pagebody .gvtDDL ul {
    /*width: 100%;*/ }
  #pagebody .skhoangcach {
    position: absolute;
    font-size: 12px;
    padding: 9px;
    right: 1px;
    color: #db689d; }
  #pagebody #navigation {
    position: relative; }
  #pagebody #pBtnRoute button {
    cursor: pointer;
    border-radius: 0;
    height: 34px;
    padding: 0 11px;
    margin-top: -9px; }
  #pagebody #pBtnRoute {
    background: -webkit-gradient(linear, 0% 0%, 0 90%, from(#fcfcfc), to(#ececec)) #f5f5f5;
    height: 34px;
    margin: 0;
    line-height: 33px;
    box-shadow: 3px 3px 4px -4px #333;
    border: 1px solid #ccc;
    border-radius: 22px; }
  #pagebody .snavname {
    padding: 7px;
    width: 66%; }
  #pagebody #measure {
    background: #fff none repeat scroll 0 0;
    border-radius: 4px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: none;
    height: 32px;
    position: absolute;
    right: 80px;
    top: 20px;
    width: 292px;
    z-index: 1000;
    font-size: 14px; }
    #pagebody #measure label {
      background: #f2fafb;
      width: 100%;
      padding: 5px;
      font-weight: 700; }
  #pagebody #closeMeasure {
    position: absolute;
    right: 4px;
    top: 3px;
    color: #000;
    cursor: pointer; }
  #pagebody #mytip {
    display: none;
    position: fixed;
    overflow: hidden;
    background: #f1f57f;
    padding: 2px;
    border-radius: 3px;
    color: #49ab26;
    border: 1px solid #fff;
    font-size: 9px;
    box-shadow: 2px 2px 5px -3px #333; }
  #pagebody #sNbRows {
    float: right;
    padding-right: 47px;
    align-self: center; }
  #pagebody #sTBName {
    font-weight: bold;
    color: #fff;
    padding: 0; }
  #pagebody .kq-item {
    background: -webkit-gradient(linear, 0% 0%, 0 90%, from(#f9f9f9), to(#fff)) #f5f5f5;
    /*border-bottom: 1px solid #fff;
    border-top: 1px solid #ccc;*/
    margin-top: 1px;
    padding: 0 !important;
    border-bottom: none !important; }
  #pagebody .kq-item.thuadat:nth-of-type(odd) {
    background: #e4edeb; }
  #pagebody .kq-item.thuadat p {
    padding: 6px 0 6px 25px;
    margin: unset;
    border-bottom: 1px solid #ccc; }
  #pagebody .kq-icon {
    background: no-repeat url(../images/maps/from.png);
    padding: 5px 12px;
    background-size: contain; }
  #pagebody .kq-name {
    font-size: 17px;
    color: #444; }
  #pagebody .kq-diachi {
    font-size: 13px;
    color: #444; }
  #pagebody .kq-link {
    display: flex;
    justify-content: space-around;
    font-size: 11px;
    margin: 0; }
  #pagebody .kq-link span {
    background-image: url(../images/maps/redarrow.png);
    background-repeat: no-repeat;
    background-position: 0 5px;
    padding-left: 8px;
    cursor: pointer; }
  #pagebody #ul2Tabs {
    margin-bottom: 10px;
    border: none !important;
    justify-content: flex-start; }
    #pagebody #ul2Tabs li a {
      background: #3e4185;
      align-items: center;
      display: flex;
      justify-content: center;
      border-radius: 0 0 10px 10px;
      height: 30px;
      padding: 0 10px;
      color: #fff;
      min-width: 120px; }
  #pagebody #tkBar {
    height: 35px;
    padding: 2px;
    border-bottom: 1px solid #ddd;
    position: relative; }
  #pagebody #tkBar .UI-DROP {
    float: left;
    width: 200px;
    margin-left: 5px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid #ddd;
    padding: 4px;
    position: relative; }
  #pagebody #tkBar .UI-DROP i {
    right: 0;
    position: absolute;
    padding: 3px 12px; }
  #pagebody #tkBar ul {
    max-height: 250px;
    overflow: hidden;
    width: 100%; }
  #pagebody #tkBar ul:hover {
    overflow-y: scroll; }
  #pagebody #btStatistic {
    padding: 6px 11px;
    margin-left: 5px;
    background: #fb6161;
    color: white;
    border-radius: 4px;
    height: 30px;
    font-size: 13px; }
  @media only screen and (max-width: 992px) {
    #pagebody #sNbRows {
      padding: 0 !important; }
    #pagebody #leftPanel.show {
      margin-left: 0; }
    #pagebody .sidepanel {
      width: calc(100vw - 300px); } }
  @media only screen and (max-width: 768px) {
    #pagebody #ul2Tabs {
      margin-top: 40px; }
    #pagebody #toggleLeftMenu {
      z-index: 999;
      position: absolute;
      top: 80px;
      padding: 0;
      line-height: 17px;
      background: blue;
      cursor: pointer;
      right: 0;
      width: 40px; }
      #pagebody #toggleLeftMenu i {
        font-size: 24px;
        color: #fff;
        padding: 5px 10px;
        display: block !important; }
      #pagebody #toggleLeftMenu:hover {
        background: #3e4185;
        color: white;
        font-weight: bold; }
        #pagebody #toggleLeftMenu:hover i {
          color: white; }
    #pagebody .sidepanel {
      width: 100%; }
    #pagebody .topToolMap {
      display: none; }
    #pagebody .viewToolMap {
      display: block;
      position: absolute;
      z-index: 10;
      right: 19px;
      top: 77px;
      background: #3b672d;
      width: 30px;
      height: 30px;
      border-radius: 50%; }
      #pagebody .viewToolMap i {
        color: #fff;
        font-size: 16px;
        padding: 7px;
        cursor: pointer; }
    #pagebody #datastores {
      left: 5px !important;
      top: 10px;
      z-index: 15;
      width: 95vw; }
    #pagebody #toolRight {
      right: 5px; }
    #pagebody .ol-zoom.ol-unselectable.ol-control {
      top: 10px !important;
      bottom: unset !important;
      right: 5px !important; }
    #pagebody #zoneIsland {
      right: 5px;
      bottom: 5px; } }
  #pagebody .contact-btn {
    margin-top: 15px; }
  @media only screen and (max-width: 992px) {
    #pagebody #toggleLeftMenu {
      z-index: 5;
      position: absolute;
      top: 0;
      padding: 0;
      line-height: 17px;
      border-left: 1px solid #ddd;
      background: #3e4185;
      cursor: pointer;
      right: 0; }
      #pagebody #toggleLeftMenu i {
        font-size: 24px;
        color: "#fff";
        padding: 5px 10px; }
      #pagebody #toggleLeftMenu:hover {
        background: #3e4185;
        color: white;
        font-weight: bold; }
        #pagebody #toggleLeftMenu:hover i {
          color: white; } }