general css utility classes

general.scss

.w-2 {
  width: 2px !important;
}

.h-2 {
  height: 2px !important;
}

.mar-2 {
  margin: 2px !important;
}

.pad-2 {
  padding: 2px !important;
}

.mar-t-2 {
  margin-top: 2px !important;
}

.mar-l-2 {
  margin-left: 2px !important;
}

.mar-r-2 {
  margin-right: 2px !important;
}

.mar-b-2 {
  margin-bottom: 2px !important;
}

.pad-t-2 {
  padding-top: 2px !important;
}

.pad-r-2 {
  padding-right: 2px !important;
}

.pad-l-2 {
  padding-left: 2px !important;
}

.pad-b-2 {
  padding-bottom: 2px !important;
}

.w-4 {
  width: 4px !important;
}

.h-4 {
  height: 4px !important;
}

.mar-4 {
  margin: 4px !important;
}

.pad-4 {
  padding: 4px !important;
}

.mar-t-4 {
  margin-top: 4px !important;
}

.mar-l-4 {
  margin-left: 4px !important;
}

.mar-r-4 {
  margin-right: 4px !important;
}

.mar-b-4 {
  margin-bottom: 4px !important;
}

.pad-t-4 {
  padding-top: 4px !important;
}

.pad-r-4 {
  padding-right: 4px !important;
}

.pad-l-4 {
  padding-left: 4px !important;
}

.pad-b-4 {
  padding-bottom: 4px !important;
}

.w-8 {
  width: 8px !important;
}

.h-8 {
  height: 8px !important;
}

.mar-8 {
  margin: 8px !important;
}

.pad-8 {
  padding: 8px !important;
}

.mar-t-8 {
  margin-top: 8px !important;
}

.mar-l-8 {
  margin-left: 8px !important;
}

.mar-r-8 {
  margin-right: 8px !important;
}

.mar-b-8 {
  margin-bottom: 8px !important;
}

.pad-t-8 {
  padding-top: 8px !important;
}

.pad-r-8 {
  padding-right: 8px !important;
}

.pad-l-8 {
  padding-left: 8px !important;
}

.pad-b-8 {
  padding-bottom: 8px !important;
}

.w-16 {
  width: 16px !important;
}

.h-16 {
  height: 16px !important;
}

.mar-16 {
  margin: 16px !important;
}

.pad-16 {
  padding: 16px !important;
}

.mar-t-16 {
  margin-top: 16px !important;
}

.mar-l-16 {
  margin-left: 16px !important;
}

.mar-r-16 {
  margin-right: 16px !important;
}

.mar-b-16 {
  margin-bottom: 16px !important;
}

.pad-t-16 {
  padding-top: 16px !important;
}

.pad-r-16 {
  padding-right: 16px !important;
}

.pad-l-16 {
  padding-left: 16px !important;
}

.pad-b-16 {
  padding-bottom: 16px !important;
}

.w-32 {
  width: 32px !important;
}

.h-32 {
  height: 32px !important;
}

.mar-32 {
  margin: 32px !important;
}

.pad-32 {
  padding: 32px !important;
}

.mar-t-32 {
  margin-top: 32px !important;
}

.mar-l-32 {
  margin-left: 32px !important;
}

.mar-r-32 {
  margin-right: 32px !important;
}

.mar-b-32 {
  margin-bottom: 32px !important;
}

.pad-t-32 {
  padding-top: 32px !important;
}

.pad-r-32 {
  padding-right: 32px !important;
}

.pad-l-32 {
  padding-left: 32px !important;
}

.pad-b-32 {
  padding-bottom: 32px !important;
}

.w-64 {
  width: 64px !important;
}

.h-64 {
  height: 64px !important;
}

.mar-64 {
  margin: 64px !important;
}

.pad-64 {
  padding: 64px !important;
}

.mar-t-64 {
  margin-top: 64px !important;
}

.mar-l-64 {
  margin-left: 64px !important;
}

.mar-r-64 {
  margin-right: 64px !important;
}

.mar-b-64 {
  margin-bottom: 64px !important;
}

.pad-t-64 {
  padding-top: 64px !important;
}

.pad-r-64 {
  padding-right: 64px !important;
}

.pad-l-64 {
  padding-left: 64px !important;
}

.pad-b-64 {
  padding-bottom: 64px !important;
}

.w-128 {
  width: 128px !important;
}

.h-128 {
  height: 128px !important;
}

.mar-128 {
  margin: 128px !important;
}

.pad-128 {
  padding: 128px !important;
}

.mar-t-128 {
  margin-top: 128px !important;
}

.mar-l-128 {
  margin-left: 128px !important;
}

