/* ===================================================== */
/* =============== ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ =============== */

:root {
    --grey_line: grey;
    --grey_button: rgba(128, 128, 128, 0.8);
    --blue_text: rgb(18, 18, 180);
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
}

/* ===================================================== */
/* =============== ГЛОБАЛЬНАЯ СТИЛИЗАЦИЯ =============== */

body, html {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

.main_body_cl {
    width: 83vw;
    height: 100vh;
}

@media (max-width: 600px) {
    body {
        flex-direction: column;
    }

    .main_body_cl {
        width: 100vw;
        height: 80vh;
    }
}

/* ===================================================== */
/* ================== СТИЛИЗАЦИЯ БЛОКА ================= */

/* =============== ПАНЕЛЬ УПРАВЛЕНИЯ (ПК) =============== */

.control_panel_cl {
    width: 15vw;
    height: calc(100% - 10vh);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    padding-left: 2vw;
    border-right: 1px solid var(--grey_line);
    padding-top: 5vh;
    padding-bottom: 5vh;
}

@media (max-width: 800px) {
    .control_panel_cl {
        display: none;
    }
}

/* --- верхний блок --- */

.control_panel_cl > div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 4vh;
}

.control_panel_cl > div:nth-child(1) > h1 {
    width: 100%;
    font-size: 3.5vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.control_panel_cl > div:nth-child(1) > h1 > div {
    width: 10vw;
    height: 10vw;
    background-image: url(./catalog_img/ICON.jpg);
    background-size: 150%;
    background-position: 50% 50%;
    border-radius: 10px;
}

.control_panel_cl > div:nth-child(1) > nav {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2vh;
}

.catalog_style_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
}

.catalog_style_cl > div {
    width: 4vh;
    height: 4vh;
    background-size: cover;
}

.catalog_style_cl > section {
    width: 4vh;
    height: 4vh;
    border-radius: 50%;
    border: 2px solid black;
    background-size: cover;
    background-image: url(../static/users/profile_photo.webp);
}

.catalog_style_cl > span {
    font-size: 2vh;
}

.catalog_style_cl {
    cursor: pointer;
}

/* --- нижний блок --- */

.control_panel_cl > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2vh;
}

/* =============== ПАНЕЛЬ УПРАВЛЕНИЯ (ПК) =============== */

.control_panel_mobile_cl {
    width: 100vw;
    height: 6.5vh;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    border-top: 1px solid var(--grey_line);
    background-color: white;
    z-index: 2001;
}

@media (max-width: 600px) {
    .control_panel_mobile_cl {
        display: flex;
        position: fixed;
        left: 0;
        bottom: 0;
    }
}

.catalog_style_mobile_cl {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5vh;
}

.catalog_style_mobile_cl > div {
    width: 3vh;
    height: 3vh;
    background-size: cover;
    display: flex;
    align-items: end;
    justify-content: end;
}

.catalog_style_mobile_cl > div:hover {
    cursor: pointer;
}

.catalog_style_mobile_cl > span {
    font-size: 1.8vh;
}

.catalog_style_mobile_cl > section {
    width: 4vh;
    height: 4vh;
    border: 2px solid black;
    border-radius: 50%;
    background-size: cover;
    background-image: url(../static/users/profile_photo.webp);
}

/* =============== МОДАЛЬНОЕ ОКНО ЗАГРУЗКИ =============== */

#download_modal_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #010c11, #010c11, #010c11, #3a414a, #3a414a, #3a414a);
    z-index: 10000;
}

#download_modal_window_id > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 700px) {
    #download_modal_window_id>video {
        object-fit: contain;
    }
}

/* #download_modal_window_id > div {
    padding: 1vh;
    padding-left: 2.5vh;
    padding-right: 2.5vh;
    border-radius: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    background-color: white;
} */

/* #download_modal_window_id > div > div {
    width: 4vh;
    height: 4vh;
    background-image: url(../static/img/loading.gif);
    background-size: cover;
}

#download_modal_window_id > div > span {
    font-size: 4vh;
} */

/* =============== НАСТРОЙКИ ПРОФИЛЯ =============== */

.profile_setting_cl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

.profile_setting_cl > div {
    width: 35%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.25vh;
    background-color: white;
    border-radius: 2vw;
    padding: 4vw;
    padding-top: 2vw;
}

.profile_setting_cl > div > article {
    width: 100%;
    display: flex;
    justify-content: end;
}

.profile_setting_cl > div > article > span {
    font-size: 4vh;
    font-weight: bold;
    color: gray;
}

.profile_setting_cl > div > article > span:hover {
    cursor: pointer;
}

.profile_setting_cl > div > span:nth-child(2) {
    font-size: 3vh;
    font-weight: bold;
}

/* --- ФИО --- */

.profile_setting_cl > div > span:nth-child(3) {
    font-size: 2.5vh;
}

#your_name_id {
    width: 96%;
    height: 6vh;
    border: 2px solid gray;
    padding-left: 4%;
    border-radius: 0.5vw;
    font-size: 2.5vh;
}

/* --- текс о себе --- */

.profile_setting_cl > div > span:nth-child(5) {
    font-size: 2.5vh;
}

#about_yourself_id {
    width: 92%;
    height: 25vh;
    padding: 4%;
    resize: none;
    font-size: 2.5vh;
    border-radius: 0.5vw;
}

/* --- просмотр публикаций --- */

.publication_review_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
}

.publication_review_cl>span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

.publication_review_cl>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.publication_review_cl>div>span{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
    border: 2px solid black;
    transition: 300ms all;
}

.publication_review_cl>div>span:hover{
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.75);
}

/* --- просмотр публикаций (главное) --- */

.publication_review_main_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px dashed gray;
    border-radius: 15px;
}

.publication_review_main_cl>span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

.publication_review_main_cl>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.publication_review_main_cl>div>span{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 15px;
    border: 2px solid gray;
    transition: 300ms all;
}

.publication_review_main_cl>div>span:hover{
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.75);
    border-color: rgba(0, 128, 0, 0.75);
}

@media (max-width: 700px) {

    .publication_review_main_cl {
        flex-direction: column;
    }

    .publication_review_main_cl>span {
        color: white;
        font-weight: normal;
        font-size: 1.75vh;
    }

    .publication_review_main_cl>div>span {
        font-size: 1.5vh;
        color: white;
        border-color: gray;
        padding: 2.5px;
        padding-left: 7.5px;
        padding-right: 7.5px;
        border-radius: 7.5px;
    }

}
/* --- панель управления настройкой профиля --- */

.profile_setting_cl > div > section {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* кнопка назад */

#button_back_profile_id {
    width: 15%;
    height: 4vh;
    padding: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
    font-weight: bold;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 1vw;
}

#button_back_profile_id:hover {
    cursor: pointer;
}

/* кнопка сохранение */

#button_save_profile_id {
    width: 30%;
    padding: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
    font-weight: bold;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 1vw;
    gap: 1vw;
}

#button_save_profile_id > div {
    width: 4vh;
    height: 4vh;
    background-size: cover;
}

#button_save_profile_id:hover {
    cursor: pointer;
}

/* кнопка выхода */

#button_exit_profile_id {
    width: 25%;
    padding: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
    font-weight: bold;
    color: red;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 1vw;
    gap: 1vw;
}

#button_exit_profile_id > div {
    width: 4vh;
    height: 4vh;
    background-size: cover;
}

#button_exit_profile_id:hover {
    cursor: pointer;
}

/* модальное окно вопроса выхода из профиля */

#exit_issue_id {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

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

    background-color: rgba(0, 0, 0, 0.5);
}

#exit_issue_id > div {
    width: 25vw;
    height: 25vh;
    background-color: white;
    border-radius: 2vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
}

#exit_issue_id > div > span {
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
}

#exit_issue_id > div > div {

    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#exit_issue_id > div > div > div {
    font-size: 2.5vh;
    font-weight: bold;
    padding: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#exit_issue_id > div > div > div:hover {
    cursor: pointer;
}

#exit_issue_id > div > div > div:nth-child(1) {
    background-color: rgba(128, 128, 128, 0.25);
}

#exit_issue_id > div > div > div:nth-child(2) {
    background-color: red;
}


@media (max-width: 1200px) {
    .profile_setting_cl > div {
        width: 45%;
    }
    #exit_issue_id > div {
        width: 35vw;
    }
}

@media (max-width: 900px) {
    .profile_setting_cl > div {
        width: 80%;
    }
    #exit_issue_id > div {
        width: 50vw;
    }
}

@media (max-width: 700px) {
    .profile_setting_c {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
    }

    .profile_setting_cl > div {
        width: 100%;
        height: 85%;
        overflow-y: scroll;
        padding: 5vh;
        padding-top: 5vh;
    }

    #exit_issue_id > div {
        width: 80vw;
        border-radius: 4vw;
    }

    #exit_issue_id > div > div > div {
        padding: 2vw;
        padding-left: 4vw;
        padding-right: 4vw;
        border-radius: 2vw;
    }

    #your_name_id {
        border-radius: 1.5vw;
    }

    #about_yourself_id {
        border-radius: 1.5vw;
        height: 20vh;
    }

    #button_back_profile_id {
        width: 20%;
        border-radius: 2vw;
        font-size: 2vh;
    }

    #button_save_profile_id {
        width: 35%;
        border-radius: 2vw;
        font-size: 2vh;
    }

    #button_save_profile_id > div {
        width: 3vh;
        height: 3vh;
    }

    #button_exit_profile_id {
        width: 30%;
        border-radius: 2vw;
        font-size: 2vh;
    }

    #button_exit_profile_id > div {
        width: 3vh;
        height: 3vh;
    }

}

/* =============== МОДАЛЬНОЕ ОКНО ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА ПУБЛИКАЦИИ =============== */

#publication_preview_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1002;
}

#publication_preview_id > div {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
}

/* --- ЗОНА ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА --- */

#preview_area_id {
    width: 50%;
    height: 100%;
    background-image: url(./users/profile_photo.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.text_setting_cl {
    position: absolute;
    background-color: black;
    border-radius: 1vh;
    padding: 1vh;
    color: white;
    min-width: 100px;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    display: inline-block;
    box-sizing: content-box;
    /* transform: translateX() translateY(); */
    white-space: pre;     /* сохранение пробелов и строк */
    overflow: hidden;     /* скрываем скроллы */
    resize: none;         /* отключаем ручное растягивание */
    wrap: off;
    z-index: 1004;
}

/* --- НАСТРОЙКА ПРЕДВАРИТЕЛЬНОГО ПРОСМОТРА --- */

#preview_setting_id {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.75vh;
    overflow-y: scroll;
}

#preview_setting_id > h2 {
    font-size: 3vh;
    margin-top: 5vh;
    margin-left: 2vw;
}

#preview_setting_id > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
    margin-left: 2vw;
}

#preview_setting_id > div {
    margin-left: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 4vh;
    border-radius: 1vh;
    gap: 1vw;
    border: 2px solid black;
    transition: 300ms all;
    margin-bottom: 25px;
}

#preview_setting_id > div:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 255, 0.5);
    color: rgba(0, 128, 0, 0.5);
}

#preview_setting_id > div > div {
    width: 5vh;
    height: 5vh;
    background-size: cover;
}

#preview_setting_id > div > b {
    font-size: 5vh;
    font-weight: bold;
    color: black;
}

#preview_setting_id > div > span {
    font-size: 2.5vh;
    color: black;
}

#preview_setting_id > section {
    width: 85%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 5vh;
    margin-left: 2.5vw;
}


#menu_control_panel_id {
    width: 85%;
    height: 15vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    margin-bottom: 5vh;
    margin-left: 2.5vw;
}

@media (max-width: 700px) {
    #preview_setting_id>section {
        width: 100vw;
        height: 60vh;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        padding-bottom: 15vh;
    }

    #preview_setting_id {
        overflow-y: unset;
    }

    #preview_setting_id>section:nth-child(14) {
        width: calc(100% - 10px);
        padding-top: 5vh;
        height: 30vh;
        align-items: start;
        padding-left: 5px;
        padding-right: 5px;
    }

    #menu_control_panel_id {
        padding-bottom: 15vh;
    }

}

#menu_control_panel_id > div {
    font-size: 2vh;
    font-weight: bold;
    padding: 1vh;
    padding-left: 2vw;
    padding-right: 2vw;
    border: 2px solid black;
    border-radius: 1vh;
    transition: 300ms all;
}

#menu_control_panel_id > div:hover {
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.5);
    color: rgba(0, 0, 255, 0.5);
}

#preview_setting_id > section > div {
    font-size: 2vh;
    font-weight: bold;
    padding: 1vh;
    padding-left: 2vw;
    padding-right: 2vw;
    border: 2px solid black;
    border-radius: 1vh;
    transition: 300ms all;
}

#preview_setting_id > section > div:hover {
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.5);
    color: rgba(0, 0, 255, 0.5);
}

.block_time_text_storiz_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.block_time_text_storiz_cl > article > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.block_time_text_storiz_cl > article > div > input {
    width: 22.5vh;
    font-size: 2vh;
    color: black;
    border: 2px solid gray;
    border-radius: 5px;
    background: none;
    padding: 5px;
}

.block_time_text_storiz_cl > article > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#preview_setting_id > article, .block_time_text_storiz_cl > article {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1vh;
    padding-left: 5vh;
}

#preview_setting_id > article > span, .block_time_text_storiz_cl > article > span {
    font-size: 2vh;
    font-weight: bold;
}

#preview_setting_id > article > section, .block_time_text_storiz_cl > article > section {
    display: flex;
    align-items: center;
    gap: 1vw;
}

#preview_setting_id > article > section > div, .block_time_text_storiz_cl > article > section > div {
    width: 5vh;
    height: 5vh;
    border-radius: 1vh;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

#preview_setting_id > article > section > div:hover, .block_time_text_storiz_cl > article > section > div:hover {
    cursor: pointer;
    background-color: green;
}

#preview_setting_id > article > section > span, .block_time_text_storiz_cl > article > section > span {
    font-size: 3.5vh;
    font-weight: bold;
}

#preview_setting_id > article > section > article, .block_time_text_storiz_cl > article > section > article {
    width: 6.5vh;
    height: 5vh;
    border-radius: 1vh;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
    font-size: 1.8vh;
    text-align: center;
}

#preview_setting_id > article > section > article:hover, .block_time_text_storiz_cl > article > section > article:hover {
    cursor: pointer;
    background-color: green;
}

@media (max-width: 700px) {

    #publication_preview_id {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 105vh;
        background-color: white;
        flex-direction: column;
        justify-content: start;
    }

    #publication_preview_id > div {
        width: 100%;
        flex-direction: column;
    }

    #preview_area_id {
        width: 100vw;
        height: 100vh;
    }

    #preview_setting_id {
        width: 100%;
        height: auto;
    }

    #preview_setting_id > article, .block_time_text_storiz_cl > article {
        padding-left: 1vh;
    }

}

/* === панель управления текстом === */

#text_control_panel_id {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-between;
    margin-left: 2vw;
    margin-bottom: 2vh;
}

#text_control_panel_id > section {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1vh;
}

#text_control_panel_id > section > div {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#text_control_panel_id > section > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#text_control_panel_id > section > div > input {
    font-size: 2vh;
    color: black;
}

#text_control_panel_control_id {
    width: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 2vw;
    padding-bottom: 10vh;
}

#text_control_panel_control_id > article {
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border: 2px solid black;
    border-radius: 1vh;
    transition: 300ms all;
}

#text_control_panel_control_id > article:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.5);
}

#text_control_subscriber_mark_id {
    width: 65%;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 2vw;
    padding-bottom: 10vh;
}

#text_control_subscriber_mark_id > article {
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border: 2px solid black;
    border-radius: 1vh;
    transition: 300ms all;
}

#text_control_subscriber_mark_id > article:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.5);
}

#font_block_N_id {
    width: 3.5vh;
    height: 3.5vh;
    border: 2px solid black;
    border-radius: 0.5vh;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

