.x-top-0 {
  top: 0 !important;
}

.x-top-50 {
  top: 50% !important;
}

.x-top-100 {
  top: 100% !important;
}

.x-bottom-0 {
  bottom: 0 !important;
}

.x-center {
  transform: translate(-50%,-50%) !important;
  left: 50% !important;
  right: 50% !important;
  top: 50% !important;
  bottom: 50% !important;
}

.x-h-center {
  transform: translateX(-50%) !important;
  left: 50% !important;
}

.x-v-center {
  transform: translateY(-50%) !important;
  top: 50% !important;
}

.x-bottom-50 {
  bottom: 50% !important;
}

.x-bottom-100 {
  bottom: 100% !important;
}

.x-start-0 {
  left: 0 !important;
}

.x-start-50 {
  left: 50% !important;
}

.x-start-100 {
  left: 100% !important;
}

.x-end-0 {
  right: 0 !important;
}

.x-end-50 {
  right: 50% !important;
}

.x-end-100 {
  right: 100% !important;
}