/* 		Styles for video player 	*/

div.ktv
{
	padding-right: 0px;
    padding-left: 0px;
}

div.ktv div.ksidebar-content
{
    display: none;
}

div.ktv .player
{
    padding-right: 0px;
}

div.ktv .sidebar-panel
{
    padding-right: 0px;
    height: 100%;
    padding: 0px;
    width: 15%;

}



.ktv .vertical-menu {
    width: 100%;
    height: 100%; 
    overflow-y: auto;
    background-color: #d8e9f8;
}

.ktv .vertical-menu a {
    background-color: #eee;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
    border-bottom: black;
    border-bottom-style: double;
}

.ktv .vertical-menu a:hover {
    background-color: #ccc;
}

.ktv .vertical-menu a.listItemActive {
    background-color: #4CAF50;
    color: white;
}

.ktv .vertical-menu svg
{
    margin-right: 0.4rem;
}

.ktv .sidebarHeader
{
    overflow: hidden; 
    background-color: #a6a6a6;
}

.ktv .sidebarHeader .filter
{
    float: left;
}


.ktv .sidebarHeader .actionsManagers
{
    float: right;
    display: inline-flex;
    margin-right: 1rem;
    margin-left: 1rem;
}



/* *****************************    Styles based on pc width ************************* */


.ktv .actionsManagers .add, 
.ktv .actionsManagers .remove, 
.ktv .actionsManagers .edit,
.ktv .actionsManagers .magicPlay
{
    font-size: 2.1rem;
    cursor: pointer; 
}


.ktv .actionsManagers .magicPlay,
.ktv .actionsManagers .add,
.ktv .actionsManagers .edit
{

    margin-right: 1rem;
}

.ktv .ksidebar 
{
    overflow: hidden;
}


/*

This "fixes" the scroll problem if the ations list has automatic scrolling

.ktv .vertical-menu {
overflow: auto;
    position: fixed;
    top: 205px;
    left: 1154px;
    width: 348px;
    height: 300px;
}

*/



/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

   .ktv .ksidebar 
   {
      padding-left: 0px;
      height: 437px;
  }

  .ktv .playerSideBarList {
    height: 361px;
}

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}