h3 { font-color: '#999'; }


.scrollwidth { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 100; height: 220px; white-space: nowrap;}
.scrollwidthchannels { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; z-index: 100; height: 100px; white-space: nowrap;}

.scrollwidth::-webkit-scrollbar {
    display: none;
}

.swArrowLeft {  height: 200px; position: absolute; z-index: 200; left: 0px; padding-left: 10px; top: 0px; vertical-align: middle; display: inline-block; font-size: 3em; background-color: rgba(39,43,48,0.5); opacity: 0; border: 0px; }
.swArrowRight { height: 200px; position: absolute; z-index: 200; right: 0px; padding-right: 10px;  top: 0px; vertical-align: middle; display: inline-block;  font-size: 3em; background-color: rgba(39,43,48,0.5); border: 0px;}

.lockup { overflow: hidden;  }

.wrapper { display: inline-block; margin-right: 10px; overflow: hidden; cursor: pointer; margin-bottom: 10px;}

.titleText {  position: relative; display: block;  text-overflow: ellipsis; overflow: hidden; text-align: center; word-wrap: break-word;  max-height: 3.0em; line-height: 1.5em;  }

.titleText2:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: -5px;
  width: 10px;
  height: 1.5em;
  background: linear-gradient(to right, rgba(17, 17, 17, 0), rgba(17, 17, 17, 1) 50%);
}

.rounded { border-radius: 8px;  }


.LazyLoad {
  opacity: 0;
  transition: all 1s ease-in-out;
}

.is-visible {
    opacity: 1;
}


.tvboxouter {

    display: block;
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    
}

.tvboxinner {

    position: absolute;
    display: block;
    max-height: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}

div.logocontainer {
    height: 60px;
    position: relative;
}

img.logoimg {
    margin: 0;
    position: absolute;
    padding: 4px;

    max-width: 55px;
    max-height: 55px;
    height: auto;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

body {
/*    background-color: #111; */
/*    color: white; */
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

/*
input, select, textarea, button {
    color: white;
    background-color: #111;
}

*/

.modal-content {
/*    background-color: #333; */
    border-color: white;
}



.modal .close {
    color: white;
    opacity: 1;
}

.modal-dialog {
  margin: 2.5vh auto;

}

/*Sets the maximum height of the entire modal to 95% of the screen height*/
.modal-content {
  max-height: calc(100vh - 30px);
  overflow-y: hidden;
  overflow-x: hidden;

}

/*Sets the maximum height of the modal body to 90% of the screen height*/
.modal-body {
  max-height: calc(100vh - 65px);

}


#descriptionText {
  transition: all 0.4s ease-in-out;
}

.nav-tabs {
    border-color: white;
}

.logo-shadow {
    -webkit-filter: drop-shadow(0px 0px 15px #ddd);
    filter:  drop-shadow(0px 0px 15px #ddd);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
}

.col-centered{
float: none;
margin: 0 auto;
}


.videoWrapperContainer {
display: inline-block;
position: relative;
width: 50%;
}

.videoWrapperDummy {
    padding-top: 56.25%;
}

.videoWrapper .video-btv{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* counter-acts some div stuff */
.videoModal .vjs-control-bar {
    bottom: 6px; 
}

.videoPlayerModal {
    width: 100%;
    background-color: black;
}


.videoModal.in {
    opacity: 1 !important;
}

.videoModal .modal-header {
    border-bottom: 0px;
    height: 40px;
    padding: 10px;
    padding-left: 30px;
    
}

#videomodal {
    opacity: 0.1;

    -webkit-transition: opacity 0.4s 3s ease-in-out;
    -moz-transition: opacity 0.4s 3s ease-in-out;
    -o-transition: opacity 0.4s 3s ease-in-out;
    transition: opacity 0.4s 3s ease-in-out;

}


#videomodal:hover {
    opacity: 1;
    
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;

}


.videoModal.modal {
    display: table !important;
    height: 100%;
    width: 100%;
    position: absolute;
}

.videoModal.modal button.close {
    margin: 0;
    padding: 0;
    position: relative;
    margin-top: -5px;
    margin-right: 30px;
}

.videoModal.modal button.close span {
    font-size: 30px;
}

.videoModal .modal-dialog {
    display: table-cell;
    vertical-align: middle;
}

.videoModal.modal-content {
    background-color: black;
    border: none;
    border-top: 0;
    margin: auto;
    padding-bottom: 40px;
}



/* Browse page */

.navbar {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding-left: 0;
    padding-right: 0;
}

.labelBlackGradient {

background: rgba(76,76,76,1);
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,1)), color-stop(25%, rgba(102,102,102,1)), color-stop(39%, rgba(71,71,71,1)), color-stop(50%, rgba(44,44,44,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(17,17,17,1)), color-stop(76%, rgba(43,43,43,1)), color-stop(91%, rgba(28,28,28,1)), color-stop(100%, rgba(19,19,19,1)));
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 );

}


