raven-bank-css/extend/index.css

A utility first css framework by Raven bank.

.toast-wrap {
  padding: 1.6rem;
  border-radius: 0.8rem;
  display: grid;
  align-items: flex-start;
  grid-template-columns: min-content 1fr min-content;
  grid-gap: 1rem;
  width: 50rem;
}
.toast-wrap .img-box {
  width: 2.5rem;
  height: 2.5rem;
  transform: translateY(0.2rem);
}
.toast-wrap .img-box .img {
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
  height: 100%;
}
.toast-wrap .text {
  font-size: 1.3rem;
  color: #020202;
}
.toast-wrap .cancel {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
}
.toast-wrap .cancel svg {
  width: 1rem;
  height: 1rem;
}

.toast-wrap__error {
  background-color: #fff5f5;
  border: 0.15rem solid #ffdfdd;
}
.toast-wrap__error .cancel {
  background-color: #ffdfdd;
}
.toast-wrap__error .cancel svg {
  fill: #ff0f00;
}

.toast-wrap__success {
  background: #D1F5D7 !important;
  border: 0.15rem solid #B3EFBC !important;
}
.toast-wrap__success .cancel {
  background-color: #B3EFBC;
}
.toast-wrap__success .cancel svg {
  fill: #1ACE37;
}

.toast-wrap__info {
  background: #E9F5FF !important;
  border: 0.15rem solid #B9DEFE !important;
}
.toast-wrap__info .cancel {
  background-color: #B9DEFE;
}
.toast-wrap__info .cancel svg {
  fill: #476885;
}

.toast-wrap__warning {
  background: #FFF6ED !important;
  border: 0.15rem solid #FFE6CD !important;
}
.toast-wrap__warning .cancel {
  background-color: #FFE6CD;
}
.toast-wrap__warning .cancel svg {
  fill: #EA872D;
}

.Toastify__toast {
  padding: 1.6rem !important;
  border-radius: 0.8rem !important;
  display: grid !important;
  align-items: flex-start !important;
  grid-template-columns: min-content 1fr min-content !important;
  grid-gap: 1rem !important;
  width: 50rem !important;
}
@media only screen and (max-width: 42em) {
  .Toastify__toast {
    font-size: 1.5rem !important;
  }
}
.Toastify__toast img {
  margin-right: 1rem !important;
  width: 2rem !important;
  height: 2rem !important;
}
@media only screen and (max-width: 42em) {
  .Toastify__toast {
    border-radius: unset !important;
  }
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  background: #D1F5D7 !important;
  border: 0.15rem solid #B3EFBC !important;
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  background: #FFF6ED !important;
  border: 0.15rem solid #FFE6CD !important;
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  background-color: #fff5f5 !important;
  border: 0.15rem solid #ffdfdd !important;
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  background: #E9F5FF !important;
  border: 0.15rem solid #B9DEFE !important;
}

.Toastify__close-button {
  align-self: center !important;
  border-radius: 50%;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: grid !important;
  place-items: center !important;
  opacity: 1 !important;
  padding: 0.6rem !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  position: relative !important;
}
.Toastify__close-button > * {
  transform: translateY(-0.15rem);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 30px #f7f8f7 inset !important;
  -webkit-box-shadow: 0 0 0 30px #f7f8f7 inset !important;
}

@media only screen and (max-width: 42em) {
  input:focus,
  input[type=text]:focus,
  input[type=email]:focus,
  .select-react:focus,
  .select-react input:focus,
  .bank_select:focus,
  .bank_select input:focus,
  input[type=password]:focus,
  textarea:focus,
  select:focus {
    font-size: 16px;
  }
  .react-select-class > *:nth-child(3) > *:first-child > *:nth-child(2) input:focus {
    font-size: 16px !important;
  }
}
:root {
  --base-white: #ffffff;
  --base-black: #020202;
  --base-background-white: #f9f9f9;
  --base-background-black: #676767;
  --border-green: #0b8376;
  --border-grey-dark: #676767;
  --border-grey-light: #cccccc;
  --border-light: #f7f8f7;
  --primary-green: #0b8376;
  --primary-deep-green: #014345;
  --primary-blue: #476885;
  --primary-orange: #ea872d;
  --primary-purple: #755ae2;
  --primary-black: #020202;
}

/* reset styles */
* {
  color: inherit;
  margin: 0;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 50%;
  }
}

body {
  font-family: "br_firma", sans-serif;
}

ul {
  padding: 0;
  list-style-type: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 7.2rem;
}

h2 {
  font-size: 6rem;
}

h3 {
  font-size: 4.8rem;
}

h4 {
  font-size: 3.6rem;
}

h5 {
  font-size: 3.2rem;
}

h6 {
  font-size: 2.4rem;
}

p {
  font-size: 1.4rem;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.container {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.gap-0 > * {
  padding: 0;
}

.gap-0 {
  margin-left: 0;
  margin-right: 0;
}

.gap-1 > * {
  padding: 1rem;
}

.gap-1 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.gap-2 > * {
  padding: 2rem;
}

.gap-2 {
  margin-left: -2rem;
  margin-right: -2rem;
}

.gap-3 > * {
  padding: 3rem;
}

.gap-3 {
  margin-left: -3rem;
  margin-right: -3rem;
}

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

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

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

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

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

@media (min-width: 0) {
  .col-1-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-xs {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 30em) {
  .col-1-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-sm {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 45em) {
  .col-1-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-md {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 60em) {
  .col-1-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-lg {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
@media (min-width: 75em) {
  .col-1-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 8.3333333333%;
  }
  .col-2-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 16.6666666667%;
  }
  .col-3-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 25%;
  }
  .col-4-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 33.3333333333%;
  }
  .col-5-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 41.6666666667%;
  }
  .col-6-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 50%;
  }
  .col-7-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 58.3333333333%;
  }
  .col-8-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 66.6666666667%;
  }
  .col-9-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 75%;
  }
  .col-10-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 83.3333333333%;
  }
  .col-11-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 91.6666666667%;
  }
  .col-12-xl {
    box-sizing: border-box;
    flex-grow: 0;
    width: 100%;
  }
}
.text-error-light {
  color: #ff0f00;
}

.text-hover-error-light:hover {
  color: #ff0f00;
}

.bg-error-light {
  background-color: #ff0f00;
}

.text-error-light-light-1 {
  color: #ff271a;
}

.text-hover-error-light-light-1:hover {
  color: #ff271a;
}

.bg-error-light-light-1 {
  background-color: #ff271a;
}

.text-error-light-light-2 {
  color: #ff3f33;
}

.text-hover-error-light-light-2:hover {
  color: #ff3f33;
}

.bg-error-light-light-2 {
  background-color: #ff3f33;
}

.text-error-light-light-3 {
  color: #ff574d;
}

.text-hover-error-light-light-3:hover {
  color: #ff574d;
}

.bg-error-light-light-3 {
  background-color: #ff574d;
}

.text-error-light-light-4 {
  color: #ff6f66;
}

.text-hover-error-light-light-4:hover {
  color: #ff6f66;
}

.bg-error-light-light-4 {
  background-color: #ff6f66;
}

