html{
	font-size: 62.5%;
	font-family: sans-serif, Arial, Helvetica;
}

html, body{
	width:100%;
	height:100%;
	font-size:.95rem;
}

body{
	padding:5px;
	/*background-color:#B6B6B6;*/
	display: flex;
	flex-flow: column nowrap;
}

/* MAIN APP START	*/
#content{
	flex: 1 0 auto;
	display:flex;
  flex-direction: column;
}

#header{
	display:flex;
	flex-flow: row wrap;
	flex: 0 0 auto;
	height:70px;
	/*background-color:yellow;*/
}

#webPrintHeader{
	display:none;
}


.topBarInfo{
	display:flex;
	padding:10px;
	width:100%;
	background:#ff6666;
	flex-flow: row wrap;
	flex: 0 0 auto;
	height:40px;
	/*background-color:yellow;*/
}

.topBarInfo p{
	width:90%;
	text-align:center;
	font-size:1.2em;
}

.topBarInfo p.button{
	width:10%;
	text-align:center;
	font-size:1.2em;
}

.font-size-2em{
	font-size:2em;
}

.no-decoration{
	text-decoration:none;
}

#rightHeader{
	flex:1;
}
#rightHeader p{
	width:100px;
	float:right;
	text-align:right;
}

#header a{
	color:#000;
	font-size:14px;
	font-weight:bold;
}

.flexCenter{
	width:210px;
	flex:0 1 210px;
}



#middle{
	display:flex;
	align-items:stretch;
	flex-flow: row nowrap;
	flex:1;
	border-bottom:1px solid #B8B8B8;
	border-top:1px solid gray;
}

#leftView{
	width: 230px;
	/*background-color:orange;*/
	background-color:#F5F5F5;
	order:1;
	flex: 0 1 230px;
	border-right:1px solid gray;
}

#leftView ul li{
	    border-bottom: 1px solid #818183;
}
#leftView ul li:last-child {
    border-bottom: none;
}
#leftView ul li a{
	 display: block;
   width: 100%;
	    color: #000;
			    padding: 17px 15px;
					    text-decoration: none;
							font-weight:bold;
}
/* Change the link color on hover */
#leftView ul li a:hover {
    background-color: #555;
		    color: white;
}
 .active {
     background-color: #4CAF50;
		     color: white;
				 }
#appLeftMenu a{
	width:100%;
	display:block;
	text-decoration:none;
	font-weight:bold;
}

#appLeftMenu a:hover{
	background-color: #C0C0C0;
}

#rightView{
	/*background-color:red;
	width:auto;*/
	order:2;
	flex:1 1 0;
	margin-bottom:50px;
}

.rightViewTop{
	height:50px;
}

.rightViewBottom{
	background-color:white;
	flex:1;

}

#footer{
	height:40px;
	flex-shrink: 0;
	display:flex;
	justify-content:  center ;
	align-items: center;
}

#header,#leftView,#rightView,#footer {
	padding-top:10px;
}

.mPLeft{
	padding-left:15px;
	padding-right:15px;
}

.centerBox{
	width:100%;
	display:flex;
	flex-flow:column;
	align-items: center;
	justify-content: center;
}
#login-form h3{
	text-align:center;
}

/* MAIN APP END*/
.mainMenuActive{
	background-color:#BEBEBE;
}

.sectionTitle{
	width:100%;
	font-size:1.3em;
	background-color:#F5F5F5;
}


.subMenuContainer li + li{
	border-left:1px solid gray;
}

.subMenuContainer li{
	min-width:10em;
	display:block;
	margin-bottom:10px;
	background-color:#BEBEBE;
	float:left;
	height:1.5em;
	padding:5px;
}

.subMenuContainer li a{
	text-decoration:none;
}


/* FORM CSS START*/
form {
	width:100%;
	max-width:none;
	flex:1;
}

form hr{
	visibility:hidden;
	margin:0px;
	padding:0px;
	width:100%;
	float:left;
}

