* {
    margin: 0; 
    padding: 0;
    font-family: 'Arial', sans-serif;
    font-size: 17px;
}


/* Стили для страницы 404 */

#NotPage div.btn-submit {
    width: fit-content;
    margin: 0 auto;
}

#NotPage div.btn-submit a {
    color: white;
}

#NotPage .Page h2 {
    color: #951e1e;
    font-size: 1.5rem;
    margin-bottom: 30px;
    text-align: center;
}
                    
#NotPage .block {
    padding: 40px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}
                    
#NotPage .error-description {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 20px;
}
                    
#NotPage .error-links a {
    display: inline-block;
    margin: 0 10px;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}
                    
#NotPage .error-links a:hover {
    background-color: #2980b9;
}

/* */


/* 
    Кнопка возврата
*/
div.back-button {
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    background: #f6f6f6;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
    align-items: center;
    justify-content: center;
}

div.back-button img {
    width: 20px;
    height: 20px;
}

div.back-button-wrapper {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: white;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 
*/



/* 
Имя для страницы фото / постов
*/

div.name-date {
    display: flex;
    flex-direction: column;
}

/* 
*/

#Message {
    height: 100vh;
}

body {
    width: 100%;
    height: 100%;
    background-color: #2C3E50;
}

* a {
    text-decoration: none;
}
input[type="text"], input[type="email"], input[type="password"] {
 padding: 10px;
 border: 1px solid #ddd;
 border-radius: 4px;
 width: 90%;
 font-size: 17px;
}

none {
    color: #828282;
}

.btn-submit {
    background: #323b55a9;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    font-weight: bold;
   }

.btn-submit:hover {
    background: #000000;
}

input[type=submit]:hover, .button:hover { background: #000000;}
select {height: 30px; margin-bottom: 10px;}

.wrapper {
    width: 100%;
    height: 98%;
    margin: 0 auto;
}

.header {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 50px;
    background: #2C3E50;
    border-radius: 10px 10px 0px 0px;
}

.header-img {
    width: 160px;
    margin: 0 auto;
    
}

.header-img img {
    width: 160px;
}

.content {
    display: flex;
    width: 100%;
    min-height: fit-content;
    height: 90%;
    max-width: 1100px;
    background: #fff;
    margin: 10px auto;
    border-radius: 10px;
    padding: 10px;
}

.Page {
    width: fit-content;
    min-height: fit-content;
    max-width: 940px;
    height: 95%;
    flex: 1; /* Занимает все оставшееся пространство */
    margin: 10px;
    padding: 10px;
}

age {
    color: #828282;
    font-size: 14px;
}

.footer {
    width: 100%;
    height: fit-content;
    margin: 0 auto;
    margin-bottom: 10px;
    text-align: center;
}

.footer .a {
    width: fit-content;
    height: fit-content;
    color: #828282;
    text-decoration: underline;
}

div.block {
    width: fit-content;
    margin: 20px auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.Message {
    width: 100%; 
    height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.DialogWhy {
    display: flex;
    flex-direction: column-reverse;
    position: relative;
    padding: 0 10px 10px;
    border-bottom: 1px solid rgba(200, 211, 218, 0.5);
}

.DialogWhy a.back-wrapper {
    position: absolute;
    left: 0px;
    top: 5px;
    display: flex;
    align-items: center;
}

.DialogWhy a {
    text-decoration: none;
    color: #2c5c8b;
    font-weight: 600;
}

.DialogWhy a:hover {
    cursor: pointer;
}

.input {
    float: left;
    display: inline-block; 
}

.input input {
    height: 52px;
    width: fit-content;
}

/* 
Правила
*/

#Rules div.block {
    width: 95%;
    margin: auto;
}

#Privacy div.block {
    width: 95%;
    margin: auto;
}

#Privacy h4 {
    display: inline-block;
    width: fit-content;
}

#Terms div.block {
    width: 95%;
    margin: auto;
}

#Terms h4 {
    display: inline-block;
    width: fit-content;
}

/* 
*/





/* 
Страница Edit
*/
/* Основной контейнер */
#Edit .block {
    margin-bottom: 30px;
    padding: 20px;
    width: 800px;
}

#Edit .block#name, .block#location {
    width: fit-content;
}

#Edit h3 {
    text-align: center;
    color: #444;
    font-size: 20px;
    margin-bottom: 10px;
}

/* Стилизация информационных надписей */
#Edit last-edit {
    display: block;
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-bottom: 15px;
    font-style: italic;
}

/* Поля ввода и Textarea */
#Edit input[type="text"],
#Edit select,
#Edit textarea {
    width: 100%;
    padding: 5px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    color: #333;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
}

/* Особые стили для textarea */
#Edit textarea {
    resize: vertical; /* Разрешаем менять высоту, но не ширину */
    min-height: 80px;
    line-height: 1.5;
}

/* Метки для полей (labels) */
#Edit label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #666;
    padding-left: 5px;
}

/* Эффекты при фокусе (адаптация под пол пользователя) */
#Edit.male input:focus, 
#Edit.male select:focus, 
#Edit.male textarea:focus {
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

#Edit.female input:focus, 
#Edit.female select:focus, 
#Edit.female textarea:focus {
    border-color: #e91e63;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.2);
}

/* Кнопки */
#Edit .btn-submit {
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 10px auto;
    padding: 12px;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
}

/* Цвета кнопок под пол */
#Edit.male .btn-submit { background-color: #007bff; }
#Edit.female .btn-submit { background-color: #e91e63; }

#Edit .btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

#Edit .btn-submit:active {
    transform: translateY(0);
}

/* Кастомная стрелочка для select (опционально) */
#Edit select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    padding-right: 40px;
}
/* 
*/




/* 
Уведомления
*/

/* Общие стили для всех уведомлений */
.MessageBlock {
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.MessageBlock b {
    margin-top: 15px;
}

/* Стили для конкретных типов уведомлений */

.MessageError {
    background: #DC143C;
    color: white;
    border: 1px solid #DC143C;
    animation: errorAnimation 0.5s;
    height: fit-content;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 5px auto;
    max-width: 1110px;
    border-radius: 10px;
    padding: 5px;
    width: 95%;
}

.MessageHint {
    background: #6d8997;
    color: white;
    border: 1px solid #6d8997;
    animation: hintAnimation 0.5s;
    height: fit-content;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 5px auto;
    max-width: 1110px;
    border-radius: 10px;
    padding: 5px;
    width: 95%;
}

.MessageInfo {
    background: #76b041;
    color: white;
    border: 1px solid #76b041;
    animation: infoAnimation 0.5s;
    height: fit-content;
    min-height: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
    margin: 5px auto;
    max-width: 1110px;
    border-radius: 10px;
    padding: 5px;
    width: 95%;
}

.MessageSuccess {
    background: #dff0d8;
    color: #3c763d;
    border: 1px solid #dff0d8;
    animation: successAnimation 0.5s;
}

/* Анимации появления */
@keyframes errorAnimation {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}

@keyframes hintAnimation {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}

@keyframes infoAnimation {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}

@keyframes successAnimation {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}

/* Стили для заголовка и контента */
.MessageBlock b {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}

.MessageBlock p {
    margin: 0;
    font-size: 14px;
}

.MessageBlock .close:hover {
    opacity: 1;
}


/* 
*/

.ChatBox {height:  300px; overflow: auto; border: 1px solid #dddddd;}
.ChatBlock {
    border: 1px solid #dddddd; 
    background: #f2f2f2; 
    padding: 10px; 
    color: #000000; 
    margin: 10px; 
    height: 50px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 98%; 
    border-radius: 8px; 
}

.all div.ChatBlock div.text p {color: #828282;; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.all a {text-decoration: none;}
.all div.ChatBlock pDel {
    float: right;
    cursor: pointer;
    font-size: 14px;
    color: red;
    background: white;
    padding: 1px 5px;
    border-radius: 50%;
}



/* Блог */

#Blogs a {
    display: contents;
    width: fit-content;
    height: fit-content;
    color: #000;
}

#Blogs div.MenuHead a {
    display: block;
    width: auto;
    height: auto;
}

#Blogs a.menu-item, #Blog a.menu-item {
    color: white;
}

#Blogs .footer a, #Blog .footer a {
    color: #828282;
}

#Blogs h4, #Blog h4 {
    text-align: center;
    line-height: 1.5;
    color: #333;
    padding: 10px;
    background-color: #f8f8f8;
}

#Blogs .Navigation, #Blog .Navigation {
    cursor: pointer;
    margin: 10px 0;
        }
        
#Blogs .nav-header, #Blog .nav-header {
    padding: 10px;
    background: #f0f0f0;
    border-radius: 5px;
        }
        
#Blogs .nav-content, #Blog .nav-content {
    padding: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    animation: errorAnimation 1s;
        }
        
#Blogs .theme, #Blog .theme {
    margin: 5px 0;
    height: 20px;
    padding: 5px;
        }

#Blogs .theme:hover, #Blog .theme:hover {
    background-color: #00000018;
    border-radius: 10px;
}
        
#Blogs .arrow, #Blog .arrow {
    float: right;
    margin-top: 2px;
        }

#Blogs div.btn-submit, #Blog div.btn-submit {
    text-align: center;
}

#Blogs div.block, #Blog div.block {
    width: auto;
}

#Blogs div.confirm textarea {
    width: 100%;
    resize: none;
    height: 150px;
    padding: 5px;
}

