/* Window */
div.mis_cursos_window{
background-color: darkgray;
display: none;
left: 30px;
margin: 10px;
padding:10px;
position: absolute;
top: 30px;
z-index: 30;
height: 500px;
overflow: auto;
}

.mis_cursos_window .button-primary{
margin:5px;    
}

input.mis_cursos_window{
background-color: #3858e9;
display:inline-block;
color: white;
width: auto;    
padding: 12px;
border-radius:3px;
height: 1.5em;
width: 10em;
text-align:center;
}

.mis_cursos_selected{
font-weight: bold;

}

/* [] Chart */
.canvas_container{
display: flex;
flex-flow: row wrap;
   
}

.mis_cursos_canvas{
min-width: 250px;
max-width: 500px; /* 700 DEBUG */
flex: none;
      
}

/* [] tables */
/* zebra stripping */
table.mis_cursos tbody tr:nth-child(odd) {
   background-color: #ccc;
}

table.mis_cursos tbody tr td{
padding: 5px;
}

th.header{
background-color: black;
color: white;
}


.item {
	position: relative;
	z-index: 10;
	display: none;
	left: 3em;
	opacity: 0.9;
	top: -1em;
	background-color: lightblue;
}


td.pregunta {
max-width: 50px;    
border: solid 1px white;
}

/* [] cuepoints & videos */

table.mis_cursos_cuepoints_table{
margin: auto; 
border: none;   
}

.text{
background: #000;
color: white;
text-align: left;
white-space: nowrap;
max-width: 25em;
overflow: hidden;
text-overflow: ellipsis;
border: none;
}

.add .del, .time {
color: white;    
background:rgba(23,35,34,.5);
cursor: pointer;
text-align: center;
overflow: hidden;
padding: 0;
width: 44px;
border: none;
border-radius: 2px;
}

.s_time{
background:rgba(26, 255, 26,0.9);
border: none;
}

.ms_button {
background-color: rgba(23,35,34,.5);
border: none;
border-radius:.5em;
cursor: pointer;
color: white;
display: inline-block;
font-size: inherit;
margin: 4px 2px;
padding: 5px 3px;
text-align: center;
text-decoration: none;
width: 100px;
}
.del:hover{ 
background-color: red;
color:white;
}

.add:hover, .time:hover, .ms_button:hover { 
color:white;
background-color: rgba(23,35,34,.75);
}

div#wrap_top{
    margin: 8px;
}

div#video {   
position: relative;
background-color: black;
width: 100%; 
height: auto; 
border: 0px solid black;
padding-bottom: 56.25%; /* magick number */
margin: 0px;
font-size: 1em;
}

div#video iframe{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;    
}


/* [] navigate videos */
.mis_cursos_navigate_videos{
z-index:300;
color:#fff;
background-color: #000;
text-align: center;
transition: 1s;
opacity: 0.3;
font-size: 34px;
}

.mis_cursos_navigate_videos:hover{
opacity: 1;
background-color: #06C;
}

#editor{
position: absolute;
left: 0;
bottom: -5em;
z-index: 300;
}

@media screen and (max-width: 512px){
#cuepoints{ visibility:hidden;
}
#chapters{ font-size: 10px;}
}

@media screen  and (max-width: 512px){
.mis_cursos_navigate_cuepoints{
visibility: hidden;    
}    
}

#chapters{
position: absolute;
right: 2%;
top: 5%; 
z-index: 300;
text-align: center;
max-width: 640px;
padding: 5px;
border-width: 1px;
border-radius: 2px;
font-size: 14px;
display: none;
}

.mis_cursos_navigate_cuepoints{
position: absolute;
right: 2%; 
top: 15%; 
z-index: 300;
transition: opacity 1s ease-out;
opacity: 0.3;
padding: 1px;
margin: 1px;
text-align: center;
 }

.mis_cursos_navigate_cuepoints:hover{
opacity: 1;
}
 
.mis_cursos_navigate-left{
position: absolute;
left: 0px;    
top: 31%; 
width: 10%;
text-align: left;  
padding-top: 30px; 
padding-bottom: 30px; 
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;   
cursor: pointer;
}

.mis_cursos_navigate-left:hover{
text-align: center;
width: 10%;
}

.mis_cursos_navigate-right{
position: absolute;
width: 10%;
left: 90%; 
top: 30%;
text-align: right;
padding-top: 30px; 
padding-bottom: 30px; 
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
cursor: pointer;
}

.mis_cursos_navigate-right:hover{
text-align: center;
left: 90%;
}

.mis_cursos_navigate-button{
position: relative;
margin: 1px; 
padding: 5px;
font-size: 1em;
display: inline-block; /* required for width property */
cursor: pointer;
background-color: rgba(23,35,34,.75);
color:#fff;
border-radius: 2px; 
transition: 0.5s; 
opacity: 0.8;
}

/* end navigate cuepoints & videos */