form label{
	width:35%;
	display:block;
	text-align:right;
	padding: 0 1em 0 0;
	float:left;
	font-weight:bold;
}

form fieldset{
	width: 100%;
	min-width:30rem;
	margin:auto auto;
	padding:10px;
	margin-bottom:10px;
	border:#ccc 1px solid;
	border-radius:2px; 
	box-shadow: 0 1px 1px #d1d1d1;
}

form fieldset.s100pct{
	width: 95%;
	margin:auto auto;
	border:#ccc 1px solid;
	border-radius:3px;
	box-shadow: 0 1px 2px #d1d1d1;
}

.displayNone{
	display:none;
}

form input, form textarea, form select, form span.rangeSeparator{
	float:left;
}

form input:not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]){
	width:45%;
	display:block;
}

form input.s20pct:not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]){
	width:20%;
	display:block;
}
form input.s19pct:not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]){
	width:19%;
	display:block;
}

span.rangeSeparator{
	display:block;
	width:4%;

}
form textarea, form select{
	width:45%;
	display:block;
}

input[type="submit"], input[type="button"]{
	font-size:0.95rem;
	clear:left;
	min-width:7rem;
	/*
//	-webkit-border-radius: 1px;
//	-moz-border-radius: 1px;
//	border-radius: 1px;
//	border: solid 1px #20538D;
//	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
//	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
//	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
//	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
//	-webkit-transition-duration: 0.2s;
//	-moz-transition-duration: 0.2s;
//	transition-duration: 0.2s;
//	-webkit-user-select:none;
//	-moz-user-select:none;
//	-ms-user-select:none;
//	background: #4479BA;
//	color: #ffffff;
*/
	font-weight: bold;
	float:right;
	padding: 3px 5px;
	margin:0 auto 0 auto;
	
	cursor:pointer;
}

input.cancelBtn[type="submit"]{
	/*
//	background:#F0F0F0;
	//color:#363636;
//	border:1px solid #949393;
//	text-shadow: 0 1px 0 #F8F5F5;
*/
	color:#A5080A;
}

table a.getCatalogItem{
	color: #0000EE;
}

input.floatLeft[type="submit"], input.floatLeft[type="button"]{
	float:left;
}

td.tdVerifyCfdi input{
	display:block;
	clear:none;
	margin-right:2em;
}

a.aBtn{
	display:block;
	font-size:0.9rem;
	background: #4479BA;
	text-decoration:none;
	color:#fff;
	font-weight: bold;
	min-width:9rem;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	border: solid 1px #20538D;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	font-weight: bold;
	float:right;
	padding: 14px 22px;
	margin:0 auto 0 auto;
	text-align:center;
	
}

form input.aBtn{
	margin-left:18px;
}

.searchFormCss{
	float:left;
	width:100%;
}

form{
	max-width:none;
	width:100%;

}

div form input:not([type="submit"]):not([type="checkbox"]):not([type="button"]):not([type="file"]), div form textarea{
	border: 1px solid #B4B1B1;
	//box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
	color: #000;
	padding: 4px;
	height:2.5em;
	margin-bottom:12px;
}
div form textarea{
	height:auto;
}
div form input:[type="file"]{
	margin-bottom:12px;
}
div form input[type="checkbox"]{
	margin-bottom:12px;
}
div form input[readonly="readonly"], div form textarea[readonly="readonly"], div form select[readonly="readonly"], div form checbox[readonly="readonly"] {
	background:#F5F5F5;
	cursor:default;
}

div form input.pickaDate{
	cursor:pointer;
	background:#fff;
}

table.inForm{
	float:left;
	width:100%;
	margin-bottom:20px;
}

form table.inForm input:not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="checkbox"]){
	width:100%;
	display:block;
}

table.inForm tr textarea{
	margin-bottom:0px;
	padding: 8px;
	width:100%;
}

