form div.required label:before {
  content: "* ";
  color: red;
  font-size: 100%;
  vertical-align: top;
}

.help-block {
  color: #dc3545;
  margin-top: 5px;
}

.cs_pointer {
  cursor: pointer !important;
}

.bg-warning-soft {
  background-color: #fcf8e3;
}

.bg-secondary-soft {
  background-color: #c7c5c544 !important;
}

.btn-success-soft {
  color: #008974 !important;
  background-color: rgba(0, 162, 138, .08) !important;
  border-color: transparent !important;
}

.btn-success-soft:hover {
  color: #008974 !important;
  background-color: rgba(0, 162, 138, .12) !important;
  box-shadow: none !important;
}

.btn-primary-soft {
  color: #01678f !important;
  background-color: rgba(1, 121, 168, .08) !important;
  border-color: transparent !important;
}

.btn-primary-soft:hover {
  color: #01678f !important;
  background-color: rgba(1, 121, 168, .12) !important;
  box-shadow: none !important;
}

.btn.btn-icon.rounded-circle {
  width: 30px;
  height: 30px;
  padding: 5px;
  margin-right: 5px;
  margin-bottom: 0px;
}

.search-flex input,
.search-flex select {
  width: 250px;
}

table .grid-serial {
  width: 30px;
}

table .grid-updated-at,
table .grid-updated-by {
  width: 200px;
}

table .grid-status {
  width: 60px;
}

table .grid-action {
  width: 150px;
}

/* site */
.card-img-full img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-hoverable {
  transition: all 0.5s ease;
}

.image-hoverable:hover,
.image-hoverable-container:hover img,
.product-item-image:hover img,
.first-blog-item:hover img {
  transform: scale(1.1);
  cursor: pointer;
}

.card-image-hoverable:hover .image-hoverable {
  transform: scale(1.1);
  cursor: pointer;
}

.bg-none {
  background: none !important;
}

.rounded-sm {
  border-radius: .25rem !important;
}

.rounded-y-sm {
  border-radius: .25rem 0 0 .25rem !important;
}

.sh-sm {
  box-shadow: 0 0 0 1px rgba(20, 20, 31, .05), 0 1px 3px 0 rgba(20, 20, 31, .05) !important;
}

.tag-link {
  color: #000;
}

.tag-link:hover {
  color: #000;
  text-decoration: underline;
}

.contain-hover-policy {
  position: relative;
}

.contain-hover-policy .content-item {
  display: none;
  position: absolute;
  bottom: 100%;
  right: 0;
  width: 400px;
  z-index: 10;


}

.contain-hover-policy .policy-item:hover+.content-item {
  display: block;
}