@import "/table.css";
@import "/nav.css";
@import "/crud.css";

body {
    min-height: 100vh;
}

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}/*
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}*/

@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}/*
@font-face {
    font-family: 'Roboto';
    src: url('./fonts/Roboto/static/Roboto_SemiCondensed-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}*/


@font-face {
    font-family: 'Inter';
    src: url('./fonts/Inter/static/Inter_18pt-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Open Sans';
    src: url('./fonts/Open_Sans/static/OpenSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Fira Sans';
    src: url('./fonts/Fira_Sans/FiraSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html {
    font-size: 10px;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}
*,
:after,
:before {
    box-sizing: inherit;
    position: relative;
}
:focus {
    outline: 0;
}

body {
    padding-top: 37px;  /*  HACK */


    --body: #fff;

    --nav-background: #fff;
    --nav-color: #2e3538;

    --footer: #333;
    --inset: #f4f5f6;
    --border: #e3e6e8;
    --button: #679;
    --text: #2e3538;
    --heading: #222;
    --link: #679;
    --accent: #454f54;

    --code-border: #679;


    --textarea-border2: #f3f6f8;
    --th: #454f54;

    --textcontrast: #fff;
    --headingcontrast: #ddd;
    --linkcontrast: #679;

    --trans: rgba(2, 2, 2, 0.5);
    --shade: rgb(0, 0, 0, 0.2);

    --base: "Roboto";
    --code: monospace;
    --serif: serif;
    --sans: sans-serif;
    --mono: monospace;

    --menuopen: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M6%2036h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z%22%2F%3E%3C%2Fsvg%3E);
    --menuclose: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M38%2013l-3-3-11%2011-11-11-3%203%2011%2011-11%2011%203%203%2011-11%2011%2011%203-3-11-11z%22%2F%3E%3C%2Fsvg%3E);
    --downarrow: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22%23111111%22%20d%3D%22M14.8%2015l9.2%209.6%209.2-9.7%204.3%204.3L24%2032.9%2010.5%2019.3z%22%2F%3E%3C%2Fsvg%3E);
    --checkbox: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M9%2015l-4-4-3%202%207%208L23%207l-3-3z%22%2F%3E%3C%2Fsvg%3E);

    font-family: var(--base);
    color: var(--text);
    background-color: var(--body);
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.8;
    font-weight: 300;
}

a {
    background-color: transparent;
}
a:active,
a:hover {
    outline: 0;
}
b,
strong {
    font-weight: 700;
}
img {
    border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 2rem;
    font-weight: 200;
}
::-moz-selection {
    background-color: var(--button);
    color: var(--textcontrast);
}
::selection {
    background-color: var(--button);
    color: var(--textcontrast);
}
a:not([class]),
a[data-xx] {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    z-index: 1;
}

p a:not([class]):not([btn]):before,
p a[xx]:not([btn]):before {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #fd0;
    position: absolute;
    opacity: 0.5;
    -webkit-transform: scale3d(1, 0.1, 1);
    transform: scale3d(1, 0.1, 1);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
}
p a:not([class]):not([btn]):hover:before,
p a[xx]:not([btn]):hover:before {
    -webkit-transform: none;
    transform: none;
}