#Blogs div.modal-overlay .confirm {
    text-align: unset;
}

#Blogs div.modal-overlay .confirm .btn-submit {
    margin-bottom: 10px;
    max-width: 90%;
}

#Blogs div.modal-overlay .confirm color {
    color: #828282;
}

#Blogs div.modal-overlay .confirm h3 {
    text-align: center;
}

#Blogs div.modal-overlay .confirm textarea[name="theme"] {
    height: 20px;
    margin-bottom: 10px;
    width: 160px;
}

#Blogs div.modal-overlay .confirm a {
    color: white;
}

#Blog div.wrapper-blog, #Blog div.wrapper-blog {
    margin-top: 20px;
}

#Blogs div.wrapper-blog div.info, #Blog div.wrapper-blog div.info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#Blogs div.wrapper-blog .post-avatar, #Blog div.wrapper-blog .post-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#Blogs div.wrapper-blog div.like-comm img, #Blog div.wrapper-blog div.like-comm img {
    width: 24px;
    height: 24px;
}

#Blogs div.wrapper-blog div.like-comm .comm, #Blog div.wrapper-blog div.like-comm .comm {
    margin-left: 5px;
}

#Blogs div.wrapper-blog .date, #Blog div.wrapper-blog .date {
    font-weight: 100;
    margin-top: 5px;
    display: block;;
}

#Blogs .blog-image, #Blog .blog-image {
    max-width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin: 10px auto;
    display: block;
}

#Blogs div.like-comm, #Blog div.like-comm {
    margin-top: 10px;
    padding: 5px;
}

#Blogs text, #Blog text {
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;     /* Количество видимых строк */
  overflow: hidden;
}

#Blogs a.all, #Blog a.all {
    text-decoration: underline;
    color: darkblue;
}

#Blogs .role, #Blog .role {
    font-weight: bold;
    padding: 3px;
    border: 1px solid #323b55a9;
    background-color: white;
    border-radius: 6px;
    width: max-content;
    color: #000;
    
}

#Blogs div.count-image {
    border-radius: 10px;
    background-color: rgb(0 123 255 / 48%);
    padding: 8px 12px;
    color: #333;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgb(0 0 0 / 39%);
    color: #ffffffd9;
    display: block;
    width: fit-content;
    margin-left: auto;
}

#Blogs div.modal-overlay .confirm .btn-submit {
    display: inline-block;
}

#Blogs div.body-text, #Blog div.body-text {
    font-family: 'Arial', sans-serif;
    line-height: 1.5;
    color: #333;
    margin: 0;
    padding: 20px;
    background-color: #f8f8f8;
}

/* Стили для заголовков */
#Blogs div.body-text,
#Blog div.body-text {
    h1, h2, h3 {
    color: #2c3e50;
    margin: 10px 0 10px;
    font-weight: bold;
    }
}

#Blogs div.body-text h1, #Blog div.body-text h1 {
    font-size: 1.5rem;
}

#Blogs div.body-text h2, #Blog div.body-text h2 {
    font-size: 1.4rem;
}

#Blogs div.body-text h3, #Blog div.body-text h3 {
    font-size: 1.2rem;
    padding-bottom: 5px;
}

/* Стили для основного текста */
#Blogs div.body-text p, #Blog div.body-text p {
    margin: 10px 0;
    color: #444;
    font-size: 17px;
}

/* Стили для списков */
#Blogs div.body-text ul, #Blog div.body-text ul {
    margin: 15px 0;
    padding-left: 20px;
}

#Blogs div.body-text li, #Blog div.body-text li {
    margin: 5px 0;
    color: #555;
    font-size: 17px;
}

/* Стили для выделения важных элементов */
#Blogs div.body-text .important, #Blog div.body-text .important {
    font-weight: bold;
    color: #e74c3c;
}

/* Стили для разделителей между разделами */
#Blogs div.body-text .section-divider, #Blog div.body-text .section-divider {
    margin: 30px 0;
    border-top: 1px solid #eee;
}

/* Стили для призыва к действию */
#Blogs div.body-text .cta, #Blog div.body-text .cta {
    margin-top: 30px;
    font-size: 1.2rem;
    color: #2980b9;
    text-decoration: none;
}

#Blogs div.body-text a, #Blog div.body-text a {
    font-weight: 600;
    color: darkviolet;
    font-size: 17px;
}

#Blogs div.body-text strong {
    font-size: 17px;
}

#Blogs .footer a {
    display: inline-block;
}

#Blogs div.Page color {
    color: #828282;
    margin-bottom: 20px;
    display: block;
}

#Blogs div.confirm color {
    margin: 0;
}

#Blogs div.confirm color-text {
    color: #444;
    font-size: 15px;
}

#Blogs delete {
    float: right;
    margin: 10px;
}

#Blogs delete img {
    width: 20px;
}

/**/



/* Страница с Блогом */

#Blog a {
    color: #000000;
}

#Blog .blog-image {
    width: 100%;
    display: inline-block;
}

#Blog text {
    display: contents;
    -webkit-box-orient: unset;
    overflow: unset;
}

#Blog .photo-album {
    display: block;
}

#Blog .blog-image {
    width: 200px; /* Фиксированная ширина */
    height: 200px; /* Фиксированная высота */
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden; /* Скрываем лишнее */
    transition: transform 0.3s;
    margin: 5px;
}

#Blog .blog-image:hover {
    transform: scale(1.02);
}

#Blog h4 {
    text-align: start;
}

#Blog div.comments form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#Blog div.comments form .btn-submit {
    padding: 8px;
    margin-top: 5px;
}

#Blog div.comments form textarea {
    width: 100%;
}

#Blog div.confirm image-open img {
    max-width: 100%;
}

#Blog div.confirm {
    width: fit-content;
    height: fit-content;
}

#Blog .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#Blog .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

#Blog .close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 30px;
}

#Blog .modal-image img {
    width: 100%;
    height: auto;
    display: block;
}

#Blog div.flex-container {
    display: block;
    border: 1px solid #0a471c36;
    border-radius: 10px;
    padding: 5px;
    cursor: pointer;
    background: white;
}


#Blog div.theme-select {
    width: fit-content;
    background-color: #00000018;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px;
    height: fit-content;
    max-height: 100px;
    padding: 5px;
    overflow: hidden;
    text-overflow: ellipsis;    
}

#Blog div.image-select {
    display: inline-block;
    width: fit-content;
    background-color: rgb(0 123 255 / 48%);
    color: #ffffffd9;
    border-radius: 10px;
    cursor: pointer;
    margin: 5px;
    height: 20px;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; 
}

#Blog div.flex-container:hover {
    background: #a4ddd1;
}

#Blog div.flex-container h5 {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    color: #00000091;
}


#Blog h5 {
    width: fit-content;
    display: contents   ;
}

#Blog blacklist a {
    font-weight: 600;
    color: white;
}


#Blog .blog-container {
    display: flex;
    flex-wrap: wrap; /* Перенос элементов на новую строку */
    gap: 20px; /* Отступы между элементами */
    padding: 20px;
}

#Blog .blog-item {
    flex: 1 0 48%;
    box-sizing: border-box;
    text-decoration: none;
    max-width: 100%;
}

#Blog div.like-comm {
    display: flex;
    justify-content: space-between;
}

#Blog visits {
    color: #828282;;
}

#Blog div.Page {
    position: relative;
}

#Blog div.back-button-wrapper {
    top: 20px;
}

@media (max-width: 768px) {
    #Blog .blog-image {
        width: calc(50% - 10px);
        width: 185px;
        height: 185px;
    }
}

@media (max-width: 480px) {
   #Blog .blog-image {
        width: 100%;
        height: auto;
        margin: 5px auto;
    }
}

/**/



/* Диалоги */

#Dialog .footer .a {
    color: #828282;
    text-decoration: underline;
}

#Dialog .container {
    display: flex;
    width: 100%;
    height: fit-content;
}

#Dialog div.name-delete {
    display: flex;
    justify-content: space-between;
}

#Dialog div.name-delete img {
    width: 20px;
}

#Dialog div.name-delete img.return {
    width: 17px;
}

#Dialog div.text-date {
    display: flex;
    justify-content: space-between;
}

#Dialog span.text, span.date {
    color: #828282;
}

#Dialog span.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
    display: inline-block;
}


#Dialog span.date count {
background: #0057fa;
    border-radius: 50%;
    color: white;
    text-align: center;
    font-weight: normal;
    padding: 2px 6px 2px 6px;
    font-size: 14px;
}

#Dialog .buttons-container {
    display: flex; /* Включаем flex-контейнер */
    gap: 10px; /* Расстояние между элементами */
}

#Dialog .Select {
    background: #323b55a9;
    color: white;
    padding: 5px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 17px;
    transition: background 0.3s;
    width: max-content;
    height: max-content;
}

#Dialog .Select:hover {
    background-color: #000000;
}

#Dialog div.NoDia {
    text-align: center;
    color: #828282; 
    font-size: 17px;
}
#Dialog .btn-submit {
    width: fit-content;
    height: fit-content;
    margin: 5px auto;
}

#Dialog a {
    text-decoration: none;
    color: white;
}

#Dialog span.role {
    color: #000;
}

#Dialog name-delete {
    font-weight: 600;
    color: #828282;
}

#Dialog div.NoDia a {
    color: darkviolet;
    font-weight: 600;
    font-size: 17px;
}

