.app-header[data-tema="predeterminado"] {
	background-color: var(--predeterminado);
	}
.app-header[data-tema="azul"] {
	background-color: var(--azul);
	}
.app-header[data-tema="ocre"] {
	background-color: var(--ocre);
	}
.app-header[data-tema="rojo"] {
	background-color: var(--rojo);
	}
.app-header[data-tema="moradito"] {
	background-color: var(--moradito);
	}
	
.app-header__logo[data-tema="predeterminado"] {
	background-color: var(--predeterminadoOscuro);
	}
.app-header__logo[data-tema="azul"] {
	background-color: var(--azulOscuro);
	}
.app-header__logo[data-tema="ocre"] {
	background-color: var(--ocreOscuro);
	}
.app-header__logo[data-tema="rojo"] {
	background-color: var(--rojoOscuro);
	}
.app-header__logo[data-tema="moradito"] {
	background-color: var(--moraditoOscuro);
	}
	
.app-sidebar__toggle[data-tema="predeterminado"]:focus, .app-sidebar__toggle[data-tema="predeterminado"]:hover {
	background-color: var(--predeterminadoOscuro);
	}
.app-sidebar__toggle[data-tema="azul"]:focus, .app-sidebar__toggle[data-tema="azul"]:hover {
	background-color: var(--azulOscuro);
	}
.app-sidebar__toggle[data-tema="ocre"]:focus, .app-sidebar__toggle[data-tema="ocre"]:hover {
	background-color: var(--ocreOscuro);
	}
.app-sidebar__toggle[data-tema="rojo"]:focus, .app-sidebar__toggle[data-tema="rojo"]:hover {
	background-color: var(--rojoOscuro);
	}
.app-sidebar__toggle[data-tema="moradito"]:focus, .app-sidebar__toggle[data-tema="moradito"]:hover {
	background-color: var(--moraditoOscuro);
	}
	
.headerRegister[data-tema="predeterminado"] {
	color: #FFF;
	background: var(--predeterminado);
	}
.headerRegister[data-tema="azul"] {
	color: #FFF;
	background: var(--azul);
	}
.headerRegister[data-tema="ocre"] {
	color: #FFF;
	background: var(--ocre);
	}
.headerRegister[data-tema="rojo"] {
	color: #FFF;
	background: var(--rojo);
	}
.headerRegister[data-tema="moradito"] {
	color: #FFF;
	background: var(--moradito);
	}
	
.btn-primary {
	cursor: pointer;
	}
.btn-primary[data-tema="predeterminado"] {
	background-color: var(--predeterminado);
	border-color: var(--predeterminado);
	}	
.btn-primary[data-tema="azul"] {
	background-color: var(--azul);
	border-color: var(--azul);
	}
.btn-primary[data-tema="ocre"] {
	background-color: var(--ocre);
	border-color: var(--ocre);
	}
.btn-primary[data-tema="rojo"] {
	background-color: var(--rojo);
	border-color: var(--rojo);
	}
.btn-primary[data-tema="moradito"] {
	background-color: var(--moradito);
	border-color: var(--moradito);
	}

.btn-primary[data-tema="predeterminado"]:hover {
	background-color: var(--predeterminadoOscuro);
	border-color: var(--predeterminadoOscuro);
	}	
.btn-primary[data-tema="azul"]:hover {
	background-color: var(--azulOscuro);
	border-color: var(--azulOscuro);
	}
.btn-primary[data-tema="ocre"]:hover {
	background-color: var(--ocreOscuro);
	border-color: var(--ocreOscuro);
	}
.btn-primary[data-tema="rojo"]:hover {
	background-color: var(--rojoOscuro);
	border-color: var(--rojoOscuro);
	}
.btn-primary[data-tema="moradito"]:hover {
	background-color: var(--moraditoOscuro);
	border-color: var(--moraditoOscuro);
	}

.btn-outline-primary {
	cursor: pointer;
	}
.btn-outline-primary[data-tema="predeterminado"] {
	color: var(--predeterminado);
	border-color: var(--predeterminado);
	}	
.btn-outline-primary[data-tema="azul"] {
	color: var(--azul);
	border-color: var(--azul);
	}
.btn-outline-primary[data-tema="ocre"] {
	color: var(--ocre);
	border-color: var(--ocre);
	}
.btn-outline-primary[data-tema="rojo"] {
	color: var(--rojo);
	border-color: var(--rojo);
	}
.btn-outline-primary[data-tema="moradito"] {
	color: var(--moradito);
	border-color: var(--moradito);
	}
	
.btn-outline-primary[data-tema="predeterminado"]:hover {
	color: #FFF;
	background-color: var(--predeterminado);
	border-color: var(--predeterminado);
	}	