blockquote:not([class]),
blockquote[data-xx] {
    margin: 2rem 0;
    padding: 1rem 2rem;
    border-left: 4px solid var(--accent);
}
[data-btn],
button:not([class]),
button[data-xx],
input[type="submit"] {
    cursor: pointer;
    color: var(--link);
    display: inline-block;
    padding: 1.4rem 2rem;
    background: var(--body);
    border: 1px solid var(--link);
    border-radius: 2px;
    box-shadow: 0 0 0 transparent;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1rem;
    margin: 0 1rem 1rem 0;
    -webkit-appearance: none;
}
[data-btn]:before,
button:not([class]):before,
button[data-xx]:before,
input[type="submit"]:before {
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    -webkit-transform: scale3d(1.2, 1.2, 1.2);
    transform: scale3d(1.2, 1.2, 1.2);
    background: var(--link);
}
[data-btn]:not(:disabled):hover,
button:not([class]):not(:disabled):hover,
button[data-xx]:not(:disabled):hover,
input[type="submit"]:not(:disabled):hover {
    box-shadow: 2px 2px 4px var(--shade);
}
[data-btn]:not(:disabled):hover:active,
button:not([class]):not(:disabled):hover:active,
button[data-xx]:not(:disabled):hover:active,
input[type="submit"]:not(:disabled):hover:active {
    box-shadow: none;
    -webkit-transition: none;
    transition: none;
}
[data-btn][data-primary],
button:not([class])[data-primary],
button[data-xx][data-primary],
input[type="submit"][data-primary] {
    border-color: var(--border);
    background: var(--button);
    color: var(--body);
}
[data-btn][data-round],
button:not([class])[data-round],
button[data-xx][data-round],
input[type="submit"][data-round] {
    border-radius: 4rem;
}
[data-btn].disabled,
[data-btn]:disabled,
button:not([class]).disabled,
button:not([class]):disabled,
button[data-xx].disabled,
button[data-xx]:disabled,
input[type="submit"].disabled,
input[type="submit"]:disabled {
    border-color: var(--border);
    background: var(--border);
    color: var(--linkcontrast);
    cursor: default;
}
figure {
    background: var(--body);
    display: block;
    padding: 2rem;
    box-shadow: 0 1px 4px 0 var(--shade);
    border-radius: 2px;
    margin: 0 0 2rem 0;
}
figure hr:not([class]),
figure hr[data-xx] {
    margin: 1rem 0;
}
figure:last-child {
    margin-bottom: 0;
}
figure > img:not([class]),
figure > img[data-xx] {
    width: calc(100% + 4rem);
    max-width: none;
    margin: 0 0 2rem -2rem;
    display: block;
}
figure > img:not([class]):first-child,
figure > img[data-xx]:first-child {
    margin: -2rem 0 2rem -2rem;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
figure > img:not([class]):last-child,
figure > img[data-xx]:last-child {
    margin: 0 0 -2rem -2rem;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

code:not([class]),
code[data-xx] {
    display: inline-block;
    background: var(--inset);
    border: 1px solid var(--border);
    padding: 0 0.5rem;
    color: var(--accent);
    font-size: 1.2rem;
    line-height: 1.8;
    font-family: var(--code);
    border-radius: 2px;
    text-transform: none;
    font-weight: 300;

/* prism */
    text-shadow: 0 1px #fff;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens:none;
}

pre:not([class]) code,
pre[data-xx] code {
    padding: 2rem;
    border: none;
    border-left: 4px solid var(--code-border);
    border-radius: 0;
    width: 100%;
    display: block;
}

footer {
    color: var(--textcontrast);
    width: 100%;
    max-width: 90rem;
    margin: auto;
    padding: 2rem;
    overflow: visible;
}
footer a:not([class]),
a[data-xx] {
    color: var(--linkcontrast);
    text-decoration: none;
}
footer:before {
    content: "";
    background: var(--footer);
    width: 102vw;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/* ИСПАВИТЬ */
section > span {
    display: block;
    font-size: 0;
    width: auto;
    margin: -1rem;
}

[data-col="1/12"] {
    width: 8.33333333%;
}
[data-col="2/12"],
[data-col="1/6"] {
    width: 16.66666667%;
}
[data-col="3/12"],
[data-col="1/4"] {
    width: 25%;
}
[data-col="4/12"],
[data-col="2/6"],
[data-col="1/3"] {
    width: 33.33333333%;
}
[data-col="5/12"] {
    width: 41.66666667%;
}
[data-col="6/12"],
[data-col="3/6"],
[data-col="2/4"],
[data-col="1/2"] {
    width: 50%;
}
[data-col="7/12"] {
    width: 58.33333333%;
}
[data-col="8/12"],
[data-col="4/6"],
[data-col="2/3"] {
    width: 66.66666667%;
}
[data-col="9/12"],
[data-col="3/4"] {
    width: 75%;
}
[data-col="10/12"],
[data-col="5/6"] {
    width: 83.33333333%;
}
[data-col="11/12"] {
    width: 91.66666667%;
}
[data-col="1/1"] {
    width: 100%;
}
[data-col] {
    display: inline-block;
    font-size: 1.4rem;
    padding: 1rem;
    vertical-align: top;
}

label:not([class]),
label[data-xx] {
    display: inline-block;
    width: 100%;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 1rem;
}
label:not([class]):first-child,
label[data-xx]:first-child {
    margin-top: 0;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    ):not([class]),
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    )[data-xx],
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    )[class^="user-"] {
    display: inline-block;
    background: 0 0;
    width: 100%;
    padding: 0.5rem 0 1rem;
    margin-bottom: 2rem;
    border: none;
    border-bottom: 1px solid var(--border);
    font-size: 1.4rem;
    font-weight: 300;
    border-radius: 0;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    ):not([class]):focus,
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    ):not([class]):hover,
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    )[data-xx]:focus,
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    )[data-xx]:hover,
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    )[class^="user-"]:focus,
input:not([type="radio"]):not([type="checkbox"]):not([type="button"]):not(
        [type="submit"]
    )[class^="user-"]:hover {
    color: var(--button);
    border-color: var(--border);
    outline: 0;
}
textarea:not([class]),
textarea[data-xx],
textarea[class^="user-"] {
    display: inline-block;
    background: 0 0;
    width: 100%;
    padding: 0.5rem 0 1rem;
    margin-bottom: 2rem;
    border: none;


    border-top: 1px dashed var(--textarea-border2);



    border-bottom: 1px solid var(--border);

    border-right: 1px solid var(--border);
    font-size: 1.4rem;
    font-weight: 300;
    border-radius: 0;
    min-height: 8rem;

    padding-right: 2rem;
    border-bottom-right-radius: 0.5rem;
}
textarea:not([class]):focus,
textarea:not([class]):hover,
textarea[data-xx]:focus,
textarea[data-xx]:hover,
textarea[class^="user-"]:focus,
textarea[class^="user-"]:hover {
    color: var(--button);
    border-color: var(--border);
    outline: 0;
}
select:not([class]),
select[data-xx],
select[class^="user-"] {
    padding: 0.5rem 3rem 0.5rem 1rem;
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    background: var(--body) var(--downarrow) no-repeat right 1rem center;
    background-size: 2rem;
    border-radius: 2px;
    height: 4rem;
    font-size: 1.4rem;
    font-weight: 300;
    text-indent: 0.5rem;
    margin: 0.5rem 0 2rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
select:not([class]):focus,
select:not([class]):hover,
select[data-xx]:focus,
select[data-xx]:hover,
select[class^="user-"]:focus,
select[class^="user-"]:hover {
    border-color: var(--border);
    outline: 0;
}
input[type="checkbox"]:not([class]),
input[type="checkbox"][data-xx],
input[type="checkbox"][class^="user-"],
input[type="radio"]:not([class]),
input[type="radio"][data-xx],
input[type="radio"][class^="user-"] {
    z-index: 2;
    opacity: 0;
    margin-right: -2rem;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    cursor: pointer;
}
input[type="checkbox"]:not([class]) + label,
input[type="checkbox"][data-xx] + label,
input[type="checkbox"][class^="user-"] + label,
input[type="radio"]:not([class]) + label,
input[type="radio"][data-xx] + label,
input[type="radio"][class^="user-"] + label {
    width: auto;
    text-transform: none;
}
input[type="checkbox"]:not([class]) + label:before,
input[type="checkbox"][data-xx] + label:before,
input[type="checkbox"][class^="user-"] + label:before,
input[type="radio"]:not([class]) + label:before,
input[type="radio"][data-xx] + label:before,
input[type="radio"][class^="user-"] + label:before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    background: var(--body);
    vertical-align: middle;
    margin-right: 1rem;
}
input[type="checkbox"]:not([class]) + label:after,
input[type="checkbox"][data-xx] + label:after,
input[type="checkbox"][class^="user-"] + label:after,
input[type="radio"]:not([class]) + label:after,
input[type="radio"][data-xx] + label:after,
input[type="radio"][class^="user-"] + label:after {
    content: "";
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    width: 1.6rem;
    height: 1.6rem;
    left: 2px;
    top: 4px;
    -webkit-transform: scale(0);
    transform: scale(0);
}
input[type="radio"]:not([class]) + label,
input[type="radio"][data-xx] + label,
input[type="radio"][class^="user-"] + label {
    font-size: 1.4rem;
    font-weight: 200;
}
input[type="radio"]:not([class]) + label:before,
input[type="radio"][data-xx] + label:before,
input[type="radio"][class^="user-"] + label:before {
    border-radius: 100%;
}
input[type="radio"]:not([class]):checked + label:before,
input[type="radio"][data-xx]:checked + label:before,
input[type="radio"][class^="user-"]:checked + label:before {
    background: var(--button);
    border-color: var(--body);
}
input[type="radio"]:not([class]):checked + label:after,
input[type="radio"][data-xx]:checked + label:after,
input[type="radio"][class^="user-"]:checked + label:after {
    opacity: 1;
    visibility: visible;
    background: var(--body);
    border: 1px solid var(--button);
    border-radius: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    top: 0.5rem;
}
input[type="checkbox"]:not([class]) + label,
input[type="checkbox"][data-xx] + label,
input[type="checkbox"][class^="user-"] + label {
    font-size: 1.4rem;
    font-weight: 200;
}
input[type="checkbox"]:not([class]) + label:before,
input[type="checkbox"][data-xx] + label:before,
input[type="checkbox"][class^="user-"] + label:before {
    border-radius: 2px;
}
input[type="checkbox"]:not([class]) + label:after,
input[type="checkbox"][data-xx] + label:after,
input[type="checkbox"][class^="user-"] + label:after {
    background: var(--checkbox) no-repeat center center;
    border-radius: 100%;
    background-size: 100%;
}
input[type="checkbox"]:not([class]):checked + label:before,
input[type="checkbox"][data-xx]:checked + label:before,
input[type="checkbox"][class^="user-"]:checked + label:before {
    background: var(--button);
    border-color: var(--border);
}
input[type="checkbox"]:not([class]):checked + label:after,
input[type="checkbox"][data-xx]:checked + label:after,
input[type="checkbox"][class^="user-"]:checked + label:after {
    opacity: 1;
    visibility: visible;
    left: 2px;
    top: 0.5rem;
    -webkit-transform: scale(1);
    transform: scale(1);
}
img:not([class]),
img[data-xx] {
    height: auto;
    max-width: 100%;
}
section:not([class]),
section[data-xx],
article,
main:not([class]),
main[data-xx] {
    margin: auto;
    padding: 4rem 2rem;
    width: 100%;
    max-width: 90rem;
}
p:not([class]),
p[data-xx] {
    margin: 0 0 2rem;
}
p:not([class]):last-child,
p[data-xx]:last-child {
    margin: 0;
}
hr:not([class]),
hr[data-xx] {
    background: var(--border);
    border: none;
    width: 100%;
    height: 1px;
    margin: 4rem 0;
}
ol:not([class]),
ol[data-xx],
ul:not([class]),
ul[data-xx] {
    padding-left: 2rem;
    margin: 0 0 2rem;
}
ol:not([class]) ol,
ol:not([class]) ul,
ol[data-xx] ol,
ol[data-xx] ul,
ul:not([class]) ol,
ul:not([class]) ul,
ul[data-xx] ol,
ul[data-xx] ul {
    margin-bottom: 0;
}
ul:not([class]),
ul[data-xx] {
    list-style: disc;
}
ul:not([class]) ul,
ul[data-xx] ul {
    list-style: circle;
}
ol:not([class]),
ol[data-xx] {
    list-style: decimal;
}
ol:not([class]) ol,
ol[data-xx] ol {
    list-style: lower-alpha;
}
li:not([class]),
li[data-xx],
li {
/*    margin: 0 0 1rem 0;*/
}





