/* ================================================== */
/*  @Name: Style                                      */
/*  @Author: Cherry.liu                               */
/* ================================================== */
/* ================================================== */
/*  @Name: Basic                                      */
/*  @Author: Cherry.liu                               */
/* ================================================== */
/* Reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0 none;
  font-weight: normal;
  font-style: normal;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

:focus {
  outline: 0 none;
  box-shadow: none;
}

a, a:link, a:visited, a:hover, a:active {
  outline: 0;
  text-decoration: none;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Scrollbar  */
::-webkit-scrollbar {
  width: 8px;
  height: 5px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 1px solid transparent;
}

::-webkit-scrollbar-track {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15) inset;
}

::-webkit-scrollbar-thumb {
  min-height: 20px;
  background-clip: content-box;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15) inset;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* ================================================== */
/*  @Name: Reset                                     */
/* ================================================== */
html {
  font-size: 20px;
}

body {
  font-family: "Open Sans", "SF Pro Text", Roboto, Helvetica, Arial, "Helvetica Neue", Tahoma, sans-serif;
  color: var(--bl-font-color-default, var(--bl-font-color-default));
  font-size: 14px;
  font-weight: 400;
  background: #FFFFFF;
}

@media (max-width: 767px) {
  html {
    font-size: 16px;
  }
}
:root {
  /* Color */
  --bl-color-primary-50: #F6FAFA;
  --bl-color-primary-100: #E9F2F3;
  --bl-color-primary-200: #C9E0E1;
  --bl-color-primary-300: #A9CDD1;
  --bl-color-primary-400: #2C909A;
  --bl-color-primary-500: #27818C;
  --bl-color-primary-600: #257783;
  --bl-color-primary-900: #1B5A62;
  --bl-color-info-100: #E8EDF5;
  --bl-color-info-200: #CED8E9;
  --bl-color-info-500: #4469A8;
  --bl-color-info-900: #2E4A75;
  --bl-color-success-100: #E5EFF1;
  --bl-color-success-200: #C9E0E1;
  --bl-color-success-300: #A9CDD1;
  --bl-color-success-400: #2C909A;
  --bl-color-success-500: #27818C;
  --bl-color-success-600: #257783;
  --bl-color-success-900: #1B5A62;
  --bl-color-warning-100: #FCF2E7;
  --bl-color-warning-200: #F8E3CE;
  --bl-color-warning-500: #E8913A;
  --bl-color-warning-900: #855229;
  --bl-color-danger-100: #F7EBE7;
  --bl-color-danger-200: #EED3CB;
  --bl-color-danger-300: #DFB2A5;
  --bl-color-danger-400: #CC6044;
  --bl-color-danger-500: #BD553A;
  --bl-color-danger-600: #B14A30;
  --bl-color-danger-900: #843B28;
  --bl-color-gray-100: #F9F9F9;
  --bl-color-gray-200: #F5F5F5;
  --bl-color-gray-300: #F0F0F0;
  --bl-color-gray-400: #E0E0E0;
  --bl-color-text-300: #CCCCCC;
  --bl-color-text-400: #AAAAAA;
  --bl-color-text-500: #999999;
  --bl-color-text-600: #666666;
  --bl-color-text-900: #333333;
  --bl-font-color-default: var(--bl-color-text-900);
  --bl-font-color-light: var(--bl-color-text-500);
  --bl-font-color-lighter: var(--bl-color-text-300);
  --bl-color-primary-default: var(--bl-color-primary-500);
  --bl-color-info-default: var(--bl-color-info-500);
  --bl-color-success-default: var(--bl-color-success-500);
  --bl-color-danger-default: var(--bl-color-danger-500);
  --bl-color-warning-default: var(--bl-color-warning-500);
  --bl-border-color-default: #E0E0E0;
}

/* ================================================== */
/*  @Name: Gird                                     */
/* ================================================== */
:root {
  --bl-gutter-col: 10px;
  --bl-gutter-row: calc(var(--bl-gutter-col) * (-1));
  --bl-gutter-container: calc(var(--bl-gutter-col) * 2);
  --bl-space: 20px;
  --bl-space-0: 0;
  --bl-space-1: calc(var(--bl-space) * 0.2);
  --bl-space-2: calc(var(--bl-space) * 0.4);
  --bl-space-3: calc(var(--bl-space) * 0.8);
  --bl-space-4: calc(var(--bl-space) * 1.0);
  --bl-space-5: calc(var(--bl-space) * 1.5);
  --bl-space-6: calc(var(--bl-space) * 2.0);
}

.bl-container,
.bl-container-fluid,
.bl-container-sm {
  box-sizing: border-box;
  width: 100%;
  padding-right: var(--bl-gutter-container);
  padding-left: var(--bl-gutter-container);
  margin-right: auto;
  margin-left: auto;
}

.bl-row,
.bl-row-g-0 {
  display: flex;
  flex-wrap: wrap;
}
.bl-row > *,
.bl-row-g-0 > * {
  box-sizing: border-box;
  flex-shrink: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}

.bl-row {
  margin-left: var(--bl-gutter-row);
  margin-right: var(--bl-gutter-row);
}
.bl-row > * {
  padding-left: var(--bl-gutter-col);
  padding-right: var(--bl-gutter-col);
}

@media (min-width: 768px) {
  .bl-container {
    max-width: 720px;
  }
  .bl-container-sm {
    max-width: 720px;
  }
}
@media (min-width: 1200px) {
  .bl-container {
    max-width: 1140px;
  }
}
/* col */
.bl-col {
  flex: 1 0 0%;
}

.bl-col-1 {
  width: calc( 100% / 12 * 1);
}

.bl-col-2 {
  width: calc( 100% / 12 * 2);
}

.bl-col-3 {
  width: calc( 100% / 12 * 3);
}

.bl-col-4 {
  width: calc( 100% / 12 * 4);
}

.bl-col-5 {
  width: calc( 100% / 12 * 5);
}

.bl-col-6 {
  width: calc( 100% / 12 * 6);
}

.bl-col-7 {
  width: calc( 100% / 12 * 7);
}

.bl-col-8 {
  width: calc( 100% / 12 * 8);
}

.bl-col-9 {
  width: calc( 100% / 12 * 9);
}

.bl-col-10 {
  width: calc( 100% / 12 * 10);
}

.bl-col-11 {
  width: calc( 100% / 12 * 11);
}

.bl-col-12 {
  width: calc( 100% / 12 * 12);
}

.bl-col-auto {
  width: auto;
}

.bl-offset-1 {
  margin-left: calc( 100% / 12 * 1);
}

.bl-offset-2 {
  margin-left: calc( 100% / 12 * 2);
}

.bl-offset-3 {
  margin-left: calc( 100% / 12 * 3);
}

.bl-offset-4 {
  margin-left: calc( 100% / 12 * 4);
}

.bl-offset-5 {
  margin-left: calc( 100% / 12 * 5);
}

.bl-offset-6 {
  margin-left: calc( 100% / 12 * 6);
}

.bl-offset-7 {
  margin-left: calc( 100% / 12 * 7);
}

.bl-offset-8 {
  margin-left: calc( 100% / 12 * 8);
}

.bl-offset-9 {
  margin-left: calc( 100% / 12 * 9);
}

.bl-offset-10 {
  margin-left: calc( 100% / 12 * 10);
}

.bl-offset-11 {
  margin-left: calc( 100% / 12 * 11);
}

.bl-offset-12 {
  margin-left: calc( 100% / 12 * 12);
}

