/*------------------------------------
  Space
------------------------------------*/
.u-space-1 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.u-space-1-top {
  padding-top: 2rem;
}

.u-space-1-bottom {
  padding-bottom: 2rem;
}

.u-space-2 {
  padding-top: 4.0625rem;
  padding-bottom: 4.0625rem;
}

.u-space-2-top {
  padding-top: 4.0625rem;
}

.u-space-2-bottom {
  padding-bottom: 4.0625rem;
}

.u-space-3 {
  padding-top: 8.125rem;
  padding-bottom: 8.125rem;
}

.u-space-3-top {
  padding-top: 8.125rem;
}

.u-space-3-bottom {
  padding-bottom: 8.125rem;
}

.u-space-4 {
  padding-top: 12.5rem;
  padding-bottom: 12.5rem;
}

.u-space-4-top {
  padding-top: 12.5rem;
}

.u-space-4-bottom {
  padding-bottom: 12.5rem;
}

.u-space-5 {
  padding-top: 15rem;
  padding-bottom: 15rem;
}

.u-space-5-top {
  padding-top: 15rem;
}

.u-space-5-bottom {
  padding-bottom: 15rem;
}

.u-space-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.u-space-0-top {
  padding-top: 0;
}

.u-space-0-bottom {
  padding-bottom: 0;
}

@media (min-width: 576px) {
  .u-space-3--sm {
    padding-top: 8.125rem;
    padding-bottom: 8.125rem;
  }
  .u-space-5-top--sm {
    padding-top: 15rem;
  }
}

@media (min-width: 768px) {
  .u-space-1-top--md {
    padding-top: 2rem;
  }
  .u-space-2-top--md {
    padding-top: 4.0625rem;
  }
  .u-space-5-top--md {
    padding-top: 15rem;
  }
}

@media (min-width: 992px) {
  .u-space-3--lg {
    padding-top: 8.125rem;
    padding-bottom: 8.125rem;
  }
  .u-space-3-top--lg {
    padding-top: 8.125rem;
  }
  .u-space-4--lg {
    padding-top: 12.5rem;
    padding-bottom: 12.5rem;
  }
  .u-space-4-top--lg {
    padding-top: 12.5rem;
  }
  .u-space-5-top--lg {
    padding-top: 15rem;
  }
  .u-space-5-bottom--lg {
    padding-bottom: 15rem;
  }
  .u-space-0--lg {
    padding-top: 0;
    padding-bottom: 0;
  }
  .u-space-bottom-0--lg {
    padding-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .u-space-4-top--xl {
    padding-top: 12.5rem;
  }
  .u-space-5-top--xl {
    padding-top: 15rem;
  }
}


/*------------------------------------
  Label
------------------------------------*/
.u-label {
  display: inline-block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 0.625rem 1.125rem;
  border-radius: 6.1875rem;
  transition: 0.2s ease-in-out;
}

.u-label--rounded {
  border-radius: 6.1875rem;
}

/*------------------------------------
  Label Sizes
------------------------------------*/
/* Extra Small */
.u-label--xs {
  font-weight: 300;
  font-size: 0.625rem;
  line-height: 1.7;
  padding: 0.25rem 1rem;
}

/* Small */
.u-label--sm {
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
}

/*------------------------------------
  Label Colors
------------------------------------*/
/* label primary */
.u-label--primary {
  color: #377dff;
  background-color: rgba(55, 125, 255, 0.1);
}

.u-label--primary[href]:hover, .u-label--primary[href]:focus {
  color: #fff;
  background-color: #377dff;
}

/* label secondary */
.u-label--secondary {
  color: #77838f;
  background-color: rgba(119, 131, 143, 0.1);
}

.u-label--secondary[href]:hover, .u-label--secondary[href]:focus {
  color: #fff;
  background-color: #77838f;
}

/* label success */
.u-label--success {
  color: #00c9a7;
  background-color: rgba(0, 201, 167, 0.1);
}

.u-label--success[href]:hover, .u-label--success[href]:focus {
  color: #fff;
  background-color: #00c9a7;
}

/* label info */
.u-label--info {
  color: #00dffc;
  background-color: rgba(0, 223, 252, 0.1);
}

.u-label--info[href]:hover, .u-label--info[href]:focus {
  color: #1e2022;
  background-color: #00dffc;
}

/* label warning */
.u-label--warning {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.1);
}

.u-label--warning[href]:hover, .u-label--warning[href]:focus {
  color: #1e2022;
  background-color: #ffc107;
}

/* label danger */
.u-label--danger {
  color: #de4437;
  background-color: rgba(222, 68, 55, 0.1);
}

.u-label--danger[href]:hover, .u-label--danger[href]:focus {
  color: #fff;
  background-color: #de4437;
}

/* label light */
.u-label--light {
  color: #f6f9fc;
  background-color: rgba(246, 249, 252, 0.1);
}

.u-label--light[href]:hover, .u-label--light[href]:focus {
  color: #1e2022;
  background-color: #f6f9fc;
}

/* label dark */
.u-label--dark {
  color: #1e2022;
  background-color: rgba(30, 32, 34, 0.1);
}

.u-label--dark[href]:hover, .u-label--dark[href]:focus {
  color: #fff;
  background-color: #1e2022;
}