#font_block_B_id {
    width: 3.5vh;
    height: 3.5vh;
    border: 2px solid black;
    border-radius: 0.5vh;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

#font_block_K_id {
    width: 3.5vh;
    height: 3.5vh;
    border: 2px solid black;
    border-radius: 0.5vh;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms all;
}

#font_block_N_id:hover, #font_block_B_id:hover, #font_block_K_id:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.5);
}

@media (max-width: 700px) {
    #text_control_panel_id {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: space-between;
        margin-left: 0w;
        margin-bottom: 2vh;
    }
    
    #text_control_panel_id > section {
        width: 100%;
        gap: 2vh;
    }

    #text_control_panel_id > section:nth-child(1) {
        margin-bottom: 2vh;
    }
}

/* =============== МОДАЛЬНОЕ ОКНО НАСТРОЙКИ ПУБЛИКАЦИИ =============== */

#publication_setting_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#publication_setting_id > div {
    width: 50%;
    height: 80%;
    padding: 2.5vw;
    background-color: white;
    border-radius: 2vw;
}

#publication_setting_id > div > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
}

#publication_setting_id > div > div > h2 {
    font-size: 3.5vh;
    color: black;
    margin: 0;
    margin-bottom: 3vh;
}

@media (max-width: 700px) {
    #publication_setting_id > div > div > h2 {
        font-size: 3vh;
        margin-bottom: 1.5vh;
    }
}

#publication_setting_id > div > div > span {
    font-size: 2vh;
    color: black;
    margin-bottom: 2vh;
}

#name_file_m_id {
    width: 100%;
    height: 3vh;
    font-size: 2vh;
    color: black;
    margin-bottom: 2vh;
}

#publication_setting_id > div > div > b {
    font-size: 2vh;
    color: black;
}

.file_selector_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border: 2px solid;
    border-radius: 1vh;
    transition: 300ms all;
}

.file_selector_cl:hover {
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.5);
    color: var(--blue_text);
}

.file_selector_cl > div {
    width: 5vh;
    height: 5vh;
    background-size: cover;
}

.file_selector_cl > span {
    font-size: 2vh;
}

.file_selector_cl > span > span {
    font-size: 1.75vh;
}

.selecting_publication_setting_cl {
    width: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 2vh;
    margin-bottom: 2vh;
}

.selecting_publication_setting_cl > div {
    width: 10vw;
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border-radius: 1vh;
    border: 2px solid black;
    transition: 300ms all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selecting_publication_setting_cl > div:hover {
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.5);
    color: var(--blue_text);
}

.selecting_publication_setting_cl > section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.selecting_publication_setting_cl > section > input {
    width: 50px;
    height: 4vh;
    font-size: 2vh;
    text-align: center;
}

.selecting_publication_setting_go_cl {
    width: 60%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 2px solid gray;
    padding-top: 4vh;
    margin-bottom: 5vh;
}

.selecting_publication_setting_go_cl > div {
    width: 10vw;
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border-radius: 1vh;
    border: 2px dashed black;
    transition: 300ms all;
    display: flex;
    align-items: center;
    justify-content: center;
}

.selecting_publication_setting_go_cl > div:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 255, 0.5);
    color: rgba(0, 128, 0, 0.5);
}

@media (max-width: 1000px) {

    .selecting_publication_setting_cl > div {
        width: 12.5vw;
    }

    .selecting_publication_setting_go_cl > div {
        width: 12.5vw;
    }

    #publication_setting_id > div > div {
        width: 80%;
    }
}

@media (max-width: 700px) {

    .selecting_publication_setting_cl {
        width: 80%;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }

        .selecting_publication_setting_cl>div {
            width: 25vw;
            font-size: 1.8vh;
            font-weight: bold;
            padding: 0.75vh;
            padding-left: 1.5vh;
            padding-right: 1.5vh;
        }

    .selecting_publication_setting_cl > section > input {
        width: 40px;
        height: 4vh;
        font-size: 1.8vh;
    }

    .selecting_publication_setting_go_cl {
        width: 80%;
        padding-top: 2vh;
    }

    .selecting_publication_setting_go_cl > div {
        width: 25vw;
        font-size: 2vh;
    }

    #publication_setting_id > div {
        position: fixed;
        top: 100px;
        left: 0;
        width: 100%;
        border-top-left-radius: 4vh;
        border-top-right-radius: 4vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: 250px;
        padding-left: 0;
        padding-right: 0;
        transition: top 0.3s ease-out;
    }

    #publication_setting_id > div > div {
        padding-top: 2.5%;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

}

/* =============== МОДАЛЬНОЕ ОКНО ПРОСМОТРА ПУБЛИКАЦИИ =============== */

#publication_viewer_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.25);
    display: none;
    align-items: center;
    justify-content: center;
}

#publication_viewer_id > div {
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
}

/* --- ЗОНА ПРОСМОТРА --- */

#publication_scroll_id {
    width: 50%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    /* white-space: nowrap; */
}

#publication_scroll_id > article {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    width: max-content; /* 💡 вот это заставляет его быть шире контайнера */
}

#publication_viewer_img_id, #publication_scroll_block_id > div {
    width: 40vw;
    height: 96%;
    background-image: url(./users/profile_photo.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
    padding-right: 2%;
    padding-bottom: 4%;
}

@media (max-width: 700px) {
    #publication_viewer_img_id, #publication_scroll_block_id > div {
        height: 94%;
        padding-right: 0;
        padding-bottom: 0; 
    }
}

#publication_viewer_video_id, #publication_scroll_block_id > video  {
    width: 40vw;
    height: 100%;
    display: none;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
    z-index: 1000;
}

/* СКРЫВАЕМ только кнопки */
#publication_scroll_block_id > video::-webkit-media-controls-play-button,
#publication_scroll_block_id > video::-webkit-media-controls-volume-slider,
#publication_scroll_block_id > video::-webkit-media-controls-mute-button,
#publication_scroll_block_id > video::-webkit-media-controls-fullscreen-button,
#publication_scroll_block_id > video::-webkit-media-controls-current-time-display,
#publication_scroll_block_id > video::-webkit-media-controls-time-remaining-display,
#publication_scroll_block_id > video::-webkit-media-controls-seek-back-button,
#publication_scroll_block_id > video::-webkit-media-controls-seek-forward-button {
  display: none !important;
}


#video_management_id {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* --- ЗОНА КОММЕНТАРИЕВ --- */

.publication_viewer_comment_cl {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.publication_owner_data_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid gray;
}

.publication_owner_data_cl > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1vw;
    margin-top: 0.5vh;
    width: 100%;
    padding-bottom: 1vh;
}

.publication_owner_data_cl > div > div {
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

.publication_owner_data_cl > div > span:nth-child(2) {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

.publication_owner_data_cl > div > span:nth-child(3) {
    font-size: 1.8vh;
    color: var(--blue_text);
}

.publication_owner_data_cl > section {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 7vw;
    gap: 1vw;
    /* padding-right: 2vw; */
}

.publication_owner_data_cl > section > div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.publication_owner_data_cl > section > div:nth-child(1) > div {
    width: 4vh;
    height: 4vh;
    background-image: url(./message/share.png);
    background-size: cover;
}

.publication_owner_data_cl > section > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.publication_owner_data_cl > section > div:nth-child(2) > div {
    width: 4vh;
    height: 4vh;
    background-image: url(./message/no_like.png);
    background-size: cover;
}

.publication_owner_data_cl > section > div:nth-child(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.publication_owner_data_cl > section > div:nth-child(3) > div {
    width: 4vh;
    height: 4vh;
    background-image: url(./img/no_hidden_password.png);
    background-size: cover;
}


.publication_owner_data_cl > section > div > span {
    font-size: 2vh;
    color: black;
}

.publication_owner_data_cl > section > div:hover {
    cursor: pointer;
}

#settings_publ_id {
    width: 3vh;
    height: 3vh;
    background-image: url(./catalog_img/settings.png);
    background-size: cover;
}

#settings_publ_id:hover {
    cursor: pointer;
}

#hide_complain_id {
    width: 3vh;
    height: 3vh;
    background-image: url(./img/three_points.png);
    background-size: cover;
}

#hide_complain_id:hover {
    cursor: pointer;
}

#blocking_and_complaints_id {
    position: absolute;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 2px 2px 4px black;
    display: none;
    flex-direction: column;
    align-items: start;
    gap: 15px;
}

#blocking_and_complaints_id>span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#blocking_and_complaints_id>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#blocking_and_complaints_id>div>div{
    width: 3vh;
    height: 3vh;
    background-size: cover;
}

#blocking_and_complaints_id>div>span{
    font-size: 1.75vh;
    font-weight: bold;
    color: black;
}

#blocking_and_complaints_id>div:hover {
    cursor: pointer;
}



.entering_comments_cl {
    width: 100%;
    height: 8vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    /* margin-bottom: 2vh; */
    border-top: 1px solid gray;
    z-index: 100;
}

.entering_comments_cl > div {
    font-size: 4vh;
}

.entering_comments_cl > textarea {
    width: 25%;
    height: 3.5vh;
    padding: 1.5vh;
    padding-left: 2vh;
    padding-right: 2vh;
    font-size: 2.5vh;
    /* font-weight: bold; */
    border: none;
    border-radius: 2.5vh;
    position: absolute;
    transform: translateX(5vw) translateY(0);
    resize: none;
    border: none;
    outline: none;
    box-shadow: 1px 1px 2px black;
}

/* .entering_comments_cl > section {
    font-size: 2vh;
    font-weight: bold;
    color: var(--blue_text);
    margin-right: 2vw;
} */

.entering_comments_cl > section {
    width: 8vh;
    height: 6vh;
    background-image: url(message/message_sending.png);
    background-size: cover;
    margin-right: 5%;
}

.entering_comments_cl > section:hover {
    cursor: pointer;
}

/* --- Ввод комментариев (мобильный) --- */
.entering_comments_mob_cl {
    width: 100%;
    height: 10vh;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    margin-bottom: 2vh;
    border-top: 1px solid gray;
    background-color: white;
}

.entering_comments_mob_cl > span {
    font-size: 1.8vh;
    color: gray;
}

@media (max-width: 1000px) {

    #publication_scroll_id {
        width: 100vw;
    }

    #publication_scroll_block_id > div {
        width: 100vw;
    }

    #publication_scroll_block_id > video {
        width: 100vw;
    }


    #publication_viewer_id > div {
        width: 95%;
        height: 95%;
    }

    .publication_owner_data_cl > div > span:nth-child(2) {
        font-size: 2vh;
    }

    .publication_owner_data_cl > div > span:nth-child(3) {
        font-size: 1.6vh;
    }

    .entering_comments_cl > div {
        font-size: 3vh;
    }

    .entering_comments_cl > textarea {
        transform: translateX(8vw) translateY(0);
        width: 45%;
        font-size: 2vh;
    }

}

@media (max-width: 700px) {

    #publication_viewer_id {
        overflow-y: scroll;
    }

    #publication_viewer_id > div {
        width: 100vw;
        height: 95vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: white;
        padding-bottom: 10%;
    }

    #publication_viewer_img_id {
        width: 100vw;
        height: 90vh;
    }
    
    #publication_viewer_video_id {
        width: 100vw;
        height: 90vh;
    }

    .publication_viewer_comment_cl {
        width: 96%;
        height: 10vh;
    }

    .entering_comments_mob_cl {
        display: flex;
    }

    #publication_scroll_id {
        height: 90%;
    }

    
    .entering_comments_cl > textarea {
        font-size: 1.75vh;
    }
}

/* ========== ЗАКРЫТИЕ ПУБЛИКАЦИИ ========== */

#publication_closure_id {
    position: fixed;
    top: 5vh;
    right: 8vw;
    width: 10vh;
    height: 10vh;
    border: 4px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vh;
    font-weight: bold;
    color: black;
    background-color: white;
}

#publication_closure_id:hover {
    cursor: pointer;
}

@media (max-width: 700px) {

    #publication_closure_id {
        display: none;
    }

}

/* ========== УПРАВЛЕНИЕ АУДИОДОРОЖКОЙ ========== */

#publication_viewer_audio_id {
    position: fixed;
    top: 100000;
    left: 100000;
}

#publication_viewer_audio_mob_id {
    position: fixed;
    top: 100000;
    left: 100000;
}


#audio_management_id, #publication_scroll_block_id > div > div {
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    background-image: url(./img/audio_yes.png);
    background-size: cover;
}

#audio_management_id:hover, #publication_scroll_block_id > div > div:hover {
    cursor: pointer;
}

/* --- текст_аудиодорожки --- */

#text_audio_track_id {
    white-space: nowrap; /* Запрещает перенос строки */
    overflow: hidden; /* Скрывает выходящий за границы текст */
    position: fixed;
    height: 4vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 2vh;
}

#text_audio_track_id > span.marquee {
    font-size: 1.6vh;
    display: inline-block;
    padding-left: 100%; /* Начало за пределами экрана */
    animation: marquee 10s linear infinite;
    white-space: nowrap;
}

/* --- управление публикациями --- */

#publication_management_id {
    white-space: nowrap; /* Запрещает перенос строки */
    overflow: hidden; /* Скрывает выходящий за границы текст */
    position: fixed;
    bottom: 12.5vh;
    width: 40vw;
    height: 4vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    padding-left: 2vh;
}

#publication_management_id > div {
    width: 1.5vh;
    height: 1.5vh;
    border-radius: 50%;
    background-color: gray;
    opacity: 0.5;
    transition: 300ms all;
}

#publication_management_id > div:hover {
    cursor: pointer;
    background-color: rgb(17, 198, 234);
}

@keyframes marquee {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-100%);
    }
}

@media (max-width: 700px) {
    #text_audio_track_id {
        width: 100%;
    }
    #publication_management_id {
        position: static;
        bottom: 15vh;
        gap: 2vw;
    }
    #publication_management_id > div {
        width: 1.5vh;
        height: 1.5vh;
    }
}

/* ========== комментарии публикации ========== */

.publication_comments_cl {
    width: 100%;
    height: calc(100% - 8vh);
    overflow-y: scroll;
    z-index: 1002;
}

.publication_comments_cl > section {
    width: 100%;
}

.publ_comm_cl {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    margin-left: 2%;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.white_comment_block_cl {
    background-color: white;
}

.green_comment_block_cl {
    background-color: rgba(133, 234, 133, 0.5);
}

/* информация публикации */

.publication_comments_info_cl {
    width: 98%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5vh;
}

.publication_comments_info_cl > section {
    display: flex;
    align-items: center;
    gap: 0.5vw;
}

.publication_comments_info_cl > section > div:nth-child(1) {
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    border: 2px solid black;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

.publication_comments_info_cl > section > span:nth-child(2) {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

.publication_comments_info_cl > section > span:nth-child(3) {
    font-size: 2vh;
    color: black;
}

.publication_comments_info_cl > section > div:nth-child(4) {
    width: 3vh;
    height: 3vh;
    background-image: url(./message/no_like.png);
    background-size: cover;
}

.publication_comments_info_cl > section > div:nth-child(4):hover {
    cursor: pointer;
}

.publication_comments_info_cl > section > span:nth-child(5) {
    font-size: 1.8vh;
    color: black;
}

.publication_comments_info_cl > section > span:nth-child(6) {
    font-size: 1.8vh;
    font-weight: bold;
    /* color: var(--blue_text); */
    color: black;
}

.publication_comments_info_cl > section > span:nth-child(6):hover {
    cursor: pointer;
}

#comment_menu_id {
    width: 3vh;
    height: 3vh;
    background-image: url(./img/three_points.png);
    background-size: cover;
}

#comment_menu_id:hover {
    cursor: pointer;
}

#comment_menu_id > section {
    position: absolute;
    width: 10vw;
    height: auto;
    padding: 1.5vh;
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 1vh;
    background-color: white;
    border-radius: 1vh;
    box-shadow: 5px 5px 10px black;
    transform: translateX(-10vw);
}

#comment_menu_id > section > div {
    display: flex;
    align-items: center;
    gap: 0.5vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

