{% include 'admin-layout.html' %}

        <!-- Begin Page Content -->
        <div class="container-fluid">

          <!-- Page Heading -->
          <h1 class="h3 mb-1 text-gray-800">Color Utilities</h1>
          <p class="mb-4">Bootstrap's default utility classes can be found on the official <a href="https://getbootstrap.com/docs">Bootstrap Documentation</a> page. The custom utilities below were created to extend this theme past the default utility classes built into Bootstrap's framework.</p>

          <!-- Content Row -->
          <div class="row">

            <!-- First Column -->
            <div class="col-lg-4">

              <!-- Custom Text Color Utilities -->
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Custom Text Color Utilities</h6>
                </div>
                <div class="card-body">
                  <p class="text-gray-100 p-3 bg-dark m-0">.text-gray-100</p>
                  <p class="text-gray-200 p-3 bg-dark m-0">.text-gray-200</p>
                  <p class="text-gray-300 p-3 bg-dark m-0">.text-gray-300</p>
                  <p class="text-gray-400 p-3 bg-dark m-0">.text-gray-400</p>
                  <p class="text-gray-500 p-3 m-0">.text-gray-500</p>
                  <p class="text-gray-600 p-3 m-0">.text-gray-600</p>
                  <p class="text-gray-700 p-3 m-0">.text-gray-700</p>
                  <p class="text-gray-800 p-3 m-0">.text-gray-800</p>
                  <p class="text-gray-900 p-3 m-0">.text-gray-900</p>
                </div>
              </div>

              <!-- Custom Font Size Utilities -->
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Custom Font Size Utilities</h6>
                </div>
                <div class="card-body">
                  <p class="text-xs">.text-xs</p>
                  <p class="text-lg mb-0">.text-lg</p>
                </div>
              </div>

            </div>

            <!-- Second Column -->
            <div class="col-lg-4">

              <!-- Background Gradient Utilities -->
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Custom Background Gradient Utilities</h6>
                </div>
                <div class="card-body">
                  <div class="px-3 py-5 bg-gradient-primary text-white">.bg-gradient-primary</div>
                  <div class="px-3 py-5 bg-gradient-success text-white">.bg-gradient-success</div>
                  <div class="px-3 py-5 bg-gradient-info text-white">.bg-gradient-info</div>
                  <div class="px-3 py-5 bg-gradient-warning text-white">.bg-gradient-warning</div>
                  <div class="px-3 py-5 bg-gradient-danger text-white">.bg-gradient-danger</div>
                </div>
              </div>

            </div>

            <!-- Third Column -->
            <div class="col-lg-4">

              <!-- Grayscale Utilities -->
              <div class="card shadow mb-4">
                <div class="card-header py-3">
                  <h6 class="m-0 font-weight-bold text-primary">Custom Grayscale Background Utilities</h6>
                </div>
                <div class="card-body">
                  <div class="p-3 bg-gray-100">.bg-gray-100</div>
                  <div class="p-3 bg-gray-200">.bg-gray-200</div>
                  <div class="p-3 bg-gray-300">.bg-gray-300</div>
                  <div class="p-3 bg-gray-400">.bg-gray-400</div>
                  <div class="p-3 bg-gray-500 text-white">.bg-gray-500</div>
                  <div class="p-3 bg-gray-600 text-white">.bg-gray-600</div>
                  <div class="p-3 bg-gray-700 text-white">.bg-gray-700</div>
                  <div class="p-3 bg-gray-800 text-white">.bg-gray-800</div>
                  <div class="p-3 bg-gray-900 text-white">.bg-gray-900</div>
                </div>
              </div>
            </div>

          </div>

        </div>
        <!-- /.container-fluid -->

      </div>
      <!-- End of Main Content -->

      <!-- Footer -->
      <footer class="sticky-footer bg-white">
        <div class="container my-auto">
          <div class="copyright text-center my-auto">
            <span>Copyright &copy; Your Website 2019</span>
          </div>
        </div>
      </footer>
      <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

  </div>
  <!-- End of Page Wrapper -->

  <!-- Scroll to Top Button-->
  <a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
  </a>

  <!-- Bootstrap core JavaScript-->
  <script src="static/vendor/jquery/jquery.min.js"></script>
  <script src="static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Core plugin JavaScript-->
  <script src="static/vendor/jquery-easing/jquery.easing.min.js"></script>

  <!-- Custom scripts for all pages-->
  <script src="static/js/sb-admin-2.min.js"></script>

</body>

</html>
