.login {
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeIn 1s forwards, slideDown 1s forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes slideDown {
  to { transform: translateY(0); }
}
.badge--count[data-count="0"] { visibility:hidden; }
#kanal-count[data-count="0"], #ozel-count[data-count="0"] { visibility:hidden; }
#notification-count[data-count="0"], #notification-list[data-count="0"] { visibility: hidden; }
.notification {
  word-break: break-word;
  overflow-wrap: break-word;
}
.popup {
  opacity: 0;
  transform: translateY(-50px);
  animation: fadeIn 1s forwards, slideDown 1s forwards;
}
.chat__items { position: relative; }
.chat__screen-container { padding: 10px 10px; }
.chat__screen-wrapper { gap: 0px; }
.message_color { white-space: pre-wrap; }
.chat__items.hidden {
  overflow: hidden;
  width: 0px;
}
.chat-title--screen.hidden { display:none; }
.message__content { 
  word-break: break-word;
  overflow-wrap: break-word;
}
.button--add-file.active { transform: rotate(135deg); }
.message__text-container {
  gap: 0px;
  padding: 2px;
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-5px, -5px, 0);
  }
  20%, 80% {
    transform: translate3d(10px, 10px, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-15px, -15px, 0);
  }
  40%, 60% {
    transform: translate3d(15px, 15px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.shake-element { animation: shake 0.7s ease-in-out; }
.message--topic .message__text-container { background-color: var(--text-lighten-70); }
.db_channel, .db_nick {
  cursor: pointer;
  user-select: none;
}
.emoji-editor {
  position:absolute;
  bottom:50px;
  right:-55px;
  padding:10px;
  border:1px solid var(--bg-darken-10);
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  background:var(--bg);
  border-radius:10px 10px 0 0;
  max-height:200px;
  overflow-y:auto;
  display:none;
}
@media(max-width: 480px){
  .emoji-editor {
    bottom:35px;
    right:-30px;
  }
}
@media(min-width: 481px) and (max-width: 768px) {
  .emoji-editor {
    bottom:35px;
	right:-30px;
  }
}
@media(min-width: 769px) and (max-width: 1024px) {
  .emoji-editor {
    bottom:35px;
	right:-30px;
  }
}
.emoji-editor span {
  padding: 3px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .3s ease;
  border: 1px solid rgba(0,0,0,0);
  width: 30px;
  height: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emoji-editor span:hover { border:1px solid var(--main); }
.button--emoji { 
  position: absolute;
  font-size: 22px;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
.chat__form-container input { padding: 0 40px 0 10px; }
.button--yolla {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 25px;
  background-color: var(--buton-yolla);
  color: white;
}
.button--yolla:hover { color: white; }
@media(max-width: 480px) {
  .button--yolla {
    width: 25px;
	height: 25px;
	font-size: 20px;
  }
}
@media(min-width: 481px) and (max-width: 768px) {
  .button--yolla {
    width: 25px;
	height: 25px;
	font-size: 20px;
  }
}
@media(min-width: 769px) and (max-width: 1024px) {
  .button--yolla {
    width: 25px;
	height: 25px;
	font-size: 20px;
  }
}
.message__media-img { max-width: 45px; }
.message__media { flex-direction: row; }
.message__media-text h5 { font-size: 10px; }
.tooltip {
  visibility: hidden;
  width: 75px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px 0;
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 14px;
}
.tooltip {
  pointer-events: none;
  user-select: none;
  tabindex: -1;
}
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.tooltip-visible {
  visibility: visible;
  opacity: 1;
}
.message--sen .message__text-container { color: var(--main-darken-100); }
.header__nav-main a small {
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}
.is-writing { z-index: 99; }
.gizle { display:none; }
.button--etiket {
  position: relative;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 16px;
  background-color: var(--etiket-buton);
  color: white;
}
.button--etiket:hover { color: white; }
@media(max-width: 480px) {
  .button--etiket {
    width: 25px;
	height: 25px;
	font-size: 20px;
  }
}
@media(min-width: 481px) and (max-width: 768px) {
  .button--etiket {
    width: 25px;
	height: 25px;
	font-size: 20px;
  }
}
@media(min-width: 769px) and (max-width: 1024px) {
  .button--etiket {
    width: 25px;
	height: 25px;
	font-size: 20px;
  }
}