/* Deque Partner Able Player Extras CSS
   Add your custom styles for Able Player and plugin features here. */



/* Playlist styles */

/* .dp-button > a {
    display: block;
    margin-bottom: 1em;
    padding: .5em 1em;
    width: fit-content;
    background: #003349;
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
    border-radius: .5em;
    font-size: .9em;
    cursor: pointer;
}

.dp-button.watch-video > a:before {
    content: '\f126';
    margin-right: .5em;

    display: inline-block;
	-webkit-font-smoothing: antialiased;
	font-family: 'dashicons';
	text-decoration: inherit;
	font-weight: normal;
	font-style: normal;
	vertical-align: top;
	-moz-transition: color .1s ease-in 0;
	-webkit-transition: color .1s ease-in 0;
	text-align: left;
} */



.deque-playlist-wrapper {
	background: #eee;
    padding: 1em;
/*     border: #ccc solid 3px; */
    border-radius: 1em;
	align-items:stretch !important;
}

.deque-playlist-wrapper > .deque-playlist-player {
    border: #404040 solid 1em;
    border-radius: .5em;
    background: #404040;
    position:relative
}

.deque-playlist-wrapper > .deque-playlist {
	height:auto;
	max-height:45em
}

.deque-playlist-player {
    display:grid;
    grid-template-columns: auto 500px;
    gap:1em;
    margin:1em;
    position: relative;
}

@media (max-width: 1000px) {
    .deque-playlist-player {
        grid-template-columns: 1fr;
    }
}

.deque-playlist-player .video-description {
	width:100%;
	padding:1.5em 1em;
	font-size:.9em;
	/* background:#262626; */
	/* color:#fff; */
	border-radius:0 0 .5em .5em;
}

@media (max-width: 1000px) {
    .deque-playlist-player .video-description {
        width:100%;
    }
}

.ableplayer-transcript {
    display: block;
    position: relative;
    height: 1px;
    background-color:transparent;
}
@media (max-width: 1000px) {
    .ableplayer-transcript {
        height: auto !important;
    }
}

   /* hide transcript by default */
.able-transcript-area {
    display:none;
}

.able-transcript-area {
    /* left: auto !important;
    right: 2em !important;
    width: calc(500px - 4em) !important;
    height: 27em !important;
    top: 2em !important; */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    /* height: auto !important; */
    top: auto !important;
    bottom: 0 !important;
    /* border:none !important; */

    /* background: #eee; */
    border: #ccc solid 3px !important;
    border-radius: .5em;
    padding-bottom:.5em;
}

@media (max-width: 1000px) {
    .able-transcript-area {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }
}

.able-transcript-area .able-transcript {
    height:calc(100% - 25px) !important;
}

.able-window-toolbar {
    background:#fff;
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    padding:.25em;
    font-size:.9em;
}

.autoscroll-transcript > label {
    color:#000 !important;
    font-weight: bold;
}

.autoscroll-transcript > label:after {
    content: ' transcript';
}

.able-transcript {
    background:transparent;
}

.able-transcript-container {
    line-height:1.3em;
}

/* .able-transcript-caption {
    border-top-width: 3px !important;
    border-bottom-width: 3px !important;
    border-left-width: 3px !important;
    border-right-width: 3px !important;
    border-style: solid;
    border-color: red;
    border-radius: 3px;
}

.able-transcript span:active, 
.able-transcript span:focus, 
.able-transcript span:hover {
    border-bottom-color:#003349;
    border-bottom-width: 3px;
} */

.able-highlight, 
.able-highlight span:active, 
.able-highlight span:focus, 
.able-highlight span:hover {
    background-color: #003349 !important;
    /* color: #FFD600 !important; */
    /* outline: #003349 solid 3px; */
    border-radius: 3px;
}

.deque-playlist-player .video-description > a {
	display:block;
	font-size:.8em;
	margin:1em;
	/* color:#fff; */
	font-weight:bold;
	text-align:right;
}

.deque-playlist-player .able-wrapper {
	margin:0;
	border-radius: .5em .5em 0 0;
	overflow: hidden;
    width:100% !important;
}

.deque-playlist {
    /* max-height: 30em; */
/* 		min-height: 25em; */
	width:100%;
    overflow: scroll;
    background: #eee;
	border: #ccc solid 3px;
    border-radius: .5em;
    transition: height 200ms ease-out;
}

@media (max-width: 1000px) {
    .deque-playlist {
        height: auto !important;
        max-height:none;
        padding-left:2em;
        padding-right:2em;
    }
}

.deque-playlist .able-playlist {
    background: transparent;
    padding: .5em;
    width:100%;
    height:100%;
    padding-bottom:1em;
    list-style:none;
    margin:0;
    display:block
}

.deque-playlist .able-playlist > li {
    height: fit-content;
}

@media (max-width: 1000px) {
    .able-wrapper {
        width:100% !important;
    }
}

.deque-playlist .able-playlist li {
	position:relative;
	padding:.25em 0 .25em 3.5em;
	border: .25em solid #003349;
	background-color: #fff;
	counter-increment: playlistItemCounter;
}

.deque-playlist .able-playlist li:before {
content:counter(playlistItemCounter);
    position: absolute;
    left: 1em;
    border-radius: 100%;
    background: #fff;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
    top: calc(50% - 1em);
}

.deque-playlist .able-playlist li.able-current {
    background-color: #003349;
    border-color: #003349;
}

.deque-playlist .able-playlist li.able-current button:not(:hover):not(:focus) {
    color:#fff
}

li.able-current button:after {
    display: block;
    content: ' (selected)';
    margin-top: .5em;
    font-weight: normal;
    font-size: .75em;
    
}

@media (max-width: 600px) {
    .able-playlist li button {
        display:block;
    }
    .able-playlist li button img {
        display: none;
    }
}