/* =========================================================
   MOBILE RESPONSIVE IMPROVEMENT
========================================================= */
@media only screen and (max-width: 768px) {

  /* ---------- Main Container ---------- */
  .d-flex.justify-content-center > div {
    width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ---------- Hero Images ---------- */
  .ftco-animate img:first-child,
  .ftco-animate img:last-child {
    width: 100% !important;
    height: auto !important;
  }

  .ftco-animate {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ---------- Buttons ---------- */
  .align-self-end {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .align-self-end .btn {
    flex: 1 1 calc(50% - 8px);
    font-size: 14px;
    padding: 10px 8px;
  }

  #btn_export_lab {
    width: 100%;
    margin-top: 10px;
  }

  /* ---------- Labels ---------- */
  .form-label {
    font-size: 14px;
    margin-bottom: 6px;
  }

  /* ---------- Form Group ---------- */
  .form-group {
    margin-bottom: 14px;
  }

  /* ---------- Warning Text ---------- */
  .text-danger.font-weight-bold {
    display: block;
    margin-bottom: 6px;
  }

  .col-md-12 label[style*="text-align:justify"] {
    font-size: 13px;
    line-height: 1.7;
    padding-left: 12px;
    padding-right: 12px;
  }

  #labList {
    min-width: 900px !important;
    font-size: 13px !important;
  }

  #labList th,
  #labList td {
    padding: 10px 8px !important;
    vertical-align: middle !important;
  }

  /* ---------- Region Buttons ---------- */
  .mainManu {
    font-size: 14px;
    padding: 12px 10px !important;
  }

  /* ---------- Chart ---------- */
  #barchart_3d {
    height: 260px !important;
  }

}