/* */


/* Сообщения */

#Message html, #ReportDialog html {
    height: 100%;
}

#Message div.user-info span.arhiv {
    font-weight: 400;
}

#Message div.MessageToMe div.date, #ReportDialog div.MessageToMe div.date {
    color: #828282;
    font-size: 13px;
}

#Message div.MessageToMe div.imageMessage, #ReportDialog div.MessageToMe div.imageMessage {
    max-width: 300px;
    margin: 0 auto;
}

#Message div.MessageToMe div.imageMessage img, #ReportDialog div.MessageToMe div.imageMessage img {
    max-width: 300px;
    border-radius: 10px;
    object-fit: cover;
}

#Message div.MessageToMe div.edit-status, #ReportDialog div.MessageToMe div.edit-status {
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

#Message div.MessageToMe div.text, #ReportDialog div.MessageToMe div.text {
    margin-top: 5px;
    margin-bottom: 5px;
    max-width: 300px;
    min-width: 200px;
    overflow-wrap: break-word
}

#Message div.MessageToMe div.edit img, #ReportDialog  div.MessageToMe div.edit img {
    cursor: pointer;
}

#Message div.MessageNoMe div.date, #ReportDialog div.MessageNoMe div.date {
    color: #828282;
    font-size: 13px;
}

#Message div.MessageNoMe div.text, #ReportDialog div.MessageNoMe div.text {
    max-width: 280px;
    min-width: 180px;
    overflow-wrap: break-word
}

#Message div.MessageNoMe div.imageMessage, #ReportDialog div.MessageNoMe div.imageMessage {
    max-width: 300px;
    margin: 0 auto;
}

#Message div.MessageNoMe div.imageMessage img, #ReportDialog div.MessageNoMe div.imageMessage img {
    max-width: 300px;
    border-radius: 10px;
    object-fit: cover;
}

#Message .MessageToMe edit, #ReportDialog .MessageToMe edit {
    color: #828282;
    font-size: 13px;
    margin-right: 5px;
}

#Message .MessageToMe, #ReportDialog .MessageToMe {
    display: block;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    margin: 5px;
    margin-left: auto;
    border-radius: 10px;
    background-color: #e0f7fa;
    text-align: left;
}

#Message .MessageNoMe, #ReportDialog .MessageNoMe {
    display: block;
    width: fit-content;
    height: fit-content;
    padding: 10px;
    margin: 5px;
    border-radius: 10px;
    background-color: #f1f1f1;
}

#Message .MessageNoMe, .MessageToMe, #ReportDialog .MessageNoMe, .MessageToMe {
    margin-bottom: 5px;
}

#Message div.Close {
    width: fit-content;
    height: fit-content;
    float: right;
}

#Message div.CloseRed {
    width: fit-content;
    height: fit-content;
    margin: 0px 0px 10px auto;
}

#Message .CloseButton {
    padding: 8px;
    border: none;
    border-radius: 5px;
    background: #323b55a9;
    cursor: pointer;
    font-size: 17px;
    transition: background 0.3s;
    color: white;
    font-family: sans-serif;
    font-weight: 500;
    margin-right: 52px;
}

#Message .CloseButton:hover {
    background: #000000;
}

#Message .FormInfo {
    width: 100%;
    margin-top: 10px;
}

#Message .textarea {
 display: flex;
 width: 100%;
 height: fit-content;
 margin: 0 auto;
}

#Message .textarea textarea {
    width: 100%;
    max-width: 100%;
    height: 40px;
    resize: none;
    border-radius: 4px;
    padding: 5px;
    /* Добавляем стили для улучшения внешнего вида */
    font-family: Arial, sans-serif;
    font-size: 17px;
    color: #333;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
    transition: border-color 0.3s;
    
    /* Стили при фокусе */
    &:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 8px rgba(0,123,255,0.6);
    }
}

#Message form .btn-submit, #ReportDialog .btn-submit {
    width: fit-content;
    max-width: 90%;
}

#Message div.Image input {
    width: 20px;
    margin-left: 5px;
    float: right;
}

/**/


.container .foto {
    display: table-cell;
    vertical-align: middle;
    height: 72px;
    width: 72px;
}

.container .item {
    display: table-cell;
    vertical-align: middle;
}

#Dialog .ava {
    width: 72px;
    height: 72px;
    margin: 10px 0;
    border-radius: 50%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

 .all div.ChatBlock img {
    float: right;
    margin-right: 5px;
}

.ChatMessage {width: 300px; height: 40px; resize: none; padding: 5px;}

#all .text d {
    float: right;
}

.online-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #4caf50;
}

.online-status-wrapper {
    display: inline-flex;
    align-items: center;
}

.status {
    margin-top: 5px;
    text-decoration: none;
    color: #828282;
}

.status-text {
    margin-right: 3px;
}

.back {
    padding: 5px 10px;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 5px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 17px;
}

.back:hover {
    background-color: #e9ecef;
    cursor: pointer;
    text-decoration: none;
}

.user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}

.DialogWhy a.back-wrapper {
    text-decoration: none;
}

.SendMessage {
    margin-top: 10px;
}

.message-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 72px; /* высота контейнера */
}

.NotDialog {
    text-align: center;
    margin: auto;
    padding: 5px 5px;
    background: #323b55a9;
    color: white;
    height: fit-content;
    width: 200px;
    margin-top: 5px;
    border-radius: 4px;
    font-size: 17px;
}

.NotDialogText {
    text-align: center;
    margin: auto;
    padding: 5px 5px;
    background: #323b55a9;
    color: white;
    height: fit-content;
    width: 200px;
    margin-top: 5px;
    border-radius: 4px;
    font-size: 17px;
    cursor: pointer;
}

.NotDialogText:hover {
    background: #000000;
}

div.Image {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    border: none;
    padding: 8px;
    border-radius: 5px;
    background: #323b55a9;
    font-size: 17px;
    transition: background 0.3s;
    color: white;
    font-family: sans-serif;
    font-weight: 500;
    max-width: 70%;
}

name-age {
    font-weight: 600;
    color: #2c5c8b;
}

name-age-girl {
    font-weight: 600;
    color: #FF69B4;
}

name-premium {
    font-weight: 600;
    color: #4caf50;
}

/* 
Уведомления
*/

#Notive .footer .a {
    color: #828282;
    text-decoration: underline;
    font-weight: 400;
}

#Notive div.all-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

#Notive div.image img {
    width: 40px;
    height: 40px;
    margin-right: 5px;
}

#Notive div.info {
    margin: 5px;
}

#Notive h3 {
    text-align: center;
}

#Notive h4 {
    text-align: center;
}
#Notive div.date-header {
    color: #828282;
    text-align: center;
}

#Notive div.block {
    width: 500px;
}

#Notive div.block {
    display: flex;
    height: 100%;
    align-items: center;
    margin: 10px auto;
    justify-content: center;
}

#Notive span.role {
    color: #000;
}

#Notive h5 {
    display: inline-block;
    width: fit-content;
}

#Notive no-accept {
    font-weight: 600;
    color: #951e1e;
}

#Notive accept {
    font-weight: 600;
    color: green;
}

#Notive a {
    font-weight: 600;
    color: darkviolet;
}

#Notive a.menu-item {
    font-weight: 400;
    color: white;
}

#Notive premium {
    color: #4caf50;
}

/* 
*/

/* 
Жалобы
*/

#Report div.block {
    max-width: 100%;
    width: auto;
}

#Report div.report-wrapper {
    display: flex;
    gap: 10px;
    border: 1px solid #dddddd; 
    background: #f2f2f2; 
    padding: 10px; 
    color: #000000; 
    margin: 5px; 
    text-align: center;
    justify-content: center;
}

#Report div.report-wrapper a {
    text-decoration: underline;
}


#Report div.info {
    width: 450px;
    min-height: 200px;
    height: fit-content;
    overflow-wrap: break-word;
}

#Report div.user .none {
    text-decoration: none;
}

#Report div.action {
    width: 300px;
}

#Report div.action a {
    text-decoration: none;
    color: white;
}

#Report div.action .btn-submit {
    width: auto;
    height: auto;
    margin-top: 10px;
}

#Report info {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    color: #828282;
}

#Report user {
    float: inline-start;
}

#Report date {
    float: inline-start;
    font-weight: bold;
    margin-top: 10px;
}

#Report daterow {
    float: right;
    margin-top: 10px;
    margin-right: 30px;
}

#Report user, #ReportDialog span.user {
    font-weight: bold;
}

#Report userty {
    font-weight: bold;
    float: inline-start;
}

#Report h3 {
    text-align: center;
}

#Report h4 {
    text-align: center;
}

#Report name {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#Report comment {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

#Report rowcomment {
    display: block;
}

#Report why {
    display: block;
    font-weight: bold;
}

#Report .btn-submit {
    margin: 0 auto;
    width: fit-content;
    height: fit-content;
}

#Report div.MenuHead a {
    color: white;
}

/* 
*/

/* 
Диалог из Жалобы
*/

#ReportDialog div.block {
    width: 950px;
    height: fit-content;
}

#ReportDialog h3 {
    text-align: center;
    color: #828282;
    margin: 10px;
}

#ReportDialog .btn-submit {
    width: fit-content;
    height: fit-content;
}

#ReportDialog a {
    text-decoration: none;
}

#Report footer a {
    color: #828282;
}

