.x-mg-30 {
  margin: 30px;
}
.x-mg-20 {
  margin: 20px;
}
.x-mg-10 {
  margin: 10px;
}

.x-mgt-30 {
  margin-top: 30px;
}
.x-mgt-20 {
  margin-top: 20px;
}
.x-mgt-10 {
  margin-top: 10px;
}
.x-mgt-40 {
  margin-top: 40px;
}

.x-mgl-5 {
    margin-left: 5px;
}
.x-mgl-10 {
  margin-left: 10px;
}
.x-mgl-20 {
  margin-left: 20px;
}
.x-mgl-30 {
  margin-left: 30px;
}
.x-mgl-40 {
  margin-left: 40px;
}
.x-mgl-50 {
  margin-left: 50px;
}
.x-mgl-60 {
  margin-left: 60px;
}

.x-mgr-5 {
    margin-right: 5px;
}
.x-mgr-10 {
  margin-right: 10px;
}
.x-mgr-15 {
  margin-right: 15px;
}
.x-mgr-16 {
  margin-right: 15px;
}
.x-mgr-20 {
  margin-right: 20px;
}
.x-mgr-30 {
  margin-right: 30px;
}
.x-mgr-40 {
  margin-right: 40px;
}

.x-mglr-5 {
    margin-left: 5px;
    margin-right: 5px;
}
.x-mglr-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.x-mglr-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.x-mglr-30 {
  margin-left: 30px;
  margin-right: 30px;
}

.x-pd-10 {
  padding: 10px;
}
.x-pd-20 {
  padding: 20px;
}
.x-pd-30 {
  padding: 30px;
}

.x-pdl-10 {
  padding-left: 10px;
}
.x-pdl-20 {
  padding-left: 20px;
}
.x-pdl-30 {
  padding-left: 30px;
}

.x-pdr-10 {
  padding-right: 10px;
}
.x-pdr-20 {
  padding-right: 20px;
}
.x-pdr-30 {
  padding-right: 30px;
}

.x-pdt-10 {
  padding-top: 10px;
}
.x-pdt-20 {
  padding-top: 20px;
}
.x-pdt-30 {
  padding-top: 30px;
}

.x-pdb-10 {
  padding-bottom: 10px;
}
.x-pdb-20 {
  padding-bottom: 20px;
}
.x-pdb-30 {
  padding-bottom: 30px;
}

.x-pdtb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.x-pdtb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.x-pdtb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.x-pdlr-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.x-pdlr-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.x-pdlr-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.x-border-error {
  border:1px solid #dd524d;
}
.x-border-success {
  border:1px solid #4cd964;
}
.x-border-warning {
  border:1px solid #f0ad4e;
}
.x-border-primary {
  border:1px solid #007aff;
}
.x-border-none {
  border: none;
}
.x-border-1 {
  border-left: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
  border-top: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
}
.x-border-top-1 {
  border-top: 1px solid #DDDDDD;
}
.x-border-left,
.x-border-left-1 {
  border-left: 1px solid #DDDDDD;
}
.x-border-right,
.x-border-right-1 {
  border-right: 1px solid #DDDDDD;
}
.x-border-top,
.x-border-top-1 {
  border-top: 1px solid #DDDDDD;
}
.x-border-bottom,
.x-border-bottom-1 {
  border-bottom: 1px solid #DDDDDD;
}
.x-border-radius {
  border-radius: 8px;
}
.x-border-0 {
  border-left-width: 0!important;
  border-right-width: 0!important;
  border-top-width: 0!important;
  border-bottom-width: 0!important;
}

.x-right-rext-error {
  color: #dd524d!important;
}
.x-right-rext-success {
  color: #4cd964!important;
}
.x-right-rext-warning {
  color: #f0ad4e!important;
}
.x-right-rext-primary {
  color: #007aff!important;
}
.x-flex-row,
.x-flex-row-center,
.x-flex-row-between {
  display: flex;
  flex-direction: row;
}
.x-flex-column {
  display: flex;
  flex-direction: column;
}
.x-flex-align-center,
.x-flex-row-center,
.x-flex-row-between {
  align-items: center;
}
.x-flex-justify-between,
.x-flex-row-between {
  justify-content: space-between;
}
.x-flex-justify-center,
.x-flex-row-center {
  justify-content: center;
}
.x-flex-justify-end {
  justify-content: flex-end;
}
.x-flex-1 {
  flex: 1;
}
.x-flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.x-flex-wrap {
  flex-wrap: wrap;
}