/* label white */
.u-label--white {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.u-label--white[href]:hover, .u-label--white[href]:focus {
  color: #1e2022;
  background-color: #fff;
}


/*------------------------------------
  Indicator Dots
------------------------------------*/
.u-indicator-dots {
  position: relative;
}

@media (min-width: 768px) {
  .u-indicator-dots::after {
    position: absolute;
    right: -2.1875rem;
    top: 50%;
    width: 2.4375rem;
    height: 0.75rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 55 16'%3E %3Ccircle fill='%23e7eaf3' cx='27.7' cy='8.1' r='7.7'/%3E %3Ccircle fill='%23e7eaf3' cx='5' cy='8.1' r='5'/%3E %3Ccircle fill='%23e7eaf3' cx='50' cy='8.1' r='5'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    content: "";
    margin-top: -0.375rem;
  }
}

/*------------------------------------
  Indicator Vertical Dashed
------------------------------------*/
.u-indicator-ver-dashed {
  position: relative;
}

.u-indicator-ver-dashed::after {
  position: absolute;
  top: 32px;
  left: 16px;
  height: 100%;
  border-left: 2px dashed #377dff;
  content: "";
}

/*------------------------------------
  Indicator Steps
------------------------------------*/
.u-indicator-steps {
  position: relative;
  padding-left: 2.5rem;
}

.u-indicator-steps::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -0.25rem;
  width: 2rem;
  height: 0.0625rem;
  border-top: 1px solid #e7eaf3;
  margin: auto auto auto 0;
  content: "";
}

.u-indicator-steps::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: -0.3125rem;
  width: 0.0625rem;
  height: 100%;
  border-right: 1px solid #e7eaf3;
  margin: auto auto auto 0;
  content: "";
}

.u-indicator-steps:first-child::after {
  height: 50%;
  top: auto;
}

.u-indicator-steps:last-child::after {
  height: 50%;
  bottom: auto;
}

.u-indicator-steps__inner {
  min-width: 3rem;
}

/*------------------------------------
  Icon
------------------------------------*/
.u-icon {
  position: relative;
  z-index: 1;
  line-height: 0.7;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 2.125rem;
  height: 2.125rem;
  font-size: 0.9375rem;
  border-radius: 0.25rem;
  transition: 0.3s ease-in-out;
}

.u-icon__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.u-icon__inner-bottom-minus {
  top: 90%;
}

/*------------------------------------
  Icon Default Styles
------------------------------------*/
/* primary */
.u-icon-primary {
  color: #fff;
  background-color: #0D57A2;
  border-color: #0D57A2;
}

.u-icon-primary[href]:hover {
  color: #fff;
  background-color: #0D57A2;
  border-color: #0D57A2;
}

.u-icon-primary.disabled, .u-icon-primary:disabled {
  background-color: #0c4b8a;
  border-color: #0c4b8a;
}

/* secondary */
.u-icon-secondary {
  color: #fff;
  background-color: #77838f;
  border-color: #77838f;
}

.u-icon-secondary[href]:hover {
  color: #fff;
  background-color: #65707b;
  border-color: #5f6a74;
}

.u-icon-secondary.disabled, .u-icon-secondary:disabled {
  background-color: #77838f;
  border-color: #77838f;
}

/* success */
.u-icon-success {
  color: #fff;
  background-color: #00c9a7;
  border-color: #00c9a7;
}

.u-icon-success[href]:hover {
  color: #fff;
  background-color: #00a387;
  border-color: #00967d;
}

.u-icon-success.disabled, .u-icon-success:disabled {
  background-color: #00c9a7;
  border-color: #00c9a7;
}

/* info */
.u-icon-info {
  color: #1e2022;
  background-color: #00dffc;
  border-color: #00dffc;
}

.u-icon-info[href]:hover {
  color: #fff;
  background-color: #00bdd6;
  border-color: #00b2c9;
}

.u-icon-info.disabled, .u-icon-info:disabled {
  background-color: #00dffc;
  border-color: #00dffc;
}

/* warning */
.u-icon-warning {
  color: #1e2022;
  background-color: #ffc107;
  border-color: #ffc107;
}

.u-icon-warning[href]:hover {
  color: #1e2022;
  background-color: #e0a800;
  border-color: #d39e00;
}

.u-icon-warning.disabled, .u-icon-warning:disabled {
  background-color: #ffc107;
  border-color: #ffc107;
}

/* danger */
.u-icon-danger {
  color: #fff;
  background-color: #de4437;
  border-color: #de4437;
}

.u-icon-danger[href]:hover {
  color: #fff;
  background-color: #cd2f22;
  border-color: #c22d20;
}

.u-icon-danger.disabled, .u-icon-danger:disabled {
  background-color: #de4437;
  border-color: #de4437;
}

/* light */
.u-icon-light {
  color: #1e2022;
  background-color: #f6f9fc;
  border-color: #f6f9fc;
}

.u-icon-light[href]:hover {
  color: #1e2022;
  background-color: #d9e6f2;
  border-color: #d0e0ef;
}

.u-icon-light.disabled, .u-icon-light:disabled {
  background-color: #f6f9fc;
  border-color: #f6f9fc;
}

/* dark */
.u-icon-dark {
  color: #fff;
  background-color: #1e2022;
  border-color: #1e2022;
}

.u-icon-dark[href]:hover {
  color: #fff;
  background-color: #0c0d0e;
  border-color: #060707;
}

.u-icon-dark.disabled, .u-icon-dark:disabled {
  background-color: #1e2022;
  border-color: #1e2022;
}

/* white */
.u-icon-white {
  color: #1e2022;
  background-color: #fff;
  border-color: #fff;
}

.u-icon-white[href]:hover {
  color: #1e2022;
  background-color: #ececec;
  border-color: #e6e6e6;
}

.u-icon-white.disabled, .u-icon-white:disabled {
  background-color: #fff;
  border-color: #fff;
}