.text-error-light-light-5 {
  color: #ff8780;
}

.text-hover-error-light-light-5:hover {
  color: #ff8780;
}

.bg-error-light-light-5 {
  background-color: #ff8780;
}

.text-error-light-light-6 {
  color: #ff9f99;
}

.text-hover-error-light-light-6:hover {
  color: #ff9f99;
}

.bg-error-light-light-6 {
  background-color: #ff9f99;
}

.text-error-light-light-7 {
  color: #ffb7b3;
}

.text-hover-error-light-light-7:hover {
  color: #ffb7b3;
}

.bg-error-light-light-7 {
  background-color: #ffb7b3;
}

.text-error-light-light-8 {
  color: #ffcfcc;
}

.text-hover-error-light-light-8:hover {
  color: #ffcfcc;
}

.bg-error-light-light-8 {
  background-color: #ffcfcc;
}

.text-error-light-light-9 {
  color: #ffe7e6;
}

.text-hover-error-light-light-9:hover {
  color: #ffe7e6;
}

.bg-error-light-light-9 {
  background-color: #ffe7e6;
}

.text-error-light-dark-1 {
  color: #e60e00;
}

.text-hover-error-light-dark-1:hover {
  color: #e60e00;
}

.bg-error-light-dark-1 {
  background-color: #e60e00;
}

.text-error-light-dark-2 {
  color: #cc0c00;
}

.text-hover-error-light-dark-2:hover {
  color: #cc0c00;
}

.bg-error-light-dark-2 {
  background-color: #cc0c00;
}

.text-error-light-dark-3 {
  color: #b30b00;
}

.text-hover-error-light-dark-3:hover {
  color: #b30b00;
}

.bg-error-light-dark-3 {
  background-color: #b30b00;
}

.text-error-light-dark-4 {
  color: #990900;
}

.text-hover-error-light-dark-4:hover {
  color: #990900;
}

.bg-error-light-dark-4 {
  background-color: #990900;
}

.text-error-light-dark-5 {
  color: #800800;
}

.text-hover-error-light-dark-5:hover {
  color: #800800;
}

.bg-error-light-dark-5 {
  background-color: #800800;
}

.text-error-light-dark-6 {
  color: #660600;
}

.text-hover-error-light-dark-6:hover {
  color: #660600;
}

.bg-error-light-dark-6 {
  background-color: #660600;
}

.text-error-light-dark-7 {
  color: #4d0500;
}

.text-hover-error-light-dark-7:hover {
  color: #4d0500;
}

.bg-error-light-dark-7 {
  background-color: #4d0500;
}

.text-error-light-dark-8 {
  color: #330300;
}

.text-hover-error-light-dark-8:hover {
  color: #330300;
}

.bg-error-light-dark-8 {
  background-color: #330300;
}

.text-error-light-dark-9 {
  color: #1a0200;
}

.text-hover-error-light-dark-9:hover {
  color: #1a0200;
}

.bg-error-light-dark-9 {
  background-color: #1a0200;
}

.text-info-light {
  color: #f6c31c;
}

.text-hover-info-light:hover {
  color: #f6c31c;
}

.bg-info-light {
  background-color: #f6c31c;
}

.text-info-light-light-1 {
  color: #f7c933;
}

.text-hover-info-light-light-1:hover {
  color: #f7c933;
}

.bg-info-light-light-1 {
  background-color: #f7c933;
}

.text-info-light-light-2 {
  color: #f8cf49;
}

.text-hover-info-light-light-2:hover {
  color: #f8cf49;
}

.bg-info-light-light-2 {
  background-color: #f8cf49;
}

.text-info-light-light-3 {
  color: #f9d560;
}

.text-hover-info-light-light-3:hover {
  color: #f9d560;
}

.bg-info-light-light-3 {
  background-color: #f9d560;
}

.text-info-light-light-4 {
  color: #fadb77;
}

.text-hover-info-light-light-4:hover {
  color: #fadb77;
}

.bg-info-light-light-4 {
  background-color: #fadb77;
}

.text-info-light-light-5 {
  color: #fbe18e;
}

.text-hover-info-light-light-5:hover {
  color: #fbe18e;
}

.bg-info-light-light-5 {
  background-color: #fbe18e;
}

.text-info-light-light-6 {
  color: #fbe7a4;
}

.text-hover-info-light-light-6:hover {
  color: #fbe7a4;
}

.bg-info-light-light-6 {
  background-color: #fbe7a4;
}

.text-info-light-light-7 {
  color: #fcedbb;
}

.text-hover-info-light-light-7:hover {
  color: #fcedbb;
}

.bg-info-light-light-7 {
  background-color: #fcedbb;
}

.text-info-light-light-8 {
  color: #fdf3d2;
}

.text-hover-info-light-light-8:hover {
  color: #fdf3d2;
}

.bg-info-light-light-8 {
  background-color: #fdf3d2;
}

.text-info-light-light-9 {
  color: #fef9e8;
}

.text-hover-info-light-light-9:hover {
  color: #fef9e8;
}

.bg-info-light-light-9 {
  background-color: #fef9e8;
}

.text-info-light-dark-1 {
  color: #ddb019;
}

.text-hover-info-light-dark-1:hover {
  color: #ddb019;
}

.bg-info-light-dark-1 {
  background-color: #ddb019;
}

.text-info-light-dark-2 {
  color: #c59c16;
}

.text-hover-info-light-dark-2:hover {
  color: #c59c16;
}

.bg-info-light-dark-2 {
  background-color: #c59c16;
}

.text-info-light-dark-3 {
  color: #ac8914;
}

.text-hover-info-light-dark-3:hover {
  color: #ac8914;
}

.bg-info-light-dark-3 {
  background-color: #ac8914;
}

.text-info-light-dark-4 {
  color: #947511;
}

.text-hover-info-light-dark-4:hover {
  color: #947511;
}

.bg-info-light-dark-4 {
  background-color: #947511;
}

.text-info-light-dark-5 {
  color: #7b620e;
}

.text-hover-info-light-dark-5:hover {
  color: #7b620e;
}

.bg-info-light-dark-5 {
  background-color: #7b620e;
}

.text-info-light-dark-6 {
  color: #624e0b;
}

.text-hover-info-light-dark-6:hover {
  color: #624e0b;
}

.bg-info-light-dark-6 {
  background-color: #624e0b;
}

.text-info-light-dark-7 {
  color: #4a3b08;
}

.text-hover-info-light-dark-7:hover {
  color: #4a3b08;
}

.bg-info-light-dark-7 {
  background-color: #4a3b08;
}

.text-info-light-dark-8 {
  color: #312706;
}

.text-hover-info-light-dark-8:hover {
  color: #312706;
}

.bg-info-light-dark-8 {
  background-color: #312706;
}

.text-info-light-dark-9 {
  color: #191403;
}

.text-hover-info-light-dark-9:hover {
  color: #191403;
}

.bg-info-light-dark-9 {
  background-color: #191403;
}

.text-white-light {
  color: #ffffff;
}

.text-hover-white-light:hover {
  color: #ffffff;
}

