@belvo-finance/belvo-vue-components/dist/css/belvo-design-utils.css

## Project setup ``` npm install ```

@use "sass:list";
.text-left {
  text-align: left;
}

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

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

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
}

.col-1 {
  flex-basis: 8.33333%;
  flex-grow: 0;
}

.col-offset-1 {
  margin-left: 8.33333%;
}

.col-2 {
  flex-basis: 16.66667%;
  flex-grow: 0;
}

.col-offset-2 {
  margin-left: 16.66667%;
}

.col-3 {
  flex-basis: 25%;
  flex-grow: 0;
}

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

.col-4 {
  flex-basis: 33.33333%;
  flex-grow: 0;
}

.col-offset-4 {
  margin-left: 33.33333%;
}

.col-5 {
  flex-basis: 41.66667%;
  flex-grow: 0;
}

.col-offset-5 {
  margin-left: 41.66667%;
}

.col-6 {
  flex-basis: 50%;
  flex-grow: 0;
}

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

.col-7 {
  flex-basis: 58.33333%;
  flex-grow: 0;
}

.col-offset-7 {
  margin-left: 58.33333%;
}

.col-8 {
  flex-basis: 66.66667%;
  flex-grow: 0;
}

.col-offset-8 {
  margin-left: 66.66667%;
}

.col-9 {
  flex-basis: 75%;
  flex-grow: 0;
}

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

.col-10 {
  flex-basis: 83.33333%;
  flex-grow: 0;
}

.col-offset-10 {
  margin-left: 83.33333%;
}

.col-11 {
  flex-basis: 91.66667%;
  flex-grow: 0;
}

.col-offset-11 {
  margin-left: 91.66667%;
}

.col-12 {
  flex-basis: 100%;
  flex-grow: 0;
}

.col-offset-12 {
  margin-left: 100%;
}

.flex-first {
  order: -1;
}

.flex-last {
  order: 1;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-top {
  align-items: flex-start;
}

.flex-middle {
  align-items: center;
}

.flex-bottom {
  align-items: flex-end;
}

.flex-self-center {
  align-self: center;
}

.flex-self-start {
  align-self: flex-start;
}

.flex-self-end {
  align-self: flex-end;
}

@media screen and (min-width: 20rem) and (max-width: 39.9375rem) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
  }
  .col-sm-1 {
    flex-basis: 8.33333%;
    flex-grow: 0;
  }
  .col-offset-sm-1 {
    margin-left: 8.33333%;
  }
  .col-sm-2 {
    flex-basis: 16.66667%;
    flex-grow: 0;
  }
  .col-offset-sm-2 {
    margin-left: 16.66667%;
  }
  .col-sm-3 {
    flex-basis: 25%;
    flex-grow: 0;
  }
  .col-offset-sm-3 {
    margin-left: 25%;
  }
  .col-sm-4 {
    flex-basis: 33.33333%;
    flex-grow: 0;
  }
  .col-offset-sm-4 {
    margin-left: 33.33333%;
  }
  .col-sm-5 {
    flex-basis: 41.66667%;
    flex-grow: 0;
  }
  .col-offset-sm-5 {
    margin-left: 41.66667%;
  }
  .col-sm-6 {
    flex-basis: 50%;
    flex-grow: 0;
  }
  .col-offset-sm-6 {
    margin-left: 50%;
  }
  .col-sm-7 {
    flex-basis: 58.33333%;
    flex-grow: 0;
  }
  .col-offset-sm-7 {
    margin-left: 58.33333%;
  }
  .col-sm-8 {
    flex-basis: 66.66667%;
    flex-grow: 0;
  }
  .col-offset-sm-8 {
    margin-left: 66.66667%;
  }
  .col-sm-9 {
    flex-basis: 75%;
    flex-grow: 0;
  }
  .col-offset-sm-9 {
    margin-left: 75%;
  }
  .col-sm-10 {
    flex-basis: 83.33333%;
    flex-grow: 0;
  }
  .col-offset-sm-10 {
    margin-left: 83.33333%;
  }
  .col-sm-11 {
    flex-basis: 91.66667%;
    flex-grow: 0;
  }
  .col-offset-sm-11 {
    margin-left: 91.66667%;
  }
  .col-sm-12 {
    flex-basis: 100%;
    flex-grow: 0;
  }
  .col-offset-sm-12 {
    margin-left: 100%;
  }
  .flex-first-sm {
    order: -1;
  }
  .flex-last-sm {
    order: 1;
  }
  .flex-end-sm {
    display: flex;
    justify-content: flex-end;
  }
  .flex-start-sm {
    display: flex;
    justify-content: flex-start;
  }
  .flex-center-sm {
    display: flex;
    justify-content: center;
  }
  .flex-between-sm {
    display: flex;
    justify-content: space-between;
  }
  .flex-around-sm {
    display: flex;
    justify-content: space-around;
  }
  .flex-top-sm {
    align-items: flex-start;
  }
  .flex-middle-sm {
    align-items: center;
  }
  .flex-bottom-sm {
    align-items: flex-end;
  }
  .flex-self-center-sm {
    align-self: center;
  }
  .flex-self-start-sm {
    align-self: flex-start;
  }
  .flex-self-end-sm {
    align-self: flex-end;
  }
}

