@font-face{
    font-family: 'Inter';
    src: url('/data/fonts/Inter/Inter-Bold.woff2') format('woff2');
    font-weight: 600;
}

@font-face{
    font-family: 'Inter';
    src: url('/data/fonts/Inter/Inter-Medium.woff2') format('woff2');
    font-weight: 500;
}

@font-face{
    font-family: 'Inter';
    src: url('/data/fonts/Inter/Inter-Regular.woff2') format('woff2');
    font-weight: 300;
}

@font-face{
    font-family: 'Inter';
    src: url('/data/fonts/Inter/Inter-Light.woff2') format('woff2');
    font-weight: 200;
}

.nowrap {
    white-space: nowrap;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: var(--font-size);
    font-weight: 300;
    line-height: 1.5em;
    font-family: var(--font-name), Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

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

h1 {
    font-size: 1.7em;
    font-weight: 400;
    display: block;
    padding: 0;
    margin: var(--xs) 0 var(--m) 0;
    color: #000;
    line-height: normal;
}

h2 {
    font-size: 1.7em;
    font-weight: 500;
    margin: var(--xs) 0 var(--m) 0;
    line-height: 1.2em;
}


h3 {
    font-size: 1.7em;
    font-weight: 500;
    margin: var(--m) 0;
}

p {
    margin:10px 0;
}

del {
    opacity: 0.5;
}

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

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

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

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

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


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

blockquote {
    margin: var(--m) 0;
    padding: var(--m) var(--l);
    background: var(--color-bg-blockquote);
    border-left: 4px solid var(--color-blue-500);
}

blockquote .text {
    color: var(--color-black-500);
    font-style: italic;
}

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

/* Layout */
.grid {
    display: grid;
    min-height: 100vh;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header" "page" "footer";
}

.grid .page {
    grid-area: page;
    display: grid;
    width: 1280px;
    margin: 0 auto;
    justify-content: space-between;
    grid-template-areas: "left center right";
    grid-template-columns: 220px 680px 320px;
}

.grid .page aside {
    grid-area: left;
    display: flex;
    gap: var(--m);
    padding-bottom: var(--m);
    flex-direction: column;
}

.router {
    margin-top: var(--m);
}

.router ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--xxs);
}

.router ul li {
    padding: 0;
    margin: 0;
}

.router ul li a.point {
    padding: 0 var(--menu-item-gap);
    color: var(--color-black-300);
    text-decoration: none;
    height: var(--menu-item-height);
    display: flex;
    gap: var(--menu-item-gap);
    align-items: center;
    border-radius: var(--box-corner-radius);
    user-select: none;
}