input.groupBtn[type="submit"]{
	margin-left:18px;
}
form div.dialogBoxSeparator{
	float:left;
	width:100%;
	background:#F5F5F5;	
}

table a.modalDialogListItem,.extra-label a.catalog-ctrl{
	color:#0000EE; !important
	text-decoration:none;
}

div form select{
	border: 1px solid #dbdbdb;
	background:#FAFAFA;
/*	box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
	*/
	box-sizing: border-box;
	color: #000;
	padding: 8px;
	margin-bottom:20px;
}


.extra-label{
	float:left;
}
.extra-label a.catalog-ctrl{
	font-size:1.5em;
	color:#0000EE;
	text-decoration:none;
}

/* FORM CSS START*/

/*APPDBOBJECT CSS*/
.appC-container{
	width:100%;
	display:flex;
	flex-flow:column;
}

/*Results*/
.appC-container table {
	float:left;
	width:100%;
	background:#fff;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid #DCDCDC;
}

.appC-container table thead{
	background-color:#FCFBFB;
	text-align:left;
}

/*sticky table headers & columns*/

@media screen  {
.appC-container div table thead th{
	position: sticky;
	background:#fff;
	top: 0;
}

.appC-container div table td:first-child{
	position: sticky;
	left: 0;
}

.appC-container div table th:first-child{
	left: 0;
	z-index: 1;
}
}

.appC-container div table tbody tr:nth-child(odd) {
	background-color:#F5F5F5;
	border-bottom:1px solid #C0C0C0;
	border-top:1px solid #C0C0C0;
}

.appC-container tr {
	height:1.3em;
}

.appC-container td, .appC-container th {
	vertical-align:middle;
}

.appC-container a {
	text-decoration:none;
	font-weight:bold;
}
table.w100pct{
	width:100%;
}
table td {
	border: 1px solid #dcdcdc;
	color: #262626;
	padding: 8px 3px;
	text-shadow: 1px 1px 1px #fff;
	vertical-align:middle;
}

table td a{
	font-weight:bold;
	text-decoration:none;
}
table td a:hover{
	text-decoration:underline;
}


table td a:visited{
	color:#0F0FEF;
}

table td.colSmall{
	min-width:100px;
}
	
table td.colMed{
	width:35%;
}
table td.colBig{
	width:50%;
}

table th:not(.no-background) {
			     color: #000;
					 border-bottom:2px solid #DCDCDC;
					  padding: 8px 3px;
					  text-shadow: 1px 1px 1px #fff;
						font-weight:bold;
					 border:1px solid #DCDCDC;

}
table th input[type="checkbox"], table td input[type="checkbox"] {
	display:block;
	float:none;
	text-align:center;
	margin:0 auto;
}

table th:not(.txtRight, .totals) {
 text-align: left;
}
table td:first-child, table th:first-child{
	border-left: 1px solid #fff;
}
table td:last-child, table th:last-child{
	border-right: 1px solid #fff;
}


table:not(.notRwBg):not(.issuerData):not(.nozebra) tr:nth-child(even) {
	 background-color:#FAF9F9;
}

table:not(.notRwBg):not(.issuerData):not(.nozebra) tr:nth-child(odd):not(.tableHeaders){
	background: #F5F5F5;
}

table:not(.notRwBg):not(.issuerData):not(.nozebra) tr:hover:not(.tableHeaders){
	background: #C0C0C0; 
}


table.notRwBg{
	background:transparent;
}
table tr.tableHeaders{
	background: #fff;
	border-bottom:2px solid #C1BFBF;
}
table tr.tableHeaders th:not(.txtRight){
	text-align:left;
}

/*Info table*/
table.generalInfo{
	width: 100%;
}
table.generalInfo th{
	width: 50%;
	text-align: right;
	border-top:1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
}
table.generalInfo th.txtRight{
	text-align: right;
}
table.generalInfo td{
	width: 50%;
	text-align: left;
	border-top:1px solid #dcdcdc;
	border-bottom:1px solid #dcdcdc;
}

