/* Configuracion */

.headerConfiguracion{
	display: grid;
	grid-template-columns: calc(100% - 2em) 2em;
	width: 100%;
	height: 2em;
	background-color: #3f8caa;;
	color: white;
	font-size: 20px;
	min-height: 2em;
}

.headerConfiguracionGen{
	display: grid;
	grid-template-columns: calc(100% - 2em) 2em;
	width: 100%;
	height: 2em;
	background-color: #5ab6bf;
	color: white;
	font-size: 20px;
	min-height: 2em;
}

.tituloConfiguracion{
	text-align: center;
	align-self: center;
}

.cerrarConfiguracion{
	align-items: center;
	display: flex;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}

.mainConfiguracion{
	height: calc(100% - 2em);
	display: flex;          
	font-size: 20px;
}

.lateralConfiguracion{
	display: flex;
	height: 100%;
	flex-direction: column;
	width: 100%;
	padding: 15px;
	height: 100%;
	max-width: 25em;
	min-width: 15em;
    overflow: auto;
}

.panelFormConfiguracion{
	height: 100%;
	width: 100%;
	padding: 15px;
	background-color: #f4f3f3;
	font-size: 0.9em;
	overflow-y: auto;
}

.opcionConfiguracion{
	display: flex;
	height: 100%;
	min-height: 2em;
	max-height: 2em;
	transition: all 0.2s;
	border-radius: 5px;

}

.opcionConfiguracion *{
	cursor: pointer;
}

.opcionConfiguracion:hover{
	background-color: rgba(63, 140, 170, 0.65);
}

.opcionConfiguracionGen:hover{
	background-color: rgba(63, 140, 170, 0.33)
}

.opcionActivaConf{
	background-color: rgba(63, 140, 170, 0.4);
	/* border: 1px solid #f4f3f3; */
}

.opcionActivaConfGen{
	background-color: rgba(63, 140, 170, 0.4);
	/* border: 1px solid #f4f3f3; */
}

.opcionActivaConf i{
	padding-left: 10%;
}

.btnsSeleccion{
	/* width: 5em; */
	display: flex;
	flex-direction: column;
}

.btnsSeleccion span{
	display: inline-block;
	text-align: center;
	background-color: #298cc8;
	color: white;
	padding: 10px 0px;
	border: none;
	cursor: pointer;
	width: auto;
	transition: 0.35s;
	border-radius: 5px;
	font-weight: bold;
	margin: 2px 4px 2px 4px;
}

.btnsSeleccion span:hover{
	background-color: #0363ac;
}

.divCheckBox{
	grid-column-start: 1;
	grid-column-end: 2;
	width: 80%;
	justify-self: end;
	max-width: 12em;
	display: flex;
	align-items: center;
}

.divCheckBox label{
	width: 100%;	
	max-width: 100%;
}

/* .btnForm btnFormRight{
	display: inline-block;
	text-align: center;
	background-color: #298cc8;
	color: white;
	padding: 14px 20px;
	border: none;
	cursor: pointer;
	width: auto;
	transition: 0.35s;
	border-radius: 5px;
	font-weight: bold;
	margin: 2px 4px 2px 4px;
	grid-column-start: 3;
	grid-column-end: 4;
	max-width: 8em;
} */

/*Dias credito*/
.divLstDiasCredito {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstDiasCredito {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemDiasCredito {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.diasCredito {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.diasCreditoSpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.diasCredito span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.diasCredito span:hover {
    background-color: #298cc8;
    color: white;
}

.diasCredito label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemDiasCreditoActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}
/*IVA*/
.divLstIVA {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstIVA {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemIVA {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.IVA {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.IVASpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.IVA span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.IVA span:hover {
    background-color: #298cc8;
    color: white;
}

.IVA label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemIVAActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}

/*Marcas*/
.divLstMarcas {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstMarcas {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemMarcas {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.marcas { 
    display: grid;
    grid-template-columns: 80% 20%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.marcasSpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.marcas span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.marcas span:hover {
    background-color: #298cc8;
    color: white;
}

.marcas label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemMarcasActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}

/*Unidades medida*/
.divLstUnidadesMedida {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstUnidadesMedida {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemUnidadesMedida {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.unidadesMedida { 
    display: grid;
    grid-template-columns: 30% 50% 20%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.unidadesMedidaSpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.unidadesMedida span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.unidadesMedida span:hover {
    background-color: #298cc8;
    color: white;
}

.unidadesMedida label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemUnidadesMedidaActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}

/*Estatus*/
.divLstEstatus {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstEstatus {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemEstatus {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.estatus { 
    display: grid;
    grid-template-columns: 30% 50% 20%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.estatusSpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.estatus span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.estatus span:hover {
    background-color: #298cc8;
    color: white;
}

.estatus label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemEstatusActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}

/*Clasificaciones*/

.divLstClasificaciones {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstClasificaciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemClasificaciones {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.Clasificaciones {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.ClasificacionesSpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.Clasificaciones span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.Clasificaciones span:hover {
    background-color: #298cc8;
    color: white;
}

.Clasificaciones label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemClasificacionesActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}

/*SubClasificaciones*/

.divLstSubClasificaciones {
    grid-column-start: 1;
    grid-column-end: 4;
    max-height: 25em;
    overflow-y: auto;
    margin-top: 5px;
}

.lstSubClasificaciones {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    height: 100%;
}

.itemSubClasificaciones {
    background-color: #ece7e7;
    margin-top: 3px;
    margin-bottom: 3px;
    text-align: center;
    flex: 1;
    justify-content: center;
    display: flex;
    border-bottom: #c4c4c4 solid 1px;
    border-top: #c4c4c4 solid 1px;
    border-left: #c4c4c4 solid 1px;
    border-right: #c4c4c4 solid 1px;
    width: 100%;
    max-width: 95%;
    transition: 0.20s;
}

.SubClasificaciones {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 5px;
    min-width: 440px;
    font-size: 0.8em;
    align-content: center;
    align-items: center;
    width: 100%;
}

.SubClasificacionesSpan {
    align-items: center;
    justify-content: center;
    display: flex;
    /* grid-column-start: 2;
    grid-column-end: 3; */
}

.SubClasificaciones span {
    display: inline-block;
    text-align: center;
    background-color: transparent;
    color: black;
    padding: 0;
    margin-top: 0px;
    border: none;
    cursor: pointer;
    transition: 0.35s;
    border-radius: 5px;
    font-weight: bold;
    margin-left: 0px;
    margin-right: 0px;
    width: 2.5em;
    height: 2.5em;
    align-items: center;
    display: flex;
    justify-content: center;
}

.SubClasificaciones span:hover {
    background-color: #298cc8;
    color: white;
}

.SubClasificaciones label{
    max-width: 100%;
    width: 100%;
    justify-content: center;
}

.itemSubClasificacionesActive{
	background-color: #ffd56c !important;
	border-bottom: #5e5e5e solid 1px !important;
	border-top: #5e5e5e solid 1px !important;
	border-left: #5e5e5e solid 1px !important;
	border-right: #5e5e5e solid 1px !important;
}