.router ul li a.point .icon {
    width: var(--menu-item-icon-w);
    height: var(--menu-item-icon-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

.router ul li a.point:hover, .router ul li a.point.active {
    color: var(--color-black-400);
    background: white;
}

/* Menu group */

.group {
    display: flex;
    flex-direction: column;
    gap: var(--xxs);
}

.group > input.toggle {
    display: none;
}

.group label {
    user-select: none;
    cursor: pointer;
    font-weight: 300;
    display: flex;
    color: var(--color-black-500);
    padding: 0 var(--menu-item-gap);
    height: var(--menu-item-height);
    align-items: center;
    border-radius: var(--box-corner-radius);
}

.group label:hover {
    background: var(--color-secondary-bg);
}

.group label .name {
    width: 100%;
}

.group label .arrow {
    width: var(--menu-item-icon-w);
    height: var(--menu-item-icon-h);
    display: flex;
    align-items: center;
    justify-content: center;
}

.group label .arrow .i {
    transition: .2s transform;
}

.group ul {
    display: none;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-direction: column;
    gap: var(--xxs);
}

.group > input.toggle:checked + label .arrow .i {
    transform: rotate(180deg);
}

.group > input.toggle:checked + label + ul {
    display: flex;
}

.group ul li {
    padding: 0;
    margin: 0;
}

.group ul li a {
    display: flex;
    gap: var(--menu-item-gap);
    padding: 0 var(--menu-item-gap);
    user-select: none;
    height: calc(var(--menu-item-height) - 1px);
    align-items: center;
    color: var(--color-black-300);
    text-decoration: none;
    border-radius: var(--box-corner-radius);
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
}

.group ul li a.active {
    background: white;
    border-color: var(--color-black-870);
}

.group ul li a span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group ul li a .icon {
    width: var(--menu-item-icon-w);
    height: var(--menu-item-icon-h);
    min-width: var(--menu-item-icon-w);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--box-corner-radius);
    overflow: hidden;
}

.group ul li a .icon .mask {
    width: 100%;
    height: 100%;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}



.group ul li a .icon .i {
    width: 20px;
    height: 20px;
}

.group ul li a .name {
    width: calc(100% - var(--menu-item-icon-w));
}

.group ul li a:hover {
    background: white;
    color: var(--color-black-200);
    border-left: 1px solid var(--color-black-870);
    border-right: 1px solid var(--color-black-870);
    border-bottom: 1px solid var(--color-black-850);
}
/* END */

.grid .page main {
    grid-area: center;
    display: flex;
    flex-direction: column;
    gap: var(--m);
}

.grid .page main > .box:first-child {
    margin-top: var(--m);
}

.grid .page main > .box:last-child {
    margin-bottom: var(--m);
}

.grid .page section.right {
    grid-area: right;
    display: flex;
    gap: var(--m);
    flex-direction: column;
}

.grid footer {
    grid-area: footer;
}



/* Cap */

header {
    background: var(--header-bg);
    height: var(--header-height);
    border-bottom: 1px solid var(--color-black-870);
}

header .cap {
    display: grid;
    gap: var(--m);
    grid-template-areas: 'logo menu profile';
    grid-template-rows: var(--bar-height);
    grid-template-columns: 340px 1fr 1fr;
    position: relative;
}

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

header .cap .logo a {
    display: block;
}

header .cap .logo .parts {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding-top: 1px;
}

header .cap .logo .mobifan {
    width: auto;
    height: var(--logo-height);
}

header .cap .logo .slogan {
    width: auto;
    height: var(--logo-height);
}


header .cap .menu {
    grid-area: menu;
    padding-left: var(--m);
    box-sizing: border-box;
}

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

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

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

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

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

/* Box */
.box {
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0;
    background: var(--box-color-bg);
    border-radius: var(--box-corner-radius);
    border-left: 1px solid var(--color-black-870);
    border-right: 1px solid var(--color-black-870);
    border-bottom: 1px solid var(--color-black-850);
}

.box .title {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name link';
    align-items: center;
    padding: 0 var(--m);
    height: var(--box-header-h);.
    box-sizing: border-box;
}


.box .title .name {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--color-black-500);
}

.box .content {
    padding: var(--s) var(--m) var(--m) var(--m);
    background: #FFFFFF;
    border-radius: var(--box-corner-radius);
    box-shadow: var(--layer-shadow);
}
/* END */

.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;
}

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

/* Footer */

footer {
    border-top: 4px solid transparent;
    background: var(--color-black);
}

footer .l1 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-areas: 'menu socials';
    grid-template-rows: 64px;
    border-bottom: 1px solid #4B5963;
}

footer .l1 .footerMenu {
    grid-area: menu;
}

footer .l1 .footerMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: var(--xl);
}

footer .l1 .footerMenu ul li {
    display: inline-flex;
    align-items: center;
}

footer .l1 .footerMenu ul li a {
    font-size: 1.2em;
    text-decoration: none;
    font-weight: 500;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
    height: calc(var(--bar-height) - 3px);
    color: var(--color-text-white);
}


footer .l1 .footerMenu ul li a:hover {
    color: var(--color-blue);
}

footer .l1 .socials {
    grid-area: socials;
    display: flex;
    gap: var(--s);
    align-items: center;
    justify-content: end;
    height: 100%;
}

footer .l1 .socials .item {
    opacity: .9;
    cursor: pointer;
    color: var(--color-blue);
}

footer .l1 .socials .item:hover {
    opacity: .8;
}

footer .desc strong {
    color: var(--color-blue);
}

