.nowrap {
    white-space: nowrap;
}

@font-face {
    font-family: "Body";
    src: url("/assets/fonts/Body/regular.woff2") format("woff2"),
    url("/assets/fonts/Body/regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Body";
    src: url("/assets/fonts/Body/bold.woff2") format("woff2"),
    url("/assets/fonts/Body/bold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: "DisketMono";
    src: url("/assets/fonts/DisketMono/bold.woff2") format("woff2"),
    url("/assets/fonts/DisketMono/bold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: 1.5em;
    font-family: var(--second-font-set);
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-color);
    color: var(--text-color);
}

h1 {
    font-size: 1.8em;
    font-weight: 600;
    font-family: var(--first-font-set);
    display: block;
    padding: 0;
    margin:  var(--s) 0;
    color: var(--header-color);
    line-height: normal;
}

h2, .h2, strong.header {
    display: block;
    font-family: var(--first-font-set);
    font-size: 1.7em;
    font-weight: 600;
    margin: var(--m) 0;
    color: var(--header-color);
}

h3 {
    font-size: 1.3em;
    font-weight: bold;
    line-height: normal;
    color: var(--text-color);
    font-family: var(--first-font-set);
}

.faq strong.header {
    margin-top: 0;
}

.floatRight {
    float:right;
    margin-left: var(--m);
    margin-top: var(--s);
}

p {
    margin: var(--m) 0;
}

del {
    opacity: 0.5;
}

a, .link {
    color: var(--color-link);
    text-decoration: none;
    cursor: pointer;
    vertical-align: bottom;
}

a:hover, .link:hover {
    color: var(--color-link-hovered);
    text-decoration: underline;
}

a:visited {
    color: var(--color-link-visited);
}

a:visited:hover {
    color: var(--color-link-hovered);
}

a.anchor {
    height:0;
}

ul.tips li {
    margin-bottom: var(--s);
}

table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    padding: var(--xs);
    vertical-align: top;
}

table td.cnt {
    text-align: center;
    align-items: center;
}

.middle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--xxs);
}

.middle .i {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

table thead>tr>td {
    background: var(--sub-color);
}

table td.borderLeft {
    border-left: 1px solid var(--second-color-700);
}

table tr.borderBottom > td {
    border-bottom: 1px solid var(--second-color-700);
}

table.highlight:has(tr > *:nth-child(2):hover) tbody tr > *:nth-child(2),
table.highlight:has(tr > *:nth-child(3):hover) tbody tr > *:nth-child(3),
table.highlight:has(tr > *:nth-child(4):hover) tbody tr > *:nth-child(4),
table.highlight:has(tr > *:nth-child(5):hover) tbody tr > *:nth-child(5),
table.highlight:has(tr > *:nth-child(6):hover) tbody tr > *:nth-child(6),
table.highlight:has(tr > *:nth-child(7):hover) tbody tr > *:nth-child(7),
table.highlight tbody tr:hover>td {
    background: var(--second-color-400);
}

table.highlight tbody tr:hover > td:nth-child(n+2):hover {
    color: var(--text-white);
    font-weight: 600;
    background: var(--second-color-300);
}

table thead tr td:first-of-type {
    border-top-left-radius: var(--table-border-radius);
}

table thead tr td:last-of-type {
    border-top-right-radius: var(--table-border-radius);
}

fieldset {
    display: block;
    box-sizing: border-box;
    border: none;
    border-radius: var(--box-corner-radius);
    background: var(--second-color-400);
}

fieldset h2 {
    margin: 0 0 var(--m) 0;
}

.notice {
    padding: var(--xs);
    box-sizing: border-box;
    background: linear-gradient(#055c90, #3090c5);
            /*linear-gradient(#FEFC9C, #D29C43);*/

    position: relative;
}

.notice .close {
    position: absolute;
    right: 20px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    color: var(--notice-text-color);
    opacity: .5;
    cursor: pointer;
}

.notice .close:hover {
    opacity: .86;
}

.notice .msg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--notice-text-color);
    gap: var(--s);
}

.notice .msg .i {
    width: 28px;
    height: 28px;
    min-width: 28px;
    opacity: .8;
}