.posterImg {
    position: relative;
    max-width: 100%;
}

.posterImgRound {
    position: relative;
    max-width: 100%;
    border-radius: 8px;
}

.posterImgRound:before  {
    border-radius: 8px;
    -webkit-box-shadow: inset -4px 10px 20px -10px rgba(255,255,255,1);
    -moz-box-shadow: inset -4px 10px 20px -10px rgba(255,255,255,1);
    box-shadow: inset -4px 10px 20px -10px rgba(255,255,255,1);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.posterImg:before {
    -webkit-box-shadow: inset -6px 7px 20px -10px rgba(255,255,255,1);
    -moz-box-shadow: inset -6px 7px 20px -10px rgba(255,255,255,1);
    box-shadow: inset -6px 7px 20px -10px rgba(255,255,255,1);
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


.picLabel {
border-radius: 2.5px; 
position: absolute;
margin: 0;
padding: 0;
z-index: 100;
padding-left: 17px;
padding-right: 17px;
box-shadow: 0px 5px 8px -6px rgba(0, 0, 0, 0.7);
color: white;
min-width: 73px;

-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);

}




.greenGradient {

background: rgba(98,125,77,1);
background: -moz-linear-gradient(top, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(98,125,77,1)), color-stop(100%, rgba(31,59,8,1)));
background: -webkit-linear-gradient(top, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -o-linear-gradient(top, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: -ms-linear-gradient(top, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
background: linear-gradient(to bottom, rgba(98,125,77,1) 0%, rgba(31,59,8,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08', GradientType=0 );

}


.grayGradient {

background: rgba(80,80,80,1);
background: -moz-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(20,20,20,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(80,80,80,1)), color-stop(100%, rgba(20,20,20,1)));
background: -webkit-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(20,20,20,1) 100%);
background: -o-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(20,20,20,1) 100%);
background: -ms-linear-gradient(top, rgba(80,80,80,1) 0%, rgba(20,20,20,1) 100%);
background: linear-gradient(to bottom, rgba(80,80,80,1) 0%, rgba(20,20,20,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#505050', endColorstr='#141414', GradientType=0 );

}


/*
 *  STYLE 1
 */

::-webkit-scrollbar
{
}


::-webkit-scrollbar-track:horizontal
{
    height: 8px;
    background-color: #111;
}

::-webkit-scrollbar-thumb:horizontal
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #333;
}

.scrollwidth::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    height: 8px;
    width: 8px;
    background-color: #111;
}

.scrollwidth::-webkit-scrollbar
{
    height: 8px;
    background-color: #111;
}

.scrollwidth::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #333;
}


.progress-enter {
  opacity: 0.01;
}

.progress-enter.progress-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.progress-leave {
  opacity: 1;
}

.progress-leave.progress-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in;
}


.browse-dropdown .dropdown-menu {
    overflow-y: scroll;
    max-height: calc(100vh - 135px);
}

.recordingTable {
    width: 100%;
    padding: 10px;
}

.recordingTable th {
    padding: 10px;
    font-size: 20px;
}

.recordingTD {
    padding: 10px;
    vertical-align: top;
    
}