#ReportDialog images-delete {
    color: #828282;
}

/* 
*/



/* 
    Страница сообщений
*/

#Message .role {
    font-weight: bold;
    padding: 3px;
    border: 1px solid #323b55a9;
    background-color: white;
    border-radius: 6px;
    width: max-content;
    
}

#Message div.NoMessage {
    border: 1px solid #e5e5e5;
    width: fit-content;
    height: fit-content;
    margin: 10px auto;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background: #f6f6f6;
}

#Message div.InfoUser p {
    padding: 5px;
}

#Message div.report-wrapper {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
}

#Message div.InfoUser report {
    color: red;
}

#Message div.user-info span {
    color: #828282; 
    font-size: 15px;

}

#Message div.date-header, #ReportDialog div.date-header {
    text-align: center;
    color: #828282; 
    margin: 10px;
    font-size: 15px;
}

#Message .attach-button img {
    float: left;
}

#Message div.image-wrapper {
    display: inline-block;
    position: relative;
    animation: errorAnimation 0.7s;
}

#Message div.image {
    display: inline-block;
    margin: 5px;
}

#Message div.image img {
    display: block;
    width: 100px;
    height: 100px;
    object-fit: cover;
}

#Message form .btn-submit {
    padding: 5px 10px;
}

#Message text {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #828282;
}

#Message .closeImage {
    float: right;
    margin-right: 52px;
    padding: 8px;
    border: none;
    border-radius: 5px;
    background: #323b55a9;
    cursor: pointer;
    font-size: 17px;
    transition: background 0.3s;
    color: white;
    font-family: sans-serif;
    font-weight: 500;

}

#Message .closeImage:hover {
    background: #000000;
}

#Message div.delete img {
    width: 24px;
    height: 24px;
    margin: 2px;
}

#Message div.delete {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
}

#Message  .MessageError {
    margin: auto;
    width: auto;
}

#Message  .MessageHint {
    margin: auto;
    width: auto;
}

#Message .Page {
    border: 1px solid #d3d6da;
    border-radius: 10px;
    background: #f8f9fa;
}

#Message div.DialogWhy a.back-wrapper img {
    width: 30px;
}

#Message div.user-info span.role {
    color: #000;
}

#Message name-delete {
    font-weight: 600;
    color: #828282;
}

#Message images-delete {
    color: #828282;
}


/* 
*/


/* 
    Страница регистрации
*/

#Register-gl img#gender-preview, #Register-position img#position-preview, #Register-theme img#theme-preview, #Register-name img#name-preview, #Register-data img#data-preview, #Register-location img#location-preview, #Register-accept img#mail-preview, #Login img#login-preview, #Restore img#restore-preview {
    width: 100%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
    object-fit: cover;
}

#Register-gl .btn-submit, #Register-position .btn-submit, #Register-theme .btn-submit, #Register-name .btn-submit, #Register-data .btn-submit, #Register-location .btn-submit {
    display: block;
    margin: 0 auto;
}

#Register-gl h2, #Register-position h2, #Register-theme h2, #Register-name h2, #Register-data h2, #Register-location h2 {
    text-align: center;
    color: #666;
}

/* Контейнер для тегов */
#Register-gl .gender-tags, #Register-position .position-tags, #Register-theme .theme-tags, #Register-name .name-tags, #Register-location .location-tags {
    margin-top: 20px;
    text-align: center;
}

#Register-gl .label-text, #Register-position .label-text, #Register-theme .label-text, #Register-name .label-text, #Register-location .label-text {
    display: block;
    color: #666;
    margin-bottom: 10px;
}

/* Скрываем стандартный кружок радиокнопки */
#Register-gl .tag-item input[type="radio"], #Register-position .tag-item input[type="radio"], #Register-theme .tag-item input[type="radio"] {
    display: none;
}

/* Стиль текста по умолчанию (как хэштег) */
#Register-gl .tag-text,  #Register-position .tag-text, #Register-theme .tag-text {
    display: inline-block;
    padding: 5px 12px;
    cursor: pointer;
    color: #888; /* Серый цвет, если не выбрано */
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 20px;
}

/* Цвет при наведении */
#Register-gl .tag-text:hover, #Register-position .tag-text:hover, #Register-theme .tag-text:hover {
    color: #333;
}

/* СТИЛЬ ДЛЯ ВЫБРАННОГО ТЕГА */
/* Когда радиокнопка внутри нажата, меняем цвет текста рядом */
#Register-gl .tag-item input[type="radio"]:checked + .tag-text, #Register-position .tag-item input[type="radio"]:checked + .tag-text, #Register-theme .tag-item input[type="radio"]:checked + .tag-text {
    color: #007bff; /* Яркий цвет (например, синий) */
    background: rgba(0, 123, 255, 0.1); /* Легкий фон, можно убрать */
}

/* Если выбрана женщина, можно сделать розовым (опционально) */
#Register-gl .tag-item input[value="female"]:checked + .tag-text, #Register-position .tag-item input[value="female"]:checked + .tag-text, #Register-theme .tag-item input[value="female"]:checked + .tag-text {
    color: #e91e63;
    background: rgba(233, 30, 99, 0.1);
}

#Register-gl.male .tag-item input[type="radio"]:checked + .tag-text, #Register-position .tag-item input[type="radio"]:checked + .tag-text, #Register-theme .tag-item input[type="radio"]:checked + .tag-text {
    color: #007bff;
    background: rgba(0, 123, 255, 0.1); /* Легкий голубой фон для акцента */
}

/* Цвет для ЖЕНЩИН */
#Register-gl.female .tag-item input[type="radio"]:checked + .tag-text, #Register-position.female .tag-item input[type="radio"]:checked + .tag-text, #Register-theme.female .tag-item input[type="radio"]:checked + .tag-text {
    color: #e91e63;
    background: rgba(233, 30, 99, 0.1); /* Легкий розовый фон для акцента */
}

/* Общий контейнер для всех страниц регистрации */
.step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

/* Стили для самой точки (и если она просто span, и если внутри ссылки) */
.step-indicator .step {
    display: block; /* Важно! */
    width: 10px;
    height: 10px;
    background-color: #d1d1d1;
    border-radius: 50%;
    transition: all 0.3s ease;
}

/* Убираем лишние отступы и оформление у ссылок внутри индикатора */
.step-indicator a {
    text-decoration: none;
    line-height: 0;
    display: block;
}

/* Цвет активной точки */
.step-indicator .step.active {
    background-color: #555; /* Или твой цвет активного шага */
    transform: scale(1.2);
}

/* Эффект при наведении только на те шаги, которые являются ссылками */
.step-indicator a:hover .step {
    background-color: #aaa;
    transform: scale(1.2);
}

#Register-gl .step.active, #Register-position .step.active, #Register-theme .step.active, #Register-name .step.active, #Register-location .step.active, #Register-data .step.active {
    width: 25px; /* Активная точка длиннее */
    border-radius: 10px;
    background-color: #007bff; /* Цвет активной точки (синий) */
}


/* Прячем стандартный квадратик */
#Register-theme .tag-item input[type="checkbox"] {
    display: none;
}

/* Базовый стиль хэштега */
#Register-theme .tag-text {
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 20px;
    border: 1px solid #ddd;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: bold;
}

/* Подсветка для МУЖЧИН (Синий) */
#Register-theme.male .tag-item input[type="checkbox"]:checked + .tag-text {
    color: #007bff;
    border-color: #007bff;
    background: rgba(0, 123, 255, 0.1);
}

/* Подсветка для ЖЕНЩИН (Розовый) */
#Register-theme.female .tag-item input[type="checkbox"]:checked + .tag-text {
    color: #e91e63;
    border-color: #e91e63;
    background: rgba(233, 30, 99, 0.1);
}

/* Стиль кнопки "Далее" под пол */
#Register-theme.male .btn-submit, #Register-position.male .btn-submit, #Register-name.male .btn-submit, #Register-data.male .btn-submit, #Register-location.male .btn-submit { background-color: #007bff; }

#Register-theme.female .btn-submit, #Register-position.female .btn-submit, #Register-name.female .btn-submit, #Register-data.female .btn-submit, #Register-location.female .btn-submit { background-color: #e91e63; }

/* Стили для блока описания */
#Register-theme .theme-desc-text {
    margin-top: 15px;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    min-height: 50px; /* Чтобы страница не прыгала при смене текста */
    transition: all 0.3s ease;
}

/* Цвет выделенного текста (тега b) зависит от пола */
#Register-theme.male .theme-desc-text b {
    color: #007bff;
}

#Register-theme.female .theme-desc-text b {
    color: #e91e63;
}

#Register-name .input-main {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
    background: #f9f9f9;
    box-sizing: border-box; /* Важно, чтобы паддинги не расширяли блок */
}

#Register-name .input-main:focus {
    border-color: #7a49a5; /* Цвет под акцент вашей темы */
    background: #fff;
    box-shadow: 0 0 5px rgba(122, 73, 165, 0.2);
}

#Register-name .label-text {
    font-weight: bold;
    display: block;
}

#Register-name label[for="user-age"] {
    margin-top: 15px;
}


#Register-location select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    color: #555;
    background-color: #f9f9f9;
    appearance: none; /* Убираем стандартную стрелку браузера */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    height: auto;
}