@media (max-width: 767px) {
  .bl-col-xs {
    flex: 1 0 0%;
  }
  .bl-col-xs-1 {
    width: calc( 100% / 12 * 1);
  }
  .bl-col-xs-2 {
    width: calc( 100% / 12 * 2);
  }
  .bl-col-xs-3 {
    width: calc( 100% / 12 * 3);
  }
  .bl-col-xs-4 {
    width: calc( 100% / 12 * 4);
  }
  .bl-col-xs-5 {
    width: calc( 100% / 12 * 5);
  }
  .bl-col-xs-6 {
    width: calc( 100% / 12 * 6);
  }
  .bl-col-xs-7 {
    width: calc( 100% / 12 * 7);
  }
  .bl-col-xs-8 {
    width: calc( 100% / 12 * 8);
  }
  .bl-col-xs-9 {
    width: calc( 100% / 12 * 9);
  }
  .bl-col-xs-10 {
    width: calc( 100% / 12 * 10);
  }
  .bl-col-xs-11 {
    width: calc( 100% / 12 * 11);
  }
  .bl-col-xs-12 {
    width: calc( 100% / 12 * 12);
  }
  .bl-col-xs-auto {
    width: auto;
  }
  .bl-offset-xs-1 {
    margin-left: calc( 100% / 12 * 1);
  }
  .bl-offset-xs-2 {
    margin-left: calc( 100% / 12 * 2);
  }
  .bl-offset-xs-3 {
    margin-left: calc( 100% / 12 * 3);
  }
  .bl-offset-xs-4 {
    margin-left: calc( 100% / 12 * 4);
  }
  .bl-offset-xs-5 {
    margin-left: calc( 100% / 12 * 5);
  }
  .bl-offset-xs-6 {
    margin-left: calc( 100% / 12 * 6);
  }
  .bl-offset-xs-7 {
    margin-left: calc( 100% / 12 * 7);
  }
  .bl-offset-xs-8 {
    margin-left: calc( 100% / 12 * 8);
  }
  .bl-offset-xs-9 {
    margin-left: calc( 100% / 12 * 9);
  }
  .bl-offset-xs-10 {
    margin-left: calc( 100% / 12 * 10);
  }
  .bl-offset-xs-11 {
    margin-left: calc( 100% / 12 * 11);
  }
  .bl-offset-xs-12 {
    margin-left: calc( 100% / 12 * 12);
  }
}
@media (min-width: 768px) {
  .bl-col-sm {
    flex: 1 0 0%;
  }
  .bl-col-sm-1 {
    width: calc( 100% / 12 * 1);
  }
  .bl-col-sm-2 {
    width: calc( 100% / 12 * 2);
  }
  .bl-col-sm-3 {
    width: calc( 100% / 12 * 3);
  }
  .bl-col-sm-4 {
    width: calc( 100% / 12 * 4);
  }
  .bl-col-sm-5 {
    width: calc( 100% / 12 * 5);
  }
  .bl-col-sm-6 {
    width: calc( 100% / 12 * 6);
  }
  .bl-col-sm-7 {
    width: calc( 100% / 12 * 7);
  }
  .bl-col-sm-8 {
    width: calc( 100% / 12 * 8);
  }
  .bl-col-sm-9 {
    width: calc( 100% / 12 * 9);
  }
  .bl-col-sm-10 {
    width: calc( 100% / 12 * 10);
  }
  .bl-col-sm-11 {
    width: calc( 100% / 12 * 11);
  }
  .bl-col-sm-12 {
    width: calc( 100% / 12 * 12);
  }
  .bl-col-sm-auto {
    width: auto;
  }
  .bl-offset-sm-1 {
    margin-left: calc( 100% / 12 * 1);
  }
  .bl-offset-sm-2 {
    margin-left: calc( 100% / 12 * 2);
  }
  .bl-offset-sm-3 {
    margin-left: calc( 100% / 12 * 3);
  }
  .bl-offset-sm-4 {
    margin-left: calc( 100% / 12 * 4);
  }
  .bl-offset-sm-5 {
    margin-left: calc( 100% / 12 * 5);
  }
  .bl-offset-sm-6 {
    margin-left: calc( 100% / 12 * 6);
  }
  .bl-offset-sm-7 {
    margin-left: calc( 100% / 12 * 7);
  }
  .bl-offset-sm-8 {
    margin-left: calc( 100% / 12 * 8);
  }
  .bl-offset-sm-9 {
    margin-left: calc( 100% / 12 * 9);
  }
  .bl-offset-sm-10 {
    margin-left: calc( 100% / 12 * 10);
  }
  .bl-offset-sm-11 {
    margin-left: calc( 100% / 12 * 11);
  }
  .bl-offset-sm-12 {
    margin-left: calc( 100% / 12 * 12);
  }
}
/* Display */
.bl-d-inline {
  display: inline !important;
}

.bl-d-inline-block {
  display: inline-block !important;
}

.bl-d-block {
  display: block !important;
}

.bl-d-table {
  display: table !important;
}

.bl-d-table-row {
  display: table-row !important;
}

.bl-d-table-cell {
  display: table-cell !important;
}

.bl-d-flex {
  display: flex !important;
}

.bl-d-inline-flex {
  display: inline-flex !important;
}

.bl-d-none {
  display: none !important;
}

.bl-flex-fill {
  flex: 1 1 auto !important;
}

.bl-flex-row {
  flex-direction: row !important;
}

.bl-flex-column {
  flex-direction: column !important;
}

.bl-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.bl-flex-column-reverse {
  flex-direction: column-reverse !important;
}

.bl-flex-grow-0 {
  flex-grow: 0 !important;
}

.bl-flex-grow-1 {
  flex-grow: 1 !important;
}

.bl-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.bl-flex-shrink-1 {
  flex-shrink: 1 !important;
}

.bl-flex-wrap {
  flex-wrap: wrap !important;
}

.bl-flex-nowrap {
  flex-wrap: nowrap !important;
}

.bl-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

/* align */
.bl-justify-content-start {
  justify-content: flex-start !important;
}

.bl-justify-content-end {
  justify-content: flex-end !important;
}

.bl-justify-content-center {
  justify-content: center !important;
}

.bl-justify-content-between {
  justify-content: space-between !important;
}

.bl-justify-content-around {
  justify-content: space-around !important;
}

.bl-justify-content-evenly {
  justify-content: space-evenly !important;
}

.bl-align-items-start {
  align-items: flex-start !important;
}

.bl-align-items-end {
  align-items: flex-end !important;
}

.bl-align-items-center {
  align-items: center !important;
}

.bl-align-items-baseline {
  align-items: baseline !important;
}

.bl-align-items-stretch {
  align-items: stretch !important;
}

.bl-align-content-start {
  align-content: flex-start !important;
}

.bl-align-content-end {
  align-content: flex-end !important;
}

.bl-align-content-center {
  align-content: center !important;
}

.bl-align-content-between {
  align-content: space-between !important;
}

.bl-align-content-around {
  align-content: space-around !important;
}

.bl-align-content-stretch {
  align-content: stretch !important;
}

.bl-align-self-auto {
  align-self: auto !important;
}

.bl-align-self-start {
  align-self: flex-start !important;
}

.bl-align-self-end {
  align-self: flex-end !important;
}

.bl-align-self-center {
  align-self: center !important;
}

.bl-align-self-baseline {
  align-self: baseline !important;
}

.bl-align-self-stretch {
  align-self: stretch !important;
}

/* order */
.bl-order-first {
  order: -1 !important;
}

.bl-order-0 {
  order: 0 !important;
}

.bl-order-1 {
  order: 1 !important;
}

.bl-order-2 {
  order: 2 !important;
}

.bl-order-3 {
  order: 3 !important;
}