footer .desc {
    box-sizing: border-box;
    padding: var(--s) 0;
    color: var(--color-black-600);
}

footer .desc p:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
}

footer .copyright {
    font-weight: 500;
    padding: var(--s) 0 var(--m) 0;
    color: var(--color-black-500);
}


/* Inputs */

.input {
    display: inline-flex;
    max-width: 100%;
    gap: var(--xxs);
    position: relative;
    height: var(--h);
    border: 1px solid var(--color-black-600);
    border-radius: var(--input-corner-radius);
    box-sizing: border-box;

    flex-direction: row-reverse;

    align-items: center;
}

.input .postfix, .input .prefix {
    color: var(--color-black-400);
    width: 52px;
    display: flex;
    justify-content: center;
}

.input > input {
    width: 100%;
    border: none;
    padding: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    color: var(--color-text);
    outline: none;
    font-size: 100%;
    line-height: 1em;
    background: none;
    z-index: 2;
}

.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;
}

/*
textarea, select, .input {
    box-sizing: border-box;
    border: 1px solid var(--color-gray);
    border-radius: var(--btn-corner-radius);
    font-family: "DinNext", Tahoma, sans-serif;
    margin: 0;
    padding: var(--xs) var(--m) calc(var(--xs) - 1px) var(--m);
    display: inline-block;
    background: none;
    color: var(--color-black-300);
    font-weight: 400;
    font-size: 1em;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    outline: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 */

select.inp, .userCarSelect select.inp {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #ffffff url('/data/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 {
    border: 1px solid transparent;

    display: inline-flex;
    align-items: center;
    gap: var(--2xs);

    user-select: none;

    border-radius: var(--btn-corner-radius);
    font-weight: 300;

    color: white;
    cursor: pointer;
    padding: 1px var(--2xs) 1px var(--2xs);
    box-sizing: border-box;

    height: var(--btn-m-h);
    font-size: 1em;
}

.btn.primary {
    background: var(--color-blue);
}

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

.btn:hover, a.btn:hover {
    color: var(--color-text-white-hover)
}

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

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


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;
}

a.btn {
    text-decoration: none;
    color: white;
}

.btn:active {
    padding-top: 2px;
    padding-bottom: 0;
}

.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 {

}



/* Crumbs */

.crumbs {
    margin: 0;
    padding: 0;
    color: var(--color-black-500);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.crumbs .dirs {
    color: var(--color-text-muted);
    display: flex;
    gap: var(--2xs);
    align-items: center;
}

.crumbs .dirs .i {
    width: 24px;
    height: 24px;
    display: block;
}

.crumbs .dirs .i.arrow {
    width: 18px;
    height: 18px;
}

.crumbs .dirs a, .crumbs .dirs span {
    color: var(--color-black-500);
}

.crumbs a {
    text-decoration: none;
}

.crumbs .dirs a:hover {
    color: var(--color-link);
}
/* END */

.topic.robots .image, .group ul li a.robots .icon .mask, .topic.robots .iconCell .icon {
    background-color: var(--topic-robots-color);
    color: #f3fdff;
}
.topic.ai .image, .group ul li a.ai .icon .mask, .topic.ai .iconCell .icon {
    background-color: var(--topic-ai-color);
    color: #f4ebff;
}
.topic.smartphones .image, .group ul li a.smartphones .icon .mask, .topic.smartphones .iconCell .icon {
    background-color: var(--topic-smartphones-color);
    color: #e0effb;
}
.topic.games .image, .group ul li a.games .icon .mask, .topic.games .iconCell .icon {
    background-color: var(--topic-games-color);
    color: #fffaf7;
}
.topic.gadgets .image, .group ul li a.gadgets .icon .mask, .topic.gadgets .iconCell .icon {
    background-color: var(--topic-gadgets-color);
    color: #eee2f3;
}
.topic.economy .image, .group ul li a.economy .icon .mask, .topic.economy .iconCell .icon {
    background-color: var(--topic-economy-color);
    color: #e9eeeb;
}
.topic.trends .image, .group ul li a.trends .icon .mask, .topic.trends .iconCell .icon {
    background-color: var(--topic-trends-color);
    color: #f7f5e5;
}
.topic.tech .image, .group ul li a.tech .icon .mask, .topic.tech .iconCell .icon {
    background-color: var(--topic-tech-color);
    color: #fffafc;
}


.topic .image {
    height: 168px;
    margin: 0;
    padding: 0;
    background-color: var(--color-black-900);
    background-size: cover;
    background-position: center;
}

.topic .info {
    padding: var(--s) var(--m) var(--m) var(--m);
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: var(--s);
}

.topic .info .bar {
    display: grid;
    gap: var(--m);
    height: var(--h);
    align-items: center;
    grid-template-areas: "icon crumbs sub";
    grid-template-columns: calc(var(--topic-icon-w) + var(--topic-border-width) * 2) 1fr auto;
}

.topic .info .bar .iconCell {
    grid-area: icon;
    position: relative;
    align-self: flex-end;
}

.topic .info .bar .crumbs {
    grid-area: crumbs;
}

.topic .info .icon {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black-800);
    width: var(--topic-icon-w);
    height: var(--topic-icon-h);
    border-radius: var(--topic-icon-border-radius);
    border: var(--topic-border-width) solid white;
}