/* Эффект при фокусе (нажатии) */
#Register-location select:focus {
    outline: none;
    border-color: #8e44ad; /* Цвет акцента как в Register-data */
    background-color: #fff;
    box-shadow: 0 0 8px rgba(142, 68, 173, 0.2);
}

/* Стили для контейнера с тегами в локации */
#Register-location .name-tags {
    max-width: 400px;
    margin: 20px auto;
    text-align: left; /* Выравнивание по левому краю для аккуратности */
}

#Register-location .label-text {
    margin-bottom: 8px;
    font-weight: 600;
    color: #666;
}



/* Контейнер для полей */
#Register-data .input-container {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Отступы между полями */
    text-align: left;
    max-width: 400px;
    margin: 0 auto;
}

/* Общие стили для меток */
#Register-data .label-text {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
    color: #555;
}

/* Стилизация текстовых полей */
#Register-data .input-main {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

#Register-data .input-main:focus {
    border-color: #8e44ad; /* Цвет акцента */
    background-color: #fff;
    outline: none;
    box-shadow: 0 0 8px rgba(142, 68, 173, 0.2);
}

/* Блок с чекбоксом */
#Register-data .agreement-block {
    margin-top: 10px;
}

#Register-data.checkbox-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 10px;
    user-select: none;
}

/* Скрываем дефолтный чекбокс и стилизуем текст */
#Register-data .agreement-text {
    font-size: 17px;
    color: #666;
}

#Register-data .agreement-text a {
    color: #8e44ad;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

#Register-data.agreement-text a:hover {
    border-bottom-color: #8e44ad;
}

/* Увеличенный размер чекбокса для удобства */
#Register-data input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #8e44ad; /* Современный способ покрасить чекбокс */
}

#Register-data .btn-submit {
    margin: 10px auto;
}

#Register-data form.reg-form {
    margin: 20px auto;
}



/* Основной контейнер формы */
#Register-accept .register-form {
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}

/* Стили заголовка и меток */
#Register-accept h2 {
    color: #666;
    text-align: center;
    margin-top: 10px;
}

#Register-accept .form-group {
    margin-bottom: 20px;
    text-align: center;
}

#Register-accept label {
    display: block;
    margin-bottom: 15px;
    color: #555;
    font-size: 15px;
    line-height: 1.4;
}

/* Поле ввода кода */
#Register-accept input[type="text"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px; /* Сделаем код чуть крупнее */
    letter-spacing: 2px; /* Расстояние между цифрами кода */
    text-align: center;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

/* Фокус и адаптация под пол (как в предыдущих этапах) */
#Register-accept.male input[type="text"]:focus {
    border-color: #007bff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
    background-color: #fff;
}

#Register-accept.female input[type="text"]:focus {
    border-color: #e91e63;
    box-shadow: 0 0 8px rgba(233, 30, 99, 0.2);
    background-color: #fff;
}

/* Кнопки подтверждения и отмены */
#Register-accept .btn-submit {
    width: 100%;
    max-width: 250px;
    padding: 12px;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.3s;
    margin-bottom: 10px;
}

/* Цвета кнопок в зависимости от пола */
#Register-accept.male .btn-submit { background-color: #007bff; }
#Register-accept.female .btn-submit { background-color: #e91e63; }

/* Специфический стиль для кнопки "Отмена" */
#Register-accept input[name="end"] {
    background-color: #bbb; /* Сделаем её нейтральной серой */
    margin-top: -10px;
}

#Register-accept .btn-submit:hover {
    opacity: 0.8;
}

/* Стили для инфо-текста (*Проверьте папку Спам) */
#Register-accept info-color {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #888;
    font-style: italic;
}

/* 
*/



/* Страница Входа */

/* Контейнер формы авторизации */
#Login .register-form {
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}

/* Заголовок */
#Login h2 {
    color: #666;
    text-align: center;
    font-size: 17px;
    margin-bottom: 10px;
}

/* Группировка полей */
#Login .form-group {
    margin-bottom: 20px;
    text-align: left; /* Текст меток (Логин, Пароль) лучше выравнивать по левому краю */
}

/* Метки (Логин, Пароль) */
#Login label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 600;
    font-size: 14px;
}

/* Поля ввода (логин и пароль) */
#Login input[type="text"],
#Login input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

/* Эффект фокуса (синий для всех, так как пол еще не известен) */
#Login input[type="text"]:focus,
#Login input[type="password"]:focus {
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

/* Чекбокс "Запомнить меня" */
#Login input[type="checkbox"] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
    accent-color: #007bff;
}

/* Общий стиль для кнопок */
#Login .btn-submit {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 10px auto;
}

/* Кнопка "Войти" (основная) */
#Login input[name="enter"] {
    background-color: #323b55a9;
}

#Login input[name="enter"]:hover {
    background-color: #000000;
}

/* Кнопки регистрации и восстановления (второстепенные) */
#Login a .btn-submit {
    background-color: #8e44ad; /* Фиолетовый оттенок, как в ваших других блоках */
}

#Login .btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Метки под кнопками ("Нет аккаунта?" и т.д.) */
#Login .form-group label[for="password"] {
    text-align: center;
    font-weight: normal;
    color: #888;
}

/*
*/




/* Страница Восстановления пароля */

/* Контейнер формы восстановления */
#Restore .register-form {
    max-width: 400px;
    margin: 20px auto;
    text-align: center;
}

/* Заголовок */
#Restore h2 {
    color: #666;
    text-align: center;
    font-size: 17px;
    margin-bottom: 10px;
}

/* Группа полей */
#Restore .form-group {
    margin-bottom: 20px;
    text-align: left;
}

/* Метка Email */
#Restore label {
    display: block;
    margin-bottom: 10px;
    color: #555;
    font-weight: 600;
}

/* Поле ввода Email */
#Restore input[type="email"] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 16px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

/* Фокус поля (сделаем нейтральным или под основной стиль Kinki) */
#Restore input[type="email"]:focus {
    border-color: #007bff;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

/* Стили кнопок */
#Restore .btn-submit {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    border: none;
    border-radius: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 10px auto;
}

/* Кнопка "Восстановить" */
#Restore input[name="enter"] {
    background-color: #323b55a9;
}

#Restore input[name="enter"]:hover {
    background-color: #000000;
}

/* Кнопка "Вход" (второстепенная) */
#Restore a .btn-submit {
    background-color: #8e44ad; /* Фиолетовый акцент */
    margin-top: 15px;
}

#Restore .btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/*
*/



/* Страница Setting */


#Setting .form-group input[type="password"] {
    margin-bottom: 10px;
}

#Setting div.block {
    width: 500px;
    margin-bottom: 10px;
}

#Setting .form-end {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

#Setting .modal-overlay, #Profile .modal-overlay, #Blogs .modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Полупрозрачное затемнение */
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    animation: errorAnimation 1s;
    z-index: 9999;
}

#Setting .confirm, #Profile .confirm, #Blogs .confirm {
    width: 400px;
    height: fit-content;
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}


#Setting .yes {
    display: inline;
    float: left;
    color: white;
    border: 1px solid red;
    padding: 8px 10px;
    border-radius: 5px;
    background: red;
}

#Setting .no {
    display: inline;
    float: right;
    color: white;
    border: 1px solid;
    padding: 8px 10px;
    border-radius: 5px;
    background: green;
}

#Setting .yes-no {
    width: 150px;
    margin: 0 auto;
}

/* 
*/

/* Страница BlackList */

delete {
    color: red;
    margin-left: 5px;
}

/* 
*/


/* Страница поиска */

#Search div.MenuHead a {
    color: white;
}

#Search div.Page a {
    width: fit-content;
    height: fit-content;
    color: #000000;
    text-decoration: none;
    display: block;;
}

#Search div.all-wrapper, #Guests div.all-wrapper {
    width: fit-content;
    height: fit-content;
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
}

#Search .btn-submit:hover {
    background: #000000;
}

#Search .UsersBlock, #Guests .UsersBlock {
    color: #000;
    width: 200px;
    min-height: 80px;
    max-height: fit-content;
    border: 2px solid rgba(0, 0, 0, 0.2);

    background-color: #f6f6f6;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#Search .UsersBlock a, #Guests .UsersBlock a {
    display: flex;
    flex-direction: row;
}

#Search .all a, #Guests .all a {
    text-decoration: none;
}

#Search .img img, #Guests .img img {
    width: 100px;        /* Фиксированная ширина */
    height: 100px;       /* Фиксированная высота */
    object-fit: cover;   /* Обрезка изображения для сохранения пропорций */
    border-radius: 50%;  /* Сделать изображение круглым (опционально) */
    border: 2px solid #fff; /* Белая рамка (опционально) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень (опционально) */
    display: block;      /* Убрать пробелы после изображения */
}

#Search .UsersBlock .info, #Guests .UsersBlock .info {
    text-decoration: none;
    margin-bottom: 5px;
}

#Search .UsersBlock .info .role, #Guests .UsersBlock .info .role {
    font-weight: bold;
    padding: 3px;
    border: 1px solid #323b55a9;
    background-color: white;
    border-radius: 6px;
    width: max-content;
    
}

#Search .UsersBlock .status-block, #Guests .status-block {
    display: block;
    background-color: #ddf3f1;
    padding: 5px;
    border: 1px solid #ddf3f1;
    border-radius: 10px;
    opacity: 0.8;
    width: fit-content;
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#Search .UsersBlock .a, #Guests .UsersBlock .a {
    text-decoration: none;
    color: #000000;
}