#comment_menu_id > section > div > div {
    width: 3vh;
    height: 3vh;
    background-size: cover;
}

#comment_menu_id > section > div > span {
    font-size: 2vh;
    font-weight: bold;
}

#comment_deletion_id {
    display: none;
}

/* текст публикации */

.publication_comments_message_cl {
    width: 95%;
    text-align: justify;
    padding-bottom: 0.5vh;
}

@media (max-width: 700px) {

    .publication_comments_message_cl {
        font-size: 1.75vh;
    }

    .publication_comments_cl {
        display: flex;
        position: fixed;
        top: 100vh;
        left: 0;
        width: 100vw;
        height: 92.5vh;
        z-index: 10;
        background-color: white;
        transition: 500ms all;
    }

    .entering_comments_cl {
        display: none;
        height: 7.5vh;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: white;
    }

    #comment_menu_id > section {
        position: absolute;
        width: 30vw;
        transform: translateX(-100px);
    }
}

/* =============== ПОД_КОММЕНТАРИИ =============== */

.publication_comments_sub_message_cl {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding-left: 10%;
    /* border-bottom: 1px solid var(--grey_line); */
}

.publication_comments_sub_message_cl > span {
    font-size: 2vh;
    color: gray;
    display: none;
}

.publication_comments_sub_message_cl > span:hover {
    cursor: pointer;
}

.publication_comments_sub_message_cl > div {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 5px;
    border-radius: 10px;
    margin-bottom: 5px;
    box-shadow: -1px -1px 2px black;
}

/* --- Ввод комментариев --- */

#user_response_id {
    position: absolute;
    display: flex;
    flex-direction: row;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1vw;
    transform: translateY(-40px);
    padding-left: 1vw;
}

#user_response_id > div {
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    border: 2px solid black;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

#user_response_id > span {
    font-size: 1.8vh;
    font-weight: bold;
    color: black;
}

#user_response_id > section {
    font-size: 1.8vh;
    font-weight: bold;
    color: var(--blue_text);
}

#user_response_id > section:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ВЫБОРА ТИПА ФАЙЛА (из галереи или из камеры) =============== */

#gallery_or_camera_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

#gallery_or_camera_id > div {
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 2vh;
    background-color: white;
    border-radius: 2vh;
    padding: 5%;
}

#gallery_or_camera_id > div > span {
    font-size: 4vh;
    font-weight: bold;
    color: black;
}

#gallery_or_camera_id > div > section {
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border-radius: 1vh;
    border: 2px dashed black;
    font-size: 2.5vh;
    color: black;
    transition: 300ms all;
}

#gallery_or_camera_id > div > section:hover {
    cursor: pointer;
}

.gallery_or_camera_buttom_cl {
    width: 45%;
    height: 8vh;
    border: 2px solid black;
    border-radius: 1vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 2vh;
    gap: 4vh;
    transition: 300ms all;
}

.gallery_or_camera_buttom_cl:hover {
    cursor: pointer;
    background-color: green;
}

.gallery_or_camera_buttom_cl > img {
    width: 5vh;
    height: 5vh;
}

.gallery_or_camera_buttom_cl > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

@media (max-width: 700px) {

    #gallery_or_camera_id > div > span {
        font-size: 3vh;
        text-align: center;
    }

    #gallery_or_camera_id > div {
        width: 85%;
        height: 60%;
        /* padding-top: 30%; */
        justify-content: space-evenly;
    }
    .gallery_or_camera_buttom_cl {
        width: 80%;
    }

}

/* =============== ПРОСМТОТР ЧУЖОГО ПРОФИЛЯ =============== */

.body_profile_cl {
    width: 60%;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: scroll;
    overflow-x: hidden;
}

#mainframe_id {
    position: fixed;
    top: 0;
    right: 0;
    background-color: white;
    padding-left: 10%;
    padding-right: 10%;
}

@media (max-width: 700px) {
    .body_profile_cl {
        width: 100%;
    }

    #mainframe_id {
        padding-left: 0;
        padding-right: 0;
    }
}

.user_data_cl, .user_data_m_cl {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.user_data_cl>div, .user_data_m_cl>div {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10%;
}

@media (max-width: 600px) {
    .user_data_cl>div, .user_data_m_cl>div  {
        gap: 2.5%;
        padding-left: 2vw;
    }
}

/* --- иконка пользователя --- */

#user_login_display_id {
    font-size: 3vh;
    font-weight: bold;
    color: black;
    text-indent: 2vw;
}

#user_login_display_m_id {
    width: 100%;
    font-size: 3vh;
    font-weight: bold;
    color: black;
    text-indent: 2vw;
    padding-top: 4vh;
    padding-bottom: 1vh;
}

/* --- Блок иконок --- */

.icon_block_cl {
    width: 20vh;
    height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon_block_cl>section{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

@media(max-width: 800px) {
    .icon_block_cl {
        width: 15vh;
        height: 15vh;
    }
}

.icon_main_login_cl, .icon_main_login_m_cl {
    width: 10vh;
    height: 10vh;
    border: 1px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-image: url(../static/users/profile_photo.jpg);
    overflow: hidden;
    transform: translateX(5px);
}

@media (max-width: 800px) {
    .icon_main_login_cl, .icon_main_login_m_cl {
        width: 7.5vh;
        height: 7.5vh;
        transform: translateX(0px);
    }
}

.icon_main_login_cl > span, .icon_main_login_m_cl > span  {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7.5vh;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 4px black;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 300ms all;
}

.icon_main_login_cl > span:hover, .icon_main_login_m_cl > span:hover {
    cursor: pointer;
    opacity: 1;
}

/* --- статус пользователя --- */

.user_status_cl {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 2vh;
}

/* логин/имя/кнопка редактирования */

.login_name_edit_button_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.login_name_edit_button_cl > div:nth-child(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5vw;
}

.login_name_edit_button_cl > div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.login_name_edit_button_cl > div:nth-child(2)>div:nth-child(1) {
    width: 50px;
    height: 50px;
    background-image: url(./catalog_img/ICON.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 150%;
}

.login_name_edit_button_cl > div:nth-child(2)>div:nth-child(2) {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 2px 2px 4px black;
    background-image: url(./img/three_points.png);
    background-size: 70%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.login_name_edit_button_cl > div:nth-child(2)>div:nth-child(2):hover {
    cursor: pointer;
}

#edit_profile_id {
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    background-color: rgba(128, 128, 128, 0.4);
    border-radius: 0.25vw;
    transition: 300ms all;
}

#edit_profile_id:hover {
    cursor: pointer;
    background-color: var(--grey_button);
}

@media (max-width: 600px) {

    .user_status_cl {
        width: 65%;
    }

    .login_name_edit_button_cl > div:nth-child(1) {
        font-size: 1.8vh;
        flex-direction: column;
        align-items: start;
    }

    .login_name_edit_button_cl > div:nth-child(1) > span:nth-child(2) {
        display: none;
    }

    #edit_profile_id {
        font-size: 1.5vh;
        padding-left: 1.25vh;
        padding-right: 1.25vh;
        border-radius: 2vw;
    }

    .icon_main_login_cl {
        width: 15vh;
        height: 15vh;
    }
    
}

/* количества публикаций/подписок/подписчиков */

.number_of_publications_subscriptions_subscribers_cl {
    width: 80%;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.number_of_publications_subscriptions_subscribers_cl > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vw;
}

.number_of_publications_subscriptions_subscribers_cl > div > span {
    font-size: 2vh;
    color: var(--grey_button);
}

@media (max-width: 600px) {
    .number_of_publications_subscriptions_subscribers_cl {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .number_of_publications_subscriptions_subscribers_cl > div > b {
        font-size: 1.8vh;
    }

    .number_of_publications_subscriptions_subscribers_cl > div > span {
        font-size: 1.8vh;
    }
}

/* описание пользователя */

.user_description_cl {
    width: 100%;
    font-size: 1.8vh;
}

/* =============== ИСТОРИИ =============== */

.main_stories_cl {
    width: 100%;
    /* height: 15vh; */
    margin-top: 5vh;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: start;
}

.main_stories_cl>div {
    width: calc(100% - 4vw);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.adding_history_cl {
    /* width: 10vh;
    height: 10vh; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.adding_history_cl:hover {
    cursor: pointer;
}

.adding_history_cl > section {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    border: 2px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adding_history_cl > section > div {
    width: 9vh;
    height: 9vh;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    background-image: url(../static/img/addition.svg);
    background-size: cover;
}

.adding_history_cl > span {
    font-size: 1.8vh;
    font-weight: bold;
}

@media (max-width: 600px) {
    .main_stories_cl {
        padding-left: 4vw;
    }
}

/* =============== ПУБЛИКАЦИИ =============== */

.profile_publications_m_cl {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-wrap: wrap;
    gap: 0.5%;
    margin-top: 0.5vh;
    padding-bottom: 100px;
}

.profile_publications_m_cl > section {
    width: 33%;
    height: 20vw;
    background-color: rgba(128, 128, 128, 0.5);
    margin-bottom: 0.5vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: 300ms all;
}

.profile_publications_m_cl > section:hover {
    cursor: pointer;
}

@media (max-width: 700px) {
    .profile_publications_m_cl > section {
        height: 40vw;
    }
}

.profile_publications_m_cl > section > div {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2vw;
    opacity: 0;
    transition: 300ms all;
}

.profile_publications_m_cl > section > div:hover {
    opacity: 1;
}

.profile_publications_m_cl > section > div > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5vw;
}

.profile_publications_m_cl > section > div > div:nth-child(1) > div {
    width: 3vh;
    height: 3vh;
    background-image: url(./img/like_block.svg);
    background-size: cover;
}

.profile_publications_m_cl > section > div > div:nth-child(2) > div {
    width: 3vh;
    height: 3vh;
    background-image: url(./img/message_block.svg);
    background-size: cover;
}

.profile_publications_m_cl > section > div > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: white;
}

/* =============== МОДАЛЬНОЕ ОКНО УСТАНОВКИ ХЕШТЕГА =============== */

#hashtag_setting_block_id {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2003;
}

#hashtag_setting_block_id > div {
    width: 50vw;
    height: 50vh;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

#hashtag_setting_block_id > div > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

#hashtag_setting_block_id > div > textarea {
    width: 65%;
    height: 25%;
    border: 3px dashed gray;
    border-radius: 1vh;
    resize: none;
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
    padding: 1vw;
}

#hashtag_setting_block_id > div > div {
    width: 90%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

#hashtag_setting_block_id > div > div > div {
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
    border-radius: 1vh;
    border: 3px solid gray;
    font-size: 3vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

#hashtag_setting_block_id > div > div > div:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.5);
}

@media (max-width: 700px) {
    #hashtag_setting_block_id > div {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }
}

#hashtag_review_id {
    position: absolute;
    width: calc(40% - 4vw);
    height: 20vh;
    transform: translateY(calc(200% - 8vw));
    z-index: 1003;
    padding: 2vw;
    padding-bottom: 0;
    font-size: 2.5vh;
    /* font-weight: bold; */
    color: rgba(128, 128, 128, 0.9);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

@media (max-width: 700px) {
    #hashtag_review_id {
        display: none;
    }
}

@media (max-width: 700px) {
    #hashtag_review_id {
        width: 100%;
        transform: translateY(140%);
    }
}

#hashtag_review_two_id {
    position: absolute;
    width: calc(40% - 4vw);
    height: 20vh;
    transform: translateY(-40vh);
    z-index: 1003;
    padding: 2vw;
    padding-bottom: 0;
    font-size: 2.5vh;
    /* font-weight: bold; */
    color: rgba(128, 128, 128, 0.9);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    text-align: justify;
}

@media (max-width: 1000px) {
    #hashtag_review_two_id  {
        width: 61%;
        transform: translateY(-40vh);
    }
}

@media (max-width: 700px) {
    #hashtag_review_two_id  {
        /* width: 100%; */
        transform: translateY(-25vh);
    }
}

/* =============== МОДАЛЬНОЕ ОКНО ПРОСМОТРА ПУБЛИКАЦИИ (мобильная версия) =============== */

#publication_viewer_mob_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: black;
    overflow-y: scroll;
    overflow-x: hidden;
    display: none;
    flex-direction: column;
    transform: translateY(0vh);
}

#publication_viewer_mob_id > section {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

/* === Материалы === */

.mob_publ_materials_cl {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: end;
}

.mob_publ_materials_cl > section:nth-child(1) {
    position: absolute;
    transform: translateX(-10px) translateY(10px);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    font-size: 16px;
    color: white;
    background-color: black;
}

.mob_publ_materials_cl > div {
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    display: flex;
}

.mob_publ_materials_cl > div > div {
    height: 100%;
    display: flex;
    flex-direction: row;
}

.mob_publ_materials_cl > div > div > div {
    width: 100vw;
    height: 100%;
    background-image: url(./users/profile_photo.jpg);
    /* background-size: cover; */
    background-size: contain;
    background-position: 50% 50%;
}

/* === Панель управления === */

.mob_publ_control_panel_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    gap: 4vw;
}

.mob_publ_control_panel_cl > span {
    font-size: 12px;
    color: gray;
    margin-right: 5px;
}

.mob_publ_control_panel_cl > section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    /* gap: 10px; */
}

.mob_publ_control_panel_cl > section > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.mob_publ_control_panel_cl > section > div > div {
    width: 30px;
    height: 30px;
    background-size: cover;
}

.mob_publ_control_panel_cl > section > div:nth-child(2) > div {
    width: auto;
    height: auto;
    background-size: cover;
    padding: 2.5px;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 5px;
    border: 2px solid gray;
    border-radius: 2.5px;
    font-size: 1.75vh;
    color: gray;
    text-align: center;
    line-height: 1;
}

.mob_publ_control_panel_cl > section > div:nth-child(3) > div {
    width: 30px;
    height: 25px;
    background-size: cover;
}

.mob_publ_control_panel_cl > section > div > span {
    font-size: 14px;
    color: white;
    width: 5vw;
}

#menu_mob_but_id {
    display: none;
}

/* === уровень страницы === */

.mob_publ_page_level_cl {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.mob_publ_page_level_cl > div {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: gray;
}

/* === Хештег === */

.mob_publ_hashtag_cl {
    width: calc(100vw - 20px);
    padding-left: 10px;
    padding-right: 10px;
}

.mob_publ_hashtag_cl > span {
    width: 95vw;
}

.mob_publ_hashtag_cl > span > b {
    font-size: 12px;
    color: white;
}

.mob_publ_hashtag_cl > span > span {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.5);
}

.mob_publ_hashtag_cl > span > span > b {
    font-size: 12px;
    color: white;
    font-weight: normal;
}

.mob_publ_hashtag_cl > span > span > span {
    font-size: 12px;
    color: gray;
}

.mob_publ_hashtag_cl > span > span > a {
    font-size: 12px;
    color: rgb(36, 36, 206);
    font-weight: normal;
    text-decoration: underline;
}

/* --- БУФЕР --- */

#boofer_temp_one_id {
    height: 150px;
}

/* --- Комментарии (мобильный) */

.publication_comments_two_cl {
    width: 100%;
    height: calc(100% - 8vh);
    overflow-y: scroll;
    z-index: 1002;
    transform: translateY(-100vh);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.publication_comments_two_cl > section {
    width: 100%;
}

@media (max-width: 700px) {

    .publication_comments_two_cl {
        display: flex;
        position: fixed;
        top: 105vh;
        left: 0;
        width: 100vw;
        height: 67.5vh;
        z-index: 10;
        background-color: white;
        transition: 500ms all;
    }
}

#publication_viewer_comm_mob_id {
    position: fixed;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: 500ms all;
    transform: translateY(100vh);
    z-index: 2002;
}

#publication_viewer_comm_mob_id > div:nth-child(1) {
    width: 100%;
    height: 8vh;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#publication_viewer_comm_mob_id > div:nth-child(1) > div {
    width: 80px;
    height: 5px;
    border-radius: 2.5px;
    background-color: gray;
}

