:root {
    /* --main-color: #232323;*/
    --main-color: #FFEBCD;
    --add-color: #393939;
    --green-color: #2d9062;
    --yellow-color: #faaf08;
    --wheat-color: #FFEBCD;
    --pattern: url(/img/menu-icons/black-scratch-lines.png);
}

.lhst_avatar_vertical-alignment-top {
    vertical-align: top
}

.lhst_avatar_main-section {
    margin-left: 229px;
    margin-top: 120px
}

.lhst_avatar_left-side-bar {
    background-image: var(--pattern);
    background-size: 60%;
    width: 229px;
    min-width: 229px;
    position: fixed;
    height: 100%
}

.lhst_avatar_possessions_titles {
    margin: 3px;
    font-size: 16px;
    font-weight: 700;
    color: #a52a2a
}

.lhst_avatar_inline {
    display: inline-block
}

.lhst_avatar_main_data_image_div {
    border-style: solid;
    border-width: 1px;
    border-color: var(--main-color);
    border-radius: 10px;
    height: 100px;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    /* ��������� ������� ������� ��� ������� */
}

.lhst_avatar_main_data_image {
    border:0;
    border-radius: 10px;
    height: 100px;
    width: 100px;
    display: inline-block;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    /* ��������� ������� ������� ��� ������� */
}

    .lhst_avatar_main_data_image_div:hover {
        box-shadow: 0 0 5px rgba(255, 223, 150, 0.8), 0 0 10px rgba(255, 200, 100, 0.5);
        /* ������ �������� ����������-������� ����� */
    }

    /* ������ ������� */
    .lhst_avatar_main_data_image_div:active {
        transform: scale(0.95); /* ��������� ���������� ������� ��� ������� */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* ����, ��������� �������� ����������� */
    }


.lhst_avatar_main_image {
    border: 1px solid transparent; /* ������� ����������� ������ ������� */
    border-radius: 10px; /* ������� ����� �������� ���� */
    vertical-align: top;
    /* ���������� �������� �� ����� */
    background-image: linear-gradient(#232323, #232323), /* �������� ������ ��� */
    linear-gradient(to right, #d4af37, #f0e68c); /* ���������� �������� �� ����� */
    background-origin: border-box;
    background-clip: content-box, border-box;
    padding: 1px; /* ���������� ��� ����� */
    height: 150px;
    width: 150px;
    display: inline-block;
    overflow: hidden
}

.lhst_avatar_selection_div {
    height: 299px;
    width: 445px;
    padding: 15px;
    background-image: var(--pattern);
    background-size: 40%;
    border-radius: 20px;
    border-width: 2px;
    border-color: var(--wheat-color);
    color: var(--wheat-color)
}

.lhst_avatar_image_div {
    text-align: center;
    /*    height: 400px;
    width: 280px;*/
    margin-left: 10px;
    padding: 10px;
    background-image: var(--pattern);
    background-size: 60%;
    border-radius: 20px;
    border-width: 2px;
    border-color: var(--wheat-color);
    color: var(--wheat-color)
}

.lhst_avatar_divs_align {
    vertical-align: top
}

.lhst_slider {
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    --scrollbar-color-thumb: var(--main-color);
    --scrollbar-color-track: var(--add-color);
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 0
}

    .lhst_slider::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track)
    }

    .lhst_slider::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy)
    }

    .lhst_slider::-webkit-scrollbar-thumb {
        background: transparent
    }

    .lhst_slider::-webkit-scrollbar-track {
        background: transparent
    }

    .lhst_slider:hover::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb)
    }

    .lhst_slider:hover::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track)
    }

.lhst_slider-horizontal {
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    --scrollbar-color-thumb: red;
    --scrollbar-color-track: #ff0;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 5px
}

    .lhst_slider-horizontal::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track)
    }

    .lhst_slider-horizontal::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy)
    }

    .lhst_slider-horizontal::-webkit-scrollbar-thumb {
        background: transparent
    }

    .lhst_slider-horizontal::-webkit-scrollbar-track {
        background: transparent
    }

    .lhst_slider-horizontal:hover::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb)
    }

    .lhst_slider-horizontal:hover::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track)
    }

.lhst_btn_avatar_confirm {
    margin-bottom: 3px;
    padding: 0;
    width: 74px;
    height: 38px;
    background: radial-gradient(var(--add-color),black);
    color: #f4ebdb;
    border-radius: 9px;
    font-weight: 700;
    font-size: revert
}

    .lhst_btn_avatar_confirm:hover {
        background: radial-gradient(var(--green-color),black);
        color: var(--yellow-color);
        border-style: outset
    }

    .lhst_btn_avatar_confirm:active {
        border-style: inset;
        transform: scale(0.95); /* ��������� ���������� ������� ��� ������� */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* ����, ��������� �������� ����������� */
    }

.lhst_checkbox_gender {
    border: thick;
    border-width: 2px;
    border-radius: 5px;
    border-color: green;
    width: 30px;
    height: 30px
}

.lhst_small_avatar_image_selection:hover {
    cursor: pointer
}

.lhst_info-section {
    margin-bottom: 70px
}

.lhst_avatar_info_div {
    margin-left: 10px;
    padding: 15px;
    background-image: var(--pattern);
    background-size: 30%;
    border-radius: 20px;
    border-width: 2px;
    border-color: var(--wheat-color);
    color: var(--wheat-color);
    vertical-align: top;
    height: fit-content;
}

.lhst_share_img {
    width: 30px;
    height: 30px;
}

    .lhst_share_img:active {
        transform: scale(0.95) !important; /* ��������� ���������� ������� ��� ������� */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* ����, ��������� �������� ����������� */
    }


.lhst_input_info_share {
    width: 200px;
    height: 24px;
    margin-bottom: 3px;
    margin-left: 4px;
    background: radial-gradient(var(--add-color),black);
    color: #f5deb3;
    border-radius: 3px;
    font-size: 14px
}

.lhst_contact_info_input_description {
    width: 258px;
    height: 83px;
    background: radial-gradient(var(--add-color),black);
    color: #f5deb3;
    border-radius: 3px;
    word-wrap: break-word;
    vertical-align: top;
    font-size: 12px
}

::placeholder {
    color: lightgray;
    opacity: 90%;
    filter: brightness(1.3)
}

:focus::placeholder {
    opacity: 0;
    transition: opacity .2s
}

.lhst_labelFile_size {
    font-size: 14px;
    font-weight: 600;
    align-self: end;
    font-family: 'Sitka Display','Arial',Arial,sans-serif;
}

.lhst_form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--wheat-color);
    background-color: var(--main-color);
    background-clip: padding-box;
    border: 1px solid var(--add-color);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#avatarFile {
    display: none;
}

.lhst_settings_button {
    display: inline-block;
    padding: 3px 7px 0 7px;
    height: 28px;
    background: radial-gradient(var(--add-color),black);
    color: var(--wheat-color);
    border-radius: 3px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    text-align: center;
    font-family: 'Sitka Display','Arial',Arial,sans-serif;
}

.lhst_settings_button:hover {
    background: radial-gradient(var(--green-color),black);
    color: var(--yellow-color);
}

.lhst_settings_button:active {
    border-style: inset;
    transform: scale(0.95); /* ��������� ���������� ������� ��� ������� */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* ����, ��������� �������� ����������� */
}

.file-info {
    font-size: 14px;
    color: var(--wheat-color);
    font-family: 'Sitka Display','Arial',Arial,sans-serif;
}

.lhst_settings_div {
    margin-top: 10px;
    display:flex;
}