@media screen and (min-width: 40rem) and (max-width: 59.9375rem) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
  }
  .col-md-1 {
    flex-basis: 8.33333%;
    flex-grow: 0;
  }
  .col-offset-md-1 {
    margin-left: 8.33333%;
  }
  .col-md-2 {
    flex-basis: 16.66667%;
    flex-grow: 0;
  }
  .col-offset-md-2 {
    margin-left: 16.66667%;
  }
  .col-md-3 {
    flex-basis: 25%;
    flex-grow: 0;
  }
  .col-offset-md-3 {
    margin-left: 25%;
  }
  .col-md-4 {
    flex-basis: 33.33333%;
    flex-grow: 0;
  }
  .col-offset-md-4 {
    margin-left: 33.33333%;
  }
  .col-md-5 {
    flex-basis: 41.66667%;
    flex-grow: 0;
  }
  .col-offset-md-5 {
    margin-left: 41.66667%;
  }
  .col-md-6 {
    flex-basis: 50%;
    flex-grow: 0;
  }
  .col-offset-md-6 {
    margin-left: 50%;
  }
  .col-md-7 {
    flex-basis: 58.33333%;
    flex-grow: 0;
  }
  .col-offset-md-7 {
    margin-left: 58.33333%;
  }
  .col-md-8 {
    flex-basis: 66.66667%;
    flex-grow: 0;
  }
  .col-offset-md-8 {
    margin-left: 66.66667%;
  }
  .col-md-9 {
    flex-basis: 75%;
    flex-grow: 0;
  }
  .col-offset-md-9 {
    margin-left: 75%;
  }
  .col-md-10 {
    flex-basis: 83.33333%;
    flex-grow: 0;
  }
  .col-offset-md-10 {
    margin-left: 83.33333%;
  }
  .col-md-11 {
    flex-basis: 91.66667%;
    flex-grow: 0;
  }
  .col-offset-md-11 {
    margin-left: 91.66667%;
  }
  .col-md-12 {
    flex-basis: 100%;
    flex-grow: 0;
  }
  .col-offset-md-12 {
    margin-left: 100%;
  }
  .flex-first-md {
    order: -1;
  }
  .flex-last-md {
    order: 1;
  }
  .flex-end-md {
    display: flex;
    justify-content: flex-end;
  }
  .flex-start-md {
    display: flex;
    justify-content: flex-start;
  }
  .flex-center-md {
    display: flex;
    justify-content: center;
  }
  .flex-between-md {
    display: flex;
    justify-content: space-between;
  }
  .flex-around-md {
    display: flex;
    justify-content: space-around;
  }
  .flex-top-md {
    align-items: flex-start;
  }
  .flex-middle-md {
    align-items: center;
  }
  .flex-bottom-md {
    align-items: flex-end;
  }
  .flex-self-center-md {
    align-self: center;
  }
  .flex-self-start-md {
    align-self: flex-start;
  }
  .flex-self-end-md {
    align-self: flex-end;
  }
}