.notice .msg .txt {
    margin-left: var(--xxs);
}

.notice .msg .txt, .notice .msg .txt a {
    color: var(--notice-text-color);
    opacity: .8;
}

.i {
    display: inline-block;
    width: 24px;
    height: 24px;
}

strong {
    color: var(--text-bold);
}

.centered {
    width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

blockquote {
    margin: var(--m) 0;
    padding: var(--m) var(--l);
}

blockquote p {
    padding: 0;
    margin: 0;
}

blockquote .text {
    font-style: italic;
}

blockquote .author {
    color: var(--color-text);
    font-style: normal;
}

body > .grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "page"
        "footer";
    grid-template-columns: 1fr;
    gap: var(--m);
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

.centered {
    width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
}

.pageHeaderTexture {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1870 / 700;
    z-index: 0;
}

/* Cap */

header {

    height: var(--header-height);
    border-bottom: 1px solid hsla(60, 68%, 94%, .125);
}


header .cap {
    display: grid;
    height: 100%;
    gap: var(--m);
    grid-template-areas: 'logo menu profile';
    grid-template-columns: 220px 1fr auto;
    align-items: center;
}

header .cap .logo {
    grid-area: logo;
    display: flex;
    align-items: center;
    gap: var(--m);
    user-select: none;
}

header .cap .logo a {
    max-width: 100%;
}

header .cap .logo a img {
    max-width: 100%;
    max-height: 50px;
}


header .cap .menu {
    grid-area: menu;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--first-font-set);
    width: 100%;
    box-sizing: border-box;
    user-select: none;
}

header .cap .menu ul {
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--xl);
    height: 100%;
    list-style: none;
}

header .cap .menu ul li {
    display: inline-flex;
    align-items: center;
    height: calc(100% + 4px);
    padding: 0;
    box-sizing: border-box;
    margin: 0;
}

header .cap .menu ul li a {
    height: 100%;
    font-size: 1.1em;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-white);
    display: inline-flex;
    text-decoration: none;
    align-items: center;
    transition: all .3s;
}

header .cap .menu ul li a:hover {
    color: var(--color-orange-300);
}


header .cap .profile {
    grid-area: profile;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--s);
}

.topBar {
    display: flex;
    gap: var(--l);
    align-items: center;
    justify-content: space-between;
}


.topBar .telegram a {
    display: flex;
    gap: var(--xs);
    font-family: var(--first-font-set);
}

/* Separator */
.separator {
    width: 100%;
    border-bottom: 1px dashed var(--color-orange-300);
    position: relative;
}

.separator:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    --top-start: 60%;
    --top-number-width: 140px;
    --bottom-start: 20%;
    --bottom-number-width: 157px;
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: white;
    height: 10px;
    clip-path: polygon(0 0, var(--top-start) 0,var(--top-start) 1px,calc(var(--top-start) + var(--top-number-width, 12%)) 1px,calc(var(--top-start) + var(--top-number-width, 12%)) 0,100% 0,100% 100%,calc(var(--bottom-start) + var(--bottom-number-width, 12%)) 100%,calc(var(--bottom-start) + var(--bottom-number-width, 12%)) calc(100% - 1px),var(--bottom-start) calc(100% - 1px),var(--bottom-start) 100%,0 100%);

}

    /* Landing */
.landing {
    display: flex;
    flex-direction: column;
    gap: var(--m);
    align-items: center;
    margin-bottom: var(--l);
}

.landing p {
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    line-height: 1.2em;
    text-align: center;
}


.stat h2 {
    font-size: 1.3em;
    font-weight: bold;
    margin: 0 0 var(--s) 0;
    padding: 0;
    text-align: left;
    text-transform: uppercase;
    color: var(--color-stat-header);
}

.params {
    padding: 0;
    margin: 0;
    list-style: none;
}

.params li {
    padding: var(--xxs) 0;
    margin: 0;
    display: flex;
    gap: var(--xxs);
    flex-direction: row;
}

.params li dt {
    display: inline-flex;
    align-items: start;
    flex-shrink: 0;
    gap: var(--xxs);
    width: 45%;
    box-sizing: border-box;
    padding: 0;
}