.bl-order-4 {
  order: 4 !important;
}

.bl-order-5 {
  order: 5 !important;
}

.bl-order-last {
  order: 6 !important;
}

@media (max-width: 767px) {
  .bl-d-xs-inline {
    display: inline !important;
  }
  .bl-d-xs-inline-block {
    display: inline-block !important;
  }
  .bl-d-xs-block {
    display: block !important;
  }
  .bl-d-xs-table {
    display: table !important;
  }
  .bl-d-xs-table-row {
    display: table-row !important;
  }
  .bl-d-xs-table-cell {
    display: table-cell !important;
  }
  .bl-d-xs-flex {
    display: flex !important;
  }
  .bl-d-xs-inline-flex {
    display: inline-flex !important;
  }
  .bl-d-xs-none {
    display: none !important;
  }
  .bl-flex-xs-fill {
    flex: 1 1 auto !important;
  }
  .bl-flex-xs-row {
    flex-direction: row !important;
  }
  .bl-flex-xs-column {
    flex-direction: column !important;
  }
  .bl-flex-xs-row-reverse {
    flex-direction: row-reverse !important;
  }
  .bl-flex-xs-column-reverse {
    flex-direction: column-reverse !important;
  }
  .bl-flex-grow-xs-0 {
    flex-grow: 0 !important;
  }
  .bl-flex-grow-xs-1 {
    flex-grow: 1 !important;
  }
  .bl-flex-shrink-xs-0 {
    flex-shrink: 0 !important;
  }
  .bl-flex-shrink-xs-1 {
    flex-shrink: 1 !important;
  }
  .bl-flex-xs-wrap {
    flex-wrap: wrap !important;
  }
  .bl-flex-xs-nowrap {
    flex-wrap: nowrap !important;
  }
  .bl-flex-xs-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .bl-justify-content-xs-start {
    justify-content: flex-start !important;
  }
  .bl-justify-content-xs-end {
    justify-content: flex-end !important;
  }
  .bl-justify-content-xs-center {
    justify-content: center !important;
  }
  .bl-justify-content-xs-between {
    justify-content: space-between !important;
  }
  .bl-justify-content-xs-around {
    justify-content: space-around !important;
  }
  .bl-justify-content-xs-evenly {
    justify-content: space-evenly !important;
  }
  .bl-align-items-xs-start {
    align-items: flex-start !important;
  }
  .bl-align-items-xs-end {
    align-items: flex-end !important;
  }
  .bl-align-items-xs-center {
    align-items: center !important;
  }
  .bl-align-items-xs-baseline {
    align-items: baseline !important;
  }
  .bl-align-items-xs-stretch {
    align-items: stretch !important;
  }
  .bl-align-content-xs-start {
    align-content: flex-start !important;
  }
  .bl-align-content-xs-end {
    align-content: flex-end !important;
  }
  .bl-align-content-xs-center {
    align-content: center !important;
  }
  .bl-align-content-xs-between {
    align-content: space-between !important;
  }
  .bl-align-content-xs-around {
    align-content: space-around !important;
  }
  .bl-align-content-xs-stretch {
    align-content: stretch !important;
  }
  .bl-align-self-xs-auto {
    align-self: auto !important;
  }
  .bl-align-self-xs-start {
    align-self: flex-start !important;
  }
  .bl-align-self-xs-end {
    align-self: flex-end !important;
  }
  .bl-align-self-xs-center {
    align-self: center !important;
  }
  .bl-align-self-xs-baseline {
    align-self: baseline !important;
  }
  .bl-align-self-xs-stretch {
    align-self: stretch !important;
  }
  .bl-order-xs-first {
    order: -1 !important;
  }
  .bl-order-xs-0 {
    order: 0 !important;
  }
  .bl-order-xs-1 {
    order: 1 !important;
  }
  .bl-order-xs-2 {
    order: 2 !important;
  }
  .bl-order-xs-3 {
    order: 3 !important;
  }
  .bl-order-xs-4 {
    order: 4 !important;
  }
  .bl-order-xs-5 {
    order: 5 !important;
  }
  .bl-order-xs-last {
    order: 6 !important;
  }
}
/* Margin & Padding */
.bl-mt-0 {
  margin-top: var(--bl-space-0) !important;
}

.bl-mr-0 {
  margin-right: var(--bl-space-0) !important;
}

.bl-mb-0 {
  margin-bottom: var(--bl-space-0) !important;
}

.bl-ml-0 {
  margin-left: var(--bl-space-0) !important;
}

.bl-m-0 {
  margin: var(--bl-space-0) !important;
}

.bl-mx-0 {
  margin-left: var(--bl-space-0) !important;
  margin-right: var(--bl-space-0) !important;
}

.bl-my-0 {
  margin-top: var(--bl-space-0) !important;
  margin-bottom: var(--bl-space-0) !important;
}

.bl-mt-1 {
  margin-top: var(--bl-space-1) !important;
}

.bl-mr-1 {
  margin-right: var(--bl-space-1) !important;
}

.bl-mb-1 {
  margin-bottom: var(--bl-space-1) !important;
}

.bl-ml-1 {
  margin-left: var(--bl-space-1) !important;
}

.bl-m-1 {
  margin: var(--bl-space-1) !important;
}

.bl-mx-1 {
  margin-left: var(--bl-space-1) !important;
  margin-right: var(--bl-space-1) !important;
}

.bl-my-1 {
  margin-top: var(--bl-space-1) !important;
  margin-bottom: var(--bl-space-1) !important;
}

.bl-mt-2 {
  margin-top: var(--bl-space-2) !important;
}

.bl-mr-2 {
  margin-right: var(--bl-space-2) !important;
}

.bl-mb-2 {
  margin-bottom: var(--bl-space-2) !important;
}

.bl-ml-2 {
  margin-left: var(--bl-space-2) !important;
}

.bl-m-2 {
  margin: var(--bl-space-2) !important;
}

.bl-mx-2 {
  margin-left: var(--bl-space-2) !important;
  margin-right: var(--bl-space-2) !important;
}

.bl-my-2 {
  margin-top: var(--bl-space-2) !important;
  margin-bottom: var(--bl-space-2) !important;
}

.bl-mt-3 {
  margin-top: var(--bl-space-3) !important;
}

.bl-mr-3 {
  margin-right: var(--bl-space-3) !important;
}

.bl-mb-3 {
  margin-bottom: var(--bl-space-3) !important;
}

.bl-ml-3 {
  margin-left: var(--bl-space-3) !important;
}

.bl-m-3 {
  margin: var(--bl-space-3) !important;
}

.bl-mx-3 {
  margin-left: var(--bl-space-3) !important;
  margin-right: var(--bl-space-3) !important;
}

.bl-my-3 {
  margin-top: var(--bl-space-3) !important;
  margin-bottom: var(--bl-space-3) !important;
}

.bl-mt-4 {
  margin-top: var(--bl-space-4) !important;
}

.bl-mr-4 {
  margin-right: var(--bl-space-4) !important;
}

.bl-mb-4 {
  margin-bottom: var(--bl-space-4) !important;
}

.bl-ml-4 {
  margin-left: var(--bl-space-4) !important;
}

.bl-m-4 {
  margin: var(--bl-space-4) !important;
}

.bl-mx-4 {
  margin-left: var(--bl-space-4) !important;
  margin-right: var(--bl-space-4) !important;
}

.bl-my-4 {
  margin-top: var(--bl-space-4) !important;
  margin-bottom: var(--bl-space-4) !important;
}

.bl-mt-5 {
  margin-top: var(--bl-space-5) !important;
}

