/* padding */

.pt-1{
  padding-top: 4px;
}
.pt-2{
  padding-top: 8px;
}
.pt-3{
  padding-top: 12px;
}
.pt-4{
  padding-top: 16px;
}
.pt-5{
  padding-top: 20px;
}
.pb-1{
  padding-bottom: 4px;
}
.pb-2{
  padding-bottom: 8px;
}
.pb-3{
  padding-bottom: 12px;
}
.pb-4{
  padding-bottom: 16px;
}
.pb-5{
  padding-bottom: 20px;
}
.pl-1{
  padding-left: 4px;
}
.pl-2{
  padding-left: 8px;
}
.pl-3{
  padding-left: 12px;
}
.pl-4{
  padding-left: 16px;
}
.pr-5{
  padding-left: 20px;
}
.pr-1{
  padding-right: 4px;
}
.pr-2{
  padding-right: 8px;
}
.pr-3{
  padding-right: 12px;
}
.pr-4{
  padding-right: 16px;
}
.pr-5{
  padding-right: 20px;
}
.px-1{
  padding-left: 4px;
  padding-right: 4px;
}
.p-2{
  padding-left: 8px;
  padding-right: 8px;
}
.px-3{
  padding-left: 12px;
  padding-right: 12px;
}
.px-4{
  padding-left: 16px;
  padding-right: 16px;
}
.px-5{
  padding-left: 20px;
  padding-right: 20px;
}
.py-1{
  padding-top: 4px;
  padding-bottom: 4px;
}
.py-2{
  padding-top: 8px;
  padding-bottom: 8px;
}
.py-3{
  padding-top: 12px;
  padding-bottom: 12px;
}
.py-4{
  padding-top: 16px;
  padding-bottom: 16px;
}
.py-5{
  padding-top: 20px;
  padding-bottom: 20px;
}
/* margin */
.mt-1{
  margin-top: 4px;
}
.mt-2{
  margin-top: 8px;
}
.mt-3{
  margin-top: 12px;
}
.mt-4{
  margin-top: 16px;
}
.mt-5{
  margin-top: 20px;
}
.mb-1{
  margin-bottom: 4px;
}
.mb-2{
  margin-bottom: 8px;
}
.mb-3{
  margin-bottom: 12px;
}
.mb-4{
  margin-bottom: 16px;
}
.mb-5{
  margin-bottom: 20px;
}
.ml-1{
  margin-left: 4px;
}
.ml-2{
  margin-left: 8px;
}
.ml-3{
  margin-left: 12px;
}
.ml-4{
  margin-left: 16px;
}
.mr-5{
  margin-left: 20px;
}
.mr-1{
  margin-right: 4px;
}
.mr-2{
  margin-right: 8px;
}
.mr-3{
  margin-right: 12px;
}
.mr-4{
  margin-right: 16px;
}
.mr-5{
  margin-right: 20px;
}
.mx-1{
  margin-left: 4px;
  margin-right: 4px;
}
.mx-2{
  margin-left: 8px;
  margin-right: 8px;
}
.mx-3{
  margin-left: 12px;
  margin-right: 12px;
}
.mx-4{
  margin-left: 16px;
  margin-right: 16px;
}
.mx-5{
  margin-left: 20px;
  margin-right: 20px;
}
.my-1{
  margin-top: 4px;
  margin-bottom: 4px;
}
.my-2{
  margin-top: 8px;
  margin-bottom: 8px;
}
.my-3{
  margin-top: 12px;
  margin-bottom: 12px;
}
.my-4{
  margin-top: 16px;
  margin-bottom: 16px;
}
.my-5{
  margin-top: 20px;
  margin-bottom: 20px;
}
/*position*/
.position-absolute{
  position: absolute;
}
.position-relative{
  position: relative;
}
.left-10{
  left: 10px;
}
.left-15{
  left: 15px;
}
.left-20{
  left: 20px;
}
.left-30{
  left: 30px;
}
.top-10{
  top: 10px;
}
.top-20{
  top: 20px;
}
.right-20{
  right: 20px;
}
.right-30{
  right: 30px;
}
.right-40{
  right: 40px;
}