.params li dt>span {
    color: var(--param-color);
    display: inline-flex;
    width: auto;
}

.params li dt:after {
    content: '';
    height: 20px;
    flex-grow: 1;
    border-bottom: 1px dotted rgba(255,255,255,.2);
}

.params li dd {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 55%;
    box-sizing: border-box;
}


.hint {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.hint .i {
    width: 20px;
    height: 20px;
}

.hint .txt {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s;
    position: absolute;
    padding: var(--xs);
    background: var(--second-color-400);
    color: var(--text-white);
    min-width: 200px;
    max-width: 240px;
    border-radius: var(--box-corner-radius);
    left: 50%;
    top: -10px;
    transform: translate(-50%, -100%);
    box-shadow: 0px 1px 12px #00000044;
}

.hint.delay .txt {
    transition-delay: 1s;
}

.hint .txt:before {
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: 0;
    background: none;
    border: 10px solid transparent;
    border-top: 10px solid var(--second-color-400);
    transform: translate(-50%, 100%);
}

.hint.primary .txt {
    background: var(--hint-primary-bg);
}

.hint.primary .txt:before {
    border-top-color: var(--hint-primary-bg);
}


.hint:hover .txt {
    opacity: 100;
    visibility: visible;
}

.hint.center .txt {
    text-align: center;
}

.hint.alignRightTop .txt {
    left: 50%;
    transform: translate(calc(-100% + 20px), -100%);
}

.hint.alignRightTop .txt:before {
    left: calc(100% - 20px);
}

.hint.alignRightBottom .txt, .hint.alignLeftBottom .txt {
    top: calc(100% + 20px);
}

.hint.alignRightBottom .txt {
    left: 100%;
    transform: translate(-100%, 0%);
}

.hint.alignLeftBottom .txt {
    left: 0;
    transform: translate(0, 0);
}

.hint.alignRightBottom .txt:before, .hint.alignLeftBottom .txt:before {
    left: calc(100% - 20px);
    top: -20px;
    border-bottom: 10px solid var(--second-color-400);
    border-top: none;
}

.hint.primary.alignRightBottom .txt:before, .hint.primary.alignLeftBottom .txt:before {
    border-bottom-color: var(--third-color);
}

.hint.alignLeftTop .txt {
    left: 50%;
    transform: translate(-20px, -100%);
}

.hint.alignLeftTop .txt:before {
    left: 20px;
}

.hint.alignLeftBottom .txt:before {
    left: 20px;
}




.box.info {
    display: flex;
    gap: var(--xxl);
}

.box.info .process, .box.info .history {
    width: 50%
}

.box.info h2, .box.symbols h2 {
    margin-top: var(--s);
}



.listItems {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.listItems .item:not(:last-of-type) {
    padding-bottom: var(--m);
    border-bottom: 1px solid var(--color-black-800);
}

.listItems .item h3 {
    font-size: 1.05em;
    line-height: 1.25em;
    font-weight: normal;
    padding: 0;
    margin: 0;
}

.listItems .item h3 a {
    text-decoration: none;
}


.blogBanner {
    overflow: hidden;
    cursor: pointer;
    display: flex;
    margin-top: var(--m);
}

.blogBanner img {
    width: 100%;
    height: auto;
    border-radius: var(--box-corner-radius);
}

/* Footer */

footer {
    display: flex;
    justify-content: center;
    border-style: solid;
    border-width: 1px 0 0;
    border-color: #fafae533;
    padding: var(--m) 0 0 0;
}

.grid footer .grid {
    display: grid;
    gap: var(--m);
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "sub nav" "info info";
}

.grid footer .grid .subscribe {
    grid-area: sub;
    box-sizing: border-box;
    padding: 0 var(--l) 0 0;
    margin: 0;
}

.grid footer .grid .subscribe .groupBtn .input {
    width: 100%;
}

.grid footer .grid .subscribe .head {
    display: flex;
    align-items: center;
}

.grid footer .grid .subscribe .groupBtn {
    margin-top: var(--s);
}

.grid footer .grid > nav {
    grid-area: nav;
    display: grid;
    gap: var(--l);
    grid-template-areas: "g1 g2 g3";
    grid-template-columns: 1fr 1fr 1fr;
}

.grid footer .grid > nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.grid footer .grid > nav ul li {
    padding: 0;
    display: flex;
    align-items: center;
    margin: 0;
}

.grid footer .grid > nav ul li a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    height: var(--btn-m-h);
    padding: 0 var(--s);
    box-sizing: border-box;
    text-decoration: none;
    border-radius: var(--btn-corner-radius);
    user-select: none;
}

.grid footer .grid > nav ul li a.active {
    color: var(--text-white);
    font-weight: bold;
    background: var(--second-color-400);
}

.grid footer .grid > nav ul li a:hover {
    background: var(--second-color-400);
    color: var(--text-white);
}

.grid footer .grid > nav ul li a, .grid footer .grid > nav ul li a:hover {
    text-decoration: none;
}

.grid footer .grid > nav ul li strong a, .grid footer .grid > nav ul li strong a:visited {
    color: var(--text-color);
    text-decoration: none;
}

.grid footer .grid .attentionBox {
    grid-area: info;
    display: flex;
    gap: var(--l);
    padding-top: var(--m);
    border-top: 1px solid rgba(255,255,255,.2);
}

.grid footer .grid .attentionBox .i18 {
    padding: var(--xs);
}

.grid footer .grid .attentionBox .i18 .i {
    width: var(--i18-w);
    height: var(--i18-h);
    opacity: .7;
}

.grid footer .grid .attentionBox .info {
    padding-right: var(--xl);
    opacity: .7;
}

.grid footer .grid .attentionBox p {
    padding: 0;
    margin: 0;
}

.grid footer .grid .attentionBox p:not(:last-of-type) {
    padding: 0 0 var(--s) 0;
    margin: 0;
}



footer .copyright {
    font-weight: 500;
    padding: var(--m) 0;
    opacity: .5;
}


/* Inputs */

.input, .select, .textarea {
    display: inline-flex;
    max-width: 100%;
    gap: var(--xxs);
    position: relative;

    box-sizing: border-box;
    flex-direction: row-reverse;
    align-items: center;

    border: 1px solid rgba(250, 250, 229, 0.2);

    font-family: var(--second-font-set);

    margin: 0;

}

.input:after {
    position: absolute;
    left: var(--padd);
    top: var(--padd);
    display: block;
    background: var(--color-orange-200);
    width: var(--padd);
    height: calc(100% - (var(--padd) * 2));
    content: '';
}

.input:has(input:focus) {
    border-color: rgba(250, 250, 229, 0.3);
}

.input:has(input:focus):after {
    background: var(--color-orange-500);
}

.input, .select {
    height: var(--h);
}

.input .postfix, .input .prefix {
    display: flex;
    justify-content: center;
}

.select > select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url('/assets/img/chevron-down_white.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    background-size: 12px 8px;
}

.input > input, .select > select, .textarea > textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: none;
    display: flex;
    outline: none;
    font-size: 100%;
    background: none;
    color: var(--text-white);
    border-radius: var(--input-corner-radius);
    z-index: 2;
    line-height: 1.2em;
}