/* course, test and & video progress */



/* [] admin */

form.mis_cursos_admin th{
	text-align:left;	
}

form.mis_cursos_admin tr{
	vertical-align:top;
}

.aviso_w
{
display:block;
margin:5px 10px;
padding:10px; 
color: white;  
background-color:LightPink;
}

.aviso{
display:block;
margin:5px 10px;
padding:10px; 
color: white;  
background-color:Red ;
}

.aviso2{
margin:5px 10px;
padding:10px; 
color: white;  
background-color:deepskyblue ;
}

/* [] Register */

div.mis_cursos_scroller{
    width: inherit;
    height: 300px;
    overflow: scroll;
}

form.mis_cursos{
font-size:small;
border:dashed; 
border-width:1px; 
border-color:#E5E5E5; 
padding:10px 10px 10px 10px;
text-align:left;
width: 500px;
border-radius: 4px;
}

div.mis_cursos td, div.mis_cursos table{
    border: 1px none #E5E5E5;
}


div.mis_cursos th{
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #E5E5E5;
}

/* [] Files */

form.mis_ficheros_form, div.mis_cursos
{
border:5px solid #D2D2D2;
background-color: #EAEAEA;
margin:0px;
padding: 10px;
font-size:small;
text-align:left;
max-width: 700px;
min-width:250px;
border-radius: 10px;
}

tbody.fichero{
border: none;   
}

td.fichero2{
text-align:center;	
}

label.mis_ficheros_label
{
width:400px;
margin-right: 0.5em;
padding-top: 0.2em;
margin-left: 0.5em;
text-align: right;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: small;
font-weight: normal;
line-height: 18px;
}

/* [] Test */
table#preguntas  tr  td:first-child{
text-align:center;    
}

/* hr#clear{
    clear:left;
}
 */

div#tab{
    width: 300px;
    height: 50px;
    float:left;
    padding: 20px;    
}

form.mis_cursos_test{
font-size:small;
border: 5px solid #D2D2D2;
background-color: #EAEAEA;
border-radius: 10px;
padding:10px 10px 10px 10px;
text-align:left;
max-width: 700px;
}

form.mis_cursos_test p.respuesta{
background-color: white;
padding: 1em 1em 2em 3em;
background-color: #EEEEEE;
padding: 1em 1em 1em 1em;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
margin: 0px;
}

form.mis_cursos_test p.respuesta:last-of-type{
border-bottom: 1px solid black;
}

form.mis_cursos_test fieldset{
border: none;    
}

form.mis_cursos_test legend,form.mis_cursos_test label.respuesta{
font-size: medium;
}

.test_tab{
border-top-left-radius: 10px;
border-left: 1p solid white;    
}

.respuesta {
text-align:left;
float:left;
font-weight: normal;
width: 90%;
}

.field {
text-align:left;
float:left;
width: 50%;
color:#050;  
font: bold small 'trebuchet ms',helvetica,sans-serif; 
}

input.textbox {
text-align:left;
float:right;
width:100%;
color:#050;  
font: bold small 'trebuchet ms',helvetica,sans-serif; 
}

input.textsmall {
text-align: left;
width:40px;
}

.fieldset.p {
clear:both;
padding:5px;
color:#050;  
font: bold small 'trebuchet ms',helvetica,sans-serif; 
}

input.button-primary{
/* margin-left:30%; */ 
color:#050;  
font: bold small 'trebuchet ms',helvetica,sans-serif; 
border-radius: 5px;
}

/* [] Sales */

.progress{
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 5px;
background-color: orangered;
}
.progress_animation{
animation: anima 8s ease;    
}

@keyframes anima{
0% {width:0%;}    
100% {width:100%;}
}

.mis_cursos_grid{
display: grid;    
grid-template-columns: repeat( auto-fit, minmax(200px,1fr));
grid-gap: 1rem;
}

.ms_crss_container{ 
display: flex;
flex-flow: column;
background-color: white;
box-shadow: 2px 2px gray;
border: 1px solid darkgray;
border-radius: 3px;
margin:5px 5px;
height: 400px;
width: 200px;
}

.ms_crss_container_star{
box-shadow: 2px 2px black;
}
/* hover does not work with mobile */
.ms_crss_container:hover{
box-shadow: 3px 3px 3px black;
}
/* TODO delete this in future */
.ms_crss_container_last{ 
opacity:0.3;
display:none;
}

.ms_crss_label{
background-color: darkgray;
color: white;
font: 14px bold sans-serif;
position: absolute;
margin-top: 0.5em;
padding: 5px;
text-align: center;
width: 8em;
border-top-left-radius: 5px;
border-bottom: 3px solid lightgray;
}

.ms_crss_img{
background-color: #EEEEEE;
align-self: center;
height:133px;
margin:0px 0px;
opacity: 0.8;
padding: 0px;
width: 199x; 
}

