.chat_content {
    display: none;
}

.stream_mode {}

.stream_header_container {display: none;}
.stream_header_container.stream_mode {display: block;}


.stream_header {display: flex;position: absolute;width: 100%;height: 6vh;background-color: #474757;align-items: center;border-bottom: 0.1vh solid #737373;}

.deeds_logo_stream {width: 19vh;margin-top: 5vh;}

.deeds_title {font-weight: 600;font-size: 2vh;line-height: 2.4vh;color: white;margin-right: 2vh;margin-left: 2vh;}

.deeds_tags {
    display:flex;
}

.deeds_tag {
    color:white;
    padding: 0.5vh 1.2vh;
    border-radius: 0.5vh;
    background-color:#FFFFFF16;
    margin-right: 1.5vh;
    font-size: 1.7vh;
}

.patreon_small.stream_mode {
    width: 19.2vh;
    right: 25.2vh;
    left: unset;
    background-position: 36% 50%;
    height: 6vh;
    background-size: 18vh;
    box-shadow: none;
}

.dialog.stream_mode {
    background-color: #474757;
    left: 0;
    right: unset;
    width: 131.55vh;
    border-right: 1px #575757 solid;
    bottom: 0;
    height: 6vh;
}

.skip_button.stream_mode {
    left: 119vh;
}

.button_container.stream_mode {
    background: #616177;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 0.5vh;


  /* background-color: white; */
  padding: 3.25vh 6.2vh;
  /* border-radius: 1vh; */
  cursor: pointer;
  color: white;
    border-radius: 0.5vh;
  background-size: 45%;
  background-position: 49% 56%;
  background-image: url(../../static/images/skip_button.svg);
  background-repeat:no-repeat;
}

.offer_edit.stream_mode {
        background-color: #616177;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 3px 1px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2);
        border-radius: 0.5vh;
        left: 125vh;
        z-index: 1;
}


.chat_content.stream_mode {display:block;position: absolute;right: 0;bottom: 0;border-top: 0.1vh solid white;border-left: 0.1vh solid white;width: 44vh;position: absolute;background: #474757;border: 1px solid #575757;top: 6vh;}



.user_chat_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 74vh;
    overflow-y: scroll;
    padding: 3vh;
}

.chat_user {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 1.2vh;
    line-height: 3.2vh;
    font-size: 2vh;
}

.chat_usertext {
    display: inline;
    font-weight: 600;
    color: white;
    align-items: flex-start;
}

.chat_username {
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}

.locked_chat {
    display: flex;
    background-color: #616177;
    border-radius: 1vh;
    position: absolute;
    bottom: 3vh;
    height: 8vh;
    left: 3vh;
    right: 3vh;
    color: #C5C5D2;
    align-items: center;
}

.losked_smile {
    width:5vh;
    height:5vh;
    margin-right:2vh;
    filter: opacity(0.5);
}

.locked_chat_text {
    margin-left:2vh;
    line-height:2.5vh;
    font-size: 2vh;
}

.background.stream_mode {
    top:6vh;
    height:84vh;
    object-fit: cover;
    object-position: center;
    width:133.7vh;
}

.sprite_stream_mode {
    top:6vh;
    height:84vh;
    object-fit: cover;
    object-position: center;
    width:133.7vh;
}

.game_menu_button.stream_mode{
        width: 7.2vh;
        right:0;
        box-shadow: none;
}

.game_menu_button:hover.stream_mode{
    height:6vh;
    background-position: 50% 50%;
    filter: brightness(1.2);
}

.log_in_button.stream_mode {
    border-right:0.1vh solid #ffffff47;
}

.name.stream_mode {
    left: 30vh;
}


.text.stream_mode {
    margin-left: 29vh;
    width: 86vh;
    text-shadow: 0px 6px 10px rgb(0 0 0 / 14%), 0px 1px 18px rgb(0 0 0 / 14%), 0px 3px 5px rgb(0 0 0 / 14%);
    font-size: 2.5vh;
    line-height: 3.3vh;
}

.sound_container.stream_mode {
    right: 46vh;
    left: unset;
}


.sound_container:hover .sound.stream_mode {
  height: 6vh;
    background-position: 18% 50%;
}

.sound_container:hover .show_slider.stream_mode {
    top: 1vh;
    
}


.range_container.stream_mode {
    right: 37.3vh;
    left: unset;
    box-shadow: #00000057 -2px 1px  6px 0px;
}

.live_element {
    position:absolute;
    display:none;
}

.live_element.stream_mode {
    position: absolute;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    height: 10vh;
    left: 4vh;
    border-right: 0.1vh solid #707070;
}

.live_icon {
    color:white;
    font-size: 2vh;
    font-weight: 600;
    padding: 0.5vh 1vh;
    text-align: center;
    background-color: red;
    border-radius: 0.5vh;
}

.live_counter:before {
    width:1vh;
    height:1vh;
    content: "";
    border-radius:2vh;
    display: inline-block;
    background-color:#41ff4b;
    margin-top: -1vh;
    transform: translate(-1vh, -0.5vh);
}

.live_counter {
    margin-left: 3vh;
    color:white;
    font-size:3vh;
    font-weight:600;
    margin-right: 4vh;
}


.log_in_text:hover.stream_mode {
    padding: 1.75vh 1.5vh;
    font-weight: 600;
    transition: 0.2s;
    color: white;
  }

.log_in_button:hover.stream_mode {
  height: 6vh;
        filter: brightness(1.2);
}

.profile_button_game.stream_mode {
    background-color:#474757;
    color:white;
    border-right:0.1vh solid #777777;
    box-shadow: none;
    max-width: 12.1vh;
}

.profile_button_game:hover.stream_mode {
    filter:brightness(1.2);
    height: 5.1vh;
    padding: 0.9vh 1.2vh 0 1.5vh;
}

.profile.stream_mode {
    right:7vh;
    left:unset;
}
.profile_menu_game.stream_mode {
    right: 0;
}


#chat_input {
  background-color: transparent;
  color: #ffffff;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: inherit;
  font-size: 1.8vh;
  font-weight: normal;
  font-style: normal;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  width: 24.5vh;
  height: 5.5vh;
  margin-left: 0.3vh;
  padding: 1.5vh 0vh 0px 1.5vh;
  resize:none;
}