.input > input, .select > select {
    height: 100%;
    align-items: center;
}

.textarea > textarea {
    resize: none;
    padding: var(--s);
    width: 100%;
    font-family: var(--second-font-name), Arial, Helvetica, sans-serif;
}

.input > input {
    padding: 0 var(--s);
}

.select > select {
    padding: 0 var(--l) 0 var(--s);
}

.input > input:focus, .select > select:focus, .textarea > textarea:focus {
    border-color: var(--sub-color);
}

.input > input + .outline {
    position: absolute;
    display: block;
    border-radius: var(--input-corner-radius);
    left: -1px;
    right: -1px;
    top: -1px;
    bottom: -1px;
    border: 1px solid transparent;
    z-index: 1;
}

.input > input:focus + .outline {
    border-color: var(--color-blue-400);
}

.input > input:focus + .outline + .prefix {
    color: var(--color-blue)
}

.input.error {
    background: #fff6f7;
}

.input.error > input, .input.error > input + .outline + .prefix {
    color: var(--alert-error-color-text);
}

.input.error > input + .outline {
    border-color: #ffb0bb;
}


/*
select.inp, .userCarSelect select.inp {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff url('/assets/img/menu-down.svg?v.2323') calc(100% - var(--xxs)) center no-repeat;
    background-size: 20px 20px;
}

select.inp.medium {
    padding: 0 var(--l) 0 var(--xs);
}

::placeholder {
    color: var(--color-placeholder);
}

.error > input::placeholder {
    color: var(--input-error-placeholder-color)
}

 */

