Skip to content

Instantly share code, notes, and snippets.

@zaydek

zaydek/input.scss

Created Oct 14, 2020
Embed
What would you like to do?
Generated by SassMeister.com.
$breakpoints: (
"xs": 640,
"sm": 768,
"md": 896,
"lg": 1024,
"xl": 1280,
);
// prettier-ignore
$pxs:
0, 1, 2, 3, 4, 5, 6, 7,
8, 10, 12, 14, 16, 18, 20, 22,
24, 28, 32, 36, 40, 44, 48, 52,
64, 72, 80, 88, 96, 104, 112, 120,
128;
// prettier-ignore
$-pxs:
-0, -1, -2, -3, -4, -5, -6, -7,
-8, -10, -12, -14, -16, -18, -20, -22,
-24, -28, -32, -36, -40, -44, -48, -52,
-64, -72, -80, -88, -96, -104, -112, -120,
-128;
@mixin directional($property, $shorthand, $dir, $range) {
@each $value in $range {
$selector: if(not &, ".", & + "\\:");
$negative: if($value < 0, "-", "");
@at-root {
#{$selector}#{$negative}#{$shorthand}#{$dir}-#{abs($value)} {
@if $dir == "" or $dir == "y" or $dir == "t" {
#{$property}-top: rem($value);
}
@if $dir == "" or $dir == "x" or $dir == "r" {
#{$property}-right: rem($value);
}
@if $dir == "" or $dir == "y" or $dir == "b" {
#{$property}-bottom: rem($value);
}
@if $dir == "" or $dir == "x" or $dir == "l" {
#{$property}-left: rem($value);
}
}
}
}
}
@mixin flex-row {
$selector: if(not &, ".", & + "\\:");
@at-root {
#{$selector}flex-row {
display: flex;
flex-direction: row;
}
#{$selector}inline-flex-row {
display: inline-flex;
flex-direction: row;
}
// prettier-ignore
#{$selector}flex-row,
#{$selector}inline-flex-row {
&.x-start { justify-content: flex-start; }
&.x-center { justify-content: center; }
&.x-end { justify-content: flex-end; }
&.x-between { justify-content: space-between; }
&.x-around { justify-content: space-around; }
&.x-evenly { justify-content: space-evenly; }
&.y-stretch { align-items: stretch; }
&.y-start { align-items: flex-start; }
&.y-center { align-items: center; }
&.y-end { align-items: flex-end; }
&.y-baseline { align-items: baseline; }
&.start {
justify-content: flex-start;
align-items: flex-start;
}
&.center {
justify-content: center;
align-items: center;
}
&.end {
justify-content: flex-end;
align-items: flex-end;
}
&.no-wrap { flex-wrap: nowrap; }
&.wrap { flex-wrap: wrap; }
&.wrap-reverse { flex-wrap: wrap-reverse; }
}
}
}
@mixin flex-col {
$selector: if(not &, ".", & + "\\:");
@at-root {
#{$selector}flex-col {
display: flex;
flex-direction: col;
}
#{$selector}inline-flex-col {
display: inline-flex;
flex-direction: col;
}
// prettier-ignore
#{$selector}flex-col,
#{$selector}inline-flex-col {
&.x-stretch { align-items: stretch; }
&.x-start { align-items: flex-start; }
&.x-center { align-items: center; }
&.x-end { align-items: flex-end; }
&.x-baseline { align-items: baseline; }
&.y-start { justify-content: flex-start; }
&.y-center { justify-content: center; }
&.y-end { justify-content: flex-end; }
&.y-between { justify-content: space-between; }
&.y-around { justify-content: space-around; }
&.y-evenly { justify-content: space-evenly; }
&.start {
justify-content: flex-start;
align-items: flex-start;
}
&.center {
justify-content: center;
align-items: center;
}
&.end {
justify-content: flex-end;
align-items: flex-end;
}
&.no-wrap { flex-wrap: nowrap; }
&.wrap { flex-wrap: wrap; }
&.wrap-reverse { flex-wrap: wrap-reverse; }
}
}
}
@mixin margin {
@include directional(margin, "m", "", join($pxs, $-pxs));
@include directional(margin, "m", "y", join($pxs, $-pxs));
@include directional(margin, "m", "t", join($pxs, $-pxs));
@include directional(margin, "m", "b", join($pxs, $-pxs));
@include directional(margin, "m", "x", join($pxs, $-pxs));
@include directional(margin, "m", "l", join($pxs, $-pxs));
@include directional(margin, "m", "r", join($pxs, $-pxs));
}
@mixin padding {
@include directional(padding, "p", "", $pxs);
@include directional(padding, "p", "y", $pxs);
@include directional(padding, "p", "t", $pxs);
@include directional(padding, "p", "b", $pxs);
@include directional(padding, "p", "x", $pxs);
@include directional(padding, "p", "l", $pxs);
@include directional(padding, "p", "r", $pxs);
}
@mixin flex {
@include flex-row;
@include flex-col;
}
@mixin pointer-events {
$selector: if(not &, ".", & + "\\:");
@at-root {
#{$selector}no-pointer-events {
pointer-events: none;
}
#{$selector}pointer-events {
pointer-events: auto;
}
}
}
@at-root {
@include margin;
@include padding;
@include flex;
@include pointer-events;
@each $key, $value in $breakpoints {
@media (min-width: #{$value}px) {
.#{$key} {
@include margin;
@include padding;
@include flex;
@include pointer-events;
}
}
}
}
.m-0 {
margin-top: rem(0);
margin-right: rem(0);
margin-bottom: rem(0);
margin-left: rem(0);
}
.m-1 {
margin-top: rem(1);
margin-right: rem(1);
margin-bottom: rem(1);
margin-left: rem(1);
}
.m-2 {
margin-top: rem(2);
margin-right: rem(2);
margin-bottom: rem(2);
margin-left: rem(2);
}
.m-3 {
margin-top: rem(3);
margin-right: rem(3);
margin-bottom: rem(3);
margin-left: rem(3);
}
.m-4 {
margin-top: rem(4);
margin-right: rem(4);
margin-bottom: rem(4);
margin-left: rem(4);
}
.m-5 {
margin-top: rem(5);
margin-right: rem(5);
margin-bottom: rem(5);
margin-left: rem(5);
}
.m-6 {
margin-top: rem(6);
margin-right: rem(6);
margin-bottom: rem(6);
margin-left: rem(6);
}
.m-7 {
margin-top: rem(7);
margin-right: rem(7);
margin-bottom: rem(7);
margin-left: rem(7);
}
.m-8 {
margin-top: rem(8);
margin-right: rem(8);
margin-bottom: rem(8);
margin-left: rem(8);
}
.m-10 {
margin-top: rem(10);
margin-right: rem(10);
margin-bottom: rem(10);
margin-left: rem(10);
}
.m-12 {
margin-top: rem(12);
margin-right: rem(12);
margin-bottom: rem(12);
margin-left: rem(12);
}
.m-14 {
margin-top: rem(14);
margin-right: rem(14);
margin-bottom: rem(14);
margin-left: rem(14);
}
.m-16 {
margin-top: rem(16);
margin-right: rem(16);
margin-bottom: rem(16);
margin-left: rem(16);
}
.m-18 {
margin-top: rem(18);
margin-right: rem(18);
margin-bottom: rem(18);
margin-left: rem(18);
}
.m-20 {
margin-top: rem(20);
margin-right: rem(20);
margin-bottom: rem(20);
margin-left: rem(20);
}
.m-22 {
margin-top: rem(22);
margin-right: rem(22);
margin-bottom: rem(22);
margin-left: rem(22);
}
.m-24 {
margin-top: rem(24);
margin-right: rem(24);
margin-bottom: rem(24);
margin-left: rem(24);
}
.m-28 {
margin-top: rem(28);
margin-right: rem(28);
margin-bottom: rem(28);
margin-left: rem(28);
}
.m-32 {
margin-top: rem(32);
margin-right: rem(32);
margin-bottom: rem(32);
margin-left: rem(32);
}
.m-36 {
margin-top: rem(36);
margin-right: rem(36);
margin-bottom: rem(36);
margin-left: rem(36);
}
.m-40 {
margin-top: rem(40);
margin-right: rem(40);
margin-bottom: rem(40);
margin-left: rem(40);
}
.m-44 {
margin-top: rem(44);
margin-right: rem(44);
margin-bottom: rem(44);
margin-left: rem(44);
}
.m-48 {
margin-top: rem(48);
margin-right: rem(48);
margin-bottom: rem(48);
margin-left: rem(48);
}
.m-52 {
margin-top: rem(52);
margin-right: rem(52);
margin-bottom: rem(52);
margin-left: rem(52);
}
.m-64 {
margin-top: rem(64);
margin-right: rem(64);
margin-bottom: rem(64);
margin-left: rem(64);
}
.m-72 {
margin-top: rem(72);
margin-right: rem(72);
margin-bottom: rem(72);
margin-left: rem(72);
}
.m-80 {
margin-top: rem(80);
margin-right: rem(80);
margin-bottom: rem(80);
margin-left: rem(80);
}
.m-88 {
margin-top: rem(88);
margin-right: rem(88);
margin-bottom: rem(88);
margin-left: rem(88);
}
.m-96 {
margin-top: rem(96);
margin-right: rem(96);
margin-bottom: rem(96);
margin-left: rem(96);
}
.m-104 {
margin-top: rem(104);
margin-right: rem(104);
margin-bottom: rem(104);
margin-left: rem(104);
}
.m-112 {
margin-top: rem(112);
margin-right: rem(112);
margin-bottom: rem(112);
margin-left: rem(112);
}
.m-120 {
margin-top: rem(120);
margin-right: rem(120);
margin-bottom: rem(120);
margin-left: rem(120);
}
.m-128 {
margin-top: rem(128);
margin-right: rem(128);
margin-bottom: rem(128);
margin-left: rem(128);
}
.m-0 {
margin-top: rem(0);
margin-right: rem(0);
margin-bottom: rem(0);
margin-left: rem(0);
}
.-m-1 {
margin-top: rem(-1);
margin-right: rem(-1);
margin-bottom: rem(-1);
margin-left: rem(-1);
}
.-m-2 {
margin-top: rem(-2);
margin-right: rem(-2);
margin-bottom: rem(-2);
margin-left: rem(-2);
}
.-m-3 {
margin-top: rem(-3);
margin-right: rem(-3);
margin-bottom: rem(-3);
margin-left: rem(-3);
}
.-m-4 {
margin-top: rem(-4);
margin-right: rem(-4);
margin-bottom: rem(-4);
margin-left: rem(-4);
}
.-m-5 {
margin-top: rem(-5);
margin-right: rem(-5);
margin-bottom: rem(-5);
margin-left: rem(-5);
}
.-m-6 {
margin-top: rem(-6);
margin-right: rem(-6);
margin-bottom: rem(-6);
margin-left: rem(-6);
}
.-m-7 {
margin-top: rem(-7);
margin-right: rem(-7);
margin-bottom: rem(-7);
margin-left: rem(-7);
}
.-m-8 {
margin-top: rem(-8);
margin-right: rem(-8);
margin-bottom: rem(-8);
margin-left: rem(-8);
}
.-m-10 {
margin-top: rem(-10);
margin-right: rem(-10);
margin-bottom: rem(-10);
margin-left: rem(-10);
}
.-m-12 {
margin-top: rem(-12);
margin-right: rem(-12);
margin-bottom: rem(-12);
margin-left: rem(-12);
}
.-m-14 {
margin-top: rem(-14);
margin-right: rem(-14);
margin-bottom: rem(-14);
margin-left: rem(-14);
}
.-m-16 {
margin-top: rem(-16);
margin-right: rem(-16);
margin-bottom: rem(-16);
margin-left: rem(-16);
}
.-m-18 {
margin-top: rem(-18);
margin-right: rem(-18);
margin-bottom: rem(-18);
margin-left: rem(-18);
}
.-m-20 {
margin-top: rem(-20);
margin-right: rem(-20);
margin-bottom: rem(-20);
margin-left: rem(-20);
}
.-m-22 {
margin-top: rem(-22);
margin-right: rem(-22);
margin-bottom: rem(-22);
margin-left: rem(-22);
}
.-m-24 {
margin-top: rem(-24);
margin-right: rem(-24);
margin-bottom: rem(-24);
margin-left: rem(-24);
}
.-m-28 {
margin-top: rem(-28);
margin-right: rem(-28);
margin-bottom: rem(-28);
margin-left: rem(-28);
}
.-m-32 {
margin-top: rem(-32);
margin-right: rem(-32);
margin-bottom: rem(-32);
margin-left: rem(-32);
}
.-m-36 {
margin-top: rem(-36);
margin-right: rem(-36);
margin-bottom: rem(-36);
margin-left: rem(-36);
}
.-m-40 {
margin-top: rem(-40);
margin-right: rem(-40);
margin-bottom: rem(-40);
margin-left: rem(-40);
}
.-m-44 {
margin-top: rem(-44);
margin-right: rem(-44);
margin-bottom: rem(-44);
margin-left: rem(-44);
}
.-m-48 {
margin-top: rem(-48);
margin-right: rem(-48);
margin-bottom: rem(-48);
margin-left: rem(-48);
}
.-m-52 {
margin-top: rem(-52);
margin-right: rem(-52);
margin-bottom: rem(-52);
margin-left: rem(-52);
}
.-m-64 {
margin-top: rem(-64);
margin-right: rem(-64);
margin-bottom: rem(-64);
margin-left: rem(-64);
}
.-m-72 {
margin-top: rem(-72);
margin-right: rem(-72);
margin-bottom: rem(-72);
margin-left: rem(-72);
}
.-m-80 {
margin-top: rem(-80);
margin-right: rem(-80);
margin-bottom: rem(-80);
margin-left: rem(-80);
}
.-m-88 {
margin-top: rem(-88);
margin-right: rem(-88);
margin-bottom: rem(-88);
margin-left: rem(-88);
}
.-m-96 {
margin-top: rem(-96);
margin-right: rem(-96);
margin-bottom: rem(-96);
margin-left: rem(-96);
}
.-m-104 {
margin-top: rem(-104);
margin-right: rem(-104);
margin-bottom: rem(-104);
margin-left: rem(-104);
}
.-m-112 {
margin-top: rem(-112);
margin-right: rem(-112);
margin-bottom: rem(-112);
margin-left: rem(-112);
}
.-m-120 {
margin-top: rem(-120);
margin-right: rem(-120);
margin-bottom: rem(-120);
margin-left: rem(-120);
}
.-m-128 {
margin-top: rem(-128);
margin-right: rem(-128);
margin-bottom: rem(-128);
margin-left: rem(-128);
}
.my-0 {
margin-top: rem(0);
margin-bottom: rem(0);
}
.my-1 {
margin-top: rem(1);
margin-bottom: rem(1);
}
.my-2 {
margin-top: rem(2);
margin-bottom: rem(2);
}
.my-3 {
margin-top: rem(3);
margin-bottom: rem(3);
}
.my-4 {
margin-top: rem(4);
margin-bottom: rem(4);
}
.my-5 {
margin-top: rem(5);
margin-bottom: rem(5);
}
.my-6 {
margin-top: rem(6);
margin-bottom: rem(6);
}
.my-7 {
margin-top: rem(7);
margin-bottom: rem(7);
}
.my-8 {
margin-top: rem(8);
margin-bottom: rem(8);
}
.my-10 {
margin-top: rem(10);
margin-bottom: rem(10);
}
.my-12 {
margin-top: rem(12);
margin-bottom: rem(12);
}
.my-14 {
margin-top: rem(14);
margin-bottom: rem(14);
}
.my-16 {
margin-top: rem(16);
margin-bottom: rem(16);
}
.my-18 {
margin-top: rem(18);
margin-bottom: rem(18);
}
.my-20 {
margin-top: rem(20);
margin-bottom: rem(20);
}
.my-22 {
margin-top: rem(22);
margin-bottom: rem(22);
}
.my-24 {
margin-top: rem(24);
margin-bottom: rem(24);
}
.my-28 {
margin-top: rem(28);
margin-bottom: rem(28);
}
.my-32 {
margin-top: rem(32);
margin-bottom: rem(32);
}
.my-36 {
margin-top: rem(36);
margin-bottom: rem(36);
}
.my-40 {
margin-top: rem(40);
margin-bottom: rem(40);
}
.my-44 {
margin-top: rem(44);
margin-bottom: rem(44);
}
.my-48 {
margin-top: rem(48);
margin-bottom: rem(48);
}
.my-52 {
margin-top: rem(52);
margin-bottom: rem(52);
}
.my-64 {
margin-top: rem(64);
margin-bottom: rem(64);
}
.my-72 {
margin-top: rem(72);
margin-bottom: rem(72);
}
.my-80 {
margin-top: rem(80);
margin-bottom: rem(80);
}
.my-88 {
margin-top: rem(88);
margin-bottom: rem(88);
}
.my-96 {
margin-top: rem(96);
margin-bottom: rem(96);
}
.my-104 {
margin-top: rem(104);
margin-bottom: rem(104);
}
.my-112 {
margin-top: rem(112);
margin-bottom: rem(112);
}
.my-120 {
margin-top: rem(120);
margin-bottom: rem(120);
}
.my-128 {
margin-top: rem(128);
margin-bottom: rem(128);
}
.my-0 {
margin-top: rem(0);
margin-bottom: rem(0);
}
.-my-1 {
margin-top: rem(-1);
margin-bottom: rem(-1);
}
.-my-2 {
margin-top: rem(-2);
margin-bottom: rem(-2);
}
.-my-3 {
margin-top: rem(-3);
margin-bottom: rem(-3);
}
.-my-4 {
margin-top: rem(-4);
margin-bottom: rem(-4);
}
.-my-5 {
margin-top: rem(-5);
margin-bottom: rem(-5);
}
.-my-6 {
margin-top: rem(-6);
margin-bottom: rem(-6);
}
.-my-7 {
margin-top: rem(-7);
margin-bottom: rem(-7);
}
.-my-8 {
margin-top: rem(-8);
margin-bottom: rem(-8);
}
.-my-10 {
margin-top: rem(-10);
margin-bottom: rem(-10);
}
.-my-12 {
margin-top: rem(-12);
margin-bottom: rem(-12);
}
.-my-14 {
margin-top: rem(-14);
margin-bottom: rem(-14);
}
.-my-16 {
margin-top: rem(-16);
margin-bottom: rem(-16);
}
.-my-18 {
margin-top: rem(-18);
margin-bottom: rem(-18);
}
.-my-20 {
margin-top: rem(-20);
margin-bottom: rem(-20);
}
.-my-22 {
margin-top: rem(-22);
margin-bottom: rem(-22);
}
.-my-24 {
margin-top: rem(-24);
margin-bottom: rem(-24);
}
.-my-28 {
margin-top: rem(-28);
margin-bottom: rem(-28);
}
.-my-32 {
margin-top: rem(-32);
margin-bottom: rem(-32);
}
.-my-36 {
margin-top: rem(-36);
margin-bottom: rem(-36);
}
.-my-40 {
margin-top: rem(-40);
margin-bottom: rem(-40);
}
.-my-44 {
margin-top: rem(-44);
margin-bottom: rem(-44);
}
.-my-48 {
margin-top: rem(-48);
margin-bottom: rem(-48);
}
.-my-52 {
margin-top: rem(-52);
margin-bottom: rem(-52);
}
.-my-64 {
margin-top: rem(-64);
margin-bottom: rem(-64);
}
.-my-72 {
margin-top: rem(-72);
margin-bottom: rem(-72);
}
.-my-80 {
margin-top: rem(-80);
margin-bottom: rem(-80);
}
.-my-88 {
margin-top: rem(-88);
margin-bottom: rem(-88);
}
.-my-96 {
margin-top: rem(-96);
margin-bottom: rem(-96);
}
.-my-104 {
margin-top: rem(-104);
margin-bottom: rem(-104);
}
.-my-112 {
margin-top: rem(-112);
margin-bottom: rem(-112);
}
.-my-120 {
margin-top: rem(-120);
margin-bottom: rem(-120);
}
.-my-128 {
margin-top: rem(-128);
margin-bottom: rem(-128);
}
.mt-0 {
margin-top: rem(0);
}
.mt-1 {
margin-top: rem(1);
}
.mt-2 {
margin-top: rem(2);
}
.mt-3 {
margin-top: rem(3);
}
.mt-4 {
margin-top: rem(4);
}
.mt-5 {
margin-top: rem(5);
}
.mt-6 {
margin-top: rem(6);
}
.mt-7 {
margin-top: rem(7);
}
.mt-8 {
margin-top: rem(8);
}
.mt-10 {
margin-top: rem(10);
}
.mt-12 {
margin-top: rem(12);
}
.mt-14 {
margin-top: rem(14);
}
.mt-16 {
margin-top: rem(16);
}
.mt-18 {
margin-top: rem(18);
}
.mt-20 {
margin-top: rem(20);
}
.mt-22 {
margin-top: rem(22);
}
.mt-24 {
margin-top: rem(24);
}
.mt-28 {
margin-top: rem(28);
}
.mt-32 {
margin-top: rem(32);
}
.mt-36 {
margin-top: rem(36);
}
.mt-40 {
margin-top: rem(40);
}
.mt-44 {
margin-top: rem(44);
}
.mt-48 {
margin-top: rem(48);
}
.mt-52 {
margin-top: rem(52);
}
.mt-64 {
margin-top: rem(64);
}
.mt-72 {
margin-top: rem(72);
}
.mt-80 {
margin-top: rem(80);
}
.mt-88 {
margin-top: rem(88);
}
.mt-96 {
margin-top: rem(96);
}
.mt-104 {
margin-top: rem(104);
}
.mt-112 {
margin-top: rem(112);
}
.mt-120 {
margin-top: rem(120);
}
.mt-128 {
margin-top: rem(128);
}
.mt-0 {
margin-top: rem(0);
}
.-mt-1 {
margin-top: rem(-1);
}
.-mt-2 {
margin-top: rem(-2);
}
.-mt-3 {
margin-top: rem(-3);
}
.-mt-4 {
margin-top: rem(-4);
}
.-mt-5 {
margin-top: rem(-5);
}
.-mt-6 {
margin-top: rem(-6);
}
.-mt-7 {
margin-top: rem(-7);
}
.-mt-8 {
margin-top: rem(-8);
}
.-mt-10 {
margin-top: rem(-10);
}
.-mt-12 {
margin-top: rem(-12);
}
.-mt-14 {
margin-top: rem(-14);
}
.-mt-16 {
margin-top: rem(-16);
}
.-mt-18 {
margin-top: rem(-18);
}
.-mt-20 {
margin-top: rem(-20);
}
.-mt-22 {
margin-top: rem(-22);
}
.-mt-24 {
margin-top: rem(-24);
}
.-mt-28 {
margin-top: rem(-28);
}
.-mt-32 {
margin-top: rem(-32);
}
.-mt-36 {
margin-top: rem(-36);
}
.-mt-40 {
margin-top: rem(-40);
}
.-mt-44 {
margin-top: rem(-44);
}
.-mt-48 {
margin-top: rem(-48);
}
.-mt-52 {
margin-top: rem(-52);
}
.-mt-64 {
margin-top: rem(-64);
}
.-mt-72 {
margin-top: rem(-72);
}
.-mt-80 {
margin-top: rem(-80);
}
.-mt-88 {
margin-top: rem(-88);
}
.-mt-96 {
margin-top: rem(-96);
}
.-mt-104 {
margin-top: rem(-104);
}
.-mt-112 {
margin-top: rem(-112);
}
.-mt-120 {
margin-top: rem(-120);
}
.-mt-128 {
margin-top: rem(-128);
}
.mb-0 {
margin-bottom: rem(0);
}
.mb-1 {
margin-bottom: rem(1);
}
.mb-2 {
margin-bottom: rem(2);
}
.mb-3 {
margin-bottom: rem(3);
}
.mb-4 {
margin-bottom: rem(4);
}
.mb-5 {
margin-bottom: rem(5);
}
.mb-6 {
margin-bottom: rem(6);
}
.mb-7 {
margin-bottom: rem(7);
}
.mb-8 {
margin-bottom: rem(8);
}
.mb-10 {
margin-bottom: rem(10);
}
.mb-12 {
margin-bottom: rem(12);
}
.mb-14 {
margin-bottom: rem(14);
}
.mb-16 {
margin-bottom: rem(16);
}
.mb-18 {
margin-bottom: rem(18);
}
.mb-20 {
margin-bottom: rem(20);
}
.mb-22 {
margin-bottom: rem(22);
}
.mb-24 {
margin-bottom: rem(24);
}
.mb-28 {
margin-bottom: rem(28);
}
.mb-32 {
margin-bottom: rem(32);
}
.mb-36 {
margin-bottom: rem(36);
}
.mb-40 {
margin-bottom: rem(40);
}
.mb-44 {
margin-bottom: rem(44);
}
.mb-48 {
margin-bottom: rem(48);
}
.mb-52 {
margin-bottom: rem(52);
}
.mb-64 {
margin-bottom: rem(64);
}
.mb-72 {
margin-bottom: rem(72);
}
.mb-80 {
margin-bottom: rem(80);
}
.mb-88 {
margin-bottom: rem(88);
}
.mb-96 {
margin-bottom: rem(96);
}
.mb-104 {
margin-bottom: rem(104);
}
.mb-112 {
margin-bottom: rem(112);
}
.mb-120 {
margin-bottom: rem(120);
}
.mb-128 {
margin-bottom: rem(128);
}
.mb-0 {
margin-bottom: rem(0);
}
.-mb-1 {
margin-bottom: rem(-1);
}
.-mb-2 {
margin-bottom: rem(-2);
}
.-mb-3 {
margin-bottom: rem(-3);
}
.-mb-4 {
margin-bottom: rem(-4);
}
.-mb-5 {
margin-bottom: rem(-5);
}
.-mb-6 {
margin-bottom: rem(-6);
}
.-mb-7 {
margin-bottom: rem(-7);
}
.-mb-8 {
margin-bottom: rem(-8);
}
.-mb-10 {
margin-bottom: rem(-10);
}
.-mb-12 {
margin-bottom: rem(-12);
}
.-mb-14 {
margin-bottom: rem(-14);
}
.-mb-16 {
margin-bottom: rem(-16);
}
.-mb-18 {
margin-bottom: rem(-18);
}
.-mb-20 {
margin-bottom: rem(-20);
}
.-mb-22 {
margin-bottom: rem(-22);
}
.-mb-24 {
margin-bottom: rem(-24);
}
.-mb-28 {
margin-bottom: rem(-28);
}
.-mb-32 {
margin-bottom: rem(-32);
}
.-mb-36 {
margin-bottom: rem(-36);
}
.-mb-40 {
margin-bottom: rem(-40);
}
.-mb-44 {
margin-bottom: rem(-44);
}
.-mb-48 {
margin-bottom: rem(-48);
}
.-mb-52 {
margin-bottom: rem(-52);
}
.-mb-64 {
margin-bottom: rem(-64);
}
.-mb-72 {
margin-bottom: rem(-72);
}
.-mb-80 {
margin-bottom: rem(-80);
}
.-mb-88 {
margin-bottom: rem(-88);
}
.-mb-96 {
margin-bottom: rem(-96);
}
.-mb-104 {
margin-bottom: rem(-104);
}
.-mb-112 {
margin-bottom: rem(-112);
}
.-mb-120 {
margin-bottom: rem(-120);
}
.-mb-128 {
margin-bottom: rem(-128);
}
.mx-0 {
margin-right: rem(0);
margin-left: rem(0);
}
.mx-1 {
margin-right: rem(1);
margin-left: rem(1);
}
.mx-2 {
margin-right: rem(2);
margin-left: rem(2);
}
.mx-3 {
margin-right: rem(3);
margin-left: rem(3);
}
.mx-4 {
margin-right: rem(4);
margin-left: rem(4);
}
.mx-5 {
margin-right: rem(5);
margin-left: rem(5);
}
.mx-6 {
margin-right: rem(6);
margin-left: rem(6);
}
.mx-7 {
margin-right: rem(7);
margin-left: rem(7);
}
.mx-8 {
margin-right: rem(8);
margin-left: rem(8);
}
.mx-10 {
margin-right: rem(10);
margin-left: rem(10);
}
.mx-12 {
margin-right: rem(12);
margin-left: rem(12);
}
.mx-14 {
margin-right: rem(14);
margin-left: rem(14);
}
.mx-16 {
margin-right: rem(16);
margin-left: rem(16);
}
.mx-18 {
margin-right: rem(18);
margin-left: rem(18);
}
.mx-20 {
margin-right: rem(20);
margin-left: rem(20);
}
.mx-22 {
margin-right: rem(22);
margin-left: rem(22);
}
.mx-24 {
margin-right: rem(24);
margin-left: rem(24);
}
.mx-28 {
margin-right: rem(28);
margin-left: rem(28);
}
.mx-32 {
margin-right: rem(32);
margin-left: rem(32);
}
.mx-36 {
margin-right: rem(36);
margin-left: rem(36);
}
.mx-40 {
margin-right: rem(40);
margin-left: rem(40);
}
.mx-44 {
margin-right: rem(44);
margin-left: rem(44);
}
.mx-48 {
margin-right: rem(48);
margin-left: rem(48);
}
.mx-52 {
margin-right: rem(52);
margin-left: rem(52);
}
.mx-64 {
margin-right: rem(64);
margin-left: rem(64);
}
.mx-72 {
margin-right: rem(72);
margin-left: rem(72);
}
.mx-80 {
margin-right: rem(80);
margin-left: rem(80);
}
.mx-88 {
margin-right: rem(88);
margin-left: rem(88);
}
.mx-96 {
margin-right: rem(96);
margin-left: rem(96);
}
.mx-104 {
margin-right: rem(104);
margin-left: rem(104);
}
.mx-112 {
margin-right: rem(112);
margin-left: rem(112);
}
.mx-120 {
margin-right: rem(120);
margin-left: rem(120);
}
.mx-128 {
margin-right: rem(128);
margin-left: rem(128);
}
.mx-0 {
margin-right: rem(0);
margin-left: rem(0);
}
.-mx-1 {
margin-right: rem(-1);
margin-left: rem(-1);
}
.-mx-2 {
margin-right: rem(-2);
margin-left: rem(-2);
}
.-mx-3 {
margin-right: rem(-3);
margin-left: rem(-3);
}
.-mx-4 {
margin-right: rem(-4);
margin-left: rem(-4);
}
.-mx-5 {
margin-right: rem(-5);
margin-left: rem(-5);
}
.-mx-6 {
margin-right: rem(-6);
margin-left: rem(-6);
}
.-mx-7 {
margin-right: rem(-7);
margin-left: rem(-7);
}
.-mx-8 {
margin-right: rem(-8);
margin-left: rem(-8);
}
.-mx-10 {
margin-right: rem(-10);
margin-left: rem(-10);
}
.-mx-12 {
margin-right: rem(-12);
margin-left: rem(-12);
}
.-mx-14 {
margin-right: rem(-14);
margin-left: rem(-14);
}
.-mx-16 {
margin-right: rem(-16);
margin-left: rem(-16);
}
.-mx-18 {
margin-right: rem(-18);
margin-left: rem(-18);
}
.-mx-20 {
margin-right: rem(-20);
margin-left: rem(-20);
}
.-mx-22 {
margin-right: rem(-22);
margin-left: rem(-22);
}
.-mx-24 {
margin-right: rem(-24);
margin-left: rem(-24);
}
.-mx-28 {
margin-right: rem(-28);
margin-left: rem(-28);
}
.-mx-32 {
margin-right: rem(-32);
margin-left: rem(-32);
}
.-mx-36 {
margin-right: rem(-36);
margin-left: rem(-36);
}
.-mx-40 {
margin-right: rem(-40);
margin-left: rem(-40);
}
.-mx-44 {
margin-right: rem(-44);
margin-left: rem(-44);
}
.-mx-48 {
margin-right: rem(-48);
margin-left: rem(-48);
}
.-mx-52 {
margin-right: rem(-52);
margin-left: rem(-52);
}
.-mx-64 {
margin-right: rem(-64);
margin-left: rem(-64);
}
.-mx-72 {
margin-right: rem(-72);
margin-left: rem(-72);
}
.-mx-80 {
margin-right: rem(-80);
margin-left: rem(-80);
}
.-mx-88 {
margin-right: rem(-88);
margin-left: rem(-88);
}
.-mx-96 {
margin-right: rem(-96);
margin-left: rem(-96);
}
.-mx-104 {
margin-right: rem(-104);
margin-left: rem(-104);
}
.-mx-112 {
margin-right: rem(-112);
margin-left: rem(-112);
}
.-mx-120 {
margin-right: rem(-120);
margin-left: rem(-120);
}
.-mx-128 {
margin-right: rem(-128);
margin-left: rem(-128);
}
.ml-0 {
margin-left: rem(0);
}
.ml-1 {
margin-left: rem(1);
}
.ml-2 {
margin-left: rem(2);
}
.ml-3 {
margin-left: rem(3);
}
.ml-4 {
margin-left: rem(4);
}
.ml-5 {
margin-left: rem(5);
}
.ml-6 {
margin-left: rem(6);
}
.ml-7 {
margin-left: rem(7);
}
.ml-8 {
margin-left: rem(8);
}
.ml-10 {
margin-left: rem(10);
}
.ml-12 {
margin-left: rem(12);
}
.ml-14 {
margin-left: rem(14);
}
.ml-16 {
margin-left: rem(16);
}
.ml-18 {
margin-left: rem(18);
}
.ml-20 {
margin-left: rem(20);
}
.ml-22 {
margin-left: rem(22);
}
.ml-24 {
margin-left: rem(24);
}
.ml-28 {
margin-left: rem(28);
}
.ml-32 {
margin-left: rem(32);
}
.ml-36 {
margin-left: rem(36);
}
.ml-40 {
margin-left: rem(40);
}
.ml-44 {
margin-left: rem(44);
}
.ml-48 {
margin-left: rem(48);
}
.ml-52 {
margin-left: rem(52);
}
.ml-64 {
margin-left: rem(64);
}
.ml-72 {
margin-left: rem(72);
}
.ml-80 {
margin-left: rem(80);
}
.ml-88 {
margin-left: rem(88);
}
.ml-96 {
margin-left: rem(96);
}
.ml-104 {
margin-left: rem(104);
}
.ml-112 {
margin-left: rem(112);
}
.ml-120 {
margin-left: rem(120);
}
.ml-128 {
margin-left: rem(128);
}
.ml-0 {
margin-left: rem(0);
}
.-ml-1 {
margin-left: rem(-1);
}
.-ml-2 {
margin-left: rem(-2);
}
.-ml-3 {
margin-left: rem(-3);
}
.-ml-4 {
margin-left: rem(-4);
}
.-ml-5 {
margin-left: rem(-5);
}
.-ml-6 {
margin-left: rem(-6);
}
.-ml-7 {
margin-left: rem(-7);
}
.-ml-8 {
margin-left: rem(-8);
}
.-ml-10 {
margin-left: rem(-10);
}
.-ml-12 {
margin-left: rem(-12);
}
.-ml-14 {
margin-left: rem(-14);
}
.-ml-16 {
margin-left: rem(-16);
}
.-ml-18 {
margin-left: rem(-18);
}
.-ml-20 {
margin-left: rem(-20);
}
.-ml-22 {
margin-left: rem(-22);
}
.-ml-24 {
margin-left: rem(-24);
}
.-ml-28 {
margin-left: rem(-28);
}
.-ml-32 {
margin-left: rem(-32);
}
.-ml-36 {
margin-left: rem(-36);
}
.-ml-40 {
margin-left: rem(-40);
}
.-ml-44 {
margin-left: rem(-44);
}
.-ml-48 {
margin-left: rem(-48);
}
.-ml-52 {
margin-left: rem(-52);
}
.-ml-64 {
margin-left: rem(-64);
}
.-ml-72 {
margin-left: rem(-72);
}
.-ml-80 {
margin-left: rem(-80);
}
.-ml-88 {
margin-left: rem(-88);
}
.-ml-96 {
margin-left: rem(-96);
}
.-ml-104 {
margin-left: rem(-104);
}
.-ml-112 {
margin-left: rem(-112);
}
.-ml-120 {
margin-left: rem(-120);
}
.-ml-128 {
margin-left: rem(-128);
}
.mr-0 {
margin-right: rem(0);
}
.mr-1 {
margin-right: rem(1);
}
.mr-2 {
margin-right: rem(2);
}
.mr-3 {
margin-right: rem(3);
}
.mr-4 {
margin-right: rem(4);
}
.mr-5 {
margin-right: rem(5);
}
.mr-6 {
margin-right: rem(6);
}
.mr-7 {
margin-right: rem(7);
}
.mr-8 {
margin-right: rem(8);
}
.mr-10 {
margin-right: rem(10);
}
.mr-12 {
margin-right: rem(12);
}
.mr-14 {
margin-right: rem(14);
}
.mr-16 {
margin-right: rem(16);
}
.mr-18 {
margin-right: rem(18);
}
.mr-20 {
margin-right: rem(20);
}
.mr-22 {
margin-right: rem(22);
}
.mr-24 {
margin-right: rem(24);
}
.mr-28 {
margin-right: rem(28);
}
.mr-32 {
margin-right: rem(32);
}
.mr-36 {
margin-right: rem(36);
}
.mr-40 {
margin-right: rem(40);
}
.mr-44 {
margin-right: rem(44);
}
.mr-48 {
margin-right: rem(48);
}
.mr-52 {
margin-right: rem(52);
}
.mr-64 {
margin-right: rem(64);
}
.mr-72 {
margin-right: rem(72);
}
.mr-80 {
margin-right: rem(80);
}
.mr-88 {
margin-right: rem(88);
}
.mr-96 {
margin-right: rem(96);
}
.mr-104 {
margin-right: rem(104);
}
.mr-112 {
margin-right: rem(112);
}
.mr-120 {
margin-right: rem(120);
}
.mr-128 {
margin-right: rem(128);
}
.mr-0 {
margin-right: rem(0);
}
.-mr-1 {
margin-right: rem(-1);
}
.-mr-2 {
margin-right: rem(-2);
}
.-mr-3 {
margin-right: rem(-3);
}
.-mr-4 {
margin-right: rem(-4);
}
.-mr-5 {
margin-right: rem(-5);
}
.-mr-6 {
margin-right: rem(-6);
}
.-mr-7 {
margin-right: rem(-7);
}
.-mr-8 {
margin-right: rem(-8);
}
.-mr-10 {
margin-right: rem(-10);
}
.-mr-12 {
margin-right: rem(-12);
}
.-mr-14 {
margin-right: rem(-14);
}
.-mr-16 {
margin-right: rem(-16);
}
.-mr-18 {
margin-right: rem(-18);
}
.-mr-20 {
margin-right: rem(-20);
}
.-mr-22 {
margin-right: rem(-22);
}
.-mr-24 {
margin-right: rem(-24);
}
.-mr-28 {
margin-right: rem(-28);
}
.-mr-32 {
margin-right: rem(-32);
}
.-mr-36 {
margin-right: rem(-36);
}
.-mr-40 {
margin-right: rem(-40);
}
.-mr-44 {
margin-right: rem(-44);
}
.-mr-48 {
margin-right: rem(-48);
}
.-mr-52 {
margin-right: rem(-52);
}
.-mr-64 {
margin-right: rem(-64);
}
.-mr-72 {
margin-right: rem(-72);
}
.-mr-80 {
margin-right: rem(-80);
}
.-mr-88 {
margin-right: rem(-88);
}
.-mr-96 {
margin-right: rem(-96);
}
.-mr-104 {
margin-right: rem(-104);
}
.-mr-112 {
margin-right: rem(-112);
}
.-mr-120 {
margin-right: rem(-120);
}
.-mr-128 {
margin-right: rem(-128);
}
.p-0 {
padding-top: rem(0);
padding-right: rem(0);
padding-bottom: rem(0);
padding-left: rem(0);
}
.p-1 {
padding-top: rem(1);
padding-right: rem(1);
padding-bottom: rem(1);
padding-left: rem(1);
}
.p-2 {
padding-top: rem(2);
padding-right: rem(2);
padding-bottom: rem(2);
padding-left: rem(2);
}
.p-3 {
padding-top: rem(3);
padding-right: rem(3);
padding-bottom: rem(3);
padding-left: rem(3);
}
.p-4 {
padding-top: rem(4);
padding-right: rem(4);
padding-bottom: rem(4);
padding-left: rem(4);
}
.p-5 {
padding-top: rem(5);
padding-right: rem(5);
padding-bottom: rem(5);
padding-left: rem(5);
}
.p-6 {
padding-top: rem(6);
padding-right: rem(6);
padding-bottom: rem(6);
padding-left: rem(6);
}
.p-7 {
padding-top: rem(7);
padding-right: rem(7);
padding-bottom: rem(7);
padding-left: rem(7);
}
.p-8 {
padding-top: rem(8);
padding-right: rem(8);
padding-bottom: rem(8);
padding-left: rem(8);
}
.p-10 {
padding-top: rem(10);
padding-right: rem(10);
padding-bottom: rem(10);
padding-left: rem(10);
}
.p-12 {
padding-top: rem(12);
padding-right: rem(12);
padding-bottom: rem(12);
padding-left: rem(12);
}
.p-14 {
padding-top: rem(14);
padding-right: rem(14);
padding-bottom: rem(14);
padding-left: rem(14);
}
.p-16 {
padding-top: rem(16);
padding-right: rem(16);
padding-bottom: rem(16);
padding-left: rem(16);
}
.p-18 {
padding-top: rem(18);
padding-right: rem(18);
padding-bottom: rem(18);
padding-left: rem(18);
}
.p-20 {
padding-top: rem(20);
padding-right: rem(20);
padding-bottom: rem(20);
padding-left: rem(20);
}
.p-22 {
padding-top: rem(22);
padding-right: rem(22);
padding-bottom: rem(22);
padding-left: rem(22);
}
.p-24 {
padding-top: rem(24);
padding-right: rem(24);
padding-bottom: rem(24);
padding-left: rem(24);
}
.p-28 {
padding-top: rem(28);
padding-right: rem(28);
padding-bottom: rem(28);
padding-left: rem(28);
}
.p-32 {
padding-top: rem(32);
padding-right: rem(32);
padding-bottom: rem(32);
padding-left: rem(32);
}
.p-36 {
padding-top: rem(36);
padding-right: rem(36);
padding-bottom: rem(36);
padding-left: rem(36);
}
.p-40 {
padding-top: rem(40);
padding-right: rem(40);
padding-bottom: rem(40);
padding-left: rem(40);
}
.p-44 {
padding-top: rem(44);
padding-right: rem(44);
padding-bottom: rem(44);
padding-left: rem(44);
}
.p-48 {
padding-top: rem(48);
padding-right: rem(48);
padding-bottom: rem(48);
padding-left: rem(48);
}
.p-52 {
padding-top: rem(52);
padding-right: rem(52);
padding-bottom: rem(52);
padding-left: rem(52);
}
.p-64 {
padding-top: rem(64);
padding-right: rem(64);
padding-bottom: rem(64);
padding-left: rem(64);
}
.p-72 {
padding-top: rem(72);
padding-right: rem(72);
padding-bottom: rem(72);
padding-left: rem(72);
}
.p-80 {
padding-top: rem(80);
padding-right: rem(80);
padding-bottom: rem(80);
padding-left: rem(80);
}
.p-88 {
padding-top: rem(88);
padding-right: rem(88);
padding-bottom: rem(88);
padding-left: rem(88);
}
.p-96 {
padding-top: rem(96);
padding-right: rem(96);
padding-bottom: rem(96);
padding-left: rem(96);
}
.p-104 {
padding-top: rem(104);
padding-right: rem(104);
padding-bottom: rem(104);
padding-left: rem(104);
}
.p-112 {
padding-top: rem(112);
padding-right: rem(112);
padding-bottom: rem(112);
padding-left: rem(112);
}
.p-120 {
padding-top: rem(120);
padding-right: rem(120);
padding-bottom: rem(120);
padding-left: rem(120);
}
.p-128 {
padding-top: rem(128);
padding-right: rem(128);
padding-bottom: rem(128);
padding-left: rem(128);
}
.py-0 {
padding-top: rem(0);
padding-bottom: rem(0);
}
.py-1 {
padding-top: rem(1);
padding-bottom: rem(1);
}
.py-2 {
padding-top: rem(2);
padding-bottom: rem(2);
}
.py-3 {
padding-top: rem(3);
padding-bottom: rem(3);
}
.py-4 {
padding-top: rem(4);
padding-bottom: rem(4);
}
.py-5 {
padding-top: rem(5);
padding-bottom: rem(5);
}
.py-6 {
padding-top: rem(6);
padding-bottom: rem(6);
}
.py-7 {
padding-top: rem(7);
padding-bottom: rem(7);
}
.py-8 {
padding-top: rem(8);
padding-bottom: rem(8);
}
.py-10 {
padding-top: rem(10);
padding-bottom: rem(10);
}
.py-12 {
padding-top: rem(12);
padding-bottom: rem(12);
}
.py-14 {
padding-top: rem(14);
padding-bottom: rem(14);
}
.py-16 {
padding-top: rem(16);
padding-bottom: rem(16);
}
.py-18 {
padding-top: rem(18);
padding-bottom: rem(18);
}
.py-20 {
padding-top: rem(20);
padding-bottom: rem(20);
}
.py-22 {
padding-top: rem(22);
padding-bottom: rem(22);
}
.py-24 {
padding-top: rem(24);
padding-bottom: rem(24);
}
.py-28 {
padding-top: rem(28);
padding-bottom: rem(28);
}
.py-32 {
padding-top: rem(32);
padding-bottom: rem(32);
}
.py-36 {
padding-top: rem(36);
padding-bottom: rem(36);
}
.py-40 {
padding-top: rem(40);
padding-bottom: rem(40);
}
.py-44 {
padding-top: rem(44);
padding-bottom: rem(44);
}
.py-48 {
padding-top: rem(48);
padding-bottom: rem(48);
}
.py-52 {
padding-top: rem(52);
padding-bottom: rem(52);
}
.py-64 {
padding-top: rem(64);
padding-bottom: rem(64);
}
.py-72 {
padding-top: rem(72);
padding-bottom: rem(72);
}
.py-80 {
padding-top: rem(80);
padding-bottom: rem(80);
}
.py-88 {
padding-top: rem(88);
padding-bottom: rem(88);
}
.py-96 {
padding-top: rem(96);
padding-bottom: rem(96);
}
.py-104 {
padding-top: rem(104);
padding-bottom: rem(104);
}
.py-112 {
padding-top: rem(112);
padding-bottom: rem(112);
}
.py-120 {
padding-top: rem(120);
padding-bottom: rem(120);
}
.py-128 {
padding-top: rem(128);
padding-bottom: rem(128);
}
.pt-0 {
padding-top: rem(0);
}
.pt-1 {
padding-top: rem(1);
}
.pt-2 {
padding-top: rem(2);
}
.pt-3 {
padding-top: rem(3);
}
.pt-4 {
padding-top: rem(4);
}
.pt-5 {
padding-top: rem(5);
}
.pt-6 {
padding-top: rem(6);
}
.pt-7 {
padding-top: rem(7);
}
.pt-8 {
padding-top: rem(8);
}
.pt-10 {
padding-top: rem(10);
}
.pt-12 {
padding-top: rem(12);
}
.pt-14 {
padding-top: rem(14);
}
.pt-16 {
padding-top: rem(16);
}
.pt-18 {
padding-top: rem(18);
}
.pt-20 {
padding-top: rem(20);
}
.pt-22 {
padding-top: rem(22);
}
.pt-24 {
padding-top: rem(24);
}
.pt-28 {
padding-top: rem(28);
}
.pt-32 {
padding-top: rem(32);
}
.pt-36 {
padding-top: rem(36);
}
.pt-40 {
padding-top: rem(40);
}
.pt-44 {
padding-top: rem(44);
}
.pt-48 {
padding-top: rem(48);
}
.pt-52 {
padding-top: rem(52);
}
.pt-64 {
padding-top: rem(64);
}
.pt-72 {
padding-top: rem(72);
}
.pt-80 {
padding-top: rem(80);
}
.pt-88 {
padding-top: rem(88);
}
.pt-96 {
padding-top: rem(96);
}
.pt-104 {
padding-top: rem(104);
}
.pt-112 {
padding-top: rem(112);
}
.pt-120 {
padding-top: rem(120);
}
.pt-128 {
padding-top: rem(128);
}
.pb-0 {
padding-bottom: rem(0);
}
.pb-1 {
padding-bottom: rem(1);
}
.pb-2 {
padding-bottom: rem(2);
}
.pb-3 {
padding-bottom: rem(3);
}
.pb-4 {
padding-bottom: rem(4);
}
.pb-5 {
padding-bottom: rem(5);
}
.pb-6 {
padding-bottom: rem(6);
}
.pb-7 {
padding-bottom: rem(7);
}
.pb-8 {
padding-bottom: rem(8);
}
.pb-10 {
padding-bottom: rem(10);
}
.pb-12 {
padding-bottom: rem(12);
}
.pb-14 {
padding-bottom: rem(14);
}
.pb-16 {
padding-bottom: rem(16);
}
.pb-18 {
padding-bottom: rem(18);
}
.pb-20 {
padding-bottom: rem(20);
}
.pb-22 {
padding-bottom: rem(22);
}
.pb-24 {
padding-bottom: rem(24);
}
.pb-28 {
padding-bottom: rem(28);
}
.pb-32 {
padding-bottom: rem(32);
}
.pb-36 {
padding-bottom: rem(36);
}
.pb-40 {
padding-bottom: rem(40);
}
.pb-44 {
padding-bottom: rem(44);
}
.pb-48 {
padding-bottom: rem(48);
}
.pb-52 {
padding-bottom: rem(52);
}
.pb-64 {
padding-bottom: rem(64);
}
.pb-72 {
padding-bottom: rem(72);
}
.pb-80 {
padding-bottom: rem(80);
}
.pb-88 {
padding-bottom: rem(88);
}
.pb-96 {
padding-bottom: rem(96);
}
.pb-104 {
padding-bottom: rem(104);
}
.pb-112 {
padding-bottom: rem(112);
}
.pb-120 {
padding-bottom: rem(120);
}
.pb-128 {
padding-bottom: rem(128);
}
.px-0 {
padding-right: rem(0);
padding-left: rem(0);
}
.px-1 {
padding-right: rem(1);
padding-left: rem(1);
}
.px-2 {
padding-right: rem(2);
padding-left: rem(2);
}
.px-3 {
padding-right: rem(3);
padding-left: rem(3);
}
.px-4 {
padding-right: rem(4);
padding-left: rem(4);
}
.px-5 {
padding-right: rem(5);
padding-left: rem(5);
}
.px-6 {
padding-right: rem(6);
padding-left: rem(6);
}
.px-7 {
padding-right: rem(7);
padding-left: rem(7);
}
.px-8 {
padding-right: rem(8);
padding-left: rem(8);
}
.px-10 {
padding-right: rem(10);
padding-left: rem(10);
}
.px-12 {
padding-right: rem(12);
padding-left: rem(12);
}
.px-14 {
padding-right: rem(14);
padding-left: rem(14);
}
.px-16 {
padding-right: rem(16);
padding-left: rem(16);
}
.px-18 {
padding-right: rem(18);
padding-left: rem(18);
}
.px-20 {
padding-right: rem(20);
padding-left: rem(20);
}
.px-22 {
padding-right: rem(22);
padding-left: rem(22);
}
.px-24 {
padding-right: rem(24);
padding-left: rem(24);
}
.px-28 {
padding-right: rem(28);
padding-left: rem(28);
}
.px-32 {
padding-right: rem(32);
padding-left: rem(32);
}
.px-36 {
padding-right: rem(36);
padding-left: rem(36);
}
.px-40 {
padding-right: rem(40);
padding-left: rem(40);
}
.px-44 {
padding-right: rem(44);
padding-left: rem(44);
}
.px-48 {
padding-right: rem(48);
padding-left: rem(48);
}
.px-52 {
padding-right: rem(52);
padding-left: rem(52);
}
.px-64 {
padding-right: rem(64);
padding-left: rem(64);
}
.px-72 {
padding-right: rem(72);
padding-left: rem(72);
}
.px-80 {
padding-right: rem(80);
padding-left: rem(80);
}
.px-88 {
padding-right: rem(88);
padding-left: rem(88);
}
.px-96 {
padding-right: rem(96);
padding-left: rem(96);
}
.px-104 {
padding-right: rem(104);
padding-left: rem(104);
}
.px-112 {
padding-right: rem(112);
padding-left: rem(112);
}
.px-120 {
padding-right: rem(120);
padding-left: rem(120);
}
.px-128 {
padding-right: rem(128);
padding-left: rem(128);
}
.pl-0 {
padding-left: rem(0);
}
.pl-1 {
padding-left: rem(1);
}
.pl-2 {
padding-left: rem(2);
}
.pl-3 {
padding-left: rem(3);
}
.pl-4 {
padding-left: rem(4);
}
.pl-5 {
padding-left: rem(5);
}
.pl-6 {
padding-left: rem(6);
}
.pl-7 {
padding-left: rem(7);
}
.pl-8 {
padding-left: rem(8);
}
.pl-10 {
padding-left: rem(10);
}
.pl-12 {
padding-left: rem(12);
}
.pl-14 {
padding-left: rem(14);
}
.pl-16 {
padding-left: rem(16);
}
.pl-18 {
padding-left: rem(18);
}
.pl-20 {
padding-left: rem(20);
}
.pl-22 {
padding-left: rem(22);
}
.pl-24 {
padding-left: rem(24);
}
.pl-28 {
padding-left: rem(28);
}
.pl-32 {
padding-left: rem(32);
}
.pl-36 {
padding-left: rem(36);
}
.pl-40 {
padding-left: rem(40);
}
.pl-44 {
padding-left: rem(44);
}
.pl-48 {
padding-left: rem(48);
}
.pl-52 {
padding-left: rem(52);
}
.pl-64 {
padding-left: rem(64);
}
.pl-72 {
padding-left: rem(72);
}
.pl-80 {
padding-left: rem(80);
}
.pl-88 {
padding-left: rem(88);
}
.pl-96 {
padding-left: rem(96);
}
.pl-104 {
padding-left: rem(104);
}
.pl-112 {
padding-left: rem(112);
}
.pl-120 {
padding-left: rem(120);
}
.pl-128 {
padding-left: rem(128);
}
.pr-0 {
padding-right: rem(0);
}
.pr-1 {
padding-right: rem(1);
}
.pr-2 {
padding-right: rem(2);
}
.pr-3 {
padding-right: rem(3);
}
.pr-4 {
padding-right: rem(4);
}
.pr-5 {
padding-right: rem(5);
}
.pr-6 {
padding-right: rem(6);
}
.pr-7 {
padding-right: rem(7);
}
.pr-8 {
padding-right: rem(8);
}
.pr-10 {
padding-right: rem(10);
}
.pr-12 {
padding-right: rem(12);
}
.pr-14 {
padding-right: rem(14);
}
.pr-16 {
padding-right: rem(16);
}
.pr-18 {
padding-right: rem(18);
}
.pr-20 {
padding-right: rem(20);
}
.pr-22 {
padding-right: rem(22);
}
.pr-24 {
padding-right: rem(24);
}
.pr-28 {
padding-right: rem(28);
}
.pr-32 {
padding-right: rem(32);
}
.pr-36 {
padding-right: rem(36);
}
.pr-40 {
padding-right: rem(40);
}
.pr-44 {
padding-right: rem(44);
}
.pr-48 {
padding-right: rem(48);
}
.pr-52 {
padding-right: rem(52);
}
.pr-64 {
padding-right: rem(64);
}
.pr-72 {
padding-right: rem(72);
}
.pr-80 {
padding-right: rem(80);
}
.pr-88 {
padding-right: rem(88);
}
.pr-96 {
padding-right: rem(96);
}
.pr-104 {
padding-right: rem(104);
}
.pr-112 {
padding-right: rem(112);
}
.pr-120 {
padding-right: rem(120);
}
.pr-128 {
padding-right: rem(128);
}
.flex-row {
display: flex;
flex-direction: row;
}
.inline-flex-row {
display: inline-flex;
flex-direction: row;
}
.flex-row.x-start,
.inline-flex-row.x-start {
justify-content: flex-start;
}
.flex-row.x-center,
.inline-flex-row.x-center {
justify-content: center;
}
.flex-row.x-end,
.inline-flex-row.x-end {
justify-content: flex-end;
}
.flex-row.x-between,
.inline-flex-row.x-between {
justify-content: space-between;
}
.flex-row.x-around,
.inline-flex-row.x-around {
justify-content: space-around;
}
.flex-row.x-evenly,
.inline-flex-row.x-evenly {
justify-content: space-evenly;
}
.flex-row.y-stretch,
.inline-flex-row.y-stretch {
align-items: stretch;
}
.flex-row.y-start,
.inline-flex-row.y-start {
align-items: flex-start;
}
.flex-row.y-center,
.inline-flex-row.y-center {
align-items: center;
}
.flex-row.y-end,
.inline-flex-row.y-end {
align-items: flex-end;
}
.flex-row.y-baseline,
.inline-flex-row.y-baseline {
align-items: baseline;
}
.flex-row.start,
.inline-flex-row.start {
justify-content: flex-start;
align-items: flex-start;
}
.flex-row.center,
.inline-flex-row.center {
justify-content: center;
align-items: center;
}
.flex-row.end,
.inline-flex-row.end {
justify-content: flex-end;
align-items: flex-end;
}
.flex-row.no-wrap,
.inline-flex-row.no-wrap {
flex-wrap: nowrap;
}
.flex-row.wrap,
.inline-flex-row.wrap {
flex-wrap: wrap;
}
.flex-row.wrap-reverse,
.inline-flex-row.wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-col {
display: flex;
flex-direction: col;
}
.inline-flex-col {
display: inline-flex;
flex-direction: col;
}
.flex-col.x-stretch,
.inline-flex-col.x-stretch {
align-items: stretch;
}
.flex-col.x-start,
.inline-flex-col.x-start {
align-items: flex-start;
}
.flex-col.x-center,
.inline-flex-col.x-center {
align-items: center;
}
.flex-col.x-end,
.inline-flex-col.x-end {
align-items: flex-end;
}
.flex-col.x-baseline,
.inline-flex-col.x-baseline {
align-items: baseline;
}
.flex-col.y-start,
.inline-flex-col.y-start {
justify-content: flex-start;
}
.flex-col.y-center,
.inline-flex-col.y-center {
justify-content: center;
}
.flex-col.y-end,
.inline-flex-col.y-end {
justify-content: flex-end;
}
.flex-col.y-between,
.inline-flex-col.y-between {
justify-content: space-between;
}
.flex-col.y-around,
.inline-flex-col.y-around {
justify-content: space-around;
}
.flex-col.y-evenly,
.inline-flex-col.y-evenly {
justify-content: space-evenly;
}
.flex-col.start,
.inline-flex-col.start {
justify-content: flex-start;
align-items: flex-start;
}
.flex-col.center,
.inline-flex-col.center {
justify-content: center;
align-items: center;
}
.flex-col.end,
.inline-flex-col.end {
justify-content: flex-end;
align-items: flex-end;
}
.flex-col.no-wrap,
.inline-flex-col.no-wrap {
flex-wrap: nowrap;
}
.flex-col.wrap,
.inline-flex-col.wrap {
flex-wrap: wrap;
}
.flex-col.wrap-reverse,
.inline-flex-col.wrap-reverse {
flex-wrap: wrap-reverse;
}
.no-pointer-events {
pointer-events: none;
}
.pointer-events {
pointer-events: auto;
}
@media (min-width: 640px) {
.xs\:m-0 {
margin-top: rem(0);
margin-right: rem(0);
margin-bottom: rem(0);
margin-left: rem(0);
}
.xs\:m-1 {
margin-top: rem(1);
margin-right: rem(1);
margin-bottom: rem(1);
margin-left: rem(1);
}
.xs\:m-2 {
margin-top: rem(2);
margin-right: rem(2);
margin-bottom: rem(2);
margin-left: rem(2);
}
.xs\:m-3 {
margin-top: rem(3);
margin-right: rem(3);
margin-bottom: rem(3);
margin-left: rem(3);
}
.xs\:m-4 {
margin-top: rem(4);
margin-right: rem(4);
margin-bottom: rem(4);
margin-left: rem(4);
}
.xs\:m-5 {
margin-top: rem(5);
margin-right: rem(5);
margin-bottom: rem(5);
margin-left: rem(5);
}
.xs\:m-6 {
margin-top: rem(6);
margin-right: rem(6);
margin-bottom: rem(6);
margin-left: rem(6);
}
.xs\:m-7 {
margin-top: rem(7);
margin-right: rem(7);
margin-bottom: rem(7);
margin-left: rem(7);
}
.xs\:m-8 {
margin-top: rem(8);
margin-right: rem(8);
margin-bottom: rem(8);
margin-left: rem(8);
}
.xs\:m-10 {
margin-top: rem(10);
margin-right: rem(10);
margin-bottom: rem(10);
margin-left: rem(10);
}
.xs\:m-12 {
margin-top: rem(12);
margin-right: rem(12);
margin-bottom: rem(12);
margin-left: rem(12);
}
.xs\:m-14 {
margin-top: rem(14);
margin-right: rem(14);
margin-bottom: rem(14);
margin-left: rem(14);
}
.xs\:m-16 {
margin-top: rem(16);
margin-right: rem(16);
margin-bottom: rem(16);
margin-left: rem(16);
}
.xs\:m-18 {
margin-top: rem(18);
margin-right: rem(18);
margin-bottom: rem(18);
margin-left: rem(18);
}
.xs\:m-20 {
margin-top: rem(20);
margin-right: rem(20);
margin-bottom: rem(20);
margin-left: rem(20);
}
.xs\:m-22 {
margin-top: rem(22);
margin-right: rem(22);
margin-bottom: rem(22);
margin-left: rem(22);
}
.xs\:m-24 {
margin-top: rem(24);
margin-right: rem(24);
margin-bottom: rem(24);
margin-left: rem(24);
}
.xs\:m-28 {
margin-top: rem(28);
margin-right: rem(28);
margin-bottom: rem(28);
margin-left: rem(28);
}
.xs\:m-32 {
margin-top: rem(32);
margin-right: rem(32);
margin-bottom: rem(32);
margin-left: rem(32);
}
.xs\:m-36 {
margin-top: rem(36);
margin-right: rem(36);
margin-bottom: rem(36);
margin-left: rem(36);
}
.xs\:m-40 {
margin-top: rem(40);
margin-right: rem(40);