
#area_comentarios .wrapper {
    width: 24%;
}
.clock-slider {
    position: relative;
    width: 90% !important;
    padding: 20px 60px 50px 30px;
    margin: 20px 20px 50px !important;
}
.clock-slider-val {
    font: 400 12px Arial;
    color: #888;
    display: block;
    margin: 20px 20px !important;
    text-align: left;
}
.clock-slider-val.start:before {
    content: "In: ";
    font: 700 12px Arial;
}
.clock-slider-val.finish:before {
    content: "Out: ";
    font: 700 12px Arial;
}
.noUi-pips-horizontal {
    padding: 10px 0 !important;
}
.noUi-value-horizontal {
    margin-left: -20px !important;
    padding-top: 20px !important;
}
/* handles: reduzco de 34/17 a 24/12; */
.noUi-horizontal .noUi-handle {
    width: 20px;
    height: 28px;
    left: -10px;
    top: -6px;
}

.noUi-handle:after, .noUi-handle:before {
    content: "";
    display: block;
    position: absolute;
    height: 14px;
    width: 1px;
    background: #E8E7E6;
    left: 7px;	/* era 14 */
    top: 6px;
}
.noUi-handle:after {
    left: 11px;
}
/* handles tooltips reposiciono */
.noUi-tooltip {padding: 5px !important;}
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
    bottom: -25px;
}
.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
    top: -25px;
}
.noUi-horizontal .noUi-handle {
background: rgba(105, 137, 204, 0.3);	/*rgba(63, 184, 175, 0.15)*/
cursor: pointer;
}
.noUi-connect {
    background: #6989cc;
}

/* tabla inputs */
.inputs_headers {margin-left: 20px;}
.inputs_headers .sep {font-size: 12px; padding: 5px;}
.inputs_headers .val, .inputs_headers .input_mins, .inputs_headers .input_secs, .inputs_headers .input_milis {width: 35px;} 
.inputs_headers .val {font-size: 10px; font-weight: 300; color: #888;}
.inputs_headers .input_mins, .inputs_headers .input_secs, .inputs_headers .input_milis {
    font: 500 12px Arial;
    color: #000;
    text-align: center;
}
.inputs_headers .clock_label {font-size: 10px; color: #888; font-weight: 700; text-align: left; padding-right: 10px;} 
.inputs_headers .inicio, .noUi-horizontal .noUi-handle-lower .noUi-tooltip.active {color: #084;}
.inputs_headers .fin, .noUi-horizontal .noUi-handle-upper .noUi-tooltip.active {color: #800;}
.check_autorefresh {
    text-align: left;
    font-size: 10px;
    margin-left: 20px !important;
}    
.manual_edit {text-align: left; color: black; font-weight: normal; margin: 20px auto 5px 20px !important;}

/***************************************************************************************************/
.who-says {display: none;}
#area_comentarios .comment-post-btn-wrapper {
	position: relative;
    margin: 10px 10%;
    /* top: 5px; */
    /* left: auto; */
    /* right: 10px; */
    width: 80%;
}    
.slr, .marge_temps {display: none !important;}
#area_comentarios .edit_post .btn_clock i.fa {font-size: 24px;}
/* btn_clock-clock */
#area_comentarios .btn_clock {
    width: 98%;
    margin: 5px;
    float: none; 
    height: 25px;
}
#area_comentarios .edit_post .btn_clock i.fa {
    font-size: 24px;
    text-align: right;
    width: 100%;
    padding-right: 39px;
}
#area_comentarios .comments-list {
    min-height: 70px;
}
#area_comentarios .comments-list .btn_clock {
    margin: 25px 5px 5px 5px;	/* para dejar espacio al botón delete, comments-list porque sólo es en los nuevos subtítulos */
}