/* Button */

.btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--first-font-set);
    text-decoration: none;

    cursor: pointer;
    position: relative;

    border: 1px solid transparent;
    border-left: 1px solid hsla(60, 68%, 94%, .3);
    border-right: 1px solid hsla(60, 68%, 94%, .3);

    -webkit-appearance: button;

    background: none;

    box-sizing: border-box;

    gap: var(--2xs);
    font-weight: 600;
    font-size: 1em;
}

.btn:hover {
    text-decoration: none;
}


.btn:before {
    content: "";
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: absolute;

    top: -1px;
    left: -1px;
    width: calc(100% + 2 * 1px);
    height: calc(100% + 2 * 1px);
    border-style: inset;
    border-width: 1px;

    border-image-source: var(--svg-corners-orange);
    border-image-slice: 50%;
    border-image-width: 8px;
}

.btn .label {
    display: flex;
    width: 100%;
    gap: var(--xxs);
    padding: 0 var(--xs);
    align-items: center;
    text-decoration: none;

    font-weight: bold;
    box-sizing: border-box;

    text-transform: uppercase;
    user-select: none;

    background: var(--btn-bg-color);
    color: var(--btn-text-color);
    max-height: 100%;
    height: 100%;
}

.btn:hover .label, a.btn:hover .label {
    background: var(--btn-bg-color-hovered);
    color: var(--color-black);
}

.btn:active .label, a.btn:active .label {
    background: var(--btn-bg-color-active);
}

.btn:hover:before, .btn:focus:before {
    border-image-source: var(--svg-corners-white);
}

.btn:focus {
    outline: none;
}

.btn.l {
    padding: 3px;
    height: var(--btn-l-h);
}

.btn.l .label {
    font-size: 1.2em;
    padding: var(--xs) var(--m);
    display: flex;
    width: 100%;
    max-height: 100%;
    border: none;
    align-items: center;
}

.btn.m {
    padding: 2px;
    height: var(--btn-m-h);
}

.btn.m span.label {
    font-size: 0.9em;
    padding: var(--xs) var(--s);
}


.btn.secondary {
    background: var(--btn-secondary-grad);
    font-size: .95em;
}


.btn.s {
    font-weight: normal;
    font-size: .9em;
    padding: var(--xxs) var(--xs);
}


/* Only Icon Button */
.btn.icon {
    padding: var(--2xs);
}

.btn .i {
    width: 24px;
    height: 24px;
}

.btn.s {
    height: var(--btn-s-h);
    gap: var(--xxs);
}


.btn.icon {
    width: var(--h);
    height: var(--h);
    justify-content: center;
}

.btn.icon .i {
    width: 24px;
    height: 24px;
}

.btn.inline {
    background: none;
    font-weight: normal;
    white-space: nowrap;
}

.groupBtn {
    display: flex;
}

.groupBtn .btn {
    z-index: 2;
}

.groupBtn > .input:not(:last-child) {
    border-right: none;
}



a.inline {
    display: flex;
    gap: var(--xs);
    align-items: center;
    text-decoration: none;
    color: var(--color-text-white);
    height: var(--small-h);
}

a.inline:visited {
    color: var(--color-text-white);
}

a.inline:hover {
    opacity: .8;
}

.btn span {
    display: inline-block;
}



.btn.outline {
    border: 1px solid var(--color-blue);
    background: none;
}

.btn.blue, a.btn.blue, .btn.blue .i {
    color: var(--color-blue);
}

.btn.blue:hover, a.btn.blue:hover, .btn.blue:hover .i  {
    color: var(--color-blue-400);
}

.btn.blue:hover, a.btn.blue:hover {

}