@media (max-width: 700px) {
    #publication_viewer_comm_mob_id>div:nth-child(1) {
        display: flex;
    }
}

@media (max-width: 700px) {
    #publication_viewer_comm_mob_id {
        border-top-left-radius: 5vh;
        border-top-right-radius: 5vh;
        overflow: hidden;
    }
}

#rend_main_comment_mob_id {
    width: 100%;
    height: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#list_of_supporters_id{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
}

#list_of_supporters_id>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 20px);
    padding-left: 10px;
    padding-right: 10px;
}

#list_of_supporters_id>section>div:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

#list_of_supporters_id>section>div:nth-child(1)>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

#list_of_supporters_id>section>div:nth-child(1)>div {
    width: 30px;
    height: 30px;
    background-image: url(./users/profile_photo.webp);
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 50%;
}

#list_of_supporters_id>section>div:nth-child(1)>span:nth-child(3){
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#list_of_supporters_id>section>div:nth-child(1)>span:nth-child(4){
    font-size: 2vh;
    color: gray;
}

#list_of_supporters_id>section>div:nth-child(2){
    padding-top: 5px;
    padding-bottom: 0;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid gray;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
}

.entering_comments_two_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1vw;
    margin-bottom: 10vh;
    border-top: 1px solid gray;
    transform: translateY(-10vh);
    z-index: 1000;
}

.entering_comments_two_cl > div {
    font-size: 4vh;
}

.entering_comments_two_cl > textarea {
    width: 80%;
    height: 3.5vh;
    padding: 1.5vh;
    padding-left: 1.5vh;
    padding-right: 1.5vh;
    font-size: 2.5vh;
    /* font-weight: bold; */
    border: none;
    border-radius: 2.5vh;
    box-shadow: 1px 1px 2px black;
    position: absolute;
    transform: translateX(5vw) translateY(0);
    resize: none;
    border: none;
    outline: none;
}

/* .entering_comments_two_cl > section {
    font-size: 2vh;
    font-weight: bold;
    color: var(--blue_text);
    margin-right: 2vw;
} */

.entering_comments_two_cl > section {
    width: 8vh;
    height: 6.5vh;
    background-image: url(./message/message_sending.png);
    background-size: cover;
}

@media (max-width: 1000px) {
    .entering_comments_two_cl > div {
        font-size: 3vh;
    }

    .entering_comments_two_cl > textarea {
        transform: translateX(8vw) translateY(0);
        width: 70%;
        font-size: 2vh;
    }
}

@media (max-width: 700px) {

    .entering_comments_two_cl {
        height: 7.5vh;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: white;
    }

    .entering_comments_two_cl > textarea {
        font-size: 2vh;
    }
}

/* =============== АУДИОДОРОЖКА (мобильная верстка) =============== */

#audio_track_mob_id {
    white-space: nowrap; /* Запрещает перенос строки */
    overflow: hidden; /* Скрывает выходящий за границы текст */
    position: absolute;
    height: 4vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 2vh;
    transform: translateY(15px);
}

#audio_track_mob_id > span.marquee {
    font-size: 2.5vh;
    display: inline-block;
    padding-left: 100%; /* Начало за пределами экрана */
    animation: marquee 10s linear infinite;
    white-space: nowrap;
}

#audio_management_mob_id {
    position: absolute;
    transform: translateX(82.5vw) translateY(-10vh);
    width: 30px;
    height: 30px;
    background-size: 50%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 50%;
    background-color: black;
}

#publication_viewer_img_mob_id {
    height: 75vh;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.publication_viewer_video_mob_cl {
    width: 100vw;
    height: 120vw;

    margin-top: auto;
    margin-bottom: auto;
}

/* --- появляющийся лайк --- */

.emerging_likes_cl {
    position: absolute;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 500ms all;
}

.emerging_likes_cl > article {
    width: 40vw;
    height: 40vw;
    background-image: url(./message/white_like.png);
    background-size: contain;
}

/* --- кнопка подписаться --- */

#unsubscribe_id {
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgba(0, 128, 0, 0.5);
    color: white;
    text-shadow: 1px 1px 2px black;
}

#unsubscribe_id:hover {
    cursor: pointer;
}

@media (max-width: 600px) {
    #unsubscribe_id {
        width: 42.5%;
        font-size: 2.25vh;
        font-weight: bold;
        padding: 1.5vh;
        padding-left: 1vh;
        padding-right: 1vh;
        border-radius: 1.5vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* --- кнопка написать --- */

#write_id {
    border-radius: 10px;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    background-color: rgb(71, 71, 225);
    color: white;
    text-shadow: 1px 1px 2px black;
}

#write_id:hover {
    cursor: pointer;
}

@media (max-width: 600px) {
    #write_id {
        width: 42.5%;
        font-size: 2.25vh;
        font-weight: bold;
        padding: 1.5vh;
        padding-left: 1vh;
        padding-right: 1vh;
        border-radius: 1.5vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* =============== Просмотр подписок и подписчиков =============== */

#view_subscribers_and_followers_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
}

.subscribers_and_followers_cl {
    width: 30%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding: 2.5%;
    border-radius: 1vh;
    background-color: white;
}

.subscribers_and_followers_cl > article {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

.subscribers_and_followers_cl > section {
    width: 100%;
    height: 80%;
    overflow-y: scroll;
}

.subscribers_and_followers_cl > span {
    font-size: 3vh;
    color: black;
    font-weight: bold;
}

.user_card_cl {
    width: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vw;
    margin-bottom: 1vh;
    transition: 300ms all;
}

.user_card_cl:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 4vh;
}

.user_card_cl > div:nth-child(1) {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    border: 2px solid black;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

.user_card_cl > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 1vh;
}

.user_card_cl > div:nth-child(2) > span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

.user_card_cl > div:nth-child(2) > span:nth-child(2) {
    font-size: 2vh;
    color: blue;
}

.user_card_cl > div:nth-child(3) {
    font-size: 3vh;
    font-weight: bold;
    color: black;
    margin-left: auto;
    margin-right: 2.5vh;
    transition: 300ms all;
}

.user_card_cl > div:nth-child(3):hover {
    color: blue;
}

@media (max-width: 700px) {
    .user_card_cl {
        width: 100%;
        gap: 2vw;
    }

    .user_card_cl:hover {
        background: none;
    }

    .user_card_cl > div:nth-child(3) {
        margin-right: 1vw;
    }
}

#view_subs_and_foll_back_id {
    /* position: absolute;
    top: 15vh;
    right: 30vw;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: black;
    font-size: 5vh;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center; */
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#view_subs_and_foll_back_id:hover {
    cursor: pointer;
}

@media (max-width: 1000px) {
    .subscribers_and_followers_cl {
        width: 80%;
        height: 60%;
    }

    #view_subs_and_foll_back_id {
        /* position: absolute;
        top: 20vh;
        right: -3vw; */
        width: 60px;
        height: 60px;
        transform: translateX(12.5vw);
    }
}

/* =============== МЕНЮ ПУБЛИКАЦИИ =============== */

#publication_menu_id {
    position: absolute;
    padding: 20px;
    display: none;
    flex-direction: column;
    align-items: start;
    border: 2px solid gray;
    border-radius: 10px;
    background-color: white;
    gap: 2vh;
}

#publication_menu_id > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#publication_menu_id > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    transition: 500ms all;
    padding: 5px;
    padding-right: 10px;
    border-radius: 5px;
}

#publication_menu_id > div:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.5);
}

#publication_menu_id > div > div {
    width: 4vh;
    height: 4vh;
    background-size: cover;
}

#publication_menu_id > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

/* ================= МОДАЛЬНОЕ ОКНО ПОДЕЛИТЬСЯ ================= */

#sharing_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

#sharing_window_id > div {
    border-radius: 2vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5%;
}

#sharing_window_id > div > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

#sharing_window_id > div > section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 5vh;
    margin-bottom: 5vh;
    flex-wrap: wrap;
}

#sharing_window_id > div > section > article {
    width: 9vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vh;
    color: black;
    border: 2px solid gray;
    border-radius: 10px;
    transition: 300ms all;
}

#sharing_window_id > div > section > article:hover {
    cursor: pointer;
    background-color: green;
}

#sharing_window_id > div > div {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#sharing_window_id > div > div > div {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: 2px solid gray;
    border-radius: 10px;
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

#sharing_window_id > div > div > div:hover {
    cursor: pointer;
    background-color: green;
}

/* ================= МОДАЛЬНОЕ ОКНО СТОРИЗ ================= */

#sharing_window_stor_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

#sharing_window_stor_id > div {
    border-radius: 2vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5%;
}

#sharing_window_stor_id > div > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

#sharing_window_stor_id > div > section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 5vh;
    margin-bottom: 5vh;
    flex-wrap: wrap;
}

#sharing_window_stor_id > div > section > article {
    width: 9vh;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8vh;
    color: black;
    border: 2px solid gray;
    border-radius: 10px;
    transition: 300ms all;
}

#sharing_window_stor_id > div > section > article:hover {
    cursor: pointer;
    background-color: green;
}

#sharing_window_stor_id > div > div {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

@media (max-width: 700px) {
    #sharing_window_stor_id > div > div {
        width: auto;
    }
}

#sharing_window_stor_id > div > div > div {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: 2px solid gray;
    border-radius: 10px;
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
    transition: 300ms all;
}

#sharing_window_stor_id > div > div > div:hover {
    cursor: pointer;
    background-color: green;
}


/* ========== Точка уведомления ========== */

.catalog_style_cl > div {
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
}

#notification_point_id {
    position: absolute;
    transform: translateX(5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: red;
    display: none;
}

/* ===============   */

.pub_us_setting_cl {
    position: absolute;
    padding: 5px;
    min-width: 100px;
    resize: none;
    overflow: hidden;
    line-height: 1.4;
    display: inline-block;
    box-sizing: content-box;
    /* transform: translateX() translateY(); */
    white-space: pre;     /* сохранение пробелов и строк */
    overflow: hidden;     /* скрываем скроллы */
    resize: none;         /* отключаем ручное растягивание */
    wrap: off;
    z-index: 1004;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    background-color: black;
}

.pub_us_setting_cl > div {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    box-shadow: 2px 2px 4px black;
}

.pub_us_setting_cl > span {
    font-size: 18px;
    color: blue;
    text-shadow: 2px 2px 4px black;
}

/* =============== МОДАЛЬНОЕ ОКНО ВЫБОРА ПОДПИСЧИКА =============== */

#subscriber_selection_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

#subscriber_selection_id > div {
    height: 80%;
    padding: 2vh;
    padding-left: 4vh;
    padding-right: 4vh;
    border-radius: 1vh;
    background-color: white;
    gap: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#subscriber_selection_id > div > span {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

#subscriber_selection_id > div > section {
    width: 100%;
    height: calc(90% - 5vh);
    overflow-y: scroll;
}

#subscriber_selection_id > div > div:nth-child(1) {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#subscriber_selection_id > div > div:nth-child(1)>span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#subscriber_selection_id > div > div:nth-child(1)>span:hover {
    cursor: pointer;
}

#subscriber_selection_id > div > div:nth-child(4) {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid gray;
    border-radius: 10px;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#subscriber_selection_id > div > div:nth-child(4):hover {
    cursor: pointer;
}

@media (max-width: 700px) {
    #subscriber_selection_id>div {
        width: 80%;
        height: 80%;
    }
}

.pub_us_setting_list_cl {
    position: absolute;
    height: 8vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.pub_us_setting_list_cl:hover {
    cursor: pointer;
}

.pub_us_setting_list_cl > div {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    box-shadow: 2px 2px 4px black;
}

.pub_us_setting_list_cl > span {
    font-size: 18px;
    color: blue;
    text-shadow: 2px 2px 4px black;
}

.sub_rend_storiz_del {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* =============== ДАТА КОММЕНТАРИЯ =============== */

.data_comment_cl {
    width: 95%;
    font-size: 2vh;
    color: rgba(128, 128, 128, 0.8);
    text-align: center;
}

.sub_data_comment_cl {
    width: 100%;
    font-size: 1.8vh;
    color: rgba(128, 128, 128, 0.8);
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* --- Верхний логин --- */

#top_login_main_id {
    position: absolute;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    text-shadow: 1.5px 1.5px 3px black;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    /* background-color: black; */
    border-radius: 3px;
    transform: translateY(5vh) translateX(2.5vw);
    opacity: 1;
    z-index: 1005;
}

#top_login_main_id:hover {
    cursor: pointer;
}

/* --- первоисточник публикации --- */

#top_author_main_id {
    position: absolute;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    text-shadow: 1.5px 1.5px 3px black;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    /* background-color: black; */
    border-radius: 3px;
    transform: translateY(8vh) translateX(2.5vw);
    opacity: 1;
    z-index: 1005;
}

#top_author_main_id:hover {
    cursor: pointer;
}

#top_login_id {
    position: absolute;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    text-shadow: 1.5px 1.5px 3px black;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    /* background-color: black; */
    border-radius: 3px;
    transform: translateY(5vh) translateX(2.5vw);
    opacity: 1;
    z-index: 1005;
}


#top_login_id:hover {
    cursor: pointer;
}

#top_login_author_id {
    position: absolute;
    font-size: 2vh;
    font-weight: bold;
    color: white;
    text-shadow: 1.5px 1.5px 3px black;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    /* background-color: black; */
    border-radius: 3px;
    transform: translateY(8vh) translateX(2.5vw);
    opacity: 1;
    z-index: 1005;
}


#top_login_author_id:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ЗАГРУЗКТ МАТЕРИАЛОВ =============== */

#material_loading_id {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

#material_loading_id > div {
    width: 10vh;
    height: 10vh;
    background-image: url(./img/loading.gif);
    background-size: cover;
};

/* =============== ПРОСМОТР СТОРИЗОВ =============== */

#render_storiz_profile_id {
    width: 100%;
    overflow-x: scroll;
}

#sub_render_storiz_profile_id, #sub_render_storiz_profile_acc_id {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

/* =============== СТИЛЬ КРУГЛЫХ СТОРИЗОВ =============== */

.storiz_block_cl {
    width: 10vh;
    height: 12vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.storiz_block_cl:hover {
    cursor: pointer;
}

.storiz_block_cl > div {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    background-image: url(../static/img/addition.svg);
    background-size: cover;
    background-position: 50% 50%;
    border: 3px solid gray;
}

.storiz_block_cl > b {
    width: 100%;

    font-size: 1.4vh;
    font-weight: bold;
    text-align: center;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* @media (max-width: 700px) {
    .storiz_block_cl > b {
        color: white;
    }
} */

/* =============== САМИ СТОРИЗЫ =============== */

#storyboarding_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-x: scroll;
    overflow-x: hidden;
    touch-action: none;
}

#storyboarding_id>section{
    height: 70vh;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    /* padding-left: 75vw; */
}

#storyboarding_back_id {
    position: fixed;
    top: 5vh;
    right: 10vw;
    width: 12vh;
    height: 12vh;
    background-color: black;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 8vh;
    font-weight: bold;
    color: white;
    z-index: 200;
}

#storyboarding_back_id:hover {
    cursor: pointer;
}

#storize_left_id {
    position: fixed;
    top: 50vh;
    left: 25vw;
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    background-color: black;
    font-size: 4.5vw;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px white, 0 0 8px white;
    z-index: 200;
}

#storize_left_id:hover {
    cursor: pointer;
}

#storize_right_id {
    position: fixed;
    top: 50vh;
    right: 25vw;
    width: 6vw;
    height: 6vw;
    border-radius: 50%;
    background-color: black;
    font-size: 4.5vw;
    font-weight: bold;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px white, 0 0 8px white;
    z-index: 200;
}

#storize_right_id:hover {
    cursor: pointer;
}

#storiez_boofer_start_id, #storiez_boofer_end_id {
    width: 37.5vw;
    min-width: 37.5vw;
    height: 100%;
    flex-shrink: 0;
    /* background: rgba(0, 255, 0, 0.1); */
}

