@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

input[type="checkbox"].check_sub {
 display:none;
}

input[type="checkbox"].check_sub + label{
    display:inline;
    vertical-align: top;
    width:150px;
    line-height:20px; 
    background-color: rgba(240,240,240,0);

}
input[type="checkbox"].check_sub + label span {
    display:inline-flex;
    margin-left: 5px;
    width:30px;
    height:18px;
    background-color: rgb(0,0,0);
    background:url(../imagenes/sub_check.png) no-repeat;
    cursor: pointer;
}

input[type="checkbox"].check_sub:checked + label span { 
    background:url(../imagenes/sub.png) no-repeat;
}

a.inactivo {  
   color: rgb(200,200,200);
   pointer-events:none;
   cursor:default;
}

.bold{  
   font-weight: bold;
}

.closebtn {
    padding-top: 3px;
    position: absolute;
    top: 3px;
    right: 3px;
    width:20px;
    height:17px;
    text-align:center;
    vertical-align: middle;
    border-radius:10px;
    font-weight: bold;
    cursor: pointer;
    z-index: 999;
    opacity: 0.7;
}
.closebtn:hover {
    background-color: #585858;
    opacity: 1;
}

input[type="text"]:disabled {
  background: #fff;
  border: 0px solid lightgrey;
}


input[type="text"]:disabled:hover {
  box-shadow: 0px 0px 0px 0px grey;
  border: 0px solid lightgrey;
}

.addbtn {
    display: inline-block;
     padding-top: 0px;
    width: auto;
    height: auto;
    text-align:center;
    vertical-align: middle;
    font-weight: bold;
    cursor: pointer;
    z-index: 999;
    opacity: 0.5;
}
.addbtn:hover {
    opacity: 1;
}
.addbtn:pressed {
    opacity: 0;
}

.savebtn {

    color:white;
    position: absolute;
		bottom: 2px;
		right: 3px;
    width:auto;
    height: 24px;
    text-align:center;
    border-radius:3px;
    font-weight: bold;
    font-size: 8px;
    cursor: pointer;
    z-index: 999;
    opacity: 0.7;
}
.savebtn:hover {
        opacity:1;
}

.deletebtn {
		position: absolute;
		bottom: 2px;
		right: 30px;
    width:auto;
    height: 24px;
    text-align:center;
    border-radius:3px;
    font-weight: bold;
    cursor: pointer;
    z-index: 999;
    opacity: 0.7;
}
.deletebtn:hover {
    opacity:1; 
}

.closeon
{  
   position: absolute;
    padding-right: 3px;
   bottom:0;
   right:0;
   display: inline;
   float: right;
    opacity: 1;
}

.closeon:hover
{  
   opacity: 0.7;
}

#outer { 
    position: fixed;
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    background-color: rgba(80, 80, 80, 0.4);
    display: none;
    z-index: 999;
    animation: fadein 0.5s;
}

#error { 
   
    width: 250px;
    height: 150px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    background-color: white;
    border: none;
    border-radius: 3px;
    padding: 3px;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    display: none; 
    z-index: 9999;
    animation: fadein 0.5s;
}

#ficha { 
    animation: fadein 0.5s;
    padding-top: 10px;
    margin-left:48px; 
    margin-right:-2px; 
    padding-left: -10px;
    border: 1px solid #ddd; 
    border-radius: 5px;
    border-top-left-radius: 0px;
    overflow-y:hidden;
}

th {
  background: white;
  position: sticky;
  top: 0;
}

#ficha-lista { 
    max-height: fit-content;
    min-height: 100px;
    height: calc(100vh - 50px);
    margin-bottom: 200px;
    position: absolute;
    left: 0px;
    animation: fadein 0.5s;
    padding: 3px;
    margin-left:48px; 
    margin-right:-2px; 
    padding-left: -10px;
    border: 1px solid #ddd; 
    border-radius: 5px;
    overflow: hidden;
}

#horas { 
    animation: fadein 0.5s;
}

#message { 
   
    width: 250px;
    height: 120px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    background-color: white;
    border: none;
    border-radius: 3px;
    padding: 0px;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    display: none; 
    z-index: 9999;
    animation: fadein 0.5s;
}

a{
    horizontal-align: middle;
    color:#3c3c3c;
    display:block;
    text-decoration:none;
	font-family: Consolas, Helvetica, Arial, sans-serif;
    font-weight:500;
	font-size: 11px;
	padding: 0px;
    border:0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
    transition:.5s;
}

a.ficha_nav{
   border-top-left-radius:6px;
   border-bottom-left-radius:6px;
}



div.nav_proyectos{  
    font-family: Consolas, Helvetica, Arial, sans-serif;
    background-color: #fff;
    position: fixed;
    height: 100%;
    top:0px;
    left:0px;
}

div.buscar{  
    position: fixed;
    top:0px;
    left:80px;
    animation: fadein 0.5s;
}