.summary {
    display: grid;
    gap: var(--l);
    grid-template-areas: "img text screens";
    grid-template-columns: auto 3fr 2fr;
}

.img {
    grid-area: img;
    display: flex;
    justify-content: center;
}

.img .slotTile {

    width: 220px;
    height: 340px;
    display: flex;
    position: relative;

    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    justify-content: end;

    border-radius: var(--box-corner-radius);
    overflow: hidden;
}

.img .slotTile:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,0) 17%, rgba(2,1,34,1) 82%);
}

.img .slotTile img {
    position: absolute;
    top: 0;
    z-index: 0;
    max-width: 100%;
}

.img .slotTile h2 {
    width: 100%;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 0;
    text-transform: uppercase;
    line-height: normal;
    font-weight: 800;
    color: white;
    user-select: none;
    text-align: center;
}

.img .slotTile .provider {
    display: flex;
    position: relative;
    user-select: none;

    width: 100%;
    z-index: 1;

    font-size: 1.1em;
    color: var(--text-bold);

    align-items: center;
    justify-content: center;
    margin-bottom: var(--s);
}

.text {
    padding: 0 var(--l);
    grid-area: text;
}

.screens {
    grid-area: screens;
}

.screens .slider {
    border-radius: var(--box-corner-radius);
    padding: var(--m);
    text-align: center;
    background-color: rgba(2, 1, 34, 0.73);
}


/* Crumbs */

.breadcrumbs {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-family: var(--first-font-set);
    gap: var(--xs);
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--xs);
    padding: 0;
    margin: 0;
}

.breadcrumbs, .breadcrumbs a {
    color: var(--fourth-color);
}

.breadcrumbs .arrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1px;
}

.breadcrumbs .arrow .i {
    width: 18px;
    height: 18px;
}

.breadcrumbs a {
    text-decoration: none;
}
/* END */


/* Modal */

.modal.show {
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    overflow-y: visible;
    z-index: 100;
}

.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 100;
    width: 70%;
    max-height: 96%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    background: #ffffff;
    box-sizing: border-box;
    border-radius: 12px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, .2);
    outline: none;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.modal .close {
    display: block;
    position: absolute;
    right: 24px;
    top: 28px;
    color: var(--color-black);
    opacity: .5;
    line-height: normal;
    cursor: pointer;
    z-index: 1;
}

.modal-header {
    padding: var(--m);
}

.modal-header h3 {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    text-align: center;
    font-weight: 500;
    font-size: 1.5em;
}



.modal-body {
    position: relative;
    padding: 0 var(--m) var(--m) var(--m);
    overflow-y: auto;
}

.backdrop {
    opacity: 0;
    visibility: hidden;
    content: '';
    position: fixed;

    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: black;
    -webkit-transition: opacity ease-out .2s;
    -moz-transition: opacity ease-out .2s;
    -o-transition: opacity ease-out .2s;
    transition: opacity ease-out .2s;
}

.backdrop.show {
    opacity: 0.37;
    visibility: visible;
}

/* Alert */

.alert {
    padding: var(--xxs) var(--xs);
    border-radius: var(--box-corner-radius);
    background: var(--alert-bg);
}

.alert.alert-success {
    background: var(--alert-success-bg);
}

/* Tags */

.tag, a.tag {
    display: inline-flex;
    align-items: center;
    background: var(--tag-background);
    padding: var(--tag-paddings);
    color: var(--tag-text-color);
    text-decoration: none;
    user-select: none;
    border-radius: var(--tag-border-radius);
    cursor: pointer;
    height: var(--tag-h);
}

.tag:hover, a.tag:hover {
    background: var(--tag-hovered-background);
}

.tag:active, a.tag:active {
    color: var(--tag-active-text-color);
}

/* Avatar */
.ava {
    background: var(--second-color-700);
    border-radius: 4px;
    display: inline-flex;
    width: var(--ava-m-w);
    height: var(--ava-m-h);
    align-items: center;
    justify-content: center;
    color: white;
}

.aba.s {
    width: var(--ava-s-w);
    height: var(--ava-s-h);
}

.user {
    display: inline-flex;
    gap: var(--2xs);
    align-items: center;
}

/* FAQ */

dl.questions {
    display: flex;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-direction: column;
    gap: var(--m);
}