.bg-white-light {
  background-color: #ffffff;
}

.text-white-light-light-1 {
  color: white;
}

.text-hover-white-light-light-1:hover {
  color: white;
}

.bg-white-light-light-1 {
  background-color: white;
}

.text-white-light-light-2 {
  color: white;
}

.text-hover-white-light-light-2:hover {
  color: white;
}

.bg-white-light-light-2 {
  background-color: white;
}

.text-white-light-light-3 {
  color: white;
}

.text-hover-white-light-light-3:hover {
  color: white;
}

.bg-white-light-light-3 {
  background-color: white;
}

.text-white-light-light-4 {
  color: white;
}

.text-hover-white-light-light-4:hover {
  color: white;
}

.bg-white-light-light-4 {
  background-color: white;
}

.text-white-light-light-5 {
  color: white;
}

.text-hover-white-light-light-5:hover {
  color: white;
}

.bg-white-light-light-5 {
  background-color: white;
}

.text-white-light-light-6 {
  color: white;
}

.text-hover-white-light-light-6:hover {
  color: white;
}

.bg-white-light-light-6 {
  background-color: white;
}

.text-white-light-light-7 {
  color: white;
}

.text-hover-white-light-light-7:hover {
  color: white;
}

.bg-white-light-light-7 {
  background-color: white;
}

.text-white-light-light-8 {
  color: white;
}

.text-hover-white-light-light-8:hover {
  color: white;
}

.bg-white-light-light-8 {
  background-color: white;
}

.text-white-light-light-9 {
  color: white;
}

.text-hover-white-light-light-9:hover {
  color: white;
}

.bg-white-light-light-9 {
  background-color: white;
}

.text-white-light-dark-1 {
  color: #e6e6e6;
}

.text-hover-white-light-dark-1:hover {
  color: #e6e6e6;
}

.bg-white-light-dark-1 {
  background-color: #e6e6e6;
}

.text-white-light-dark-2 {
  color: #cccccc;
}

.text-hover-white-light-dark-2:hover {
  color: #cccccc;
}

.bg-white-light-dark-2 {
  background-color: #cccccc;
}

.text-white-light-dark-3 {
  color: #b3b3b3;
}

.text-hover-white-light-dark-3:hover {
  color: #b3b3b3;
}

.bg-white-light-dark-3 {
  background-color: #b3b3b3;
}

.text-white-light-dark-4 {
  color: #999999;
}

.text-hover-white-light-dark-4:hover {
  color: #999999;
}

.bg-white-light-dark-4 {
  background-color: #999999;
}

.text-white-light-dark-5 {
  color: gray;
}

.text-hover-white-light-dark-5:hover {
  color: gray;
}

.bg-white-light-dark-5 {
  background-color: gray;
}

.text-white-light-dark-6 {
  color: #666666;
}

.text-hover-white-light-dark-6:hover {
  color: #666666;
}

.bg-white-light-dark-6 {
  background-color: #666666;
}

.text-white-light-dark-7 {
  color: #4d4d4d;
}

.text-hover-white-light-dark-7:hover {
  color: #4d4d4d;
}

.bg-white-light-dark-7 {
  background-color: #4d4d4d;
}

.text-white-light-dark-8 {
  color: #333333;
}

.text-hover-white-light-dark-8:hover {
  color: #333333;
}

.bg-white-light-dark-8 {
  background-color: #333333;
}

.text-white-light-dark-9 {
  color: #1a1a1a;
}

.text-hover-white-light-dark-9:hover {
  color: #1a1a1a;
}

.bg-white-light-dark-9 {
  background-color: #1a1a1a;
}

.text-blue-light {
  color: #476885;
}

.text-hover-blue-light:hover {
  color: #476885;
}

.bg-blue-light {
  background-color: #476885;
}

.text-blue-light-light-1 {
  color: #597791;
}

.text-hover-blue-light-light-1:hover {
  color: #597791;
}

.bg-blue-light-light-1 {
  background-color: #597791;
}

.text-blue-light-light-2 {
  color: #6c869d;
}

.text-hover-blue-light-light-2:hover {
  color: #6c869d;
}

.bg-blue-light-light-2 {
  background-color: #6c869d;
}

.text-blue-light-light-3 {
  color: #7e95aa;
}

.text-hover-blue-light-light-3:hover {
  color: #7e95aa;
}

.bg-blue-light-light-3 {
  background-color: #7e95aa;
}

.text-blue-light-light-4 {
  color: #91a4b6;
}

.text-hover-blue-light-light-4:hover {
  color: #91a4b6;
}

.bg-blue-light-light-4 {
  background-color: #91a4b6;
}

.text-blue-light-light-5 {
  color: #a3b4c2;
}

.text-hover-blue-light-light-5:hover {
  color: #a3b4c2;
}

.bg-blue-light-light-5 {
  background-color: #a3b4c2;
}

.text-blue-light-light-6 {
  color: #b5c3ce;
}

.text-hover-blue-light-light-6:hover {
  color: #b5c3ce;
}

.bg-blue-light-light-6 {
  background-color: #b5c3ce;
}

.text-blue-light-light-7 {
  color: #c8d2da;
}

.text-hover-blue-light-light-7:hover {
  color: #c8d2da;
}

.bg-blue-light-light-7 {
  background-color: #c8d2da;
}

.text-blue-light-light-8 {
  color: #dae1e7;
}

.text-hover-blue-light-light-8:hover {
  color: #dae1e7;
}

.bg-blue-light-light-8 {
  background-color: #dae1e7;
}

.text-blue-light-light-9 {
  color: #edf0f3;
}

.text-hover-blue-light-light-9:hover {
  color: #edf0f3;
}

.bg-blue-light-light-9 {
  background-color: #edf0f3;
}

.text-blue-light-dark-1 {
  color: #405e78;
}

.text-hover-blue-light-dark-1:hover {
  color: #405e78;
}

.bg-blue-light-dark-1 {
  background-color: #405e78;
}

.text-blue-light-dark-2 {
  color: #39536a;
}

.text-hover-blue-light-dark-2:hover {
  color: #39536a;
}

.bg-blue-light-dark-2 {
  background-color: #39536a;
}

.text-blue-light-dark-3 {
  color: #32495d;
}

.text-hover-blue-light-dark-3:hover {
  color: #32495d;
}

.bg-blue-light-dark-3 {
  background-color: #32495d;
}

.text-blue-light-dark-4 {
  color: #2b3e50;
}

.text-hover-blue-light-dark-4:hover {
  color: #2b3e50;
}

.bg-blue-light-dark-4 {
  background-color: #2b3e50;
}

.text-blue-light-dark-5 {
  color: #243443;
}

.text-hover-blue-light-dark-5:hover {
  color: #243443;
}

.bg-blue-light-dark-5 {
  background-color: #243443;
}

.text-blue-light-dark-6 {
  color: #1c2a35;
}

.text-hover-blue-light-dark-6:hover {
  color: #1c2a35;
}

.bg-blue-light-dark-6 {
  background-color: #1c2a35;
}

.text-blue-light-dark-7 {
  color: #151f28;
}