.x-text-center {
  text-align: center;
}
.x-text-size-12 {
  font-size: 12px;
}
.x-text-size-14 {
  font-size: 14px;
}
.x-text-size-16 {
  font-size: 16px;
}
.x-text-size-18 {
  font-size: 18px;
}
.x-text-size-20 {
  font-size: 20px;
}
.x-text-size-22 {
  font-size: 22px;
}
.x-text-size-24 {
  font-size: 24px;
}
.x-text-size-28 {
  font-size: 28px;
}
.x-text-size-30 {
  font-size: 30px;
}
.x-text-size-32 {
  font-size: 32px;
}
.x-text-size-34 {
  font-size: 34px;
}
.x-text-size-36 {
  font-size: 36px;
}
.x-text-size-38 {
  font-size: 38px;
}
.x-text-size-40 {
  font-size: 40px;
}

.x-text-weigth-bold {
  font-weight: bold;
}

.x-text-color-white {
  color: #FFFFFF;
}
.x-text-color-3 {
  color: #333333;
}
.x-text-color-6 {
  color: #666666;
}
.x-text-color-8 {
  color: #888888;
}
.x-text-color-a {
    color: #aaaaaa;
}
.x-text-color-primary {
  color: #007aff;
}
.x-text-color-success {
  color: #4cd964;
}
.x-text-color-warning {
  color: #f0ad4e;
}
.x-text-color-error {
  color: #dd524d;
}

.x-cursor-pointer {
    cursor: pointer;
}

.x-bg-white {
  background-color: #FFFFFF;
}
.x-bg-page {
  background-color: #F5F5F5;
}
.x-bg-primary {
  background-color: #007aff;
}
.x-bg-success {
  background-color: #4cd964;
}
.x-bg-warning {
  background-color: #f0ad4e;
}
.x-bg-error {
  background-color: #dd524d;
}
.x-image-state,
.x-image-delete {
  position: absolute;
  top: 0;
  right: 0;
}
.x-image-state {
  left: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.x-image-80 {
  width: 80px;
  height: 80px;
}
.x-image-90 {
  width: 90px;
  height: 90px;
}
.x-image-100 {
  width: 100px;
  height: 100px;
}
.x-image-120 {
  width: 120px;
  height: 120px;
}
.x-image-150 {
  width: 150px;
  height: 150px;
}

.x-line-height-1 {
  line-height: 1;
}
.x-h-30 {
  height: 30px;
}
.x-h-auto {
  height: auto!important;
}

.x-w-80 {
  width: 80px;
}
.x-w-100 {
  width: 100px;
}
.x-w-150 {
  width: 150px;
}
.x-w-160 {
  width: 160px;
}
.x-w-170 {
  width: 170px;
}
.x-w-180 {
  width: 180px;
}
.x-w-190 {
  width: 190px;
}
.x-w-200 {
  width: 200px;
}
.x-w-210 {
  width: 210px;
}
.x-w-220 {
  width: 220px;
}
.x-w-230 {
  width: 230px;
}
.x-w-240 {
  width: 240px;
}
.x-w-250 {
  width: 250px;
}
.x-w-280 {
  width: 280px;
}
.x-w-300 {
  width: 300px;
}
.x-w-full,
.x-w-750 {
  width: 750px;
}

.x-fixed-bottom {
  position: fixed;
  bottom: 0;
  width: 750px;
}
.x-fixed-bottom-gap-150 {
  height: 150px;
}
.x-fixed-bottom-gap {
  height: 250px;
}
.x-fixed-top {
  position: fixed;
  top: 0;
  width: 750px;
}
.x-display-inline {
    display: inline-block
}
.x-float-left {
    float: left;
    display: inline-block
}
.x-float-right {
    float: right;
    display: inline-block
}
.x-float-clear:after {
    display: block;
    content: "";
    clear: both;
}