/*table classesValue*/
.orderStatus50{
	background: linear-gradient(to right, blue 0 10%, transparent 10% 80%);
}

.orderStatus400,.orderStatus500{
	background: linear-gradient(to right, green 0 10%, transparent 10% 80%);
}

.orderStatus100,.orderStatus200,.orderStatus300{
	/*background-color:yellow;*/
	background: linear-gradient(to right, yellow 0 10%, transparent 10% 80%);
}


/*table classesValue*/
.reportRowTypeCompra{
	background: linear-gradient(to right, blue 0 10%, transparent 10% 80%);
}

.reportRowTypeVenta{
	background: linear-gradient(to right, green 0 10%, transparent 10% 80%);
}

/*APPDBOBJECT CSS*/


/* IMAGE RESIZE CSS START*/
.loadingSpinner, .loadingSpinnerB{
	text-align:center;
	order:3;
	flex:1;
}

.loadingSpinnerB img, 
.loadingSpinner img
.imgCssResize{
	display: block;
	max-width:216px;
	max-height:80px;
	width: auto;
	height: auto;
	margin: auto auto;
}

.flexCenterContent{
	display:flex;
	justify-content:  center ;
	align-items: center;
}
.imgCssResize{
	display: block;
	max-width:210px;
	max-height:55px;
	width: auto;
	height: auto;
	margin:auto;
}

/* IMAGE RESIZE CSS END*/

/*CATEGORIES*/
ul.categoryPath {
	margin-left:0.5em;
}
.categoryPath li{
	float:left;
	margin-right:0.5em;
}
.catLocation{
	display:flex;
	flex-flow: row wrap;
	margin-top:0.5em;
	margin-bottom:0.5em;
	font-weight:bold;
}
.catLocation a{
	color:#0F0FEF;
	text-decoration:none;
}
.catLocation a:hover{
	text-decoration:underline;
}

.catLeft{
	float:left;
	width:30%;
	height:100%;
	border-right:1px solid #DCDCDC;
}
.catRight{
	float:left;
	height:100%;
	width:70%;
}
.titlePath{
}

.categoryList{
	float:left;
	width:100%;
	padding-right:1em;
}

.categoryList li{
	float:left;
	width:100%;
	border-bottom: 1px solid #ccc;
	padding:5px 2px;
}
.categoryList  li:last-child {
	border: none;
}
.categoryList  li a {
	text-decoration: none;
	color:#0F0FEF;
	font-weight:bold;
}					  

.categoryList  li a:hover {
	text-decoration:underline;
}

.floatRight{
	float:right;
}

.floatLeft{
	float:left;
}

/*TABBED ELEMENTS*/
.tab-element{
	display:flex;
	flex-flow:column;
	flex:1;
	display:none;
}

.tab-title-active {
	background-color: #033D69;
	    border: solid 1px #002948;
}

.bar-icon{
width:100%;
			background-color:#F5F5F5;
height:100%;
			 margin-bottom:.5em;
}

.historyGoBack{
	text-align:left;
	text-decoration:none;
}

.titleSection{
	display:flex;
	flex-flow: row wrap;
}