#chat_form button[type="submit"] {
    background-color: transparent;
    background-image: url('../../static/images/interface/send.png'); /* Замените на путь к вашей иконке */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* Масштабирование иконки, можно настроить в зависимости от размера иконки */
    border: none;
     /* Делаем кнопку круглой */
    width: 3.5vh;
    height: 7vh;
    margin-left: 1.5vh;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition:0.3s;
    filter: brightness(0.8)
  }
#chat_form button[type="submit"]:hover {
  /* Меняем цвет кнопки при наведении, если нужно */
  filter: brightness(1.5)
}

#chat_input::placeholder {
  color: #b4b4b4;
}

#generate_smile_button {
  width: 3.5vh;
  height: 7vh;
  background-color: transparent;
  background-image: url('../../static/images/interface/locked_smile.png'); /* Замените на путь к вашей иконке */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* Масштабирование иконки, можно настроить в зависимости от размера иконки */
  border: none;
  cursor: pointer;
  outline: none;
  box-shadow: none;
  filter: brightness(0.8);
  transition: 0.3s;
}

#generate_smile_button:hover {
  filter: brightness(1.5);
}

.sound.stream_mode {
  box-shadow: none;
}

.user_chat_container::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 1vh rgba(0,0,0,0.3);
	background-color: #474757;
}

.user_chat_container::-webkit-scrollbar
{
	width: 10px;
	background-color: #616177;
}

.user_chat_container::-webkit-scrollbar-thumb
{
	background-color: #616177;
	border: 0.1vh solid #555555;
}


.choices.stream_mode {
    left: -19vh;
     bottom: 40vh;
  }

  #log_in_button_game.stream_mode  {
	left: initial;
	right:7.1vh;
	box-shadow: none;
	height: 6vh;
}

#log_in_button_game.stream_mode:hover {
	height: 6vh !important;
}
.log_in_text.stream_interface.stream_mode:hover {padding: 1.9vh 1.9vh !important;}