#Search .PageSelector, #Guests .PageSelector {
    margin-top: 25px;
    margin-bottom: 15px;
}

#Search h3, #Search h4, #Search h2, #Guests h3, #Guests h4, #Guests h2 {
    color: #343a40;
    margin-top: 10px;
    margin-bottom: 10px;
}

#Search div.Page .PageSelector a {
    display: inline;
}

#Search h4, #Guests h4 {
    margin-bottom: 5px;
}

#Search select, #Guests select {
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    margin-left: 5px;
    margin-right: 5px;
}

#Search input[type="text"], #Guests input[type="text"] {
    padding: 6px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-bottom: 15px;
    width: 35px;
    height: 30px;
    box-sizing: border-box;
}

#Search input[type="text"]:focus, #Guests input[type="text"]:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}


#Search label, #Guests label {
    display: block;
    margin-bottom: 15px;
    color: #495057;
}


#Search .form-row, #Guests .form-row {
    margin-bottom: 15px;
}


#Search .SwchItem, #Guests .SwchItem {
    padding: 7px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white; /* Базовый цвет для всех ссылок */
    margin: 1px;
}

#Search .ellipsis, #Guests .ellipsis {
    padding: 5px;
    color: #999;
}

#Search div.block {
    margin: auto;
    width: auto;
}

/* 
*/
#Guests .footer .a {
    color: #828282;
    text-decoration: underline;
    font-weight: 400;
}

#Guests div.Time {
    display: inline-block;
    background-color: #f6f6f6;
    border-radius: 10px;
    border: 1px solid #ccc;
    margin: 5px;
    padding: 5px;
    height: fit-content;
    width: fit-content;
}

#Guests div.info {
    width: 100%;
}

#Guests a {
    text-decoration: none;
}

/* 
*/

/* Общие стили профиля */
#Profile .profile-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 20px;
}

#Profile div.like-comm {
    padding: 5px;
}

#Profile a button.btn-submit {
    background: #951e1e;
}


#Profile a button.btn-submit:hover {
    background: #000;
}



#Profile div.btn-wrapper {
    display: flex;
}

#Profile div.btn-wrapper .btn-submit {
    margin: 5px;
    height: fit-content;
    padding: 8px;
    max-width: 115px;
    white-space: nowrap;        /* Запрещаем перенос текста */
    overflow: hidden;           /* Скрываем лишний текст */
    text-overflow: ellipsis;    /* Добавляем многоточие */
}

#Profile .profile-left {
    flex: 0 0 250px;
    margin-right: 20px;
    text-align: center;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#Profile .profile-left a {
    display: contents;
    height: fit-content;
    width: fit-content;
}

#Profile .profile-avatar {
    width: 150px;        /* Фиксированная ширина */
    height: 150px;       /* Фиксированная высота */
    object-fit: cover;   /* Обрезка изображения для сохранения пропорций */
    border-radius: 50%;  /* Сделать изображение круглым (опционально) */
    border: 2px solid #fff; /* Белая рамка (опционально) */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Тень (опционально) */
}
#Profile .avatar {
    width: 150px;
    height: 150px;
}

#Profile .profile-status {
    background-color: #f6f6f6;
    padding: 5px 10px;
    border: 1px solid #e5e5e5;
    margin-bottom: 15px;
}

#Profile .profile-right {
    flex: auto;
    width: 65%;
}

#Profile .profile-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#Profile .profile-item {
    margin-bottom: 10px;
}

#Profile .profile-logout {
    display: block; 
}

#Profile .send-message {
    margin-top: 10px;
}

#Profile .profile-blocks {
    margin-top: 20px;
}

#Profile .profile-blocks div.block {
    margin: 20px auto;
    padding: 15px;
    width: 900px;
}

#Profile .profile-blocks div.block p {
    padding: 10px;
    word-wrap: break-word;
    white-space: pre-line;
}

#Profile .Block h3 {
    margin-bottom: 10px;
}

#Profile .Block p {
    line-height: 1.6;
}

#Profile .profile-item .role, #Profile div.wall .role, #Images span.role, #News span.role, #Dialog span.role, #Notive span.role, #Message div.user-info span.role {
    font-weight: bold;
    padding: 3px;
    border: 1px solid #323b55a9;
    background-color: white;
    border-radius: 6px;

}

#Profile div.wall .role {
    color: #000;
}

#Profile .profile-item h3 {
    display: inline;
}

#Profile .status-block {
    background-color: #ddf3f1;
    padding: 10px;
    border: 1px solid #ddf3f1;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    width: fit-content;
    border-radius: 10px;
}

#Profile .button-profile-edit {
    display: block;
    max-width: max-content;
    margin-top: 10px;
    margin-left: auto; /* Добавляем это свойство */
    
}


#Profile .image-wrapper, .noimage-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 900px;
    min-height: 150px;
    max-height: fit-content;
    padding: 5px;
    margin: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    background: white;
    border-radius: 10px;
}

#Profile .noimage-wrapper {
    text-align: center;
}

#Profile .noimage-wrapper form {
    margin: 0 auto; /* горизонтальное центрирование */
    margin-top: 0; /* выравнивание по верху */
}

#Profile .noimage-wrapper h4 {
    margin: 0 auto; /* горизонтальное центрирование */
    margin-top: 0; /* выравнивание по верху */
}

#Profile .image-wrapper form {
    display: inline-block;
    margin: 20px;
}

#Profile .image-wrapper form h4 {
    margin-bottom: 5px;
    text-align: center;

}

#Profile .image-wrapper form .btn-submit {
    margin-bottom: 5px;
}

#Profile .image-wrapper .foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 205px;
    height: 200px;
    margin-right: 10px;
    position: relative;
    margin: 5px;
}

#Profile div.foto a div.pDelFoto img {
    border: none;
    box-shadow: none;
}

#Profile div.foto a div.pDelFotoAva img {
    border: none;
    box-shadow: none;
}

#Profile .image-wrapper .foto img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: block;
    border-radius: 10px;
}

#Profile .image-wrapper .foto .pDelFoto, .pDelFotoAva {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    padding: 1px 5px;
}

#Profile .image-wrapper .foto div.pDelFoto img {
    width: 25px;
    height: auto;
}

#Profile .image-wrapper .foto .pDelFotoAva img {
    width: 25px;
    height: auto;
}

#Profile .image-wrapper img:last-child {
    margin-right: 0;
}

#Profile .form-group {
    display: flex;
    justify-content: center;
}

#Profile money {
    font-weight: 600;
    color: #4caf50;
}

#Profile div.send-message div.btn-submit:hover {
    background: #000000;
}

#Profile div.send-message .btn-submit {
    width: 95%;
}

#Profile block {
    width: fit-content;
    height: fit-content;
    padding: 10px;
    border: 1px solid white;
    border-radius: 10px;
    background: white;
    color: #cb3030;
    font-weight: 600;
}

#Profile div.confirm {
    text-align: unset;
}

#Profile div.confirm h3 {
    text-align: center;
}

#Profile div.confirm form input[type=file] {
    margin-bottom: 10px;
    max-width: 90%;
}

#Profile div.confirm textarea {
    width: 100%;
    resize: none;
    height: 60px;
    padding: 5px;
}

#Profile div.confirm span {
    color: #828282;
    font-size: 15px;
}

#Profile .post .btn-submit {
    width: 98%;
    text-align: center;
    padding: 8px;
}

#Profile div.wall div.wrapper-post, #News div.wall div.wrapper-post {
    margin-top: 20px;
}

#Profile div.wall div.wrapper-post div.content-wrapper, #News div.wall div.wrapper-post div.content-wrapper {
    margin-top: 10px;
    white-space: pre-line;
}

#Profile div.wall div.wrapper-post div.info, #News div.wall div.wrapper-post div.info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#Profile div.wall div.wrapper-post .post-avatar, #News div.wall div.wrapper-post .post-avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#Profile div.wall div.wrapper-post div.like-comm img, #News div.wall div.wrapper-post div.like-comm img {
    width: 24px;
    height: 24px;
}

#Profile div.wall div.wrapper-post div.like-comm .comm, #News div.wall div.wrapper-post div.like-comm .comm {
    margin-left: 5px;
}

#Profile div.wall div.wrapper-post .date, #News div.wall div.wrapper-post .date {
    font-weight: 100;
    margin-top: 5px;
    display: block;;
}

#Profile div.wall div.haspost {
    margin-top: 20px;
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid #ddd;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    animation: errorAnimation 1s;
}

#Profile div.block {
    width: 98%;
}

#Profile div.wall delete, #News div.wall delete {
    float: right;
}

#Profile div.wall .post-image, #News div.wall .post-image {
    width: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    margin: 10px auto;
}

#Profile div.comments, #Blog div.comments {
    border-top: 1px solid #ccc;
    padding: 5px;
}

#Profile div.wall a, #News div.wall a {
    width: fit-content;
    height: fit-content;
    color: #000;
}

#Profile visits {
    color: #828282;
}

#News div.wall a {
    display: contents;
}

#Profile div.wall a {
    display: inline;
}

#Profile div.wall div.wrapper-post delete img, #Profile div.comment delete img, #News div.wrapper-post delete img {
    width: 20px;
}

#Profile div.Moderation {
    color: #828282;
    font-weight: 600;
    background-color: #ddf3f1;
    padding: 10px;
    border: 1px solid #ddf3f1;
    width: fit-content;
    border-radius: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
}

