html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
            background: #eeeceb;
        }

        main {
            flex: 1;
        }

        .navbar {
            border-bottom: 1px solid #e9ecef;
            background: #fff;
        }

        footer {
            border-top: 1px solid #e9ecef;
            background: #fafafa;
        }

        #txtSearch {
          color:#777;
        }

        .search-demo {
  max-width: 820px;
  margin: 0 auto;
}

#txtSearch {
  box-shadow: none;
}

.demo-result {
  background: #ffffff;
  border: 1px solid #e7e7ec;
  border-radius: 18px;
  padding: 22px;
  text-align: left;
  box-shadow: 0 18px 50px rgba(20, 20, 40, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.demo-result.show {
  opacity: 1;
  transform: translateY(0);
}

.demo-result-badge {
  display: inline-block;
  background: #6BA029;
  color: #eee;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 12px;
}

.demo-result-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.demo-result-meta {
  color: #777783;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.demo-result-excerpt {
  color: #40404a;
  line-height: 1.6;
  margin-bottom: 16px;
}

.demo-result-link {
  color: #6BA029;
  font-weight: 700;
  text-decoration: none;
}

.demo-result-link:hover {
  text-decoration: underline;
}

.searching-dots::after {
  content: "";
  animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}