* {
  margin: 0px;
  padding: 0px;
}

#sidebar {
  position: fixed;
  width: 400px;
  height: 100%;
  background: #0E9EDD;
  left: -400px;
  transition: all 500ms linear;
  z-index:25;
}

#sidebar.active {
  left: 0px;
  
}



#sidebar ul li {
  color: rgba(230, 230, 230, .9);
  list-style: none;
  padding: 5px 5px;
  text-align: left;
  background: #0E9EDD;
}


#sidebar .toggle-btn {
  position: absolute;
  left: 410px;
  top: 90px;
  cursor: pointer;
  background-color:#0E9EDD; 
  border: 5px solid #FFF;
  border-radius: 33px;
}

#sidebar .toggle-btn span {
  color:#FFF;
  display: block;
  width: 40px;
  text-align: center;
  font-size: 30px;
 
}
#sidebar .toggle-btn span i{
 color:#FFF;
}
html,body{
	width:100%;
	height:100%;
	background-color: #777799;
}
#principal{
	width:100%;
	height:100%;
	background-color: #777799;
}
label{
	font-size:12px;
}
i{
	color:#DDD;
}
.mi-imagen-abajo-derecha{
    position:absolute;
    bottom:20px;
    right:20px;
	color:#FFF;
	z-index:26;
	cursor: pointer;
 
}
.mi-imagen-abajo-derecha button{
  background-color:#0E9EDD; 
  border: 5px solid #FFF;
  border-radius: 33px;
}

.mi-imagen-arriba-derecha{
    position:absolute;
    top:20px;
    right:20px;
	color:#FFF;
	z-index:26;
	cursor: pointer;
 
}
.mi-imagen-arriba-derecha button{
  background-color:#0E9EDD; 
  border: 5px solid #FFF;
  border-radius: 33px;
}
.cabecera_tabla{
	background-color:#6c757d;
	color:#FFF;
	font-size:wight;
}

@media screen and (max-width: 600px) {
	#sidebar {
  position: fixed;
  width: 300px;
  height: 100%;
  background: #0E9EDD;
  left: -300px;
  transition: all 500ms linear;
  z-index:25;
}

#sidebar .toggle-btn {
  position: absolute;
  left: 310px;
  top: 90px;
  cursor: pointer;
  background-color:#0E9EDD; 
  border: 5px solid #FFF;
  border-radius: 33px;
}

}