header nav {
    background-color: #292828;
}
/* @media screen  and (min-width: 992px){
    .navbar .container-fluid, .navbar-expand-lg .navbar-collapse, .navbar-expand-lg .navbar-nav{
        flex-direction: column;
        align-items: flex-start;

    }
    .navbar{
        width: 25%;
        height: 100vh;
        align-items: flex-start;

    }
    .navbar-brand{
        margin-left: .5rem;
        font-size: 1.5em;
        font-weight: bold;
    }
    
}
.navbar .navbar-nav .nav-link{
    color: #fff2ff;
    font-size: 1.1em;
} */
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;
}

/* 
.tab-style-1 {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tab-style-1 a {
  font-size: 24px;
  color: #ACACAC;
  letter-spacing: 1.5px;
  display: inline-block;
  margin: 0 47px;
  line-height: .8;
  font-family: "Proxima Nova Rg";
  border-bottom: 1px solid transparent;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tab-style-1 a {
    margin: 0 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tab-style-1 a {
    margin: 0 20px;
  }
}

@media only screen and (max-width: 767px) {
  .tab-style-1 a {
    margin: 0 10px 15px;
    font-size: 20px;
  }
}

.tab-style-1 a.active {
  color: #181818;
  border-bottom: 1px solid #181818;
}

.tab-style-1 a:hover {
  color: #BB9B1F;
}

@media only screen and (max-width: 767px) {
  .tab-style-1.mb-10 {
    margin-bottom: 24px !important;
  }
}  */