/*DrumNews Player CSS*/

/*hide browser video controls*/
video::-webkit-media-controls-enclosure
{
    display:none !important;
}

/*button font color*/
:root{
    --lblColor: rgb(224, 224, 224);
}

/*Page frame*/
.frame{
    margin: 0px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    overflow: hidden;
    display: block;
    background-color: rgb(46, 46, 46);
    height:100%;
    width:100%;
    min-width: 300px;
    min-height: 300px;
    max-width: 768px;
    max-height: 768px;
    background-size: contain;
}

/*Video Player*/
.videoplayer{
    margin: auto;
    position: relative;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    text-align: center;
    margin-top: 1%;
    margin-bottom: 0.2%;
    background-color: black;
    width: 96%;
    height: 54%;
    outline-width: 0.9vmin;
    outline-color: rgb(34, 34, 34);
    outline-style: ridge;
}

video 
{
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 0;
}

/* Overlay */
.overlayLabel {
    position: absolute;
    width: 98.4%;
    height: 97.4%;
    display: block;
    z-index: 1;
    top: 0%;
    font-family: 'RubikMonoOne';
    font-style: italic;
    text-align: center;
    font-size: 100vmin;
    color: white;
}
.overlayLabel p
{
    transform: scale(2.4, 1);
    transform: translate(-7%, -106%);
    color: black;
}

/*Channel Panel*/
.chnlPanel{
    margin: 0vmin;
    position: relative;
    overflow: hidden;
    display: block;
    text-align: center;
    margin-top: 0vmin;
    width: 100%;
    height: 45.375%;
}

/*Default Button Style*/
.rcBtn{
    margin: 1.3%;
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 30%;
    height: 5vmin;
    border-radius: 7%;
    box-shadow: 0 2vmin rgb(25,25,25);
    text-align: center;
    font-size: 2.1vmin;
    color: var(--lblColor);
    background-image: linear-gradient(
        rgb(0, 0, 0), 
        rgb(54, 54, 54), 
        rgb(27, 27, 27)
    );
}

/*Default Button Hover*/
.rcBtn:hover {background-color: rgb(40,40,40)}
/*Default Button Click*/
.rcBtn:active {
  background-color: rgb(33,33,33);
  box-shadow: 0 1vmin rgb(16,16,16);
  transform: translateY(0.6vmin);
}

/*
Channel Buttons
*/
.chBtns{
    padding: 0.1%;
    text-align: center;
    margin-bottom: 1%;
}
/*Channel 1 Button*/
.dn1Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn1Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 2 Button*/
.dn2Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn2Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 3 Button*/
.dn3Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn3Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 4 Button*/
.dn4Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn4Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 5 Button*/
.dn5Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn5Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 6 Button*/
.dn6Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn6Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 7 Button*/
.dn7Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn7Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 8 Button*/
.dn8Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn8Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel 9 Button*/
.dn9Btn{
    font-family: 'RubikMonoOne';
    font-style: italic;
}
.dn9Btn p{transform: scale(12, 4) translateY(-9%);}

/*Channel Button Font*/
@font-face {
    font-family: 'RubikMonoOne';
    src: url('RubikMonoOne-Regular.ttf');
}

/*
Transport Buttons
*/
.tsptBtns{
    margin: 0%;
    padding: 0%;
    text-align: center;
    margin-top: 0.5%;
    margin-bottom: 1%;
}
/* Previous Button*/
.prevBtn{
    width: 19.3%;
    height: 9.3vmin;
    margin: 0%;
}
/*Rewind Button*/
.rewBtn{
    width: 19.3%;
    height: 9.3vmin;
    margin: 0%;
}
/*Play/Pause Button*/
.ppBtn{
    width: 19.3%;
    height: 9.3vmin;
    margin: 0%;
}
/*Fast Forward Button*/
.ffBtn{
    width: 19.3%;
    height: 9.3vmin;
    margin: 0%;
}
/*Next Button*/
.nextBtn{
    width: 19.3%;
    height: 9.3vmin;
    margin: 0%;
}
/*Icon Shape Defaults*/
.iShape{
    margin: 0vmin;
    display: inline-block;
}
/*Triangle Right*/
.triangle-right {
	width: 0vmin;
	height: 0vmin;
	border-top: 5vmin solid transparent;
	border-left: 5vmin solid var(--lblColor);
	border-bottom: 5vmin solid transparent;
}
/*Triangle Left*/
.triangle-left {
	width: 1%;
	height: 1%;
	border-top: 5vmin solid transparent;
	border-right: 5vmin solid var(--lblColor);
	border-bottom: 5vmin solid transparent;
}
/* Vertical Bar*/
.vertical-bar {
    height: 115%;
    width: 12%;
    background-color: var(--lblColor);
}