#Profile div.block moderation {
    color: #828282;
}

#Profile div.wall img.NewsImg {
    width: 35px;
    object-fit: cover;
}

#Profile no-post {
    color: #828282;
}

#Profile redactoradm {
    float: right;
}

#Profile redactoradm img {
    width: 25px;
}

#Profile .status-block img {
    width: 25px;
    display: block;
    margin-left: auto;
}

blacklist {
    border: 1px solid #951e1e;
    display: block;
    border-radius: 10px;
    padding: 5px;
    background: #951e1e;
    color: white;
    text-align: center;
}

/* 
*/


/* Страница с фото */

#Images a {
    width: fit-content;
    height: fit-content;
    color: #000000;
}

#Images a.menu-item {
    color: white;
}

#Images .footer a {
    color: #828282;
}

#Images div.Page {
    justify-content: center;
    align-items: center;
    padding-top: 0px;
    overflow-x: hidden;
}

#Images div.Foto {
    display: block;
    margin-top: 10px;
    width: 100%;
    height: fit-content;
    background: #e5e1e1;
    border-radius: 10px;
}

#Images div.Foto div.comments, #Profile div.comments, #Blog div.Foto div.comments {
    height: fit-content;
    background: #f6f6f6;
    padding: 5px;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0px 0px 10px 10px;
}

#Images div.Foto .foto {
    width: 100%;
    object-fit: cover;
    display: block;
    margin: auto;
    border-radius: 10px 10px 0px 0px;
}

#Images div.Foto div.comments div.comment, #Profile div.comments div.comment, #Blog div.comments div.comment {
    background: white;
    padding: 5px;
    margin: 5px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

#Images .comment .avatar-wrapper, #Profile .comment .avatar-wrapper, #Blog .comment .avatar-wrapper {
    display: flex;
    align-items: center; /* выравнивание по вертикали */
    gap: 10px; /* расстояние между аватаром и именем */
}

#Images div.Foto div.comments div.comment .ava, #Profile div.comments div.comment .ava, #Blog div.comments div.comment .ava {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#Images div.Foto div.comments div.comment .name, #Profile div.comments div.comment .name, #Blog div.comments div.comment .name {
    float: left;
    font-weight: 600;
    margin: 5px;
    width: fit-content;
    min-width: 75px;
}

#Images div.Foto div.comments div.comment div.date, #Profile div.comments div.comment div.date, #Blog div.comments div.comment div.date {
    color: #828282;
    font-size: 13px;
}

#Images div.Foto div.comments div.comment div.text, #Profile div.comments div.comment div.text, #Blog div.comments div.comment div.text {
    padding: 5px;
}

#Images div.Foto div.comments form textarea, #Profile div.comments form textarea, #Blog div.comments form textarea {
    width: 100%;
    height: 35px;
    resize: none;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
}

#Images div.Foto div.comments form .btn-submit, #Profile div.comments form .btn-submit {
    padding: 8px;
    margin-top: 5px;
}

#Images div.comments .NoComments, #Profile div.comments .NoComments, #Blog div.comments .NoComments {
    color: #5f4747;
    margin: 10px;
    padding: 5px;
}

#Images div.comments form, #Profile div.comments form {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#Images div.Info {
    padding: 5px;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: column;
}

#Images div.Info p.date {
    margin-top: 12px;
    color: #828282;
    font-size: 17px;
}

#Images div.Info p.IName {
    font-weight: 600;
    color: #2c5c8b;
}

#Images div.Info img.profile-avatar {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#Images div.Info a {
    color: #000000;
}

#Images div.name-date a, #Profile div.name-date a {
    color: #000000;
}

#Images div.Info div.vertical-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

#Images img.like {
    width: 24px;
    height: 24px;
    margin: 5px 0px 0px 5px;
}

#Images div.comment delete, #Profile div.comment delete, #Blog div.comment delete {
    color: red;
    margin: 5px;
    margin-top: auto;
}

#Images div.comment .delete, #Profile div.comment .delete, #Blog div.comment .delete {
    margin-left: auto;
}

#Images blacklist, #Profile blacklist {
    margin-top: 10px;
}

#Images span.role {
    color: #000
}

#Images div.MenuHead a {
    width: 90%;
}

#Images div.comment delete img, #Blog div.comment delete img {
    width: 20px;
}

#Images div.Page {
    position: relative;
}

/* 
*/



/* 
    Админ панель
*/



/* 
    Страница статистики
*/

#Stat div.chart-container {
    width: 100%;
    margin: 0 auto;
    height: 400px;
    margin-top: 20px;
}

#Stat h1 {
    text-align: center;
    margin-top: 10px;
}

#Stat h2 {
    text-align: center;
    margin: 5px;
}

#Stat h3 {
    width: 100%;
    text-align: center;
    margin-top: 5x;
}

#Stat div.wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
}

#Stat div.wrapper div.block {
    height: fit-content;
    margin: 10px;
}

#Stat div.block color {
    color: #828282;
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 15px;
}

#Stat div.wrapper-inner {
    display: flex;
    flex-direction: column;
    border: 2px solid darkgray;
    padding: 10px;
    text-align: center;
}


#Stat count-register {
    margin-top: 5px;
    border-bottom: 1px solid;
}

#Stat count {
    font-weight: 600;
    color: darkblue;
}

#Stat div.button-wrapper {
    display: flex;
    gap: 5px;
    width: 100%;
    justify-content: center;
}

#Stat div.button-wrapper div.btn-submit {
    height: fit-content;
}

#Stat div.block#chart {
    width: 95%;
    margin: 20px auto;
}

@media (max-width: 1200px) {

#Stat div.wrapper {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

}


/* 
*/

#AdminP .buttons-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

#AdminP div.select {
    color: white;
    padding: 5px 5px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 17px;
    transition: background 0.3s;
    padding: 10px;
    width: auto;
    background: #323b55a9;
}

#AdminP div.select:hover {
    background: #000000;
}

#AdminP label {
    margin: 5px;
}

#AdminP h3 {
    margin: 5px;
} 

#AdminP input {
    margin: 5px;
}

#AdminP div.admin-wrapper {
    width: fit-content;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}


/* 
*/

/*
Страница с отправкой жалобы 
*/
#Report div.block label {
    display: block;
    margin: 10px;
    width: fit-content;
    height: fit-content;
    padding: 5px;
}

#Report p.warning {
    color: #d11a2d;
}

#Report a {
    color: darkviolet;
}

#Report p.text {
    margin: 10px;
}

#Report span.name {
    font-weight: bold;
}

#Report form textarea {
    display: block;
    margin-top: 5px;
    width: 300px;
    height: 5вфы0px;
    resize: none;
    border-radius: 4px;
    padding: 5px;
    font-family: Arial, sans-serif;
    font-size: 17px;
    color: #333;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s;
}

.accept {
    font-size: 14px;
    color: green;
    padding: 5px;
    border-radius: 3px;
    background-color: lightgreen;
    display: inline-block;
    margin-bottom: 5px;
    cursor: pointer;
    width: fit-content;
}

.attach-button img {
    height: 50px;
    width: 50px;
    cursor: pointer;
}

.buttomMessage {
    height: fit-content;
    width: 100%;
    margin-top: 10px;
}

.send-button img {
    width: 52px;
    height: 52px;
    border: none;
    cursor: pointer;
}

.DelFoto {
    cursor: pointer;
    font-size: 14px;
    color: red;
    background: white;
    padding: 1px 5px;
    border-radius: 50%;
    border: none;
    margin-left: 5px;
}


/* Страница с балансом */
#balance .block {
    margin: 10px auto;
    text-align: center;
}

#balance div.block#activate {
    width: auto;
}

#balance div.block#function {
    background-color: #f5deb39c;
}

#balance div.block#premium {
    background-color: #89EBC6;
}

#balance .balance {
margin: 0 auto 30px;
width: fit-content;
height: fit-content;
}

#balance text {
background: lightgreen;
padding: 1px;
border-radius: 5px;
}

#balance color {
    color: #828282;
}

#balance money {
color: #4caf50;
font-weight: 600;
}

#balance div.image {
    margin-top: 10px;
    margin-bottom: 10px;
}
#balance div.image img {
    border-radius: 10px;
    border: 2px solid #ccc;
    max-width: 100%;
    object-fit: cover;
}

#balance .btn-submit {
    margin: 5px 5px 0px 5px;
}

#balance div.material {
    display: flex;
    gap: 10px;
}

#balance div.material div.block {
    width: 50%;
}

#balance h3 {
    width: fit-content;
    margin: 0 auto;
}

#balance h4 {
    display: inline;
}

#balance color-name {
    color: #4caf50;
    font-weight: 600;
}

#balance div.balance a {
    display: contents;
    width: fit-content;
}

/*
*/

/* Страница с привелегией */
#activate .block {
    text-align: center;
    margin: 20px auto;
}

#activate .btn-submit {
    width: 95%;
    margin: 10px auto;
    padding: 10px;
}

#activate div.cost-container {
    display: inline-block;
    color: #666;
}

#activate div.select {
    margin: 10px;
}

#activate #premium-select {
    width: 100%;
}

#activate color {
    color: #828282;
}

#activate h4 {
    display: inline;
}

/*
*/

/* Страница с баном */

#blocked .btn-submit {
    width: fit-content;
}

#blocked table td {
    padding: 8px;
}