/* display */
.hand-type{
  cursor: pointer;
}
.d-flex{
  display: flex;
}
.d-inlie-block{
  display: inline-block;
}
.d-grid{
  display: grid;
}
.grid-template-columns{
  grid-template-columns: 0fr 2fr 2fr 0fr;
}
.align-center{
  align-items: center;
}

.algin-items-stretch{
  align-items: stretch;
}
.justify-space-between{
  justify-content: space-between;
}
.justify-space-around{
  justify-content: space-around;
}
.height-auto{
  height: auto;
}
.height-percentage-100{
  height: 100%;
}

/* 字体大小 */
.font-size-12{
  font-size: 12px;
}
.font-size-13{
  font-size: 13px;
}
.font-size-14{
  font-size: 14px;
}
.font-size-14{
  font-size: 14px;
}
.font-size-15{
  font-size: 15px;
}
.font-size-16{
  font-size: 16px;
}
.font-size-17{
  font-size: 17px;
}
.font-size-18{
  font-size: 18px;
}
.font-size-19{
  font-size: 19px;
}
.font-size-20{
  font-size: 20px;
}
.font-size-21{
  font-size: 21px;
}
.font-size-22{
  font-size: 22px;
}
.font-size-23{
  font-size: 23px;
}
.font-size-24{
  font-size: 24px;
}
.font-size-25{
  font-size: 25px;
}
.font-size-26{
  font-size: 26px;
}
.font-size-27{
  font-size: 27px;
}
.font-size-28{
  font-size: 28px;
}
.font-size-30{
  font-size: 30px;
}
.font-size-32{
  font-size: 32px;
}
.font-size-40{
  font-size: 40px;
}
.font-style .font-size-30{
  font-size: 30px;
}
.font-style .font-size-40{
  font-size: 40px;
}

/* 文本对齐方式 */
.text-center{
  text-align: center;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
.text-center-justify{
  text-align: justify;
}


/* 字体颜色 */
.color-red{
  color: red;
}
.color-333{
  color: #333;
}
.color-666{
  color: #666;
}
.color-999{
  color: #999;
}
.color-59adf7{
  color: #59adf7;
}
.color-e94848{
  color: #e94848;
}
.color-59adf7{
  color: #59adf7;
}
.color-00000073{
  color: #00000073;
}
.color-FB8C00{
  color: #FB8C00;
}
.color-03A9F4{
  color: #03A9F4;
}
.color-D32F2F{
  color: #D32F2F;
}
.color-1DE9B6{
  color: #1DE9B6;
}
.color-FF3D00{
  color: #FF3D00;
}
.color-64DD17{
  color: #64DD17;
}
.color-4CAF50{
  color: #4CAF50;
}
.color-0091EA{
  color: #0091EA;
}
.color-FF6D00{
  color: #FF6D00;
}
.color-FFD600{
  color: #FFD600;
}
.color-FF9100{
  color: #FF9100;
}
.color-F56C6C{
  color: #F56C6C;
}
.color-ff9900{
  color: #ff9900;
}
/* 字体粗细 */
.font-weight-500{
  font-weight: 500;
}
.font-weight-600{
  font-weight: 600;
}
.font-weight-700{
  font-weight: 700;
}
.font-weight-800{
  font-weight: 800;
}
.font-weight-900{
  font-weight: 900;
}


/* 宽度百分比 */
.width-percentage-10{
  width: 10%;
}
.width-percentage-20{
  width: 20%;
}
.width-percentage-30{
  width: 30%;
}
.width-percentage-40{
  width: 40%;
}
.width-percentage-50{
  width: 50%;
}
.width-percentage-60{
  width: 60%;
}
.width-percentage-70{
  width: 70%;
}
.width-percentage-80{
  width: 80%;
}
.width-percentage-90{
  width: 90%;
}
.width-percentage-100{
  width: 100%;
}


/*宽度px*/
.width-60-px{
  width: 60px;
}
.width-70-px{
  width: 70px;
}
.width-80-px{
  width: 80px;
}
.width-90-px{
  width: 90px;
}
.width-100-px{
  width: 100px;
}

.width-3rem{
  width: 3rem !important;
}