input {
	margin: auto;
    transition:.2s;
}
h4 {
    margin-top: 0px;
    margin-bottom: 5px;
    padding-left: 3px;
    padding-top: 30px;
    padding-bottom: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
	background: #3c3c3c;
    color: white;
}

input [type="checkbox"]{
	margin: auto;
}


input[type="text"], input[type="search"], input[type="date"], input[type="password"], select{
     height: 24px;
     width: 97%;
    color:#3c3c3c;
	font-family: Consolas, Helvetica, Arial, sans-serif;
    font-weight:500;
	font-size: 11px;
    text-align: left;
	line-height: 18px;
    border-radius: 4px;
    margin-right: 3px;
    margin-left: 3px;
    margin-bottom: 3px;
	padding: 2px 2px 2px 2px;
	box-sizing: border-box;
    border: 1px solid lightgrey;
}


input[type="text"]:hover, input[type="search"]:hover, input[type="date"]:hover, input[type="password"]:hover, select:hover{
box-shadow: 0px 0px 2px 1px grey;
border: 1px solid grey;
}


input[type="submit"]{
     height: 30px;
     width: 100%;
    color:#3c3c3c;
    background-color: #eee;
	font-family: Consolas, Helvetica, Arial, sans-serif;
    font-weight:bold;
	font-size: 12px;
	line-height: 18px;
	padding: 2px 2px 2px 2px;
	box-sizing: border-box;
    cursor: pointer;
    border-radius: 3px;
  border: 3px solid rgba(0,0,0,0);
}

input[type="submit"]:hover{
     background-color: lightgray;
}

form{
margin: auto;
padding: auto;
 }

input {
    border-radius: 0px;
	margin: auto;
}


body {
    padding-top: 5px;
    padding-right: 5px;

    vertical-align: middle;
    display: table-cell;
    background-color:#fff;
	font-family: Consolas, Helvetica, Arial, sans-serif;
    font-weight:500;
	font-size: 11px;
    overflow-y: hidden;

}

html {
    display: table;
    margin: auto;
    overflow-y: hidden;
    
      /* Disable text selection, or your app will feel like a web page */
     user-select: none;
  
     /* Smoother startup */
     animation: fadein 0.5s;
}

tr {
    vertical-align: middle;
    padding:0px;
    margin:0px;
    
}
td {
    vertical-align: middle;
    border-top:1px solid rgb(200,200,200);
    border-bottom:1px solid rgb(200,200,200);
}
th {
text-align:left;
padding-right:0px;
}

table.ficha {
   width:400px;
}

table{
   border-collapse:collapse;
}

input[type="checkbox"].check_stop {

 display:none;
}
input[type="checkbox"].check_stop + label{
    display:inline;

background-color: rgba(240,240,240,0);

}
input[type="checkbox"].check_stop + label span {
    display:inline-flex;

    width:15px;
    height:15px;
    background:url(../imagenes/stop_inicio.png) no-repeat center;
    cursor: pointer;
}
input[type="checkbox"].check_stop:checked + label span { 
    background:url(../imagenes/stop_checked.png) no-repeat center;
}

input[type="checkbox"].check_play {
 display:none;
}
input[type="checkbox"].check_play + label{
    display:inline;
   width:15px;
    height:15px;
background-color: rgba(240,240,240,0);

}
input[type="checkbox"].check_play + label span {
    display:inline-flex;
    margin-top:0px;
    width:15px;
    height:15px;
    background-color: rgb(0,0,0);
    background:url(../imagenes/play_inicio.png) no-repeat;
    cursor: pointer;
}

input[type="checkbox"].check_play:checked + label span { 
        margin-top:0px;
     margin-left:0px;
    background:url(../imagenes/play_checked.png) no-repeat center;
}

input[type="checkbox"].check_back {
 display:none;
}
input[type="checkbox"].check_back + label{
    display:inline;
   width:20px;
    height:15px;
background-color: rgba(240,240,240,0);

}
input[type="checkbox"].check_back + label span {
    display:inline-flex;
    width:20px;
    height:15px;
    background-color: rgb(0,0,0);
    background:url(../imagenes/f_back.png) no-repeat;
    cursor: pointer;
}

input[type="checkbox"].check_back:checked + label span { 
    background:url(../imagenes/f_back.png) no-repeat center;
}

input[type="checkbox"].check_forward {
 display:none;
}
input[type="checkbox"].check_forward + label{
    display:inline;
   width:20px;
    height:15px;
background-color: rgba(240,240,240,0);

}
input[type="checkbox"].check_forward + label span {
    display:inline-flex;
    width:20px;
    height:15px;
    background-color: rgb(0,0,0);
    background:url(../imagenes/f_forward.png) no-repeat;
    cursor: pointer;
}

input[type="checkbox"].check_forward:checked + label span { 
    background:url(../imagenes/f_forward.png) no-repeat center;
}