html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.hidden {
  display: none;
}

.absolute-full {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
}

.col {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 10000 1 0%;
}

.col-1 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 1);
}

.col-2 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 2);
}

.col-3 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 3);
}

.col-4 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 4);
}

.col-5 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 5);
}

.col-6 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 6);
}

.col-7 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 7);
}

.col-8 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 8);
}

.col-9 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 9);
}

.col-10 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 10);
}

.col-11 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 11);
}

.col-12 {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 calc(100% / 12 * 12);
}

.col-auto {
  width: auto;
  min-width: 0;
  max-width: 100%;
  flex: 0 0 auto;
}

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

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

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

.absolute-position {
  position: absolute;
}

.relative-position {
  position: relative;
}

.row, .column, .flex {
  display: flex;
  flex-wrap: wrap;
}

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.align-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.font-bold {
  font-weight: 700;
}

.pb-sm, .py-sm, .pa-sm { padding-bottom: 4px; }
.pl-sm, .px-sm, .pa-sm { padding-left: 4px; }
.pt-sm, .py-sm, .pa-sm { padding-top: 4px; }
.pr-sm, .px-sm, .pa-sm { padding-right: 4px; }

.pb-md, .py-md, .pa-md { padding-bottom: 8px; }
.pl-md, .px-md, .pa-md { padding-left: 8px; }
.pt-md, .py-md, .pa-md { padding-top: 8px; }
.pr-md, .px-md, .pa-md { padding-right: 8px; }

.pb-lg, .py-lg, .pa-lg { padding-bottom: 16px; }
.pl-lg, .px-lg, .pa-lg { padding-left: 16px; }
.pt-lg, .py-lg, .pa-lg { padding-top: 16px; }
.pr-lg, .px-lg, .pa-lg { padding-right: 16px; }

.mb-sm, .my-sm, .ma-sm { margin-bottom: 4px; }
.ml-sm, .mx-sm, .ma-sm { margin-left: 4px; }
.mt-sm, .my-sm, .ma-sm { margin-top: 4px; }
.mr-sm, .mx-sm, .ma-sm { margin-right: 4px; }

.mb-md, .my-md, .ma-md { margin-bottom: 8px; }
.ml-md, .mx-md, .ma-md { margin-left: 8px; }
.mt-md, .my-md, .ma-md { margin-top: 8px; }
.mr-md, .mx-md, .ma-md { margin-right: 8px; }

.mb-lg, .my-lg, .ma-lg { margin-bottom: 16px; }
.ml-lg, .mx-lg, .ma-lg { margin-left: 16px; }
.mt-lg, .my-lg, .ma-lg { margin-top: 16px; }
.mr-lg, .mx-lg, .ma-lg { margin-right: 16px; }