nav{
	flex:1;
	order:2;
	display:flex;
	flex-flow: row wrap;
	justify-content:flex-end;
}
/*
nav a{
	box-sizing: border-box;
height:1.3em;
padding: .2em .5em .2em .5em;
				 text-decoration: none;
				 margin-right:.5em;
				 background-color:#E8E8E8;
transition: all .25s ease;
						box-shadow: 0 1px 2px #d1d1d1;

}

nav a:hover{
	background-color:#F5F5F5;
}
*/
nav a{
	float:right;
	text-align:right;
	margin-left:12px;
	padding: 5px 10px;
	background: #4479BA;
	text-decoration: none;
	color: #FFF;
	font-weight:bold;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
	border-radius: 1px;
	border: solid 1px #20538D;
	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
nav a:hover {
	background: #356094;
	border: solid 1px #2A4E77;
	text-decoration: underline;
}
nav a:active {
	-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
	background: #2E5481;
	border: solid 1px #203E5F;
}
	nav.manyBtns a{
		margin-bottom:10px;
	}

@media screen and (max-width: 1900px) {

	nav.manyBtns a{
		margin-bottom:10px;
	}
	
}
.top20{
	margin-top:20px;
}
.top40{
	margin-top:40px;
}
.bottom20{
	margin-bottom:20px;
}
.paddinB20{
	padding-bottom:10px;
	margin-bottom:10px;
}

.borderBotTitle{
	border-bottom:1px solid #E5E5E5; 
}

.txtRight{
	text-align:right;
}
.empty p{
	font-style:italic;
}


/*PAGINATOR*/
.paginator{
	//min-width:30em;
	width:100%;
	height:1.5em;
	text-align:center;
	float:left;
	font-weight:bold;
	margin-top:20px;
}
.paginator ul {
	display:inline-block;
}
.paginator ul li {display: inline;}

.paginator ul li  {
	color: black;
	text-decoration: none;
	 border: 1px solid #ddd; 
	 margin: 0 4px;
}
.paginator li{
	display:inline-block;
	min-width:1em;
	height:1.2em;
	margin: 0em .5em .0em .5em;
	font-size:14px;
	padding:0em;
	padding: 4px 0px;
}

.paginator li.currentPage{
 	font-weight:bold;
	padding:.3em;
	height:100%;
  background-color: #EDEDED;
	margin: 0em .5em .0em .5em;
}

.paginator li a{
	width:100%;
	height:100%;
	padding:.3em .9em;
	background:#EDEDED;
}

.paginator ul li:hover:not(.currentPage){
	background-color: #ddd;
	text-decoration:underline;

}

.paginator ul li:active{
	background-color: #ddd;
	color: white;
}

.paginator ul li:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.paginator ul li:last-child  {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

/*SVG EDIT */
#svgPreviewSmall svg{
	max-width:35em;
	height:auto;
	height:auto;
	margin:auto;
	padding:5px;
}


#id-svg-show{
	width:100%;
	max-width:50em;
	margin:auto;
}

#id-svg-show svg{
	width:100%;
	height:auto;
	display:block;
}

#canvas-svg {
	width:100%;
	height:80%;
	float:left;
}


#canvas-svg svg{
	width:80%;
	height:auto;
	display:block;
	margin:auto;
	border:1px solid black;
}

@media only screen and (max-width: 700px) {
	#canvas-svg svg{
		width:auto;
		height:100%;
		display:block;
		margin:auto;
		border:1px solid black;
	}
}

#canvas-svg-controls{
	width:100%;
	padding-top:0.5em;
	float:left;
}

#note-image-upload{
	width:100%;
}

#image-preview-container{
	width:100%;
	display:flex;
	flex-flow:row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 10px 10px; 
}

#image-preview-container div.image-preview-box {
	flex: 0;
	position:relative;
	width:20em;
	height:15em;
	padding:.5em;
}

div.image-preview-box p.top-icon{
	position:absolute;
	top:0.5em;
	right:0.5em;
	text-align:right;
	font-size:3em;
	color: #FFFFFF;
	text-shadow: 2px 1px 0 #7A7A7A;
	margin:auto;
}

div.image-preview-box p.bottom-icon{
	position:absolute;
	bottom:0.5em;
	left:0.5em;
	text-align:left;
	font-size:2.5em;
	padding:.05em;
	color: #FFFFFF;
	background-color:gray;
	border-radius: 3px;
	text-shadow: 2px 1px 0 #7A7A7A;
	margin:auto;
}

div.image-preview-box img.image-preview{
	max-width:20em;
	max-height:15em;
	height:auto;
	width:auto;
	cursor:zoom-in;
}