.text-hover-blue-light-dark-7:hover {
  color: #151f28;
}

.bg-blue-light-dark-7 {
  background-color: #151f28;
}

.text-blue-light-dark-8 {
  color: #0e151b;
}

.text-hover-blue-light-dark-8:hover {
  color: #0e151b;
}

.bg-blue-light-dark-8 {
  background-color: #0e151b;
}

.text-blue-light-dark-9 {
  color: #070a0d;
}

.text-hover-blue-light-dark-9:hover {
  color: #070a0d;
}

.bg-blue-light-dark-9 {
  background-color: #070a0d;
}

.text-green-light {
  color: #0b8376;
}

.text-hover-green-light:hover {
  color: #0b8376;
}

.bg-green-light {
  background-color: #0b8376;
}

.text-green-light-light-1 {
  color: #238f84;
}

.text-hover-green-light-light-1:hover {
  color: #238f84;
}

.bg-green-light-light-1 {
  background-color: #238f84;
}

.text-green-light-light-2 {
  color: #3c9c91;
}

.text-hover-green-light-light-2:hover {
  color: #3c9c91;
}

.bg-green-light-light-2 {
  background-color: #3c9c91;
}

.text-green-light-light-3 {
  color: #54a89f;
}

.text-hover-green-light-light-3:hover {
  color: #54a89f;
}

.bg-green-light-light-3 {
  background-color: #54a89f;
}

.text-green-light-light-4 {
  color: #6db5ad;
}

.text-hover-green-light-light-4:hover {
  color: #6db5ad;
}

.bg-green-light-light-4 {
  background-color: #6db5ad;
}

.text-green-light-light-5 {
  color: #85c1bb;
}

.text-hover-green-light-light-5:hover {
  color: #85c1bb;
}

.bg-green-light-light-5 {
  background-color: #85c1bb;
}

.text-green-light-light-6 {
  color: #9dcdc8;
}

.text-hover-green-light-light-6:hover {
  color: #9dcdc8;
}

.bg-green-light-light-6 {
  background-color: #9dcdc8;
}

.text-green-light-light-7 {
  color: #b6dad6;
}

.text-hover-green-light-light-7:hover {
  color: #b6dad6;
}

.bg-green-light-light-7 {
  background-color: #b6dad6;
}

.text-green-light-light-8 {
  color: #cee6e4;
}

.text-hover-green-light-light-8:hover {
  color: #cee6e4;
}

.bg-green-light-light-8 {
  background-color: #cee6e4;
}

.text-green-light-light-9 {
  color: #e7f3f1;
}

.text-hover-green-light-light-9:hover {
  color: #e7f3f1;
}

.bg-green-light-light-9 {
  background-color: #e7f3f1;
}

.text-green-light-dark-1 {
  color: #0a766a;
}

.text-hover-green-light-dark-1:hover {
  color: #0a766a;
}

.bg-green-light-dark-1 {
  background-color: #0a766a;
}

.text-green-light-dark-2 {
  color: #09695e;
}

.text-hover-green-light-dark-2:hover {
  color: #09695e;
}

.bg-green-light-dark-2 {
  background-color: #09695e;
}

.text-green-light-dark-3 {
  color: #085c53;
}

.text-hover-green-light-dark-3:hover {
  color: #085c53;
}

.bg-green-light-dark-3 {
  background-color: #085c53;
}

.text-green-light-dark-4 {
  color: #074f47;
}

.text-hover-green-light-dark-4:hover {
  color: #074f47;
}

.bg-green-light-dark-4 {
  background-color: #074f47;
}

.text-green-light-dark-5 {
  color: #06423b;
}

.text-hover-green-light-dark-5:hover {
  color: #06423b;
}

.bg-green-light-dark-5 {
  background-color: #06423b;
}

.text-green-light-dark-6 {
  color: #04342f;
}

.text-hover-green-light-dark-6:hover {
  color: #04342f;
}

.bg-green-light-dark-6 {
  background-color: #04342f;
}

.text-green-light-dark-7 {
  color: #032723;
}

.text-hover-green-light-dark-7:hover {
  color: #032723;
}

.bg-green-light-dark-7 {
  background-color: #032723;
}

.text-green-light-dark-8 {
  color: #021a18;
}

.text-hover-green-light-dark-8:hover {
  color: #021a18;
}

.bg-green-light-dark-8 {
  background-color: #021a18;
}

.text-green-light-dark-9 {
  color: #010d0c;
}

.text-hover-green-light-dark-9:hover {
  color: #010d0c;
}

.bg-green-light-dark-9 {
  background-color: #010d0c;
}

.text-purple-light {
  color: #755ae2;
}

.text-hover-purple-light:hover {
  color: #755ae2;
}

.bg-purple-light {
  background-color: #755ae2;
}

.text-purple-light-light-1 {
  color: #836be5;
}

.text-hover-purple-light-light-1:hover {
  color: #836be5;
}

.bg-purple-light-light-1 {
  background-color: #836be5;
}

.text-purple-light-light-2 {
  color: #917be8;
}

.text-hover-purple-light-light-2:hover {
  color: #917be8;
}

.bg-purple-light-light-2 {
  background-color: #917be8;
}

.text-purple-light-light-3 {
  color: #9e8ceb;
}

.text-hover-purple-light-light-3:hover {
  color: #9e8ceb;
}

.bg-purple-light-light-3 {
  background-color: #9e8ceb;
}

.text-purple-light-light-4 {
  color: #ac9cee;
}

.text-hover-purple-light-light-4:hover {
  color: #ac9cee;
}

.bg-purple-light-light-4 {
  background-color: #ac9cee;
}

.text-purple-light-light-5 {
  color: #baadf1;
}

.text-hover-purple-light-light-5:hover {
  color: #baadf1;
}

.bg-purple-light-light-5 {
  background-color: #baadf1;
}

.text-purple-light-light-6 {
  color: #c8bdf3;
}

.text-hover-purple-light-light-6:hover {
  color: #c8bdf3;
}

.bg-purple-light-light-6 {
  background-color: #c8bdf3;
}

.text-purple-light-light-7 {
  color: #d6cef6;
}

.text-hover-purple-light-light-7:hover {
  color: #d6cef6;
}

.bg-purple-light-light-7 {
  background-color: #d6cef6;
}

.text-purple-light-light-8 {
  color: #e3def9;
}

.text-hover-purple-light-light-8:hover {
  color: #e3def9;
}

.bg-purple-light-light-8 {
  background-color: #e3def9;
}

.text-purple-light-light-9 {
  color: #f1effc;
}

.text-hover-purple-light-light-9:hover {
  color: #f1effc;
}

.bg-purple-light-light-9 {
  background-color: #f1effc;
}

.text-purple-light-dark-1 {
  color: #6951cb;
}

.text-hover-purple-light-dark-1:hover {
  color: #6951cb;
}

.bg-purple-light-dark-1 {
  background-color: #6951cb;
}

.text-purple-light-dark-2 {
  color: #5e48b5;
}

.text-hover-purple-light-dark-2:hover {
  color: #5e48b5;
}

