.show-mobile {
  display: none;
}

button#mobile-search-btn, input#mobile-search-input {
    text-align: left;
    border: none;
    color: gray;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 450px) {
/* Styles */

  .show-mobile {
    display: block;
  }

  div#chatra {
    display: none !important;
  }

  .hide-mobile {
    display: none !important;
  }

  div#display-iframe-container {
      padding-top: 0px;
  }

  div#maps-area {
      padding-top: 0px;
  }

  .mobile-data-menu-cnt {
      height: 65px;
      background: white;
      border-radius: 6px 6px 0px 0px;
  }

  #maps-area .leaflet-container .leaflet-bottom {
      margin-bottom: 65px;
  }

  #maps-area .leaflet-bottom .leaflet-control {
      margin-bottom: 5px;
      margin-top: 5px;
      margin-right: 5px;
  }

  #maps-area .leaflet-container .legend {
      font-size: 0.85em;
      line-height: 15px;
      margin-bottom: 5px;
      padding: 6px 6px;
      margin-left: 5px;
  }

  #maps-area .leaflet-container .legend i {
      width: 7px;
      height: 15px;
      opacity: 1;
  }

  .map-navbar.over-map.mobile-top-menu-cnt {
      margin-top: 10px;
  }

  .map-navbar.over-map.mobile-top-menu-cnt > nav {
      background: #fff;
      border-radius: 6px;
      padding: 6px;
  }

  nav ul.navbar-nav.row-navbar-nav {
      flex-direction: row;
  }

  #maps-area div.map-cnt .map-navbar li.nav-item a.nav-link.btn {
      padding: 0px;
      margin: 0px;
  }

  #maps-area div.map-cnt .map-navbar li.nav-item {
      margin: 0px;
  }

  #maps-area div.map-cnt .map-navbar li.nav-item a.nav-link.btn.side-btn {
      padding: 4px 8px;
  }

  #maps-area div.map-cnt .map-navbar li.nav-item input#mobile-search-btn {
      height: 35px;
      padding: 0px 5px;
      border: none;
      font-size: 1.3em;
      width: 100%;
      padding-bottom: 1px;
  }

  li.nav-item.w-10 {
    width: 10%;
  }

  li.nav-item.w-16 {
    width: 16%;
  }

  li.nav-item.w-20 {
    width: 10%;
  }

  li.nav-item.w-80 {
    width: 80%;
  }

  li.nav-item.w-84 {
    width: 84%;
  }

  #maps-area div.map-cnt .map-navbar li.nav-item.mobile-search-input-cnt {
      padding: 0px 10px;
  }

  .navbar-nav-cnt.navbar-nav-full-width {
      width: 100%;
  }

  .mobile-data-menu-cnt {
      padding: 0px;
  }

  .mobile-data-menu-cnt .mobile-data-menu {
      width: 100%;
      margin: 0px;
  }

  .mobile-data-menu-cnt .mobile-data-menu > nav {
      width: 100%;
      padding: 0px;
  }

  #mobile-open-details-btn {
      height: 100%;
      border-right: 1px solid #d8d8d8;
      border-radius: 0px;
      font-size: 25px;
      padding-top: 12px;
      min-width: 100%;
      margin-top: 0px;
      text-align: center;
      color: inherit;
  }

  #mobile-open-main-menu-btn {
      padding: 8px 10px;
      text-align: left;
      font-size: 0.75em;
      line-height: 1.4;
      min-width: 100%;
      color: inherit;
  }

  #mobile-open-main-menu-btn i.caret {
      position: absolute;
      right: 13px;
      font-size: 15px;
      opacity: 0.9;
      top: 25px;
  }

  .data-display-label ul {
      list-style: none;
  }

  .modal-backdrop.show {
      opacity: 0.9;
  }

  .modal.mobile-modal button.close {
      margin: -10px -10px -8px auto;
      color: #fff;
      font-size: 1.6em;
      padding-right: 1.5em;
      text-shadow: none;
  }

  .modal.mobile-modal .modal-dialog {
      padding: 0px;
      margin: 0px;
  }

  .modal.mobile-modal .modal-dialog .modal-content > div {
      padding: 5px 2px;
  }

  .modal.mobile-modal .modal-dialog .modal-body .row {
      margin: 0px;
  }

  .modal.mobile-modal.transparent-content-back .modal-content {
      background: transparent;
      border-radius: 0px;
      border: none;
  }

  .modal.mobile-modal.transparent-content-back .modal-header,
    .modal.mobile-modal.transparent-content-back .modal-body {
    border: none;
  }

  div#mobile-main-menu-modal {
      padding: 0.25em 0px;
  }

  div#mobile-main-menu-accordion .card {
      margin-bottom: 5px;
  }

  div#mobile-main-menu-accordion .card-header,
    div#mobile-main-menu-accordion .card-body {
      padding: 5px;
  }

  div#mobile-main-menu-accordion .card-header button {
      width: 100%;
  }

  div#mobile-main-menu-accordion .card-header button i.caret {
      position: absolute;
      right: 10px;
      top: 16px;
      transform: rotate(90deg);
  }

  div#mobile-main-menu-accordion .card-header button.collapsed i.caret {
      transform: rotate(0deg);
  }

  div#mobile-main-menu-accordion .card-body li.list-group-item {
      padding: 0.5em 0px;
  }

  div#mobile-main-menu-accordion .card-body li.list-group-item a {
      padding: 0px 15px;
  }

  div#mobile-main-menu-accordion {
      width: 100%;
  }

  a#mobile-side-menu-btn {
      color: inherit;
  }

  div#mobile-main-menu-accordion .nav-pills .nav-link {
      margin: 5px;
  }

  div#mobile-main-menu-accordion .tab-content h6.dropdown-header {
      background: transparent;
      padding: 0.25rem 0.75em;
      color: hsla(208, 7%, 65%, 0.6);
  }

  div#mobile-main-menu-accordion .tab-content a.view-link {
      padding: 0.25rem 0.75em;
  }

  div.single-date-calendar-cnt .daterangepicker .drp-calendar {
      width: 100%;
      margin-right: auto;
      margin-left: auto;
      position: static;
      margin-top: 0px;
      padding: 0px;
      margin: 0px auto 10px;
  }

  div.calendar-cnt .daterangepicker {
      width: 100%;
  }

  div#mobile-data-type-variable-menu {
      max-height: 300px;
      overflow-y: auto;
  }

  /* div#mobile-side-menu-cnt {
      z-index: 1000;
      height: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      border-radius: 0px;
      padding: 0px;
      margin: 0px;
      background: rgba(19, 19, 19, 0.9);
      display: none;
  } */

  div.overlay-menu {
    z-index: 1001;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    border-radius: 0px;
    padding: 0px;
    margin: 0px;
    background: rgba(19, 19, 19, 0.9);
    display: none;
  }

  div.overlay-menu .container ,
    div.overlay-menu .container > .row {
      height: 100%;
      padding: 0px;
      margin: 0px;
  }

  div.overlay-menu .container .full-height-col {
      height: 100%;
  }

  div.overlay-menu .container .sidebar-col {
      background: #fff;
      opacity: 1 !important;
      padding: 0px;
  }

  div.overlay-menu .container .sidebar-col .row {
      margin-left: 0px;
      margin-right: 0px;
      padding: 0px;
  }

  div.overlay-menu .container .sidebar-col .row.row-user-desc {
      padding: 35px 10px;
      background: #036920;
      color: #fff;
  }

  div.overlay-menu .container .sidebar-col .row.row-main {
      margin-top: 15px;
      max-height: calc(100% - 62px);
      overflow-y: auto;
      padding-bottom: 30px;
  }

  div.overlay-menu .container .sidebar-col .row.row-footer {
      position: absolute;
      bottom: 0px;
      padding-top: 10px;
      padding-bottom: 10px;
  }

  div.overlay-menu .container .sidebar-col .row a.btn.btn-link.sidebar-link {
      width: 100%;
      padding-left: 0px;
  }

  div.overlay-menu .container .sidebar-col .row.row-header, .mobile-row-header {
      background: #036920;
      padding-top: 5px !important;
      padding-bottom: 5px !important;
  }

  div.overlay-menu .container .sidebar-col .row.row-header .sidebar-link,
   .mobile-row-header .sidebar-link {
    color: white;
    padding-left: 0px;
  }

  .details-panel .stats-item {
      padding-right: 2px;
      padding-left: 2px;
  }

  .details-panel .stats-item .stats-title {
     font-size: 0.8em;
  }

  .details-panel .stats-item .stats-value, .details-panel .stats-item .stats-value-units {
      font-size: 0.9em;
  }

  .details-panel > .row {
      padding: 0.5em 0.5em;
  }

  .details-panel .raw-data-table-row thead th {
      height: 40px;
      font-size: 0.7em;
  }

  .details-panel tbody td, .details-panel thead th {
      padding: 8px 8px;
  }

  .details-panel td.carto-unit-rank, .details-panel th.carto-unit-rank {
      width: 10%;
      padding-top: 9px;
  }

  .details-panel td.carto-unit-description, .details-panel th.carto-unit-description {
      width: 45%;
      font-size: 0.75em;
  }

  .details-panel td.carto-unit-bar, .details-panel th.carto-unit-bar {
      width: 45%;
  }

  .details-panel tbody.raw-data-table-body .carto-unit-desc {
      font-size: 0.75em;
  }

  .avg-line-cnt .avg-line-value {
      top: -12px;
  }

  div#details-panel-full {
      margin-top: 0px;
  }

  strong.carto-unit-rank-text.text-capitalize {
      font-size: 0.6em;
  }

  .details-panel > .row.detail-nabvar-row {
      padding: 10px 0px;
  }

  .details-panel .panel-title {
      position: relative;
      font-size: 0.9em;
  }

  .details-panel .panel-title-ctn {
    text-align: left;
  }

  .details-panel a.nav-link.close-map-btn.dark {
      padding-top: 5px;
      padding-right: 5px;
      padding-left: 5px;
  }

  a#mobile-open-details-btn.disabled {
      background: #ababab;
      color: #cacaca;
  }

  #maps-area .leaflet-bottom .leaflet-control-attribution.leaflet-control {
      margin-bottom: -2px;
      margin-right: 0px;
  }

  /* VARIABLE DATA UPLOAD */

  header#var-header {
      padding: 0px 15px;
      height: 50px;
      min-width: 100%;
      padding-top: 0px;
      position: fixed;
      z-index: 100;
      top: 0;
  }

  div#top-navbar {
      margin: 0px;
  }

  .container#manual-input-main-container {
      padding: 0px;
      padding-top: 50px;
      overflow-x: hidden;
      padding-bottom: 60px;
      overflow-y: scroll;
      max-height: 100%;
      height: 100%;
      min-height: 100vh;
  }

  div#save-btn-row {
      position: fixed;
      z-index: 100;
      bottom: 0px;
      margin: 0px;
      width: 100%;
      left: 0px;
      padding: 0px;
  }

  div#save-btn-row > div {
      padding: 0px;
      width: 100%;
  }

  div#save-btn-row > div button#mobile-save-btn {
      width: 100%;
      border-radius: 0px;
  }

  .container#manual-input-main-container div#hot {
      margin-left: -16px;
      margin-right: -16px;
      /* height: 300px; */
  }

  /* .container#manual-input-main-container #manual-input .row {
      margin-right: 0px;
      margin-left: 0px;
  } */

  /* .container#manual-input-main-container #manual-input .col-md,
   .container#manual-input-main-container #manual-input .col-12,
   .container#manual-input-main-container #manual-input .col-md-3,
   .container#manual-input-main-container #manual-input .col-md-12
   {
      padding-right: 0px;
      padding-left: 0px;
  } */

  .invalid-feedback {
      display: block;
  }

  div#search-menu-ctn {
      background: #ffffffff;
  }

  div#search-menu-ctn nav.navbar input#mobile-search-input {
      padding: 11px;
      padding-left: 22px;
      border: none;
  }

  div#search-menu-ctn nav.navbar {
      background: #ffffffff;
      margin-top: 10px;
      padding: 0px 6px;
      margin-left: 15px;
      margin-right: 15px;
      border-radius: 6px;
      border: 1px solid #ccc;
      z-index: 1001;
  }

  div#search-menu-ctn nav.navbar ul li a {
      padding-top: 10px;
  }

  .form-control:focus {
      border-color: transparent;
      box-shadow: none;
  }

  div#search-menu-list {
      margin-top: 10px;
      overflow-y: scroll;
      position: absolute;
      top: 0px;
      padding-top: 60px;
      max-height: 100%;
      height: 100%;
      padding-bottom: 30px;
      padding-left: 15px;
      padding-right: 15px;
  }

  div#search-menu-list a.list-group-item.list-group-item-action {
      padding: .75rem 1.25rem;
  }

  .leaflet-bar.leaflet-control {
      top: 0px;
      right: 0px;
  }

  .wrapper {
  	min-height: 100%;
  	height: 100%;
  }

  .leaflet-draw.leaflet-control {
    display: none;
  }
}

#landscape-detected {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999;
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-height: 450px) and (min-width: 450px) and (orientation : landscape) {
  /* #landscape-detected {
    display: flex;
  } */
}
/* Styles */