/*
    Это файл со стилями для глобального
    поиска на главной страничке Vendorgram
    Его стили я захотел написать отдельно 
    но сам поиск находится в том же base.html
*/

.search_container {
    background-color: none;
    position: absolute;
    margin-left: 22.2vw; /* 335px → 23.26vw */
    margin-top: 1.74vw; /* 25px → 1.74vw */
    width: 45.14vw; /* 650px → 45.14vw */
    height: 2.78vw; /* 40px → 2.78vw */
    z-index: 0;
}

.search {
    font-size: 1.11vw; /* 16px → 1.11vw */
    padding-left: 1.04vw; /* 15px → 1.04vw */
    padding-right: 4.17vw; /* 60px → 4.17vw */
    box-shadow: 0px 0px 0.69vw rgba(0,0,0,0.3); /* 10px → 0.69vw */
    border: none;
    background-color:none;
    border-radius: 1.39vw; /* 20px → 1.39vw */
    height: 100%;
    width: 100%;
    direction: ltr; /* Явно указываем направление текста слева направо */
    outline: none;
    padding-left: 2.78vw; /* 40px → 2.78vw */
}

.search::placeholder {
    color: black;
}

.search_button {
    border-radius: 1.39vw; /* 20px → 1.39vw */
    position: absolute;
    background-color: none;
    background-color: none;
    width: 2.08vw; /* 30px → 2.08vw */
    height: 2.08vw; /* 30px → 2.08vw */
    left: 0.69vw; /* 10px → 0.69vw */
    top: 0.35vw; /* 5px → 0.35vw */
}
.search_button:hover {
    cursor: pointer;
}

.search_button_img {
    position: absolute;
    background-color: none;
    width: 2.08vw; /* 30px → 2.08vw */
    height: 2.08vw; /* 30px → 2.08vw */
    left: 0%;
}

input[type="search"]::-webkit-search-cancel-button {
    cursor: pointer;
    -webkit-appearance: none;
    height: 1.39vw; /* 20px → 1.39vw */
    width: 1.39vw; /* 20px → 1.39vw */
    background-color: black;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    margin-right: -2.08vw; /* -30px → -2.08vw */
    position: relative;
    right: -0.69vw; /* -10px → -0.69vw */
}

.search_container_list_chats {
    z-index: 10;
    background-color: white;
    border-left: 1px solid #D3D7DF; /* оставляем px */
    border-right: 1px solid #D3D7DF; /* оставляем px */
    border-bottom: 1px solid #D3D7DF; /* оставляем px */

    width: 45.14vw; /* 650px → 45.14vw */
    height: 2.78vw; /* 40px → 2.78vw */
    border-radius: 1.39vw; /* 20px → 1.39vw */
    position: absolute;
    margin-left: 22.2vw; /* 335px → 23.26vw */
    margin-top: 5.38vw; /* 77.5px → 5.38vw */
    scrollbar-width: none;
}

.all_main_chats_container {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    background-color: none;
}

/*Отдел с стилями для объекта чата 
при использовании поиска - вывод найденных чатов: */
.main_searchest_chat_container {
    position: relative;
    width: 45.14vw; /* 650px → 45.14vw */
    height: 2.78vw; /* 40px → 2.78vw */
    background-color: none;
    margin-bottom: 0.69vw; /* 10px → 0.69vw */
    margin-top: 0.69vw; /* 10px → 0.69vw */
    transition: 0.5s;
}

.main_searchest_chat_container:hover {
    transition: 0.5s;
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.search_chat_avatar_img {
    position: relative;
    display: flex;
    width: 2.78vw; /* 40px → 2.78vw */
    height: 2.78vw; /* 40px → 2.78vw */
    border-radius: 69.44vw; /* 1000px → 69.44vw */
    margin-left: 0.69vw; /* 10px → 0.69vw */
}

.name_and_vlink_case {
    position: relative;
    display: flex;
    flex-direction: row; /* располагаем блоки в строку */
    align-items: center; /* выравниваем по центру по вертикали */
    margin-left: 4.17vw; /* 60px → 4.17vw */
    margin-top: -2.78vw; /* -40px → -2.78vw */
    height: 100%;
    background-color: none;
}

.text_container_name_and_vlink {
    white-space: nowrap; /* Запрещает перенос строк */
    position: relative;
    display: flex;
    flex-direction: column; /* текст в колонку */
    align-items: flex-start; /* текст прижат к левому краю */
}

.search_chat_name_span {
    position: relative;
    display: flex;
    margin-top: 0px;
    margin-left: 0px;
    font-size: 0.97vw; /* 14px → 0.97vw */
    white-space: nowrap; /* Запрещает перенос строк */
}

.search_chat_vlink_span {
    position:relative;
    display: flex;
    margin-left: none;
    margin-top: 0px;
    font-size: 0.83vw; /* 12px → 0.83vw */
    color: #1777D7;
}

.vertical_line_search_chat {
    position: relative;
    background-color: grey;
    width: 1px; /* оставляем px по вашему требованию (border-like property) */
    height: 2.78vw; /* 40px → 2.78vw */
    border-radius: 6.94vw; /* 100px → 6.94vw */
    margin-left: 0.69vw; /* 10px → 0.69vw */
    margin-top: 0px;
}

.chat_description_class_search {
    position: relative;
    margin-left: 0.69vw; /* 10px → 0.69vw */
    margin-top: 0.69vw; /* 10px → 0.69vw */
    font-size: 0.97vw; /* 14px → 0.97vw */
    height: 2.78vw; /* 40px → 2.78vw */
}