.bg-purple-light-dark-2 {
  background-color: #5e48b5;
}

.text-purple-light-dark-3 {
  color: #523f9e;
}

.text-hover-purple-light-dark-3:hover {
  color: #523f9e;
}

.bg-purple-light-dark-3 {
  background-color: #523f9e;
}

.text-purple-light-dark-4 {
  color: #463688;
}

.text-hover-purple-light-dark-4:hover {
  color: #463688;
}

.bg-purple-light-dark-4 {
  background-color: #463688;
}

.text-purple-light-dark-5 {
  color: #3b2d71;
}

.text-hover-purple-light-dark-5:hover {
  color: #3b2d71;
}

.bg-purple-light-dark-5 {
  background-color: #3b2d71;
}

.text-purple-light-dark-6 {
  color: #2f245a;
}

.text-hover-purple-light-dark-6:hover {
  color: #2f245a;
}

.bg-purple-light-dark-6 {
  background-color: #2f245a;
}

.text-purple-light-dark-7 {
  color: #231b44;
}

.text-hover-purple-light-dark-7:hover {
  color: #231b44;
}

.bg-purple-light-dark-7 {
  background-color: #231b44;
}

.text-purple-light-dark-8 {
  color: #17122d;
}

.text-hover-purple-light-dark-8:hover {
  color: #17122d;
}

.bg-purple-light-dark-8 {
  background-color: #17122d;
}

.text-purple-light-dark-9 {
  color: #0c0917;
}

.text-hover-purple-light-dark-9:hover {
  color: #0c0917;
}

.bg-purple-light-dark-9 {
  background-color: #0c0917;
}

.text-orange-light {
  color: #ea872d;
}

.text-hover-orange-light:hover {
  color: #ea872d;
}

.bg-orange-light {
  background-color: #ea872d;
}

.text-orange-light-light-1 {
  color: #ec9342;
}

.text-hover-orange-light-light-1:hover {
  color: #ec9342;
}

.bg-orange-light-light-1 {
  background-color: #ec9342;
}

.text-orange-light-light-2 {
  color: #ee9f57;
}

.text-hover-orange-light-light-2:hover {
  color: #ee9f57;
}

.bg-orange-light-light-2 {
  background-color: #ee9f57;
}

.text-orange-light-light-3 {
  color: #f0ab6c;
}

.text-hover-orange-light-light-3:hover {
  color: #f0ab6c;
}

.bg-orange-light-light-3 {
  background-color: #f0ab6c;
}

.text-orange-light-light-4 {
  color: #f2b781;
}

.text-hover-orange-light-light-4:hover {
  color: #f2b781;
}

.bg-orange-light-light-4 {
  background-color: #f2b781;
}

.text-orange-light-light-5 {
  color: #f5c396;
}

.text-hover-orange-light-light-5:hover {
  color: #f5c396;
}

.bg-orange-light-light-5 {
  background-color: #f5c396;
}

.text-orange-light-light-6 {
  color: #f7cfab;
}

.text-hover-orange-light-light-6:hover {
  color: #f7cfab;
}

.bg-orange-light-light-6 {
  background-color: #f7cfab;
}

.text-orange-light-light-7 {
  color: #f9dbc0;
}

.text-hover-orange-light-light-7:hover {
  color: #f9dbc0;
}

.bg-orange-light-light-7 {
  background-color: #f9dbc0;
}

.text-orange-light-light-8 {
  color: #fbe7d5;
}

.text-hover-orange-light-light-8:hover {
  color: #fbe7d5;
}

.bg-orange-light-light-8 {
  background-color: #fbe7d5;
}

.text-orange-light-light-9 {
  color: #fdf3ea;
}

.text-hover-orange-light-light-9:hover {
  color: #fdf3ea;
}

.bg-orange-light-light-9 {
  background-color: #fdf3ea;
}

.text-orange-light-dark-1 {
  color: #d37a29;
}

.text-hover-orange-light-dark-1:hover {
  color: #d37a29;
}

.bg-orange-light-dark-1 {
  background-color: #d37a29;
}

.text-orange-light-dark-2 {
  color: #bb6c24;
}

.text-hover-orange-light-dark-2:hover {
  color: #bb6c24;
}

.bg-orange-light-dark-2 {
  background-color: #bb6c24;
}

.text-orange-light-dark-3 {
  color: #a45f20;
}

.text-hover-orange-light-dark-3:hover {
  color: #a45f20;
}

.bg-orange-light-dark-3 {
  background-color: #a45f20;
}

.text-orange-light-dark-4 {
  color: #8c511b;
}

.text-hover-orange-light-dark-4:hover {
  color: #8c511b;
}

.bg-orange-light-dark-4 {
  background-color: #8c511b;
}

.text-orange-light-dark-5 {
  color: #754417;
}

.text-hover-orange-light-dark-5:hover {
  color: #754417;
}

.bg-orange-light-dark-5 {
  background-color: #754417;
}

.text-orange-light-dark-6 {
  color: #5e3612;
}

.text-hover-orange-light-dark-6:hover {
  color: #5e3612;
}

.bg-orange-light-dark-6 {
  background-color: #5e3612;
}

.text-orange-light-dark-7 {
  color: #46290e;
}

.text-hover-orange-light-dark-7:hover {
  color: #46290e;
}

.bg-orange-light-dark-7 {
  background-color: #46290e;
}

.text-orange-light-dark-8 {
  color: #2f1b09;
}

.text-hover-orange-light-dark-8:hover {
  color: #2f1b09;
}

.bg-orange-light-dark-8 {
  background-color: #2f1b09;
}

.text-orange-light-dark-9 {
  color: #170e05;
}

.text-hover-orange-light-dark-9:hover {
  color: #170e05;
}

.bg-orange-light-dark-9 {
  background-color: #170e05;
}

.text-black-light {
  color: #020202;
}

.text-hover-black-light:hover {
  color: #020202;
}

.bg-black-light {
  background-color: #020202;
}

.text-black-light-light-1 {
  color: #1b1b1b;
}

.text-hover-black-light-light-1:hover {
  color: #1b1b1b;
}

.bg-black-light-light-1 {
  background-color: #1b1b1b;
}

.text-black-light-light-2 {
  color: #353535;
}

.text-hover-black-light-light-2:hover {
  color: #353535;
}

.bg-black-light-light-2 {
  background-color: #353535;
}

.text-black-light-light-3 {
  color: #4e4e4e;
}

.text-hover-black-light-light-3:hover {
  color: #4e4e4e;
}

.bg-black-light-light-3 {
  background-color: #4e4e4e;
}

.text-black-light-light-4 {
  color: #676767;
}

.text-hover-black-light-light-4:hover {
  color: #676767;
}

.bg-black-light-light-4 {
  background-color: #676767;
}

.text-black-light-light-5 {
  color: #818181;
}

.text-hover-black-light-light-5:hover {
  color: #818181;
}

.bg-black-light-light-5 {
  background-color: #818181;
}

.text-black-light-light-6 {
  color: #9a9a9a;
}

.text-hover-black-light-light-6:hover {
  color: #9a9a9a;
}