.the_storiz_itself_cl {
    width: 25vw;
    height: 80vh;
    border-radius: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    filter: brightness(15%);
    transition: 300ms all;
}

/* зона линий загрузок и логина */

.boot_and_login_line_area_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding-top: 10px;
    z-index: 100;
}

.boot_and_login_line_area_cl>div {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
    padding-left: 10px;
}

.boot_and_login_line_area_cl>div>div{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.boot_and_login_line_area_cl>div>div>span {
    font-size: 1.8vh;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.boot_and_login_line_area_cl>div>span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    /* box-shadow: 1px 1px 2px black; */
    text-shadow: 1px 1px 2px black;
}

.boot_and_login_line_area_cl>div>span:hover{
    cursor: pointer;
}

.boot_and_login_line_area_cl>section {
    width: calc(100% - 20px);
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.boot_and_login_line_area_cl>section>div{
    flex: 1;
    height: 5px;
    border-radius: 2.5px;
    background-color: gray;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    box-shadow: 1.5px 1.5px 3px black;
    overflow: hidden;
}

.boot_and_login_line_area_cl>section>div>div{
    width: 0%;
    height: 100%;
    background-color: red;
    transition: 250ms all linear;
}

.boot_and_login_line_area_cl>span{
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
}

.boot_and_login_line_area_cl>span>span{
    padding-left: 10px;
    font-size: 1.8vh;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.boot_and_login_line_area_cl>span>span:hover{
    cursor: pointer;
}

.boot_and_login_line_area_cl>span>div {
    width: 30px;
    height: 30px;
    background-image: url(./img/three_points.png);
    background-size: 80%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 50%;
}

.boot_and_login_line_area_cl>span>div:hover{
    cursor: pointer;
}

#storiz_menu_block_id {
    position: absolute;
    display: none;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 2px 2px 4px black;
    transform: translateX(-50px);
}

#storiz_menu_block_id>div {
    display: flex;
    flex-direction: row;
    justify-content: start;
    gap: 10px;
}

#storiz_menu_block_id>div>div {
    width: 15px;
    height: 15px;
    background-size: cover;
}

#storiz_menu_block_id>div:nth-child(1)>div{
    background-image: url(../static/img/delete_icon.png);
}

#storiz_menu_block_id>div:nth-child(2)>div{
    background-image: url(../static/img/closing_icon.png);
}

#storiz_menu_block_id>div>span {
    font-size: 2vh;
    color: black;
}

/* --- текст_аудиодорожки --- */

#caption_id {
    white-space: nowrap; /* Запрещает перенос строки */
    overflow: hidden; /* Скрывает выходящий за границы текст */
    /* position: fixed; */
    /* height: 4vh; */
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 2vh;
    font-size: 1.6vh;
    color: white;
    text-shadow: 1px 1px 2px black;
}

#caption_id > span.marquee {
    display: inline-block;
    padding-left: 100%; /* Начало за пределами экрана */
    animation: marquee 10s linear infinite;
    white-space: nowrap;
}

/* зона img и video с текстами */

.img_and_video_zone_with_texts_cl {
    position: absolute;
    width: 25vw;
    height: 80vh;
    display: flex;
    background-color: black;
    border-radius: 20px;
    z-index: 50;
}

.img_and_video_zone_with_texts_cl>div {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    border-radius: 20px;
    overflow: hidden;
}

.img_and_video_zone_with_texts_cl>video{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

#storiz_music_id {
    position: fixed;
    left: -2000;
}

/* панель управления строиз */

.stroiz_control_panel_cl {
    width: calc(100% - 30px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
    z-index: 100;
    opacity: 0.35;
    transition: 300ms all;
}

.stroiz_control_panel_cl:hover {
    opacity: 1;
}

.stroiz_control_panel_cl>div:nth-child(1) {
    width: 37.5px;
    height: 30px;
    background-image: url(./message/message_white.png);
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    filter: drop-shadow(2px 2px 4px black);
}

.stroiz_control_panel_cl>input{
    width: 55%;
    height: 35px;
    border: 2px solid gray;
    border-radius: 10px;
    padding-left: 5px;
    font-size: 2.5vh;
    color: white;
    background: none;
    filter: drop-shadow(2px 2px 4px black);
}

.stroiz_control_panel_cl>div:nth-child(3) {
    width: 35px;
    height: 35px;
    background-image: url(./message/no_like_white.png);
    background-size: cover;
    filter: drop-shadow(2px 2px 4px black);
}

.stroiz_control_panel_cl>div:nth-child(4) {
    width: 35px;
    height: 35px;
    background-image: url(./message/share_white.png);
    background-size: cover;
    filter: drop-shadow(2px 2px 4px black);
}

.stroiz_control_panel_cl>div:hover {
    cursor: pointer;
}

@media (max-width: 700px) {
    #storyboarding_back_id {
        display: none
    }

    #storize_left_id {
        top: 15vh;
        left: 5vw;
        width: 40vw;
        height: 60vh;
        font-style: 4.5vh;
        opacity: 0.5;
        border-radius: 0;
        opacity: 0;
    }

    #storize_left_id:hover {
        cursor: none;
    }

    #storize_right_id {
        top: 15vh;
        right: 5vw;
        width: 40vw;
        height: 60vh;
        font-style: 4.5vh;
        opacity: 0.5;
        border-radius: 0;
        opacity: 0;
    }

    #storize_right_id:hover {
        cursor: none;
    }

    #storyboarding_id {
        align-items: start
    }

    #storyboarding_id>section {
        /* position: fixed;
        top: 0;
        left: 0; */
        height: 95vh;
    }

    .the_storiz_itself_cl {
        width: 100vw;
        height: 92.5%;
    }

    .img_and_video_zone_with_texts_cl {
        width: 100vw;
        height: 100%;
    }

    .stroiz_control_panel_cl {
        opacity: 1;
    }

    #storyboarding_id>section {
        padding-left: calc(305vw + 10px);
    }

    #storiez_boofer_end_id {
        display: none
    }

};

/* Время сториз */

#story_time_cl {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 10px;
}

#story_time_cl>span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#story_time_cl>section {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

/* =============== КОМЕНТАРИИ СТОРИЗА =============== */

#storiz_comments_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

#storiz_comments_id>div{
    width: 35vw;
    height: 80vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0px -2px 4px white;
}

#storiz_comments_id>div>div:nth-child(1) {
    width: 50px;
    height: 5px;
    border-radius: 2.5px;
    background-color: gray;
    margin-top: 10px;
}

#storiz_comments_id>div>div:nth-child(2) {
    width: calc(100% - 10px);
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    padding-right: 10px;
}

#storiz_comments_id>div>div:nth-child(2) > span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#storiz_comments_id>div>div:nth-child(2) > span:hover {
    cursor: pointer;
}

#storiz_comments_render_id {
    width: 100%;
    height: calc(100% - 5px);
    overflow-y: scroll;
    z-index: 1002;
    
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #999 transparent;
}

/* WebKit (Chrome, Edge, Safari) */
#storiz_comments_render_id::-webkit-scrollbar {
    width: 4px;
}

#storiz_comments_render_id::-webkit-scrollbar-track {
    background: transparent;
}

#storiz_comments_render_id::-webkit-scrollbar-thumb {
    background-color: #e0e0e0; /* Серый цвет */
    border-radius: 10px;
}

#storiz_comments_render_id::-webkit-scrollbar-thumb:hover {
    background-color: #777;
}

#storiz_comments_render_id > section {
    width: 100%;
}

@media (max-width: 700px) {

    #storiz_comments_id>div {
        position: fixed;
        left: 0;
        bottom: 6.5vh;
        width: 100vw;
        height: 70vh;
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* #storiz_comments_render_id {
        display: flex;
        width: 100vw;
        height: 92.5vh;
        z-index: 10;
        background-color: white;
        transition: 500ms all;
    } */
}

#storiz_comments_id > div > div:nth-child(4) {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#text_storiz_input_id {
    padding: 10px;
    width: 80%;
    font-size: 3vh;
    color: white;
    border: 2px solid gray;
    border-radius: 10px;
    background: none;
}

#text_storiz_button_id {
    width: 50px;
    height: 40px;
    background-image: url(./message/message_sending.png);
    background-size: cover;
}

#text_storiz_button_id:hover {
    cursor: pointer;
}

/* --- Закрывающие блоки материала --- */

#closing_blocks_of_material_id {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#closing_blocks_of_material_id > div:nth-child(1) > div {
    width: 40px;
    height: 6px;
    border-radius: 3px;
    background-color: gray;
}
#closing_blocks_of_material_id>div:nth-child(2) {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#closing_blocks_of_material_id>div:nth-child(2)>span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    padding-top: 10px;
    padding-right: 20px;
}

#closing_blocks_of_material_id>div:nth-child(2)>span:hover {
    cursor: pointer;
}

#closing_blocks_of_material_id {
    display: none;
}

#storyboard_visibility_text_id {
    width: 80%;
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
    color: black;
}

@media (max-width: 700px) {
    #closing_blocks_of_material_id {
        display: flex;
    }
}

/* --- свайп настройки сториз и публикации --- */

#block_svipe_one_id {
  touch-action: none;
}

/* --- линия соглашений --- */

.agreement_line_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2vh;
}

.agreement_line_cl>span:nth-child(1) {
    font-size: 2vh;
    color: black;
}

.agreement_line_cl>span:nth-child(2) {
    font-size: 2vh;
    color: var(--blue_text);
    text-decoration: underline;
}

.agreement_line_cl>span:hover {
    cursor: pointer;
}

/* --- удалить аккаунт --- */

.del_accaunt_line_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#your_contacts_id {
    height: 4vh;
    padding: 1vw;
    padding-left: 3vw;
    padding-right: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
    font-weight: bold;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 1vw;
}

#your_contacts_id:hover {
    cursor: pointer;
}

@media (max-width: 800px) {
    #your_contacts_id {
        border-radius: 2vw;
        font-size: 2vh;
    }
}

.del_accaunt_line_cl>span {
    font-size: 2vh;
    font-weight: bold;
    color: red;
    margin-bottom: 25px;
    margin-top: 25px;
    text-decoration: underline;
}

@media (max-width: 700px) {
    .del_accaunt_line_cl>span {
        margin-top: 15px;
    }

    .agreement_line_cl {
        margin-bottom: 1vh;
    }
}

.del_accaunt_line_cl>span:hover {
    cursor: pointer;
}

/* модальное окно вопроса удаления аккаунта */

#acc_del_id {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

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

    background-color: rgba(0, 0, 0, 0.5);
}

#acc_del_id > div {
    width: 25vw;
    height: 25vh;
    background-color: white;
    border-radius: 2vw;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
}

#acc_del_id > div > span {
    font-size: 2.5vh;
    font-weight: bold;
    text-align: center;
}

#acc_del_id > div > div {

    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#acc_del_id > div > div > div {
    font-size: 2.5vh;
    font-weight: bold;
    padding: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#acc_del_id > div > div > div:hover {
    cursor: pointer;
}

#acc_del_id > div > div > div:nth-child(1) {
    background-color: rgba(128, 128, 128, 0.25);
}

#acc_del_id > div > div > div:nth-child(2) {
    background-color: red;
}

@media (max-width: 1200px) {
    #acc_del_id > div {
        width: 35vw;
    }
}

@media (max-width: 700px) {
    #acc_del_id > div {
        width: 80vw;
    }

    #acc_del_id > div > div > div {
        padding: 2vw;
        padding-left: 4vw;
        padding-right: 4vw;
    }
}


/* =============== МЕНЮ ЧУЖОГО АККАУНТА =============== */

#account_settings_block_id {
    position: absolute;
    padding: 20px;
    display: none;
    flex-direction: column;
    align-items: start;
    border: 2px solid gray;
    border-radius: 10px;
    background-color: white;
    gap: 2vh;
}

@media (max-width: 700px) {
    #account_settings_block_id {
        transform: translateX(-40vw);
    }
}

#account_settings_block_id > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#account_settings_block_id > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    transition: 500ms all;
    padding: 5px;
    padding-right: 10px;
    border-radius: 5px;
}

#account_settings_block_id > div:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.5);
}

#account_settings_block_id > div > div {
    width: 4vh;
    height: 4vh;
    background-size: cover;
}

#account_settings_block_id > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

/* =============== ИКОНКА БЛОКИРОВКИ =============== */

#lock_icon_id {
    width: 100%;
    height: 25vh;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#lock_icon_id>div{
    width: 15vh;
    height: 15vh;
    border-radius: 50%;
    background-image: url(./img/block_accaunt.png);
    background-size: cover;
}

#lock_icon_id>span{
    font-size: 4vh;
    font-weight: bold;
    color: red;
    text-align: center;
}

@media (max-width: 700px) {

    #lock_icon_id {
        flex-direction: column;
        height: 50vh;
    }

    #lock_icon_id>div {
        width: 30vh;
        height: 30vh;
    }

}

/* --- Новый дизайн №1 --- */

.blocks_button_pub_storiz_cl {
    display: flex;
    flex-direction: column;
}

#set_pub_us_id, #set_text_id, #hashtag_setting_id {
    margin-left: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding: 1vh;
    padding-left: 2vh;
    padding-right: 4vh;
    border-radius: 1vh;
    gap: 1vw;
    border: 2px solid black;
    transition: 300ms all;
    margin-bottom: 25px;
}

#set_pub_us_id:hover, #set_text_id:hover, #hashtag_setting_id:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 255, 0.5);
    color: rgba(0, 128, 0, 0.5);
}

#set_pub_us_id>div, #set_text_id>div, #hashtag_setting_id>div {
    width: 5vh;
    height: 5vh;
    background-size: cover;
}

#hashtag_setting_id>b {
    font-size: 4.5vh;
    color: black;
}

#set_pub_us_id>span, #set_text_id>span, #hashtag_setting_id>span {
    font-size: 2.5vh;
    color: black;
}

@media (max-width: 700px) {

    .blocks_button_pub_storiz_cl {
        flex-direction: row;
        width: 100%;
        justify-content: start;
        gap: 5vw;
    }

    #set_pub_us_id, #set_text_id, #hashtag_setting_id {
        padding: 2vh;
    }

    #set_pub_us_id>span,
    #set_text_id>span,
    #hashtag_setting_id>span {
        display: none;
        font-size: 2.5vh;
        color: black;
    }

    #hashtag_setting_id>b {
        width: 5vh;
        height: 5vh;
        text-align: center;
    }

}

/* =============== МОДАЛЬНОЕ ОКНО ЖАЛОБЫ НА АККАУНТ =============== */

#account_complaint_block_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30000;
}

#account_complaint_block_id > div {
    width: 50vw;
    padding: 20px;
    border-radius: 2vh;
    background-color: white;
    box-shadow: 2px 2px 4px black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#account_complaint_block_id > div > article {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#account_complaint_block_id > div > article > span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#account_complaint_block_id > div > article > span:hover {
    cursor: pointer;
}

#account_complaint_block_id > div > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

#account_complaint_block_id > div > section {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    height: 50vh;
    overflow-y: scroll;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 5vh;
}

#account_complaint_block_id > div > section > div {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 2.5px;
    border-radius: 5px;
}

#account_complaint_block_id > div > section > div:hover {
    cursor: pointer;
    background-color: gray;
}

#account_complaint_block_id > div > section > div > div {
    width: 25px;
    height: 25px;
    border: 1.5px solid black;
    border-radius: 5px;
    background-position: 50% 50%;
    background-size: 80%;
}

#account_complaint_block_id > div > section > div > span {
    font-size: 1.8vh;
    font-weight: bold;
    color: black;
}

@media (max-width: 700px) {

    #account_complaint_block_id > div {
        width: 95vw;
    }

    #account_complaint_block_id > div > section > div > span {
        width: 75%;
    }

}

#account_complaint_block_id > div > div {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#acc_comp_back_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    border: 2px solid gray;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#acc_comp_back_id:hover {
    cursor: pointer;
}

#acc_comp_go_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    border: 2px solid red;
    font-size: 2.5vh;
    font-weight: bold;
    color: red;
}

