.main-container {
   margin-top: 20px;
}

.align-center {
   text-align: center;
}

.hubzcard {
   width: 100%;
}

.card {
   width: 100%;
   margin: 4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.card a img {
   display: inline;
   width: 60px;

}

.card-container {
   display: inline-block;
   width: 100%;
}



.video-grid-container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   width: 100%;
   padding: 4px;
}

.video-grid-item {
   font-size: 14;
   text-align: left;
   height: auto;
   width: 20%;
   flex: 1 0 20%;
   /* explanation below */
   align-items: stretch;
   padding: 8px;
   max-width: 22%;
}

@media (max-width: 900px) {
   .video-grid-item {
      font-size: 14;
      text-align: left;
      height: auto;
      width: 100%;
      flex: 1 0 100%;
      /* explanation below */
      align-items: stretch;
      padding: 8px;
      max-width: 100%;
   }
}


.video-grid-item p {
   font-family: 'Ariel';
}

.video-grid-item:hover {
   opacity: 0.5;
   cursor: pointer;
}

.video-player {
   height: 94vh;
   width: 100%;
}



.pagination {
   display: inline-block;
   text-align: center;
   width: 100%;
   padding-inline-start: 0px;
}

.pagination li {
   display: inline-block;
   text-decoration: none;
}

.pagination a {
   color: black;
   float: left;
   padding: 8px 16px;
   text-decoration: none;
}

body {
   background-color: rgb(20, 20, 20);
   color: rgb(197, 197, 197);
}

input[type="text"],
textarea,
button,
input[type=submit] {

   background-color: #292929;

}

.pagination li a {
   color: rgb(216, 215, 215);
   background-color: black;
   text-decoration: none;
}


.disabled span {
   color: rgb(216, 215, 215);
   background-color: black !important;
   text-decoration: none;
}

.disabled a {
   color: rgb(216, 215, 215);
   background-color: black !important;
   text-decoration: none;
}

.active {
   color: rgb(216, 215, 215);
   background-color: black;
   text-decoration: none;
}

.navbar {
   background-color: rgb(26, 26, 26);
   outline-width: 0;
}

button {
   outline: 0;
}


/* The sidebar menu */
.sidebar {
   height: 100%;
   /* 100% Full-height */
   width: 0;
   /* 0 width - change this with JavaScript */
   position: fixed;
   /* Stay in place */
   z-index: 1;
   /* Stay on top */
   top: 51px;
   left: 0;
   background-color: rgb(26, 26, 26);
   /* Black*/
   overflow-x: hidden;
   /* Disable horizontal scroll */

   transition: 0.5s;
   /* 0.5 second transition effect to slide in the sidebar */
   padding-bottom: 100px;
}

/* The sidebar links */
.sidebar a {
   padding: 4px 4px 4px 4px;
   text-decoration: none;
   font-size: 14px;
   color: #cccccc;
   display: block;
   transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
   color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
   position: absolute;
   top: 0;
   right: 25px;
   font-size: 36px;
   margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
   font-size: 20px;
   cursor: pointer;
   background-color: rgb(26, 26, 26);
   color: white;
   padding: 10px 15px;
   border: none;
}

.openbtn:hover {
   background-color: rgb(39, 39, 39);
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
   transition: margin-left .5s;
   /* If you want a transition effect */
   margin-left: 250px;
   margin-top: 50px;
}


@media screen and (min-height: 450px) {
   .sidebar {
      padding-top: 15px;
      width: 250px;
   }
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
   .sidebar {
      padding-top: 15px;
      width: 100% !important;
   }

   .sidebar a {
      font-size: 18px;
   }
}

body {
   width: auto;
}

.row {
   margin-left: 0 !important;
   margin-right: 0 !important;
}


/* width */
::-webkit-scrollbar {
   width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
   background: #292929;
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: rgb(65, 65, 65);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: rgb(53, 53, 53);
}

hr {
   border-color: rgb(59, 59, 59);
   margin: 0 !important;
}