#blocked table td:not(:last-child) {
    border-right: 1px solid #000;
    width: 150px;
}

#blocked .block {
    margin: 10px auto;
}

#blocked .block h4 {
    text-align: center;
}

#blocked label {
    display: block;
    margin-bottom: 5px;
}

#blocked form {
    width: 500px;
    height: fit-content;
}

#blocked .banlist-table th {
    background-color: #f0f0f0;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

#blocked cols {
    color: #4caf50;
    font-weight: 600;
}

/*
*/

/* Страница с ЧС */

#BlackList table td:not(:last-child) {
    border-right: 1px solid #000;
    width: 150px;
}

/* Общие стили для таблицы */
#BlackList .blacklist-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Стили для заголовков таблицы */
#BlackList .blacklist-table th {
    background-color: #f0f0f0;
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

/* Стили для ячеек таблицы */
#BlackList .blacklist-table td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

/* Разделительная линия между колонками */
#BlackList .blacklist-table td:not(:last-child) {
    border-right: 1px solid #ddd;
}

#BlackList name {
    display: block;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

/*
*/

/* Меню */
.menu-wrapper {
    position: relative;
    display: inline-block;
    max-width: 160px;
}

.MenuHead {
    width: 100%;
    margin: 10px auto;
    background-color: #2C3E50;
    border: 1px solid #2C3E50;
    border-radius: 10px;
    animation: errorAnimation 1s;
}

.menu {
    padding: 10px;
}

.menu-item {
    display: block;
    padding: 10px;
    color: white;
    text-decoration: none;
}

.menu-item:hover {
    background-color: #000000;
    border-radius: 10px;
}

.Menu {
    padding: 10px;
    width: 100%;
    border-radius: 10px;
    background: #2C3E50;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

/*
Лента постов
*/

#News div.block {
    width: 96%;
}

#News span.nopost {
    color: #828282;
    text-align: center;
    display: block;
}

#News h3.lenta {
    text-align: center;
}

#News span.role {
    color: #000;
}

#News div.info img.NewsImg {
    width: 35px;
    object-fit: cover;
}

#News h4 {
    color: #828282;
}

#News color {
    color: #828282;
}

/*
Модерация
*/

#Moderation h3 {
    text-align: center;
}

#Moderation h1 {
    text-align: center;
    color: #000000;
}

#Moderation a {
    width: fit-content;
    display: contents;
}

#Moderation a.defected-btn .btn-submit {
    background: #951e1e;
}

#Moderation a.accept-btn .btn-submit {
    background: green;
}

#Moderation div.wrapper-btn {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    gap: 5px;
}

#Moderation .btn-submit {
    display: block;
    width: fit-content;
    margin: 5px auto;
    margin-top: auto;
    height: fit-content;
}

#Moderation div.block {
    width: 95%;
}

#Moderation button.btn-submit:hover {
    background: #000000;
}

#Moderation a.menu-item {
    display: block;
    width: inherit;
}

#Moderation div.Info {
    padding: 10px;
}

#Moderation div.all-wrapper {
    background: rgba(245, 245, 245, 0.9);
    border: 1px solid #ddd;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#Moderation div.wrapper-btn form input[name="defender"], #Moderation div.wrapper-btn form input[name="accept"] {
    display: inline-block;
}

#Moderation div.wrapper-btn form input[name="defender"] {
    background: #951e1e;
}

#Moderation div.wrapper-btn form input[name="accept"] {
    background: green;
}

#Moderation h4 {
    text-align: center;
    color: #828282;
}

/*
*/

/*
*/

@media (max-width: 768px) {

#Message .CloseButton {
    margin-right: 0;
}

.content {
        width: 90%;
        max-width: 730px;
        margin: 10px auto;
        flex-direction: column;
    }

html {
        margin: 0 auto;
    }

html, body {
    overflow-x: hidden;
}

div.Page {
    max-width: 720px;
    width: 95%;
    height: 85%;
    margin: 0 auto;
}

.MessageError {
    width: 92%;
    margin: 10px auto;
}

.MessageInfo {
    width: 92%;
    margin: 10px auto;
}

.MessageHint {
    width: 92%;
    margin: 10px auto;
}


.ChatBlock {
    width: 90%;
    margin: 10px;
}

div.textarea {
    display: flex;
}

div.ChatBlock div.text {
    max-width: 110px;
}

.Message {
    padding: 0;
    width: 100%;
}

#Report div.block {
    width: 95%;
}

#Report div.block label {
    width: 95%;
}

#Report label textarea {
    width: 95%;
}

#Message .content {
    flex-direction: row;
    height: 75%;
}

#Message div.menu-wrapper {
    display: none;
}

#Message .closeImage {
    margin-right: 0px;
    margin-bottom: 5px;
}

#Message div.Page {
    margin-top: 10px;
    border: none;
    background: none;
}

#Message div.NoMessage {
    margin: 10px auto;
}

#Register div.block {
    width: 95%;
    margin: 10px auto;
}

#Profile div.image-wrapper {
    width: 95%;
}

#Profile .image-wrapper form {
    margin: 20px auto 20px auto;
}

#Profile .image-wrapper .foto img {
    width: 125px;
    height: 125px;
}

#Profile .image-wrapper .foto {
    width: 125px;
    height: 125px;
}

#Profile div.block {
    width: 95%;
    padding: 10px;
}

#Profile .profile-blocks div.block {
    width: 90%;
}

#Profile .profile-left {
    margin: 0 auto;
    flex: auto;
}

#Profile .status-block {
    width: fit-content;
}

#Profile .profile-container {
    width: 100%;
    margin: 0 auto;
}


#Profile .image-wrapper, .noimage-wrapper { 
    width: 95%;
}

#Profile a button.btn-submit {
    background: #951e1e;
}

#Profile div.wall div.block form input[type="file"], #Blog div.block form input[type="file"] {
    max-width: 95%;
}

#Profile div.confirm, #Blog div.confirm, #Blogs div.confirm {
    width: 80%;
}

 .button-profile-edit {
    margin-top: 0px;
}


#Setting div.block {
    width: 95%;
}

#Setting .confirm {
    width: 85%;
}

#Edit .block {
    width: 85%;
}

#Images div.Foto {
    display: block;
    border-radius: 10px;
}

#Images div.Foto .foto { 
    width: 100%;
    border-radius: 10px 10px 0px 0px;
}

#Images div.Foto div.comments {
    height: fit-content;
    border-radius: 0px 0px 10px 10px;
}

#Images div.Foto div.comments form textarea {
    width: 96%;
}

#Images div.content .btn-submit {
    margin: 0;
    margin-top: 5px;
    margin-bottom: 10px;
}

#balance div.block {
    width: 95%;
    margin: 10px 10px 10px 0px;
}

#balance div.material {
    display: block;
}

#balance div.block#function {
    width: auto;
    margin: 10px auto;
}


#Notive div.block {
    width: 95%;
}

#Report div.block {
    width: 95%;
}

#Report div.report-wrapper {
    flex-wrap: wrap;
}

#ReportDialog div.block {
    width: 95%;
}

#Report name {
    display: ruby;
}

#Report div.MenuHead a {
    color: white;
}

#blocked div.block {
    width: 95%;
}

#blocked .banlist-table th {
    padding: 10px;
}

#blocked form {
    width: 100%;
}

#blocked table td {
    padding: 0px;
}

#BlackList .blacklist-table td {
    padding: 8px;
}

#Register-next div.block {
    width: 95%;
}

}



@media (max-width: 380px) {

#Search div.UsersBlock, #Guests div.UsersBlock {
    width: 150px;
}

#Message div.DialogWhy a.back-wrapper img {
    width: 20px;
}

#Message div.report-wrapper {
    right: 5px;
}

#Message div.MessageToMe div.imageMessage {
    max-width: 250px;
    max-height: 250px;
}

#Message div.MessageToMe div.imageMessage img {
    max-width: 250px;
    max-height: 250px;
}

#Message div.MessageNoMe div.imageMessage {
    max-width: 250px;
    max-height: 250px;
}

#Message div.MessageNoMe div.imageMessage img {
    max-width: 250px;
    max-height: 250px;
}


} 

@media screen and (min-width: 769px) and (max-width: 1200px) {

    #Message div.menu-wrapper {
    display: none;
}

    div.content {
        width: 90%;
        height: 85%;
        max-width: 1024px;
        margin: 10px auto;
        min-height: fit-content;
        flex-direction: row;
    }

    html {
        margin: 0 auto;
    }

    html, body {
    overflow-x: hidden;
    max-width: 100%;
}

div.Page {
    max-width: 769px;
    width: 90%;
    margin: 10px auto;
}

#Profile div.block {
    width: 95%;
    padding: 10px;
}

#Profile .profile-blocks div.block {
    width: 90%;
}

#Profile .profile-left {
    margin: 0 auto;
    flex: auto;
}

#Profile .status-block {
    width: fit-content;
}

#Profile .profile-container {
    width: 100%;
    margin: 0 auto;
}

 .image-wrapper, .noimage-wrapper { 
    width: 95%;
}

    #Profile div.image-wrapper {
    width: 98%;
}

}

@media (min-width: 1201px) {

#Message .MessageError, .MessageHint, .MessageInfo {
        width: 95%;
    }

}

@media (max-width: 480px) {

#Message form .btn-submit {
    display: block;
    margin-left: auto;
}


}