#acc_comp_go_id:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО ЖАЛОБЫ НА ПУБЛИКАЦИЮ =============== */

#account_complaint_block_ps_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30000;
}

#account_complaint_block_ps_id > div {
    width: 50vw;
    padding: 20px;
    border-radius: 2vh;
    background-color: white;
    box-shadow: 2px 2px 4px black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#account_complaint_block_ps_id > div > article {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#account_complaint_block_ps_id > div > article > span {
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#account_complaint_block_ps_id > div > article > span:hover {
    cursor: pointer;
}

#account_complaint_block_ps_id > div > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
}

#account_complaint_block_ps_id > div > section {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
    height: 50vh;
    overflow-y: scroll;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 5vh;
}

#account_complaint_block_ps_id > div > section > div {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 2.5px;
    border-radius: 5px;
}

#account_complaint_block_ps_id > div > section > div:hover {
    cursor: pointer;
    background-color: gray;
}

#account_complaint_block_ps_id > div > section > div > div {
    width: 25px;
    height: 25px;
    border: 1.5px solid black;
    border-radius: 5px;
    background-position: 50% 50%;
    background-size: 80%;
}

#account_complaint_block_ps_id > div > section > div > span {
    font-size: 1.8vh;
    font-weight: bold;
    color: black;
}

@media (max-width: 700px) {

    #account_complaint_block_ps_id > div {
        width: 95vw;
    }

    #account_complaint_block_ps_id > div > section > div > span {
        width: 75%;
    }

}

#account_complaint_block_ps_id > div > div {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#acc_comp_back_ps_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    border: 2px solid gray;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#acc_comp_back_ps_id:hover {
    cursor: pointer;
}

#acc_comp_go_ps_id {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    border: 2px solid red;
    font-size: 2.5vh;
    font-weight: bold;
    color: red;
}

#acc_comp_go_ps_id:hover {
    cursor: pointer;
}


/* =============== МОДАЛЬНОЕ ОКНО ЗАГРУЗКИ ВИДЕО =============== */

#video_upload_status_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 30000;
}

#video_upload_status_id > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background-color: white;
    border-radius: 2vh;
}

#video_upload_status_id > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#video_upload_status_id > div > div {
    width: 250px;
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    border: 1px solid black;
}

#video_upload_status_id > div > div > div {
    height: 100%;
    width: 0%;
    background-color: green;
    transition: 300ms all;
}

#video_upload_status_id > div > div > span {
    position: absolute;
    transform: translateX(110px);
}

/* =============== МОДАЛЬНОЕ ОКНО ДОБАВЛЕНИЕ ИКОНКИ САЙТА =============== */

#add_icon_modal_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
}

#add_icon_modal_window_id > div {
    padding: 20px;
    border-radius: 2vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-left: 10px;
    margin-right: 10px;
}

#add_icon_modal_window_id > div > span {
    font-size: 3vh;
    font-weight: bold;
    color: black;
    text-align: center;
}

#add_icon_modal_window_id > div > div {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#add_icon_modal_window_id > div > div > div {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 3px solid gray;
    color: gray;
    font-size: 2.5vh;
    color: gray;
    border-radius: 10px;
    transition: 300ms all;
}

#add_icon_modal_window_id > div > div > div:hover {
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.75);
    border-color: black;
    color: black;
}

#add_icon_modal_id {
    width: 10vh;
    display: none;
    /* position: absolute;
    top: 4.5vh;
    right: 5vw; */
    font-size: 1.75vh;
    font-weight: bold;
    color: black;
    text-decoration: underline;
    margin-right: 10px;
    background-position: 50% 50%;
}

@media (max-width: 700px) {
    #add_icon_modal_id {
        display: flex;
    }
}

/* =============== МОДАЛЬНОЕ ОКНО ОБ ТЕХНИЧЕСКОЙ РАБОТЕ =============== */

#tech_work_block_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
}

#tech_work_block_id>div{
    padding: 40px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 2vh;
    background-color: white;
}

#tech_work_block_id>div>div:nth-child(1) {
    width: 50vw;
    height: 30vw;
    background-image: url(img/tech_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

#tech_work_block_id>div>span {
    font-size: 4vh;
    font-weight: bold;
    color: black;
    text-align: center;
}

#tech_work_block_id>div>div:nth-child(3) {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    border: 3px solid gray;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

#tech_work_block_id>div>div:nth-child(3):hover {
    cursor: pointer;
    background-color: rgba(0, 128, 0, 0.75);
    color: black;
    border-color: black;
}

@media (max-width: 700px) {
    #tech_work_block_id>div {
        padding: 20px;
    }

    #tech_work_block_id>div>span {
        font-size: 2vh;
    }
}

/* ========== СКРЫТИЕ ПУБЛИКАЦИИ ИЛИ СТОРИЗ ========== */

#story_hiding_block_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
}

#story_hiding_block_id>div{
    padding: 40px;
    margin-left: 10px;
    margin-right: 10px;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4vh;
}

#story_hiding_block_id>div>span{
    font-size: 3vh;
    font-weight: bold;
    color: black;
    text-align: center;
}

#story_hiding_block_id>div>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#story_hiding_block_id>div>div>div{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 3px solid gray;
    border-radius: 10px;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

#story_hiding_block_id>div>div>div:hover {
    border-color: black;
    color: black;
    cursor: pointer;
}

/* =============== ОКНО ПЕРЕПИСОК =============== */

#chat_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    transition: 500ms all;
}

/* --- БЛОК СПИСКА ПЕРЕПИСОК --- */

.correspondence_block_cl {
    width: 30vw;
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.mes_search_system_cl {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 10px;
    margin: 10px;
}

.mes_search_system_cl > div:nth-child(1) {
    width: 3vh;
    height: 3vh;
    background-image: url(./catalog_img/search.png);
    background-size: cover;
}

.mes_search_system_cl > div:nth-child(1):hover {
    cursor: pointer;
}

.mes_search_system_cl > input {
    width: 80%;
    border: none;
    outline: none;
    font-size: 2.5vh;
    color: black;
}

.mes_search_system_cl > div:nth-child(3) {
    width: 3vh;
    height: 3vh;
    background-image: url(./img/closing_icon.png);
    background-size: cover;  
}

.mes_search_system_cl > div:nth-child(3):hover {
    cursor: pointer;
}

#mes_search_system_id {
    display: none;
    position: fixed;
    top: 10px;
    left: 50vw;
    width: 30vw;
    background-color: white;
}

@media (max-width: 700px) {
    #mes_search_system_id  {
        top: 75px;
        width: 95vw;
        left: 0vw;
    }
}

.correspondence_lists_cl {
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* overflow-y: scroll; */
}

.correspondence_lists_cl>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: scroll;
}

.footer_rend_mess_cl {
    width: calc(100% - 20px);
    height: 10%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    padding-left: 10px;
    padding-right: 10px;
}

.footer_rend_mess_cl>div{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 3px solid gray;
    border-radius: 10px;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
}

.footer_rend_mess_cl>div:hover {
    cursor: pointer;
}

#recent_corr_id {
    width: 100%;
}

@media (max-width: 700px) {
    .correspondence_lists_cl {
        height: 90%;
    }

    .footer_rend_mess_cl {
        display: flex; 
    }

};

#recent_corr_id {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.corr_line_cl {
    width: calc(90% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    padding-right: 20px;
    border-radius: 10px;
    border-top-left-radius: 7vh;
    border-bottom-left-radius: 7vh;
    transition: 300ms all;
}

.corr_line_cl:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

.corr_line_cl>div:nth-child(1) {
    width: 7vh;
    height: 7vh;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    display: flex;
    align-items: end;
    justify-content: end;
}

.corr_line_cl>div:nth-child(1)>div {
    width: 2.5vh;
    height: 2.5vh;
    border-radius: 50%;
    background-color: green;
    font-size: 1.55vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corr_line_cl>div:nth-child(2) {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.corr_line_cl>div:nth-child(2)>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

.corr_line_cl>div:nth-child(2)>span:nth-child(2) {
    font-size: 2vh;
    color: gray;

    max-width: 30ch;
    /* ~30 символов шириной “0” */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.corr_line_cl>span {
    font-size: 2vh;
    color: gray;
}

/* --- БЛОК САМИХ ПЕРЕПИСОК --- */

#the_correspondence_itself_id {
    width: 70vw;
    height: 100vh;
    background-image: url(./message/background.png);
    background-size: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

/* шапка переписок */

.letterhead_cl {
    width: calc(100% - 20px);
    height: calc(7vh + 15px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: white;
}

.letterhead_cl>section:nth-child(1){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 20px;
    padding: 5px;
    padding-right: 20px;
    border-radius: 10px;
    border-top-left-radius: 6vh;
    border-bottom-left-radius: 6vh;
    transition: 300ms all;
}

.letterhead_cl>section:nth-child(1):hover{
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

.letterhead_cl>section:nth-child(1)>div:nth-child(1){
    width: 7vh;
    height: 7vh;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    display: flex;
    align-items: end;
    justify-content: end;
}

.letterhead_cl>section:nth-child(1)>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.letterhead_cl>section:nth-child(1)>div:nth-child(2)>span:nth-child(1) {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

.letterhead_cl>section:nth-child(1)>div:nth-child(2)>span:nth-child(2) {
    font-size: 2vh;
    color: gray;
}

.letterhead_cl>section:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.letterhead_cl>section:nth-child(2)>div:nth-child(1){
    width: 6vh;
    height: 6vh;
    background-image: url(./catalog_img/search.png);
    background-size: 60%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-right: 20px;
    border-radius: 5px;
    transition: 300ms all;
}

.letterhead_cl>section:nth-child(2)>div:nth-child(1):hover{
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

.letterhead_cl>section:nth-child(2)>div:nth-child(2) {
    width: 10vh;
    height: 10vh;
    /* background-image: url(./catalog_img/ICON.jpg);
    background-size: 150%;
    background-position: 50% 50%; */
    margin-right: 30px;
}

#cross_from_mess_id {
    position: absolute;
    top: calc( 7vh/2 + 5px);
    right: calc( 7vh/2 + 5px);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 3vh;
    font-weight: bold;
    color: white;
    background-color: black;
}

#cross_from_mess_id:hover {
    cursor: pointer;
}

@media (max-width: 700px) {
    #cross_from_mess_id {
        display: flex;
    }
}

/* тело переписок */

.correspondence_cl {
    width: 100%;
    height: calc(100vh - 5vh - 20px - 7vh - 20px - 60px);
}

.correspondence_cl>section{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    overflow-y: scroll;
}

/* мое сообщение */

.my_message_cl{
    width: calc(90% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.my_message_cl:hover {
    cursor: pointer;
}

.my_message_cl>div:nth-child(2) {
    max-width: 50%;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(0, 128, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

@media (max-width: 700px) {
    .my_message_cl>div:nth-child(2) {
        max-width: 62.5%;
    }
}

.my_message_cl>div:nth-child(2)>section {
    width: auto;
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
    gap: 5px;
}

.class_img_main_wp {
    width: 25vw;
    height: 25vw;
    background-size: cover;
    background-color: rgba(128, 128, 128, 0.25);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.class_img_wp {
    width: 15vw;
    height: 15vw;
    background-size: cover;
    background-color: rgba(128, 128, 128, 0.25);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.class_video_main_wp {
    width: 25vw;
    height: 25vw;
    background-color: black;
}

.class_video_wp {
    width: 15vw;
    height: 15vw;
    background-color: black;
}

.wp_audio_block_cl {
    width: 25vw;
    height: 8vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border-radius: 10px;
}

.wp_audio_block_cl>section{
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wp_audio_block_cl>section>div:nth-child(1) {
    height: 10px;
}

.wp_audio_block_cl>section>div:nth-child(3) {
    width: 80%;
    height: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-left: 15%;
}

.wp_audio_block_cl>section>div:nth-child(3)>span{
    font-size: 1.25vh;
    color: black;
}

.wp_audio_block_cl>section>div:nth-child(2) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.wp_audio_block_cl>section>div:nth-child(2)>div:nth-child(1){
    width: 5vh;
    height: 5vh;
    background-image: url(./message/play_audio.png);
    background-size: cover;
}

.wp_audio_block_cl>section>div:nth-child(2)>div:nth-child(2){
    width: calc(100% - 5vh);
    height: 3vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    border: 2px solid gray;
    border-radius: 5px;
    overflow: hidden;
    margin-left: 10px;
}

/* .wp_audio_block_cl>section>div:nth-child(2)>div:nth-child(2)>div:nth-child(1) {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(./message/load_audio.png);
    background-size: cover;
    z-index: 1000;
    
} */

.wp_audio_block_cl>section>div:nth-child(2)>div:nth-child(2)>div {
    width: 0%;
    height: 100%;
    background-color: gray;
}

.wp_audio_block_cl>div{
    width: 5vh;
    height: 5vh;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
}

.wp_audio_block_cl>div>div{
    width: 3vh;
    height: 3vh;
    border-radius: 50%;
    background-image: url(./message/message_dictaphone.png);
    background-size: cover;
    background-color: rgba(0, 0, 255, 0.25);
    transform: translateX(10px) translateY(10px);
}

@media (max-width: 700px) {

    .my_message_cl>div:nth-child(2)>section {
        gap: 10px;
    }

    .class_img_main_wp {
        width: 52.5vw;
        height: 52.5vw;
    }

    .class_img_wp {
        width: 25vw;
        height: 25vw;
    }

    .class_video_main_wp {
        width: 52.5vw;
        height: 52.5vw;
    }

    .class_video_wp {
        width: 25vw;
        height: 25vw;
    }

    .wp_audio_block_cl {
        width: 60vw;
    }

    .wp_audio_block_cl>section {
        width: 80%;
    }

}

/* Пересланное сообщение */

#reply_to_message_id {
    width: 100%;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(128, 128, 128, 0.25);
}

#selecting_a_response_line_id {
    position: absolute;
    width: 66.5vw;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color: white;
    transform: translateY(-8vh);
}

@media (max-width: 700px) {
    #selecting_a_response_line_id {
        width: 92.5vw;
        transform: translateY(-10vh);
    }
}

#reply_to_message_id>div:nth-child(1), #selecting_a_response_line_id>div:nth-child(1){
    display: flex;
    flex-direction: column;
    align-items: start;
}

#reply_to_message_id>div:nth-child(1)>span:nth-child(1), #selecting_a_response_line_id>div:nth-child(1)>span:nth-child(1){
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#reply_to_message_id>div:nth-child(1)>span:nth-child(2), #selecting_a_response_line_id>div:nth-child(1)>span:nth-child(2){
    font-size: 1.75vh;
    color: gray;

    /* ~20 символов шириной “0” */
    max-width: 20ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#reply_to_message_id>div:nth-child(2) {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

#selecting_a_response_line_id>div:nth-child(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding-right: 10px;
}

#selecting_a_response_line_id>div:nth-child(2)>div {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

#selecting_a_response_line_id>div:nth-child(2)>span{
    font-size: 4vh;
    font-weight: bold;
    color: black;
}

/* Выбор строки ответа */



/* Пересланное сообщение */

#forwarded_message_id {
    width: 100%;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

#forwarded_message_id>div{
    width: 40px;
    height: 20px;
    background-image: url(./message/fo_arrow.png);
    background-size: cover;
}

#forwarded_message_id>span{
    font-size: 1.5vh;
    color: gray;
    font-style: italic;
}

.my_message_cl>div:nth-child(1){
    width: 25%;
    height: 100%;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: end;
}

.my_message_cl>div:nth-child(1)>span{
    font-size: 1.75vh;
    color: gray;
    text-decoration: underline;
    font-style: italic;
    opacity: 0;
    margin-bottom: 8px;
    transition: 300ms all;
}

.my_message_cl:hover>div:nth-child(1)>span{
    opacity: 1;
    cursor: pointer;
}

@media (max-width: 700px) {
    .my_message_cl>div:nth-child(1)>span {
        opacity: 1;
    }
}


.my_message_cl>div:nth-child(2)>span{
    font-size: 1.8vh;
    color: black;
}

.my_message_cl>div:nth-child(2)>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 5px;
}

.my_message_cl>div:nth-child(2)>div>span{
    font-size: 1.2vh;
    color: black;
}

.my_message_cl>div:nth-child(2)>div>div {
    width: 2.5vh;
    height: 2.5vh;
    background-image: url(./message/check_marks.png);
    background-size: cover;
}

#list_like_id {
    border-radius: 5px;
    background-color: white;
    padding: 2.5px;
    display: none;
}

@media (max-width: 700px) {
    #list_like_id {
        font-size: 2vh;
    }
}

