body {
   background: #fafafa;
   align-items: center;
   justify-content: center;
   color: #333333;
   margin-top: 5rem;
 }

 h1, h2, h3, h4, h5, h6 {
   color: #444444;
 }

 .bg-steel {
   background-color: #5f788a;
 }
 :root{
    --white:#fff;
    --black:#000;
    --purple:#5E0AC4;
    --lightgrey:#959595;
}
.dark-theme{
    --white:#000;
    --black:#212121;
    --purple:#5E0AC4;
    --lightgrey:#959595;
}
.navbar-navhhjjj{
   overflow-y: hidden;
   height: 300px;
   border: 1px solid green;
}

.navbar-nav ul{
   overflow-y: auto;
   height: 300px;
   position: relative;
   #padding-right: 20px;
}
.navbar-nav ulhh.scroll{
   padding-right: 0;
}


 .site-header .navbar-nav .nav-link {
   color: #cbd0db;
   margin-left: 10px;
 }

 .site-header .navbar-nav .nav-link:hover {
   color: #ffffff;
 }

 .site-header .navbar-nav .nav-link.active {
   font-weight: 500;
 }
.site-header .navbar-navy {
   position:fixed; 
   width:20vw;
   min-height:100vh;
   display:flex;
   flex-direction:column;
 }

.site-header .navbar-navy li{
   font-size:24px;
   padding:10px 40px;
   color:white;
   display:flex;
   align-items:center;
 }
.site-header .navbar-navy li:hover{
   background:white;
   color:white;#f05462;
 }

 .content-section {
   background: #ffffff;
   padding: 10px 20px;
   border: 1px solid #dddddd;
   border-radius: 3px;
   margin-bottom: 20px;
 }

 .article-title {
   color: #444444;
 }

 a.article-title:hover {
   color: #428bca;
   text-decoration: none;
 }

 .article-content {
   white-space: pre-line;
 }

 .article-img {
   height: 65px;
   width: 65px;
   margin-right: 16px;
 }

 .art-img {
   height: 35px;
   width: 35px;
   margin-right: 16px;
 }

 .man-img {
   height: 55px;
   width: 55px;
   margin-right: 16px;
 }

 .comment-img {
   height: 40px;
   width: 40px;
   margin-right: 10px;
 }

 .article-metadata {
   padding-bottom: 1px;
   margin-bottom: 4px;
   border-bottom: 1px solid #e3e3e3
 }

 .article-metadata a:hover {
   color: #333;
   text-decoration: none;
 }

 .article-svg {
   width: 25px;
   height: 25px;
   vertical-align: middle;
 }

 .account-img {
   z-index: 1;
   height: 120px;
   width: 120px;
   position: relative;
   margin-top: -75px;
   display: block;
   margin-right: auto;
   margin-left: auto;
   border-radius: 100px;
   border: 10px solid #fff;
   transition-duration: 0.4s;
   transition-property: transform;
 }

 .account-img:hover {
   transform: scale(1.1);
 }

 .account_img {
   height: 120px;
   width: 8rem;
   clip-path: circle(60px at center);
   margin-top: 4.5rem;
 }

 .cover_img {
   position: absolute;
   width: 100%;
   height: 10rem;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
 .cover-img {
   width: 100%;
   height: 160px;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   object-fit: cover;
 }

 .account-heading {
   font-size: 2.5rem;
 }
video {
     transform: rotateY(180deg);
 }

 .select {
     height: 30px;
 }

 .h-90 {
     height: 90% !important;
 }

 .h-10 {
     height: 10% !important;
 }

 #peerVideo:hover {
     opacity: 0.6;
     cursor: pointer;
 }

 .centered {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
.user-stats {
     margin-top: 10px;
 }

 .user-stats th,
 .user-stats td {
     padding-right: 20px;
 }
 #action-box {
    padding-top: 30px;
 }
 .search-results {
    color: #FF9800;
 }
 .info {
    color: #4b4fe2;
    margin-right: 16px;
    width: 5%;
    height: 1rem;
 }
 .main-container{
    padding: 20px;
 }
 div#video_player_box1111{
    width:550px;
    background:#000;
    margin:0px auto;
 }
 div#video_controls_bar1111{
    background: #333;
    padding:10px;
    color:#CCC;
 }
 input#seek_one111{
    width:180px;
 }
 input#volume_one111{
    width: 80px;
 }
 .account-imgerror{
   height: 200px;
   width: 200px;
   margin-right: 20px;
   margin-bottom: 16px;
 }


 .dropdown-toggle::before {
     display: none !important;
 }

 .dropdown-toggle::after {
     display: none !important;
 }


 .icon {
     font-size: 20px;
     color: #9CA1A3;
     cursor: pointer;
 }
#background: #7F00FF;
 .upper-container{
     height: 150px;
 }
 .image-container{
     background: white;
     width: 80px;
     height: 80px;
     border-radius: 50%;
     padding: 5px;
     transform: translate(100px, 100px)
 }
 .image-container img{
     width: 80px;
     height: 80px;
     border-radius: 50%;
 }
 .card-container{
     width: 300px;
     height: 430px;
     background: #FFF;
     border-radius: 6px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     box-shadow: 0px 1px 10px 1px #000;
     overflow: hidden;
     display: inline-block;
 }
 .lower-container{
     height: 280px;
     background: #FFF;
     padding: 20px;
     padding-top: 40px;
     text-align: center;
 }
.profile{
	margin-bottom: 30px;
	text-align: center;
}

.profile img{
	display: block;
	width: 100px;
	height: 100px;
    border-radius: 50%;
	margin: 0 auto;
}

.profile h3{
	color: #ffffff;
	margin: 10px 0 5px;
}

.profile p{
	color: rgb(206, 240, 253);
	font-size: 14px;
}
.check-badge {
   height: 35px;
   width: 35px;
   margin-right: 16px;
 }