:root {
            /* root */

            /* container */
            --container_margin: 16px 15px;
            --container_top: auto;
            --container_right: auto;
            --container_bottom: auto;
            --container_left: auto;

            /* user */
            --voice_states_gap: 2px;
            --voice_state_gap: 8px;

            /* avatar */
            --avatar_size: 56px;

            /* text */
            --text_color: rgb(255, 255, 255);
            --text_font-size: 14px;
            --text_background-color: rgba(30, 33, 36, 0.95);
            --text_-webkit-text-stroke-width: 0px;
            --text_-webkit-text-stroke-color: rgb(0, 0, 0);
            --text_text-shadow: rgb(0, 0, 0) 0px 0px 0px;
            --text_box-shadow: rgb(0, 0, 0) 0px 0px 0px;
}

:root {
    --BLINK_DURATION: 1s;
    --BLINK_DELAY: 0s;
    --BLINK_ANIMATION: blink var(--BLINK_DURATION) steps(1, start) infinite var(--BLINK_DELAY);
    --IDLE_BRIGHTNESS: 65%;
}

.voice_container {
    position: absolute;
    top: var(--container_top);
    right: var(--container_right);
    bottom: var(--container_bottom);
    left: var(--container_left);
    margin: var(--container_margin);
    /* background-color: rgba(255, 0, 191, 0.26); */
}

.voice_states {
    display: flex;
    flex-direction: column;
    flex-direction: row;
    gap: var(--voice_states_gap);
    margin: 0;
    padding: 0;
    /* background-color: rgba(0, 128, 255, 0.26); */
}

.voice_state {
    display: flex;
    flex-direction: row;
    flex-direction: column;
    align-items: center;
    gap: var(--voice_state_gap);
    height: auto;
    margin: 0;
    /* background-color: rgba(255, 0, 0, 0.26); */
    --BLINK_ANIMATION: blink var(--BLINK_DURATION) steps(1, start) infinite var(--BLINK_DELAY);
    animation: var(--BLINK_ANIMATION);
    order: var(--ORDER);
    --SPRITE: var(--SPRITE_IDLE);
    content: var(--SPRITE);
    height: 300px;
}

.voice_state {     
  transition: filter 0.3s ease;
  filter: brightness(var(--IDLE_BRIGHTNESS));
}

.voice_state.wrapper_speaking {
  animation: bounce 0.3s normal, var(--BLINK_ANIMATION);
}

.voice_state.self_mute {}

.voice_state.self_deaf {}

.voice_avatar {
    box-sizing: border-box;
    width: var(--avatar_size);
    height: var(--avatar_size);
    margin: 0;
}

.voice_state.wrapper_speaking {
    --SPRITE: var(--SPRITE_TALKING);
    filter: brightness(100%);
}

.voice_username {
    padding: 0;
}

[class*="Voice_name"] {
    -webkit-text-stroke-width: var(--text_-webkit-text-stroke-width);
    -webkit-text-stroke-color: var(--text_-webkit-text-stroke-color);
    text-shadow: var(--text_text-shadow);
    font-size: var(--text_font-size);
    color: var(--text_color);
    background-color: var(--text_background-color);
    box-shadow: var(--text_box-shadow);
}

