/* Mi hoja de estilos 
body   {
font-size: 16;
font-family: ;	
}
p, h1, h2, h3 {
text-align: left;	
}
ul { 
	color: indigo;

}
body.dark ul {
	color: violet;
}
.ul {
 	font font-size: 16px;
 	color:garnet ;
 	font-family: cursive;
 }*/

/*puedo hacer sombras de la siguiente manera: ;
	5px 5px rgba(0, 98, 90, 0.4),
				10px 10px rgba(0,98, 90, 0.3),
				15px 15px rgba(0,98, 90, 0.2),
				20px 20px rgba(0,98, 90, 0.1),
				25px 25px rgba(0,98, 90, 0.05);*/

.caja1a {
	border: 1px solid orange;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	border-radius: 12px;
	background-color: rgba(200,208,255,0.3);
	box-shadow: 5px 5px 8px black;
}

.caja2 {
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	background-color: aliceblue;
	box-shadow: 5px 5px 8px black;
  
}
   
.caja2 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: red;
  color: white;
  font-size: 20px;
  text-align: center;
  border-radius: 12px 12px 0px 0px;
	text-align: center;
  
}

.caja2 .content {
  padding: 20px;
   
}

body.dark .caja2 .content {
	color: black;
}

.sin_boton  {
border: 0px;
background-color: rgba (1,1,1,0);
}

.sin_boton .btn_expand {
border: 0px solid red;
background-color: rgba (1,1,1,0);
opacity: 0.1;
}



.flota_d {
	float: right;
	margin: 0px -10px 0px 15px;
	padding: 5px;
	
	width: 50%;
	margin-top: 0px;
}

.flota_d figcaption {
	text-align: center;
	color: var(--text-color);
	margin-bottom: 0;
}

.flota_i {
	float: left;
	margin: 0px 5px 0px 5px;
	padding: 5px;
	width: 20%;	
}

.flota_i figcaption {
	text-align: center;
	color: var(--text-color);
	margin-bottom: 0;
}
.lista1 li{
	list-style: none;
	background-image: url("listas/comillas.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}

.lista1a li{
	list-style: none;
	background-image: url("listas/.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}
.lista2 li{
	list-style: none;
	background-image: url("listas/punto.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}

.lista2a li{
	list-style: none;
	background-image: url("listas/dospuntos.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 5px;
	padding-left: 20px;
	margin-left: -20px;
}

.lista2b li{
	list-style: none;
	background-image: url("listas/parent.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 45px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2c li{
	list-style: none;
	background-image: url("listas/corchetes.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 45px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2d li{
	list-style: none;
	background-image: url("listas/exclama.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 45px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2e li{
	list-style: none;
	background-image: url("listas/guion.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 45px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2f li{
	list-style: none;
	background-image: url("listas/barra.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}
.lista2g li{
	list-style: none;
	background-image: url("listas/doble.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2h li{
	list-style: none;
	background-image: url("listas/pleca.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2i li{
	list-style: none;
	background-image: url("listas/2pleca.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}
.lista2j li{
	list-style: none;
	background-image: url("listas/x.jpg");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2k li{
	list-style: none;
	background-image: url("listas/asterisco.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}

.lista2l li{
	list-style: none;
	background-image: url("listas/llaves.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 50px;
	margin-left: -40px;
}
.lista3 li{
	list-style: none;
	background-image: url("listas/coma.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}
.lista4 li{
	list-style: none;
	background-image: url("listas/punto y coma.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}

.lista5 li{
	list-style: none;
	background-image: url("listas/punto.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}

.lista6 li{
	list-style: none;
	background-image: url("listas/parent.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}
.lista7 li{
	list-style: none;
	background-image: url("listas/comill.png");
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 20px;
	padding-left: 45px;
	margin-left: -20px;
}

.caja1 {
	border: 1px solid orange;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 15px;
	border-radius: 12px;
	background-color: rgb(255, 160, 122, 0.3);
	box-shadow: 5px 5px 8px black;
}

.caja2 {
  	width: 80%;
	margin-left: auto;
	margin-right: auto;
	border-radius: 12px;
	background-color: aliceblue;
	box-shadow: 5px 5px 8px black;
  
}
   
.caja2 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: red;
  color: white;
  font-size: 20px;
  text-align: center;
  border-radius: 12px 12px 0px 0px;
	text-align: center;
  
}

.caja2 .content {
  padding: 20px;
   
}

body.dark .caja2 .content {
	color: black;
}

.caja5 {
  background: hsl(250 30% 90%);
  border-radius: .3rem;
  overflow: hidden;
  margin: 0.65em 0;
  color:var(--raro-color);
  width:80%;
  margin-left:10%;
  
}
   
.caja5 h5 {
  padding: .3rem .5rem;
  margin: 0;
  background: hsl(250 80% 90%);
  color: white;
  font-size: 20px;
  text-align: center;
  
}

.caja5 .content {
  padding: 0 .5rem;
  text-shadow: 2px 2px 1px #c2c2c2;
  
}

body.dark .caja5 .content {
	color: black;
}

.caja5 .modo1 {
  background: hsl(170 90% 40%);
  text-shadow: 2px 2px 3px black;
  background-repeat: no-repeat;
}

.caja5 .modo2 {
  background: #8D6E63;
  text-shadow: 2px 2px 3px  black;
  background-repeat: no-repeat;
  
}

.caja5 .modo3 {
  background: #8DAE63;
  text-shadow: 2px 2px 3px  black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
  
}

.caja5 .modo4 {
  background: #E65100;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo5 {
  background: #D81B60;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo6 {
  background: #5E35B1;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/icono1.png");
  background-repeat: no-repeat;
}

.caja5 .modo7 {
  background: #301400;
  text-shadow: 2px 2px 3px black;
  background-image: url("../images/rytr.png");
  background-repeat: no-repeat;
}

table, th, td {
	border: 2px solid black;
	border-collapse: collapse;
	text-align: center;
}

th, td {
	padding: 2px 3px 2px 3px;
}
table {
	width:100%;
}
th {
	background: rgb(79,112,197);
	color: white;
	text-align: center;
}
tr:nth-child(even) {background-color: #d2e2d2;}
/* Tooltip contenedor (selector)*/
.Tooltip {
  position: relative;  
  display: inline-block;
  border-bottom: 1px dotted black;
  font-size:110%;
}

/* Texto (contenido) del Tooltip */
.Tooltip .TooltipText {
  visibility: hidden;
  width:200px;
  background-color: rgb(250,250,250);
  color: #000;
  box-shadow: 15px 15px 20px #aaa;
  font-size: 10pt;
  text-align:center;
  border-radius: 15px;
  padding:5px 5px;
  /* Posiciona el Tooltip abajo*/
  position: absolute;
  z-index: 1;
  bottom: 95%;
  left: 80%;
  margin-left: -100px;
  }
/* Muestra el texto del Tooltip (contenido) cuando se pasa el mouse sobre el selector (contenedor) del Tooltip*/
.Tooltip:hover .TooltipText  {
  visibility: visible;
}

/*Contenedor del Tooltip*/
.tooltip {
   position:relative;
   display:inline-block;
   border-bottom:1px dotted black;
   /*Dibuja un borde de puntos debajo del texto contenedor*/
}
/*Contenido del tel tooltiptext*/ {
  .tooltip .tooltiptext{
    visibility:hidden;
    width: 120px;
    background-color:black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
/*Position del tooltiptext*/
   position:absolute;
   z-index: 1;
}
/*Muestra el contenido del tooltiptex cuando se pasa
el puntero sobre el selector del tooltip */
.tooltip:hover .tooltip1text {
   visibility: visible;
}