.bl-mr-5 {
  margin-right: var(--bl-space-5) !important;
}

.bl-mb-5 {
  margin-bottom: var(--bl-space-5) !important;
}

.bl-ml-5 {
  margin-left: var(--bl-space-5) !important;
}

.bl-m-5 {
  margin: var(--bl-space-5) !important;
}

.bl-mx-5 {
  margin-left: var(--bl-space-5) !important;
  margin-right: var(--bl-space-5) !important;
}

.bl-my-5 {
  margin-top: var(--bl-space-5) !important;
  margin-bottom: var(--bl-space-5) !important;
}

.bl-mt-6 {
  margin-top: var(--bl-space-6) !important;
}

.bl-mr-6 {
  margin-right: var(--bl-space-6) !important;
}

.bl-mb-6 {
  margin-bottom: var(--bl-space-6) !important;
}

.bl-ml-6 {
  margin-left: var(--bl-space-6) !important;
}

.bl-m-6 {
  margin: var(--bl-space-6) !important;
}

.bl-mx-6 {
  margin-left: var(--bl-space-6) !important;
  margin-right: var(--bl-space-6) !important;
}

.bl-my-6 {
  margin-top: var(--bl-space-6) !important;
  margin-bottom: var(--bl-space-6) !important;
}

.bl-mt-auto {
  margin-top: auto !important;
}

.bl-mr-auto {
  margin-right: auto !important;
}

.bl-mb-auto {
  margin-bottom: auto !important;
}

.bl-ml-auto {
  margin-left: auto !important;
}

.bl-m-auto {
  margin: auto !important;
}

.bl-mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

.bl-my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.bl-pt-0 {
  padding-top: var(--bl-space-0) !important;
}

.bl-pr-0 {
  padding-right: var(--bl-space-0) !important;
}

.bl-pb-0 {
  padding-bottom: var(--bl-space-0) !important;
}

.bl-pl-0 {
  padding-left: var(--bl-space-0) !important;
}

.bl-p-0 {
  padding: var(--bl-space-0) !important;
}

.bl-px-0 {
  padding-left: var(--bl-space-0) !important;
  padding-right: var(--bl-space-0) !important;
}

.bl-py-0 {
  padding-top: var(--bl-space-0) !important;
  padding-bottom: var(--bl-space-0) !important;
}

.bl-pt-1 {
  padding-top: var(--bl-space-1) !important;
}

.bl-pr-1 {
  padding-right: var(--bl-space-1) !important;
}

.bl-pb-1 {
  padding-bottom: var(--bl-space-1) !important;
}

.bl-pl-1 {
  padding-left: var(--bl-space-1) !important;
}

.bl-p-1 {
  padding: var(--bl-space-1) !important;
}

.bl-px-1 {
  padding-left: var(--bl-space-1) !important;
  padding-right: var(--bl-space-1) !important;
}

.bl-py-1 {
  padding-top: var(--bl-space-1) !important;
  padding-bottom: var(--bl-space-1) !important;
}

.bl-pt-2 {
  padding-top: var(--bl-space-2) !important;
}

.bl-pr-2 {
  padding-right: var(--bl-space-2) !important;
}

.bl-pb-2 {
  padding-bottom: var(--bl-space-2) !important;
}

.bl-pl-2 {
  padding-left: var(--bl-space-2) !important;
}

.bl-p-2 {
  padding: var(--bl-space-2) !important;
}

.bl-px-2 {
  padding-left: var(--bl-space-2) !important;
  padding-right: var(--bl-space-2) !important;
}

.bl-py-2 {
  padding-top: var(--bl-space-2) !important;
  padding-bottom: var(--bl-space-2) !important;
}

.bl-pt-3 {
  padding-top: var(--bl-space-3) !important;
}

.bl-pr-3 {
  padding-right: var(--bl-space-3) !important;
}

.bl-pb-3 {
  padding-bottom: var(--bl-space-3) !important;
}

.bl-pl-3 {
  padding-left: var(--bl-space-3) !important;
}

.bl-p-3 {
  padding: var(--bl-space-3) !important;
}

.bl-px-3 {
  padding-left: var(--bl-space-3) !important;
  padding-right: var(--bl-space-3) !important;
}

.bl-py-3 {
  padding-top: var(--bl-space-3) !important;
  padding-bottom: var(--bl-space-3) !important;
}

.bl-pt-4 {
  padding-top: var(--bl-space-4) !important;
}

.bl-pr-4 {
  padding-right: var(--bl-space-4) !important;
}

.bl-pb-4 {
  padding-bottom: var(--bl-space-4) !important;
}

.bl-pl-4 {
  padding-left: var(--bl-space-4) !important;
}

.bl-p-4 {
  padding: var(--bl-space-4) !important;
}

.bl-px-4 {
  padding-left: var(--bl-space-4) !important;
  padding-right: var(--bl-space-4) !important;
}

.bl-py-4 {
  padding-top: var(--bl-space-4) !important;
  padding-bottom: var(--bl-space-4) !important;
}

.bl-pt-5 {
  padding-top: var(--bl-space-5) !important;
}

.bl-pr-5 {
  padding-right: var(--bl-space-5) !important;
}

.bl-pb-5 {
  padding-bottom: var(--bl-space-5) !important;
}

.bl-pl-5 {
  padding-left: var(--bl-space-5) !important;
}

.bl-p-5 {
  padding: var(--bl-space-5) !important;
}

.bl-px-5 {
  padding-left: var(--bl-space-5) !important;
  padding-right: var(--bl-space-5) !important;
}

.bl-py-5 {
  padding-top: var(--bl-space-5) !important;
  padding-bottom: var(--bl-space-5) !important;
}

.bl-pt-6 {
  padding-top: var(--bl-space-6) !important;
}

.bl-pr-6 {
  padding-right: var(--bl-space-6) !important;
}

.bl-pb-6 {
  padding-bottom: var(--bl-space-6) !important;
}

.bl-pl-6 {
  padding-left: var(--bl-space-6) !important;
}

.bl-p-6 {
  padding: var(--bl-space-6) !important;
}

.bl-px-6 {
  padding-left: var(--bl-space-6) !important;
  padding-right: var(--bl-space-6) !important;
}

.bl-py-6 {
  padding-top: var(--bl-space-6) !important;
  padding-bottom: var(--bl-space-6) !important;
}

/* ================================================== */
/*  @Name: Button                                     */
/* ================================================== */
:root {
  --bl-btn-py: var(--bl-control-py-default, 11px);
  --bl-btn-px: var(--bl-control-px-default, 16px);
  --bl-btn-font-size: var(--bl-control-font-size-default, 14px);
  --bl-btn-line-height: var(--bl-control-line-height-default, 20px);
  --bl-btn-border-width: var(--bl-control-border-width-default, 1px);
  --bl-btn-radius: var(--bl-control-radius-default, 0px);
  --bl-btn-color-default: #FFFFFF;
  --bl-btn-bg-default: transparent;
  --bl-btn-border-color-default: transparent;
  --bl-btn-color-hover: #FFFFFF;
  --bl-btn-bg-hover: transparent;
  --bl-btn-border-color-hover: transparent;
  --bl-btn-color-active: #FFFFFF;
  --bl-btn-bg-active: transparent;
  --bl-btn-border-color-active: transparent;
  --bl-btn-color-disabled: #FFFFFF;
  --bl-btn-bg-disabled: transparent;
  --bl-btn-border-color-disabled: transparent;
}