@media screen and (min-width: 60rem) and (max-width: 9999rem) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
  }
  .col-lg-1 {
    flex-basis: 8.33333%;
    flex-grow: 0;
  }
  .col-offset-lg-1 {
    margin-left: 8.33333%;
  }
  .col-lg-2 {
    flex-basis: 16.66667%;
    flex-grow: 0;
  }
  .col-offset-lg-2 {
    margin-left: 16.66667%;
  }
  .col-lg-3 {
    flex-basis: 25%;
    flex-grow: 0;
  }
  .col-offset-lg-3 {
    margin-left: 25%;
  }
  .col-lg-4 {
    flex-basis: 33.33333%;
    flex-grow: 0;
  }
  .col-offset-lg-4 {
    margin-left: 33.33333%;
  }
  .col-lg-5 {
    flex-basis: 41.66667%;
    flex-grow: 0;
  }
  .col-offset-lg-5 {
    margin-left: 41.66667%;
  }
  .col-lg-6 {
    flex-basis: 50%;
    flex-grow: 0;
  }
  .col-offset-lg-6 {
    margin-left: 50%;
  }
  .col-lg-7 {
    flex-basis: 58.33333%;
    flex-grow: 0;
  }
  .col-offset-lg-7 {
    margin-left: 58.33333%;
  }
  .col-lg-8 {
    flex-basis: 66.66667%;
    flex-grow: 0;
  }
  .col-offset-lg-8 {
    margin-left: 66.66667%;
  }
  .col-lg-9 {
    flex-basis: 75%;
    flex-grow: 0;
  }
  .col-offset-lg-9 {
    margin-left: 75%;
  }
  .col-lg-10 {
    flex-basis: 83.33333%;
    flex-grow: 0;
  }
  .col-offset-lg-10 {
    margin-left: 83.33333%;
  }
  .col-lg-11 {
    flex-basis: 91.66667%;
    flex-grow: 0;
  }
  .col-offset-lg-11 {
    margin-left: 91.66667%;
  }
  .col-lg-12 {
    flex-basis: 100%;
    flex-grow: 0;
  }
  .col-offset-lg-12 {
    margin-left: 100%;
  }
  .flex-first-lg {
    order: -1;
  }
  .flex-last-lg {
    order: 1;
  }
  .flex-end-lg {
    display: flex;
    justify-content: flex-end;
  }
  .flex-start-lg {
    display: flex;
    justify-content: flex-start;
  }
  .flex-center-lg {
    display: flex;
    justify-content: center;
  }
  .flex-between-lg {
    display: flex;
    justify-content: space-between;
  }
  .flex-around-lg {
    display: flex;
    justify-content: space-around;
  }
  .flex-top-lg {
    align-items: flex-start;
  }
  .flex-middle-lg {
    align-items: center;
  }
  .flex-bottom-lg {
    align-items: flex-end;
  }
  .flex-self-center-lg {
    align-self: center;
  }
  .flex-self-start-lg {
    align-self: flex-start;
  }
  .flex-self-end-lg {
    align-self: flex-end;
  }
}