/* чущое сообщение */

.third_party_message_cl{
    width: calc(90% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}

.third_party_message_cl:hover {
    cursor: pointer;
}

.third_party_message_cl>div:nth-child(1) {
    max-width: 70%;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 5px;
}

.third_party_message_cl>div:nth-child(1) > div {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    background-position: 50% 50%;
    display: none;
}

.third_party_message_cl>div:nth-child(1)>section {
    max-width: 100%;
    padding: 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.third_party_message_cl>div:nth-child(1)>section>b{
    width: 100%;
    display: none;
    font-size: 1.8vh;
    color: green;
    text-align: start;
}

.third_party_message_cl>div:nth-child(1)>section>span{
    font-size: 1.8vh;
    color: black;
}

.third_party_message_cl>div:nth-child(1)>section>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
}

.third_party_message_cl>div:nth-child(1)>section>div>span{
    font-size: 1.2vh;
    color: black;
}

.third_party_message_cl>div:nth-child(1)>section>div>div {
    width: 2.5vh;
    height: 2.5vh;
    background-image: url(./message/check_mark.png);
    background-size: cover;
}

.third_party_message_cl>div:nth-child(2){
    width: 100%;
    height: 100%;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

.third_party_message_cl>div:nth-child(2)>span{
    font-size: 1.75vh;
    color: gray;
    text-decoration: underline;
    font-style: italic;
    opacity: 0;
    margin-bottom: 8px;
    transition: 300ms all;
}

.third_party_message_cl:hover>div:nth-child(2)>span{
    opacity: 1;
    cursor: pointer;
}

@media (max-width: 700px) {
    .third_party_message_cl>div:nth-child(2)>span {
        opacity: 1;
    }
}

/* подвал переписок */

.corr_archive_cl {
    width: calc(100% - 20px);
    height: 5vh;
    background-color: white;
    padding: 10px;
    padding-bottom: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.corr_archive_cl > div {
    width: 5vh;
    height: 5vh;
    border-radius: 5px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 70%;
    transition: 300ms all;
}

.corr_archive_cl>div:hover{
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

.corr_archive_cl > input {
    width: calc(100% - 20px - 10vh - 50px);
    border: none;
    outline: none;
    font-size: 2.5vh;
    color: black;
}

#message_button_id {
    width: 30px;
    height: 30px;
    background-image: url(./message/launching_message.png);
    background-size: cover;
    margin-right: 20px;
}

#message_button_id:hover{
    cursor: pointer;
}

@media (max-width: 700px) {

    .corr_archive_cl > input {
        width: calc(100% - 20px - 10vh - 35px);
    }

    #message_button_id {
        margin-right: 5px;
    }

    #chat_window_id {
        z-index: 2002;
    }

    .correspondence_block_cl {
        width: 100vw;
    }

    #the_correspondence_itself_id {
        position: fixed;
        top: 0;
        right: -100vw;
        width: 100vw;
        transition: 500ms all;
    }

}

/* описание публикации */

.publ_descr_cl {
    width: calc(100% - 10px);
    height: 10vw;
    transform: translateY(-11vw);
    font-size: 1.8vh;
    font-weight: bold;
    color: black;
    text-shadow: 1px 1px 2px white;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    text-align: center;
}

@media (max-width: 700px) {
    .publ_descr_cl {
        height: 25vw;
        font-size: 1.4vh;
        text-shadow: 0.5px 0.5px 1px white;
        transform: translateY(-28vw);
    }
}

/* =============== ПРОСМОТР ИЗОБРАЖЕНИЯ =============== */

#image_viewing_block_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 500ms all;
    z-index: 2005;
}

#image_viewing_block_id>div{
    width: 25vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
}

/* шапка */

.image_view_block_1_cl {
    width: calc(100% - 20px);
    height: 5vh;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.image_view_block_1_cl>div:nth-child(1) {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.image_view_block_1_cl>div:nth-child(1):hover {
    cursor: pointer;
}

.image_view_block_1_cl>div:nth-child(1)>div:nth-child(1) {
    width: 4vh;
    height: 4vh;
    background-image: url(./message/arrow_left.png);
    background-size: cover;
}

.image_view_block_1_cl>div:nth-child(1)>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.image_view_block_1_cl>div:nth-child(1)>div:nth-child(2)>span:nth-child(1){
    font-size: 1.8vh;
    font-weight: bold;
    color: white;
}

.image_view_block_1_cl>div:nth-child(1)>div:nth-child(2)>span:nth-child(2){
    font-size: 1.25vh;
    color: white;
}

.image_view_block_1_cl>div:nth-child(2) {
    width: 4vh;
    height: 4vh;
    background-image: url(./img/three_points_white.png);
    background-size: cover;
}

.image_view_block_1_cl>div:nth-child(2):hover {
    cursor: pointer;
}

/* Просматриваемое изображение */

#image_viewing_id {
    width: 100%;
    height: 80%;
    background-position: 50% 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

#video_viewing_id {
    width: 100%;
    height: 80%;
}

/* подвал */

.image_view_block_2_cl {
    width: calc(100% - 10px);
    height: 12.5%;
    padding: 5px;
    text-align: center;
}

.image_view_block_2_cl > span {
    width: 100%;
    font-size: 2vh;
    color: white;
}

@media (max-width: 700px) {

    #image_viewing_block_id>div {
        width: 100vw;
        height: 100vh;
    }

    .image_view_block_1_cl {
        padding-top: 30px;
    }

    #image_viewing_id {
        height: 75%;
    }

    .image_view_block_2_cl {
        height: 12.5%;
        padding-bottom: 30px;
    }

}

/* =============== ОКНО УСТАНОВКИ ЛАЙКА =============== */

#like_settings_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2003;
}

#like_settings_window_id>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    background-color: white;
}

#like_settings_window_id>div>span{
    font-size: 2vh;
    color: gray;
}

#like_settings_window_id>div>div:nth-child(2){
    width: 300px;
    height: 200px;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    align-items: start;
    flex-wrap: wrap;
}

#like_settings_window_id>div>div:nth-child(2)>div {
    width: 35px;
    height: 20px;
    transition: 300ms all;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5px;
}

#like_settings_window_id>div>div:nth-child(2)>div:hover {
    background-color: rgba(128, 128, 128, 0.25);
    cursor: pointer;
}

#like_settings_window_id>div>div:nth-child(3){
    width: 300px;
    height: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#like_settings_window_id>div>div:nth-child(3)>div{
    width: 30px;
    height: 30px;
    background-size: cover;
    transition: 300ms all;
    border-radius: 5px;
    overflow: hidden;
}

#like_settings_window_id>div>div:nth-child(3)>div:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

#like_settings_window_id>div>section:nth-child(4) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#like_settings_window_id>div>section:nth-child(4)>article {
    width: 20px;
    height: 20px;
    background-image: url(./message/load_icon.png);
    background-size: 75%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding: 5px;
    border: 2px solid gray;
    border-radius: 10px;
}

#like_settings_window_id>div>section:nth-child(4)>article:hover{
    cursor: pointer;
}

#like_settings_window_id>div>section:nth-child(4)>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 2px solid gray;
    border-radius: 10px;
}

#like_settings_window_id>div>section:nth-child(4)>div:hover{
    cursor: pointer;
}

#like_settings_window_id>div>section:nth-child(4)>div>div{
    width: 20px;
    height: 20px;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

#like_settings_window_id>div>section:nth-child(4)>div>span{
    font-size: 1.75vh;
    color: gray;
}

/* =============== ПРОСМОТР ЛАЙКНУВШИХ =============== */

#viewing_likes_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2003;
}

#viewing_likes_id>div{
    padding: 20px;
    margin: 10px;
    background-color: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#viewing_likes_id>div>span{
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#viewing_likes_id>div>div:nth-child(2){
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#viewing_likes_id>div>div:nth-child(3) {
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: 2px solid gray;
    border-radius: 10px;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
}

#viewing_likes_id>div>div:nth-child(3):hover {
    cursor: pointer;
}

.map_of_likes_cl {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 10px;
}

.map_of_likes_cl > div:nth-child(1) {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-position: 50% 50%;
    background-size: cover;
}

.map_of_likes_cl > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.map_of_likes_cl>div:nth-child(2)>span:nth-child(1){
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

.map_of_likes_cl>div:nth-child(2)>span:nth-child(2){
    font-size: 1.8vh;
    color: gray;
}

.map_of_likes_cl>div:nth-child(2)>span:nth-child(2):hover{
    cursor: pointer;
}

.map_of_likes_cl > div:nth-child(3) {
    width: 80px;
    height: 30px;
    font-size: 30px;
}

.date_div_wp_cl {
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.25);
    font-size: 2vh;
    color: rgba(128, 128, 128, 0.8);
}

/* Загрузочная иконка */

.load_icon_cl {
    /* position: absolute;
    width: 100%;
    height: 100%; */
    background-image: url(./img/loading.gif);
    background-size: 35%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.5);
}

/* --- Индикатор сообщений --- */

#message_indicator_main_m_id {
    display: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    transform: translateX(10px) translateY(5px);
}

#message_indicator_main_id {
    display: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    transform: translateX(10px) translateY(5px);
}

@media (max-width: 700px) {
    #message_indicator_main_m_id {
        width: 10px;
        height: 10px;
    }
}

/* =============== ВЫБОР ПОЛЬЗОВАТЕЛЯ ДЛЯ ПЕРЕСЫЛКИ =============== */

#forwarding_option_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2004;
}

#forwarding_option_id>div{
    padding: 20px;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 10px;
}

#forwarding_option_id>div>span{
    font-size: 2vh;
    font-weight: bold;
    color: gray;
}

#forwarding_option_id>div>section:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 15px;
    border: 1px solid gray;
}

#forwarding_option_id>div>section:nth-child(2)>div{
    width: 25px;
    height: 25px;
    background-image: url(./catalog_img/search.png);
    background-size: cover;
}

#forwarding_option_id>div>section:nth-child(2)>input {
    border: none;
    outline: none;
    font-size: 2.5vh;
    color: black;
}

#forwarding_option_id>div>section:nth-child(2)>span{
    font-size: 3vh;
    font-weight: bold;
    color: black;
    margin-right: 5px;
}

#forwarding_option_id>div>section:nth-child(2)>span:hover{
    cursor: pointer;
}

#forwarding_option_id>div>section:nth-child(4) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#mailing_list_id {
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: start;
    overflow-y: scroll;
}

#mailing_list_id>div{
    width: calc(100% - 10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border-radius: 10px;
    transition: 300ms all;
}

#mailing_list_id>div:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

#mailing_list_id>div>div:nth-child(1){
    width: 15px;
    height: 15px;
    border-radius: 5px;
    border: 2px solid black;
    background-image: url(./catalog_img/tick.png);
    background-size: cover;
}

#mailing_list_id>div>div:nth-child(2){
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
}

#mailing_list_id>div>span:nth-child(3){
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

#forwarding_option_id>div>section:nth-child(4)>div{
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    border: 2px solid gray;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#forwarding_option_id>div>section:nth-child(4)>div:hover{
    cursor: pointer;
}

/* =============== ПАНЕЛЬ УПРАВЛЕНИЯ ПЕРЕПИСКОЙ =============== */

#correspondence_control_panel_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 500ms all;
    z-index: 2003;
}

#correspondence_control_panel_id>div {
    padding: 20px;
    background-color: rgb(155, 152, 152);
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#correspondence_control_panel_id>div>article{
    position: absolute;
    width: 6vh;
    height: 6vh;
    background-color: #010c11;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vh;
    font-weight: bold;
    color: white;
    transform: translateY(-10px) translateX(20.5vw);
}

#correspondence_control_panel_id>div>article:hover {
    cursor: pointer;
}

#correspondence_control_panel_id>div>section{
    width: 40vw;
}

#correspondence_control_panel_id>div>div{
    margin: 10px;
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow-y: scroll;

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE и Edge */
}

#correspondence_control_panel_id > div > div::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#correspondence_control_panel_id>div>div>section{
    width: 40vw;
    padding: 10px;
    border-radius: 1vh;
    background-color: white;
}

@media (max-width: 700px) {
    #correspondence_control_panel_id>div>article{
        transform: translateY(-10px) translateX(42.5vw);
    }
    #correspondence_control_panel_id>div {
        padding: 10px;
    }
    #correspondence_control_panel_id>div>section {
        width: 80vw;
    }

    #correspondence_control_panel_id>div>div>section {
        width: 80vw;
    }

    #correspondence_control_panel_id>div>div {
        height: 55vh;
        margin: 0;
        margin-top: 10px;
    }
}

/* карточка группы */

.group_card_cl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px;
    border-radius: 1vh;
    background-color: white;
}

.group_card_cl > div:nth-child(1) {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.group_card_cl > span:nth-child(2) {
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

.group_card_cl > div:nth-child(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.group_card_cl > div:nth-child(3)>span {
    font-size: 2vh;
    color: gray;
}

/* файлы группы */

.group_files_cl {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.group_files_cl>div:nth-child(1){
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: 300ms all;
}

.group_files_cl>div:nth-child(1):hover{
    cursor: pointer;
}

.group_files_cl>div:nth-child(1) > span {
    font-size: 2vh;
    color: gray;
}

.group_files_cl>div:nth-child(1)>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.group_files_cl>div:nth-child(1)>div>span{
    font-size: 2vh;
    color: gray;
}

.group_files_cl>div:nth-child(1)>div>div{
    width: 2.25vh;
    height: 2.25vh;
    background-image: url(./img/arrow_right.png);
    background-size: cover;
}

.group_files_cl>div:nth-child(2){
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 5px;
    margin-top: 5px;
}

.group_files_cl>div:nth-child(2)>div, .group_files_cl>div:nth-child(2)>video, .group_files_cl>div:nth-child(2)>audio {
    width: 100px;
    height: 100px;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    background-position: 50% 50%;
    transition: 300ms all;
}

.group_files_cl>div:nth-child(2)>div:hover, .group_files_cl>div:nth-child(2)>video:hover, .group_files_cl>div:nth-child(2)>audio:hover {
    cursor: pointer;
    margin: 5px;
    width: 90px;
    height: 90px;
}

/* функционал группы */

.group_functionality_cl {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}

.group_functionality_cl > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 5px;
    border-radius: 10px;
    border: 2px solid green;
}

.group_functionality_cl > div:hover {
    cursor: pointer;
}

.group_functionality_cl > div > div {
    width: 3vh;
    height: 3vh;
    background-image: url(./img/add_admin.png);
    background-size: cover;
}

.group_functionality_cl > div > span {
    font-size: 2vh;
    font-weight: bold;
    color: green;
    margin-right: 10px;
}

/* участники группы */

.group_members_cl {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
}

.group_members_cl>span{
    width: 100%;
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
    text-align: center;
}

.group_members_cl>div{
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    border-radius: 10px;
    padding-right: 10px;
    transition: 300ms all;
}

.group_members_cl>div:hover {
    cursor: pointer;
    background-color: rgba(128, 128, 128, 0.25);
}

.group_members_cl>div>section{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.group_members_cl>div>section>div:nth-child(1) {
    width: 5vh;
    height: 5vh;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 50%;
}

.group_members_cl>div>section>div:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.group_members_cl>div>section>div:nth-child(2)>span:nth-child(1) {
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

.group_members_cl>div>section>div:nth-child(2)>span:nth-child(2) {
    font-size: 1.75vh;
    color: gray;
}

.group_members_cl>div>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.group_members_cl>div>div>div{
    width: 3vh;
    height: 3vh;
    background-image: url(./img/admin_icon.png);
    background-size: 120%;
    background-position: 50% 50%;
    border: 3px solid green;
    border-radius: 5px;
}

.group_members_cl>div>div>span{
    font-size: 2.5vh;
    font-weight: bold;
    color: green;
}

/* ПРОСМОТР ФАЙЛОВ И ИЗОБРАЖЕНИЙ */

#viewing_files_and_images_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2004;
}

#viewing_files_and_images_id > div {
    padding: 20px;
    margin: 10px;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#viewing_files_and_images_id > div > span {
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#viewing_files_and_images_id > div > section {
    width: 40vw;
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    flex-wrap: wrap;
    gap: 5px;
}

#viewing_files_and_images_id>div>section>div, #viewing_files_and_images_id>div>section>video, #viewing_files_and_images_id>div>section>audio {
    width: 100px;
    height: 100px;
    background-image: url(./users/profile_photo.jpg);
    background-size: cover;
    background-position: 50% 50%;
    transition: 300ms all;
}

#viewing_files_and_images_id>div>section>div:hover, #viewing_files_and_images_id>div>section>video:hover, #viewing_files_and_images_id>div>section>audio:hover {
    cursor: pointer;
    margin: 5px;
    width: 90px;
    height: 90px;
}

#viewing_files_and_images_back_id {
    position: absolute;
    width: 6vh;
    height: 6vh;
    font-size: 4vh;
    font-weight: bold;
    color: white;
    background-color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-25px) translateX(21.25vw);
}

