/* General
------------------------------*/
.container-theme {
	background-color: var(--color-neutro-softer);
	align-items:stretch;
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	width:100%;
	}


.container-theme,
.container-theme section {
	gap:var(--gap-second);
	}



.container-theme > section{
	align-items:stretch;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-direction:row;
	justify-content:space-between;
	margin:0px;
	padding:0px 0px;
	width:100%;
	}



/* section con 2 columnas
------------------------------*/
.container-theme > section.cols-2 > div.col {
	min-width:320px;
	flex-basis:40%; /* but grow  */
	}



/* Col-3
------------------------------*/
.container-theme > section.cols-3 > div.col {
	flex-basis:30%; /* but grow  */
	}

.container-theme .box{
	align-items:flex-start;
	align-content:flex-start;
	background-color: var(--color-white);
	border-radius: var(--rounded);
	display:flex;
	flex-flow:row wrap;
	gap:var(--gap-inside);
	height:auto;
	justify-content:flex-start;
	flex-grow:9;
	min-height:100px;
	min-width:300px;
	padding:40px 3vw;
	position:relative;
	width:26%;
	}



.container-theme .box,
.container-theme .box .tab-contenido{
	gap:8px;
	}


.container-theme .box .tab-contenido{
	padding:20px 0px!important;
	}



.container-theme .box hr{
	margin:0px 0px;
	}






/* Titulos 
------------------------------*/
.container-theme .box > .title{
	color: var(--color-neutro);
	font-size:0.8rem;
	font-weight:bold;
	text-transform:uppercase;
	margin:0px;
	padding:0px;
	width:100%;
	}



/* Colors
------------------------------*/
.container-theme div.tab-contenido.colors {
	display:none;
	}

.container-theme div.colors {
	display:flex;
	align-items:flex-start;
	flex-flow:row wrap;
	justify-content:flex-start;
	gap:var(--gap-inside);
	width:100%;
	}


.container-theme div.colors ul.colors {	
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	flex-grow:99;
	height:auto;
	justify-content:flex-start;
	list-style:none;
	margin:0px;
	overflow:hidden;
	padding:0px;
	width:40%;
	}

.container-theme div.colors ul.colors li{
	align-items:center;
	color:var(--color-white-50);
	display:flex;
	flex-direction:row;
	justify-content:center;
	list-style:none;
	font-size:0.6rem;
	height:60px;
	flex-grow:99;
	margin:0px;
	padding:0px;
	text-transform: uppercase;
	width:33.3%;
	}

.container-theme div.colors ul.colors li:nth-child(1){
	border-radius:6px 6px 0px 0px;
	width:100%;
	}
.container-theme div.colors ul.colors li:nth-child(2){
	border-radius:0px 0px 0px 6px;
	}
.container-theme div.colors ul.colors li:nth-child(4){
	border-radius:0px 0px 6px 0px;
	}




.container-theme div.colors ul.colors.main li:nth-child(1){
	background-color:var(--color-main);
	}
.container-theme div.colors ul.colors.main  li:nth-child(2){
	background-color:var(--color-main-dark);
	}
.container-theme div.colors ul.colors.main  li:nth-child(3){
	background-color:var(--color-main-soft);
	}
.container-theme div.colors ul.colors.main  li:nth-child(4){
	background-color:var(--color-main-softer);
	}


.container-theme div.colors ul.colors.second li:nth-child(1){
	background-color:var(--color-second);
	}
.container-theme div.colors ul.colors.second  li:nth-child(2){
	background-color:var(--color-second-dark);
	}
.container-theme div.colors ul.colors.second  li:nth-child(3){
	background-color:var(--color-second-soft);
	}
.container-theme div.colors ul.colors.second  li:nth-child(4){
	background-color:var(--color-second-softer);
	}


/* Neutro
------------------------------*/
.container-theme div.colors ul.colors.neutro {
	width:100%;
	}


.container-theme div.colors ul.colors.neutro li{
	width:20%;
	}

.container-theme div.colors ul.colors.neutro li:nth-child(1){
	border-radius:6px 0px 0px 6px;
	}
.container-theme div.colors ul.colors.neutro li:last-child{
	border-radius:0px 6px 6px 0px;
	}
.container-theme div.colors ul.colors.neutro li:nth-child(2){
	border-radius:0px 0px 0px 0px;
	}
.container-theme div.colors ul.colors.neutro li:nth-child(4){
	border-radius:0px 0px 0px 0px;
	}


.container-theme div.colors ul.colors.neutro  li:nth-child(5){
	background-color:var(--color-neutro-softer);
	}
.container-theme div.colors ul.colors.neutro  li:nth-child(4){
	background-color:var(--color-neutro-soft);
	}
.container-theme div.colors ul.colors.neutro li:nth-child(3){
	background-color:var(--color-neutro);
	}
.container-theme div.colors ul.colors.neutro  li:nth-child(2){
	background-color:var(--color-neutro-dark);
	}
.container-theme div.colors ul.colors.neutro  li:nth-child(1){
	background-color:var(--color-neutro-darker);
	}





/* Gradient
------------------------------*/

.container-theme div.colors ul.colors.gradient{
	width:100%;
	}

.container-theme div.colors ul.colors.gradient li{
	border-radius:6px!important;
	height:100px;
	width:100%;
	}


.container-theme div.colors ul.colors.gradient.main.soft li{
	background-image:var(--gradient-main-soft);
	}
.container-theme div.colors ul.colors.gradient.main li{
	background-image:var(--gradient-main);
	}
.container-theme div.colors ul.colors.gradient.main.dark li{
	background-image:var(--gradient-main-dark);
	}



.container-theme div.colors ul.colors.gradient.second.dark  li{
	background-image:var(--gradient-second-dark);
	}
.container-theme div.colors ul.colors.gradient.second  li{
	background-image:var(--gradient-second);
	}
.container-theme div.colors ul.colors.gradient.second.soft  li{
	background-image:var(--gradient-second-soft);
	}




.container-theme div.colors ul.colors.gradient.neutro.soft li{
	background-image:var(--gradient-neutro-soft);
	}
.container-theme div.colors ul.colors.gradient.neutro li{
	background-image:var(--gradient-neutro);
	}
.container-theme div.colors ul.colors.gradient.neutro.dark li{
	background-image:var(--gradient-neutro-dark);
	}



.container-theme div.colors ul.colors.gradient.combinado-uno li{
	background-image:var(--gradient-combinado-uno);
	}

.container-theme div.colors ul.colors.gradient.combinado-dos li{
	background-image:var(--gradient-combinado-dos);
	}

.container-theme div.colors ul.colors.gradient.combinado-tres li{
	background-image:var(--gradient-combinado-tres);
	}



/* Lista iconos
------------------------------*/
.container-theme .icons ul.list-ok{
	flex-direction:row;
	}


/* Bx-car
------------------------------*/
.box-card{
	background-color:var(--color-white);
	border-radius:6px;
	border:6px solid #fff;
	height:auto;
	margin:8px 0px;
	overflow:hidden;
	outline:1px solid var(--color-neutro-softer);
	width:auto;
	}


.box-card.icon{
	max-width:140px;
	}

.box-card.favicon{
	max-width:100px;
	}