.btn-outline-primary[data-tema="azul"]:hover {
	color: #FFF;
	background-color: var(--azul);
	border-color: var(--azul);
	}
.btn-outline-primary[data-tema="ocre"]:hover {
	color: #FFF;
	background-color: var(--ocre);
	border-color: var(--ocre);
	}
.btn-outline-primary[data-tema="rojo"]:hover {
	color: #FFF;
	background-color: var(--rojo);
	border-color: var(--rojo);
	}
.btn-outline-primary[data-tema="moradito"]:hover {
	color: #FFF;
	background-color: var(--moradito);
	border-color: var(--moradito);
	}

.material-half-bg .cover[data-tema="predeterminado"] {
	background-color: var(--predeterminado);
	}
.material-half-bg .cover[data-tema="azul"] {
	background-color: var(--azul);
	}
.material-half-bg .cover[data-tema="ocre"] {
	background-color: var(--ocre);
	}
.material-half-bg .cover[data-tema="rojo"] {
	background-color: var(--rojo);
	}
.material-half-bg .cover[data-tema="moradito"] {
	background-color: var(--moradito);
	}

.app-content[data-claroscuro="oscuro"] {
	background-color: var(--masoscuro);
	}
.app-content[data-claroscuro="claro"] {
	background-color: var(--claro);
	}

.app-title[data-claroscuro="oscuro"] {
	background-color: var(--oscuro);
	}
.app-title[data-claroscuro="claro"] {
	background-color: var(--white);
	}

.app-title h1[data-claroscuro="oscuro"] {
	color: var(--light);
	}
.app-title h1[data-claroscuro="claro"] {
	color: var(--dark);
	}

.app-title p[data-claroscuro="oscuro"] {
	color: var(--light);
	}
.app-title p[data-claroscuro="claro"] {
	color: var(--dark);
	}

.tile[data-claroscuro="oscuro"],
.tile[data-claroscuro="oscuro"] pre {
	background: #222d32;
	color: var(--light);
	}
.tile[data-claroscuro="claro"],
.tile[data-claroscuro="claro"] pre {
	background: var(--white);
	color: var(--dark);
	}

.modal-content[data-claroscuro="oscuro"] {
	background-color: var(--oscuro);
	color: var(--light);
	}
.modal-content[data-claroscuro="claro"] {
	background-color: var(--white);
	color: var(--dark);
	}

#user-tema[data-claroscuro="oscuro"], 
#user-tema[data-claroscuro="oscuro"] h4 {
	background-color: #222d32;
	color: var(--light);
	}
#user-tema[data-claroscuro="claro"], 
#user-tema[data-claroscuro="claro"] h4  {
	background-color: var(--white);
	color: var(--dark);
	}
	
.timeline-post[data-claroscuro="oscuro"] {
	background-color: #222d32;
	color: var(--light);
	}
.timeline-post[data-claroscuro="claro"] {
	background-color: var(--white);
	color: var(--dark);
	}
	
.nav-link.active[data-claroscuro="oscuro"],
.nav-link[data-claroscuro="oscuro"] {
  color: var(--light);
  background-color: #222d32;
  /*border-color: #dee2e6 #dee2e6 #FFF;*/
}
.nav-link.active[data-claroscuro="oscuro"]:hover,
.nav-link[data-claroscuro="oscuro"]:hover {
  color: var(--dark);
  background-color: red;
  /*border-color: #dee2e6 #dee2e6 #FFF;*/
}
.nav-link.active[data-claroscuro="claro"],
.nav-link[data-claroscuro="claro"] {
  color: #495057;
  background-color: var(--white);
  /*border-color: #dee2e6 #dee2e6 #FFF;*/
}
	
.login-box[data-claroscuro="oscuro"] {
	background-color: #222d32;
	color: var(--light);
	}
.login-box[data-claroscuro="claro"] {
	background-color: var(--white);
	color: var(--dark);
	}

.material-half-bg[data-claroscuro="oscuro"] {
	background-color: #222d32;
}	
.material-half-bg[data-claroscuro="claro"] {
	background-color: #e7e7e7;
}

.login-box[data-claroscuro="oscuro"] {
	background-color: var(--oscuro);
	color: var(--light);
}
.login-box[data-claroscuro="claro"] {
	background-color: var(--white);
	color: var(--dark);
}

.login-box[data-claroscuro="oscuro"] label{
	color: var(--light);
}
.login-box[data-claroscuro="claro"] label{
	color: var(--dark);
}

a[data-claroscuro="oscuro"] {
  color: lightblue;
  text-decoration: none;
  background-color: transparent;
}

a[data-claroscuro="oscuro"]:hover {
  color: cyan;
  text-decoration: underline;
}