.topic .info .icon .i {
    width: 32px;
    height: 32px;
}

.topic .info h1 {
    margin-bottom: 0;
}

.topic .info p {
    padding: 0;
    margin: 0;
}


.menuPopup {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    box-sizing: border-box;
    left: 0;
    top: calc(100% - 2px);
    background: var(--color-black-100);
    color: var(--color-text-white);
    border-radius:  0 0 var(--box-corner-radius) var(--box-corner-radius);
    border-top: 2px solid var(--color-black-300);
    border-bottom: 2px solid var(--color-black-500);
}

.cats.opened .menuPopup {
    visibility: visible;
    opacity: 1;
}

/* 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;
}

.alternate {
    width: 100%;
    text-align: center;
    display: block;
    position: relative;
}

.alternate:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--s);
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed var(--color-gray);
}

.alternate span {
    padding: 0 var(--m);
    display: inline-block;
    background: white;
    position: relative;
    z-index: 1;
    color: var(--color-dgray);
}


.signInModal {
    width: 300px;
}

.signInModal .createAccount {
    width: 80%;
    color: var(--color-text-muted);
    font-size: 1em;
    margin: var(--2xs) auto;
    text-align: center;
}

.signInModal form.signInForm {
    display: grid;
    gap: var(--s);
}

.signInForm .submitRow {
    text-align: center;
}

.signInForm .submitRow .send .btn {
    width: 100%;
}

.signInForm .createAccount {
    color: var(--color-text-muted);
}

.signInModal .signInForm .email, .signInModal .signInForm .pass {
    width: 100%;
}

/* Alert */

.alert {
    padding: var(--s);
    margin: 0;
    text-align: center;
    line-height: normal;
    border-radius: var(--box-corner-radius);
}

.alert.alertError {
    background: var(--alert-error-bg);
    color: var(--alert-error-color-text);
}

/* Sign Up */

.signUpModal {
    width: 640px;
}

ul.chain {
    padding: 0;
    margin: var(--xs) 0 var(--xs) var(--xs);
    list-style: none;
    font-size: 1em;
}

ul.chain li {
    position: relative;
    padding: var(--xs) 0 var(--xs) var(--l);
    box-sizing: border-box;
}

ul.chain li:first-of-type:before {
    height: calc(100% - var(--point-r) * 2);
    top: calc(var(--xs) + 1px);
}

ul.chain li:last-of-type:before {
    height: calc(var(--xs) + 1px);
}

ul.chain li:before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(var(--xs) / 2 + 2px);
    height: 100%;
    width: 2px;
    background: #979797;
    z-index: 1;
}

ul.chain li:after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(var(--xs) + 1px);
    z-index: 2;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #979797;
    background: white;
}

/* Sign Up modal: */

.signUpGrid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    grid-template-areas: 'left separator right';
    gap: var(--xs);
}