#viewing_files_and_images_back_id:hover {
    cursor: pointer;
}

/* =============== ЭТО ЗАКРЫТАЯ ГРУППА =============== */

#check_for_closed_account_id {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}

#check_for_closed_account_id>div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

#check_for_closed_account_id>div>span{
    font-size: 3vh;
    font-weight: bold;
    color: gray;
}

#check_for_closed_account_id>div>div{
    width: 150px;
    height: 150px;
    background-image: url(./img/block_accaunt.png);
    background-size: cover;
}

/* ВЫБОР УЧАСТНИКА ГРУППЫ */

#selection_of_a_group_member_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    opacity: 0;
    transition: 300ms all;
    z-index: 2004;
}

#selection_of_a_group_member_id>section{
    padding: 20px;
    margin: 10px;
    border-radius: 1vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#selection_of_a_group_member_id>section>article {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#selection_of_a_group_member_id>section>article>{
    font-size: 2.5vh;
    font-weight: bold;
    color: gray;
}

#selection_of_a_group_member_id>section>article>div{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2.5px;
    padding-left: 7.5px;
    padding-right: 7.5px;
    border-top: 1px dashed gray;
    border-bottom: 1px dashed gray;
    margin-top: 15px;
    margin-bottom: 15px;
}

#selection_of_a_group_member_id>section>article>div>span{
    font-size: 2.5vh;
    font-weight: bold;
    color: black;
}

#selection_of_a_group_member_id>section>article>div>div{
    width: 3.5vh;
    height: 3.5vh;
    background-image: url(./img/admin_icon.png);
    background-size: cover;
    background-position: 50% 50%;
}

#sel_group_member_back_id {
    position: absolute;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5vh;
    font-weight: bold;
    color: white;
    background-color: black;
    transform: translateX(13.75vh) translateY(-3.75vh);
}

#sel_group_member_back_id:hover{
    cursor: pointer;
}

/* Окно бана пользователя */

#users_banana_window_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2005;
    opacity: 0;
    transition: 500ms all;
}

#users_banana_window_id>section {
    padding: 20px;
    margin: 10px;
    border-radius: 1vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

#users_banana_window_id>section>div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#users_banana_window_id>section>div:nth-child(1)>span{
    font-size: 2vh;
    font-weight: bold;
    color: gray;
}

#users_banana_window_id>section>div:nth-child(1)>b{
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#users_banana_window_id>section>div:nth-child(2) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#users_banana_window_id>section>div:nth-child(2)>div{
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 2px solid gray;
    border-radius: 10px;
    font-size: 2vh;
    font-weight: bold;
    color: gray;
    transition: 300ms all;
}

#users_banana_window_id>section>div:nth-child(2)>div:hover{
    cursor: pointer;
}

#users_banana_window_id>section>div:nth-child(2)>div:nth-child(1){
    border-color: blue;
    color: blue;
}

#users_banana_window_id>section>div:nth-child(2)>div:nth-child(2){
    border-color: red;
    color: red;
}

/* Банер "ВЫ ЗАБАНЕНЫ" */

#you_are_banned_id{
    width: 70vw;
    height: calc(-100px + 88vh);
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
}

#you_are_banned_id>div{
    padding: 20px;
    border-radius: 1vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#you_are_banned_id>div>span{
    font-size: 3.5vh;
    font-weight: bold;
    color: gray;
}

#you_are_banned_id>div>div{
    width: 10vh;
    height: 10vh;
    background-image: url(./img/block_accaunt.png);
    background-size: cover;
}

@media (max-width: 800px) {
    #you_are_banned_id{
        width: 100vw;
    }
}

/* Иконка видео о том что это видео */

.let_vid_icon_cl {
    width: 50px;
    height: 50px;
    position: relative;
    background-image: url(./catalog_img/type_video_icon.png);
    background-size: cover;
    background-position: 50% 50%;
    transform: translateY(-30vw) translateX(12.5vw);
}

@media (max-width: 800px) {
    .let_vid_icon_cl {
        width: 35px;
        height: 35px;
        transform: translateY(-65vw) translateX(20vw);
    }
}

/* МОДАЛЬНОЕ ОКНО ПРОСМОТРА ИКОНКИ ЧУЖОГО ПРОФИЛЯ */

#view_icon_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
}

#view_icon_id>div{
    width: 60vw;
    height: 80vh;
    background-size: contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(./users/profile_photo.webp);
    border-radius: 0%;
    transform: translateX(0px) translateY(0px);
    transition: 1000ms all;
}

#view_icon_back_id {
    position: fixed;
    top: -2.5vh;
    right: 10vw;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;
    background-color: black;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 5vh;
    font-weight: bold;
    color: white;
    opacity: 0;
    transition: 300ms;
}

#view_icon_back_id:hover {
    cursor: pointer;
}

@media (max-width: 800px) {
    #view_icon_id>div{
        width: 100vw;
        height: 96.5vh;
    }
    #view_icon_back_id {
        top: 25px;
        right: 25px;
    }
}

/* ============ МОДАЛЬНОЕ ОКНО "ВАШИ КОНТАКТЫ" ============ */

#window_your_contacts_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
}

#window_your_contacts_id>div{
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

#window_your_contacts_id>div>span{
    font-size: 3vh;
    font-weight: bold;
    color: black;
    text-align: center;
}

#window_your_contacts_id>div>section:nth-child(2) {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#window_your_contacts_id>div>section:nth-child(2)>span{
    font-size: 2.5vh;
    color: black;
}

#window_your_contacts_id>div>section:nth-child(2)>input{
    font-size: 2vh;
    color: black;
    padding: 5px;
    padding-left: 10px;
    border: 2px solid gray;
    border-radius: 5px;
    outline: none;
    margin-bottom: 15px;
}

#window_your_contacts_id>div>section:nth-child(3){
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

#window_your_contacts_back_id, #window_your_contacts_save_id {
    height: 4vh;
    padding: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
    font-weight: bold;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 1vw;
}

#window_your_contacts_back_id:hover, #window_your_contacts_save_id:hover {
    cursor: pointer;
}

#window_your_contacts_save_id > div {
    width: 4vh;
    height: 4vh;
    background-size: cover;
}

@media (max-width: 800px) {
    #window_your_contacts_back_id, #window_your_contacts_save_id {
        border-radius: 2vw;
        font-size: 2vh;
    }
}

/* МОДАЛЬНОЕ ОКНО "Выбор контактов" */

#sel_contact_type_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
}

#sel_contact_type_id>div{
    margin: 20px;
    padding: 20px;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

#sel_contact_type_id>div>span{
    font-size: 3vh;
    font-weight: bold;
    color: black;
    text-align: center;
}

#sel_contact_type_id>div>b{
    font-size: 3vh;
    font-weight: bold;
    color: red;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 25px;
}

#sel_contact_type_id>div>section{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 4px black;
}

#sel_contact_type_id>div>section>div:nth-child(1) {
    width: 50px;
    height: 50px;
    /* background-image: url(./users/profile_photo.webp);
    background-size: cover;
    background-position: 50% 50%; */
    color: black;
    transition: 300ms all;
}

#sel_contact_type_id>div>section>div:nth-child(1)>svg {
    width: 100%;
    height: 100%;
    transition: 300ms all;
}

#sel_contact_type_id>div>section>div:nth-child(1):hover {
    cursor: pointer;
    color: gray;
}

#sel_contact_type_id>div>section>span {
    font-size: 2vh;
    width: 200px;
    color: gray;
    transition: 300ms all;

    display: inline-block;
    /* или block / flex-элемент */
    max-width: 200px;
    /* или width: 200px; — нужная ширина */
    white-space: nowrap;
    /* не переносить строки */
    overflow: hidden;
    /* обрезать лишний текст */
    text-overflow: ellipsis;
    /* добавить "..." в конце */
}

#sel_contact_type_id>div>section>span:hover {
    cursor: pointer;
    background-color: gray;
}

#sel_contact_type_id>div>section>div:nth-child(3) {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    transition: 300ms all;
}

#sel_contact_type_id>div>section>div:nth-child(3):hover {
    cursor: pointer;
    background-color: gray;
}

#sel_contact_type_back_id {
    height: 4vh;
    padding: 1vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 2.5vh;
    font-weight: bold;
    background-color: rgba(128, 128, 128, 0.25);
    border-radius: 1vw;
}

#sel_contact_type_back_id:hover {
    cursor: pointer;
}

/* =============== Потдержать пост =============== */

.support_the_post_cl {
    width: 100%;
    height: 8vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    /* margin-bottom: 2vh; */
    border-top: 1px solid gray;
    z-index: 100;
    padding: 10px;
}

@media (max-width: 800px) {
    .support_the_post_cl {
        margin-bottom: 10vh;
        border-top: 1px solid gray;
        transform: translateY(-10vh);
        z-index: 1000;
    }
}

.support_the_post_cl>section {
    padding: 10px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.25);
    display: flex;
    flex-direction: row;
    align-items: center;

}

.support_the_post_cl>section>div{
    width: 30px;
    height: 30px;
}

.support_the_post_cl>section>div>svg{
    color: black;
}

.support_the_post_cl>section>span{
    font-size: 2vh;
    color: black;
}

.support_the_post_cl>section:hover {
    cursor: pointer;
}

#window_support_post_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 2003;
}

#window_support_post_id>div{
    margin: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    border-radius: 2vh;
}

#window_support_post_id>div>span{
    font-size: 3vh;
    font-weight: bold;
    color: black;
    margin-bottom: 25px;
}

#window_support_post_id>div>section:nth-child(2){
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

#window_support_post_id>div>section:nth-child(2)>span{
    font-size: 4vh;
}

#window_support_post_id>div>section:nth-child(2)>div{
    padding: 10px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.25);
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#window_support_post_id>div>section:nth-child(2)>div:hover{
    cursor: pointer;
}

#window_support_post_id>div>textarea{
    border: 2px solid gray;
    border-radius: 1vh;
    padding: 10px;
    font-size: 2vh;
    font-weight: bold;
    width: 100%;
    height: 15vh;
    margin-bottom: 25px;
}

#window_support_post_id>div>section:nth-child(4) {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

#window_support_post_id>div>section:nth-child(4)>div {
    padding: 10px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.25);
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#window_support_post_id>div>section:nth-child(4)>div:hover{
    cursor: pointer;
}

#window_support_post_id>div>section:nth-child(5){
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 5px;
    margin-top: 15px;
}

#window_support_post_id>div>section:nth-child(5)>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#window_support_post_id>div>section:nth-child(5)>div>div{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

#window_support_post_id>div>section:nth-child(5)>div>span{
    font-size: 2vh;
    color: black;
}

#window_support_post_id>div>section:nth-child(5)>span{
    font-size: 2vh;
    color: gray;
}

#window_support_post_id>div>section:nth-child(6) {
    width: 100%;
    order: -1;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

#window_support_post_id>div>section:nth-child(6)>div:nth-child(1){
    width: 25px;
}

#window_support_post_id>div>section:nth-child(6)>div:nth-child(2){
    width: 15vw;
    height: 4px;
    border-radius: 2px;
    background-color: gray;
}

#window_support_post_id>div>section:nth-child(6)>div:nth-child(3) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: black;
    font-size: 20px;
    color: white;
    font-weight: bold;
    transform: translateX(10px);
}

@media (max-width: 800px) {
    #window_support_post_id>div {
        position: fixed;
        bottom: -90vh;
        margin: 0;
        padding-top: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: 100vh;
        touch-action: none; /* добавь, если ещё нет */
    }

    #window_support_post_id>div>section:nth-child(6) {
        display: flex;
    }
}

/* --- Первоисточник --- */

.original_source_cl {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 15px;
    border: 2px solid gray;
    background-color: green;
    font: 2vh;
    font-weight: bold;
    color: black;
}

.original_source_cl:hover {
    cursor: pointer;
}

/* =============== МОДАЛЬНОЕ ОКНО КОММЕНТАРИЕВ "ПОДДЕРЖАТЬ ПОСТ" =============== */

#comm_supp_post_id {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 2003;
}

#comm_supp_post_id>div{
    width: 50%;
    padding: 20px;
    margin: 20px;
    background-color: white;
    border-radius: 2vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#comm_supp_post_id>div>span:nth-child(1){
    font-size: 2vh;
    font-weight: bold;
    color: black;
}

#comm_supp_post_id>div>span:nth-child(2){
    font-size: 2vh;
    color: gray;
}

@media (max-width: 800px) {
    #comm_supp_post_id>div{
        width: auto;
    }
}

#comm_supp_post_back_id {
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.25);
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 2vh;
    color: black;
    margin-top: 25px;
}

#comm_supp_post_back_id:hover {
    cursor: pointer;
}

/* --- Текст поста --- */

#post_text_id {
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: 4px solid gray;
    font-size: 3vh;
    font-weight: bold;
    color: gray;
    background-color: black;
}

#post_text_id:hover {
    cursor: pointer;
}

#post_text_block_id {
    width: 25vw;
    height: 200px;
    position: fixed;
    top: 10vh;
    left: 37.5vw;
    background-color: white;
    padding: 20px;
    padding-top: 10px;
    border-radius: 15px;
    border: 2px dashed gray;
    display: none;
    flex-direction: column;
    align-items: center;
    /* box-shadow: 2px 2px 4px black; */
    z-index: 60;
}

.post_text_block_back_cl {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.post_text_block_back_cl>div:nth-child(2) {
    width: 7vw;
    height: 4px;
    border-radius: 2px;
    background-color: gray;
}

.post_text_block_back_cl>div:nth-child(3) {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: black;
    font-size: 17.5px;
    font-weight: bold;
    color: white;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(10px);
}

.post_text_block_back_cl>div:nth-child(3):hover {
    cursor: pointer;
}

#post_text_block_id>span{
    font-size: 2vh;
    color: gray;
    z-index: 62;
}

#post_text_block_id>div{
    width: 50px;
    height: 50px;
    position: absolute;
    background-color: white;
    transform: translateX(-7.5vw) translateY(195px) rotateZ(45deg);
    border-right: 2px dashed gray;
    border-bottom: 2px dashed gray;
    z-index: 61;
}

@media (max-width: 800px) {
    
    #post_text_block_id {
        width: 70vw;
        height: 300px;
        left: 10vw;
    }

    #post_text_block_id>div {
        transform: translateX(-25vw) translateY(295px) rotateZ(45deg);
    }

}