Hey, this is the base stylesheet for Urbit.
+ Hey, this is the base stylesheet for Urbit.
+
+
Urbit is often used for simple, markdown-based publishing. This stylesheet is meant to make simple, text-heavy documents look clean, organized and readable. And, to provide some basic layout tools that are easy to use when writing basic HTML.
As an open source project, the design guidelines for Urbit are necesarrily open. Evolving the look and feel of Urbit is intended to be a community project. Criticism is welcome; criticism in the form of a pull request is even better.
-
@@ -35,18 +36,19 @@
-
Layout
-
-
- Percent-based grid -
- Fixed-width utilities -
- Fixed-height utilities -
- Margin / padding utilities +
- Grid system +
- Width / height utilities +
- Margin / padding utilities +
- Vertical / horizontal centering
-
Forms & Elements
-
-
- Buttons -
- Inputs -
- Icons / Circles +
- Buttons +
- Forms / inputs +
- Icons +
- Shapes
- Source code & contributing @@ -62,11 +64,11 @@
Hey, this is the base stylesheet for Urbit.
General type rules
Headings
-
Heading 1 60/96 px
-Heading 2 48/80 px
-Heading 3 36/48 px
-Heading 4 24/40 px
-Heading 5 18/32 px
+Heading 1 48/64 px
+Heading 2 36/52 px
+Heading 3 24/32 px
+Heading 4 20/28 px
+Heading 5 20/28 px
@@ -95,23 +97,15 @@Centered
Modifiers
Size
+Now it is a game, I am going to play.
+Now it is a game, I am going to play.
Now it is a game, I am going to play.
Now it is a game, I am going to play.
-Now it is a game, I am going to play.
-<p>Now it is a game, I am going to play.</p> -<p class="text-sm">Now it is a game, I am going to play.</p> -<p class="text-xs">Now it is a game, I am going to play.</p>-Line-height
-There is a certain glibness in calling someone a legend.
-There is a certain glibness in calling someone a legend.
-There is a certain glibness in calling someone a legend.
-There is a certain glibness in calling someone a legend.
-There is a certain glibness in calling someone a legend.
-<p class="text-lh-lg">There is a certain glibness in calling someone a legend.</p> -<p class="text-lh-md">There is a certain glibness in calling someone a legend.</p> -<p>There is a certain glibness in calling someone a legend.</p> -<p class="text-lh-sm">There is a certain glibness in calling someone a legend.</p> -<p class="text-lh-xs">There is a certain glibness in calling someone a legend.</p>+ +<p class="text-lg">Now it is a game, I am going to play.</p> +<p class="text-md">Now it is a game, I am going to play.</p> +<p>Now it is a game, I am going to play.</p> +<p class="text-sm">Now it is a game, I am going to play.</p>Formatting
Such is the earnestness from which I have never been able to depart.
Such is the earnestness from which I have never been able to depart.
@@ -254,11 +248,11 @@Lists
-Layout and grids
+Layout and grids
There is a certain glibness in calling someone a legend, but if there's any artist worthy of the title it's Barbara Hammer, whose nearly 50-year career has spanned disciplines and broken boundaries, but has focused most especially on moving images.
Percent-based 12 column grid
-+-@@ -269,7 +263,7 @@col-2Percent-based 12 column grid
col-3+-@@ -280,7 +274,7 @@col-4Percent-based 12 column grid
col-4+-@@ -292,7 +286,7 @@col-9Percent-based 12 column grid
<div class="row mb-1 text-lh-lg"> +<div class="row mb-1"> <div class="col-sm-2"> <div class="black-hl text-md text-mono text-700 center">col-2</div> </div> @@ -303,7 +297,7 @@Percent-based 12 column grid
<div class="black-hl text-md text-mono text-700 center">col-3</div> </div> </div> -<div class="row mb-1 text-lh-lg"> +<div class="row mb-1"> <div class="col-sm-4"> <div class="black-hl text-md text-mono text-700 center">col-4</div> </div> @@ -314,7 +308,7 @@Percent-based 12 column grid
<div class="black-hl text-md text-mono text-700 center">col-4</div> </div> </div> -<div class="row mb-1 text-lh-lg"> +<div class="row mb-1"> <div class="col-sm-9"> <div class="black-hl text-md text-mono text-700 center">col-9</div> </div> @@ -327,7 +321,7 @@Percent-based 12 column grid
</div>With breakpoints
-+-@@ -341,7 +335,7 @@smWith breakpoints
sm+-@@ -352,7 +346,7 @@md6, lg4With breakpoints
md6, lg4+-@@ -361,7 +355,7 @@lg9With breakpoints
<div class="row mb-1 text-lh-lg"> +<div class="row mb-1"> <div class="col-sm"> <div class="black-hl text-md text-mono text-700 center">sm</div> </div> @@ -375,7 +369,7 @@-With breakpoints
<div class="black-hl text-md text-mono text-700 center">sm</div> </div> </div> -<div class="row mb-1 text-lh-lg"> +<div class="row mb-1"> <div class="col-md-6 col-lg-4"> <div class="black-hl text-md text-mono text-700 center">md6, lg4</div> </div> @@ -386,7 +380,7 @@With breakpoints
<div class="black-hl text-md text-mono text-700 center">md6, lg4</div> </div> </div> -<div class="row mb-8 text-lh-lg"> +<div class="row mb-8"> <div class="col-lg-9"> <div class="black-hl text-md text-mono text-700 center">lg9</div> </div> @@ -395,7 +389,7 @@With breakpoints
</div> </div>Fixed width / height utilities
+Fixed width / height utilities
Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.
w-12@@ -429,64 +423,325 @@Fixed width / height utilities
<div class="w-48 h-48 black-hl text-md text-mono text-700 center mr-3 mb-3">w-48<br />h-48</div> </div> -Margin / padding utilities
+Margin / padding utilities
+Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.
+ +++ +mb-1+mb-2+mb-4+mb-8+mb-16+mt-16+mt-8+mt-4+mt-2+mt-1+<div class="row"> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-1">mb-1</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-2">mb-2</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-4">mb-4</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-8">mb-8</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mb-16">mb-16</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-16">mt-16</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-8">mt-8</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-4">mt-4</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-2">mt-2</div> + <div class="black-hl text-md text-mono text-700 center mr-3 p-1 mt-1">mt-1</div> + </div>+ +The properties exposed for these utilities are given by the following Sass definitions.
+Property values 0 - 99 are currently available ($sizing-count == 99)
+ +@for $i from 0 through $sizing-count { + .w-#{$i} {width: #{$i}rem;} // Example: .w-12: 12rem; + .h-#{$i} {height: #{$i}rem;} // Example: .h-12: 12rem; + .m-#{$i} {margin: #{$i}rem;} // Example: .m-12: 12rem; + .mt-#{$i} {margin-top: #{$i}rem;} // Example: .mt-12: 12rem; + .mb-#{$i} {margin-bottom: #{$i}rem;} // Example: .mb-12: 12rem; + .ml-#{$i} {margin-left: #{$i}rem;} // Example: .ml-12: 12rem; + .mr-#{$i} {margin-right: #{$i}rem;} // Example: .mr-12: 12rem; + .p-#{$i} {padding: #{$i}rem;} // Example: .p-12: 12rem; + .pt-#{$i} {margin-top: #{$i}rem;} // Example: .pt-12: 12rem; + .pb-#{$i} {padding-bottom: #{$i}rem;} // Example: .pb-12: 12rem; + .pl-#{$i} {padding-left: #{$i}rem;} // Example: .pl-12: 12rem; + .pr-#{$i} {padding-right: #{$i}rem;} // Example: pr-12: 12rem; +}+ + +Vertical / horizontal centering
+ +++++Use of Flexbox is encouraged.
+For example, here is how you center an element inside of another element
+++++Center me!+<div class="w-48 h-48 black-hl text-md row align-vertical justify-center"> + <div>Center me!</div> +</div>- Buttons
- - - - - - -Button groups
-- - --- - +Buttons
+ +Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.
+ ++ + + + +-Forms
-- - + ++ + + + +-- - -diff --git a/sass/base.scss b/sass/base.scss index 6ad4569..4a1dc44 100644 --- a/sass/base.scss +++ b/sass/base.scss @@ -4,9 +4,15 @@ @import "typography"; @import "buttons"; @import "forms"; +@import "icons"; +@import "shapes"; @import "elements"; @import "utilities"; * { box-sizing: border-box; } + +html { + font-size: 4px; +} diff --git a/sass/buttons.scss b/sass/buttons.scss index 1c9ea9a..3534765 100644 --- a/sass/buttons.scss +++ b/sass/buttons.scss @@ -12,16 +12,25 @@ button { button, .btn { font-family: "Work Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; + font-size: 4rem; + line-height: 4rem; - padding: 6px 12px; - color: white; + padding: 3rem 6rem; + color: black; background-color: $gray-light; margin: 0 0 6px; } +.btn-sm { + font-size: 3rem; + line-height: 3rem; + padding: 2rem 4rem; +} + .btn-primary { background-color: $blue; + color: white; } .btn-secondary { @@ -30,10 +39,12 @@ button, .btn { .btn-tetiary { background-color: $gray; + color: white; } .btn-warning { background-color: $red; + color: white; } .btn-group { @@ -43,5 +54,6 @@ button, .btn { .btn:not(.active) { background-color: $gray-light; + color: black; } } diff --git a/sass/elements.scss b/sass/elements.scss index 2dd9228..5c3e80a 100644 --- a/sass/elements.scss +++ b/sass/elements.scss @@ -76,65 +76,3 @@ ol > li:before { width: 6rem; text-align: left; } - -/********************** - Shapes -**********************/ - -.circle { - display: inline-block; - padding: 1rem; - border-radius: 50%; - border: 3px solid black; - - text-align: center; -} - -.pill { - display: inline-block; - padding: 1rem; - border-radius: 9999px; - border: 3px solid black; - - text-align: center; -} - -/********************** - Urbit logo -**********************/ - -.urbit-logo { - width: 72px; - height: 72px; - display: inline-block; - border-radius: 50%; - vertical-align: middle; - - border: 5px solid white; - background-color: transparent; - - &:before { - content: "~"; - color: #FFFFFF; - font-size: 72px; - vertical-align: middle; - line-height: 54px; - text-align: center; - width: 2rem; - display: inline-block; - - font-family: "Work Sans"; - font-weight: 600; - - margin-right: 30px; - margin-top: 3px; - } -} - -.urbit-logo-solid { - border-color: black; - - &:before { - color: black; - } -} diff --git a/sass/forms.scss b/sass/forms.scss index b79594b..585f325 100644 --- a/sass/forms.scss +++ b/sass/forms.scss @@ -5,8 +5,9 @@ label { textarea, input[type="text"] { - border: .5rem solid #000; + border: 2px solid black; padding: 12px; + width: 100%; } .error-label { @@ -31,3 +32,39 @@ input[type="text"] { display: block; } } + +.checkbox-group label, +.checkbox-group input, +.radio-group label, +.radio-group input { + font-weight: 400; + display: inline-block; +} + +.select-dropdown { + display: flex; + border: 2px solid black; + overflow: hidden; + background-color: white; +} + +.select-dropdown select { + padding: 5px 8px; + width: 130%; + border: none; + box-shadow: none; + background: transparent; + background-image: none; + -webkit-appearance: none; +} + +.select-dropdown select:focus { + outline: none; +} + +.select-dropdown .triangle-down { + border-width: 2rem 1rem 0rem 1rem; + position: relative; + top: 14px; + right: 8px; +} diff --git a/sass/grid.scss b/sass/grid.scss index 7a7db07..3e1df2a 100644 --- a/sass/grid.scss +++ b/sass/grid.scss @@ -23,6 +23,14 @@ flex-wrap: wrap; } +.align-vertical { + align-items: center; +} + +.justify-center { + justify-content: center; +} + @media #{$viewport-sm-up} { .col-sm, .col-sm-1, diff --git a/sass/icons.scss b/sass/icons.scss new file mode 100644 index 0000000..201c1ca --- /dev/null +++ b/sass/icons.scss @@ -0,0 +1,65 @@ +/* + Available/supported icons: + + → + ← + ∙ + +*/ + +.icon-arrow-right:before { + content: "→"; +} + +.icon-arrow-left:before { + content: "←"; +} + +.icon-arrow-up:before { + content: "↑"; +} + +.icon-arrow-down:before { + content: "↓"; +} + +.icon-cross:before { + content: "×"; +} + +.icon-ellipsis:before { + content: "..."; + position: relative; + bottom: 6px; +} + +.selected:before{ + content: "∙" +} + +//not production ready +.icon{ + margin-right:.6rem; +} +.icon.prev { + width: 1px; + height: 1px; + border: 12.0006px solid transparent; + border-right: 18px solid #000; + border-left: 0 solid transparent; +} +.icon.next { + width: 1px; + height: 1px; + border: 12.0006px solid transparent; + border-left: 18px solid #000; + border-right: 0 solid transparent; + margin-right:0; +} +.icon.up { + width: 1px; + height: 1px; + border: 12.0006px solid transparent; + border-bottom: 18px solid #000; + border-top: 0 solid transparent; +} diff --git a/sass/shapes.scss b/sass/shapes.scss new file mode 100644 index 0000000..22d5b3e --- /dev/null +++ b/sass/shapes.scss @@ -0,0 +1,142 @@ +/********************** + Shapes +**********************/ + +.circle { + display: inline-block; + padding: 2rem; + border-radius: 50%; + border: 2px solid black; + + text-align: center; +} + +.circle-sm { + padding: 1rem; +} + +.circle-lg { + padding: 4rem; +} + +.circle-fill { + background-color: black; +} + +.circle-red { + background-color: red; + border-color: red; +} + +.circle-pill { + border-radius: 9999px; + width: 10rem; +} + +.circle-pill.circle-lg { + width: 20rem; +} + +.square { + display: inline-block; + padding: 2rem; + border: 2px solid black; + + text-align: center; +} + +.square-sm { + padding: 1rem; +} + +.square-lg { + padding: 4rem; +} + +.square-fill { + background-color: black; +} + +.square-red { + background-color: red; + border-color: red; +} + +.square-rect { + width: 10rem; +} + +.square-rect.square-lg { + width: 20rem; +} + +.triangle-base { + display: inline-block; + + width: 0; + height: 0; +} + +.triangle-up { + border-left: 2rem solid transparent; + border-right: 2rem solid transparent; + border-bottom: 4rem solid black; +} + +.triangle-down { + border-left: 2rem solid transparent; + border-right: 2rem solid transparent; + border-top: 4rem solid black; +} + +.triangle-right { + border-top: 2rem solid transparent; + border-bottom: 2rem solid transparent; + border-left: 4rem solid black; +} + +.triangle-left { + border-top: 2rem solid transparent; + border-bottom: 2rem solid transparent; + border-right: 4rem solid black; +} + +/********************** + Urbit logo +**********************/ + +.urbit-logo { + width: 72px; + height: 72px; + display: inline-block; + border-radius: 50%; + vertical-align: middle; + + border: 5px solid white; + background-color: transparent; + + &:before { + content: "~"; + color: #FFFFFF; + font-size: 72px; + vertical-align: middle; + line-height: 54px; + text-align: center; + width: 2rem; + display: inline-block; + + font-family: "Work Sans"; + font-weight: 600; + + margin-right: 30px; + margin-top: 3px; + } +} + +.urbit-logo-solid { + border-color: black; + + &:before { + color: black; + } +} diff --git a/sass/typography.scss b/sass/typography.scss index df9c655..e03c4d2 100644 --- a/sass/typography.scss +++ b/sass/typography.scss @@ -1,23 +1,116 @@ @import "colors"; +/* + Type scale: + + small : 12px / 16px + body(*) : 16px / 24px + large/5 : 20px / 28px + (? letter spacing, diff font, bold, uppercase, etc.) + 4 : 20px / 28px + 3 : 24px / 32px + 2 : 36px / 52px + 1 : 48px / 64px + +*/ + /********************** Base text styles **********************/ +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Thin.ttf") format("truetype"); + font-weight: 100; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-ExtraLight.ttf") format("truetype"); + font-weight: 200; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Light.ttf") format("truetype"); + font-weight: 300; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Regular.ttf") format("truetype"); + font-weight: 400; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Medium.ttf") format("truetype"); + font-weight: 500; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-SemiBold.ttf") format("truetype"); + font-weight: 600; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Bold.ttf") format("truetype"); + font-weight: 700; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-ExtraBold.ttf") format("truetype"); + font-weight: 800; +} + +@font-face { + font-family: "Work Sans"; + src: url("https://storage.googleapis.com/media.urbit.org/fonts/WorkSans-Black.ttf") format("truetype"); + font-weight: 900; +} + +@font-face { + font-family: "Source Code Pro"; + src: url("//media.urbit.org/fonts/scp-extralight.woff"); + font-weight: 200; +} +@font-face { + font-family: "Source Code Pro"; + src: url("//media.urbit.org/fonts/scp-light.woff"); + font-weight: 300; +} +@font-face { + font-family: "Source Code Pro"; + src: url("//media.urbit.org/fonts/scp-regular.woff"); + font-weight: 400; +} +@font-face { + font-family: "Source Code Pro"; + src: url("//media.urbit.org/fonts/scp-medium.woff"); + font-weight: 500; +} +@font-face { + font-family: "Source Code Pro"; + src: url("//media.urbit.org/fonts/scp-bold.woff"); + font-weight: 600; +} +@font-face { + font-family: "Source Code Pro"; + src: url("//media.urbit.org/fonts/scp-black.woff"); + font-weight: 700; +} + * { font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } -html { - font-size: 6px; -} - body { - /*font-family: "San Francisco Text", "Helvetica Neue", Helvetica, Arial, sans-serif;*/ - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - font-size: 3rem; - line-height: 5rem; + font-family: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-size: 4rem; + line-height: 6rem; color: $gray-dark; } @@ -46,17 +139,17 @@ h5, h1, .h1 { - font-size: 10rem; + font-size: 12rem; font-weight: 600; - line-height: 12rem; + line-height: 16rem; margin: 4rem 0; } h2, .h2 { - font-size: 8rem; + font-size: 9rem; font-weight: 600; - line-height: 10rem; + line-height: 13rem; margin: 3rem 0; } @@ -64,26 +157,41 @@ h3, .h3 { font-size: 6rem; font-weight: 600; - line-height: 6rem; + line-height: 8rem; margin: 2rem 0; } h4, .h4 { - font-size: 4rem; + font-size: 5rem; font-weight: 600; - line-height: 5rem; + line-height: 7rem; margin: 1rem 0; } h5, .h5 { - font-size: 3rem; + font-size: 5rem; font-weight: 500; - line-height: 4rem; + line-height: 7rem; margin: 1rem 0; } +caption, .text-sm { + font-size: 3rem; + line-height: 5rem; +} + +.text-md { + font-size: 4rem; + line-height: 6rem; +} + +.text-lg { + font-size: 5rem; + line-height: 7rem; +} + /********************** Preformatted **********************/ @@ -107,8 +215,8 @@ code, } .code-block { - background-color: #F4F4F4; - padding: 3rem; + background-color: $gray-lighter; + padding: 5rem; white-space: pre-wrap; } @@ -116,34 +224,6 @@ code, font-weight: 200; } -/********************** - Text sizes -**********************/ - -.text-xs { - font-size: 1.5rem; -} - -.text-sm { - font-size: 2rem; -} - -.text-lh-xs { - line-height: 2rem; -} - -.text-lh-sm { - line-height: 3rem; -} - -.text-lh-md { - line-height: 6rem; -} - -.text-lh-lg { - line-height: 10rem; -} - /********************** Formatting **********************/ diff --git a/sass/utilities.scss b/sass/utilities.scss index dd6ba24..f0f911f 100644 --- a/sass/utilities.scss +++ b/sass/utilities.scss @@ -1,4817 +1,21 @@ /********************** - Width classes + Utility classes **********************/ - -.w-0 { - width: 0rem; +//Loop Count +$sizing-count: 99; +// +@for $i from 0 through $sizing-count { + .w-#{$i} {width: #{$i}rem;} // Example: .w-12: 12rem; + .h-#{$i} {height: #{$i}rem;} // Example: .h-12: 12rem; + .m-#{$i} {margin: #{$i}rem;} // Example: .m-12: 12rem; + .mt-#{$i} {margin-top: #{$i}rem;} // Example: .mt-12: 12rem; + .mb-#{$i} {margin-bottom: #{$i}rem;} // Example: .mb-12: 12rem; + .ml-#{$i} {margin-left: #{$i}rem;} // Example: .ml-12: 12rem; + .mr-#{$i} {margin-right: #{$i}rem;} // Example: .mr-12: 12rem; + .p-#{$i} {padding: #{$i}rem;} // Example: .p-12: 12rem; + .pt-#{$i} {margin-top: #{$i}rem;} // Example: .pt-12: 12rem; + .pb-#{$i} {padding-bottom: #{$i}rem;} // Example: .pb-12: 12rem; + .pl-#{$i} {padding-left: #{$i}rem;} // Example: .pl-12: 12rem; + .pr-#{$i} {padding-right: #{$i}rem;} // Example: pr-12: 12rem; } - -.w-1 { - width: 1rem; -} - -.w-2 { - width: 2rem; -} - -.w-3 { - width: 3rem; -} - -.w-4 { - width: 4rem; -} - -.w-5 { - width: 5rem; -} - -.w-6 { - width: 6rem; -} - -.w-7 { - width: 7rem; -} - -.w-8 { - width: 8rem; -} - -.w-9 { - width: 9rem; -} - -.w-10 { - width: 10rem; -} - -.w-11 { - width: 11rem; -} - -.w-12 { - width: 12rem; -} - -.w-13 { - width: 13rem; -} - -.w-14 { - width: 14rem; -} - -.w-15 { - width: 15rem; -} - -.w-16 { - width: 16rem; -} - -.w-17 { - width: 17rem; -} - -.w-18 { - width: 18rem; -} - -.w-19 { - width: 19rem; -} - -.w-20 { - width: 20rem; -} - -.w-21 { - width: 21rem; -} - -.w-22 { - width: 22rem; -} - -.w-23 { - width: 23rem; -} - -.w-24 { - width: 24rem; -} - -.w-25 { - width: 25rem; -} - -.w-26 { - width: 26rem; -} - -.w-27 { - width: 27rem; -} - -.w-28 { - width: 28rem; -} - -.w-29 { - width: 29rem; -} - -.w-30 { - width: 30rem; -} - -.w-31 { - width: 31rem; -} - -.w-32 { - width: 32rem; -} - -.w-33 { - width: 33rem; -} - -.w-34 { - width: 34rem; -} - -.w-35 { - width: 35rem; -} - -.w-36 { - width: 36rem; -} - -.w-37 { - width: 37rem; -} - -.w-38 { - width: 38rem; -} - -.w-39 { - width: 39rem; -} - -.w-40 { - width: 40rem; -} - -.w-41 { - width: 41rem; -} - -.w-42 { - width: 42rem; -} - -.w-43 { - width: 43rem; -} - -.w-44 { - width: 44rem; -} - -.w-45 { - width: 45rem; -} - -.w-46 { - width: 46rem; -} - -.w-47 { - width: 47rem; -} - -.w-48 { - width: 48rem; -} - -.w-49 { - width: 49rem; -} - -.w-50 { - width: 50rem; -} - -.w-51 { - width: 51rem; -} - -.w-52 { - width: 52rem; -} - -.w-53 { - width: 53rem; -} - -.w-54 { - width: 54rem; -} - -.w-55 { - width: 55rem; -} - -.w-56 { - width: 56rem; -} - -.w-57 { - width: 57rem; -} - -.w-58 { - width: 58rem; -} - -.w-59 { - width: 59rem; -} - -.w-60 { - width: 60rem; -} - -.w-61 { - width: 61rem; -} - -.w-62 { - width: 62rem; -} - -.w-63 { - width: 63rem; -} - -.w-64 { - width: 64rem; -} - -.w-65 { - width: 65rem; -} - -.w-66 { - width: 66rem; -} - -.w-67 { - width: 67rem; -} - -.w-68 { - width: 68rem; -} - -.w-69 { - width: 69rem; -} - -.w-70 { - width: 70rem; -} - -.w-71 { - width: 71rem; -} - -.w-72 { - width: 72rem; -} - -.w-73 { - width: 73rem; -} - -.w-74 { - width: 74rem; -} - -.w-75 { - width: 75rem; -} - -.w-76 { - width: 76rem; -} - -.w-77 { - width: 77rem; -} - -.w-78 { - width: 78rem; -} - -.w-79 { - width: 79rem; -} - -.w-80 { - width: 80rem; -} - -.w-81 { - width: 81rem; -} - -.w-82 { - width: 82rem; -} - -.w-83 { - width: 83rem; -} - -.w-84 { - width: 84rem; -} - -.w-85 { - width: 85rem; -} - -.w-86 { - width: 86rem; -} - -.w-87 { - width: 87rem; -} - -.w-88 { - width: 88rem; -} - -.w-89 { - width: 89rem; -} - -.w-90 { - width: 90rem; -} - -.w-91 { - width: 91rem; -} - -.w-92 { - width: 92rem; -} - -.w-93 { - width: 93rem; -} - -.w-94 { - width: 94rem; -} - -.w-95 { - width: 95rem; -} - -.w-96 { - width: 96rem; -} - -.w-97 { - width: 97rem; -} - -.w-98 { - width: 98rem; -} - -.w-99 { - width: 99rem; -} - -/********************** - Height classes -**********************/ - -.h-0 { - height: 0rem; -} - -.h-1 { - height: 1rem; -} - -.h-2 { - height: 2rem; -} - -.h-3 { - height: 3rem; -} - -.h-4 { - height: 4rem; -} - -.h-5 { - height: 5rem; -} - -.h-6 { - height: 6rem; -} - -.h-7 { - height: 7rem; -} - -.h-8 { - height: 8rem; -} - -.h-9 { - height: 9rem; -} - -.h-10 { - height: 10rem; -} - -.h-11 { - height: 11rem; -} - -.h-12 { - height: 12rem; -} - -.h-13 { - height: 13rem; -} - -.h-14 { - height: 14rem; -} - -.h-15 { - height: 15rem; -} - -.h-16 { - height: 16rem; -} - -.h-17 { - height: 17rem; -} - -.h-18 { - height: 18rem; -} - -.h-19 { - height: 19rem; -} - -.h-20 { - height: 20rem; -} - -.h-21 { - height: 21rem; -} - -.h-22 { - height: 22rem; -} - -.h-23 { - height: 23rem; -} - -.h-24 { - height: 24rem; -} - -.h-25 { - height: 25rem; -} - -.h-26 { - height: 26rem; -} - -.h-27 { - height: 27rem; -} - -.h-28 { - height: 28rem; -} - -.h-29 { - height: 29rem; -} - -.h-30 { - height: 30rem; -} - -.h-31 { - height: 31rem; -} - -.h-32 { - height: 32rem; -} - -.h-33 { - height: 33rem; -} - -.h-34 { - height: 34rem; -} - -.h-35 { - height: 35rem; -} - -.h-36 { - height: 36rem; -} - -.h-37 { - height: 37rem; -} - -.h-38 { - height: 38rem; -} - -.h-39 { - height: 39rem; -} - -.h-40 { - height: 40rem; -} - -.h-41 { - height: 41rem; -} - -.h-42 { - height: 42rem; -} - -.h-43 { - height: 43rem; -} - -.h-44 { - height: 44rem; -} - -.h-45 { - height: 45rem; -} - -.h-46 { - height: 46rem; -} - -.h-47 { - height: 47rem; -} - -.h-48 { - height: 48rem; -} - -.h-49 { - height: 49rem; -} - -.h-50 { - height: 50rem; -} - -.h-51 { - height: 51rem; -} - -.h-52 { - height: 52rem; -} - -.h-53 { - height: 53rem; -} - -.h-54 { - height: 54rem; -} - -.h-55 { - height: 55rem; -} - -.h-56 { - height: 56rem; -} - -.h-57 { - height: 57rem; -} - -.h-58 { - height: 58rem; -} - -.h-59 { - height: 59rem; -} - -.h-60 { - height: 60rem; -} - -.h-61 { - height: 61rem; -} - -.h-62 { - height: 62rem; -} - -.h-63 { - height: 63rem; -} - -.h-64 { - height: 64rem; -} - -.h-65 { - height: 65rem; -} - -.h-66 { - height: 66rem; -} - -.h-67 { - height: 67rem; -} - -.h-68 { - height: 68rem; -} - -.h-69 { - height: 69rem; -} - -.h-70 { - height: 70rem; -} - -.h-71 { - height: 71rem; -} - -.h-72 { - height: 72rem; -} - -.h-73 { - height: 73rem; -} - -.h-74 { - height: 74rem; -} - -.h-75 { - height: 75rem; -} - -.h-76 { - height: 76rem; -} - -.h-77 { - height: 77rem; -} - -.h-78 { - height: 78rem; -} - -.h-79 { - height: 79rem; -} - -.h-80 { - height: 80rem; -} - -.h-81 { - height: 81rem; -} - -.h-82 { - height: 82rem; -} - -.h-83 { - height: 83rem; -} - -.h-84 { - height: 84rem; -} - -.h-85 { - height: 85rem; -} - -.h-86 { - height: 86rem; -} - -.h-87 { - height: 87rem; -} - -.h-88 { - height: 88rem; -} - -.h-89 { - height: 89rem; -} - -.h-90 { - height: 90rem; -} - -.h-91 { - height: 91rem; -} - -.h-92 { - height: 92rem; -} - -.h-93 { - height: 93rem; -} - -.h-94 { - height: 94rem; -} - -.h-95 { - height: 95rem; -} - -.h-96 { - height: 96rem; -} - -.h-97 { - height: 97rem; -} - -.h-98 { - height: 98rem; -} - -.h-99 { - height: 99rem; -} - -/********************** - Margin classes -**********************/ - -.ml-0 { - margin-left: 0rem; -} - -.ml-1 { - margin-left: 1rem; -} - -.ml-2 { - margin-left: 2rem; -} - -.ml-3 { - margin-left: 3rem; -} - -.ml-4 { - margin-left: 4rem; -} - -.ml-5 { - margin-left: 5rem; -} - -.ml-6 { - margin-left: 6rem; -} - -.ml-7 { - margin-left: 7rem; -} - -.ml-8 { - margin-left: 8rem; -} - -.ml-9 { - margin-left: 9rem; -} - -.ml-10 { - margin-left: 10rem; -} - -.ml-11 { - margin-left: 11rem; -} - -.ml-12 { - margin-left: 12rem; -} - -.ml-13 { - margin-left: 13rem; -} - -.ml-14 { - margin-left: 14rem; -} - -.ml-15 { - margin-left: 15rem; -} - -.ml-16 { - margin-left: 16rem; -} - -.ml-17 { - margin-left: 17rem; -} - -.ml-18 { - margin-left: 18rem; -} - -.ml-19 { - margin-left: 19rem; -} - -.ml-20 { - margin-left: 20rem; -} - -.ml-21 { - margin-left: 21rem; -} - -.ml-22 { - margin-left: 22rem; -} - -.ml-23 { - margin-left: 23rem; -} - -.ml-24 { - margin-left: 24rem; -} - -.ml-25 { - margin-left: 25rem; -} - -.ml-26 { - margin-left: 26rem; -} - -.ml-27 { - margin-left: 27rem; -} - -.ml-28 { - margin-left: 28rem; -} - -.ml-29 { - margin-left: 29rem; -} - -.ml-30 { - margin-left: 30rem; -} - -.ml-31 { - margin-left: 31rem; -} - -.ml-32 { - margin-left: 32rem; -} - -.ml-33 { - margin-left: 33rem; -} - -.ml-34 { - margin-left: 34rem; -} - -.ml-35 { - margin-left: 35rem; -} - -.ml-36 { - margin-left: 36rem; -} - -.ml-37 { - margin-left: 37rem; -} - -.ml-38 { - margin-left: 38rem; -} - -.ml-39 { - margin-left: 39rem; -} - -.ml-40 { - margin-left: 40rem; -} - -.ml-41 { - margin-left: 41rem; -} - -.ml-42 { - margin-left: 42rem; -} - -.ml-43 { - margin-left: 43rem; -} - -.ml-44 { - margin-left: 44rem; -} - -.ml-45 { - margin-left: 45rem; -} - -.ml-46 { - margin-left: 46rem; -} - -.ml-47 { - margin-left: 47rem; -} - -.ml-48 { - margin-left: 48rem; -} - -.ml-49 { - margin-left: 49rem; -} - -.ml-50 { - margin-left: 50rem; -} - -.ml-51 { - margin-left: 51rem; -} - -.ml-52 { - margin-left: 52rem; -} - -.ml-53 { - margin-left: 53rem; -} - -.ml-54 { - margin-left: 54rem; -} - -.ml-55 { - margin-left: 55rem; -} - -.ml-56 { - margin-left: 56rem; -} - -.ml-57 { - margin-left: 57rem; -} - -.ml-58 { - margin-left: 58rem; -} - -.ml-59 { - margin-left: 59rem; -} - -.ml-60 { - margin-left: 60rem; -} - -.ml-61 { - margin-left: 61rem; -} - -.ml-62 { - margin-left: 62rem; -} - -.ml-63 { - margin-left: 63rem; -} - -.ml-64 { - margin-left: 64rem; -} - -.ml-65 { - margin-left: 65rem; -} - -.ml-66 { - margin-left: 66rem; -} - -.ml-67 { - margin-left: 67rem; -} - -.ml-68 { - margin-left: 68rem; -} - -.ml-69 { - margin-left: 69rem; -} - -.ml-70 { - margin-left: 70rem; -} - -.ml-71 { - margin-left: 71rem; -} - -.ml-72 { - margin-left: 72rem; -} - -.ml-73 { - margin-left: 73rem; -} - -.ml-74 { - margin-left: 74rem; -} - -.ml-75 { - margin-left: 75rem; -} - -.ml-76 { - margin-left: 76rem; -} - -.ml-77 { - margin-left: 77rem; -} - -.ml-78 { - margin-left: 78rem; -} - -.ml-79 { - margin-left: 79rem; -} - -.ml-80 { - margin-left: 80rem; -} - -.ml-81 { - margin-left: 81rem; -} - -.ml-82 { - margin-left: 82rem; -} - -.ml-83 { - margin-left: 83rem; -} - -.ml-84 { - margin-left: 84rem; -} - -.ml-85 { - margin-left: 85rem; -} - -.ml-86 { - margin-left: 86rem; -} - -.ml-87 { - margin-left: 87rem; -} - -.ml-88 { - margin-left: 88rem; -} - -.ml-89 { - margin-left: 89rem; -} - -.ml-90 { - margin-left: 90rem; -} - -.ml-91 { - margin-left: 91rem; -} - -.ml-92 { - margin-left: 92rem; -} - -.ml-93 { - margin-left: 93rem; -} - -.ml-94 { - margin-left: 94rem; -} - -.ml-95 { - margin-left: 95rem; -} - -.ml-96 { - margin-left: 96rem; -} - -.ml-97 { - margin-left: 97rem; -} - -.ml-98 { - margin-left: 98rem; -} - -.ml-99 { - margin-left: 99rem; -} - -.mr-0 { - margin-right: 0rem; -} - -.mr-1 { - margin-right: 1rem; -} - -.mr-2 { - margin-right: 2rem; -} - -.mr-3 { - margin-right: 3rem; -} - -.mr-4 { - margin-right: 4rem; -} - -.mr-5 { - margin-right: 5rem; -} - -.mr-6 { - margin-right: 6rem; -} - -.mr-7 { - margin-right: 7rem; -} - -.mr-8 { - margin-right: 8rem; -} - -.mr-9 { - margin-right: 9rem; -} - -.mr-10 { - margin-right: 10rem; -} - -.mr-11 { - margin-right: 11rem; -} - -.mr-12 { - margin-right: 12rem; -} - -.mr-13 { - margin-right: 13rem; -} - -.mr-14 { - margin-right: 14rem; -} - -.mr-15 { - margin-right: 15rem; -} - -.mr-16 { - margin-right: 16rem; -} - -.mr-17 { - margin-right: 17rem; -} - -.mr-18 { - margin-right: 18rem; -} - -.mr-19 { - margin-right: 19rem; -} - -.mr-20 { - margin-right: 20rem; -} - -.mr-21 { - margin-right: 21rem; -} - -.mr-22 { - margin-right: 22rem; -} - -.mr-23 { - margin-right: 23rem; -} - -.mr-24 { - margin-right: 24rem; -} - -.mr-25 { - margin-right: 25rem; -} - -.mr-26 { - margin-right: 26rem; -} - -.mr-27 { - margin-right: 27rem; -} - -.mr-28 { - margin-right: 28rem; -} - -.mr-29 { - margin-right: 29rem; -} - -.mr-30 { - margin-right: 30rem; -} - -.mr-31 { - margin-right: 31rem; -} - -.mr-32 { - margin-right: 32rem; -} - -.mr-33 { - margin-right: 33rem; -} - -.mr-34 { - margin-right: 34rem; -} - -.mr-35 { - margin-right: 35rem; -} - -.mr-36 { - margin-right: 36rem; -} - -.mr-37 { - margin-right: 37rem; -} - -.mr-38 { - margin-right: 38rem; -} - -.mr-39 { - margin-right: 39rem; -} - -.mr-40 { - margin-right: 40rem; -} - -.mr-41 { - margin-right: 41rem; -} - -.mr-42 { - margin-right: 42rem; -} - -.mr-43 { - margin-right: 43rem; -} - -.mr-44 { - margin-right: 44rem; -} - -.mr-45 { - margin-right: 45rem; -} - -.mr-46 { - margin-right: 46rem; -} - -.mr-47 { - margin-right: 47rem; -} - -.mr-48 { - margin-right: 48rem; -} - -.mr-49 { - margin-right: 49rem; -} - -.mr-50 { - margin-right: 50rem; -} - -.mr-51 { - margin-right: 51rem; -} - -.mr-52 { - margin-right: 52rem; -} - -.mr-53 { - margin-right: 53rem; -} - -.mr-54 { - margin-right: 54rem; -} - -.mr-55 { - margin-right: 55rem; -} - -.mr-56 { - margin-right: 56rem; -} - -.mr-57 { - margin-right: 57rem; -} - -.mr-58 { - margin-right: 58rem; -} - -.mr-59 { - margin-right: 59rem; -} - -.mr-60 { - margin-right: 60rem; -} - -.mr-61 { - margin-right: 61rem; -} - -.mr-62 { - margin-right: 62rem; -} - -.mr-63 { - margin-right: 63rem; -} - -.mr-64 { - margin-right: 64rem; -} - -.mr-65 { - margin-right: 65rem; -} - -.mr-66 { - margin-right: 66rem; -} - -.mr-67 { - margin-right: 67rem; -} - -.mr-68 { - margin-right: 68rem; -} - -.mr-69 { - margin-right: 69rem; -} - -.mr-70 { - margin-right: 70rem; -} - -.mr-71 { - margin-right: 71rem; -} - -.mr-72 { - margin-right: 72rem; -} - -.mr-73 { - margin-right: 73rem; -} - -.mr-74 { - margin-right: 74rem; -} - -.mr-75 { - margin-right: 75rem; -} - -.mr-76 { - margin-right: 76rem; -} - -.mr-77 { - margin-right: 77rem; -} - -.mr-78 { - margin-right: 78rem; -} - -.mr-79 { - margin-right: 79rem; -} - -.mr-80 { - margin-right: 80rem; -} - -.mr-81 { - margin-right: 81rem; -} - -.mr-82 { - margin-right: 82rem; -} - -.mr-83 { - margin-right: 83rem; -} - -.mr-84 { - margin-right: 84rem; -} - -.mr-85 { - margin-right: 85rem; -} - -.mr-86 { - margin-right: 86rem; -} - -.mr-87 { - margin-right: 87rem; -} - -.mr-88 { - margin-right: 88rem; -} - -.mr-89 { - margin-right: 89rem; -} - -.mr-90 { - margin-right: 90rem; -} - -.mr-91 { - margin-right: 91rem; -} - -.mr-92 { - margin-right: 92rem; -} - -.mr-93 { - margin-right: 93rem; -} - -.mr-94 { - margin-right: 94rem; -} - -.mr-95 { - margin-right: 95rem; -} - -.mr-96 { - margin-right: 96rem; -} - -.mr-97 { - margin-right: 97rem; -} - -.mr-98 { - margin-right: 98rem; -} - -.mr-99 { - margin-right: 99rem; -} - -.mt-0 { - margin-top: 0rem; -} - -.mt-1 { - margin-top: 1rem; -} - -.mt-2 { - margin-top: 2rem; -} - -.mt-3 { - margin-top: 3rem; -} - -.mt-4 { - margin-top: 4rem; -} - -.mt-5 { - margin-top: 5rem; -} - -.mt-6 { - margin-top: 6rem; -} - -.mt-7 { - margin-top: 7rem; -} - -.mt-8 { - margin-top: 8rem; -} - -.mt-9 { - margin-top: 9rem; -} - -.mt-10 { - margin-top: 10rem; -} - -.mt-11 { - margin-top: 11rem; -} - -.mt-12 { - margin-top: 12rem; -} - -.mt-13 { - margin-top: 13rem; -} - -.mt-14 { - margin-top: 14rem; -} - -.mt-15 { - margin-top: 15rem; -} - -.mt-16 { - margin-top: 16rem; -} - -.mt-17 { - margin-top: 17rem; -} - -.mt-18 { - margin-top: 18rem; -} - -.mt-19 { - margin-top: 19rem; -} - -.mt-20 { - margin-top: 20rem; -} - -.mt-21 { - margin-top: 21rem; -} - -.mt-22 { - margin-top: 22rem; -} - -.mt-23 { - margin-top: 23rem; -} - -.mt-24 { - margin-top: 24rem; -} - -.mt-25 { - margin-top: 25rem; -} - -.mt-26 { - margin-top: 26rem; -} - -.mt-27 { - margin-top: 27rem; -} - -.mt-28 { - margin-top: 28rem; -} - -.mt-29 { - margin-top: 29rem; -} - -.mt-30 { - margin-top: 30rem; -} - -.mt-31 { - margin-top: 31rem; -} - -.mt-32 { - margin-top: 32rem; -} - -.mt-33 { - margin-top: 33rem; -} - -.mt-34 { - margin-top: 34rem; -} - -.mt-35 { - margin-top: 35rem; -} - -.mt-36 { - margin-top: 36rem; -} - -.mt-37 { - margin-top: 37rem; -} - -.mt-38 { - margin-top: 38rem; -} - -.mt-39 { - margin-top: 39rem; -} - -.mt-40 { - margin-top: 40rem; -} - -.mt-41 { - margin-top: 41rem; -} - -.mt-42 { - margin-top: 42rem; -} - -.mt-43 { - margin-top: 43rem; -} - -.mt-44 { - margin-top: 44rem; -} - -.mt-45 { - margin-top: 45rem; -} - -.mt-46 { - margin-top: 46rem; -} - -.mt-47 { - margin-top: 47rem; -} - -.mt-48 { - margin-top: 48rem; -} - -.mt-49 { - margin-top: 49rem; -} - -.mt-50 { - margin-top: 50rem; -} - -.mt-51 { - margin-top: 51rem; -} - -.mt-52 { - margin-top: 52rem; -} - -.mt-53 { - margin-top: 53rem; -} - -.mt-54 { - margin-top: 54rem; -} - -.mt-55 { - margin-top: 55rem; -} - -.mt-56 { - margin-top: 56rem; -} - -.mt-57 { - margin-top: 57rem; -} - -.mt-58 { - margin-top: 58rem; -} - -.mt-59 { - margin-top: 59rem; -} - -.mt-60 { - margin-top: 60rem; -} - -.mt-61 { - margin-top: 61rem; -} - -.mt-62 { - margin-top: 62rem; -} - -.mt-63 { - margin-top: 63rem; -} - -.mt-64 { - margin-top: 64rem; -} - -.mt-65 { - margin-top: 65rem; -} - -.mt-66 { - margin-top: 66rem; -} - -.mt-67 { - margin-top: 67rem; -} - -.mt-68 { - margin-top: 68rem; -} - -.mt-69 { - margin-top: 69rem; -} - -.mt-70 { - margin-top: 70rem; -} - -.mt-71 { - margin-top: 71rem; -} - -.mt-72 { - margin-top: 72rem; -} - -.mt-73 { - margin-top: 73rem; -} - -.mt-74 { - margin-top: 74rem; -} - -.mt-75 { - margin-top: 75rem; -} - -.mt-76 { - margin-top: 76rem; -} - -.mt-77 { - margin-top: 77rem; -} - -.mt-78 { - margin-top: 78rem; -} - -.mt-79 { - margin-top: 79rem; -} - -.mt-80 { - margin-top: 80rem; -} - -.mt-81 { - margin-top: 81rem; -} - -.mt-82 { - margin-top: 82rem; -} - -.mt-83 { - margin-top: 83rem; -} - -.mt-84 { - margin-top: 84rem; -} - -.mt-85 { - margin-top: 85rem; -} - -.mt-86 { - margin-top: 86rem; -} - -.mt-87 { - margin-top: 87rem; -} - -.mt-88 { - margin-top: 88rem; -} - -.mt-89 { - margin-top: 89rem; -} - -.mt-90 { - margin-top: 90rem; -} - -.mt-91 { - margin-top: 91rem; -} - -.mt-92 { - margin-top: 92rem; -} - -.mt-93 { - margin-top: 93rem; -} - -.mt-94 { - margin-top: 94rem; -} - -.mt-95 { - margin-top: 95rem; -} - -.mt-96 { - margin-top: 96rem; -} - -.mt-97 { - margin-top: 97rem; -} - -.mt-98 { - margin-top: 98rem; -} - -.mt-99 { - margin-top: 99rem; -} - -.mb-0 { - margin-bottom: 0rem; -} - -.mb-1 { - margin-bottom: 1rem; -} - -.mb-2 { - margin-bottom: 2rem; -} - -.mb-3 { - margin-bottom: 3rem; -} - -.mb-4 { - margin-bottom: 4rem; -} - -.mb-5 { - margin-bottom: 5rem; -} - -.mb-6 { - margin-bottom: 6rem; -} - -.mb-7 { - margin-bottom: 7rem; -} - -.mb-8 { - margin-bottom: 8rem; -} - -.mb-9 { - margin-bottom: 9rem; -} - -.mb-10 { - margin-bottom: 10rem; -} - -.mb-11 { - margin-bottom: 11rem; -} - -.mb-12 { - margin-bottom: 12rem; -} - -.mb-13 { - margin-bottom: 13rem; -} - -.mb-14 { - margin-bottom: 14rem; -} - -.mb-15 { - margin-bottom: 15rem; -} - -.mb-16 { - margin-bottom: 16rem; -} - -.mb-17 { - margin-bottom: 17rem; -} - -.mb-18 { - margin-bottom: 18rem; -} - -.mb-19 { - margin-bottom: 19rem; -} - -.mb-20 { - margin-bottom: 20rem; -} - -.mb-21 { - margin-bottom: 21rem; -} - -.mb-22 { - margin-bottom: 22rem; -} - -.mb-23 { - margin-bottom: 23rem; -} - -.mb-24 { - margin-bottom: 24rem; -} - -.mb-25 { - margin-bottom: 25rem; -} - -.mb-26 { - margin-bottom: 26rem; -} - -.mb-27 { - margin-bottom: 27rem; -} - -.mb-28 { - margin-bottom: 28rem; -} - -.mb-29 { - margin-bottom: 29rem; -} - -.mb-30 { - margin-bottom: 30rem; -} - -.mb-31 { - margin-bottom: 31rem; -} - -.mb-32 { - margin-bottom: 32rem; -} - -.mb-33 { - margin-bottom: 33rem; -} - -.mb-34 { - margin-bottom: 34rem; -} - -.mb-35 { - margin-bottom: 35rem; -} - -.mb-36 { - margin-bottom: 36rem; -} - -.mb-37 { - margin-bottom: 37rem; -} - -.mb-38 { - margin-bottom: 38rem; -} - -.mb-39 { - margin-bottom: 39rem; -} - -.mb-40 { - margin-bottom: 40rem; -} - -.mb-41 { - margin-bottom: 41rem; -} - -.mb-42 { - margin-bottom: 42rem; -} - -.mb-43 { - margin-bottom: 43rem; -} - -.mb-44 { - margin-bottom: 44rem; -} - -.mb-45 { - margin-bottom: 45rem; -} - -.mb-46 { - margin-bottom: 46rem; -} - -.mb-47 { - margin-bottom: 47rem; -} - -.mb-48 { - margin-bottom: 48rem; -} - -.mb-49 { - margin-bottom: 49rem; -} - -.mb-50 { - margin-bottom: 50rem; -} - -.mb-51 { - margin-bottom: 51rem; -} - -.mb-52 { - margin-bottom: 52rem; -} - -.mb-53 { - margin-bottom: 53rem; -} - -.mb-54 { - margin-bottom: 54rem; -} - -.mb-55 { - margin-bottom: 55rem; -} - -.mb-56 { - margin-bottom: 56rem; -} - -.mb-57 { - margin-bottom: 57rem; -} - -.mb-58 { - margin-bottom: 58rem; -} - -.mb-59 { - margin-bottom: 59rem; -} - -.mb-60 { - margin-bottom: 60rem; -} - -.mb-61 { - margin-bottom: 61rem; -} - -.mb-62 { - margin-bottom: 62rem; -} - -.mb-63 { - margin-bottom: 63rem; -} - -.mb-64 { - margin-bottom: 64rem; -} - -.mb-65 { - margin-bottom: 65rem; -} - -.mb-66 { - margin-bottom: 66rem; -} - -.mb-67 { - margin-bottom: 67rem; -} - -.mb-68 { - margin-bottom: 68rem; -} - -.mb-69 { - margin-bottom: 69rem; -} - -.mb-70 { - margin-bottom: 70rem; -} - -.mb-71 { - margin-bottom: 71rem; -} - -.mb-72 { - margin-bottom: 72rem; -} - -.mb-73 { - margin-bottom: 73rem; -} - -.mb-74 { - margin-bottom: 74rem; -} - -.mb-75 { - margin-bottom: 75rem; -} - -.mb-76 { - margin-bottom: 76rem; -} - -.mb-77 { - margin-bottom: 77rem; -} - -.mb-78 { - margin-bottom: 78rem; -} - -.mb-79 { - margin-bottom: 79rem; -} - -.mb-80 { - margin-bottom: 80rem; -} - -.mb-81 { - margin-bottom: 81rem; -} - -.mb-82 { - margin-bottom: 82rem; -} - -.mb-83 { - margin-bottom: 83rem; -} - -.mb-84 { - margin-bottom: 84rem; -} - -.mb-85 { - margin-bottom: 85rem; -} - -.mb-86 { - margin-bottom: 86rem; -} - -.mb-87 { - margin-bottom: 87rem; -} - -.mb-88 { - margin-bottom: 88rem; -} - -.mb-89 { - margin-bottom: 89rem; -} - -.mb-90 { - margin-bottom: 90rem; -} - -.mb-91 { - margin-bottom: 91rem; -} - -.mb-92 { - margin-bottom: 92rem; -} - -.mb-93 { - margin-bottom: 93rem; -} - -.mb-94 { - margin-bottom: 94rem; -} - -.mb-95 { - margin-bottom: 95rem; -} - -.mb-96 { - margin-bottom: 96rem; -} - -.mb-97 { - margin-bottom: 97rem; -} - -.mb-98 { - margin-bottom: 98rem; -} - -.mb-99 { - margin-bottom: 99rem; -} - -.m-0 { - margin: 0rem; -} - -.m-1 { - margin: 1rem; -} - -.m-2 { - margin: 2rem; -} - -.m-3 { - margin: 3rem; -} - -.m-4 { - margin: 4rem; -} - -.m-5 { - margin: 5rem; -} - -.m-6 { - margin: 6rem; -} - -.m-7 { - margin: 7rem; -} - -.m-8 { - margin: 8rem; -} - -.m-9 { - margin: 9rem; -} - -.m-10 { - margin: 10rem; -} - -.m-11 { - margin: 11rem; -} - -.m-12 { - margin: 12rem; -} - -.m-13 { - margin: 13rem; -} - -.m-14 { - margin: 14rem; -} - -.m-15 { - margin: 15rem; -} - -.m-16 { - margin: 16rem; -} - -.m-17 { - margin: 17rem; -} - -.m-18 { - margin: 18rem; -} - -.m-19 { - margin: 19rem; -} - -.m-20 { - margin: 20rem; -} - -.m-21 { - margin: 21rem; -} - -.m-22 { - margin: 22rem; -} - -.m-23 { - margin: 23rem; -} - -.m-24 { - margin: 24rem; -} - -.m-25 { - margin: 25rem; -} - -.m-26 { - margin: 26rem; -} - -.m-27 { - margin: 27rem; -} - -.m-28 { - margin: 28rem; -} - -.m-29 { - margin: 29rem; -} - -.m-30 { - margin: 30rem; -} - -.m-31 { - margin: 31rem; -} - -.m-32 { - margin: 32rem; -} - -.m-33 { - margin: 33rem; -} - -.m-34 { - margin: 34rem; -} - -.m-35 { - margin: 35rem; -} - -.m-36 { - margin: 36rem; -} - -.m-37 { - margin: 37rem; -} - -.m-38 { - margin: 38rem; -} - -.m-39 { - margin: 39rem; -} - -.m-40 { - margin: 40rem; -} - -.m-41 { - margin: 41rem; -} - -.m-42 { - margin: 42rem; -} - -.m-43 { - margin: 43rem; -} - -.m-44 { - margin: 44rem; -} - -.m-45 { - margin: 45rem; -} - -.m-46 { - margin: 46rem; -} - -.m-47 { - margin: 47rem; -} - -.m-48 { - margin: 48rem; -} - -.m-49 { - margin: 49rem; -} - -.m-50 { - margin: 50rem; -} - -.m-51 { - margin: 51rem; -} - -.m-52 { - margin: 52rem; -} - -.m-53 { - margin: 53rem; -} - -.m-54 { - margin: 54rem; -} - -.m-55 { - margin: 55rem; -} - -.m-56 { - margin: 56rem; -} - -.m-57 { - margin: 57rem; -} - -.m-58 { - margin: 58rem; -} - -.m-59 { - margin: 59rem; -} - -.m-60 { - margin: 60rem; -} - -.m-61 { - margin: 61rem; -} - -.m-62 { - margin: 62rem; -} - -.m-63 { - margin: 63rem; -} - -.m-64 { - margin: 64rem; -} - -.m-65 { - margin: 65rem; -} - -.m-66 { - margin: 66rem; -} - -.m-67 { - margin: 67rem; -} - -.m-68 { - margin: 68rem; -} - -.m-69 { - margin: 69rem; -} - -.m-70 { - margin: 70rem; -} - -.m-71 { - margin: 71rem; -} - -.m-72 { - margin: 72rem; -} - -.m-73 { - margin: 73rem; -} - -.m-74 { - margin: 74rem; -} - -.m-75 { - margin: 75rem; -} - -.m-76 { - margin: 76rem; -} - -.m-77 { - margin: 77rem; -} - -.m-78 { - margin: 78rem; -} - -.m-79 { - margin: 79rem; -} - -.m-80 { - margin: 80rem; -} - -.m-81 { - margin: 81rem; -} - -.m-82 { - margin: 82rem; -} - -.m-83 { - margin: 83rem; -} - -.m-84 { - margin: 84rem; -} - -.m-85 { - margin: 85rem; -} - -.m-86 { - margin: 86rem; -} - -.m-87 { - margin: 87rem; -} - -.m-88 { - margin: 88rem; -} - -.m-89 { - margin: 89rem; -} - -.m-90 { - margin: 90rem; -} - -.m-91 { - margin: 91rem; -} - -.m-92 { - margin: 92rem; -} - -.m-93 { - margin: 93rem; -} - -.m-94 { - margin: 94rem; -} - -.m-95 { - margin: 95rem; -} - -.m-96 { - margin: 96rem; -} - -.m-97 { - margin: 97rem; -} - -.m-98 { - margin: 98rem; -} - -.m-99 { - margin: 99rem; -} - -/********************** - Padding classes -**********************/ - -.pl-0 { - padding-left: 0rem; -} - -.pl-1 { - padding-left: 1rem; -} - -.pl-2 { - padding-left: 2rem; -} - -.pl-3 { - padding-left: 3rem; -} - -.pl-4 { - padding-left: 4rem; -} - -.pl-5 { - padding-left: 5rem; -} - -.pl-6 { - padding-left: 6rem; -} - -.pl-7 { - padding-left: 7rem; -} - -.pl-8 { - padding-left: 8rem; -} - -.pl-9 { - padding-left: 9rem; -} - -.pl-10 { - padding-left: 10rem; -} - -.pl-11 { - padding-left: 11rem; -} - -.pl-12 { - padding-left: 12rem; -} - -.pl-13 { - padding-left: 13rem; -} - -.pl-14 { - padding-left: 14rem; -} - -.pl-15 { - padding-left: 15rem; -} - -.pl-16 { - padding-left: 16rem; -} - -.pl-17 { - padding-left: 17rem; -} - -.pl-18 { - padding-left: 18rem; -} - -.pl-19 { - padding-left: 19rem; -} - -.pl-20 { - padding-left: 20rem; -} - -.pl-21 { - padding-left: 21rem; -} - -.pl-22 { - padding-left: 22rem; -} - -.pl-23 { - padding-left: 23rem; -} - -.pl-24 { - padding-left: 24rem; -} - -.pl-25 { - padding-left: 25rem; -} - -.pl-26 { - padding-left: 26rem; -} - -.pl-27 { - padding-left: 27rem; -} - -.pl-28 { - padding-left: 28rem; -} - -.pl-29 { - padding-left: 29rem; -} - -.pl-30 { - padding-left: 30rem; -} - -.pl-31 { - padding-left: 31rem; -} - -.pl-32 { - padding-left: 32rem; -} - -.pl-33 { - padding-left: 33rem; -} - -.pl-34 { - padding-left: 34rem; -} - -.pl-35 { - padding-left: 35rem; -} - -.pl-36 { - padding-left: 36rem; -} - -.pl-37 { - padding-left: 37rem; -} - -.pl-38 { - padding-left: 38rem; -} - -.pl-39 { - padding-left: 39rem; -} - -.pl-40 { - padding-left: 40rem; -} - -.pl-41 { - padding-left: 41rem; -} - -.pl-42 { - padding-left: 42rem; -} - -.pl-43 { - padding-left: 43rem; -} - -.pl-44 { - padding-left: 44rem; -} - -.pl-45 { - padding-left: 45rem; -} - -.pl-46 { - padding-left: 46rem; -} - -.pl-47 { - padding-left: 47rem; -} - -.pl-48 { - padding-left: 48rem; -} - -.pl-49 { - padding-left: 49rem; -} - -.pl-50 { - padding-left: 50rem; -} - -.pl-51 { - padding-left: 51rem; -} - -.pl-52 { - padding-left: 52rem; -} - -.pl-53 { - padding-left: 53rem; -} - -.pl-54 { - padding-left: 54rem; -} - -.pl-55 { - padding-left: 55rem; -} - -.pl-56 { - padding-left: 56rem; -} - -.pl-57 { - padding-left: 57rem; -} - -.pl-58 { - padding-left: 58rem; -} - -.pl-59 { - padding-left: 59rem; -} - -.pl-60 { - padding-left: 60rem; -} - -.pl-61 { - padding-left: 61rem; -} - -.pl-62 { - padding-left: 62rem; -} - -.pl-63 { - padding-left: 63rem; -} - -.pl-64 { - padding-left: 64rem; -} - -.pl-65 { - padding-left: 65rem; -} - -.pl-66 { - padding-left: 66rem; -} - -.pl-67 { - padding-left: 67rem; -} - -.pl-68 { - padding-left: 68rem; -} - -.pl-69 { - padding-left: 69rem; -} - -.pl-70 { - padding-left: 70rem; -} - -.pl-71 { - padding-left: 71rem; -} - -.pl-72 { - padding-left: 72rem; -} - -.pl-73 { - padding-left: 73rem; -} - -.pl-74 { - padding-left: 74rem; -} - -.pl-75 { - padding-left: 75rem; -} - -.pl-76 { - padding-left: 76rem; -} - -.pl-77 { - padding-left: 77rem; -} - -.pl-78 { - padding-left: 78rem; -} - -.pl-79 { - padding-left: 79rem; -} - -.pl-80 { - padding-left: 80rem; -} - -.pl-81 { - padding-left: 81rem; -} - -.pl-82 { - padding-left: 82rem; -} - -.pl-83 { - padding-left: 83rem; -} - -.pl-84 { - padding-left: 84rem; -} - -.pl-85 { - padding-left: 85rem; -} - -.pl-86 { - padding-left: 86rem; -} - -.pl-87 { - padding-left: 87rem; -} - -.pl-88 { - padding-left: 88rem; -} - -.pl-89 { - padding-left: 89rem; -} - -.pl-90 { - padding-left: 90rem; -} - -.pl-91 { - padding-left: 91rem; -} - -.pl-92 { - padding-left: 92rem; -} - -.pl-93 { - padding-left: 93rem; -} - -.pl-94 { - padding-left: 94rem; -} - -.pl-95 { - padding-left: 95rem; -} - -.pl-96 { - padding-left: 96rem; -} - -.pl-97 { - padding-left: 97rem; -} - -.pl-98 { - padding-left: 98rem; -} - -.pl-99 { - padding-left: 99rem; -} - -.pr-0 { - padding-right: 0rem; -} - -.pr-1 { - padding-right: 1rem; -} - -.pr-2 { - padding-right: 2rem; -} - -.pr-3 { - padding-right: 3rem; -} - -.pr-4 { - padding-right: 4rem; -} - -.pr-5 { - padding-right: 5rem; -} - -.pr-6 { - padding-right: 6rem; -} - -.pr-7 { - padding-right: 7rem; -} - -.pr-8 { - padding-right: 8rem; -} - -.pr-9 { - padding-right: 9rem; -} - -.pr-10 { - padding-right: 10rem; -} - -.pr-11 { - padding-right: 11rem; -} - -.pr-12 { - padding-right: 12rem; -} - -.pr-13 { - padding-right: 13rem; -} - -.pr-14 { - padding-right: 14rem; -} - -.pr-15 { - padding-right: 15rem; -} - -.pr-16 { - padding-right: 16rem; -} - -.pr-17 { - padding-right: 17rem; -} - -.pr-18 { - padding-right: 18rem; -} - -.pr-19 { - padding-right: 19rem; -} - -.pr-20 { - padding-right: 20rem; -} - -.pr-21 { - padding-right: 21rem; -} - -.pr-22 { - padding-right: 22rem; -} - -.pr-23 { - padding-right: 23rem; -} - -.pr-24 { - padding-right: 24rem; -} - -.pr-25 { - padding-right: 25rem; -} - -.pr-26 { - padding-right: 26rem; -} - -.pr-27 { - padding-right: 27rem; -} - -.pr-28 { - padding-right: 28rem; -} - -.pr-29 { - padding-right: 29rem; -} - -.pr-30 { - padding-right: 30rem; -} - -.pr-31 { - padding-right: 31rem; -} - -.pr-32 { - padding-right: 32rem; -} - -.pr-33 { - padding-right: 33rem; -} - -.pr-34 { - padding-right: 34rem; -} - -.pr-35 { - padding-right: 35rem; -} - -.pr-36 { - padding-right: 36rem; -} - -.pr-37 { - padding-right: 37rem; -} - -.pr-38 { - padding-right: 38rem; -} - -.pr-39 { - padding-right: 39rem; -} - -.pr-40 { - padding-right: 40rem; -} - -.pr-41 { - padding-right: 41rem; -} - -.pr-42 { - padding-right: 42rem; -} - -.pr-43 { - padding-right: 43rem; -} - -.pr-44 { - padding-right: 44rem; -} - -.pr-45 { - padding-right: 45rem; -} - -.pr-46 { - padding-right: 46rem; -} - -.pr-47 { - padding-right: 47rem; -} - -.pr-48 { - padding-right: 48rem; -} - -.pr-49 { - padding-right: 49rem; -} - -.pr-50 { - padding-right: 50rem; -} - -.pr-51 { - padding-right: 51rem; -} - -.pr-52 { - padding-right: 52rem; -} - -.pr-53 { - padding-right: 53rem; -} - -.pr-54 { - padding-right: 54rem; -} - -.pr-55 { - padding-right: 55rem; -} - -.pr-56 { - padding-right: 56rem; -} - -.pr-57 { - padding-right: 57rem; -} - -.pr-58 { - padding-right: 58rem; -} - -.pr-59 { - padding-right: 59rem; -} - -.pr-60 { - padding-right: 60rem; -} - -.pr-61 { - padding-right: 61rem; -} - -.pr-62 { - padding-right: 62rem; -} - -.pr-63 { - padding-right: 63rem; -} - -.pr-64 { - padding-right: 64rem; -} - -.pr-65 { - padding-right: 65rem; -} - -.pr-66 { - padding-right: 66rem; -} - -.pr-67 { - padding-right: 67rem; -} - -.pr-68 { - padding-right: 68rem; -} - -.pr-69 { - padding-right: 69rem; -} - -.pr-70 { - padding-right: 70rem; -} - -.pr-71 { - padding-right: 71rem; -} - -.pr-72 { - padding-right: 72rem; -} - -.pr-73 { - padding-right: 73rem; -} - -.pr-74 { - padding-right: 74rem; -} - -.pr-75 { - padding-right: 75rem; -} - -.pr-76 { - padding-right: 76rem; -} - -.pr-77 { - padding-right: 77rem; -} - -.pr-78 { - padding-right: 78rem; -} - -.pr-79 { - padding-right: 79rem; -} - -.pr-80 { - padding-right: 80rem; -} - -.pr-81 { - padding-right: 81rem; -} - -.pr-82 { - padding-right: 82rem; -} - -.pr-83 { - padding-right: 83rem; -} - -.pr-84 { - padding-right: 84rem; -} - -.pr-85 { - padding-right: 85rem; -} - -.pr-86 { - padding-right: 86rem; -} - -.pr-87 { - padding-right: 87rem; -} - -.pr-88 { - padding-right: 88rem; -} - -.pr-89 { - padding-right: 89rem; -} - -.pr-90 { - padding-right: 90rem; -} - -.pr-91 { - padding-right: 91rem; -} - -.pr-92 { - padding-right: 92rem; -} - -.pr-93 { - padding-right: 93rem; -} - -.pr-94 { - padding-right: 94rem; -} - -.pr-95 { - padding-right: 95rem; -} - -.pr-96 { - padding-right: 96rem; -} - -.pr-97 { - padding-right: 97rem; -} - -.pr-98 { - padding-right: 98rem; -} - -.pr-99 { - padding-right: 99rem; -} - -.pt-0 { - padding-top: 0rem; -} - -.pt-1 { - padding-top: 1rem; -} - -.pt-2 { - padding-top: 2rem; -} - -.pt-3 { - padding-top: 3rem; -} - -.pt-4 { - padding-top: 4rem; -} - -.pt-5 { - padding-top: 5rem; -} - -.pt-6 { - padding-top: 6rem; -} - -.pt-7 { - padding-top: 7rem; -} - -.pt-8 { - padding-top: 8rem; -} - -.pt-9 { - padding-top: 9rem; -} - -.pt-10 { - padding-top: 10rem; -} - -.pt-11 { - padding-top: 11rem; -} - -.pt-12 { - padding-top: 12rem; -} - -.pt-13 { - padding-top: 13rem; -} - -.pt-14 { - padding-top: 14rem; -} - -.pt-15 { - padding-top: 15rem; -} - -.pt-16 { - padding-top: 16rem; -} - -.pt-17 { - padding-top: 17rem; -} - -.pt-18 { - padding-top: 18rem; -} - -.pt-19 { - padding-top: 19rem; -} - -.pt-20 { - padding-top: 20rem; -} - -.pt-21 { - padding-top: 21rem; -} - -.pt-22 { - padding-top: 22rem; -} - -.pt-23 { - padding-top: 23rem; -} - -.pt-24 { - padding-top: 24rem; -} - -.pt-25 { - padding-top: 25rem; -} - -.pt-26 { - padding-top: 26rem; -} - -.pt-27 { - padding-top: 27rem; -} - -.pt-28 { - padding-top: 28rem; -} - -.pt-29 { - padding-top: 29rem; -} - -.pt-30 { - padding-top: 30rem; -} - -.pt-31 { - padding-top: 31rem; -} - -.pt-32 { - padding-top: 32rem; -} - -.pt-33 { - padding-top: 33rem; -} - -.pt-34 { - padding-top: 34rem; -} - -.pt-35 { - padding-top: 35rem; -} - -.pt-36 { - padding-top: 36rem; -} - -.pt-37 { - padding-top: 37rem; -} - -.pt-38 { - padding-top: 38rem; -} - -.pt-39 { - padding-top: 39rem; -} - -.pt-40 { - padding-top: 40rem; -} - -.pt-41 { - padding-top: 41rem; -} - -.pt-42 { - padding-top: 42rem; -} - -.pt-43 { - padding-top: 43rem; -} - -.pt-44 { - padding-top: 44rem; -} - -.pt-45 { - padding-top: 45rem; -} - -.pt-46 { - padding-top: 46rem; -} - -.pt-47 { - padding-top: 47rem; -} - -.pt-48 { - padding-top: 48rem; -} - -.pt-49 { - padding-top: 49rem; -} - -.pt-50 { - padding-top: 50rem; -} - -.pt-51 { - padding-top: 51rem; -} - -.pt-52 { - padding-top: 52rem; -} - -.pt-53 { - padding-top: 53rem; -} - -.pt-54 { - padding-top: 54rem; -} - -.pt-55 { - padding-top: 55rem; -} - -.pt-56 { - padding-top: 56rem; -} - -.pt-57 { - padding-top: 57rem; -} - -.pt-58 { - padding-top: 58rem; -} - -.pt-59 { - padding-top: 59rem; -} - -.pt-60 { - padding-top: 60rem; -} - -.pt-61 { - padding-top: 61rem; -} - -.pt-62 { - padding-top: 62rem; -} - -.pt-63 { - padding-top: 63rem; -} - -.pt-64 { - padding-top: 64rem; -} - -.pt-65 { - padding-top: 65rem; -} - -.pt-66 { - padding-top: 66rem; -} - -.pt-67 { - padding-top: 67rem; -} - -.pt-68 { - padding-top: 68rem; -} - -.pt-69 { - padding-top: 69rem; -} - -.pt-70 { - padding-top: 70rem; -} - -.pt-71 { - padding-top: 71rem; -} - -.pt-72 { - padding-top: 72rem; -} - -.pt-73 { - padding-top: 73rem; -} - -.pt-74 { - padding-top: 74rem; -} - -.pt-75 { - padding-top: 75rem; -} - -.pt-76 { - padding-top: 76rem; -} - -.pt-77 { - padding-top: 77rem; -} - -.pt-78 { - padding-top: 78rem; -} - -.pt-79 { - padding-top: 79rem; -} - -.pt-80 { - padding-top: 80rem; -} - -.pt-81 { - padding-top: 81rem; -} - -.pt-82 { - padding-top: 82rem; -} - -.pt-83 { - padding-top: 83rem; -} - -.pt-84 { - padding-top: 84rem; -} - -.pt-85 { - padding-top: 85rem; -} - -.pt-86 { - padding-top: 86rem; -} - -.pt-87 { - padding-top: 87rem; -} - -.pt-88 { - padding-top: 88rem; -} - -.pt-89 { - padding-top: 89rem; -} - -.pt-90 { - padding-top: 90rem; -} - -.pt-91 { - padding-top: 91rem; -} - -.pt-92 { - padding-top: 92rem; -} - -.pt-93 { - padding-top: 93rem; -} - -.pt-94 { - padding-top: 94rem; -} - -.pt-95 { - padding-top: 95rem; -} - -.pt-96 { - padding-top: 96rem; -} - -.pt-97 { - padding-top: 97rem; -} - -.pt-98 { - padding-top: 98rem; -} - -.pt-99 { - padding-top: 99rem; -} - -.pb-0 { - padding-bottom: 0rem; -} - -.pb-1 { - padding-bottom: 1rem; -} - -.pb-2 { - padding-bottom: 2rem; -} - -.pb-3 { - padding-bottom: 3rem; -} - -.pb-4 { - padding-bottom: 4rem; -} - -.pb-5 { - padding-bottom: 5rem; -} - -.pb-6 { - padding-bottom: 6rem; -} - -.pb-7 { - padding-bottom: 7rem; -} - -.pb-8 { - padding-bottom: 8rem; -} - -.pb-9 { - padding-bottom: 9rem; -} - -.pb-10 { - padding-bottom: 10rem; -} - -.pb-11 { - padding-bottom: 11rem; -} - -.pb-12 { - padding-bottom: 12rem; -} - -.pb-13 { - padding-bottom: 13rem; -} - -.pb-14 { - padding-bottom: 14rem; -} - -.pb-15 { - padding-bottom: 15rem; -} - -.pb-16 { - padding-bottom: 16rem; -} - -.pb-17 { - padding-bottom: 17rem; -} - -.pb-18 { - padding-bottom: 18rem; -} - -.pb-19 { - padding-bottom: 19rem; -} - -.pb-20 { - padding-bottom: 20rem; -} - -.pb-21 { - padding-bottom: 21rem; -} - -.pb-22 { - padding-bottom: 22rem; -} - -.pb-23 { - padding-bottom: 23rem; -} - -.pb-24 { - padding-bottom: 24rem; -} - -.pb-25 { - padding-bottom: 25rem; -} - -.pb-26 { - padding-bottom: 26rem; -} - -.pb-27 { - padding-bottom: 27rem; -} - -.pb-28 { - padding-bottom: 28rem; -} - -.pb-29 { - padding-bottom: 29rem; -} - -.pb-30 { - padding-bottom: 30rem; -} - -.pb-31 { - padding-bottom: 31rem; -} - -.pb-32 { - padding-bottom: 32rem; -} - -.pb-33 { - padding-bottom: 33rem; -} - -.pb-34 { - padding-bottom: 34rem; -} - -.pb-35 { - padding-bottom: 35rem; -} - -.pb-36 { - padding-bottom: 36rem; -} - -.pb-37 { - padding-bottom: 37rem; -} - -.pb-38 { - padding-bottom: 38rem; -} - -.pb-39 { - padding-bottom: 39rem; -} - -.pb-40 { - padding-bottom: 40rem; -} - -.pb-41 { - padding-bottom: 41rem; -} - -.pb-42 { - padding-bottom: 42rem; -} - -.pb-43 { - padding-bottom: 43rem; -} - -.pb-44 { - padding-bottom: 44rem; -} - -.pb-45 { - padding-bottom: 45rem; -} - -.pb-46 { - padding-bottom: 46rem; -} - -.pb-47 { - padding-bottom: 47rem; -} - -.pb-48 { - padding-bottom: 48rem; -} - -.pb-49 { - padding-bottom: 49rem; -} - -.pb-50 { - padding-bottom: 50rem; -} - -.pb-51 { - padding-bottom: 51rem; -} - -.pb-52 { - padding-bottom: 52rem; -} - -.pb-53 { - padding-bottom: 53rem; -} - -.pb-54 { - padding-bottom: 54rem; -} - -.pb-55 { - padding-bottom: 55rem; -} - -.pb-56 { - padding-bottom: 56rem; -} - -.pb-57 { - padding-bottom: 57rem; -} - -.pb-58 { - padding-bottom: 58rem; -} - -.pb-59 { - padding-bottom: 59rem; -} - -.pb-60 { - padding-bottom: 60rem; -} - -.pb-61 { - padding-bottom: 61rem; -} - -.pb-62 { - padding-bottom: 62rem; -} - -.pb-63 { - padding-bottom: 63rem; -} - -.pb-64 { - padding-bottom: 64rem; -} - -.pb-65 { - padding-bottom: 65rem; -} - -.pb-66 { - padding-bottom: 66rem; -} - -.pb-67 { - padding-bottom: 67rem; -} - -.pb-68 { - padding-bottom: 68rem; -} - -.pb-69 { - padding-bottom: 69rem; -} - -.pb-70 { - padding-bottom: 70rem; -} - -.pb-71 { - padding-bottom: 71rem; -} - -.pb-72 { - padding-bottom: 72rem; -} - -.pb-73 { - padding-bottom: 73rem; -} - -.pb-74 { - padding-bottom: 74rem; -} - -.pb-75 { - padding-bottom: 75rem; -} - -.pb-76 { - padding-bottom: 76rem; -} - -.pb-77 { - padding-bottom: 77rem; -} - -.pb-78 { - padding-bottom: 78rem; -} - -.pb-79 { - padding-bottom: 79rem; -} - -.pb-80 { - padding-bottom: 80rem; -} - -.pb-81 { - padding-bottom: 81rem; -} - -.pb-82 { - padding-bottom: 82rem; -} - -.pb-83 { - padding-bottom: 83rem; -} - -.pb-84 { - padding-bottom: 84rem; -} - -.pb-85 { - padding-bottom: 85rem; -} - -.pb-86 { - padding-bottom: 86rem; -} - -.pb-87 { - padding-bottom: 87rem; -} - -.pb-88 { - padding-bottom: 88rem; -} - -.pb-89 { - padding-bottom: 89rem; -} - -.pb-90 { - padding-bottom: 90rem; -} - -.pb-91 { - padding-bottom: 91rem; -} - -.pb-92 { - padding-bottom: 92rem; -} - -.pb-93 { - padding-bottom: 93rem; -} - -.pb-94 { - padding-bottom: 94rem; -} - -.pb-95 { - padding-bottom: 95rem; -} - -.pb-96 { - padding-bottom: 96rem; -} - -.pb-97 { - padding-bottom: 97rem; -} - -.pb-98 { - padding-bottom: 98rem; -} - -.pb-99 { - padding-bottom: 99rem; -} - -.p-0 { - padding: 0rem; -} - -.p-1 { - padding: 1rem; -} - -.p-2 { - padding: 2rem; -} - -.p-3 { - padding: 3rem; -} - -.p-4 { - padding: 4rem; -} - -.p-5 { - padding: 5rem; -} - -.p-6 { - padding: 6rem; -} - -.p-7 { - padding: 7rem; -} - -.p-8 { - padding: 8rem; -} - -.p-9 { - padding: 9rem; -} - -.p-10 { - padding: 10rem; -} - -.p-11 { - padding: 11rem; -} - -.p-12 { - padding: 12rem; -} - -.p-13 { - padding: 13rem; -} - -.p-14 { - padding: 14rem; -} - -.p-15 { - padding: 15rem; -} - -.p-16 { - padding: 16rem; -} - -.p-17 { - padding: 17rem; -} - -.p-18 { - padding: 18rem; -} - -.p-19 { - padding: 19rem; -} - -.p-20 { - padding: 20rem; -} - -.p-21 { - padding: 21rem; -} - -.p-22 { - padding: 22rem; -} - -.p-23 { - padding: 23rem; -} - -.p-24 { - padding: 24rem; -} - -.p-25 { - padding: 25rem; -} - -.p-26 { - padding: 26rem; -} - -.p-27 { - padding: 27rem; -} - -.p-28 { - padding: 28rem; -} - -.p-29 { - padding: 29rem; -} - -.p-30 { - padding: 30rem; -} - -.p-31 { - padding: 31rem; -} - -.p-32 { - padding: 32rem; -} - -.p-33 { - padding: 33rem; -} - -.p-34 { - padding: 34rem; -} - -.p-35 { - padding: 35rem; -} - -.p-36 { - padding: 36rem; -} - -.p-37 { - padding: 37rem; -} - -.p-38 { - padding: 38rem; -} - -.p-39 { - padding: 39rem; -} - -.p-40 { - padding: 40rem; -} - -.p-41 { - padding: 41rem; -} - -.p-42 { - padding: 42rem; -} - -.p-43 { - padding: 43rem; -} - -.p-44 { - padding: 44rem; -} - -.p-45 { - padding: 45rem; -} - -.p-46 { - padding: 46rem; -} - -.p-47 { - padding: 47rem; -} - -.p-48 { - padding: 48rem; -} - -.p-49 { - padding: 49rem; -} - -.p-50 { - padding: 50rem; -} - -.p-51 { - padding: 51rem; -} - -.p-52 { - padding: 52rem; -} - -.p-53 { - padding: 53rem; -} - -.p-54 { - padding: 54rem; -} - -.p-55 { - padding: 55rem; -} - -.p-56 { - padding: 56rem; -} - -.p-57 { - padding: 57rem; -} - -.p-58 { - padding: 58rem; -} - -.p-59 { - padding: 59rem; -} - -.p-60 { - padding: 60rem; -} - -.p-61 { - padding: 61rem; -} - -.p-62 { - padding: 62rem; -} - -.p-63 { - padding: 63rem; -} - -.p-64 { - padding: 64rem; -} - -.p-65 { - padding: 65rem; -} - -.p-66 { - padding: 66rem; -} - -.p-67 { - padding: 67rem; -} - -.p-68 { - padding: 68rem; -} - -.p-69 { - padding: 69rem; -} - -.p-70 { - padding: 70rem; -} - -.p-71 { - padding: 71rem; -} - -.p-72 { - padding: 72rem; -} - -.p-73 { - padding: 73rem; -} - -.p-74 { - padding: 74rem; -} - -.p-75 { - padding: 75rem; -} - -.p-76 { - padding: 76rem; -} - -.p-77 { - padding: 77rem; -} - -.p-78 { - padding: 78rem; -} - -.p-79 { - padding: 79rem; -} - -.p-80 { - padding: 80rem; -} - -.p-81 { - padding: 81rem; -} - -.p-82 { - padding: 82rem; -} - -.p-83 { - padding: 83rem; -} - -.p-84 { - padding: 84rem; -} - -.p-85 { - padding: 85rem; -} - -.p-86 { - padding: 86rem; -} - -.p-87 { - padding: 87rem; -} - -.p-88 { - padding: 88rem; -} - -.p-89 { - padding: 89rem; -} - -.p-90 { - padding: 90rem; -} - -.p-91 { - padding: 91rem; -} - -.p-92 { - padding: 92rem; -} - -.p-93 { - padding: 93rem; -} - -.p-94 { - padding: 94rem; -} - -.p-95 { - padding: 95rem; -} - -.p-96 { - padding: 96rem; -} - -.p-97 { - padding: 97rem; -} - -.p-98 { - padding: 98rem; -} - -.p-99 { - padding: 99rem; -} - \ No newline at end of fileAge must be a number.+ +<div class="row"> + <button class="btn mr-2">Action</button> + <button class="btn mr-2 btn-primary">Action</button> + <button class="btn mr-2 btn-secondary">Action</button> + <button class="btn mr-2 btn-tetiary">Action</button> + <button class="btn mr-2 btn-warning">Serious action</button> +</div> + +<div class="row"> + <button class="btn btn-sm mr-2">Action</button> + <button class="btn btn-sm mr-2 btn-primary">Action</button> + <button class="btn btn-sm mr-2 btn-secondary">Action</button> + <button class="btn btn-sm mr-2 btn-tetiary">Action</button> + <button class="btn btn-sm mr-2 btn-warning">Serious action</button> +</div>+ +Forms
+ +Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.
+ ++-+++ + +++ + ++Age must be a number.++++ Diet options? +++ + +++ + +++ + +++ Favorite food? +++ + +++ + +++ + +++++ + +++ +++ + ++- - + +<!-- only subset of forms shown for brevity; inspect source to get full set --> +<div class="row"> + <div class="col-md-4"> + <div class="input-group"> + <label>Name</label> + <input type="text" /> + </div> + <div class="input-group error"> + <label>Age</label> + <input type="text" value="John" /> + <div class="error-label">Age must be a number.</div> + </div> + </div> + <div class="col-md-7 col-md-offset-1"> + <div class="input-group"> + <label>Message</label> + <textarea rows="6"></textarea> + </div> + </div> + <button type="submit" class="btn btn-secondary">Send</button> +</div> ++ +Icons
+ +Icons are roughly text-sized symbols, usually implemented in a font set (currently Work Sans)
+Two ways to implement icons:
++
+ +- Use Unicode symbol directly in code, wrapped by an <icon> tag
+- Use a predefined "icon-" css class (with additional positioning/styling presets)
++
+↑ ++ ↓ ++ ← +→ ++ + 🅱 +🅰 ++
+ ++ + ... +<h3> + <icon>↑</icon> + <icon class="icon-arrow-up"></icon> + <icon>↓</icon> + <icon class="icon-arrow-down"></icon> + <icon>←</icon> + <icon>→</icon> + <icon class="icon-arrow-left"></icon> + <icon class="icon-arrow-right"></icon> + <icon>🅱</icon> + <icon>🅰</icon> +</h3> +<h3> + <icon class="icon-cross"></icon> + <icon class="icon-ellipsis"></icon> + <icon>...</icon> +</h3>+ + +Shapes
+ +Shapes are CSS-drawn figures that are expandable, dynamic, or impossible to fit into a character set.
+ ++- + ++ + + + ++
+ + + + ++ + + + ++
+ + + + ++ + + + +<!-- only circles shown for brevity; inspect source to get full set --> +<div class="circle"></div> +<div class="circle circle-fill"></div> +<div class="circle circle-red"></div> +<div class="circle circle-pill"></div> +<br /> +<div class="circle circle-lg"></div> +<div class="circle circle-lg circle-fill"></div> +<div class="circle circle-lg circle-red"></div> +<div class="circle circle-lg circle-pill"></div>-- - ++ watch-dir - |= a/path - ^- (list move) - =/ soc/sock - [our.hid our.hid] - =/ rav/rave - [%next %z da+now.hid a] - =/ rif/riff - [%home [~ rav]] - =/ car/card - :^ - %warp - a - soc - rif - [[ost.hid car] ~] ++ +Code blocks
+ +Hammer was raised in Hollywood, California. It wasn't until her early thirties that she left her husband, came out as lesbian, and, inspired by the experimental filmmaker Maya Deren, began making short, scintillating films of her own.
+ ++ +++ watch-dir +|= a/path +^- (list move) +=/ soc/sock +[our.hid our.hid] +=/ rav/rave +[%next %z da+now.hid a] +=/ rif/riff +[%home [~ rav]] +=/ car/card +:^ +%warp +a +soc +rif +[[ost.hid car] ~](The code for the above is)
+ +<pre class="code-block"><code class="text-code"> + ... +</code></pre>===
+Happy coding!