@charset "UTF-8";
@import url(../../fonts/roboto/font-roboto.css);
@import 'https://fonts.googleapis.com/css?family=Noto+Sans';
/*primary-color: #1667a0*/
/*primary-color: #009970*/
/****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 Iphone Plus****/
/****Màn hình điện thoại Iphone****/
/****Màn hình điện thoại loại bé****/
/*primary-color: #1667a0*/
/*primary-color: #009970*/
/*primary-color: #1667a0*/
/*primary-color: #009970*/
@font-face {
  font-family: 'Inter';
  src: url("../../fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype"); }

/*@font-face {
    font-family: 'Roboto';
    src: url('../../fonts/Roboto/Roboto-Black.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Bold.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-BoldItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Italic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Light.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-LightItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Medium.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Regular.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-Thin.ttf') format('truetype'), url('../../fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
}*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

html {
  color: #333;
  font-family: 'Inter', 'Roboto',  sans-serif;
  font-size: 16px; }

#pagebody {
  position: fixed;
  top: 65px;
  width: 100%;
  height: 100%;
  display: inline-flex;
  padding: 0; }
  #pagebody .viewToolMap {
    display: none;
    position: absolute;
    z-index: 10; }

.fullscreen #pagebody {
  top: 0; }

#leftpanel {
  height: 100%;
  background: #fff;
  z-index: 3;
  border-right: 6px solid #cccccc87; }
  #leftpanel.show {
    margin-left: 0;
    min-width: 300px; }
  #leftpanel .tab-content #dataPage {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 10;
    text-decoration: underline;
    font-size: 15px; }
  #leftpanel .ui-resizable-e {
    background-color: #ebebeb;
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 5px;
    position: absolute;
    top: 0;
    height: 100%;
    right: -6px; }
    #leftpanel .ui-resizable-e #eResize {
      background: #bbb;
      height: 40px;
      margin-top: 71%; }
      #leftpanel .ui-resizable-e #eResize:hover {
        background-color: gold; }
    #leftpanel .ui-resizable-e:hover {
      background-color: #edf2d6;
      cursor: col-resize; }
  @media only screen and (max-width: 992px) {
    #leftpanel {
      width: 35%;
      height: auto;
      max-height: 100%;
      max-width: 80%; } }

#rightpanel {
  height: calc(100vh - 68px);
  width: 100%;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  position: relative;
  bottom: 0;
  flex: 1; }
  #rightpanel .TabTable {
    height: inherit; }
    #rightpanel .TabTable #tbOutputContent {
      z-index: 9;
      height: inherit;
      padding-left: 0;
      padding-right: 0; }
      #rightpanel .TabTable #tbOutputContent #page-top, #rightpanel .TabTable #tbOutputContent #tools-filter {
        padding-left: 0;
        padding-right: 0; }
  #rightpanel #ThongKe {
    z-index: 1000;
    position: relative;
    background-color: #fff; }

@media only screen and (max-width: 992px) {
  #pagebody {
    padding: 0; }
    #pagebody #leftpanel {
      position: absolute;
      width: 300px;
      z-index: 10;
      height: 100%;
      margin-left: -400px; }
      #pagebody #leftpanel .tbTongHop {
        overflow: auto; }
    #pagebody #rightpanel #KhaiThac #page-top .title {
      padding-left: 40px; } }

li.nav-item .nav-link {
  color: #999;
  text-transform: uppercase;
  font-family: Roboto Condensed; }

li.nav-item .active {
  border-bottom: 5px solid #5EBAAD !important; }

li.nav-item a {
  border: none !important;
  padding: 10px 10px 10px 6px; }

#tbOutputMenu #mapPage {
  position: absolute;
  right: 5px;
  top: 8px;
  z-index: 10;
  text-decoration: underline;
  font-size: 15px; }

#loading {
  position: absolute;
  left: 60%;
  top: 74px;
  color: red;
  display: none; }

.modal-content {
  min-height: 96%; }

#sidebarCollapse {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  background: rgba(255, 255, 255, 0.4);
  padding: 3px;
  cursor: pointer; }
  #sidebarCollapse #ic-sidebarCollapse {
    text-align: center;
    height: 35px;
    width: 35px;
    background: white; }
    #sidebarCollapse #ic-sidebarCollapse i {
      transform: scaleX(1);
      line-height: 35px;
      font-size: 20px;
      transition: transform 1s cubic-bezier(1, -0.29, 0.14, 0.96);
      color: gray; }
      @media only screen and (max-width: 992px) {
        #sidebarCollapse #ic-sidebarCollapse i {
          transform: scaleX(-1); } }

#leftpanel {
  transition: margin-left 0.5s cubic-bezier(0.72, 0.03, 0.27, 1.03);
  position: relative; }

#sidebarClose {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.4);
  padding: 3px;
  cursor: pointer;
  display: none; }
  #sidebarClose #ic-sidebarClose {
    text-align: center;
    height: 35px;
    width: 35px;
    background: white; }
    #sidebarClose #ic-sidebarClose i {
      line-height: 35px;
      font-size: 20px;
      transition: transform 1s cubic-bezier(1, -0.29, 0.14, 0.96);
      color: gray; }
  @media only screen and (max-width: 992px) {
    #sidebarClose {
      display: block; } }

#leftpanel {
  transition: margin-left 0.5s cubic-bezier(0.72, 0.03, 0.27, 1.03);
  position: relative; }