.bg-black-light-light-6 {
  background-color: #9a9a9a;
}

.text-black-light-light-7 {
  color: #b3b3b3;
}

.text-hover-black-light-light-7:hover {
  color: #b3b3b3;
}

.bg-black-light-light-7 {
  background-color: #b3b3b3;
}

.text-black-light-light-8 {
  color: #cccccc;
}

.text-hover-black-light-light-8:hover {
  color: #cccccc;
}

.bg-black-light-light-8 {
  background-color: #cccccc;
}

.text-black-light-light-9 {
  color: #e6e6e6;
}

.text-hover-black-light-light-9:hover {
  color: #e6e6e6;
}

.bg-black-light-light-9 {
  background-color: #e6e6e6;
}

.text-black-light-dark-1 {
  color: #020202;
}

.text-hover-black-light-dark-1:hover {
  color: #020202;
}

.bg-black-light-dark-1 {
  background-color: #020202;
}

.text-black-light-dark-2 {
  color: #020202;
}

.text-hover-black-light-dark-2:hover {
  color: #020202;
}

.bg-black-light-dark-2 {
  background-color: #020202;
}

.text-black-light-dark-3 {
  color: #010101;
}

.text-hover-black-light-dark-3:hover {
  color: #010101;
}

.bg-black-light-dark-3 {
  background-color: #010101;
}

.text-black-light-dark-4 {
  color: #010101;
}

.text-hover-black-light-dark-4:hover {
  color: #010101;
}

.bg-black-light-dark-4 {
  background-color: #010101;
}

.text-black-light-dark-5 {
  color: #010101;
}

.text-hover-black-light-dark-5:hover {
  color: #010101;
}

.bg-black-light-dark-5 {
  background-color: #010101;
}

.text-black-light-dark-6 {
  color: #010101;
}

.text-hover-black-light-dark-6:hover {
  color: #010101;
}

.bg-black-light-dark-6 {
  background-color: #010101;
}

.text-black-light-dark-7 {
  color: #010101;
}

.text-hover-black-light-dark-7:hover {
  color: #010101;
}

.bg-black-light-dark-7 {
  background-color: #010101;
}

.text-black-light-dark-8 {
  color: black;
}

.text-hover-black-light-dark-8:hover {
  color: black;
}

.bg-black-light-dark-8 {
  background-color: black;
}

.text-black-light-dark-9 {
  color: black;
}

.text-hover-black-light-dark-9:hover {
  color: black;
}

.bg-black-light-dark-9 {
  background-color: black;
}

.text-deep-green-light {
  color: #014345;
}

.text-hover-deep-green-light:hover {
  color: #014345;
}

.bg-deep-green-light {
  background-color: #014345;
}

.text-deep-green-light-light-1 {
  color: #1a5658;
}

.text-hover-deep-green-light-light-1:hover {
  color: #1a5658;
}

.bg-deep-green-light-light-1 {
  background-color: #1a5658;
}

.text-deep-green-light-light-2 {
  color: #34696a;
}

.text-hover-deep-green-light-light-2:hover {
  color: #34696a;
}

.bg-deep-green-light-light-2 {
  background-color: #34696a;
}

.text-deep-green-light-light-3 {
  color: #4d7b7d;
}

.text-hover-deep-green-light-light-3:hover {
  color: #4d7b7d;
}

.bg-deep-green-light-light-3 {
  background-color: #4d7b7d;
}

.text-deep-green-light-light-4 {
  color: #678e8f;
}

.text-hover-deep-green-light-light-4:hover {
  color: #678e8f;
}

.bg-deep-green-light-light-4 {
  background-color: #678e8f;
}

.text-deep-green-light-light-5 {
  color: #80a1a2;
}

.text-hover-deep-green-light-light-5:hover {
  color: #80a1a2;
}

.bg-deep-green-light-light-5 {
  background-color: #80a1a2;
}

.text-deep-green-light-light-6 {
  color: #99b4b5;
}

.text-hover-deep-green-light-light-6:hover {
  color: #99b4b5;
}

.bg-deep-green-light-light-6 {
  background-color: #99b4b5;
}

.text-deep-green-light-light-7 {
  color: #b3c7c7;
}

.text-hover-deep-green-light-light-7:hover {
  color: #b3c7c7;
}

.bg-deep-green-light-light-7 {
  background-color: #b3c7c7;
}

.text-deep-green-light-light-8 {
  color: #ccd9da;
}

.text-hover-deep-green-light-light-8:hover {
  color: #ccd9da;
}

.bg-deep-green-light-light-8 {
  background-color: #ccd9da;
}

.text-deep-green-light-light-9 {
  color: #e6ecec;
}

.text-hover-deep-green-light-light-9:hover {
  color: #e6ecec;
}

.bg-deep-green-light-light-9 {
  background-color: #e6ecec;
}

.text-deep-green-light-dark-1 {
  color: #013c3e;
}

.text-hover-deep-green-light-dark-1:hover {
  color: #013c3e;
}

.bg-deep-green-light-dark-1 {
  background-color: #013c3e;
}

.text-deep-green-light-dark-2 {
  color: #013637;
}

.text-hover-deep-green-light-dark-2:hover {
  color: #013637;
}

.bg-deep-green-light-dark-2 {
  background-color: #013637;
}

.text-deep-green-light-dark-3 {
  color: #012f30;
}

.text-hover-deep-green-light-dark-3:hover {
  color: #012f30;
}

.bg-deep-green-light-dark-3 {
  background-color: #012f30;
}

.text-deep-green-light-dark-4 {
  color: #012829;
}

.text-hover-deep-green-light-dark-4:hover {
  color: #012829;
}

.bg-deep-green-light-dark-4 {
  background-color: #012829;
}

.text-deep-green-light-dark-5 {
  color: #012223;
}

.text-hover-deep-green-light-dark-5:hover {
  color: #012223;
}

.bg-deep-green-light-dark-5 {
  background-color: #012223;
}

.text-deep-green-light-dark-6 {
  color: #001b1c;
}

.text-hover-deep-green-light-dark-6:hover {
  color: #001b1c;
}

.bg-deep-green-light-dark-6 {
  background-color: #001b1c;
}

.text-deep-green-light-dark-7 {
  color: #001415;
}

.text-hover-deep-green-light-dark-7:hover {
  color: #001415;
}

.bg-deep-green-light-dark-7 {
  background-color: #001415;
}

.text-deep-green-light-dark-8 {
  color: #000d0e;
}

.text-hover-deep-green-light-dark-8:hover {
  color: #000d0e;
}

.bg-deep-green-light-dark-8 {
  background-color: #000d0e;
}

.text-deep-green-light-dark-9 {
  color: #000707;
}

.text-hover-deep-green-light-dark-9:hover {
  color: #000707;
}

.bg-deep-green-light-dark-9 {
  background-color: #000707;
}

.text-grey {
  color: #cccccc;
}

.text-hover-grey:hover {
  color: #cccccc;
}

.bg-grey {
  background-color: #cccccc;
}

.text-grey-light-1 {
  color: #d1d1d1;
}

.text-hover-grey-light-1:hover {
  color: #d1d1d1;
}

