.text-blue {
  color: #0000FF;
}

.text-red {
  color: #FF0000;
}

.text-black {
  color: #000000;
}

.form-control-w30 {
	width: 30%;
}

.form-control-w60 {
	width: 60%;
}

.form-control-w70 {
	width: 70%;
}

.mt-10p {
  margin-top: 10%;
}

.mt-20p {
  margin-top: 20%;
}

.mt-30p {
  margin-top: 30%;
}

.mt-40p {
  margin-top: 40%;
}

.mt-30vh {
  margin-top: 30vh;
}

.mt-40vh {
  margin-top: 40vh;
}

.w-10p {
  width: 10% !important;
}

.w-12p {
  width: 12% !important;
}

.w-15p {
  width: 15% !important;
}

.w-20p {
  width: 20% !important;
}

.w-25p {
  width: 25% !important;
}

.w-30p {
  width: 30% !important;
}

.w-33p {
  width: 33% !important;
}

.w-40p {
  width: 40% !important;
}

.w-50p {
  width: 50% !important;
}

.w-60p {
  width: 60% !important;
}

.w-70p {
  width: 70% !important;
}

.w-80p {
  width: 80% !important;
}

.w-90p {
  width: 90% !important;
}

.top-5p {
  top: 5% !important;
}

.top-10p {
  top: 10% !important;
}

.top-20p {
  top: 20% !important;
}

.top-30p {
  top: 30% !important;
}

.top-40p {
  top: 40% !important;
}

.top-60p {
  top: 60% !important;
}

.top-70p {
  top: 70% !important;
}

.top-80p {
  top: 80% !important;
}

.top-90p {
  top: 90% !important;
}

.bottom-10p {
  bottom: 10% !important;
}

.bottom-20p {
  bottom: 20% !important;
}

.bottom-30p {
  bottom: 30% !important;
}

.bottom-40p {
  bottom: 40% !important;
}

.bottom-60p {
  bottom: 60% !important;
}

.bottom-70p {
  bottom: 70% !important;
}

.bottom-80p {
  bottom: 80% !important;
}

.bottom-90p {
  bottom: 90% !important;
}

.start-5p {
  left: 5% !important;
}

.start-10p {
  left: 10% !important;
}

.start-20p {
  left: 20% !important;
}

.start-30p {
  left: 30% !important;
}

.start-40p {
  left: 40% !important;
}

.start-60p {
  left: 60% !important;
}

.start-70p {
  left: 70% !important;
}

.start-80p {
  left: 80% !important;
}

.start-90p {
  left: 90% !important;
}

.start-95p {
  left: 95% !important;
}

.end-10p {
  right: 10% !important;
}

.end-20p {
  right: 20% !important;
}

.end-30p {
  right: 30% !important;
}

.end-40p {
  right: 40% !important;
}

.end-60p {
  right: 60% !important;
}

.end-70p {
  right: 70% !important;
}

.end-80p {
  right: 80% !important;
}

.end-90p {
  right: 90% !important;
}

.z-index-9999 {
  z-index: 9999 !important;
}

.mb-10p {
  margin-bottom: 10px !important;
}

.list-decimal-leading-zero {
  list-style-type: decimal-leading-zero !important;
}

.list-group-disc {
  list-style-type: none;
  counter-reset: section;
}  

.list-group-disc>li::before {
  content: counter(section, disc);
  font-size: 1.5rem;
  margin-right: 0.5rem;
  line-height: normal;  
}  

.list-group-cjk-ideographic {
  list-style-type: none;
  counter-reset: section;
}
.list-group-cjk-ideographic>li::before {
  content: counter(section, cjk-ideographic) "、";
  counter-increment: section;
}


@media (max-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }

  .row-cols-xs-auto > * {
    flex: 0 0 auto;
    width: auto;
  }

  .row-cols-xs-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xs-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xs-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xs-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xs-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }

  .row-cols-xs-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }

  .col-xs-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .col-xs-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }

  .col-xs-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }

  .col-xs-3 {
    flex: 0 0 auto;
    width: 25%;
  }

  .col-xs-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }

  .col-xs-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }

  .col-xs-6 {
    flex: 0 0 auto;
    width: 50%;
  }

  .col-xs-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }

  .col-xs-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }

  .col-xs-9 {
    flex: 0 0 auto;
    width: 75%;
  }

  .col-xs-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }

  .col-xs-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }

  .col-xs-12 {
    flex: 0 0 auto;
    width: 100%;
  }

  .offset-xs-0 {
    margin-left: 0;
  }

  .offset-xs-1 {
    margin-left: 8.33333333%;
  }

  .offset-xs-2 {
    margin-left: 16.66666667%;
  }

  .offset-xs-3 {
    margin-left: 25%;
  }

  .offset-xs-4 {
    margin-left: 33.33333333%;
  }

  .offset-xs-5 {
    margin-left: 41.66666667%;
  }

  .offset-xs-6 {
    margin-left: 50%;
  }

  .offset-xs-7 {
    margin-left: 58.33333333%;
  }

  .offset-xs-8 {
    margin-left: 66.66666667%;
  }

  .offset-xs-9 {
    margin-left: 75%;
  }

  .offset-xs-10 {
    margin-left: 83.33333333%;
  }

  .offset-xs-11 {
    margin-left: 91.66666667%;
  }

  .g-xs-0,
.gx-xs-0 {
    --bs-gutter-x: 0;
  }

  .g-xs-0,
.gy-xs-0 {
    --bs-gutter-y: 0;
  }

  .g-xs-1,
.gx-xs-1 {
    --bs-gutter-x: 0.25rem;
  }

  .g-xs-1,
.gy-xs-1 {
    --bs-gutter-y: 0.25rem;
  }

  .g-xs-2,
.gx-xs-2 {
    --bs-gutter-x: 0.5rem;
  }

  .g-xs-2,
.gy-xs-2 {
    --bs-gutter-y: 0.5rem;
  }

  .g-xs-3,
.gx-xs-3 {
    --bs-gutter-x: 1rem;
  }

  .g-xs-3,
.gy-xs-3 {
    --bs-gutter-y: 1rem;
  }

  .g-xs-4,
.gx-xs-4 {
    --bs-gutter-x: 1.5rem;
  }

  .g-xs-4,
.gy-xs-4 {
    --bs-gutter-y: 1.5rem;
  }

  .g-xs-5,
.gx-xs-5 {
    --bs-gutter-x: 3rem;
  }

  .g-xs-5,
.gy-xs-5 {
    --bs-gutter-y: 3rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 3640px) {
  /* line 1138, ../../SAIFUL/Running_project/250 eCommerce_HTML/250 eCommerce_HTML/250 eCommerce_HTML/assets/scss/_common.scss */
  .container {
    max-width: 1170px;
  }
}