html, 
.Men {
 position:relative;/* Esta clase tiene que tener posicion relativa */
/* Color del texto */
}
.Menf {

 /* position:relative; */
 float:left;
 /* border:solid; */
 
/* Color del texto */
}
 
/* El tooltip */  
.Menu {   
  display:none;     
}
 .Menuf {   
  display:none;     
}
/* El tooltip cuando se muestra */

.Men:hover .Menu {
 background: #0375B4 center left 5px no-repeat;  
 border: 2px solid #0375B4;
 border-radius: 5px;
 box-shadow: 5px 5px 5px #262228;
 color:WHITE; 
 float:right;
 width:75%;
 /* El tooltip por defecto estara oculto */
 font-size: 1.5 em; 
 padding: 10px 10px 10px 15px;
 max-width: 6000px;
 position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */
 top:20%; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */
 left:100%; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
 z-index:100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
 display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */
}
.Men:hover .Menuf {
 background: #0375B4 center left 5px no-repeat;  
 border: 2px solid #0375B4;
 border-radius: 5px;
 box-shadow: 5px 5px 5px #262228;
 color:WHITE; 
 float:right;
 width:75%;
 /* El tooltip por defecto estara oculto */
 font-size: 1.5 em; 
 padding: 10px 10px 10px 15px;
 max-width: 6000px;
 position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */
 top:00%; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */
 left:15%; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
 z-index:100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
 display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */
} 
.Menf:hover .Menuf {
 background: #0375B4 center left 5px no-repeat;  
 border: 2px solid #0375B4;
 border-radius: 5px;
 box-shadow: 5px 5px 5px #262228;
 color:WHITE; 
 float:right;
 width:75%;
 /* El tooltip por defecto estara oculto */
 font-size: 1.5 em; 
 padding: 10px 10px 10px 15px;
 max-width: 6000px;
 position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */
 top:00%; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */
 left:15%; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */
 z-index:100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
 display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */
}  
.circulo {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}
.alert-vencido{
    background-color: #000000 !important;
    color: #fff !important;
}

@media (min-width: 992px) {
.modal-lg {
    width: 1000px !important;
}
}


    .btn-app {
        min-width: 110px !important;
        width: auto !important;
        padding: 10px 8px !important;
        white-space: normal !important;
        line-height: 1.2;
        font-size: 12px;
        height: auto !important;
    }
    
    .btn-app i {
        display: block;
        margin-bottom: 5px;
    }