dl.questions dd {
    margin: 0;
    padding: 0;
}


dl.questions > li > input {
    display: none;
}

dl.questions > li > dt.question label {
    font-size: 1.1em;
    box-sizing: border-box;
    border-radius: var(--btn-corner-radius);
    cursor: pointer;
    width: 100%;
    display: flex;
    gap: var(--s);
    padding: var(--xs) var(--s);
    align-items: center;
    position: relative;
    background: var(--sub-color);
}

dl.questions > li > dt.question label .i {
    opacity: .8;
}

dl.questions > li > dt.question label .q {
    color: var(--text-white);
    font-weight: 500;
    width: 100%;
}

dl.questions > li > dt.question label .arrow {
    display: inline-flex;
    align-items: center;
}

dl.questions > li > dt.question label .arrow .i {
    transform: rotate(90deg);
    transition: .3s;
}

dl.questions > li > dd.answer {
    display: none;
    margin: -16px 0 0 0;
    height: 0;
    opacity: 0;
    padding: calc(var(--m) + 6px) var(--m) var(--m) var(--m);
    background: var(--color-gray-300);
    border-bottom-left-radius: var(--box-corner-radius);
    border-bottom-right-radius: var(--box-corner-radius);
}

dl.questions > li > dd.answer:not(:last-of-type) {
    margin-bottom: var(--m);
}

dl.questions > li > input:checked ~ .answer {
    display: block;
    height: auto;
    opacity: 1;
}

dl.questions > li > input:checked + dt.question label .arrow .i {
    transform: rotate(-90deg);
}


blockquote, .fact {
    float: right;
    margin: var(--s) 0 var(--m) var(--l);
    background: var(--sub-color);
    width: 360px;
    display: inline-flex;
    padding: var(--m);
    flex-direction: column;
    gap: var(--s);
    border-radius: 0 var(--box-corner-radius) var(--box-corner-radius) 0;
    border-left: 5px solid var(--second-color-700);
}

blockquote .schema {
    width: 240px;
}

.fact .blockName, blockquote .h {
    font-weight: bold;
    text-transform: uppercase;
}



.firstPage {
    display: flex;
    gap: var(--m);
    flex-direction: column;
}

.scope {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--m);
}

.scope .mediaBox img {
    --aspect-ratio: 430 / 300;
}

.mediaBox {
    border: 1px solid #fafae51a;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    flex-direction: column;
    position: relative;
    padding: var(--s);
    background: var(--color-black);
}

.mediaBox:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2 * 1px);
    height: calc(100% + 2 * 1px);
    border-style: solid;
    border-width: 1px;
    border-image-source: var(--svg-corners-white);
    border-image-slice: 50%;
    border-image-width: 8px;
}

.mediaBox .inset {
    display: flex;
    flex-direction: column;
    gap: var(--s);
}

.mediaBox .inset img {
    width: auto;
    max-width: 100%;
}

.whatsTheFrontier {
    width: var(--wtf-w);
    aspect-ratio: var(--wtf-aspect);
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto var(--m) auto;
}

.whatsTheFrontier .text {
    width: var(--wtf-w);
    box-sizing: border-box;
    aspect-ratio: var(--wtf-aspect);
    font-family: var(--first-font-set);
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsTheFrontier .dotsGrid {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.dotsGrid .dotsRow {
    display: flex;
    justify-content: space-between;
}

.dotsGrid .dotsRow .dot {
    height: 3px;
    width: 3px;
    --tw-bg-opacity: 1;
    background-color: rgb(250 250 229 / var(--tw-bg-opacity, 1));
}

.dotsRow .dot:first-child, .dotsRow .dot:last-child, .dot[data-row="0"], .dot[data-row="4"] {
    opacity: .37;
}

.dot[data-row="2"][data-col="2"], .dot[data-row="2"][data-col="1"], .dot[data-row="2"][data-col="3"] {
    opacity: 0;
}

.authPage {
    display: flex;
    flex-direction: column;
    gap: var(--m);
}

.authRow {
    width: 100%;
    max-width: 400px;
    display: inline-flex;
    gap: var(--s);
    flex-direction: column;
}