/*
    Theme.css is used to override any showcase styling!
*/

:root {
    /*Theme Color Variables*/
    --color-3: #333333;
    --color-4: #444444;
    --color-6: #666666;
    --color-76: #767676;
    --color-9: #999999;
    --color-AD: #ADADAD;
    --color-C: #CCCCCC;
    --color-D: #DDDDDD;
    --color-E: #EEEEEE;
    --color-F9: #f9f9f9;
    --color-white: #FFFFFF;
    --color-yellow: #FFFF00;

    --color-black: #000000;
    --color-gray: #111111;
    --color-lightgray: #222222;
    --color-buw: #89ba17;
    --color-buw-dark: #7fad18;
    --color-darkwhite: #ACC5C0;

    /*Body Color Variables*/
    --body-background-color: #060A09;
    --body-normal-text: var(--color-white);
    --body-link-color: var(--color-white);
    --main-link-color: var(--body-link-color);
    --content-panel-background: #060A09;
    --loading-background-color:  var(--color-E);
    --loading-bar-color:  var(--color-loading-orange);

    /*Menu  Color Variables*/
    --banner-background-color: var(--color-buw-dark);
    --menu-background-color: black;
    --menu-highlight-color: var(--color-4);
    --menu-normal-text: var(--color-darkwhite);
    --border-color: var(--color-4);
    --dropdown-menu-background-color: var(--color-black);
    --dropdown-menu-normal-text: var(--color-darkwhite);
    --dropdown-menu-highlight-color: var(--color-white);
    --dropdown-menu-highlight-text: var(--color-white);

    /*Modal Dialog Color Variabless*/
    --modal-header-background-color: var(--color-gray);
    --modal-body-background-color: var(--color-3);
    --modal-footer-background-color: var(--color-buwdark);
    --modal-header-normal-text: var(--color-white);

    /*Home Page Color Variables*/
    --carousel-button-background-color: var(--color-black);
    --carousel-button-text: var(--color-darkwhite);
    --browse-all-button-background-color: var(--color-black);
    --browse-all-button-normal-text: var(--color-white);

    /*Thumbnail Color Variables*/
    --thumbnail-background-color: #060A09;
    --thumbnail-hightlight-color: var(--color-black);
    --thumbnail-hightlight-text: var(--color-white);
    --thumbnail-image-border-color: black;
    --thumbnail-image-background-color: var(--color-black);
    --thumbnail-image-text-color: var(--color-E); 
    --thumbnail-corner-button-color: var(--color-black);
    --thumbnail-corner-button-text: var(--color-white);
    --thumbnail-normal-text: var(--color-white);
    --thumbnail-light-text: #ACC5C0;
    --thumbnail-tags-icon: var(--color-C);
    --thumbnail-details-border-color: var(--color-white);
    --thumbnail-details-background-color: var(--color-4);
    --thumbnail-detatils-title-text: var(--color-F9);
    --thumbnail-details-text: var(--color-white);

    /*Button and Forms*/
    --showcase-button-background-color: var(--color-3);
    --showcase-button-text-color: var(--color-white);
    --showcase-button-border-color: var(--color-6);
    --showcase-button-background-hover-color: var(--color-gray);
    --showcase-button-text-hover-color: var(--color-white);
    --showcase-button-border-hover-color: var(--color-AD);
    --showcase-control-background-color: var(--color-gray);
    --showcase-control-text-color: var(--color-darkwhite);
    --showcase-control-border-color: var(--color-black);

    /*Search Filter*/
    --search-filter-background-color: var(--color-3);

    --header-description-icon-color: var(--color-yellow);
    --header-description-background-color: var(--color-3);

    /*Presentation Action Bar*/
    --presentation-action-bar-background-color: #060A09;
    --presentation-action-bar-text: var(--color-white);


    --advanced-search-background-color: var(--color-4);
    --advanced-search-text: var(--color-white);
    --advanced-search-datepicker-background-color: var(--color-4);
    --advanced-search-datepicker-text: var(--color-white);
    --advanced-search-datepicker-hover-color: var(--color-9);
    --advanced-search-datepicker-active-color: var(--color-black);
    --advanced-search-range-background-color: var(--color-3);
}