.signUpGrid .left {
    grid-area: left;
    padding: var(--m);
    box-sizing: border-box;
}

.signUpGrid .sep {
    grid-area: separator;
    padding: var(--m) 0;
    box-sizing: border-box;
}

.signUpGrid .sep div.line {
    background: #f1f1f1;
    height: 100%;
    width: 1px;
}

.signUpGrid .right {
    grid-area: right;
    padding: var(--m);
    box-sizing: border-box;
}

.signUpGrid h3 {
    margin: 0;
    padding: 0;
    color: var(--color-black);
    font-weight: 500;
    font-size: 1.5em;
}

.signUpGrid .alreadyHaveAccount {
    color: var(--color-text-muted);
    margin: var(--2xs) 0;
    font-size: 1em;
}

.signUpModal .signUpForm {
    display: flex;
    flex-direction: column;
    gap: var(--s);
    margin: var(--m) 0;
}

.signUpModal .signUpForm .email, .signUpModal .signUpForm .pass, .signUpModal .signUpForm .submitRow .btn {
    width: 100%;
}

.signUpForm .blockError {
    padding: var(--xxs) 0 0 0;
    color: var(--alert-error-color-text);
}

.usr {
    display: inline-flex;
    color: var(--color-black-300);
}

.usr .wrapper {
    position: relative;
}

.usr .mask {
    display: flex;
    gap: var(--xs);
    height: var(--h);
    box-sizing: border-box;

    align-items: center;
    justify-content: center;

    cursor: pointer;
    border-radius: var(--btn-corner-radius);
    user-select: none;
    color: white;
}


.usr .mask:active {
    opacity: .9;
}

.usr .mask:hover .login {
    opacity: .8;
}


.usr .login {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup.alignRight {
    right: 0;
}

.popup.alignLeft {
    left:0;
}

.popup.alignCenter {
    left:50%;
    transform: translateX(-50%);
}


.usr .popup {
    opacity: 0;
    visibility: hidden;
    list-style: none;

    top: calc(100% + var(--xl) + 10px);
    transition: all .1s ease-in-out;

    position: absolute;

    margin: 0;
    padding: var(--xs);
    border: 1px solid transparent;
    border-radius: var(--btn-corner-radius);

    box-sizing: border-box;
    width: 180px;

    background: var(--color-black-300);
    text-align: left;
    box-shadow: 0 4px 4px rgba(0,0,0,.2);
    z-index: 100;
}

.usr .popup.show {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 2px);
}

.usr .popup ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.content .crumbs {
    padding: 0 var(--m);
    height: var(--box-header-h);
}

.content article {
    overflow: hidden;
    height: 100%;
    display: block;
}

.content .archive, .content .archive .wrapper {
    height: 100%;
}

.archive .header {
    display: grid;
    gap: var(--m);
    grid-template-areas: "cat counter" "desc desc";
    grid-template-columns: 3fr 1fr;
}

.archive .header h1 {
    grid-area: cat;
    align-items: center;
    margin: 0;
    padding: 0;
}

.archive .header .counter {
    grid-area: counter;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--2xs);
    white-space: nowrap;
    color: var(--color-black-500);
}

.archive .header .counter strong {
    color: var(--color-black-400);
    display: inline-flex;
    padding: 2px 6px;
    align-items: center;
    background: var(--color-black-800);
    border-radius: var(--box-corner-radius);
}

.archive .header .desc {
    grid-area: desc;
    padding: 0;
    font-size: 1.1em;
    color: var(--color-black-500);
}

.pubList {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    margin: var(--xl) 0;
    gap: var(--l);
}


.content article .wrapper, .content .archive .wrapper {
    background: #ffffff;
    padding: var(--m);
    border-radius: var(--box-corner-radius) var(--box-corner-radius) 0 0;
    box-shadow: var(--layer-shadow);
}

.content article .wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--s);
}

.content article .wrapper h1 {
    margin: 0;
    padding: 0;
}

article .content {
    display: flex;
    flex-direction: column;
    gap: var(--xs);
}

article.full .announce {
    color: var(--color-black-500);
}

