@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* This file is for your main application CSS */
#stream-desc a {
  @apply underline text-brand hover:text-brand;
}

ul {
  @apply list-disc list-inside;
}

.invalid-input {
  border-color: #d52b4d;
}

.chat-message {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.chat-nickname {
  font-weight: 600;
}

.chat-admin {
  color: #e63946;
}

.chat-bar {
  width: 100%;
  display: flex;
}

.chat-remove {
  font-weight: 800;
  margin-left: auto;
}

/* from https://stackoverflow.com/a/38994837/9620900 */
/* Hiding scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hiding scrollbar for IE, Edge and Firefox */
#videoplayer-wrapper,
#chat-messages {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

::-webkit-scrollbar {
  display: none;
}

/* Hiding scrollbar for IE, Edge and Firefox */
#chat-input {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.details {
  padding: 5px 0px;
  border-bottom: 0.5px solid #0d0d0d;
}

summary {
  color: #0d0d0d;
  align-items: center;
  padding-bottom: 10px;
  justify-content: space-between;
}

.summary-content {
  color: #606060;
  padding: 10px 0px;
}
