.padding-xs {
    padding: 1% !important;
}
.padding-sm {
    padding: 3% !important;
}
.padding-md {
    padding: 5% !important;
}
.padding-lg {
    padding: 10% !important;
}
.padding-xl {
    padding: 20% !important;
}
.padding-xxl {
    padding: 30% !important;
}

.padding-xs-end {
    padding-right: 1% !important;
}
.padding-sm-end {
    padding-right: 3% !important;
}
.padding-md-end {
    padding-right: 5% !important;
}
.padding-lg-end {
    padding-right: 10% !important;
}
.padding-xl-end {
    padding-right: 20% !important;
}
.padding-xxl-end {
    padding-right: 30% !important;
}

.padding-xs-start {
    padding-left: 1% !important;
}
.padding-sm-start {
    padding-left: 3% !important;
}
.padding-md-start {
    padding-left: 5% !important;
}
.padding-lg-start {
    padding-left: 10% !important;
}
.padding-xl-start {
    padding-left: 20% !important;
}
.padding-xxl-start {
    padding-left: 30% !important;
}

.padding-xs-bottom {
    padding-bottom: 1% !important;
}
.padding-sm-bottom {
    padding-bottom: 3% !important;
}
.padding-md-bottom {
    padding-bottom: 5% !important;
}
.padding-lg-bottom {
    padding-bottom: 10% !important;
}
.padding-xl-bottom {
    padding-bottom: 20% !important;
}
.padding-xxl-bottom {
    padding-bottom: 30% !important;
}

.padding-xs-top {
    padding-top: 1% !important;
}
.padding-sm-top {
    padding-top: 3% !important;
}
.padding-md-top {
    padding-top: 5% !important;
}
.padding-lg-top {
    padding-top: 10% !important;
}
.padding-xl-top {
    padding-top: 20% !important;
}
.padding-xxl-top {
    padding-top: 30% !important;
}

.margin-xs-end {
    margin-right: 1% !important;
}
.margin-sm-end {
    margin-right: 3% !important;
}
.margin-md-end {
    margin-right: 5% !important;
}
.margin-lg-end {
    margin-right: 10% !important;
}
.margin-xl-end {
    margin-right: 20% !important;
}
.margin-xxl-end {
    margin-right: 30% !important;
}

.margin-xs-start {
    margin-left: 1% !important;
}
.margin-sm-start {
    margin-left: 3% !important;
}
.margin-md-start {
    margin-left: 5% !important;
}
.margin-lg-start {
    margin-left: 10% !important;
}
.margin-xl-start {
    margin-left: 20% !important;
}
.margin-xxl-start {
    margin-left: 30% !important;
}

.margin-xs-bottom {
    margin-bottom: 1% !important;
}
.margin-sm-bottom {
    margin-bottom: 3% !important;
}
.margin-md-bottom {
    margin-bottom: 5% !important;
}
.margin-lg-bottom {
    margin-bottom: 10% !important;
}
.margin-xl-bottom {
    margin-bottom: 20% !important;
}
.margin-xxl-bottom {
    margin-bottom: 30% !important;
}

.margin-xs-top {
    margin-top: 1% !important;
}
.margin-sm-top {
    margin-top: 3% !important;
}
.margin-md-top {
    margin-top: 5% !important;
}
.margin-lg-top {
    margin-top: 10% !important;
}
.margin-xl-top {
    margin-top: 20% !important;
}
.margin-xxl-top {
    margin-top: 30% !important;
}