.btn_clock i.isvisible{color: gray;}
.caja_comentarios h6 {text-align: left;}
.#area_comentarios .comment-wrapper {border: none;}
.inputs_headers td, .inputs_headers th {border-color: #A00;}
.new_subtitles_header {
    margin-left: 5px !important;
    /* border-bottom: 1px solid #e1e1e1; */
    text-align: left; 
    font-family: Lato, Arial, sans-serif;
    color: #F0A108;
    font-weight: 400;
    font-size: 15px;
}
#area_comentarios .comment-insert textarea.comment-insert-text {
	font-size: 18px;
}
#area_comentarios .ltr_text textarea.comment-insert-text {
	/*direction: rtl;*/ 
	unicode-bidi: bidi-override; 
	font-size: 24px;
	text-align: right;
}
#area_comentarios ul.comments-holder-ul li.comment-holder .comment-text p {margin: 10px; font-size: 18px;}
#area_comentarios .ltr_text ul.comments-holder-ul li.comment-holder .comment-text p {/*direction: rtl;*/ unicode-bidi: bidi-override; text-align: right; font-size: 24px;}
.container {
    width: 100%;
    }
body #area_comentarios {width: 100%;}
#my_video {text-align: left; width: 100%;}
#my_video_iframe {text-align: left; width: 54%; display: inline-block; vertical-align: top;margin-left: 0;}
#my_video_edit {text-align: center; width: 40%; display: inline-block;vertical-align: top;margin: 0 30px;}
#my_video_edit #idioma, #my_video_iframe #my_video_playingcontrols {margin: 10px auto 30px 0;}
#my_video_edit h6.actions {
	margin: 10px 10px 10px 0;
	font-family: Lato, Arial, sans-serif;
    color: #F0A108;
    font-weight: 400;
    font-size: 18px;
    text-align: left;
}
#my_video_edit #save_file {text-align: left;}



table.dwnld_subt {   text-align: left; font-size: 14px;}
table.dwnld_subt tr {border: 1px solid #ccc;}
table.dwnld_subt td {border: 1px solid #ddd; padding: 10px; background-color: #eee;}
table.dwnld_subt td a {padding: 10px;}
table.dwnld_subt tr th {background-color: #ddd; text-align: center;}
table.dwnld_subt td a i.fa {padding-right: 10px;}

#area_comentarios .comment-insert .comment-insert-container {min-height: 65px !important;}
#area_comentarios textarea.comment-insert-text {background-color: #FFFFE0;}


/* zoom */
.sp-zoom {
    width:200px;
    height:22px;
    font-family:Arial;
    vertical-align: middle;
}
.sp-minus {
    width:20px;
    height:20px;
    border:1px solid #e1e1e1;
    float:left;
    text-align:center;
    margin-left: 20px !important;
}
.sp-input {
    width:20px;
    height:20px;
    border:1px solid #e1e1e1;
    border-left:0px solid black;
    float:left;
}
.sp-plus {
    width:20px;
    height:20px;
    border:1px solid #e1e1e1;
    border-left:0px solid #e1e1e1;
    float:left;
    text-align:center;
}
.sp-input input {
    width:20px;
    height:14px;
    text-align:center;
    font-family: Arial;    
    font-size: 12px;
    border: none;
}
.sp-input input:focus {
    border:1px solid #e1e1e1;
    border: none;
}
.sp-minus a, .sp-plus a {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}
.sp-label {margin-top: 20px !important;}
.slider_zoom_label {float: left;text-align: left; font-size: 10px; color: black; font-weight: normal; line-height: 18px; margin-left: 20px !important;}


#seeks button {
    background: #e9e9e9;
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 2px 13px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    margin: 0;
    cursor: pointer;
}

#my_video_playingcontrols #seeks {float: left; margin-left: 0;}
#my_video_playingcontrols p {float: left; margin-left: 20px;}
/*.header {display: none;}*/

.columna_botones label {
    /*position: absolute;
    left: 30%;*/
}
.columna_botones label.btn {
    padding-top: 5px;
    padding-bottom: 15px;
}
.columna_botones span.origen_subt {
    font-size: 75%;
    clear: both;
    /* float: left; */
    display: block;
    position: absolute;
    top: 2.2em;
    left: 35%;
}
.btn .badge {
    position: relative;
    top: 1px;
}

.columna_botones span.last_modified_subt {
    font-size: 75%;
    clear: both;
    /* float: left; */
    display: block;
    position: absolute;
    top: 3.2em;
    left: 35%;
}
#area_comentarios ul.comments-holder-ul li.comment-holder .comment-text {margin: 0 10px 10px 10px;}
.user-img, .user-img-pic {display: none;}
#area_comentarios ul.comments-holder-ul li.comment-holder h3.username-field {display: none;}
.social-buttons-holder {display: none;}
.columna_botones .btn-block+.btn-block {
    margin-top: 30px;
}
#columna_add_boton {
    margin-top: 20px;
}
.timeline_div .timeline_seek_point:hover circle {fill: #F0A108; cursor: pointer;}
.timeline_div {position: relative; width: 100%; height: 20px;}
.timeline_div_line {stroke:rgb(150,150,150);stroke-width:2;}
.timeline_tooltip {
        /*position: relative;*/
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px 8px;
    max-width: 200px;
    color: black;   /*#fff;*/
    text-align: center;
    background-color: rgba(240, 161, 8, 0.9);   /* #F0A108; */ /* #000; */
    z-index: 100;
}
/*
.timeline_tooltip:before {  
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.8);
    content: "\25BC";
    position: absolute;
    text-align: center;
}
*/


#area_comentarios .comment-wrapper {
	border: 0 !important;
}
#area_comentarios .caja_comentarios .nav-tabs {
    border-bottom: 0;
}
#area_comentarios .caja_comentarios .nav-tabs > li {
  width: 50%;
  border-bottom: 1px solid #e1e1e1;
}
#area_comentarios .caja_comentarios .nav-tabs > li.active {
  border-bottom: 0 !important;
}
#area_comentarios .caja_comentarios .nav-tabs > li > a {
  border-radius: 4px 4px 0 0 ;
  text-align: center;
}
#area_comentarios .caja_comentarios .nav-tabs>li.active>a, #area_comentarios .caja_comentarios .nav-tabs>li.active>a:hover, #area_comentarios .caja_comentarios .nav-tabs>li.active>a:focus {
    
  background-color: transparent;
}