/* –––– GENERAL –––– */

body {
  background-color: var(--content-panel-background);
}

.container {
  padding: 20px;
  width: 100%;
}
.showcase-application-view .header-fixed .nav-bar-view {
  top: -90px;
}

.loading {
  background-color: var(--color-gray) !important;
  height: 0;
}

@media only screen and (max-width: 768px) {
  .container {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .showcase-application-view .header-fixed .nav-bar-view {
    top: -70px;
  }
}

/* –––– NAV BAR –––– */

.nav-bar-view .navbar .navbar-nav a:active, .nav-bar-view .navbar .navbar-nav a:focus, .nav-bar-view .navbar .navbar-nav a:hover {
  background-color: transparent !important;
  color: var(--color-white);
}

.nav-bar-view .navbar .navbar-nav li .nav-user-link {
  border: none;
  border-radius: 100px;
  padding: 7px;
  margin-top: 9px;
}

.showcase-control {
  border-radius: 100px !important;
}

.nav-bar-view .navbar .navbar-search .input-group button {
  background-color: transparent !important;
  font-size: 14px;
}
.nav-bar-view .navbar .navbar-search .glyphicon {
  top: 5px;
}

.form-control {
  border: 1px solid var(--color-lightgray);
  border-radius: 100px;
}

.nav-bar-view .nav-bar-outer .container {
padding: 20px;
}

.nav-bar-view .navbar .navbar-right {
margin-right: 20px !important;
}


/* –––– MAIN –––– */

.spotlight-video-view {
  margin-top: 0px;
}

hr {
  border: none !important;
}

.showcase-application-view .showcaseFooter {
  margin-top: 50px;
} 


/* –––– SPOTLIGHT –––– */

.video-item-view {
  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.spotlight-video-view .slick-carousel-wrapper {
  padding: 0;
}

.spotlight-video-view .slick-carousel-wrapper .slick-carousel .slick-next, .spotlight-video-view .slick-carousel-wrapper .slick-carousel .slick-prev {
  height: 35px;
  width: 35px;
  background-color: var(--color-gray);
  box-shadow: 0 0 20px black;
}
.spotlight-video-view .slick-carousel-wrapper .slick-carousel .slick-next {
  right: 30px;
  z-index: 2;
}
.spotlight-video-view .slick-carousel-wrapper .slick-carousel .slick-prev {
  left: 30px;
  z-index: 2;
}
.slick-next, .slick-prev {
  top: 40%;
  transform: translateY(-50%);
}
.spotlight-video-view .slick-carousel-wrapper .slick-carousel .slick-next i, .spotlight-video-view .slick-carousel-wrapper .slick-carousel .slick-prev I {
  font-size: 18px;
  top: 6px;
}

.slick-dots li button:before {
  color: var(--color-darkwhite);
}
.showcase-home-view .slick-carousel .slick-dots li.slick-active button:before {
  color: var(--color-white);
}

.video-item-view .video-thumbnail .thumbnail-image-display {
  border-bottom: none;
border-radius: 10px;
}
.video-item-view .video-thumbnail .thumbnail-image-display img {
  object-fit: cover;
}
.video-item-view .video-thumbnail .thumbnail-image-display {
  overflow: hidden;
}
.slick-initialized .slick-slide img, .presentation-thumbnail-view .video-preview .video-preview-wrapper .presentation-image img {
  transition: all 0.3s;
  transform: scale(1);
}
.slick-initialized .slick-slide:hover img, .presentation-thumbnail-view .video-preview .video-preview-wrapper .presentation-image:hover img {
  transition: all 0.3s;
  transform: scale(1.1);
}

.video-item-view .video-details {
  padding: 10px;
}


/* –––– VIDEOS –––– */

.presentation-thumbnail-view .video-preview .video-preview-wrapper .presentation-image {
  overflow: hidden;
 -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.recent-videos-view .videoListPagerArea {
display: none;
}

.padded-full10 {
  padding: 15px;
}

.recent-videos-view .slick-carousel-wrapper .slick-carousel .slick-slide {
  margin: 15px;
}
.slick-carousel-wrapper .slick-carousel {
  padding: 0 !important;
}

.presentation-thumbnail-view {
  overflow: hidden;
  padding: 0;
   -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.presentation-thumbnail-view .video-preview {
  border: 0;
  border-radius: 10px;
  padding: 0;
overflow: hidden;
}

.presentation-thumbnail-view .video-details-button-wrapper {
  display: none;
}

.presentation-thumbnail-view .presentation-content-container {
  padding: 10px;
}

.thumbnail-title a {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

.presentation-thumbnail-view .presentation-content-container .presentation-details-panel .thumbnail-tags .tags I, .presentation-thumbnail-view .thumbnail-tags a, .presentation-thumbnail-view .presentation-content-container .presentation-details-panel .date-hits-wrapper, .presentation-thumbnail-view .presentation-content-container .presentation-details-panel .thumbnail-tags .tags ul li {
  color: var(--color-darkwhite);
}

.presentation-thumbnail-view .presentation-content-container .presentation-details-panel a:hover {
  color: var(--color-buw) !important;
  text-decoration: none;
}

.presentation-thumbnail-view .video-preview .video-preview-wrapper {
  margin-bottom: 0;
}
.presentation-thumbnail-view .video-preview .info-actions {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.presentation-thumbnail-view .video-preview .info-actions .actions .duration {
  margin-right: 10px;
}

.input-sm {
  -webkit-appearance: none;
  line-height: 1 !important;
  width: auto;
  border-radius: 5px !important;
}
.input-sm:hover {
  background-color: var(--color-buw);
}

.recent-videos-view .filterHeader, .recent-channels-view .filterHeader {
  padding-left: 15px;
  padding-right: 15px;
}

.showcase-home-view .pull-right {
  float: none !important;
}

.showcase-home-view .btn-all-caps {
  text-transform: none;
  background-color: transparent;
  border: 1px solid var(--color-buw);
  margin-top: 3px;
}
.showcase-home-view .btn-all-caps:active, .showcase-home-view .btn-all-caps:active:hover, .showcase-home-view .btn-all-caps:focus, .showcase-home-view .btn-all-caps:hover {
  background-color: var(--color-buw);
  text-transform: none;
  border: 1px solid var(--color-buw);
}
.showcase-home-view .title {
padding-top: 0;
margin-right: 20px;
}

.video-item-view.breakpoint-600 .video-details .video-details-title, .video-item-view.breakpoint-400 .video-details .video-details-title {
font-size: 24px;
line-height: 1.2;
margin-bottom: 5px;
}

.presentation-details .title {
font-size: 24px;
font-weight: 600;
}

.presentation-thumbnail-view .video-preview .info-actions {
display: none;
}

/* –––– CHANNELS –––– */

.recent-channels-view .slick-carousel-wrapper .slick-carousel .slick-slide {
  margin: 15px;
}

.channel-thumbnail-view {
  border-radius: 10px;
  padding: 10px 10px 10px;
  overflow: hidden;
}
.channel-thumbnail-view .channel-details-button-wrapper {
  display: none;
}

.channel-thumbnail-view .channel-thumbnail-container {
  border: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 0px;
  margin-bottom: 20px;
  border-radius: 50px;
}
.channel-thumbnail-view .channel-thumbnail-container .channel-thumbnail-wrapper .channel-image, .channel-thumbnail-wrapper {
  height: 100%;
}
.channel-thumbnail-view .channel-thumbnail-container .channel-thumbnail-wrapper .channel-image img {
object-fit: cover !important; 
}
.channel-thumbnail-wrapper .glyphicon {
  top: 25px;
}
.channel-thumbnail-view .channel-thumbnail-content-container .channel-name-desc .channel-name {
  text-align: center;
  font-weight: 600;
font-size: 24px;
line-height: 1.2;
}
.channel-thumbnail-view .channel-thumbnail-content-container .channel-name-desc .channel-name a:hover {
  text-decoration: none;
  color: var(--color-buw);
}
.channel-thumbnail-wrapper {
  transition: all 0.3s;
}
.channel-thumbnail-view:hover .channel-thumbnail-wrapper {
  transform: scale(1.3);
  transition: all 0.3s;
}

.channel-thumbnail-view .channel-thumbnail-container .channel-thumbnail-wrapper .channel-image:after {
padding-top: 100% !important;
}