.mar-r-128 {
  margin-right: 128px !important;
}

.mar-b-128 {
  margin-bottom: 128px !important;
}

.pad-t-128 {
  padding-top: 128px !important;
}

.pad-r-128 {
  padding-right: 128px !important;
}

.pad-l-128 {
  padding-left: 128px !important;
}

.pad-b-128 {
  padding-bottom: 128px !important;
}

.w-256 {
  width: 256px !important;
}

.h-256 {
  height: 256px !important;
}

.mar-256 {
  margin: 256px !important;
}

.pad-256 {
  padding: 256px !important;
}

.mar-t-256 {
  margin-top: 256px !important;
}

.mar-l-256 {
  margin-left: 256px !important;
}

.mar-r-256 {
  margin-right: 256px !important;
}

.mar-b-256 {
  margin-bottom: 256px !important;
}

.pad-t-256 {
  padding-top: 256px !important;
}

.pad-r-256 {
  padding-right: 256px !important;
}

.pad-l-256 {
  padding-left: 256px !important;
}

.pad-b-256 {
  padding-bottom: 256px !important;
}

.w-512 {
  width: 512px !important;
}

.h-512 {
  height: 512px !important;
}

.mar-512 {
  margin: 512px !important;
}

.pad-512 {
  padding: 512px !important;
}

.mar-t-512 {
  margin-top: 512px !important;
}

.mar-l-512 {
  margin-left: 512px !important;
}

.mar-r-512 {
  margin-right: 512px !important;
}

.mar-b-512 {
  margin-bottom: 512px !important;
}

.pad-t-512 {
  padding-top: 512px !important;
}

.pad-r-512 {
  padding-right: 512px !important;
}

.pad-l-512 {
  padding-left: 512px !important;
}

.pad-b-512 {
  padding-bottom: 512px !important;
}

.w-1024 {
  width: 1024px !important;
}

.h-1024 {
  height: 1024px !important;
}

.mar-1024 {
  margin: 1024px !important;
}

.pad-1024 {
  padding: 1024px !important;
}

.mar-t-1024 {
  margin-top: 1024px !important;
}

.mar-l-1024 {
  margin-left: 1024px !important;
}

.mar-r-1024 {
  margin-right: 1024px !important;
}

.mar-b-1024 {
  margin-bottom: 1024px !important;
}

.pad-t-1024 {
  padding-top: 1024px !important;
}

.pad-r-1024 {
  padding-right: 1024px !important;
}

.pad-l-1024 {
  padding-left: 1024px !important;
}

.pad-b-1024 {
  padding-bottom: 1024px !important;
}

.no-pad {
  padding: 0px !important;
}

.no-pad-b {
  padding-bottom: 0px !important;
}

.no-pad-r {
  padding-top: 0px !important;
}

.no-pad-l {
  padding-left: 0px !important;
}

.no-pad-r {
  padding-right: 0px !important;
}

.no-mar {
  margin: 0px !important;
}

.no-mar-t {
  margin-top: 0px !important;
}

.no-mar-b {
  margin-bottom: 0px !important;
}

.no-mar-l {
  margin-left: 0px !important;
}

.no-mar-r {
  margin-right: 0px !important;
}

.full-height {
  height: 100vh !important;
  min-height: 100% !important;
}

.full-width {
  display: flex;
  flex: 1 1 auto;
}

.scroll-y {
  overflow-y: auto
}

.scroll-x {
  overflow-x: auto
}

.no-scroll {
  overflow: hidden;
}

.center-crop {
  object-fit: cover;
  object-position: center;
}

.bg-center-crop {
  background-size: cover;
  background-position: center;
}

.clickable {
  cursor: pointer;
}

.bg {
  background: #f5f5f5;
}

.box {
  border: 1px red solid;
}

.top {
  z-index: 9999;
}

.logo {
  @extend .center-crop;
  height: 48px
}

.absolute {
  position: absolute;
}

.static {
  position: static;
}

.img-hoverable {
  transition: all 250ms ease-out;
}

.img-hoverable:hover {
  transform: scale(1.02);
  filter: saturate(125%) brightness(125%);
  -ms-filter: saturate(125%) brightness(125%);
  -webkit-filter: saturate(125%) brightness(125%);
  box-shadow: 0px 0px 4px #414141;
}

.a {
  overflow: hidden !important;
}

.dark {
  opacity: 1;
  color: black;
}

.pull-up {
  position: relative;
  top: -64px;
}

.pull-down {
  position: relative;
  bottom: -64px;
}

.circle {
  border-radius: 50%;
}

.hidden {
  opacity: 0;
  display: none;
  position: absolute;
  left: -999999999px;
}