html,
body {
  width: 100%;
  height: 100%;
}

#main {
  margin-top: 70px;
  min-height: calc(100vh - 409px);
}

html,
body,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Kanit', sans-serif !important;
}

table th,
table td {
    white-space: nowrap;
}

.text-right {
  text-align: right;
}

.search form {
  margin-bottom: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
  text-align: left;
}

.search form input[type="text"] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

.search form input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #47b2e4;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.search form input[type="submit"]:hover {
  background: #209dd8;
}

.btn-main {
  color: #fff !important;
  background-color: #3D3C42 !important;
  border-color: #3D3C42 !important;
}
.btn-main:hover {
  color: #fff !important;
  background-color: #7F5283 !important;
  border-color: #7F5283 !important;
}
.btn-main:active, .btn-main:focus {
  opacity: 0.7;
  color: #fff !important;
  background-color: #3D3C42 !important;
  border-color: #3D3C42 !important;
}

.btn-sub {
  color: #fff !important;
  background-color: #7F5283 !important;
  border-color: #7F5283 !important;
}
.btn-sub:hover {
  color: #fff !important;
  background-color: #3D3C42 !important;
  border-color: #3D3C42 !important;
}
.btn-sub:active, .btn-sub:focus {
  opacity: 0.7;
  color: #fff !important;
  background-color: #7F5283 !important;
  border-color: #7F5283 !important;
}

.pricing .featured {
  border-top-color: #3D3C42;
}

.pricing h3,
#footer .footer-top .footer-contact h3,
.services .icon-box h4 a,
.section-title h2 {
  color: #3D3C42;
  font-weight: 700;
}

.pricing h4 span,
.nav-link,
.services .icon-box .icon i,
.services .icon-box h4 a:hover,
.services .icon-box:hover h4 a {
  color: #7F5283;
}

#header.header-scrolled, #header.header-inner-pages,
.nav-pills .nav-link.active,
#footer,
#footer .footer-top .social-links a {
  background: #3D3C42;
}

#footer .footer-top {
  background: #7F5283;
  color: #fff;
}

#footer .footer-top h4,
.nav-link:hover {
  color: #3D3C42;
}

#footer .footer-top .footer-contact p {
  color: #fff;
}

.section-title h2::after {
  background-color: #7F5283;
}

.order-image-detail {
  max-height: 250px;
  max-width: 100%;
}

.order-table-image {
  height: 50px;
  width: 50px;
  object-fit: cover;
}

.small-box {
  border-radius: .25rem;
  box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
  display: block;
  position: relative;
}
.small-box>.inner {
  padding: 10px;
}
.small-box h3, .small-box p {
  z-index: 5;
}
.small-box h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  padding: 0;
  white-space: nowrap;
}
.small-box p {
  font-size: 1rem;
}
.small-box .icon {
  color: rgba(0,0,0,.15);
  z-index: 0;
}
.small-box .icon>i.fa, .small-box .icon>i.fab, .small-box .icon>i.far, .small-box .icon>i.fas, .small-box .icon>i.glyphicon, .small-box .icon>i.ion {
  font-size: 70px;
  top: 20px;
}
.small-box .icon>i {
  font-size: 90px;
  position: absolute;
  right: 15px;
  top: 15px;
  transition: all .3s linear;
}
.small-box>.small-box-footer {
  background: rgba(0,0,0,.1);
  color: rgba(255,255,255,.8);
  display: block;
  padding: 3px 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  z-index: 10;
}

.bg-green {
  background-color: #1ab117;
  color: #fff;
}
.bg-red {
  background-color: #db371f;
  color: #fff;
}
.text-green {
  color: #1ab117;
}
.text-red {
  color: #db371f;
}

.card-invoice .btn {
  min-height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-invoice .badge {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination .page-link {
  color: #7F5283 !important;
  background-color: #fff !important;
  border-color: #dee2e6 !important;
}
.pagination .page-item.active .page-link {
  color: #fff !important;
  background-color: #7F5283 !important;
  border-color: #7F5283 !important;
}
.pagination .page-link:hover {
  color: #fff !important;
  background-color: #7F5283 !important;
  border-color: #7F5283 !important;
  opacity: 0.8;
}