@charset 'UTF-8';
@import url('rtve.player.ccttSel.basics.css');

/*posicion inicial*/
.ccttSel {z-index:1;}
.ccttSel.active {z-index:3;}
.vjs-error-display + .ccttSel {z-index:-1;}/*???*/
.ccttSel {position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);}



.videoPlayer:hover .ccttSel,.ccttSel:hover,
.vjs-has-started.vjs-paused .ccttSel,.vjs-has-started.vjs-user-active .ccttSel {opacity:1;}


 


.ccttSel .open_close {cursor:pointer;}







/*posicion abierta*/

.ccttSel.active .open_close:before {bottom:0;top:auto;}
.ccttSel.active [role="label"] {width:26.4rem;bottom:2.4rem;bottom:1.5rem;left:6rem;position:absolute;}



	.ccttSel.active [role="listbox"]:after,.ccttSel.active [role="listbox"]:before {left:50%;}
	.ccttSel.active [role="listbox"] {columns:4;}

	
.ccttSel.active [role="listbox"] > li {}
.ccttSel.active [role="listbox"] > li:hover {background-color:rgba(255,255,255,0.33);cursor:pointer;}
.ccttSel.active [role="listbox"] > li:hover strong {color:#fff;}
.ccttSel.active [role="listbox"] > li:hover:before {border:0.3rem solid #fff;margin:0;}





/*flechas*/
.ccttSel.active [role="listbox"]:after,
.ccttSel.active [role="listbox"]:before {position:absolute;bottom:0;border:0 solid transparent;content:'';height:0;width:0;}
.ccttSel.active [role="listbox"]:before {border-top-color:#fff;border-width:1.6rem 1.6rem 0 1.6rem;margin-left:-1.6rem;bottom:-1.6rem;}
.ccttSel.active [role="listbox"]:after {border-top-color:#000;border-width:1.4rem 1.4rem 0 1.4rem;margin-left:-1.4rem;bottom:-1.4rem;}





.ccttSel.minify {}

.ccttSel {/*transition:opacity 1s ease-in-out;*/}
.ccttSel .open_close .rtve-icons  {/*transition:transform 0.3s ease-in-out, left 1.3s ease-in-out;*/}
.ccttSel:not(.active),.ccttSel:not(.active) [role="label"],.ccttSel:not(.active) [role="listbox"] {/*transition:all 1s ease-in-out;*/}

.ccttSel:not(.active):hover .open_close:after,
.ccttSel.active .open_close:after {display:none;}
.ccttSel .open_close:after {animation-name:pulso_directo;animation-duration:2s;animation-iteration-count:infinite;}



/*estado hover*//*mostramos seleccion*/
.ccttSel:not(.active):hover {width:calc(5.6rem + 20rem + 4.8rem);transform:translateX(-50%);}
.ccttSel:not(.active):hover .open_close {width:calc(5.6rem + 20rem + 4.8rem);}
.ccttSel:not(.active):hover [role="label"],
.ccttSel:not(.active):hover [role="listbox"] > .active {width:20rem;opacity:1;/*transition:all Os;*/}

/*capa emergente*/
.selBox_lista.ccttSel.active:before {content: '';
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.85);
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-100% + 5rem));}