#area_comentarios .caja_comentarios .nav-tabs > li a i.fa {
  font-size: 1.5em;
  padding: 0.25em 0.5em;
}
#area_comentarios .caja_comentarios .nav-tabs > li a span {
	display: none;
}
#area_comentarios .caja_comentarios .tab-content {
  padding : 5px 15px;
  border: 1px solid #e1e1e1;
  border-top: 0;
}
#area_comentarios ul.comments-holder-ul li.comment-holder {border: 1px solid #eee;}
#area_comentarios .comment-insert {
	border: 0;
}
#area_comentarios .container {
	min-height: 250px;
}
.debug {display: none;}


/* https://medium.com/@fionnachan/dynamic-number-of-rows-and-columns-with-css-grid-layout-and-css-variables-cb8e8381b6f2 */
/*
:my_video_edit {
  	--rowNum: 1;
  	--colNum: 4;
  	--gridWidth: 100%;
	--wrapperW: 25%; 
}
#area_comentarios { 
	display: grid;
	width: var(--wrapperW);
}
*/
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
#area_comentarios { 
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
		/*flex-direction: row;
		flex-wrap: wrap;*/
		flex-flow: row wrap;
		justify-content: space-around;
		/*align-items: flex-start;
		align-content: flex-start;*/
}
.caja_comentarios, #area_comentarios .wrapper { 
	flex-grow: 1;
		flex-basis: auto;
	width: 300px !important;
	margin: 0 auto;
}

.widget-chart-content:hover {cursor: pointer;}

/* transcriptions */

/* courtesy of: https://loading.io/css/ */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 16px;
    height: 16px;
}
.lds-ellipsis div {
    position: absolute;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
    left: 4px;
    animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
    left: 4px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
    left: 16px;
    animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
    left: 28px;
    animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}
@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(12px, 0);
    }
}
