@media (min-width: 768px) {
  .tl-navbar-nav {
    display: flex !important;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  body .container {
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (max-width: 767px) {

  body, .container, .mt-2 {
    margin: 0;
    padding: 0;
  }

  header .tl-user-data {
    display: none;
  }

  header .tl-navbar {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    position: relative;
  }

  header .tl-navbar .tl-mobile {
    display: block;
  }

  header .tl-navbar .tl-mobile.tl-login {
    display: block;
    position: absolute;
    right: 8px;
    top: 12px;
  }


  header .tl-navbar .tl-mobile-logo {
    display: block;
    height: 44px;
    width: 140px;
    margin: auto;
    margin-top: 4px;
  }

  header .tl-navbar .tl-mobile-login {
    display: block;
  }

  .tl-navbar .tl-hidden-small {
    flex-direction: column;
    display: none;
  }

  header  .tl-navbar-toggle {
    display: inline;
    position: absolute;
    left: 8px;
    top: 8px;
    cursor: pointer;
  }

  .tl-page-content {
    flex-direction: column-reverse;
  }

  .tl-page-main {
    padding: 8px;
  }
  form {
    padding: 0px;
  }

  section {
    padding: 16px 16px 0px 0px;
    display: flex;
    flex-direction: column;
  }

  section .tl-user-form section label {
    flex: 0 0;
  }

  .tl-detail-head {
    flex-direction: column;
  }

  .tl-card {
    display: flex;
    flex-direction: column;
  }

  .tl-card-map {
    width: 100%;
    height: 400px;
  }

  .tl-main-logo {
    display: none;
  }

}