.bg-grey-light-1 {
  background-color: #d1d1d1;
}

.text-grey-light-2 {
  color: #d6d6d6;
}

.text-hover-grey-light-2:hover {
  color: #d6d6d6;
}

.bg-grey-light-2 {
  background-color: #d6d6d6;
}

.text-grey-light-3 {
  color: #dbdbdb;
}

.text-hover-grey-light-3:hover {
  color: #dbdbdb;
}

.bg-grey-light-3 {
  background-color: #dbdbdb;
}

.text-grey-light-4 {
  color: #e0e0e0;
}

.text-hover-grey-light-4:hover {
  color: #e0e0e0;
}

.bg-grey-light-4 {
  background-color: #e0e0e0;
}

.text-grey-light-5 {
  color: #e6e6e6;
}

.text-hover-grey-light-5:hover {
  color: #e6e6e6;
}

.bg-grey-light-5 {
  background-color: #e6e6e6;
}

.text-grey-light-6 {
  color: #ebebeb;
}

.text-hover-grey-light-6:hover {
  color: #ebebeb;
}

.bg-grey-light-6 {
  background-color: #ebebeb;
}

.text-grey-light-7 {
  color: #f0f0f0;
}

.text-hover-grey-light-7:hover {
  color: #f0f0f0;
}

.bg-grey-light-7 {
  background-color: #f0f0f0;
}

.text-grey-light-8 {
  color: whitesmoke;
}

.text-hover-grey-light-8:hover {
  color: whitesmoke;
}

.bg-grey-light-8 {
  background-color: whitesmoke;
}

.text-grey-light-9 {
  color: #fafafa;
}

.text-hover-grey-light-9:hover {
  color: #fafafa;
}

.bg-grey-light-9 {
  background-color: #fafafa;
}

.text-grey-dark-1 {
  color: #b8b8b8;
}

.text-hover-grey-dark-1:hover {
  color: #b8b8b8;
}

.bg-grey-dark-1 {
  background-color: #b8b8b8;
}

.text-grey-dark-2 {
  color: #a3a3a3;
}

.text-hover-grey-dark-2:hover {
  color: #a3a3a3;
}

.bg-grey-dark-2 {
  background-color: #a3a3a3;
}

.text-grey-dark-3 {
  color: #8f8f8f;
}

.text-hover-grey-dark-3:hover {
  color: #8f8f8f;
}

.bg-grey-dark-3 {
  background-color: #8f8f8f;
}

.text-grey-dark-4 {
  color: #7a7a7a;
}

.text-hover-grey-dark-4:hover {
  color: #7a7a7a;
}

.bg-grey-dark-4 {
  background-color: #7a7a7a;
}

.text-grey-dark-5 {
  color: #666666;
}

.text-hover-grey-dark-5:hover {
  color: #666666;
}

.bg-grey-dark-5 {
  background-color: #666666;
}

.text-grey-dark-6 {
  color: #525252;
}

.text-hover-grey-dark-6:hover {
  color: #525252;
}

.bg-grey-dark-6 {
  background-color: #525252;
}

.text-grey-dark-7 {
  color: #3d3d3d;
}

.text-hover-grey-dark-7:hover {
  color: #3d3d3d;
}

.bg-grey-dark-7 {
  background-color: #3d3d3d;
}

.text-grey-dark-8 {
  color: #292929;
}

.text-hover-grey-dark-8:hover {
  color: #292929;
}

.bg-grey-dark-8 {
  background-color: #292929;
}

.text-grey-dark-9 {
  color: #141414;
}

.text-hover-grey-dark-9:hover {
  color: #141414;
}

.bg-grey-dark-9 {
  background-color: #141414;
}

.text-base-bg-black {
  color: #676767;
}

.text-hover-base-bg-black:hover {
  color: #676767;
}

.bg-base-bg-black {
  background-color: #676767;
}

.text-base-bg-black-light-1 {
  color: #767676;
}

.text-hover-base-bg-black-light-1:hover {
  color: #767676;
}

.bg-base-bg-black-light-1 {
  background-color: #767676;
}

.text-base-bg-black-light-2 {
  color: #858585;
}

.text-hover-base-bg-black-light-2:hover {
  color: #858585;
}

.bg-base-bg-black-light-2 {
  background-color: #858585;
}

.text-base-bg-black-light-3 {
  color: #959595;
}

.text-hover-base-bg-black-light-3:hover {
  color: #959595;
}

.bg-base-bg-black-light-3 {
  background-color: #959595;
}

.text-base-bg-black-light-4 {
  color: #a4a4a4;
}

.text-hover-base-bg-black-light-4:hover {
  color: #a4a4a4;
}

.bg-base-bg-black-light-4 {
  background-color: #a4a4a4;
}

.text-base-bg-black-light-5 {
  color: #b3b3b3;
}

.text-hover-base-bg-black-light-5:hover {
  color: #b3b3b3;
}

.bg-base-bg-black-light-5 {
  background-color: #b3b3b3;
}

.text-base-bg-black-light-6 {
  color: #c2c2c2;
}

.text-hover-base-bg-black-light-6:hover {
  color: #c2c2c2;
}

.bg-base-bg-black-light-6 {
  background-color: #c2c2c2;
}

.text-base-bg-black-light-7 {
  color: #d1d1d1;
}

.text-hover-base-bg-black-light-7:hover {
  color: #d1d1d1;
}

.bg-base-bg-black-light-7 {
  background-color: #d1d1d1;
}

.text-base-bg-black-light-8 {
  color: #e1e1e1;
}

.text-hover-base-bg-black-light-8:hover {
  color: #e1e1e1;
}

.bg-base-bg-black-light-8 {
  background-color: #e1e1e1;
}

.text-base-bg-black-light-9 {
  color: #f0f0f0;
}

.text-hover-base-bg-black-light-9:hover {
  color: #f0f0f0;
}

.bg-base-bg-black-light-9 {
  background-color: #f0f0f0;
}

.text-base-bg-black-dark-1 {
  color: #5d5d5d;
}

.text-hover-base-bg-black-dark-1:hover {
  color: #5d5d5d;
}

.bg-base-bg-black-dark-1 {
  background-color: #5d5d5d;
}

.text-base-bg-black-dark-2 {
  color: #525252;
}

.text-hover-base-bg-black-dark-2:hover {
  color: #525252;
}

.bg-base-bg-black-dark-2 {
  background-color: #525252;
}

.text-base-bg-black-dark-3 {
  color: #484848;
}

.text-hover-base-bg-black-dark-3:hover {
  color: #484848;
}

.bg-base-bg-black-dark-3 {
  background-color: #484848;
}

.text-base-bg-black-dark-4 {
  color: #3e3e3e;
}

.text-hover-base-bg-black-dark-4:hover {
  color: #3e3e3e;
}

.bg-base-bg-black-dark-4 {
  background-color: #3e3e3e;
}

.text-base-bg-black-dark-5 {
  color: #343434;
}

.text-hover-base-bg-black-dark-5:hover {
  color: #343434;
}

.bg-base-bg-black-dark-5 {
  background-color: #343434;
}