/* Reset */
button,
input[type=button] {
  border: var(--bl-btn-border-width) solid transparent;
  outline: 0;
  box-shadow: none;
}
button:hover, button:focus, button:active,
input[type=button]:hover,
input[type=button]:focus,
input[type=button]:active {
  border: var(--bl-btn-border-width) solid transparent;
  outline: 0;
  box-shadow: none;
}

a.bl-btn {
  text-decoration: none;
}

/* Base */
.bl-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: var(--bl-btn-py) var(--bl-btn-px);
  font-size: var(--bl-btn-font-size);
  text-align: center;
  line-height: var(--bl-btn-line-height);
  border-width: var(--bl-btn-border-width);
  border-style: solid;
  color: var(--bl-btn-color-default);
  background-color: var(--bl-btn-bg-default);
  border-color: var(--bl-btn-border-color-default);
  gap: var(--bl-btn-content-space);
  border-radius: var(--bl-btn-radius);
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.05s ease-out, -webkit-transform 0.05s ease-out, -o-transform 0.05s ease-out;
  transition: box-shadow 0.05s ease-out, -webkit-box-shadow 0.05s ease-out, -o-box-shadow 0.05s ease-out;
}
.bl-btn:hover {
  color: var(--bl-btn-color-hover);
  background-color: var(--bl-btn-bg-hover);
  border-color: var(--bl-btn-border-color-hover);
  transform: translateY(-1px);
}
.bl-btn:focus, .bl-btn:active, .bl-btn.bl-active {
  color: var(--bl-btn-color-active);
  background-color: var(--bl-btn-bg-active);
  border-color: var(--bl-btn-border-color-active);
}
.bl-btn:active {
  transform: translateY(0);
}
.bl-btn:disabled, .bl-btn.bl-disabled {
  color: var(--bl-btn-color-disabled);
  background-color: var(--bl-btn-bg-disabled);
  border-color: var(--bl-btn-border-color-disabled);
  cursor: not-allowed;
}

.bl-btn:is(.bl-d-flex, .bl-d-block) {
  width: 100% !important;
}