.row {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.translate-enter-active,
.translate-leave-active {
  transition: transform 0.2s ease;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.scale-enter-active,
.scale-leave-active {
  transition: width 0.2s ease;
}

.scale-enter {
  width: 100%;
}

.scale-height-bottom-enter-active,
.scale-height-bottom-leave-active {
  transition: transform 0.2s ease;
  transform-origin: bottom;
}

.scale-height-bottom-leave-to,
.scale-height-bottom-enter {
  transform: scaleY(0);
}

.translateY-enter {
  animation: translate-in 0.2s ease-out;
}

.translateY-leave-to {
  animation: translate-out 0.2s ease-out;
}

.translateY-in {
  animation: translate-in 0.2s ease-out;
}

.translateY-out {
  animation: translate-out 0.2s ease-out;
}

@keyframes translateY-in {
  0% {
    opacity: 0;
    transform: translateY(128px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes translateY-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(128px);
  }
}

.z-1 {
  z-index: 1;
}

.z-2, .ripple {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

.z-6 {
  z-index: 6;
}

.z-7 {
  z-index: 7;
}

.z-8 {
  z-index: 8;
}

.z-9 {
  z-index: 9;
}

.z-10 {
  z-index: 10;
}

.p-0 {
  padding: 0rem !important;
}

.py-0 {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.px-0 {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.p-xs {
  padding: 0.25rem !important;
}

.py-xs {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.px-xs {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}

.pt-xs {
  padding-top: 0.25rem !important;
}

.pr-xs {
  padding-right: 0.25rem !important;
}

.pb-xs {
  padding-bottom: 0.25rem !important;
}

.pl-xs {
  padding-left: 0.25rem !important;
}

.p-s {
  padding: 0.5rem !important;
}

.py-s {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.px-s {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.pt-s {
  padding-top: 0.5rem !important;
}

.pr-s {
  padding-right: 0.5rem !important;
}

.pb-s {
  padding-bottom: 0.5rem !important;
}

.pl-s {
  padding-left: 0.5rem !important;
}

.p-m {
  padding: 1rem !important;
}

.py-m {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.px-m {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}

.pt-m {
  padding-top: 1rem !important;
}

.pr-m {
  padding-right: 1rem !important;
}

.pb-m {
  padding-bottom: 1rem !important;
}

.pl-m {
  padding-left: 1rem !important;
}

.p-l {
  padding: 1.5rem !important;
}

.py-l {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.px-l {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}

.pt-l {
  padding-top: 1.5rem !important;
}

.pr-l {
  padding-right: 1.5rem !important;
}

.pb-l {
  padding-bottom: 1.5rem !important;
}

.pl-l {
  padding-left: 1.5rem !important;
}

.p-xl {
  padding: 2rem !important;
}

.py-xl {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.px-xl {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}

.pt-xl {
  padding-top: 2rem !important;
}

.pr-xl {
  padding-right: 2rem !important;
}

.pb-xl {
  padding-bottom: 2rem !important;
}

.pl-xl {
  padding-left: 2rem !important;
}

.p-2xl {
  padding: 2.5rem !important;
}

.py-2xl {
  padding-top: 2.5rem !important;
  padding-bottom: 2.5rem !important;
}

.px-2xl {
  padding-right: 2.5rem !important;
  padding-left: 2.5rem !important;
}

.pt-2xl {
  padding-top: 2.5rem !important;
}

.pr-2xl {
  padding-right: 2.5rem !important;
}

.pb-2xl {
  padding-bottom: 2.5rem !important;
}

.pl-2xl {
  padding-left: 2.5rem !important;
}

.p-3xl {
  padding: 3rem !important;
}

.py-3xl {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

.px-3xl {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}

.pt-3xl {
  padding-top: 3rem !important;
}

.pr-3xl {
  padding-right: 3rem !important;
}

.pb-3xl {
  padding-bottom: 3rem !important;
}

.pl-3xl {
  padding-left: 3rem !important;
}

.m-0 {
  margin: 0rem !important;
}

.my-0 {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.mx-0 {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.ml-0 {
  margin-left: 0rem !important;
}

.m-xs {
  margin: 0.25rem !important;
}

.my-xs {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

.mx-xs {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}

.mt-xs {
  margin-top: 0.25rem !important;
}

.mr-xs {
  margin-right: 0.25rem !important;
}

.mb-xs {
  margin-bottom: 0.25rem !important;
}

.ml-xs {
  margin-left: 0.25rem !important;
}

.m-s {
  margin: 0.5rem !important;
}

.my-s {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.mx-s {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}

.mt-s {
  margin-top: 0.5rem !important;
}

.mr-s {
  margin-right: 0.5rem !important;
}

.mb-s {
  margin-bottom: 0.5rem !important;
}

.ml-s {
  margin-left: 0.5rem !important;
}

.m-m {
  margin: 1rem !important;
}

.my-m {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.mx-m {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}

.mt-m {
  margin-top: 1rem !important;
}

.mr-m {
  margin-right: 1rem !important;
}

.mb-m {
  margin-bottom: 1rem !important;
}

.ml-m {
  margin-left: 1rem !important;
}

.m-l {
  margin: 1.5rem !important;
}

.my-l {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.mx-l {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.mt-l {
  margin-top: 1.5rem !important;
}

.mr-l {
  margin-right: 1.5rem !important;
}

.mb-l {
  margin-bottom: 1.5rem !important;
}

.ml-l {
  margin-left: 1.5rem !important;
}

.m-xl {
  margin: 2rem !important;
}

.my-xl {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

.mx-xl {
  margin-right: 2rem !important;
  margin-left: 2rem !important;
}

.mt-xl {
  margin-top: 2rem !important;
}

.mr-xl {
  margin-right: 2rem !important;
}

.mb-xl {
  margin-bottom: 2rem !important;
}

.ml-xl {
  margin-left: 2rem !important;
}

.m-2xl {
  margin: 2.5rem !important;
}

.my-2xl {
  margin-top: 2.5rem !important;
  margin-bottom: 2.5rem !important;
}

.mx-2xl {
  margin-right: 2.5rem !important;
  margin-left: 2.5rem !important;
}

.mt-2xl {
  margin-top: 2.5rem !important;
}

.mr-2xl {
  margin-right: 2.5rem !important;
}

.mb-2xl {
  margin-bottom: 2.5rem !important;
}

.ml-2xl {
  margin-left: 2.5rem !important;
}

.m-3xl {
  margin: 3rem !important;
}

.my-3xl {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

.mx-3xl {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}

.mt-3xl {
  margin-top: 3rem !important;
}

.mr-3xl {
  margin-right: 3rem !important;
}

.mb-3xl {
  margin-bottom: 3rem !important;
}

.ml-3xl {
  margin-left: 3rem !important;
}

.border-bottom {
  border-bottom: 1px solid #f0f2f4;
}

.ripple {
  position: relative;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/*# sourceMappingURL=belvo-design-utils.css.map */