.text-base-bg-black-dark-6 {
  color: #292929;
}

.text-hover-base-bg-black-dark-6:hover {
  color: #292929;
}

.bg-base-bg-black-dark-6 {
  background-color: #292929;
}

.text-base-bg-black-dark-7 {
  color: #1f1f1f;
}

.text-hover-base-bg-black-dark-7:hover {
  color: #1f1f1f;
}

.bg-base-bg-black-dark-7 {
  background-color: #1f1f1f;
}

.text-base-bg-black-dark-8 {
  color: #151515;
}

.text-hover-base-bg-black-dark-8:hover {
  color: #151515;
}

.bg-base-bg-black-dark-8 {
  background-color: #151515;
}

.text-base-bg-black-dark-9 {
  color: #0a0a0a;
}

.text-hover-base-bg-black-dark-9:hover {
  color: #0a0a0a;
}

.bg-base-bg-black-dark-9 {
  background-color: #0a0a0a;
}

.text-error-dark {
  color: #ff0f00;
}

.text-hover-error-dark:hover {
  color: #ff0f00;
}

.bg-error-dark {
  background-color: #ff0f00;
}

.text-error-dark-light-1 {
  color: #ff271a;
}

.text-hover-error-dark-light-1:hover {
  color: #ff271a;
}

.bg-error-dark-light-1 {
  background-color: #ff271a;
}

.text-error-dark-light-2 {
  color: #ff3f33;
}

.text-hover-error-dark-light-2:hover {
  color: #ff3f33;
}

.bg-error-dark-light-2 {
  background-color: #ff3f33;
}

.text-error-dark-light-3 {
  color: #ff574d;
}

.text-hover-error-dark-light-3:hover {
  color: #ff574d;
}

.bg-error-dark-light-3 {
  background-color: #ff574d;
}

.text-error-dark-light-4 {
  color: #ff6f66;
}

.text-hover-error-dark-light-4:hover {
  color: #ff6f66;
}

.bg-error-dark-light-4 {
  background-color: #ff6f66;
}

.text-error-dark-light-5 {
  color: #ff8780;
}

.text-hover-error-dark-light-5:hover {
  color: #ff8780;
}

.bg-error-dark-light-5 {
  background-color: #ff8780;
}

.text-error-dark-light-6 {
  color: #ff9f99;
}

.text-hover-error-dark-light-6:hover {
  color: #ff9f99;
}

.bg-error-dark-light-6 {
  background-color: #ff9f99;
}

.text-error-dark-light-7 {
  color: #ffb7b3;
}

.text-hover-error-dark-light-7:hover {
  color: #ffb7b3;
}

.bg-error-dark-light-7 {
  background-color: #ffb7b3;
}

.text-error-dark-light-8 {
  color: #ffcfcc;
}

.text-hover-error-dark-light-8:hover {
  color: #ffcfcc;
}

.bg-error-dark-light-8 {
  background-color: #ffcfcc;
}

.text-error-dark-light-9 {
  color: #ffe7e6;
}

.text-hover-error-dark-light-9:hover {
  color: #ffe7e6;
}

.bg-error-dark-light-9 {
  background-color: #ffe7e6;
}

.text-error-dark-dark-1 {
  color: #e60e00;
}

.text-hover-error-dark-dark-1:hover {
  color: #e60e00;
}

.bg-error-dark-dark-1 {
  background-color: #e60e00;
}

.text-error-dark-dark-2 {
  color: #cc0c00;
}

.text-hover-error-dark-dark-2:hover {
  color: #cc0c00;
}

.bg-error-dark-dark-2 {
  background-color: #cc0c00;
}

.text-error-dark-dark-3 {
  color: #b30b00;
}

.text-hover-error-dark-dark-3:hover {
  color: #b30b00;
}

.bg-error-dark-dark-3 {
  background-color: #b30b00;
}

.text-error-dark-dark-4 {
  color: #990900;
}

.text-hover-error-dark-dark-4:hover {
  color: #990900;
}

.bg-error-dark-dark-4 {
  background-color: #990900;
}

.text-error-dark-dark-5 {
  color: #800800;
}

.text-hover-error-dark-dark-5:hover {
  color: #800800;
}

.bg-error-dark-dark-5 {
  background-color: #800800;
}

.text-error-dark-dark-6 {
  color: #660600;
}

.text-hover-error-dark-dark-6:hover {
  color: #660600;
}

.bg-error-dark-dark-6 {
  background-color: #660600;
}

.text-error-dark-dark-7 {
  color: #4d0500;
}

.text-hover-error-dark-dark-7:hover {
  color: #4d0500;
}

.bg-error-dark-dark-7 {
  background-color: #4d0500;
}

.text-error-dark-dark-8 {
  color: #330300;
}

.text-hover-error-dark-dark-8:hover {
  color: #330300;
}

.bg-error-dark-dark-8 {
  background-color: #330300;
}

.text-error-dark-dark-9 {
  color: #1a0200;
}

.text-hover-error-dark-dark-9:hover {
  color: #1a0200;
}

.bg-error-dark-dark-9 {
  background-color: #1a0200;
}

.text-info-dark {
  color: #f6c31c;
}

.text-hover-info-dark:hover {
  color: #f6c31c;
}

.bg-info-dark {
  background-color: #f6c31c;
}

.text-info-dark-light-1 {
  color: #f7c933;
}

.text-hover-info-dark-light-1:hover {
  color: #f7c933;
}

.bg-info-dark-light-1 {
  background-color: #f7c933;
}

.text-info-dark-light-2 {
  color: #f8cf49;
}

.text-hover-info-dark-light-2:hover {
  color: #f8cf49;
}

.bg-info-dark-light-2 {
  background-color: #f8cf49;
}

.text-info-dark-light-3 {
  color: #f9d560;
}

.text-hover-info-dark-light-3:hover {
  color: #f9d560;
}

.bg-info-dark-light-3 {
  background-color: #f9d560;
}

.text-info-dark-light-4 {
  color: #fadb77;
}

.text-hover-info-dark-light-4:hover {
  color: #fadb77;
}

.bg-info-dark-light-4 {
  background-color: #fadb77;
}

.text-info-dark-light-5 {
  color: #fbe18e;
}

.text-hover-info-dark-light-5:hover {
  color: #fbe18e;
}

.bg-info-dark-light-5 {
  background-color: #fbe18e;
}

.text-info-dark-light-6 {
  color: #fbe7a4;
}

.text-hover-info-dark-light-6:hover {
  color: #fbe7a4;
}

.bg-info-dark-light-6 {
  background-color: #fbe7a4;
}

.text-info-dark-light-7 {
  color: #fcedbb;
}

.text-hover-info-dark-light-7:hover {
  color: #fcedbb;
}

.bg-info-dark-light-7 {
  background-color: #fcedbb;
}

.text-info-dark-light-8 {
  color: #fdf3d2;
}

.text-hover-info-dark-light-8:hover {
  color: #fdf3d2;
}

.bg-info-dark-light-8 {
  background-color: #fdf3d2;
}

.text-info-dark-light-9 {
  color: #fef9