:root {

--IGGI_IDLE_OPENED:      url("https://dump.shedan.ru/dnd/Pirates/Avatars/Iggi/idle_opened.png");
--IGGI_IDLE_CLOSED:      url("https://dump.shedan.ru/dnd/Pirates/Avatars/Iggi/idle_closed.png");
--IGGI_TALKING_OPENED:   url("https://dump.shedan.ru/dnd/Pirates/Avatars/Iggi/talking_closed.png");
--IGGI_TALKING_CLOSED:   url("https://dump.shedan.ru/dnd/Pirates/Avatars/Iggi/idle_closed.png");
--LANCER_IDLE_OPENED:    url("https://dump.shedan.ru/dnd/Pirates/Avatars/Lancer/idle_opened.png");
--LANCER_IDLE_CLOSED:    url("https://dump.shedan.ru/dnd/Pirates/Avatars/Lancer/idle_closed.png");   
--LANCER_TALKING_OPENED: url("https://dump.shedan.ru/dnd/Pirates/Avatars/Lancer/talking_closed.png");  
--LANCER_TALKING_CLOSED: url("https://dump.shedan.ru/dnd/Pirates/Avatars/Lancer/idle_closed.png");
--JADE_IDLE_OPENED:      url("https://dump.shedan.ru/dnd/Pirates/Avatars/Jade/idle_opened.png");
--JADE_IDLE_CLOSED:      url("https://dump.shedan.ru/dnd/Pirates/Avatars/Jade/idle_closed.png");
--JADE_TALKING_OPENED:   url("https://dump.shedan.ru/dnd/Pirates/Avatars/Jade/talking_closed.png");  
--JADE_TALKING_CLOSED:   url("https://dump.shedan.ru/dnd/Pirates/Avatars/Jade/idle_closed.png");
--LUKA_IDLE_OPENED:      url("https://dump.shedan.ru/dnd/Pirates/Avatars/Luka/idle_opened.png");
--LUKA_IDLE_CLOSED:      url("https://dump.shedan.ru/dnd/Pirates/Avatars/Luka/idle_closed.png");
--LUKA_TALKING_OPENED:   url("https://dump.shedan.ru/dnd/Pirates/Avatars/Luka/talking_closed.png");
--LUKA_TALKING_CLOSED:   url("https://dump.shedan.ru/dnd/Pirates/Avatars/Luka/idle_closed.png");  
--VIRTHA_IDLE_OPENED:    url("https://dump.shedan.ru/dnd/Pirates/Avatars/Virtha/idle_opened.png");
--VIRTHA_IDLE_CLOSED:    url("https://dump.shedan.ru/dnd/Pirates/Avatars/Virtha/idle_closed.png");   
--VIRTHA_TALKING_OPENED: url("https://dump.shedan.ru/dnd/Pirates/Avatars/Virtha/talking_closed.png");  
--VIRTHA_TALKING_CLOSED: url("https://dump.shedan.ru/dnd/Pirates/Avatars/Virtha/idle_closed.png");
--GM_IDLE_OPENED:        url("https://dump.shedan.ru/dnd/Pirates/Avatars/GM/idle_opened.png");
--GM_IDLE_CLOSED:        url("https://dump.shedan.ru/dnd/Pirates/Avatars/GM/idle_closed.png");
--GM_TALKING_OPENED:     url("https://dump.shedan.ru/dnd/Pirates/Avatars/GM/talking_closed.png");
--GM_TALKING_CLOSED:     url("https://dump.shedan.ru/dnd/Pirates/Avatars/GM/idle_closed.png");

}



.voice_state[data-userid="user2"],
.voice_state[data-userid="user1"] {
    --SPRITE_IDLE_OPEN: var(--POP_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED: var(--POP_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN: var(--POP_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--POP_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 2500ms;
    --ORDER: 0;
}

/* Игги */
.voice_state[data-userid="305000517535399936"] {
    --SPRITE_IDLE_OPEN:      var(--IGGI_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED:    var(--IGGI_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN:   var(--IGGI_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--IGGI_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 6000ms;
    --ORDER: 0;
}

/* Лансер */
.voice_state[data-userid="866418178895511562"] {
    --SPRITE_IDLE_OPEN:      var(--LANCER_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED:    var(--LANCER_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN:   var(--LANCER_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--LANCER_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 4500ms;
    --ORDER: 0;    
}

/* Виртха */
.voice_state[data-userid="1318979158092546134"] {
    --SPRITE_IDLE_OPEN:      var(--VIRTHA_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED:    var(--VIRTHA_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN:   var(--VIRTHA_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--VIRTHA_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 3000ms;
    --ORDER: 0;
}

/* Джейд */
.voice_state[data-userid="694720007200047134"] {
    --SPRITE_IDLE_OPEN:      var(--JADE_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED:    var(--JADE_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN:   var(--JADE_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--JADE_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 1200ms;
    --ORDER: 0;
}

/* Лука */
.voice_state[data-userid="1384129541001183233"],
.voice_state[data-userid="740871308673417286"] {
    --SPRITE_IDLE_OPEN:      var(--LUKA_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED:    var(--LUKA_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN:   var(--LUKA_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--LUKA_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 1000ms;
    --ORDER: 0;    
}

/* ГМ */
.voice_state[data-userid="743236852458192919"] {
    --SPRITE_IDLE_OPEN:      var(--GM_IDLE_OPENED);
    --SPRITE_IDLE_CLOSED:    var(--GM_IDLE_CLOSED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_OPEN:   var(--GM_TALKING_OPENED, var(--SPRITE_IDLE_OPEN));
    --SPRITE_TALKING_CLOSED: var(--GM_TALKING_CLOSED, var(--SPRITE_TALKING_OPEN));
    --BLINK_DURATION: 3s;
    --BLINK_DELAY: 0ms;
    --ORDER: -999;
}

.voice_state {
    /* content: var(--SPRITE); */
}

.voice_avatar {
    content: var(--SPRITE);
}

@keyframes blink {
    0%,
    90% {
        --SPRITE_IDLE: var(--SPRITE_IDLE_OPEN);
        --SPRITE_TALKING: var(--SPRITE_TALKING_OPEN);
    }

    100% {
        --SPRITE_IDLE: var(--SPRITE_IDLE_CLOSED);
        --SPRITE_TALKING: var(--SPRITE_TALKING_CLOSED);
    }
}

@keyframes bounce {
  0%   { transform: translateY(0); }
  75% { transform: scale(105%) translateY(-2.5%); }
  100%   { transform: translateY(0); }
}