article .info, .listItems .item .info {
    display: flex;
    align-items: center;
    color: var(--color-black-520);
}

article h2 {
    padding: 0;
    margin: 0;
    font-size: 1.5em;
    font-weight: 400;
}

article.box .content h2 {
    margin: 0;
}

article h2 a, article h2 a:visited {
    color: var(--color-black);
    text-decoration: none;
}

.info .readingTime {
    display: inline-flex;
    align-items: center;
}

.info .readingTime .time {
    white-space: nowrap;
}

.info .commentsCounter {
    display: flex;
    align-items: center;
}

.listItems .item .info .commentsCounter {
    gap: var(--xxs);
}

.listItems .item .info .readingTime {
    gap: var(--xxs);
}

article .info .readingTime {
    gap: var(--xxs);
}

.listItems .item article .info {

}

article .info {
    gap: var(--m);
    height: var(--h);
}

article .info .user {
    color: var(--color-black);
}

article .pubImage .preview img {
    max-width: 100%;
    border-radius: var(--box-corner-radius);
}


.listItems .item:first-of-type .info {
    margin-top: 0;
}

.listItems .item .info {
    gap: var(--s);
    margin-bottom: 0;
    border: none;
}

article .info .datePublished {
    display: inline-flex;
    align-items: center;
    gap: var(--2xs);
    width: 100%;
    white-space: nowrap;
}


article .keywords {
    padding: var(--m);
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--s);
}

/* 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: #c1c1c1;
    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;
}

.image {
    margin: var(--s) 0;
}

.image .dest {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: var(--xs);
}

.image img {
    max-width: 100%;
    max-height: 600px;
    border-radius: var(--box-corner-radius);
}

.image .imageName {
    padding: var(--xxs) 0 var(--xxs) var(--xs);
    border-left: 4px solid var(--color-blue-400);
}


.homePage {
    display: grid;
}


.lastNews .content {
    padding: var(--xxs) var(--m);
    display: flex;
    height: 100%;
    align-items: center;
    box-sizing: border-box;
}

.lastNews .listItems {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.lastNews .listItems .item {
    padding: var(--xs) 0;
    margin: 0;
}

.lastNews .listItems .item article a {
    font-size: 1em;
    font-weight: 400;
    margin-right: 8px;
    text-decoration: none;
    color: var(--color-text);
}

.lastNews .listItems .item article a:hover {
    color: var(--color-blue);
}

.lastNews .listItems .item article .datePublished {
    width: auto;
    display: inline;
    color: var(--color-black-520);
    white-space: nowrap;
}

.lastNews .listItems .item article .readingTime {
    margin-left: 4px;
    display: inline;
    width: auto;
    color: var(--color-black-520);
    white-space: nowrap;
}

.lastNews .listItems .item article .readingTime .i {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-bottom: 3px;
}

.lastPublications {
    grid-area: tech;
}

.lastPublications.tiles {
    margin: 0;
}

.lastPublications .listItems .item:first-of-type .info {
    margin-top: 0;
}

ul.questionList {
    display: block;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.questionList > li {
    margin: 0;
    padding: var(--s) 0;
}

ul.questionList > li:not(:last-of-type) {
    border-bottom: 1px solid var(--color-black-800);
}

ul.questionList > li input {
    display: none;
}

ul.questionList > li label {
    font-size: 1.1em;
    cursor: pointer;
    width: 100%;
    display: block;
    position: relative;
}

ul.questionList > li label:after {
    width: 22px;
    height: 9px;
    display: block;
    top: 30%;
    right: 2%;
    transition: 0.3s;
    content: '';
    opacity: 0.4;
    position: absolute;
    background: url(/data/img/chevron-down.svg) center top no-repeat;
}

ul.questionList > li .answer {
    display: none;
    height: 0;
    opacity: 0;
    color: var(--color-black-500);
    transition: opacity 0.5s;
    transition-delay: 0.3s;
    padding: var(--s) 0;
}

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

ul.questionList > li input:checked + .question {
    color: var(--color-text)
}

.sticky {
    position: sticky;
    top: 0;
    padding: var(--m) 0 0 0;
}