.ms_crss_img img
{
width: 199px;    
}


button, .ms_crss_button_top{
background-color: darkgray;
border-radius: 38px; /* 38px */
border-width: 0px;
color: white;
height: 38px; /* 48 px align vertically */
margin: 8px 16px 0px 0px;
min-width: 100px;
padding: 5px;
text-align:center; /* align horizontally */
}

.ms_crss_button_top:hover, .ms_crss_button:hover, .ms_crss_button_url:hover, .ms_crss_button_star:hover{
color:black;
background-color:#EEEEEE;
border-color:black;
cursor: pointer;
border-width: 2px;
}

.ms_crss_button_short{
color: white;    
min-width: auto;
padding:8px;
width: 38px;
}

.ms_crss_bottom{
clear: both;    
}

.ms_crss_container_wide{
background-color: #F4F4F4; 
margin: 20px 10px;
padding: 20px;
max-width:700px;
}

.ms_crss_button, .ms_crss_button_url{
background-color: lightgray;
border: 2px solid darkgray;
border-radius: 5px;
color: darkgrey;
display: inline-block;
font-size: 16px;
height: 2.6em;
line-height: 2em;
margin: 1em;
padding: 5px;
opacity: 1;
align-self:stretch;
text-align: center;
/* width: 100px; */
}


@media (any-hover: none){
.ms_crss_button, .ms_crss_button_url{
opacity: 0.8;
}    
}

button .ms_crss_button,button .ms_crss_button_url, .ms_crss_button_item{
position: relative;
opacity:1;
display: inline-block;
font-size: 13px;
height: 3.4em; /* align vertically */
line-height: 2em; /* align vertically */
margin: 20px 10px;
min-width: 10em;
padding: 10px;
}




.ms_crss_container >.ms_crss_img{
opacity:1;
}

.ms_crss_button:active, .ms_crss_button_url:active{
background-color: darkgray ;    
}

.ms_crss_button_star{
background-color: #6D6D64; /* dimgray */

}

.ms_crss_button_center{
margin:auto;
padding: 10px;
color: white;
background-color:#337FAA;
line-height: 72px; /* align vertically */
height:100px; /* align vertically */
width: 200px;
text-align:center; /* align horizontally */
border-radius: 20px; 
}

.ms_crss_text{
background-color: white;
color: black;
display: block;
align-self: center;
font: 16px Arial sans-serif;
height: 72px;
margin: 10px;
overflow: hidden;
padding: 5px;
text-overflow:ellipsis;
}

.ms_crss_text:hover{
overflow: initial;
}

.ms_crss_price{
color:#242F3D;
font-family: roboto mono;
font-size: 18px;
letter-spacing: 0;
height: 48px;
margin: 0px;
padding-left: 10px;
}


.ms_crss_title{
display: inline-block;
font-size: 16px;
height: 36px;
margin: 10px;
overflow: hidden;
text-align: left;
}

.ms_crss_level{
border-bottom: 1px solid lightgray;
text-align: left;
font-size: 16px;
height: 27px;
display: block;
}


/* Sales Toggle */
.ms_crss_toggle  {
background-color: white; 
padding: 15px;
border-width: 1px;
border-style: none;
border-color: gray;
border-radius: 0px;
font-weight: bold;
color: #0040ff;
cursor: pointer;
}
.ms_crss_hidden  {
background-color: white; 
padding: 10px 25px 40px 25px;
border-style: none none;
border-width: 1px;
border-color: gray;
border-radius: 0px;
display: none;
}
.ms_crss_toggle::before{
    content: " + ";
}

.ms_crss_opened{
display: block;    
}
.ms_crss_opened::before{
    content: " - ";
}

/* cart */
.ms_crss_cart{
position: fixed;
cursor: pointer;
width: 60px;
height: 60px;
background-color: lightgray;
border: 3px solid gray;
top: 0px;
right: 0px;    
text-align:center;
}

.ms_crss_cart:hover{
background-color: #007cba;    
}

.ms_crss_expanded_cart{
background-color: #EEEEEE;
border: 1px solid lightgray;
display: none;
margin: 0px;
padding: 2.5em;
position: fixed;
right: 0px;    
text-align:center;
top: 0px;
min-width: 200px;
max-width: 700px;
}

#expanded_card_hide{
bottom: 1em;
cursor: pointer;
position:absolute;
right:1em;
}
.ms_crss_button_disable{
opacity: 0.5;    
}

.dismiss_cart2, .del_cart2, .add_cart2{
cursor: pointer;
}

td.ms_crss_entry{
font-size: 16px;
width: 16em;  
border: 1px solid azure;
}

.entry_right{
text-align: right;  
text-transform: uppercase;
}

.entry_left{
text-align: left;    
}

.ms_crss_cart div{
font-size: 9px;    
}

.ms_crss_hide{
display: none; 
}
.ms_crss_cart_shine{
background-color: darkorange
}