@media (max-width: 767px) {
  .bl-btn:is(.bl-btn-xs-block) {
    width: 100% !important;
  }
}
/* Type */
.bl-btn-primary {
  --bl-btn-bg-default: var(--bl-color-primary-default, #27818C);
  --bl-btn-bg-hover: var(--bl-color-primary-400, #2C909A);
  --bl-btn-bg-active: var(--bl-color-primary-600, #257783);
  --bl-btn-bg-disabled: var(--bl-color-primary-300, #A9CDD1);
}

.bl-btn-secondary {
  --bl-btn-color-default: var(--bl-font-color-default, var(--bl-font-color-default));
  --bl-btn-border-color-default: var(--bl-border-color-default, #E0E0E0);
  --bl-btn-color-hover: var(--bl-btn-color-default);
  --bl-btn-bg-hover: var(--bl-color-gray-100, #F9F9F9);
  --bl-btn-border-color-hover: var(--bl-font-color-default, var(--bl-font-color-default));
  --bl-btn-color-active: var(--bl-btn-color-default);
  --bl-btn-bg-active: var(--bl-color-gray-300, #F0F0F0);
  --bl-btn-border-color-active: var(--bl-border-color-default,, #E0E0E0);
  --bl-btn-color-disabled: var(--bl-color-text-300, #AAAAAA);
  --bl-btn-bg-disabled: var(--bl-color-gray-400, #E0E0E0);
  --bl-btn-border-color-disabled: var(--bl-border-color-default, #E0E0E0);
}

/* ================================================== */
/*  @Name: Form                                       */
/* ================================================== */
:root {
  --bl-control-mb: var(--bl-control-mb-default, 20px);
  --bl-control-py: var(--bl-control-py-default, 11px);
  --bl-control-px: var(--bl-control-px-default, 16px);
  --bl-control-font-size: var(--bl-control-font-size-default, 14px);
  --bl-control-line-height: var(--bl-control-line-height-default, 20px);
  --bl-control-radius: var(--bl-control-radius-default, 0px);
  --bl-control-textarea: var(--bl-control-textarea-default, 100px);
  --bl-control-border-width: var(--bl-border-width-default, 1px);
  --bl-control-color-placehoder: var(--bl-color-text-400, #AAAAAA);
  --bl-control-color: var(--bl-font-color-default, #333333);
  --bl-control-bg: var(--bl-control-bg-default, #FFFFFF);
  --bl-control-border-color: var(--bl-border-color-default, #E0E0E0);
  --bl-input-group-addon-bg: var(--bl-control-bg);
  --bl-form-label-mb: var(--bl-form-label-mb-default, 8px);
  --bl-form-label-height: var(--bl-form-label-height-default, 28px);
  --bl-suspend-operate-item-mx: 4px;
}

/* Reset */
input::-o-input-placeholder,
input::-ms-input-placeholder,
input::-moz-placeholder,
input::-webkit-input-placeholder,
textarea::-o-input-placeholder,
textarea::-ms-input-placeholder,
textarea::-moz-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--bl-control-color-placehoder);
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: transparent !important;
  background-image: none;
  color: var(--bl-control-color-placehoder);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
}

.bl-form-control {
  margin: 0;
  padding: 0;
  border-width: var(--bl-control-border-width);
  border-style: solid;
  outline: 0 none;
  font-family: inherit;
  vertical-align: baseline;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  box-shadow: none;
}
.bl-form-control:focus {
  outline: 0 none;
  box-shadow: none;
}

/* Base */
.bl-form-group {
  position: relative;
  margin-bottom: var(--bl-control-mb);
}

.bl-form-label {
  font-size: var(--bl-control-font-size);
  line-height: var(--bl-control-line-height);
  margin-bottom: var(--bl-form-label-mb);
}

.bl-form-control-box {
  position: relative;
  width: 100%;
}
.bl-form-control-box .bl-suspend-operate-warp .bl-iconfont, .bl-form-control-box .bl-suspend-operate-warp .bl-iconbase {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: var(--bl-control-font-size);
}
.bl-form-control-box .bl-suspend-operate-warp .bl-select-arrow .bl-iconbase {
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out, -o-transform 0.3s ease-out;
}
.bl-form-control-box .bl-form-control:is(:focus, .bl-active) + .bl-suspend-operate-warp .bl-select-arrow .bl-iconbase {
  transform: rotate(-180deg);
}

.bl-form-control {
  width: 100%;
  padding: var(--bl-control-py) var(--bl-control-px);
  font-size: var(--bl-control-font-size);
  line-height: var(--bl-control-line-height);
  border-radius: var(--bl-control-radius);
  color: var(--bl-control-color);
  background: var(--bl-control-bg);
  border-color: var(--bl-control-border-color);
}

/* Color */
.bl-form-control:is(:focus, .bl-active),
.bl-form-control:is(:focus, .bl-active) + .bl-suspend-operate-warp {
  --bl-control-color: var(--bl-font-color-default, #333333);
  --bl-control-bg: var(--bl-control-bg-focus, #FFFFFF);
  --bl-control-border-color: var(--bl-border-color-focus, #27818C);
}

.bl-form-control:is(:disabled, .bl-disabled),
.bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp {
  --bl-control-color: var(--bl-color-text-400, #AAAAAA);
  --bl-control-bg: var(--bl-color-gray-200, #F5F5F5);
  --bl-control-border-color: var(--bl-border-color-default, #E0E0E0);
  cursor: not-allowed;
}
.bl-form-control:is(:disabled, .bl-disabled) + .bl-iconbase, .bl-form-control:is(:disabled, .bl-disabled) + .bl-iconfont, .bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp .bl-iconbase, .bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp .bl-iconfont,
.bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp + .bl-iconbase,
.bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp + .bl-iconfont,
.bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp + .bl-suspend-operate-warp .bl-iconbase,
.bl-form-control:is(:disabled, .bl-disabled) + .bl-suspend-operate-warp + .bl-suspend-operate-warp .bl-iconfont {
  color: var(--bl-control-color-disabled);
}

.bl-has-error .bl-form-control {
  --bl-control-color: var(--bl-control-color-error: #333333);
  --bl-control-bg: var(--bl-control-bg-error: #FFFFFF);
  --bl-control-border-color: var(--bl-border-color-error, #BD553A);
}

:root {
  --bl-formcheck-font-size: var(--bl-control-font-size-default, 14px);
  --bl-formcheck-line-height: var(--bl-control-line-height-default, 20px);
  --bl-formcheck-text-pl: 24px;
  --bl-formcheck-icon-size: 16px;
  --bl-formcheck-icon-radius: 0px;
  --bl-formcheck-icon-font-size: var(--bl-control-font-size-default, 14px);
  --bl-formcheck-btn-py: var(--bl-control-py-default, 11px);
  --bl-formcheck-btn-px: var(--bl-control-px-default, 16px);
  --bl-formcheck-btn-icon-px: var(--bl-control-px-default, 16px);
  --bl-formcheck-btn-border-width: var(--bl-border-width-default, 1px);
  --bl-formcheck-btn-border-color-default: var(--bl-border-color-default, #E0E0E0);
  --bl-formcheck-btn-border-radius: var(--bl-control-radius-default, 0px);
  --bl-formcheck-icon-bg-default: transparent;
  --bl-formcheck-icon-border-color-default: var(--bl-border-color-default, #E0E0E0);
  --bl-formcheck-icon-bg-active: var(--bl-color-primary-default, #27818C);
  --bl-formcheck-icon-border-color-active: var(--bl-color-primary-default, #27818C);
  --bl-formcheck-opacity-disabeld: 0.6;
}

/* Size */
.bl-control-sm {
  --bl-formcheck-btn-py: var(--bl-control-py-sm, 7px);
  --bl-formcheck-btn-px: var(--bl-control-px-sm, 12px);
  --bl-formcheck-btn-icon-px: var(--bl-control-px-sm, 12px);
  --bl-formcheck-btn-border-radius: var(--bl-control-radius-sm, 0px);
}

.bl-control-xs {
  --bl-formcheck-font-size: var(--bl-control-font-size-xs, 12px);
  --bl-formcheck-line-height: var(--bl-control-line-height-xs, 16px);
  --bl-formcheck-text-pl: 20px;
  --bl-formcheck-icon-size: 14px;
  --bl-formcheck-icon-radius: 0px;
  --bl-formcheck-icon-font-size: var(--bl-control-font-size-xs, 12px);
  --bl-formcheck-btn-py: var(--bl-control-py-xs, 5px);
  --bl-formcheck-btn-px: var(--bl-control-px-xs, 8px);
  --bl-formcheck-btn-icon-px: var(--bl-control-px-xs, 8px);
  --bl-formcheck-btn-border-radius: var(--bl-control-radius-xs, 0px);
}

.bl-icon-only {
  --bl-formcheck-text-pl: var(--bl-formcheck-icon-size);
}

/* Base */
.bl-form-check {
  position: relative;
  display: inline-block;
  font-size: var(--bl-formcheck-font-size);
  line-height: var(--bl-formcheck-line-height);
  min-height: var(--bl-formcheck-icon-size);
  box-sizing: border-box;
}
.bl-form-check input[type=radio],
.bl-form-check input[type=checkbox],
.bl-form-check .bl-control-icon,
.bl-form-check .bl-control-border {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
}
.bl-form-check input[type=radio],
.bl-form-check input[type=checkbox] {
  z-index: 5;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.bl-form-check input[type=radio]:checked + .bl-control-icon,
.bl-form-check input[type=checkbox]:checked + .bl-control-icon {
  border-color: var(--bl-formcheck-icon-border-color-active);
}
.bl-form-check input[type=radio]:disabled,
.bl-form-check input[type=checkbox]:disabled {
  cursor: not-allowed;
}
.bl-form-check input[type=radio]:disabled + .bl-control-icon, .bl-form-check input[type=radio]:disabled + .bl-control-icon + .bl-control-border, .bl-form-check input[type=radio]:disabled + .bl-control-icon + .bl-control-border + .bl-control-text,
.bl-form-check input[type=checkbox]:disabled + .bl-control-icon,
.bl-form-check input[type=checkbox]:disabled + .bl-control-icon + .bl-control-border,
.bl-form-check input[type=checkbox]:disabled + .bl-control-icon + .bl-control-border + .bl-control-text {
  opacity: var(--bl-formcheck-opacity-disabeld);
}
.bl-form-check input[type=checkbox]:checked + .bl-control-icon {
  background: var(--bl-formcheck-icon-bg-active);
}
.bl-form-check input[type=checkbox]:checked + .bl-control-icon:after {
  content: " ";
  display: flex;
  width: 100%;
  height: 100%;
  background: url(../../../common-mobile/images/correct.png) no-repeat center center;
  background-size: cover;
}
.bl-form-check input[type=radio] + .bl-control-icon {
  border-radius: 50%;
}
.bl-form-check input[type=radio] + .bl-control-icon:after {
  border-radius: 50%;
  transform: scale(0.6);
}
.bl-form-check input[type=radio]:checked + .bl-control-icon:after {
  background: var(--bl-formcheck-icon-bg-active);
}
.bl-form-check .bl-control-icon {
  top: calc(var(--bl-formcheck-line-height) / 2 - var(--bl-formcheck-icon-size) / 2);
  width: var(--bl-formcheck-icon-size);
  height: var(--bl-formcheck-icon-size);
  border-color: var(--bl-formcheck-icon-border-color-default);
  border-radius: var(--bl-formcheck-icon-radius);
  box-sizing: border-box;
}
.bl-form-check .bl-control-icon:after {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: " ";
  font-size: var(--bl-formcheck-icon-font-size);
}
.bl-form-check .bl-control-text {
  padding-left: var(--bl-formcheck-text-pl);
}
.bl-form-check.bl-block {
  display: block;
}
.bl-form-check.bl-vertical-middle .bl-control-icon {
  top: 50% !important;
  transform: translateY(-50%);
}

/* Type */
.bl-form-check-btn,
.bl-form-check-group .bl-form-check {
  width: 100%;
  padding: var(--bl-formcheck-btn-py) var(--bl-formcheck-btn-px);
  border: var(--bl-formcheck-btn-border-width) solid transparent;
}
.bl-form-check-btn .bl-control-icon,
.bl-form-check-group .bl-form-check .bl-control-icon {
  top: calc(var(--bl-formcheck-line-height) / 2 - var(--bl-formcheck-icon-size) / 2 + var(--bl-formcheck-btn-py, 11px));
  left: var(--bl-formcheck-btn-icon-px);
}
.bl-form-check-btn .bl-control-border,
.bl-form-check-group .bl-form-check .bl-control-border {
  z-index: 1;
  border-color: var(--bl-formcheck-btn-border-color-default);
  border-radius: var(--bl-formcheck-btn-border-radius);
}
.bl-form-check-btn input[type=radio]:checked + .bl-control-icon + .bl-control-border,
.bl-form-check-btn input[type=checkbox]:checked + .bl-control-icon + .bl-control-border,
.bl-form-check-group .bl-form-check input[type=radio]:checked + .bl-control-icon + .bl-control-border,
.bl-form-check-group .bl-form-check input[type=checkbox]:checked + .bl-control-icon + .bl-control-border {
  border-color: var(--bl-formcheck-icon-border-color-active);
}

/* ================================================== */
/*  @Name: Typography                                 */
/* ================================================== */
:root {
  --bl-font-size-1: 1.8rem;
  --bl-font-size-2: 1.6rem;
  --bl-font-size-3: 1.2rem;
  --bl-font-size-4: 0.9rem;
  --bl-font-size-5: 0.8rem;
  --bl-font-size-6: 0.6rem;
  --bl-text-color-default: var(--bl-font-color-default, var(--bl-font-color-default));
  --bl-text-color-hover: var(--bl-color-primary-default, #27818C);
  --bl-text-color-active: var(--bl-font-color-default, var(--bl-font-color-default));
}

/* Color */
.bl-text-black {
  --bl-text-color-default: var(--bl-font-color-default, var(--bl-font-color-default));
  --bl-text-color-hover: var(--bl-color-primary-default, #27818C);
  --bl-text-color-active: var(--bl-font-color-default, var(--bl-font-color-default));
}

.bl-text-white {
  --bl-text-color-default: #FFFFFF;
  --bl-text-color-hover: #F5F5F5;
  --bl-text-color-active: #F0F0F0;
}

.bl-text-gray-light {
  --bl-text-color-default: var(--bl-font-color-light, #AAAAAA);
  --bl-text-color-hover: var(--bl-color-text-600, #666666);
  --bl-text-color-active: var(--bl-font-color-default, var(--bl-font-color-default));
}

.bl-text-gray-lighter {
  --bl-text-color-default: var(--bl-font-color-lighter, #CCCCCC);
  --bl-text-color-hover: var(--bl-font-color-light, #AAAAAA);
  --bl-text-color-active: var(--bl-font-color-default, var(--bl-font-color-default));
}

.bl-text-primary {
  --bl-text-color-default: var(--bl-color-primary-default, #27818C);
  --bl-text-color-hover: var(--bl-color-primary-default, #27818C);
  --bl-text-color-active: var(--bl-color-primary-900, #1B5A62);
}

.bl-text-info {
  --bl-text-color-default: var(--bl-color-info-default, #4469A8);
  --bl-text-color-hover: var(--bl-color-info-default, #4469A8);
  --bl-text-color-active: var(--bl-color-info-900, #2E4A75);
}

.bl-text-success {
  --bl-text-color-default: var(--bl-color-success-default, #27818C);
  --bl-text-color-hover: var(--bl-color-success-default, #27818C);
  --bl-text-color-active: var(--bl-color-success-900, #1B5A62);
}

.bl-text-warning {
  --bl-text-color-default: var(--bl-color-warning-default, #E8913A);
  --bl-text-color-hover: var(--bl-color-warning-default, #E8913A);
  --bl-text-color-active: var(--bl-color-warning-900, #855229);
}

.bl-text-danger {
  --bl-text-color-default: var(--bl-color-danger-default, #BD553A);
  --bl-text-color-hover: var(--bl-color-danger-default, #BD553A);
  --bl-text-color-active: var(--bl-color-danger-900, #843B28);
}

/* Normal */
a {
  color: var(--bl-text-color-default);
  text-decoration: none;
}
a:hover {
  color: var(--bl-text-color-hover);
}
a:active {
  color: var(--bl-text-color-active);
}

.bl-text-black, .bl-text-white, .bl-text-gray-light, .bl-text-gray-lighter,
.bl-text-primary, .bl-text-info, .bl-text-success, .bl-text-warning, .bl-text-danger {
  color: var(--bl-text-color-default);
}

.bl-text-link:hover,
a.bl-text-black:hover, a.bl-text-white:hover, a.bl-text-gray-light:hover, a.bl-text-gray-lighter:hover,
a.bl-text-primary:hover, a.bl-text-info:hover, a.bl-text-success:hover, a.bl-text-warning:hover, a.bl-text-danger:hover {
  color: var(--bl-text-color-hover);
}
.bl-text-link:active,
a.bl-text-black:active, a.bl-text-white:active, a.bl-text-gray-light:active, a.bl-text-gray-lighter:active,
a.bl-text-primary:active, a.bl-text-info:active, a.bl-text-success:active, a.bl-text-warning:active, a.bl-text-danger:active {
  color: var(--bl-text-color-active);
}

/* Size */
.bl-h1, h1 {
  font-size: var(--bl-font-size-1);
}

.bl-h2, h2 {
  font-size: var(--bl-font-size-2);
}

.bl-h3, h3 {
  font-size: var(--bl-font-size-3);
}

.bl-h4, h4 {
  font-size: var(--bl-font-size-4);
}

.bl-h5, h5 {
  font-size: var(--bl-font-size-5);
}

.bl-h6, h6 {
  font-size: var(--bl-font-size-6);
}

/* Font Weight */
.bl-font-bold, strong, b {
  font-weight: 700;
}

.bl-font-semibold {
  font-weight: 500;
}

.bl-font-normal {
  font-weight: 400;
}

.bl-font-light {
  font-weight: 200;
}

/* Align */
.bl-text-left {
  text-align: left;
}

.bl-text-center {
  text-align: center;
}

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

@media (max-width: 767px) {
  .bl-text-xs-left {
    text-align: left;
  }
  .bl-text-xs-center {
    text-align: center;
  }
  .bl-text-xs-right {
    text-align: right;
  }
}
/* Other */
.bl-text-link {
  cursor: pointer;
}
.bl-text-link.bl-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.bl-text-lowercase {
  text-transform: lowercase;
}

.bl-text-capitalize {
  text-transform: capitalize;
}

.bl-text-uppercase {
  text-transform: uppercase;
}

.bl-text-underline {
  text-decoration: underline;
}

.bl-text-delete {
  text-decoration: line-through;
}

.bl-text-italic {
  font-style: italic;
}

.bl-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================== */
/*  @Name: Alert                                      */
/*  @Author: Cherry.liu                               */
/* ================================================== */
:root {
  --bl-alert-py: var(--bl-control-py-default, 11px);
  --bl-alert-px: var(--bl-control-px-default, 16px);
  --bl-alert-font-size: var(--bl-control-font-size-default, 14px);
  --bl-alert-line-height: var(--bl-control-line-height-default, 20px);
  --bl-alert-bg: transparent;
  --bl-alert-border-width: 1px;
  --bl-alert-border-color: transparent;
  --bl-alert-radius: var(--bl-control-radius-default, 0);
  --bl-alert-content-space: 8px;
  --bl-alert-close-size: var(--bl-control-line-height-default, 20px);
  --bl-alert-close-font-size: var(--bl-control-font-size-default, 14px);
  --bl-alert-close-color-default: var(--bl-color-text-500, #999999);
  --bl-alert-close-color-hover: var(--bl-color-text-400, #AAAAAA);
  --bl-alert-close-color-active: var(--bl-color-text-600, #666666);
}

/* Color */
.bl-alert-primary {
  --bl-alert-bg: var(--bl-color-primary-100, #E9F2F3);
  --bl-alert-border-color: var(--bl-color-primary-200, #C9E0E1);
}

.bl-alert-info {
  --bl-alert-bg: var(--bl-color-info-100, #E8EDF5);
  --bl-alert-border-color: var(--bl-color-info-200, #CED8E9);
}

.bl-alert-success {
  --bl-alert-bg: var(--bl-color-success-100, #E9F2F3);
  --bl-alert-border-color: var(--bl-color-success-200, #C9E0E1);
}

.bl-alert-warning {
  --bl-alert-bg: var(--bl-color-warning-100, #FCF2E7);
  --bl-alert-border-color: var(--bl-color-warning-200, #F8E3CE);
}

.bl-alert-danger {
  --bl-alert-bg: var(--bl-color-danger-100, #F7EBE7);
  --bl-alert-border-color: var(--bl-color-danger-200, #EED3CB);
}

.bl-alert-gray {
  --bl-alert-bg: var(--bl-color-gray-300, #F0F0F0);
  --bl-alert-border-color: var(--bl-border-color-default, #E0E0E0);
}

.bl-alert-yellow {
  --bl-alert-bg: #FBF8E8;
  --bl-alert-border-color: #F6EDC9;
}

/* Size */
.bl-alert-sm {
  --bl-alert-py: var(--bl-control-py-sm, 7px);
  --bl-alert-px: var(--bl-control-px-sm, 12px);
  --bl-alert-font-size: var(--bl-control-font-size-sm, 14px);
  --bl-alert-line-height: var(--bl-control-line-height-sm, 20px);
  --bl-alert-radius: var(--bl-control-radius-sm, 0);
  --bl-alert-content-space: 6px;
  --bl-alert-close-size: var(--bl-control-line-height-sm, 20px);
  --bl-alert-close-font-size: var(--bl-control-font-size-sm, 14px);
  --bl-prompt-icon-size: 16px;
  --bl-prompt-icon-font-size: 14px;
}

.bl-alert-xs {
  --bl-alert-py: var(--bl-control-py-xs, 5px);
  --bl-alert-px: var(--bl-control-px-xs, 8px);
  --bl-alert-font-size: var(--bl-control-font-size-xs, 12px);
  --bl-alert-line-height: var(--bl-control-line-height-xs, 16px);
  --bl-alert-radius: var(--bl-control-radius-xs, 0px);
  --bl-alert-content-space: 4px;
  --bl-alert-close-size: var(--bl-control-line-height-xs, 16px);
  --bl-alert-close-font-size: var(--bl-control-font-size-xs, 12px);
  --bl-prompt-icon-size: 14px;
  --bl-prompt-icon-font-size: 12px;
}

/* Base */
.bl-alert {
  display: flex;
  padding: var(--bl-alert-py) var(--bl-alert-px);
  font-size: var(--bl-alert-font-size);
  line-height: var(--bl-alert-line-height);
  background: var(--bl-alert-bg);
  border: var(--bl-alert-border-width) solid var(--bl-alert-border-color);
  border-radius: var(--bl-alert-radius);
  gap: var(--bl-alert-content-space);
  box-sizing: border-box;
}
.bl-alert .bl-alert-content {
  flex-grow: 1;
}
.bl-alert .bl-alert-close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: var(--bl-alert-close-size);
  height: var(--bl-alert-close-size);
  color: var(--bl-alert-close-color-default);
  font-size: var(--bl-alert-close-font-size);
  text-decoration: none;
  cursor: pointer;
}
.bl-alert .bl-alert-close:hover {
  color: var(--bl-alert-close-color-hover);
}
.bl-alert .bl-alert-close:active {
  color: var(--bl-alert-close-color-active);
}

/* ================================================== */
/*  @Name: Layout                                     */
/* ================================================== */
:root {
  --bl-layout-header-height: 4.4rem;
  --bl-layout-content-pt: var(--bl-layout-header-height);
  --bl-layout-sider-width: 240px;
}

select + .bl-select-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 1rem;
  color: var(--bl-font-color-light);
}

.bl-layout {
  display: flex;
  flex: auto;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.bl-layout .bl-layout-header,
.bl-layout .bl-layout-footer {
  flex: 0 0 auto;
  width: 100%;
}
.bl-layout .bl-layout-content {
  flex: auto;
  overflow-y: auto;
}

.bl-fixed-header.bl-layout-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.bl-fixed-header + .bl-layout, .bl-fixed-header + .bl-layout-content {
  padding-top: var(--bl-layout-content-pt);
}

/* Header */
.bl-header {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #EEEEEE;
  min-height: var(--bl-layout-header-height);
  text-align: center;
  background: #FFFFFF;
}
.bl-header .bl-logo {
  height: 3.4rem;
  margin: 0 auto;
}
.bl-header .bl-logo-text {
  font-size: 1.2rem;
  font-weight: 600;
}
.bl-header .bl-tel {
  display: inline-block;
  font-size: 16px;
  padding: 0.3em 0.6em;
  color: #fff;
  border-radius: 0.4em;
  cursor: pointer;
  background: var(--bl-color-primary-default);
}

/* Footer */
.bl-footer {
  margin-top: 4em;
  padding: 1rem 0;
  font-size: 12px;
  text-align: center;
  border-top: 1px solid #EEEEEE;
}
.bl-footer .bl-space {
  display: inline-flex;
  gap: 0.2rem 0.6rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 13px;
}
.bl-footer .bl-text-dark {
  font-weight: 600;
}

/* Progress */
.bl-progress-line .bl-progress-bar {
  width: 100%;
  height: 4px;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}
.bl-progress-line .bl-progress-bg {
  height: 100%;
  transition: width 0.3s ease-out;
  background: var(--bl-color-primary-500);
}

/* Content */
.bl-text-gray {
  color: var(--bl-color-text-600);
}

.bl-list-how {
  text-align: center;
  margin-top: 4rem;
}
.bl-list-how .bl-list-item {
  margin-bottom: 1rem;
}
.bl-list-how .bl-label {
  color: var(--bl-font-color-default);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: normal;
  text-transform: unset;
  padding-bottom: 0.3em;
}
.bl-list-how .bl-icon {
  width: 2rem;
  margin: 0 auto 0.4rem auto;
}
.bl-list-how .bl-icon img {
  max-width: 100%;
}

.bl-question-box {
  padding: 3rem 0 2rem 0;
  text-align: center;
  overflow: hidden;
}
.bl-question-box .bl-question-list {
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out, -o-transform 0.5s ease-out;
}
.bl-question-box .bl-question-list > .bl-list-item {
  width: 100%;
  padding: 0 0.2rem;
}
.bl-question-box .bl-title {
  font-size: var(--bl-font-size-4);
  color: var(--bl-color-text-600);
  margin-bottom: 2rem;
}

.bl-type-list {
  --bl-gutter-col: 0.35rem;
  --bl-gutter-row: -0.35rem;
}
.bl-type-list .bl-type-item {
  margin-bottom: 2rem;
}
.bl-type-list .bl-type-img {
  max-width: 100%;
  margin-bottom: 0.4rem;
  cursor: pointer;
  filter: grayscale(100%);
  border-radius: 0.4rem;
}
.bl-type-list .bl-type-img:hover, .bl-type-list .bl-type-img.bl-active {
  filter: grayscale(0%);
}
.bl-type-list .bl-type-name {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* ================================================== */
/*  @Name:                                            */
/*  @Author: Cherry.liu                               */
/* ================================================== */
:root {
  --bl-color-primary-300: #a4cee0;
  --bl-color-primary-400: #009ce1;
  --bl-color-primary-500: #0079ae;
  --bl-color-primary-600: #015580;
  --bl-color-text-600:	#505051;
  --bl-color-text-900:	#0A090A;
  --bl-control-py-default: 0.7rem;
  --bl-control-mb: 1.1rem;
  --bl-control-radius-default: 0.4rem;
  --bl-border-color-focus: var(--bl-color-primary-500);
  --bl-form-label-mb: 0.2rem;
}

.bl-btn-primary:active, .bl-btn-primary.active {
  background: var(--bl-color-primary-600);
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3px #005fcc;
}

.bl-btn .bl-btn-icon {
  width: 20px;
}