mark {
    display: inline-block;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--border);
    border-radius: 1.5rem;
    background: var(--inset);
    color: var(--button);
    padding: 0.2rem 1.2rem;
    margin: 0 0.5rem 0.5rem 0;
}
[data-att],
[data-dtt]:disabled,
[data-tt] {
    overflow: visible;
}
[data-att]:after,
[data-dtt]:disabled:after,
[data-tt]:after {
    position: absolute;
    left: 50%;
    top: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
    background: var(--linkcontrast);
    border-radius: 3px;
    color: var(--textcontrast);
    font-family: var(--base);
    font-size: 1.2rem;
    line-height: 2.5;
    font-weight: 300;
    letter-spacing: 0;
    white-space: nowrap;
    padding: 0 1rem;
    -webkit-transform: translate(-50%, -95%);
    transform: translate(-50%, -95%);
    text-transform: none;
}
[data-att]:hover:after,
[data-dtt]:disabled:hover:after,
[data-tt]:hover:after {
    opacity: 0.9;
    visibility: visible;
    -webkit-transform: translate(-50%, calc(-100% - 5px));
    transform: translate(-50%, calc(-100% - 5px));
}
[data-tt]:after {
    content: attr(data-tt);
}
[data-dtt]:disabled:after {
    content: attr(data-dtt);
}
[data-att]:after {
    content: attr(href);
}
:after,
:before {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

h1:not([class]),
h1[data-xx] {
    font-size: 4rem;
    line-height: 1.1;
    letter-spacing: -1px;
}
h2:not([class]),
h2[data-xx] {
    font-size: 3rem;
    line-height: 1.1;
    letter-spacing: -0.05rem;
}
h3:not([class]),
h3[data-xx] {
    font-size: 2.5rem;
    line-height: 1.3;
    letter-spacing: -0.05rem;
}
h4:not([class]),
h4[data-xx] {
    font-size: 2rem;
    line-height: 1.3;
    letter-spacing: -0.05rem;
}
h5:not([class]),
h5[data-xx] {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 400;
}
h6:not([class]),
h6[data-xx] {
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 400;
}
[data-full] {
    width: 100%;
}
[data-hide] {
    display: none;
}
[data-serif] {
    font-family: var(--serif);
}
[data-sans] {
    font-family: var(--sans);
}
[data-mono] {
    font-family: var(--mono);
}
[data-fs="xs"] {
    font-size: 1.1rem;
}
[data-fs="s"] {
    font-size: 1.2rem;
}
[data-fs="m"] {
    font-size: 1.4rem;
}
[data-fs="l"] {
    font-size: 1.6rem;
}
[data-fs="xl"] {
    font-size: 2.4rem;
}
[data-mt="0"] {
    margin-top: 0;
}
[data-mt="2"] {
    margin-top: 2rem;
}
[data-mt="4"] {
    margin-top: 4rem;
}
[data-mt="8"] {
    margin-top: 8rem;
}
[data-mb="0"] {
    margin-bottom: 0;
}
[data-mb="2"] {
    margin-bottom: 2rem;
}
[data-mb="4"] {
    margin-bottom: 4rem;
}
[data-mb="8"] {
    margin-bottom: 8rem;
}
[data-pt="0"] {
    padding-top: 0;
}
[data-pt="2"] {
    padding-top: 2rem;
}
[data-pt="4"] {
    padding-top: 4rem;
}
[data-pt="8"] {
    padding-top: 8rem;
}
[data-pb="0"] {
    padding-bottom: 0;
}
[data-pb="2"] {
    padding-bottom: 2rem;
}
[data-pb="4"] {
    padding-bottom: 4rem;
}
[data-pb="8"] {
    padding-bottom: 8rem;
}
[data-pa="0"] {
    padding: 0;
}
[data-pa="2"] {
    padding: 2rem;
}
[data-pa="4"] {
    padding: 4rem;
}
[data-pa="8"] {
    padding: 8rem;
}
[data-txt="l"] {
    text-align: left;
}
[data-txt="r"] {
    text-align: right;
}
[data-txt="c"] {
    text-align: center;
}
[data-txt="j"] {
    text-align: justify;
}



@media (max-width: 50rem) {
    body {
        overflow-x: hidden;
    }
    [data-btn][data-m-full],
    button:not([class])[data-m-full],
    button[data-xx][data-m-full],
    input[type="submit"][data-m-full] {
        width: 100%;
    }
    [data-col]:not([data-fx]) {
        width: 100%;
    }
}