header nav {
    background-color: #292828;
}

html, body {
  height: 100%;
  margin: 0;
}
@media (min-width: 768px) {
    header nav {
        height: 64px;
    }
    container-fluid nav{
        height: 100%;
        width: 100%;
    }
}
.full-page-div {
  background-color: #ececec; /* Цвет фона */
  padding: 1%; /* Внутренний отступ */
  margin: 1%; /* Внешний отступ */
}

header nav a:hover {
    text-decoration: underline;
}

footer {
    background-color: #9c9c9c;
    height: 32px;
    color: #ffffff;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.25em;
}

h3 {
    font-size: 1.1em;
}
h4 {
    font-size: 1.5px;
}
/* .container{
    width: 500px;
    height: 500px;
}*/
/* .container-fluid{
    height: 100vh;
} 
.full-page-div {
  width: 100%;
  height: calc(100vh - 56px); /* 56px - высота навигационной панели (navbar) 
  overflow-y: auto;  Добавляет вертикальную прокрутку, если содержимое не помещается

} */
.card{
  font-size: 19px;
}

.circle-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden; /* обрезаем лишнее изображение за пределами круга */
  margin: auto; /* автоматическое выравнивание по горизонтали */
  margin-top: 20px; /* опциональное выравнивание по вертикали (если нужно) */
}

.circle-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* сохраняем соотношение сторон и обрезаем изображение, чтобы оно полностью заполнило круг */
}

a{
  margin-bottom: 2px;
  margin-top: 2px;
}
/* .container-main {
  flex: 1;
} */

.streamer-nickname {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 26px;
}
.online-indicator {
  display: inline-flex;
  align-items: center;
}

.dot {
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
}

.online-count {
  color: red;
  font-weight: bold;
  font-size: 13px;
}


/* .sidebar {
  background-color: #f8f9fa;
  height: 100vh;
} */
.video-thumbnail {
  /* width: 1920px;
  height: 1080px; */
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
} 
.embed-responsive{
  max-width: 100%;
  max-height: 100%;
  width: 1600px;
  height: 800px;
}

img,
svg {
  vertical-align: middle;
}
.btn-info{
  color:rgb(22, 9, 93);
  flex-wrap: nowrap;
  justify-content: center;
}
.card-img-top{
  max-width: 100%;
  height: auto;
  max-height: 500px;
}
.avatar-img{
  max-width: 100%;
  height: auto;
  max-height: 40px;
}
.modal-dialog img{
  max-width: 310px;
  max-height: 200px;
  object-fit: cover;
}
.fa-pencil{
  margin-right: 15px;
}