@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
    font-family: 'Roboto';
    font-size: 16px;
    color: #212121;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

button {
    font-family: 'Roboto';
    padding: 0;
    cursor: pointer;
    border: 0;
}

.wrapper {
    position: relative;
    width: 1440px;
    margin: 0 auto;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 10px;
}

em {
    font-style: italic;
}

h1 {
    font-size: 34px;
    font-weight: bold;
    margin-top: 10px;
    line-height: 1.2;
}

h2 {
    font-size: 24px;
    font-weight: bold;
}

h3 {
    font-size: 20px;
    font-weight: bold;
}

a {
    transition: color 0.3s;
    color: #2196f3;
    text-decoration: none;
}

a:hover {
    color: #1976d2;
}

b, strong {
    font-weight: bold;
}

i {
    font-style: italic;
}

p {
    margin: 20px 0;
    line-height: 1.4;
}

.button {
    border: 0;
    background-color: #2196f3;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    padding: 8px 20px;
    color: white;
    margin-top: 15px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button.wot {
    background-color: #ff5722;
}

.button.woth {
    background-color: #009688;
}

.button:hover {
    background-color: #1976d2;
}

.button.wot:hover {
    background-color: #e64a19;
}

.button.woth:hover {
    background-color: #00796b;
}

input:focus {
    box-shadow: 0;
}

blockquote {
    margin: 20px 0;
    background-color: #f5f5f5;
    border-left: 5px solid #2196f3;
    padding: 15px;
    border-radius: 5px;
}

blockquote>*:last-child {
    margin-bottom: 0 !important;
}

.paginator {
    display: flex;
    justify-content: center;
    gap: 3px;
}

.show-more {
    margin: 0;
}

.show-more .button {
    margin: 30px auto 20px auto;
    display: block;
}

.block-title {
    font-size: 20px;
    font-weight: 700;
}

.breadcrumbs-d {
    color: rgba(0,0,0,.54);
    font-size: 12px;
}

.breadcrumbs-d a {
    color: rgba(0,0,0,.54);
}

.breadcrumbs-d a:hover {
    color: #1976d2;
}

.main-col, .main-col-shop-id {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.center-col, .center-col-shop-id {
    width: calc(100% - 580px);
}

.left-col {
    width: 250px;
}

.right-col, .right-col-shop-id {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.aside-block {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.news-start {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #eee;
}

.text-block {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #eee;
}

.news-start h2 {
    margin: 0;
    font-size: 20px;
}

.center-col.site-col {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    border: 1px solid #eee;
}

.center-col.site-col h1 {
    font-size: 28px;
    margin: 10px 0;
    line-height: 1.1;
}

.main-banners {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.main-banners form {
    margin: 0;
}

.body-text {
}

.body-text h1 {
    margin: 0;
    margin-bottom: 30px;
    font-size: 28px;
}

.center-body .body-text {
    border: none;
    padding: 0;
    margin: 0;
}

.center-body img, .body-text img {
    max-width: 100%;
    height: auto;
}

/* Header Start */

.header {
    background-color: white;
    border-radius: 10px;
    border: 2px solid #eeeeee;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    height: 80px;
    padding: 0 20px;
}

.header-top_left {
    display: flex;
    align-items: center;
}

.header-bottom {
    border-top: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.logo {
    display: flex;
    gap: 10px;
}

.logo svg {
    height: 50px;
    fill: #2196f3;
}

.logo-det {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

.logo-det_name {
    font-size: 30px;
    line-height: 1;
    font-weight: bold;
}

.logo-det_text {
    font-size: 10px;
    color: #212121;
    line-height: 1;
    text-transform: uppercase;
}

.header-top_right {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* Header End */

/* Menu Start */

.desk-menu {
    width: fit-content;
    height: 50px;
    padding: 0 20px;
    border-radius: 0 0 10px 10px;
    display: flex;
    gap: 20px;
}

.nav-separator {
    width: 1px;
    height: 100%;
    background-color: #eeeeee;
}

.nav ul li {
    list-style: none;
    margin: 0;
}

.desk-menu .top-menu {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.desk-menu .top-menu ul {
    margin: 0;
    padding: 10px 0;
}

.desk-menu .top-menu_item {
    height: 50px;
    white-space: nowrap;    
    border-bottom: 0px solid #eeeeee;
}

.desk-menu .top-menu_item.parent {
    position: relative;
}

.desk-menu a.top-menu_link {
    color: #231f20;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    line-height: 50px;
    display: block;
}

a.top-menu_link.twitch {
    color: #9147ff;
}

.desk-menu .top-menu_item:hover {
    border-bottom: 2px solid #9e9e9e;
}

.desk-menu .top-menu_item.active {
    border-bottom: 2px solid #2196f3;
}

.desk-menu .top-menu_arrow {
    cursor: pointer;
    padding-right: 0;
}

.desk-menu .top-menu_arrow svg {
    width: 10px;
    height: 10px;
    fill: #231f20;
    transition: 0.3s;
}

.desk-menu .topmenu-level {
    display: none;
    position: absolute;
    left: -10px;
    top: 46px;
    background-color: white;
    z-index: 9;
    min-width: 200px;    
    flex-direction: column;
    border: 2px solid #eeeeee;
    border-top: 2px solid #2196f3;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.desk-menu .top-menu_item.parent:hover .topmenu-level {
    display: flex;
}

.desk-menu .top-menu_item.parent:hover .top-menu_arrow svg {
    transform: rotate(180deg);
    fill: #2196f3;
}

.desk-menu a.topmenu-level_link {
    color: #231f20;
    font-weight: 500;
    font-size: 16px;
    transition: 0.3s;
    width: 100%;
    display: block;
    padding: 5px 10px;
}

.desk-menu .topmenu-level_item:hover > a.topmenu-level_link,
.desk-menu .topmenu-level_item:hover > .top-menu_children > a.topmenu-level_link,
.desk-menu .topmenu-level_item.active > a.topmenu-level_link, 
.desk-menu .topmenu-level_item.active > .top-menu_children > a.topmenu-level_link {
    color: #2196f3;
}

.desk-menu .topmenu-level_item.child {
    position: relative;
}

.desk-menu .topmenu-level_arrow {
    display: flex;
    align-items: center;
    padding: 0 15px;
    cursor: pointer;
}

.desk-menu .topmenu-level_arrow svg{
    width: 10px;
    height: 10px;
    fill: #231f20;
    transform: rotate(-90deg);
    transition: 0.3s;
}

.desk-menu .topmenu-level_item.child:hover>.top-menu_children .topmenu-level_arrow svg {
    transform: rotate(90deg);
    fill: #2196f3;
}

.desk-menu .topmenu-level-2 {
    display: none;
    position: absolute;
    top: -12px;
    left: 100%;
    background-color: white;
    z-index: 2;
    min-width: 200px;    
    flex-direction: column;
    border: 2px solid #eeeeee;
    border-top: 2px solid #2196f3;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.desk-menu .topmenu-level_item.child:hover>.topmenu-level-2 {
    display: flex;
}

.desk-menu .top-menu_children {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.mob-menu_button.close + .mob-menu {
    display: none;
}

.mob-menu_button.open + .mob-menu {
    display: flex;
}

.mob-menu_button.close {
    background-image: url(../../../custom/we/img/mob-menu-open.svg);
}

.mob-menu_button.open {
    background-image: url(../../../custom/we/img/mob-menu-close.svg);
}

.mob-menu_button {
    line-height: 50px;
    font-weight: 600;
    color: #231f20;
    font-size: 16px;
    height: 50px;
    display: block;
    padding-left: 30px;
    margin-left: 15px;
    cursor: pointer;
    background-size: 20px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    transition: 0.3s;
    -webkit-tap-highlight-color: transparent;
}

.mob-menu {
    width: 250px;
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px;
    background: white;
    z-index: 100;
    padding: 10px 0;
    border-top: 2px solid #2196f3;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.mob-menu .top-menu {
    margin: 0;
    padding: 0;
}

.mob-menu .top-menu_children {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mob-menu .top-menu_link, .mob-menu .topmenu-level_link {
    line-height: 30px;
    width: 100%;
    padding-left: 15px;
    color: #212121;
    font-weight: 500;
    display: block;
}

.mob-menu .top-menu_arrow, .mob-menu .topmenu-level_arrow {
    width: 40px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mob-menu .top-menu_arrow svg, .mob-menu .topmenu-level_arrow svg {
    width: 10px;
    transition: transform 0.3s;
}

.mob-menu .top-menu_item.click .top-menu_arrow svg, .mob-menu .topmenu-level_item.click>div>.topmenu-level_arrow svg {
    transform: rotate(180deg);
    fill: #ffffff;
}

.mob-menu .topmenu-level, .mob-menu .topmenu-level-2 {
    display: none;
    flex-direction: column;
    padding: 0;
    background-color: rgb(33 33 33 / 10%);
}

.mob-menu .top-menu_item.click>.topmenu-level,  .mob-menu .topmenu-level_item.click>.topmenu-level-2 {
    display: flex;
}

.mob-menu .top-menu_item.click>.top-menu_children, .mob-menu .topmenu-level_item.click>.top-menu_children {
    background-color: #212121;
}

.mob-menu .top-menu_item.click>.top-menu_children>a, .mob-menu .topmenu-level_item.click>.top-menu_children>a {
    color: white;
}

.top-menu_item #bb {
    color: #2196f3;
}

.top-menu_item #bonus {
    color: #ff5722;
}

.top-menu_item #black {
    color: #9c27b0;
}

.top-menu_item #newyear {
    color: #03a9f4;
}

/* Menu End */

/* Search Start */

.search-top {
    position: relative;
    display: flex;
    justify-content: end;
}

.medium-head .search-top, .low-head .search-top {
    position: initial;
    width: auto;
}

.search-top__button {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    opacity: 1;
    transition: opacity 0.7s ease-out;
}

.search-top__button.active {
    opacity: 0;
    transition: 0.1s ease-in;
}

.search-top__button-icon {
    fill: #2196f3;
    width: 25px;
}

.search-top__button-text {
    font-size: 16px;
    margin-left: 10px;
    color: #231f20;
    line-height: 1;
}

.medium-head .search-top__button-text, .low-head .search-top__button-text {
    display: none;
}

.search-top__form {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;  
    width: 400px;  
    height: 100%;
    visibility: hidden;
    transform: translateX(100px);
    opacity: 0;
}

.search-top__form.active {    
    transition: 0.3s ease-in;
    visibility: visible; 
    transform: translateX(0);
    opacity: 1;
}

.medium-head .search-top__form.active, .low-head .search-top__form.active {
    width: 100%;
    background-color: white;
    z-index: 1;
}

.search-top__form.close {    
    transition: 0.3s ease-out;
}

.search-top__form-input {
    width: 100%;
    height: 35px;
    font-size: 18px;
    padding: 0 10px;
    border: 2px solid #2196f3;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.search-top__form-button {
    display: flex;
    align-items: center;
    border: 0;
    height: 35px;
    background: #2196f3;
    padding: 0 10px;
    border-radius: 0 5px 5px 0;
}

.search-top__form-button .search-top__button-icon {
    fill: white;
    width: 25px;
}

.search-top__form-button p {
    color: white;
}

.search-result-show .search-top__form + .search_result {
    display: none;
}

.search-result-show .search-top__form.active + .search_result {
    position: absolute;
    top: 50px;
    z-index: 100;
    width: 400px;
    right: 0;
    display: flex;
    background: white;
    padding: 15px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.search-all {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.search-all:hover {
    background-color: #1976d2;
    color: white;
}

.search-top__form ~ .search_result .search-page_info, .search-top__form ~ .search_result .search-info_result {
    margin: 0;
}

.search-page_info {
    background-color: white;
    border-radius: 5px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.search-form {
    display: flex;
    margin-top: 20px;
}

.search-form_button {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-form_input {
    width: 100%;
    border: 3px solid #2196f3;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
    line-height: 1;
    padding: 10px 10px;
    outline:none;
}

.search-form_button {
    padding: 5px 10px;
    border-radius: 0 5px 5px 0;
    background-color: #2196f3;
}

.search-form_button-icon {
    width: 20px;
    fill: white;
}

.search-form_button-text {
    font-size: 16px;
    color: white;
}

.search-info_result {
    word-break: break-all;
    margin: 20px 0;
    font-size: 16px;
    font-weight: bold;
}

.search-info_result span {
    color: #2196f3;
}

.search-result_key {
    margin-bottom: 10px;
}

.search-top .news-rows_list {
    flex-direction: column;
}

.search-top .news-item_img {
    display: none;
}

.search-top .news-rows_item {
    width: 100%;
    height: auto;
    box-shadow: none;
    border-radius: 0;
}

.search-top .news-rows_item:hover {
    transform: none;
    box-shadow: none;
}

.search-top .news-rows_item a {
    display: block;
}

.search-top .news-item_info {
    position: relative;
    background: none;
    padding: 0;
    gap: 2px;
}

.search-top .news-info_name {
    color: #212121;
    font-size: 16px;
    transition: 0.3s;
}

.search-top .news-rows_item:hover .news-info_name {
    color: #2196f3;
}

.search-top .news-likedata_text {
    color: #212121;
}

.search-top .news-rating {
    display: none;
}

/* Search End*/

/* Slider Main Start */

.slidermain {
    width: 850px;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
}

.slidermain-slide {
    background-size: cover;
    background-position: center;
}

.slidermain-slide_block {
    width: 100%;
    height: 100%;
    display: flex;
}

.slidermain-block_content {
    width: 100%;
    display: flex;
    gap: 15px;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px;
    background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(33,33,33,1) 100%);
}

.slidermain-content_name {
    color: white;
    font-size: 28px;    
    font-weight: bold;
}

.slidermain-content_text {
    color: white;
}

.slidermain-content_text p {
    margin: 0;
    line-height: 1.4;
}

.slidermain-nav {
    display: flex;
    gap: 5px;
}

.slidermain-nav {
    position: absolute;
    left: 50px;
    bottom: 20px;
    z-index: 1;
}

.slidermain-nav_pagination {
    display: flex;
    gap: 5px;
    align-items: center;
}

.slidermain-pagination_bullet {
    display: block;
    width: 10px;
    height: 10px;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(245,245,245,0) 50%, rgba(0,0,0,0) 100%);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.5;  
      
}

.slidermain-pagination_bullet:hover {
    opacity: 1;
    transition: 0.3s;
}

.slidermain-pagination_bullet-active {
    opacity: 1;
    background: rgb(255,87,34);
    background: radial-gradient(circle, rgba(255,87,34,1) 0%, rgba(255,87,34,1) 50%, rgba(245,245,245,0) 50%, rgba(0,0,0,0) 100%);  
}

.slidermain-nav_prev, .slidermain-nav_next {
    background: none;
    border: none;
    cursor: pointer;
}

.slidermain-nav_prev svg, .slidermain-nav_next svg {
    width: 12px;
    height: 12px;
    fill: white;
    opacity: 0.5;
    transition: 0.3s;
}

.slidermain-nav_prev:hover svg, .slidermain-nav_next:hover svg {
    opacity: 1;
}

.slidermain-nav_prev svg {
    transform: rotate(90deg);
}

.slidermain-nav_next svg {
    transform: rotate(-90deg);
}

/* Slider Main End */

/* Banner main Start */

.bannermain {
    width: 545px;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
} 

.bannermain-block {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

.bannermain-block_info {
    display: flex;
    gap: 15px;
    flex-direction: column;
    justify-content: end;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(33, 33, 33, 1) 100%);
    padding: 20px;
}

.bannermain-info_name {
    font-size: 24px;
    color: white;
    font-weight: bold;
}

.bannermain-info_text {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bannermain-info_text p {
    font-size: 16px;
    font-weight: 400;
    color: white;
    margin: 0;
}

.bannermain-info_link {
    display: flex;
    gap: 10px;
}

.bannermain-link_item {
    font-weight: 500;
    padding: 5px 8px;
    border-radius: 5px;
    transition: 0.3s;
}

/* Banner Main End */

/* News Tabs Start */

.news-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 5px;
    margin-bottom: 20px;
}

.news-tabs .news-tabs_item {
    font-size: 14px;
    background-color: #eeeeee;
    padding: 4px 7px;
    border-radius: 5px;
    transition: 0.3s;
    cursor: pointer;
}

.news-tabs .news-tabs_item:hover {
    background-color: #e0e0e0;
}

.news-tabs .news-tabs_item.active {
    background-color: #212121;
    color: white
}

.news-popular_con .news-con_item, .news-popular_con .news-con_item {
    display: none;
}

.news-start_con .news-con_item, .news-start_con .news-con_item {
    display: none;
}

.news-con_item.open {
    display: block;
}

.news-con_item.open .news-con_button {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.news-con_button .button {
    margin: 0;
    font-size: 16px;
}

.news-con_button a:hover {
    color: white;
}

/* News Tabs End */

/* News Rows Start */

.news-rows_list {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.news-rows_item {
    position: relative;
    width: calc(100% / 3 - 10px);
    height: 270px;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.3s;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.news-rows_item:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.news-item_img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.news-item_type {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 11px;
    font-weight: 500;
    padding: 5px;
    border-radius: 0 0 0 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    text-transform: uppercase;
    background-color: #2196f3;
    color: white;
    display: flex;
    align-items: center;
    gap: 3px;
}

.news-item_type svg {
    width: 11px;
    fill: white;
}

.news-item_game {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
    border-radius: 0 0 0 10px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);    
}

.news-item_game.game-mt {
    background-color: #2196f3;
}

.news-item_game.game-wot {
    background-color: #ff5722;
}

.news-item_game.game-woth {
    background-color: #009688;
}

.news-item_info {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0, 0, 0);
    background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .41) 50%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 0) 100%);   
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 10px;
    gap: 8px;
}

.news-info_name {
    font-size: 18px;
    font-weight: bold;
    color: white;
    line-height: 1.1;
}

.news-text_anons {
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.1;
}

.news-item_likedata {
    display: flex;
    justify-content: space-between;
}

.news-likedata_text {
    font-size: 14px;
    color: #e0e0e0;
}

.news-rating .solo_rating {
    color: #e0e0e0;
    font-size: 14px;
}

.news-rating .rating-votes .like-btn svg {
    stroke: #e0e0e0;
}

.news-rating .rating-votes.liked .like-btn svg {
    fill: #e0e0e0;
    stroke: #e0e0e0;
}

/* News Rows End */

/* News Popular Start */

.news-popular {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.news-popular_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.news-popular_item .news-item_name {
    color: #212121;
    font-size: 15px;
    font-weight: bold;
    transition: 0.3s;
}

.news-popular_item:hover .news-item_name {
    color: #2196f3;
}

.news-popular_item .news-item_data {
    color: #212121;
    font-size: 12px;   
    margin-top: 3px; 
}

/* News Popular End */

/* News List Start */

.news_block {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;    
}

.news-list_block .news-rows_list {
    margin-top: 15px;
}

/* News List End */

/* News Id Start */

.newsid {
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
}

.newsid_firstimg {
    position: relative;
}

.newsid_firstimg-img {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.newsid_firstimg-text {
    position: absolute;
    bottom: 0;    
    width: 100%;
    padding: 20px;
    padding-top: 100px;
    background: linear-gradient(0deg, rgba(33,33,33,1) 0%, rgba(33,33,33,0) 100%);
}

.newsid_noimg-text {
    border-bottom: 2px solid #eeeeee;
    padding: 20px;
}

.newsid_firstimg-text .breadcrumbs-d, .newsid_firstimg-text .breadcrumbs-d a {
    color: white;
}

.newsid_noimg-text .breadcrumbs-d, .newsid_noimg-text .breadcrumbs-d a {
    color: #212121;
}

.newsid_firstimg-text h1 {
    color: white;
    font-size: 30px;
    margin: 10px 0;
    line-height: 1.1;
}

.newsid_noimg-text h1 {
    font-size: 30px;
    margin: 10px 0;
    line-height: 1.1;
}

.newsid_text {
    margin: 20px; 
    font-size: 16px;
    line-height: 1.5;
}

.newsid_text h2 {
    margin: 30px 0 10px 0;
    line-height: 1.2;
}

.newsid_text h3 {
    margin-top: 20px;
}

.newsid_text p {
    margin: 0 0 20px 0;
}

.newsid_text>p:last-child {
    margin: 0;
}

.newsid_text iframe {
    display: block;
    margin: 0 auto;
}

.newsid_allimg {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px;
}

.newsid_allimg a {
    max-width: calc(100% / 2 - 5px);
    transition: 0.3s;
    overflow: hidden;
}

.newsid_allimg a:hover {
    transform: scale(1.01);
}

.newsid_allimg img {
    max-width: 100%;
    height: auto;
    user-select: none;
    border-radius: 10px;
}

.newsid .tags-d {
    margin: 20px;
}

.newsinfo {    
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
    margin-top: 10px;
    font-size: 14px;
}

.newsinfo.black {
    color: #212121;
}

.newsinfo__counter {
    display: flex;
    gap: 5px;
    align-items: center;
}

.newsinfo__counter-icon {
    fill: white;
    width: 18px;
}

.newsinfo.black .newsinfo__counter-icon {
    fill: #212121;
}

.newsid-bottom {    
    color: #212121;
    padding: 20px;
    background-color: #fafafa;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.newsid-share {
    display: flex;
    gap: 5px; 
    align-items: center;
    margin-bottom: 10px;
}

.newsid-share span {
    font-weight: bold;
}

.newsid-motivation p {
    margin: 0;
}

.newsid .prevnext {
    border-top: 1px solid #eee;
    padding: 0 20px;
    padding-top: 20px;
}

.newsid .show_all {
    display: block;
    margin: 20px;
    text-align: center;
    font-size: 14px;
}

.newsid .show_all:hover {
    color: white;
}

.news-rel {
    padding: 0 20px;
}

.news-rel .block-title {
    margin-bottom: 10px;
}

.news-show {
    padding: 0 20px;
    margin-top: 20px;
}

.news-show .block-title {
    margin-bottom: 10px;
}

/* News Id End */

/* News List Start */

.news-cat_children {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.news-children {
    font-size: 14px;
    background-color: #eee;
    color: #212121;
    padding: 4px 7px;
    border-radius: 5px;
    transition: 0.3s;
}

.news-children:hover {
    background-color: #e0e0e0;
    color: #212121;
}

/* News List End */

/* News Imp Start */

.news-imp {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #eee;
}

.news-imp_con {
    min-height: 500px;
}

.news-imp_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.news-imp_item .news-item_name {
    color: #212121;
    font-size: 15px;
    font-weight: bold;
    transition: 0.3s;
}

.news-imp_item:hover .news-item_name {
    color: #2196f3;
}

.news-imp_item .news-item_data {
    color: #212121;
    font-size: 12px;  
    margin-top: 3px;  
}

/* News Imp End */

/* News Prev Next Start */

.prevnext {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.prevnext-prev, .prevnext-next {
    display: flex;
    flex-direction: column;
    color: #212121;
}

.prevnext-next {    
    align-items: end;
}

.prevnext-prev_but, .prevnext-next_but {
    display: flex;
    gap: 5px;
}

.prevnext-prev_but span, .prevnext-next_but span {
    font-size: 12px;
    
}

.prevnext-prev_text, .prevnext-next_text {
    font-size: 12px;
    font-weight: bold;
    margin-top: 3px;
}

.prevnext-next_text {
    text-align: right;
}

.prevnext-prev, .prevnext-next {
    width: 100%;
}

.prevnext-prev svg, .prevnext-next svg {
    width: 12px;
    fill: #212121;
}

.prevnext-prev:hover svg, .prevnext-next:hover svg {
    fill: #1976d2;
}

.prevnext-prev svg {
    transform: rotate(180deg);
}

/* News Prev Next End */

/* Tags Start */

.tags {
    margin: 20px;
    display: flex;
    gap: 5px;
    align-items: center;
}

.tag {
    background: #2196f3;
    border-radius: 5px;
    color: white;
    padding: 3px 5px;
    transition: 0.3s;
}

.tag:hover {
    background: #1976d2;
    color: white;
}

/* Tags End */

/* Clauses Id Start */

.clauses-col {
    width: calc(100% - 315px);
    background-color: white;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
}

.clauses-id_head {
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: cover;
}

.clauses-head_info {
    width: 100%;
    height: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: end;
    padding: 20px;
    background: rgb(33,33,33);
    background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(33,33,33,1) 100%);
}

.clauses-head_info h1 {
    margin: 0;
    font-size: 32px;
    width: 80%;
    line-height: 1.1;
}

.clauses-head_info .breadcrumbs-d, .clauses-head_info .breadcrumbs-d a {
    color: white;
}

.clauses-info {    
    display: flex;
    align-items: center;
    gap: 20px;
    color: white;
    font-size: 14px;
}

.clauses-info .rating-votes .like-btn svg {
    fill: white;
}

.clauses-info  .count-like {
    color: white;
}

.clauses-info_counter {
    display: flex;
    gap: 5px;
    align-items: center;
}

.clauses-counter_icon {
    fill: white;
    width: 18px;
}

.clauses-id_text {
    line-height: 1.4;
    word-break: break-word;
    margin: 0 20px;
}

.clauses-id_text p {
    margin: 20px 0;
}

.clauses-id_text h2 {
    margin-top: 30px;
}

.clauses-id_text h3 {
    margin-top: 20px;
}

.clauses-id_text img {
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 5px;
}

.clauses-id_text figure img {
    margin: 0;
}

/* Clauses Id End */

/* Clauses Rows Start */

.clauses-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.clauses-list_item {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.clauses-item_img {    
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.clauses-item_info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    background: rgb(33,33,33);
    background: linear-gradient(0deg, rgba(33,33,33,0.8547794117647058) 0%, rgba(33,33,33,0.4990371148459384) 60%, rgba(33,33,33,0) 100%);
}

.clauses-info_name {
    margin: 0;
    font-size: 20px;
    color: white;
}

.clauses-info_anons {
    font-size: 14px;
    color: #eeeeee;
}

.clauses-info_anons p {
    margin: 0;
}

.clauses-info_anons strong {
    font-weight: normal;
}

.clauses-info_date {
    font-size: 14px;
    color: #eeeeee;
}

/* Clauses Rows End */

/* Clauses Rows Block Start */

.clauses-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.clauses-list_item {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.clauses-item_img {    
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.clauses-item_info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    background: rgb(33,33,33);
    background: linear-gradient(0deg, rgba(33,33,33,0.8547794117647058) 0%, rgba(33,33,33,0.4990371148459384) 60%, rgba(33,33,33,0) 100%);
}

.clauses-info_name {
    margin: 0;
    font-size: 20px;
    color: white;
}

.clauses-info_anons {
    font-size: 14px;
    color: #eeeeee;
}

.clauses-info_anons p {
    margin: 0;
}

.clauses-info_anons strong {
    font-weight: normal;
}

.clauses-info_date {
    font-size: 14px;
    color: #eeeeee;
}

/* Clauses Rows Block End */

/* Clauses Rows Rel Start */

.clauses-rel {
    margin: 0 20px;
}

.clauses-rel_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.clauses-list_item {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.clauses-item_img {    
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.clauses-item_info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    background: rgb(33,33,33);
    background: linear-gradient(0deg, rgba(33,33,33,0.8547794117647058) 0%, rgba(33,33,33,0.4990371148459384) 60%, rgba(33,33,33,0) 100%);
}

.clauses-info_name {
    margin: 0;
    font-size: 20px;
    color: white;
}

.clauses-info_anons {
    font-size: 14px;
    color: #eeeeee;
}

.clauses-info_anons p {
    margin: 0;
}

.clauses-info_anons strong {
    font-weight: normal;
}

.clauses-info_date {
    font-size: 14px;
    color: #eeeeee;
}

/* Clauses Rows Rel End */

/* Rating Start */

.rating-votes {
	display: flex;
}

.rating-votes .vote-like svg {
	stroke: green;
	fill: transparent;
	width: 18px;
	height: 18px;
}

.rating-votes .vote-like.liked-comment svg {
	stroke: green;
	fill: green;
}

.rating-votes .vote-dislike {
	margin-left: 10px;
}

.rating-votes .vote-dislike svg {
	stroke: red;
	fill: white;
	width: 18px;
	height: 18px;
}

.rating-votes .vote-dislike.disliked-comment svg {
	stroke: red;
	fill: red;
}

.count-like-comment, .count-dislike-comment {
	margin-left: 1px;
}

.rating-votes .like-btn svg {
	width: 17px;
	height: 17px;
	stroke: #212121;
	fill: transparent;
}

.newsid_firstimg-text .rating-votes .like-btn svg {
	stroke: white;
}

.rating-votes.liked .like-btn svg {
	stroke: #212121;
	fill: #212121;
}

.newsid_firstimg-text .rating-votes.liked .like-btn svg {
	stroke: white;
	fill: white;
}

.newsid_firstimg-text .count-like {
	color: white;
}

.solo_rating {
    display: flex;
	align-items: center;
    gap: 3px;
    color: #212121;
}

.like-comment, .dislike-comment, .solo_rating {
	cursor: pointer;
}

.solo_rating.liked, .liked .like-comment, .liked .dislike-comment {
	cursor: default;
}

/* Rating End */

/* Comments Start */

.comments {
    margin-top: 20px;
    padding: 0 20px;
}

.comments-list {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
} 

.comments-nologin {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 50px;
}

.comments-nologin span {
    cursor: pointer;
    color: #2196f3;
    transition: color 0.3s;
}

.comments-nologin span:hover {
    color: #1976d2;
}

.comment-branch_level {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 25px;
    background: url(../custom/we/img/arrow-level.svg) no-repeat scroll 2px 2px transparent;
}

.comment-branch {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.comment-branch_item {
    background-color: whitesmoke;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}

.comment-detail {
    display: flex;
    gap: 10px;
    align-items: center;
}

.comment-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.comment-info_avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-size: cover;
}

.comment-info_noavatar {    
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-size: cover;
    background-color: #231f20;
}

.comment-info_name a {
    color: #2196f3;
    font-weight: bold;
    font-size: 14px;
}

.comment-info_name>span {
    color: #231f20;
    font-weight: bold;
}

.comment-info-date-block {
    display: flex;
    gap: 10px;
}

.comment-info-date {
    font-size: 12px;
    color: #757575;
}

.comments-info-role {
    font-size: 12px;
    font-weight: bold;
    color: #2196f3;
}

.comment-text {
    margin-top: 10px;
    line-height: 1.5;
}

.comments-params img {
    margin: 10px 0 5px 0;
    max-height: 300px;
    max-width: 100%;
}

.comment-answer {    
    margin-top: 10px;
}

.comment-answer_button {
    display: flex;
    gap: 20px;
}

.comment-answer_button button {
    background: none;
    border: none;
    color: #2196f3;
    font-size: 14px;
    border-bottom: 1px dashed;
}

.comments-form_title {
    font-size: 18px;
    color: #231f20;
    font-weight: bold;
}

.comments-form textarea {
    font-size: 16px;
    margin-top: 10px;
    width: 100%;
    border-radius: 5px;
    min-height: 100px;
    border: 1px solid #bdbdbd;
    padding: 10px;
    font-family: Roboto;
}

.comments-form .privacy_field {
    font-size: 12px;
    margin-top: 10px;
}

.comments-form .button {
    margin-top: 10px;
}

.comment-answer_form .comments-form {
    padding: 0;
    background: none;
    border-radius: 0;
}

.comments-form input[type="text"] {
    border: 1px solid #bdbdbd;
    border-radius: 5px;
    padding: 5px 10px;
}

.comments-form .captcha {
    margin-top: 10px;
}

/* Comments End */

/* Votes Start */

.votes_block {
    margin: 0 0 25px;
}

.votes_block h2 {
    padding: 0 10px;
}

.votes_question {
    margin: 0 0 15px;
    padding: 0 10px;
}

.votes_form_answer {
    padding: 0 10px;
}

.votes_block .button_wrap {
    padding: 0 0 0 7px;
}

.votes_block .button {
    padding: 0 7px 0 0;
}

*+html .votes_block .button_wrap {
    padding: 0 0 0 5px;
}

*+html .votes_block .button {
    padding: 0 5px 0 0;
    font-size: 12px;
}

.votes_block .votes_wrap {
    padding: 0 0 0 7px;display: inline-block;margin: 0;
}

.votes_block .votes_result {
    height: 36px;
    padding: 0 7px 0 0;
    border: 0;
    color: #142A35;
    margin: 0;
    font-weight: bold;
}

*+html .votes_block .votes_wrap {
    padding: 0 0 0 3px;
}

*+html .votes_block .votes_result {
    padding: 0 3px 0 0;
    font-size: 12px;
}

.votes_block .votes_wrap, .votes_block .button_wrap {
    margin: 10px 0 0 0;
}

.votes_persent {
    font-weight: bold;
    display: inline;
    padding-left: 10px;
}

.votes_line_count {
    background: #eeeeee;
    height: 16px;
    text-align: center;
    color: #212121;
    line-height: 16px;
    font-size: 12px;
}

.votes_line {
    background: #2196f3;
    height: 16px;
    margin-top: -16px;
}

.votes_answer {
    font-size: 14px;
    margin-bottom: 10px;
}

.votes_count {
    font-size: 14px;
    font-weight: bold;
}

.button-vote {
    display: inline-block;
    text-align: center;
    border: 0;
    background: #FF5722;
    color: white;
    padding: 7px 12px;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    transition: 0.3s;cursor: pointer;
}

.button-votes {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.news-text .votes_form {
    background: whitesmoke;
    padding: 1px 20px;
    margin-top: 10px;
}

/* Votes End */

/* Registration Start */

.reg-block {
    max-width: 500px;
    margin: 0 auto;
}

.login-top {
    margin-left: 12px;
}

.login-top__button {
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.login-top__button-icon {
    fill: #2196f3;
    width: 25px;
}

.login-top__button-name {
    margin: 0;
    margin-left: 10px;
    font-size: 16px;
    color: #231f20;
    line-height: 1;
}

.login {
    border-radius: 10px;
    width: 380px;
}

.login-title, .reg-title {
    text-align: center;
}

.login-field, .reg-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 20px 0 10px 0;
}

.login-field input, .reg-field input {
    border: 2px solid #bdbdbd;
    border-radius: 5px;
    font-size: 18px;
    padding: 5px 15px;
    transition: border 0.3s;
}

.login-field input:focus, .reg-field input:focus {
    border: 2px solid #231f20;
}

.login-field .error_input, .reg-field .error_input, .login-field .error_input:focus, .reg-field .error_input:focus {
    border: 2px solid #2196f3;
}

.login-field .errors, .reg-field .errors {
    background-color: #2196f3;
    border-radius: 5px;
    color: white;
    padding: 10px 20px;
    z-index: 1;
    line-height: 1.2;
    width: 100%;
}

.login-field .errors svg, .reg-field .errors svg {
    position: absolute;
    top: -7px;
    left: 19px;
    width: 9px;
    transform: rotate(180deg);
    fill: #2196f3;
}

.login-field_text, .reg-field_text {
    font-size: 16px;
    color: #757575;
}

.login-option {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.login-nmc, .reg-subscribe {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.reg-subscribe {
    margin: 20px 0;
}

.login-nmc input, .reg-subscribe input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.login-nmc label, .reg-subscribe label {
    font-size: 16px;
    cursor: pointer;
    color: #757575;
}

.login-button, .reg-button, .login-reg_button {
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
    margin: 0;
}

.login-button:hover {
    background-color: #1976d2;
}

.reg .login-button {
    background-color: #424242;
}

.reg .login-button:hover {
    background-color: #231f20;
}

.login-hr {
    border-top: 1px solid #bdbdbd;
    margin: 10px 30px;
}

.login-reg_button {
    display: block;
    background-color: #424242;
    text-align: center;
}

.login-reg_button:hover {
    color: white;
    background-color: #231f20;
}

.reg-button {
    background-color: #2196f3;
}

.reg-button:hover {
    background-color: #1976d2;
}

.reg {
    border-radius: 10px;
    width: 380px;
}

.reg-success {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: white;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
}

.reg-success.active {
    opacity: 1;
    visibility: visible;
}

.reg-success_mes {
    width: 100%;
    height: calc(100% - 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.reg-success_icon {
    width: 150px;
}

.reg-success_icon .cls-1 {
    fill: #231f20;
}

.reg-success_icon .cls-2 {
    fill: #2196f3;
}

.reg-success_text {
    font-weight: bold;
    font-size: 20px;
    color: #231f20;
}

.reg-success_load {
    width: 100%;
    height: 8px;
    position: absolute;
    left: -100%;
    background-color: #2196f3;
    transition: left 1.6s;
}

.reg-success.active .reg-success_load {
    left: 0;
}

.reg-privacy {
    font-size: 12px;
    line-height: 1.2;
    color: #757575;
    margin-top: 10px;
}

.profile {
    display: flex;
    align-items: center;
    position: relative;
    top: 0;
    left: 0;
    user-select: none;
}

.profile-block {
    padding: 12px;
}

.profile-block.active {
    position: absolute;  
    top: -4;
    z-index: 2;
    background-color: #f5f5f5;
    border-radius: 5px;  
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.profile-min {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 15px;
}

.profile-min_img {
    min-width: 40px;
    height: 40px;
    background-size: cover;
    border-radius: 5px;
    position: relative;
}

.profile-img_notification {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #f44336;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    width: 17px;
    height: 17px;
    line-height: 1;    
}

.profile-min_name {
    max-width: 250px;
    min-width: 90px;
    max-height: 54px;
    overflow: hidden;
    word-break: break-all;
    font-size: 16px;
}

.profile-min_arrow svg {
    width: 11px;
    transition: transform 0.3s;
}

.profile-block.active .profile-min_arrow svg {
    transform: rotate(180deg);
}

.profile-block_menu {
    display: none;
    border-top: 1px solid #bdbdbd;
    padding: 0;
    padding-top: 12px;
    margin: 0;
    margin-top: 12px;
    list-style: none;
    z-index: 1;
    flex-direction: column;
    gap: 15px;
}

.profile-block.active .profile-block_menu {
    display: flex;

}

.profile-block_menu li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-block_menu li svg {
    fill: #9e9e9e;
    width: 16px;
    transition: color 0.3s;
}

.profile-block_menu li a {
    color: #231f20;
}

.profile-block_menu li:hover a {
    color: black;
}

.profile-block_menu li:hover svg {
    fill: #2196f3;
}

/* Registration End */

/* Userpage Start */

.userpage {
    margin-top: 20px;
}

.userpage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #bdbdbd;
}

.userpage-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.userpage-info_avatar figure {
    margin: 0;
}

.userpage-info_avatar img {
    border-radius: 5px;;
}

.userpage-info_nikname {
    font-size: 20px;
    font-weight: bold;
    word-break: break-all;
}

.userpage-block {
    display: flex;
    gap: 20px;
}

.userpage-menu {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.userpage-menu li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.userpage-menu li svg {
    fill: #9e9e9e;
    width: 18px;
    transition: 0.3s;
}

.userpage-menu li a {
    color: #231f20;
    font-size: 18px;
}

.userpage-menu li:hover a, .userpage-menu li.active a {
    color: black;
}

.userpage-menu li:hover svg, .userpage-menu li.active svg {
    fill: #2196f3;
}

.userpage-hr {
    width: 1px;
    display: flex;
    border-left: 1px solid #bdbdbd;
}

.userpage-params {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.userpage-params_info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 15px;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #bdbdbd;
}

.userpage-param {
    display: flex;
    gap: 5px;
    font-size: 16px;
}

.userpage-param_name {
    font-weight: bold;
    font-size: 18px;
}

.userpage-mes {
    border-radius: 10px;
    width: 500px;
}

.userpage-mes_header {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    word-break: break-all;
}

.usersettings {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.usersettings-menu {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.usersettings-menu li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.usersettings-menu li svg {
    fill: #9e9e9e;
    width: 18px;
    transition: 0.3s;
}

.usersettings-menu li a {
    color: #231f20;
    font-size: 18px;
}

.usersettings-menu li:hover a, .usersettings-menu li.active a {
    color: black;
}

.usersettings-menu li:hover svg, .usersettings-menu li.active svg {
    fill: #2196f3;
}

.usersettings-hr {
    width: 1px;
    display: flex;
    border-left: 1px solid #bdbdbd;
}

.usersettings-block {
    width: 100%;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.usersettings-block_password {
    margin-top: 30px;
    margin-bottom: 30px;
}

.usersettings-block h3 {
    margin-bottom: 15px;
}

.usersettings-block_basic h3:first-child {
    margin-top: 0;
}

.usersettings-basic_avatar {
    margin-bottom: 15px;
}

.usersettings-avatar_block {
    display: flex;
    gap: 10px;
}

.usersettings-avatar_img img {
    border-radius: 5px;
}

.usersettings-avatar_hr {
    width: 1px;
    background-color: #757575;
    display: flex;
}

.usersettings-avatar_edit {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.usersettings-avatar_edit.load {
    justify-content: center;
}

.usersettings-avatar_load, .usersettings-avatar_delete {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #231f20;
    background-color: white;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
}

.usersettings-avatar_load:hover, .usersettings-avatar_delete:hover {
    color: #2196f3;
}

.usersettings-avatar_load svg {
    fill: none;
    stroke: #231f20;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 66.67px;
    width: 16px;
    transition: 0.3s;
}

.usersettings-avatar_delete svg  {    
    fill: none;
    stroke: #231f20;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 63px;
    width: 16px;
    transition: 0.3s;
}

.usersettings-avatar_load:hover svg, .usersettings-avatar_delete:hover svg {
    stroke: #2196f3;
}

.usersettings-avatar_text {
    margin-top: 10px;
    font-size: 12px;
    color: #231f20;
}

.usersettings-field {
    margin-bottom: 15px;
    position: relative;
}

.usersettings-field input[type=text], .usersettings-field input[type=password], .usersettings-field input[type=email], .usersettings-field select, .usersettings-field textarea {
    border: 2px solid #bdbdbd;
    border-radius: 5px;
    font-size: 16px;
    padding: 5px 10px;
    transition: 0.3s;    
}

.usersettings-field textarea {
    width: 100%;
    min-height: 95px;
    height: 95px;   
    font-family: 'Roboto';
    transition: none;
}

.usersettings-field_name {
    font-size: 16px;
    margin-bottom: 5px;
    color: #757575;
}

.usersettings-field .error_input, .usersettings-field .error_input:focus {
    border: 2px solid #2196f3;
}

.usersettings-field .errors {
    font-size: 16px;
    background-color: #2196f3;
    border-radius: 5px;
    color: white;
    padding: 10px 20px;
    z-index: 1;
    line-height: 1.2;
    position: absolute;
    top: 107%;
}

.usersettings-field .errors svg {
    position: absolute;
    top: -7px;
    left: 19px;
    width: 9px;
    transform: rotate(180deg);
    fill: #2196f3;
}

.usersettings-submit {
    overflow: hidden;
}

.usersettings-submit.active {
    position: relative;
    background-color: #4caf50;
}

.usersettings-submit_load {
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #2e7d32;    
    transition: 1.3s;
}

.usersettings-submit span {
    position: relative;
    z-index: 1;
}

.usersettings-submit.active .usersettings-submit_load {
    left: 0;
}

@media (max-width: 700px) {
   
}

@media (max-width: 450px) {
   
}

/* userpage End */

/* Messages Start */

.message {
    margin-top: 20px;
}

.message-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.message-info_avatar img {
    border-radius: 5px;;
}

.message-info_nikname {
    font-size: 20px;
    font-weight: bold;
}

.message-block {
    display: flex;
    gap: 20px;
}

.message-menu {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-menu li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.message-menu li svg {
    fill: #9e9e9e;
    width: 18px;
    transition: 0.3s;
}

.message-menu li a {
    color: #231f20;
    font-size: 18px;
}

.message-menu li:hover a, .message-menu li.active a {
    color: black;
}

.message-menu li:hover svg, .message-menu li.active svg {
    fill: #2196f3;
}

.message-hr {
    width: 1px;
    display: flex;
    border-left: 1px solid #e0e0e0; 
}

.message-list {
    width: 100%;
    line-height: 1.2;
}

.message-items {
    font-size: 18px;
    line-height: 1;
}

.message-item {
    background-color: #fafafa;
    border-radius: 5px;
    padding: 15px;
    transition: 0.3s;
    margin-bottom: 10px;
    width: 100%;
    display: block;
}

.message-item:hover {
    background-color: #f5f5f5;
}

.message-item_header {
    display: flex;
    justify-content: space-between;  
    align-items: center;
    margin-bottom: 15px;
}

.message-header_right {
    display: flex;
    gap: 15px;
    align-items: center;
}

.message-header_avatar img {
    border-radius: 5px;
}

.message-header_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.message-header_name {
    color: #231f20;
    font-weight: 500;
    word-break: break-all;
    font-size: 14px;
}

.message-header_time {
    font-size: 12px;
    color: #757575;
}

.message-item_text {
    font-size: 16px;
    color: #231f20;
    line-height: 1.2;
    word-break: break-all;
}
.message-left_unread {
    color: #2196f3;
    margin-left: 10px;
}

.message-send_field .bbcode_toolbar {
    background-color: #eeeeee;
    padding: 10px 15px;
    border-radius: 5px 5px 0 0;
}

.message-send_field textarea {
    width: 100%;
    min-height: 150px;
    margin-bottom: 10px;
    font-size: 16px;
    padding: 10px 15px;
    font-family: 'Roboto';
    border: 2px solid #eeeeee;
    border-top: 0;
    border-radius: 0 0 5px 5px;
}

.chat {
    background-color: white;
    border-radius: 10px;
    margin-top: 20px;
}

.chat-info {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.chat-info_avatar img {
    border-radius: 5px;;
}

.chat-info_nikname {
    font-size: 20px;
    font-weight: bold;
}

.chat-block {
    display: flex;
    gap: 20px;
}

.chat-menu {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
}

.chat-menu li {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-menu li svg {
    fill: #9e9e9e;
    width: 18px;
    transition: 0.3s;
}

.chat-menu li a {
    color: #231f20;
    font-size: 18px;
}

.chat-menu li:hover a, .chat-menu li.active a {
    color: black;
}

.chat-menu li:hover svg, .chat-menu li.active svg {
    fill: #2196f3;
}

.chat-hr {
    width: 1px;
    display: flex;
    border-left: 1px solid #e0e0e0; 
}

.chat-list {
    width: 100%;
}

.chat-list_mes {
    height: auto;
    max-height: 591px;   
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.chat-list_mes.scroll {
    overflow: auto; 
    padding-right: 20px;
}

.chat-list_mes::-webkit-scrollbar {
    width: 6px;
    cursor: pointer;
}
.chat-list_mes::-webkit-scrollbar-thumb {
    background: #616161;
    border-radius: 5px;
    
}
.chat-list_mes::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 5px;
}

.chat-list_mes form.show-more.ajax {
    width: 100%;
    height: 3px;
    background-color: #2196f3;
    margin: 15px 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-list_mes .button.button.js_paginator_more_button {
    background: white;
    color: #2196f3;
    font-size: 14px;
    text-transform: uppercase;
}

.chat-left_avatar {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.chat-mes_item {
    display: flex;
    gap: 10px;
}

.chat-right_head {
    display: flex;
    gap: 5px 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.chat-head_name {
    font-weight: bold;
    font-size: 16px;
    color: #2196f3;
    word-break: break-all;
}

span.chat-head_name {
    color: #231f20;
}

.chat-head_date {
    font-size: 14px;
    color: #757575;    
}

.chat-right_text {
    margin-top: 9px;
    line-height: 1.2;
    word-break: break-all;
}

/* Messages End */

/* Shop Start */

.shop-id {
    margin-top: 10px;
}

.shop-id_top {
    display: flex;
    gap: 30px;
}

.shop-id_img {
    width: 500px;
    overflow: hidden;
}

.shop-img_allblock {
    position: relative;
}

.shop-img_all {
    width: 500px;
    height: 500px;
    display: flex;
}

.shop-img_item img {
    width: auto;
    height: 100%;
    border-radius: 10px;
}

.arrow-left, .arrow-right {
    width: 36px;
    height: 36px;
    background-color: #2196f3;
    border: 0;
    border-radius: 50%;
    padding: 8px;
    box-shadow: none;
    fill: white;
    transition: 0.3s;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    position: absolute;
    top: calc(50% - 18px);
}

.arrow-left:hover, .arrow-right:hover {
    background-color: #1976d2;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

.arrow-left svg {
    margin-right: 2px;
}

.arrow-right svg {
    transform: rotate(180deg);
    margin-left: 2px;
}

.shop-id_info {
    width: calc(100% - 530px);
}

.preview-block {
    margin-top: 10px;
    position: relative;
    padding: 0 35px;
}

.preview-img_block {
    display: flex;
}

.preview-img {
    cursor: pointer;
}

.preview-img img{
    border: 2px solid #e0e0e0;
    transition: 0.3s;
    border-radius: 10px;
    padding: 5px;
}

.preview-img:hover img {
    border: 2px solid #9e9e9e;
}

.preview-img.swiper-slide-thumb-active img, .preview-img.swiper-slide-thumb-active:hover img{
    border: 2px solid #2196f3;
}

.previews-left, .previews-right {
    width: 35px;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    border: 0;
}

.previews-left {
    left: 0px;
}

.previews-right {
    right: 0px;
}

.previews-left svg, .previews-right svg{
    width: 20px;
    height: 30px;
    background-color: #2196f3;
    border: 0;
    fill: white;
    padding: 5px 0;
    transition: 0.3s;
    border-radius: 5px;
}

.previews-left:hover svg, .previews-right:hover svg {
    background-color: #1976d2;
}

.previews-right svg{
    transform: rotate(180deg);
}

.shop-id_price {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
}

.shop-id .counter-view {
    margin-top: 20px;
}

.tab {
    display: none;
}

.tab_active {
    display: block;
}

.shop-id .tabs {
    margin-top: 30px;
    border-top: 3px solid #eeeeee;
    padding-top: 20px;
}

.tabs__tabnames {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tabname {
    font-size: 20px;
    color: #212121;
    cursor: pointer;
    font-weight: bold;
}

.tabname_active {
    color: #2196f3;
}

.tabs__stack {
    margin-top: 20px;
}

.tabs__stack p {
    margin: 20px 0;
}

.tabs__stack h2 {
    margin-top: 30px;
}

.tabs__stack h3 {
    margin-top: 20px;
}

.tabs__stack ul {
    margin: 20px 0;
    padding-left: 40px;
    list-style: disc;
}

.tabs__stack ul ul {
    margin: 0;
    padding-left: 40px;
    list-style: circle;
}

.tabs__stack ol {
    margin: 20px 0;
    padding-left: 40px;
    list-style: auto;
}

.tabs__stack ol ol {
    margin: 0;
    padding-left: 40px;
    list-style: auto;
}

.shop-prime {
    margin-top: 20px;
}

.shop-prime_list {
    display: flex;
    gap: 30px 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.shop-prime_row {
    width: calc(100% / 5 - 20px);
    display: flex;
    flex-direction: column;
}

.shop-prime_list.row-4 .shop-prime_row {
    width: calc(100% / 4 - 15px);
}

.shop-prime_list.row-3 .shop-prime_row {
    width: calc(100% / 3 - 13.5px);
}

.shop-prime_list.row-2 .shop-prime_row {
    width: calc(100% / 2 - 10px);
}

.shop-prime_list.row-1 .shop-prime_row {
    width: 100%;
}

.shop-prime_row:hover .shop-row_name {
    color: #2979ff;
}

.shop-prime_img img{
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.shop-row_name {
    font-size: 14px;
    line-height: 1.2;
    color: #212121;
    margin: 10px 2px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.shop-row_buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shop-row_first-price, .shop-row_second-price {
    display: flex;
    font-weight: bold;
}

.shop-row_second-price {
    margin-top: 3px;
}

.shop-row_price .price {
    margin-right: 5px;
}

.shop-row_button {
    background-color: #2196f3;
    border-radius: 5px;
    padding: 10px 20px;
    font-weight: bold;
    color: white;
    display: inline-block;
    transition: background-color 0.3s;
}

.shop-row_button:hover {
    background-color: #1976d2;
    color: white;
}

/* Shop End */

/* Footer Start */

.footer {
    background-color: white;
    border-radius: 10px 10px 0 0;
    border: 2px solid #eeeeee;
    border-bottom: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.footer-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

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

.footer li {
    margin-top: 5px;
}

.footer a {
    color: #222222;
}

.footer a:hover {
    color: #1976d2;
}

.footer-info_email div {
    margin-bottom: 5px;
}

.footer-about a {
    margin-top: 5px;
    display: block;
}

/* Footer End */

.devoloper_tech {
    position: fixed;
    bottom: 0;
    background: #ff4a0b;
    width: 100%;
    text-align: center;
    padding: 3px 0;
    font-size: 12px;
    z-index: 9999;
}

.devoloper_tech a {
    color: white;
}

.privacy_policy {
    width: 100%;
    text-align: center;
    background: #212121;
    padding: 15px;
    color: white;
    position: fixed;
    bottom: 0;
    line-height: 1.6;
}

.privacy_policy a:hover {
    text-decoration: underline;
}

.privacy_policy .button {
    background-color: #2196f3;
    padding: 0px 7px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 0px;
    margin-left: 20px;    
    transition: background-color 0.3s;
    display: inline-block;    
}

.privacy_policy .button:hover {
    background-color: #1976d2;
}

/* Рекламные баннеры */

.bs-r {
    margin: 15px 0 15px 0;
}

.bs-r:first-child {
    margin: 0 0 15px 0;
}

.bs-r:last-child {
    margin: 15px 0 0 0;
}

.right-col .bs-r {
    margin: 0;
}

.newsid .bs-r {
    margin: 20px;
}

.newsid_other {
    padding: 20px;
}

.newsid_other h3 {
    margin-top: 0;
}

.newsid_other-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Рекламные баннеры */

form[loading="true"] {
	display: inline-block;
    background: url(../img/loader.gif) no-repeat center;
    min-width: 50px;
    min-height: 50px;
	padding: 8px 0px 0px 50px;
    margin: 0px;
    margin-top: 20px;
    cursor: progress;
    width: 100%;
    text-align: center;
}

/* Popup Start */

.modal-we_popup {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.8);
    display: block;
    z-index: 800;
}

.modal-block-we_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.modal-img-we_popup {
    background-image: url(../img/vk.png);
    background-size: 640px 450px;
    width: 640px;
    height: 450px;
}

.modal-block-close-we_popup {
    background: url(../img/close.svg) center no-repeat;
    background-color: white;
    padding: 15px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-size: 15px;
    position: absolute;
    z-index: 101;
    top: 0px;
    right: 0px;
    border-radius: 5px;
}

.bbcode_smiles {
    float: left;
    border: 1px solid #CCC;
    margin: 1px;
    background: #fff url(/modules/bbcode/smiles/smile.gif) no-repeat center;
    width: 25px;
    height: 27px;
}

.bbcode_smiles div {
    position: absolute;
    border: 1px solid #CCC;
    background: #fff;
    margin: 29px 0 0 -1px;
    display: none;
}

.bbutton {
    border: 1px solid #CCC;
    margin: 1px;
    padding: 2px;
}

/* Popup End*/