.webcg-devtools {
  @import '../node_modules/bootstrap/scss/bootstrap.scss';

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 8px; /* 0.5rem */
  }

  h1, .h1 {
    font-size: 40px; /* 2.5rem */
  }

  h2, .h2 {
    font-size: 32px; /* 2rem */
  }

  h3, .h3 {
    font-size: 28px; /* 1.75rem */
  }

  h4, .h4 {
    font-size: 24px; /* 1.5rem */
  }

  h5, .h5 {
    font-size: 20px; /* 1.25rem */
  }

  h6, .h6 {
    font-size: 16px; /* 1rem */
  }

  .btn {
    padding: 6px 12px; /* 0.375rem 0.75rem */
    font-size: 16px; /* 1rem */
    border-radius: 4px; /* 0.25rem */
  }

  .btn-sm {
    padding: 4px 8px; /* 0.25rem 0.5rem */
    font-size: 14px; /* 0.875rem */
    border-radius: 3.2px /* 0.2rem */
  }

  .btn:focus {
    box-shadow: 0 0 0 3.2px rgba(0, 123, 255, 0.25); /* 0.2rem */
  }

  .form-group {
    margin-bottom: 16px; /* 1rem */
  }

  .form-control {
    height: 38px; /* calc(2.25rem + 2px); */
    padding: 6px 12px; /* 0.375rem 0.75rem */
    font-size: 16px; /* 1rem */
    border-radius: 4px; /* 0.25rem */
  }

  .form-control:focus {
    box-shadow: 0 0 0 3.2px rgba(0, 123, 255, 0.25); /* 0.2rem */
  }

  .nav-tabs .nav-link {
    border-top-left-radius: 4px; /* 0.25rem */
    border-top-right-radius: 4px; /* 0.25rem */
  }

  .nav-link {
    padding: 8px 16px; /* 0.5rem 1rem */
  }

  .modal {
    display: block;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }

  .modal-header {
    padding: 16px; /* 1rem */
    border-top-left-radius: 4.8px; /* 0.3rem */
    border-top-right-radius: 4.8px; /* 0.3rem */
  }

  .modal-body {
    padding: 16px; /* 1rem */
  }

  .modal-content {
    border-radius: 4.8px; /* 0.3rem */
  }

  .modal-footer {
    padding: 16px; /* 1rem */
  }

  .table {
    margin-bottom: 16px; /* 1rem */

    th, td {
      padding: 12px; /* 0.75rem */
    }
  }

  .table-sm {
    th, td {
      padding: 4.8px; /* 0.3rem */
    }
  }
}