/* DOCUMENT CREATED BY MICROENG - 2015-10-03  */
/* DOCUMENT EDITED BY RM - 2015-10-03 */

/* ############################################################################################# */
/* RULES */
/*
The margin (and the padding) properties can have from one to four values:
margin: Apx Bpx Cpx Dpx; ==> top margin is Apx | right margin is Bpx | bottom margin is Cpx | left margin is Dpx
margin: Apx Bpx Cpx; ==> top margin is Apx | right and left margins are Bpx | bottom margin is Cpx
margin: Apx Bpx; ==> top and bottom margins are Apx | right and left margins are Bpx
margin: Apx; ==> all four margins are Apx

Hide an Element - display:none or visibility:hidden?
Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:	display: none;
visibility:hidden;		also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout.
 */

/* ############################################################################################# */
/* RESET */

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	b, u, i,
	article, aside, canvas, details, embed,
	figure, figcaption, footer, header, hgroup,
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
				margin: 0px;
				padding: 0px;
				border: 0px;
				outline: 0px;
				font-weight: inherit;
				font-style: inherit;
				font-size: 100%;
				font-family: inherit;
				vertical-align: baseline;
	}
	/* remember to define focus styles! */
	:focus {
		outline: 0px;
	}
	body {
		/*line-height: 1px;     Esta linha foi comentada pois estava causando problema com o JQUERY Datepicker widget  */
		color: black;
		background: white;
	}
	ol, ul {
		list-style: none;
	}
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: separate;
		border-spacing: 0px;
	}
	caption, th, td {
		text-align: left;
		font-weight: normal;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: "";
	}
	blockquote, q {
		quotes: "" "";
	}

	* {
	/* Ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements */
	    box-sizing: border-box;
	}

/* END RESET */
/* ############################################################################################# */

/* ############################################################################################# */
/* Controle para o JQUERY Datepicker widget - faz variar o tamanho do calend�rio - default 62.5% */
div.ui-datepicker {
	font-size: 100%;
}
/* ############################################################################################# */

/* ############################################################################################# */
/* HTML BODY IFRAME */

html {
	overflow: auto;
}

html, body, div, iframe {
	box-sizing:border-box;
	font-family: Arial, sans-serif;
	border: none;
		 /* Preventing text scaling on iPhone landscape orientation change */
		  -webkit-text-size-adjust: 100%;
		  -moz-text-size-adjust: none;
		  -ms-text-size-adjust: 100%;
}

html, body, div.bt_sethight, iframe {	/* Foi necess�rio criar esta classe "inicial" para n�o interferir com a altura do frame do datepicker. Sem este conjunto de 100% a página de login n�o formata adequado com iframe */	/* Em uso Projeto BudgetTracker */
	height: 100%;
}

BODY.bt_std_body {	/* Em uso Projeto BudgetTracker */
	/*background-image: url(../images/bt_purple_background.png);	/* old backgound = bg_grey_grad2.gif */
	/*background-color: white;*/
	/* font-size: 10pt; */
	font-family: Arial, sans-serif;
	text-align: center;
	color: #5E5E5E;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
	background-color: #800080; /* fallback color if gradients are not supported */
	background-image: -moz-linear-gradient(180deg,#450045 0%, #800080 100%); /* For Firefox (3.6 to 15) */
	background-image: -webkit-linear-gradient(180deg,#450045 0%, #800080 100%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
	background-image:      -o-linear-gradient(180deg,#450045 0%, #800080 100%); /* For old Opera (11.1 to 12.0) */
	background-image: linear-gradient(180deg,#450045 0%, #800080 100%);/* Standard syntax; must be last */
}

BODY.mmcom_DEV_body {	/* Em uso na �rea de DEVELOPMENT do Projeto BudgetTracker */
	/*background-image: url(../images/bt_purple_background.png);	/* old backgound = bg_grey_grad2.gif */
	/*background-color: white;*/
	/* font-size: 10pt; */
	font-family: Arial, sans-serif;
	text-align: center;
	color: #5E5E5E;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
	background-color: #003400; /* fallback color if gradients are not supported */
	background-image: -moz-linear-gradient(180deg,#003400 0%, #008000 100%); /* For Firefox (3.6 to 15) */
	background-image: -webkit-linear-gradient(180deg,#003400 0%, #008000 100%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
	background-image:      -o-linear-gradient(180deg,#003400 0%, #008000 100%); /* For old Opera (11.1 to 12.0) */
	background-image: linear-gradient(180deg,#003400 0%, #008000 100%);/* Standard syntax; must be last */
}

BODY.bt_FGM_body {	/* Em uso na �rea de DEVELOPMENT do Projeto BudgetTracker */
	/*background-image: url(../images/bt_purple_background.png);	/* old backgound = bg_grey_grad2.gif */
	/*background-color: white;*/
	/* font-size: 10pt; */
	font-family: Arial, sans-serif;
	text-align: center;
	color: #5E5E5E;
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient */
	background-color: #800080; /* fallback color if gradients are not supported */
	background-image: -moz-linear-gradient(180deg,#000045 0%, #000080 100%); /* For Firefox (3.6 to 15) */
	background-image: -webkit-linear-gradient(180deg,#000045 0%, #000080 100%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
	background-image:      -o-linear-gradient(180deg,#000045 0%, #000080 100%); /* For old Opera (11.1 to 12.0) */
	background-image: linear-gradient(180deg,#000045 0%, #000080 100%);/* Standard syntax; must be last */
}

iframe.bt_login {	/* Em uso Projeto BudgetTracker */
	display: block;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	margin-left: auto;
	margin-right: auto;
}

.footer-box {
	position: absolute;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* END HTML BODY IFRAME */
/* ############################################################################################# */

/* ############################################################################################# */
/* CLASS SELECTORS */

.teste {border: 1px solid red;}

.esquerda {text-align: left;}
.centro {text-align: center;}
.justificado {text-align:justify;}
.direita {text-align: right;}
.vtopo {vertical-align: top;}
.vmeio {vertical-align: middle !important;}
.vbaixo {vertical-align: bottom;}

.no_text_overflow {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.no_container_overflow {overflow: hidden;}

.button {font-family: Arial, sans-serif; font-weight: bold; font-size: 10pt; background-color: #ADD8E6; color: #000080; margin-left: 12px; margin-top: 3px; margin-bottom: 2px;}

.btn_logout {font-family: Arial, sans-serif; font-weight: normal; font-size: 10pt; color: #0000FF; text-decoration: underline; background-color: transparent; border: 0; padding: 0; width: 40px;}

.btn_logout:hover {font-family: Arial, sans-serif; font-weight: normal; font-size: 10pt; color: #FF0000; text-decoration: underline; background-color: transparent; border: 0; padding: 0; width: 40px; cursor: pointer;}

.menu1:hover  {	 /*   Background  Yellow - Text = white   */	/* Em uso Projeto BudgetTracker */
	background-color: #FFFF00;
	font-size: 12pt;
	font-style: normal;
	font-weight: bold;
	color: red;
	text-align: center;
	vertical-align: middle;
}

.menu1{     /*  Background Dark Grey - Text = red   */	/* Em uso Projeto BudgetTracker */
	background-color: #5E5E5E;
	font-size: 12pt;
	font-style: normal;
	font-weight: bold;
	color: White;
	text-align: center;
	vertical-align: middle;
}

.auditoria {
	color: #5E5E5E;
	background-color: #CACACA ;	/*  SILVER  --  OLD - F5FFFA  MintCream   */
	padding: 2px 0px  2px 5px !important;
}

.menu_color1	{background-color: #FFFFFF ;}     /*    White   */
.menu_color2	{background-color: #FFFFE0 ;}     /*    LightYellow   */
.menu_color3	{background-color: #F5FFFA ;}     /*    MintCream   */
.menu_color4	{background-color: #FDF5E6 ;}     /*    OldLace   */
.menu_color5	{background-color: #F0F8FF ;}     /*    AliceBlue   */

.req {color: #CC2020; } /* letras vermelhas para campos requeridos */
.reqb {color: #CC2020; font-weight: bold; } /* letras negrito vermelhas para campos requeridos */
.req0 {background-color: #FFECEF;}	/*   Not Named Color - Derived from Pink   */
.req1 {background-color: #E0FFE0;}	/*   Not Named Color - Derived from LighGreen   */
.req2 {background-color: #FFFFE0;}	/*   LightYellow   */
.req3 {color: #FF0000; background-color: #FFFF00;}	/*   Yellow / Text Red   */
.req4 {background-color: #CACACA;}	/*   Silver   */

.budget {
	font-size: 8pt;
	text-align: left;
}


.budget_r	{
	font-size: 8pt;
	text-align: right;
}

hr.basic {
    border: 1px solid #800080 !Important;
}

hr.dupla2px {		/* https://codepen.io/ibrahimjabbari/pen/ozinB */
	border-top: 1px solid #800080;
	border-bottom: 1px solid #800080;
}

hr.dupla4px {
	border-top: 2px solid #800080;
	border-bottom: 2px solid #800080;
}

.std_count	{display: inline; font-family: Arial; font-size: 8pt; font-style: normal; font-weight: lighter; color: green; min-width: 25px; }

.std_count_inv	{display: inline; font-family: Arial; font-size: 8pt; font-style: normal; font-weight: lighter; color: #FFFFFF; min-width: 25px; background-color: #5E5E5E; }

.escondido	{ visibility: hidden; }

.topborder1	{border-top: 1px  #5E5E5E; }

.purple	{color: #800080;}
/*.round-corners	{
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
}*/

/* END CLASS SELECTORS */
/* ############################################################################################# */

/* ############################################################################################# */
/* HEADERS and PARAGRAPHS */

H1.mnt {	/* Em uso Projeto BudgetTracker */
	padding: 5px 0px  5px 0px;
	font-size: 32pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	text-align: center;
}

H1.titulo1 {	/* Em uso Projeto BudgetTracker */
	padding: 5px 0px  5px 0px;
	font-size: 26pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	text-align: center;
}

H2.titulo2 {
	padding: 5px 0px  5px 0px;
	font-size: 22pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	text-align: center;
}

H3.titulo3 {
	padding: 5px 0px  0px 0px;
	font-size: 18pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	text-align: center;
}

H4.titulo4 {	/* Em uso Projeto BudgetTracker */
	padding: 5px 0px  0px 0px;
	font-size: 16pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	text-align: center;
}

H5.titulo5 {
	padding: 5px 0px  0px 0px;
	font-size: 12pt;
	font-style: normal;
	font-weight: bold;
	/*color: navy;*/
	text-align: center;
}

#countdown {
	/*padding: 5px 0px  0px 0px; */
	font-size: 12pt;
	font-style: normal;
	font-weight: bold;
	/*color: navy;*/
	text-align: center;
}

H6.titulo6 {
	display: block;
	padding: 5px 0px  0px 0px;
	font-size: 10pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	text-align: center;
}

H6.section6 {
	display: block;
	padding: 1px 0px  1px 0px;
	font-size: 9pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	/* text-align: center; */
}

.warning {	/* Em uso Projeto BudgetTracker */
	color: red !important;
}

.smallcaps { font-variant: small-caps; }

P {
	margin: 0px 0px  0px 0px;
	padding: 0px 0px  1px 0px;
	font-style: normal;
	color: #5E5E5E;
}

P.std12 {
	font-size: 12pt;
	font-weight: bold;
}

P.std10 {
	font-size: 10pt;
	font-weight: normal;
}

P.bold10 {
	font-size: 10pt;
	font-weight: bold;
}

P.bold10w {
	/*padding: 0px 0px  2px 0px;*/
	font-size: 10pt;
	font-weight: bold;
	color: white;
}

P.std8 {
	font-size: 8pt;
	font-weight: normal;
}

P.std8it {
	font-size: 8pt;
	font-weight: normal;
	font-style: italic;
}

P.std8itw {
	display: inline;
	font-size: 8pt;
	font-weight: normal;
	font-style: italic;
	color: white;
}

P.bold8 {
	/*padding: 2px 0px  2px 0px;*/
	font-size: 8pt;
	font-weight: bold;
}

P.bold8w {
	/*padding: 2px 0px  2px 0px;*/
	font-size: 8pt;
	font-weight: bold;
	color: white;
}

img {
	border: 0;
}

img.img1px {
	border: 1px solid #808080;
}

img.img2px {
	border: 2px solid #808080;
}

img.img3px {
	border: 3px solid #808080;
}
/* END HEADERS and PARAGRAPHS */
/* ############################################################################################# */

/* ############################################################################################# */
/* LOADERS */   /* https://ihatetomatoes.net/create-css3-spinning-preloader/ */

/*  Insert on the page's HEAD:

	<script>
		function stopLoader(id) {
		document.getElementById(id).style.display = 'none';
		document.getElementById(id).style.zIndex = -1;
		}
	</script>

Include onLoad at the body tag:

	<body onload="stopLoader('loader-wrapper');">

Include on the page's body:

	<div id="loader-wrapper">
		<div id="loader"></div>
	</div>
*/

#loader-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}
#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 150px;
	height: 150px;
	margin: -75px 0 0 -75px;
	border-radius: 50%;
	border: 4px solid transparent;
	border-top-color: #800080;
	-webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	animation: spin 2.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 4px solid transparent;
	border-top-color: #008000;
	-webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 4px solid transparent;
	border-top-color: #400080;
	-webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
	animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
	0%   {
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
@keyframes spin {
	0%   {
		-webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(0deg);  /* IE 9 */
		transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
	}
	100% {
		-webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
		-ms-transform: rotate(360deg);  /* IE 9 */
		transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
	}
}
/* LOADERS */   /* https://ihatetomatoes.net/create-css3-spinning-preloader/ */
/* ############################################################################################# */

/* ############################################################################################# */
/* TABLES */

TABLE.bt_login {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	border-collapse:collapse;
	/* border: 1px solid #808080; */
}

TABLE.tmenu	{
	box-sizing:border-box;
	border: 3px solid #808080;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	padding: 3px;
	vertical-align: middle;
	border-collapse:collapse;
	border-spacing: 2px;
	text-align: center;
}

TD.mes {			/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	font-size: 8pt;
	font-weight: bold; color: white;
	background-color: #5E5E5E;			 /* OLD #4682B4 ;	    SteelBlue   */
}

TD.tmenu	{
	box-sizing:border-box;
	border: 3px solid;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	padding: 3px;
	vertical-align: middle;
	border-collapse:collapse;
	text-align: center;
}

TD.tmenu:hover	{
	background-color: #FFFFBB;
}

TD.left_t {
	box-sizing:border-box;
	font-size: 10pt;
	font-style: normal;
	font-weight: normal;
	color: navy;
	text-align: left;
	vertical-align: top;
	padding: 5px 5px  5px 5px;
}

TD.list, .div_list {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	padding-left: 2px;
	font-size: 8pt;
	color: #5E5E5E;
	background-color: transparent;
}

TD.list_inv, .div_list_inv {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	padding-left: 2px;
	font-size: 8pt;
	color: #FFFFFF;
	background-color: #5E5E5E;
}

TD.list_t {
	box-sizing:border-box;
	font-size: 8pt;
	text-align: left;
	vertical-align: top;
	background-color: transparent;
}

THEAD TH, .div_thead  {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	padding: 3px 0px 0px 0px;
	font-size: 9pt;
	font-weight: bold;
	color: white;
	background-color: #5E5E5E ;     /*    Dark Grey   */
}

TFOOT TD, .div_tfoot {
	box-sizing:border-box;
	padding: 0px 0px 2px 7px;
	font-size: 8pt;
	font-weight: bold;
	color: white;
	background-color: #5E5E5E ;     /*    Dark Grey   */ /* OLD VALUE #4682B4 ;     /*    SteelBlue   */
}

.footerneg, .mesneg {
	box-sizing:border-box;
	font-size: 8pt;
	font-weight: bold;
	color: red;
	background-color: #FFE4E1 ;     /*    MistyRose   */
}

.cockpit TD, TH {
	box-sizing:border-box;
	border: 1px ridge #aaaaaa;
}

.click a:link {	/* What this does is display the anchor tag as a block, allowing us to adjust the width, and then set the width to 100%, allowing it to fill the remaining space. */
	display: block;
	width:100%;
}


TR.list:hover {
	background-color: #FFFF00 ;
}

TH.accounting {
	box-sizing:border-box;
	border: 2px solid #808080;
	padding: 3px 0px 0px 0px;
	font-size: 9pt;
	font-weight: bold;
	color: white;
	background-color: #5E5E5E ;     /*    Dark Grey   */
}

TD.accounting {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	/* border-top: 1px solid #808080; */
	border-bottom: 1px solid #808080;
	padding-left: 2px;
	font-size: 8pt;
	color: #5E5E5E;
	background-color: transparent;
}

.pastdue_backgrd { background-color:#ff9999 !important; }

.soondue_backgrd { background-color:#ffff99 !important; }

	/* **************************************************************************************************** */
	/* ****************************** CSS TO SCROLLABLE TABLE ************************************ */	/* Em uso Projeto BudgetTracker */	/* Alternative to be considered in a future date =>> https://medium.com/@vembarrajan/html-css-tricks-scroll-able-table-body-tbody-d23182ae0fbc */
	/* *************************************************************************************************** */
	.scroll {
	  border: 0;
	  border-collapse: collapse;
	  /* margin-left: 10px; */
	 margin-left: auto;
	 margin-right: auto;
	}

	.scroll tr {
	  display: flex;
	}

	.scroll td {
	  padding: 2px;
	  display: block;
	  flex: auto;
	/*  border: 1px solid #aaa; */
	  border-left: 1px solid #aaa;
	  border-top: 1px solid #aaa;
	}

	.scroll thead tr:after {
	  content: '';
	  overflow-y: scroll;
	  visibility: hidden;
	  height: 0;
	}

	.scroll thead th {
	  flex: auto;
	  display: block;
	  padding: 2px;
	/*  border: 1px solid #000; */
	  border-left: 1px solid #aaa;
	  border-top: 1px solid #aaa;
	  background-color: #5E5E5E ;
	}

	.scroll tbody {
	  display: block;
	  width: 100%;
	  overflow-y: auto;
	 /* height: 140px;*/
	}

	.scroll tbody tr:nth-child(odd) {
	   background-color: #FFFFFF;
	}

	.scroll tbody tr:nth-child(odd):hover {
	   background-color: #FFFF00;
	}

	.scroll tbody tr:nth-child(even) {
	   background-color: #DCDCDC;
	}

	.scroll tbody tr:nth-child(even):hover {
	   background-color: #FFFF00;
	}

	.scroll tfoot td {
	  flex: auto;
	  display: block;
	  padding: 1px;
	/*  border: 1px solid #000; */
	  border-left: 1px solid #aaa;
	  border-top: 1px solid #aaa;
	  background-color: #5E5E5E ;
	}

	.scroll tfoot tr:after {
	  content: '';
	  overflow-y: scroll;
	  visibility: hidden;
	  height: 0;
	}

	/* **************************************************************************************************** */
	/* ****************************** END CSS TO SCROLLABLE TABLE ****************************** */
	/* **************************************************************************************************** */

/* END TABLES */
/* ############################################################################################# */

/* ############################################################################################# */
/* CORNERS */

.round_all_20 {
	-webkit-border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	border-radius: 20px 20px 20px 20px;
}

.round_all_15 {
	-webkit-border-radius: 15px 15px 15px 15px;
	-moz-border-radius: 15px 15px 15px 15px;
	border-radius: 15px 15px 15px 15px;
}

.round_all_10 {
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
}

.round_all_05 {
	-webkit-border-radius: 5px 5px 5px 5px;
	-moz-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

.round_bottom_20 {
	-webkit-border-radius: 0px 0px 20px 20px;
	-moz-border-radius: 0px 0px 20px 20px;
	border-radius: 0px 0px 20px 20px;
}

.round_bottom_15 {
	-webkit-border-radius: 0px 0px 15px 15px;
	-moz-border-radius: 0px 0px 15px 15px;
	border-radius: 0px 0px 15px 15px;
}

.round_bottom_10 {
	-webkit-border-radius: 0px 0px 10px 10px;
	-moz-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px;
}

.round_bottom_05 {
	-webkit-border-radius: 0px 0px 5px 5px;
	-moz-border-radius: 0px 0px 5px 5px;
	border-radius: 0px 0px 5px 5px;
}

.round_top_20 {
	-webkit-border-radius: 20px 20px 0px 0px;
	-moz-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
}

.round_top_15 {
	-webkit-border-radius: 15px 15px 0px 0px;
	-moz-border-radius: 15px 15px 0px 0px;
	border-radius: 15px 15px 0px 0px;
}

.round_top_10 {
	-webkit-border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	border-radius: 10px 10px 0px 0px;
}

.round_top_05 {
	-webkit-border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}



/* END CORNERS */
/* ############################################################################################# */

/* ############################################################################################# */
/* DIVS */

.framed1 {
	border: solid 1px #800080;
}

.framed1cima {
	border-top: solid 2px #800080;
	border-right: solid 1px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 1px #800080;
}

.framed1cimaesq {
	border-top: solid 2px #800080;
	border-right: solid 1px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 2px #800080;
}

.framed1cimadir {
	border-top: solid 2px #800080;
	border-right: solid 2px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 1px #800080;
}

.framed1cimaesqdir {
	border-top: solid 2px #800080;
	border-right: solid 2px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 2px #800080;
}

.framed1baixo {
	border-top: solid 1px #800080;
	border-right: solid 1px #800080;
	border-bottom: solid 2px #800080;
	border-left: solid 1px #800080;
}

.framed1baixoesq {
	border-top: solid 1px #800080;
	border-right: solid 1px #800080;
	border-bottom: solid 2px #800080;
	border-left: solid 2px #800080;
}

.framed1baixodir {
	border-top: solid 1px #800080;
	border-right: solid 2px #800080;
	border-bottom: solid 2px #800080;
	border-left: solid 1px #800080;
}

.framed1baixoesqdir {
	border-top: solid 1px #800080;
	border-right: solid 2px #800080;
	border-bottom: solid 2px #800080;
	border-left: solid 2px #800080;
}

.framed1esq {
	border-top: solid 1px #800080;
	border-right: solid 1px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 2px #800080;
}

.framed1dir {
	border-top: solid 1px #800080;
	border-right: solid 2px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 1px #800080;
}

.framed1esqdir {
	border-top: solid 1px #800080;
	border-right: solid 2px #800080;
	border-bottom: solid 1px #800080;
	border-left: solid 2px #800080;
}

.framed2 {
	border: solid 2px #800080;
}

DIV.PageWrapper {	/* Page Wrapper  - Transparente - Wraps All Content on the Page and Positions It on the Screen */
	max-width: 960px;
	box-sizing:border-box;
	display: block;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

DIV.PageWrapper_modal {	/* Page Wrapper  - Transparente - Wraps All Content on the Page and Positions It on the Screen */
	width: 460px;
	box-sizing:border-box;
	display: block;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

DIV.wrapper {	/* Em uso Projeto BudgetTracker */
	max-width: 960px;
	box-sizing:border-box;
	display: block;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

DIV.wrapper650 {	/* Em uso Projeto BudgetTracker */
	max-width: 650px;
	box-sizing:border-box;
	display: block;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

DIV.std {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	display: block;
	/* border: 1px solid #aaaaaa; */
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

DIV.canvas_white_border {	/* Define o "Background" Branco e COM Bordas para uma área da página, como por exemplo o Header ou Títulos ou o Conteúdo */
	max-width: 960px;
	box-sizing:border-box;
	border: 2px solid #4d004d;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	/*display: table;*/
}

DIV.canvas_white {	/* Define o "Background" Branco e SEM Bordas para uma área da página, como por exemplo o Header ou Títulos ou o Conteúdo */
	max-width: 960px;
	box-sizing:border-box;
	/*border: 1px solid #aaaaaa;*/
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	/*display: table;*/
}

DIV.canvas_header_1 {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	background-color: #FFFFFF;
	border: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	padding-bottom: 3px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 3px;
}

DIV.canvas_header_2 {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	/* background-color: #FFFFFF; */
	/* border-top: solid 1px #800080; */
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 3px 7px 0px 0px;
	min-height: 32px;
	text-align: right;
}

DIV.tmenu	{
	/*max-width: 240px;*/
	box-sizing:border-box;
	border: 2px solid #5E5E5E;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	display: table;
	text-align: center;
}

DIV.tmenu:hover	{
	background-color: #FFFFBB;
}

DIV.tmenu_inv	{
	/*max-width: 240px;*/
	box-sizing:border-box;
	border: 2px solid #5E5E5E;
	background-color: #FFFFBB;
	margin-left: auto;
	margin-right: auto;
	display: table;
	text-align: center;
}

DIV.tmenu_inv:hover	{
	background-color: white;
}

DIV.submenu{     /*  Background Dark Grey - Text = red   */	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	border: 2px solid #5E5E5E;
	background-color: #340034;
	font-size: 14pt;
	font-style: normal;
	/*font-weight: bold;*/
	font-variant: small-caps;
	color: White;
	text-align: center;
	display: table;
}

DIV.submenu:hover  {	 /*   Background  Yellow - Text = white   */	/* Em uso Projeto BudgetTracker */
	background-color: #FFFFBB;
	color: #340034;
}

.divfixmid {
	display: table;
}

.fixmiddle {
  display: table-cell;
  vertical-align: middle;
}

/* Format to replicate the original table style */
DIV.bt_login {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	/* border-collapse:collapse; */
	/* border: 1px solid #808080; */
}

DIV.list {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	padding-left: 2px;
	font-size: 8pt;
	color: #5E5E5E;
	background-color: transparent;
}

DIV.list_inv {	/* Em uso Projeto BudgetTracker */
	box-sizing:border-box;
	padding-left: 2px;
	font-size: 8pt;
	color: #FFFFFF;
	background-color: #5E5E5E;
	border: solid 1px white;
}
/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
/* Responsive Tables using CSS without <table> Tag - https://wisdmlabs.com/blog/responsive-tables-using-css-div-tag/  */

.resp-table {						/* <table>  */
	display:table;
	width: 100%;
}

.resp-table-header {				/* <thead>  */
	display: table-header-group;
}

.resp-table-header-cell {				/* <th>  */
	display: table-cell;
	vertical-align: middle;
}

.resp-table-body {					/* <tbody>  */
	display: table-row-group;
}

.resp-table-row {					/* <tr>  */
	display: table-row;
}

.resp-table-body-cell {				/* <td>  */
	display: table-cell;
	vertical-align: top;
}

.resp-table-footer {				/* <tfoot>  */
	display: table-footer-group;
}

.resp-table-footer-cell {				/* <td>  */
	display: table-cell;
	vertical-align: middle;
}
.resp-table-column {				/*  <col> */
	display: table-column;
}

.resp-column-group {			/* <colgroup>  */
	display: table-column-group;
}

.resp-table-caption {			/* <caption>  */
	display: table-caption;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

/* END DIV */
/* ############################################################################################# */

/* ############################################################################################# */
/* FORMS */

label {	/* Em uso Projeto BudgetTracker */
	/*padding: 3px 0px 3px 0px;*/
	display: block;
	font-size: 9pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	background-color: #FFFFFF;
}

label_modal {	/* Em uso Projeto BudgetTracker */
	/*padding: 3px 0px 3px 0px;*/
	display: block;
	font-size: 9pt;
	font-style: normal;
	font-weight: bold;
	color: #5E5E5E;
	background-color: transparent !important;
}

label.list_inv {	/* Em uso Projeto BudgetTracker */
	/*padding: 3px 0px 3px 0px;*/
	display: block;
	font-size: 9pt;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #5E5E5E;
}

label.tmenu_inv { background-color:  #c0c0c0; }

/*	label.tmenu_inv:hover { background-color: #c0c0c0; }	*/

 input[type=text], input[type=number],  input[type=password], input[type=email], textarea, select  {
		/* round the corners */
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	border: 1px solid rgba(119, 136, 153,0.5);
	font-size: 8pt;
	color: #5E5E5E;
	/* color: navy;  */
}

input[type=radio]  {
		/* round the corners
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	border: 1px solid rgba(119, 136, 153,0.5); */
	font-size: 8pt;
	color: #5E5E5E;
	/* color: navy;  */
}

input[type="button"], input[type="reset"], input[type="submit"] {
		box-sizing:border-box;
		background-color: #c0c0c0 ;
		min-width: 70px;
		/* round the corners */
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border-radius: 7px;
		border: 1px solid #5E5E5E;
}

input[type="button"]:hover:enabled, input[type="reset"]:hover:enabled, input[type="submit"]:hover:enabled {
		background-color: #DDDDDD;
		-webkit-box-shadow: 0px 0px 4px #800080;
		-moz-box-shadow: 0px 0px 4px #800080;
		box-shadow: 0px 0px 5px #800080;
		border: 2px solid #5E5E5E;
}

input[type=text]:focus, input[type=number]:focus, textarea:focus, select:focus, input[type=password]:focus, input[type=submit]:focus, input[type=reset]:focus {	/* Em uso Projeto BudgetTracker */
		/* make it glow! */
		-webkit-box-shadow: 0px 0px 4px #800080;
		-moz-box-shadow: 0px 0px 4px #800080;
		box-shadow: 0px 0px 5px #800080;
		border: 1px solid rgba(230, 230, 230, 1);
}

 input[type=text].exemplo {
 	border: none;
	padding:0px;
	margin:0px;
}

:disabled {
    background: #dddddd;
}
/* END FORMS */
/* ############################################################################################# */

/* ############################################################################################# */
/* ANCHORS */

A:link {
	box-sizing:border-box;
	text-decoration: underline;
	color: #0000FF;
	background-color: #FFFFFF;
	margin: 1px;
	padding: 1px;
}

A:visited {
	text-decoration: underline;
	color: #AA0033;
}

A:hover, #newsearch:hover {
	text-decoration: underline overline;
	color: #AA0033;
	background-color: #FFFFAA;

}

[bt_title]:hover:after {
	content: attr(bt_title);
	font-size: 10pt;
	padding: 4px 8px;
	color: #340034;
	position: fixed;
	right: 500px;
	/*bottom: 25;*/
	top: 250px;
	z-index: 20;
	white-space: normal;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px 0px rgba(59,7,59,0.5);
	-webkit-box-shadow: 5px 5px 5px 0px rgba(59,7,59,0.5);
	box-shadow: 5px 5px 5px 0px rgba(59,7,59,0.5);
	background-image: -moz-linear-gradient(180deg,#efefef 0%, #cfb0cf 100%);
	background-image: -webkit-linear-gradient(180deg,#efefef 0%, #cfb0cf 100%);
	background-image: linear-gradient(180deg,#efefef 0%, #cfb0cf 100%);
	background-color: #efefef;
}

A:active {
	text-decoration: underline;
	color: #AA0033;
}

/* Para os casos em que o background precisa ser transparente */
A.transparente:link {
	text-decoration: underline;
	color: #0000FF;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
}

A.transparente:visited {
	text-decoration: underline;
	color: #AA0033;
}

A.transparente:hover {
	text-decoration: underline overline;
	color: #AA0033;
	background-color: transparent;
}

A.transparente:active {
	text-decoration: underline;
	color: #AA0033;
}

A.clickcp:link, A.clickcp:visited  {
	text-decoration: none;
	color: #5E5E5E;
}

A.mini:link {
	box-sizing:border-box;
	display: block;
	margin: 5px 0px 0px 0px;
	/*padding: 3px 0px 3px 0px;*/
	font-size: 8pt;
	text-decoration: underline;
	color: #800080;
}

A.mini:visited {
	box-sizing:border-box;
	display: block;
	/* margin: 5px 0px 5px 0px; */
	/* padding: 3px 0px 3px 0px; */
	font-size: 8pt;
	text-decoration: underline;
	color: #800080;
}

A.mini:hover {
	display: block;
	/*padding: 3px 0px 3px 0px;*/
	text-decoration: underline overline;
	background-color: #FFFFDD;
	color: #FF0000;
}

A.mini:active {
	box-sizing:border-box;
	/*padding: 3px 0px 3px 0px;*/
	color: #AA0033;
}

A.powered:link, A.powered:visited {
	display: inline;
	background-color: transparent;
	text-decoration: underline;
	color: #FFFFFF;
	font-size: 8pt;
	font-weight: normal;
	font-style: italic;
}

#link_menu, #link_refresh, #link_logout, #newsearch {
	font-size: 14pt;
	font-variant: small-caps;
}


/* END ANCHORS */
/* ############################################################################################# */

/* ############################################################################################# */
/* ERROR */
/* Seção de Formatação da página de Erros Genérica */
/* ############################################################################################# */

BODY.bt_errorpage {	/* Em uso Projeto BudgetTracker */
	/* background-image: url(../images/bg_grey_grad2.gif); */
	background-color: #FF9900;
	/* font-size: 10pt; */
	/* font-family: Arial, sans-serif; */
	text-align: center;
	/* color: #5E5E5E; */
}

DIV.ErrorWrapper {	/* Page Wrapper  - Transparente - Wraps All Content on the Page and Positions It on the Screen */
	max-width: 790px;
	box-sizing:border-box;
	display: block;
	background-color: transparent;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

DIV.canvas_error {	/* Em uso Projeto BudgetTracker */
	max-width: 790px;
	box-sizing:border-box;
	/*border: 1px solid #aaaaaa;*/
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
}

A.error:link    {text-decoration: underline; color: #0000FF;}
A.error:visited {text-decoration: underline; color: #800000;}
A.error:hover   {text-decoration: underline overline; color: #008080; background-color: #FFFFDD;}
A.error:active  {text-decoration: underline overline; color: #FF0000;}

TABLE.error	{background-color: #FF8500; margin-left: auto; margin-right: auto;}

/* TD.exformat	{background-color: #FF8500; font-family: Arial; text-align: center; vertical-align: middle;} */

H1.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size: 26pt; font-style: normal; font-weight: bold; color: #FF6600;}	/* Em uso Projeto BudgetTracker */
H2.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size: 22pt; font-style: normal; font-weight: bold; color: #FF6600;}	/* Em uso Projeto BudgetTracker */
H3.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size: 18pt; font-style: normal; font-weight: bold; color: #FF6600;}	/* Em uso Projeto BudgetTracker */
H4.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size: 16pt; font-style: normal; font-weight: bold; color: #FF6600;}	/* Em uso Projeto BudgetTracker */
H5.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size: 12pt; font-style: normal; font-weight: bold; color: #FF6600;}	/* Em uso Projeto BudgetTracker */
H6.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size: 10pt; font-style: normal; font-weight: bold; color: #FF6600;}	/* Em uso Projeto BudgetTracker */

STRONG.error {font-family: 'Arial Black'; margin-bottom: 0px; margin-top: 0px; font-size: 22pt; font-style: normal; font-weight: bold; color: #FF0000;}	/* Em uso Projeto BudgetTracker */

EM.error	{font-family: Arial; margin-bottom: 0px; margin-top: 0px; font-size:16pt; font-style: normal; font-weight: bold; color: #FF0000;}	/* Em uso Projeto BudgetTracker */

/* ############################################################################################# */

/* ############################################################################################# */
/* MODAL */
.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	text-align:justify;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(96,96,96,0.85);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
	max-height: 100%;
	overflow: auto;
	animation: animatezoom 3.6s	/* Not sure it is working */
}

.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	max-width: 900px;
	position: relative;
	margin: 5% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #FFFFFF;
	background: -moz-linear-gradient(#FFFFFF, #ffd5ff);
	background: -webkit-linear-gradient(#FFFFFF, #ffd5ff);
	background: -o-linear-gradient(#FFFFFF, #ffd5ff);
}

A.close, A.close:visited {
	background: #FF0000;
	color: #FFFFFF;
	line-height: 21px;
	position: absolute;
	right: -5px;
	text-align: center;
	top: -5px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

A.close2, A.close2:visited {
	background: #FF0000;
	color: #FFFFFF;
	line-height: 21px;
	position: absolute;
	right: -5px;
	text-align: center;
	bottom: -5px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 13px;
	-moz-border-radius: 13px;
	border-radius: 13px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

A.close:hover { background: #FF00FF; }

/* ############################################################################################# */

/* ############################################################################################# */
/* CSS TOOLTIP */
/* CSS Right Tooltip - https://www.w3schools.com/css/css_tooltip.asp - Ver página para mais informação e opções
Incluir:
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
*/

.tooltip  {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */ /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 185px;
  background-color: #340034;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px;

  /* Position the tooltip - Right Tooltip */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*Right Tooltip*/
.tooltip_right .tooltiptext_right {
  top: -5px;
  left: 110%;
}

/*Left Tooltip*/
.tooltip_left .tooltiptext_left {
  top: -5px;
  right: 110%;
}


/*Top Tooltip*/
.tooltip_top .tooltiptext_top {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}


/*Bottom Tooltip*/
.tooltip_bottom .tooltiptext_bottom {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
}

.tooltiplarge {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; */
}

/* Repete configura��es para gerar uma ToolTip mais larga */
.tooltiplarge .tooltiptextlarge {
  visibility: hidden;
  width: 400px;
  background-color: #340034;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 13;
  top: -5px;
  left: 110%;
}

.tooltiplarge:hover .tooltiptextlarge {
  visibility: visible;
}

/*
Exemplo de uso:

<div class="tooltip">Hover over me
	<span class="tooltiptext">Tooltip text</span>
</div>

*/
/* END CSS TOOLTIP */
/* ############################################################################################# */

/* ############################################################################################# */
/* GENERIC */

/* Responsive Pages */

img.responsive {
    max-width: 100%;
    height: auto;
}

.row::after {content: ""; clear: both; display: table; }
/* these columns should be floating to the left, and have a padding of 2px */
[class*="col_"] { float: left;  padding: 2px;   /* border: 1px solid red; */ }
/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow */

/* For mobile phones: */
[class*="col_"] {
    width: 100%;
}

/* Original Code from https://ecommerce.shopify.com/c/ecommerce-design/t/display-content-on-mobile-or-desktop-only-211885
@media (max-width: 479px) {
  .show-on-desktop, .show-on-tablets, .hide-on-mobile { display: none; }
}
@media (min-width: 480px) and (max-width: 979px) {
  .show-on-desktop, .hide-on-tablets, .show-on-mobile { display: none; }
}
@media (min-width: 980px) {
  .hide-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }
}
*/

/* ============================= */
/* iPhone  Landscape */
@media (min-width: 550px) and (max-width: 599px)  {
	.hide-on-mobile_land { display: none; }
}
/* ============================ =*/

@media  (min-width: 0px) and (max-width: 549px){
	.hide-on-mobile { display: none; }
}

@media (min-width: 550px) and (max-width: 599px) {
	  .show-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {	/* For tablets (portrait mode) */
	  .show-on-desktop, .hide-on-tablets, .show-on-mobile { display: none; }
}
@media (min-width: 900px) {
	  .hide-on-desktop, .show-on-tablets, .show-on-mobile { display: none; }
}

/* For tablets (portrait): */
@media only screen and (min-width: 600px) {
	.col_tablet_meio{width: 1%;}
.col_tablet_1{width: 2%;}
.col_tablet_2{width: 4%;}
.col_tablet_3{width: 6%;}
.col_tablet_4{width: 8%;}
.col_tablet_5{width: 10%;}
.col_tablet_6{width: 12%;}
.col_tablet_7{width: 14%;}
.col_tablet_8{width: 16%;}
.col_tablet_9{width: 18%;}
.col_tablet_10{width: 20%;}
.col_tablet_11{width: 22%;}
.col_tablet_12{width: 24%;}
	.col_tablet_12meio{width: 25%;}
.col_tablet_13{width: 26%;}
.col_tablet_14{width: 28%;}
.col_tablet_15{width: 30%;}
.col_tablet_16{width: 32%;}
.col_tablet_17{width: 34%;}
.col_tablet_18{width: 36%;}
.col_tablet_19{width: 38%;}
.col_tablet_20{width: 40%;}
.col_tablet_21{width: 42%;}
.col_tablet_22{width: 44%;}
.col_tablet_23{width: 46%;}
.col_tablet_24{width: 48%;}
.col_tablet_25{width: 50%;}
.col_tablet_26{width: 52%;}
.col_tablet_27{width: 54%;}
.col_tablet_28{width: 56%;}
.col_tablet_29{width: 58%;}
.col_tablet_30{width: 60%;}
.col_tablet_31{width: 62%;}
.col_tablet_32{width: 64%;}
.col_tablet_33{width: 66%;}
.col_tablet_34{width: 68%;}
.col_tablet_35{width: 70%;}
.col_tablet_36{width: 72%;}
.col_tablet_37{width: 74%;}
.col_tablet_38{width: 76%;}
.col_tablet_39{width: 78%;}
.col_tablet_40{width: 80%;}
.col_tablet_41{width: 82%;}
.col_tablet_42{width: 84%;}
.col_tablet_43{width: 86%;}
.col_tablet_44{width: 88%;}
.col_tablet_45{width: 90%;}
.col_tablet_46{width: 92%;}
.col_tablet_47{width: 94%;}
.col_tablet_48{width: 96%;}
.col_tablet_49{width: 98%;}
.col_tablet_50{width: 100%;}
}

 /* For desktop and tablets (landscape): */
@media only screen and (min-width:900px) {
	.col_pc_meio{width: 1%;}
.col_pc_1{width: 2%;}
.col_pc_2{width: 4%;}
.col_pc_3{width: 6%;}
.col_pc_4{width: 8%;}
.col_pc_5{width: 10%;}
.col_pc_6{width: 12%;}
.col_pc_7{width: 14%;}
.col_pc_8{width: 16%;}
.col_pc_9{width: 18%;}
.col_pc_10{width: 20%;}
.col_pc_11{width: 22%;}
.col_pc_12{width: 24%;}
	.col_pc_12meio{width: 25%;}
.col_pc_13{width:26%;}
.col_pc_14{width:28%;}
.col_pc_15{width:30%;}
.col_pc_16{width:32%;}
.col_pc_17{width:34%;}
.col_pc_18{width:36%;}
.col_pc_19{width:38%;}
.col_pc_20{width:40%;}
.col_pc_21{width:42%;}
.col_pc_22{width:44%;}
.col_pc_23{width:46%;}
.col_pc_24{width:48%;}
.col_pc_25{width:50%;}
.col_pc_26{width:52%;}
.col_pc_27{width:54%;}
.col_pc_28{width:56%;}
.col_pc_29{width:58%;}
.col_pc_30{width:60%;}
.col_pc_31{width:62%;}
.col_pc_32{width:64%;}
.col_pc_33{width:66%;}
.col_pc_34{width:68%;}
.col_pc_35{width:70%;}
.col_pc_36{width:72%;}
.col_pc_37{width:74%;}
.col_pc_38{width:76%;}
.col_pc_39{width:78%;}
.col_pc_40{width:80%;}
.col_pc_41{width:82%;}
.col_pc_42{width:84%;}
.col_pc_43{width:86%;}
.col_pc_44{width:88%;}
.col_pc_45{width:90%;}
.col_pc_46{width:92%;}
.col_pc_47{width:94%;}
.col_pc_48{width:96%;}
.col_pc_49{width:98%;}
	.col_pc_49meio{width:99%;}
.col_pc_50{width:100%;}
}


/* Larguras Fixas */
.w1 {width: 1px;}
.w2 {width: 2px;}
.w3 {width: 3px;}
.w4 {width: 4px;}
.w5 {width: 5px;}
.w10 {width: 10px;}
.w15 {width: 15px;}
.w20 {width: 20px;}
.w25 {width: 25px;}
.w30 {width: 30px;}
.w35 {width: 35px;}
.w40 {width: 40px;}
.w45 {width: 45px;}
.w50 {width: 50px;}
.w55 {width: 55px;}
.w60 {width: 60px;}
.w65 {width: 65px;}
.w70 {width: 70px;}
.w75 {width: 75px;}
.w80 {width: 80px;}   /* 10% */
.w85 {width: 85px;}
.w90 {width: 90px;}
.w95 {width: 95px;}
.w100 {width: 100px;}
	.w105 {width: 105px;}
.w110 {width: 110px;}
.w120 {width: 120px;}
.w130 {width: 130px;}
.w140 {width: 140px;}
.w150 {width: 150px;}
.w160 {width: 160px;}
.w170 {width: 170px;}
.w180 {width: 180px;}   /* 20% */
.w190 {width: 190px;}
.w200 {width: 200px;}
.w210 {width: 210px;}
/*	.w215 {width: 215px;}	*/
.w220 {width: 220px;}   /* 25% */
.w230 {width: 230px;}
.w240 {width: 240px;}
.w250 {width: 250px;}
.w260 {width: 260px;}
.w270 {width: 270px;}
.w280 {width: 280px;}   /* 30% */
.w290 {width: 290px;}
.w300 {width: 300px;}
.w310 {width: 310px;}
.w320 {width: 320px;}
.w330 {width: 330px;}
.w340 {width: 340px;}   /* 40% */
.w350 {width: 350px;}
.w360 {width: 360px;}
.w370 {width: 370px;}
.w380 {width: 380px;}
.w390 {width: 390px;}
.w400 {width: 400px;}
.w410 {width: 410px;}
.w420 {width: 420px;}
.w430 {width: 430px;}   /* 50% */
.w440 {width: 440px;}
.w450 {width: 450px;}
.w460 {width: 460px;}
.w470 {width: 470px;}
.w480 {width: 480px;}
.w490 {width: 490px;}
.w500 {width: 500px;}
.w510 {width: 510px;}
.w520 {width: 520px;}   /* 60% */
.w530 {width: 530px;}
.w540 {width: 540px;}
.w550 {width: 550px;}
.w560 {width: 560px;}
.w570 {width: 570px;}
.w580 {width: 580px;}   /* 70% */
.w590 {width: 590px;}
.w600 {width: 600px;}
.w610 {width: 610px;}
.w620 {width: 620px;}
.w630 {width: 630px;}
.w640 {width: 640px;}   /* 75% */
.w650 {width: 650px;}
.w660 {width: 660px;}
.w670 {width: 670px;}
.w680 {width: 680px;}    /* 80% */
.w690 {width: 690px;}
.w700 {width: 700px;}
.w710 {width: 710px;}
.w720 {width: 720px;}
.w730 {width: 730px;}
.w740 {width: 740px;}
.w750 {width: 750px;}
.w760 {width: 760px;}
.w770 {width: 770px;}
.w780 {width: 780px;}   /* 90% */
.w790 {width: 790px;}
.w800 {width: 800px;}
.w810 {width: 810px;}
.w820 {width: 820px;}
.w830 {width: 830px;}
.w840 {width: 840px;}
.w850 {width: 850px;}
.w860 {width: 860px;}   /* 100% */
.w870 {width: 870px;}
.w880 {width: 880px;}
.w890 {width: 890px;}
.w900 {width: 900px;}
.w910 {width: 910px;}
.w920 {width: 920px;}
.w930 {width: 930px;}
.w940 {width: 940px;}
.w950 {width: 950px;}
.w960 {width: 960px;}
.w970 {width: 970px;}
.w980 {width: 980px;}
.w990 {width: 990px;}
.w1000 {width: 1000px;}

/* Altura */
.h0 {height: 0px;}
.h1 {height: 1px;}
.h2 {height: 2px;}
.h3 {height: 3px;}
.h4 {height: 4px;}
.h5 {height: 5px;}
.h6 {height: 6px;}
.h7 {height: 7px;}
.h8 {height: 8px;}
.h9 {height: 9px;}
.h10 {height: 10px;}
.h11 {height: 11px;}
.h12 {height: 12px;}
.h13 {height: 13px;}
.h14 {height: 14px;}
.h15 {height: 15px;}
.h16 {height: 16px;}
.h17 {height: 17px;}
.h18 {height: 18px;}
.h19 {height: 19px;}
.h20 {height: 20px;}
.h21 {height: 21px;}
.h22 {height: 22px;}
.h23 {height: 23px;}
.h24 {height: 24px;}
.h25 {height: 25px;}
.h30 {height: 30px;}
.h35 {height: 35px;}
.h40 {height: 40px;}
.h45 {height: 45px;}
.h50 {height: 50px;}
.h55 {height: 55px;}
.h60 {height: 60px;}
.h65 {height: 65px;}
.h70 {height: 70px;}
.h75  {height: 75px;}
.h80  {height: 80px;}
.h85  {height: 85px;}
.h90  {height: 90px;}
.h95  {height: 95px;}
.h100 {height: 100px;}
.h105 {height: 105px;}
.h110 {height: 110px;}
.h115 {height: 115px;}
.h120 {height: 120px;}
.h125 {height: 125px;}
.h130 {height: 130px;}
.h135 {height: 135px;}
.h140 {height: 140px;}
.h145 {height: 145px;}
.h150 {height: 150px;}
.h155 {height: 155px;}
.h160 {height: 160px;}
.h165 {height: 165px;}
.h170 {height: 170px;}
.h175 {height: 175px;}
.h180 {height: 180px;}
.h185 {height: 185px;}
.h190 {height: 190px;}
.h195 {height: 195px;}
.h200 {height: 200px;}
.h205 {height: 205px;}
.h210 {height: 210px;}
.h215 {height: 215px;}
.h220 {height: 220px;}
.h225 {height: 225px;}
.h230 {height: 230px;}
.h235 {height: 235px;}
.h240 {height: 240px;}
.h245 {height: 245px;}
.h250 {height: 250px;}
.h255 {height: 255px;}
.h260 {height: 260px;}
.h265 {height: 265px;}
.h270 {height: 270px;}
.h275 {height: 275px;}
.h280 {height: 280px;}
.h285 {height: 285px;}
.h290 {height: 290px;}
.h295 {height: 295px;}
.h300 {height: 300px;}
.h305 {height: 305px;}
.h310 {height: 310px;}
.h315 {height: 315px;}
.h320 {height: 320px;}
.h325 {height: 325px;}
.h330 {height: 330px;}
.h335 {height: 335px;}
.h340 {height: 340px;}
.h345 {height: 345px;}
.h350 {height: 350px;}
.h355 {height: 355px;}
.h360 {height: 360px;}
.h365 {height: 365px;}
.h370 {height: 370px;}
.h375 {height: 375px;}
.h380 {height: 380px;}
.h385 {height: 385px;}
.h390 {height: 390px;}
.h395 {height: 395px;}
.h400 {height: 400px;}
.h405 {height: 405px;}
.h410 {height: 410px;}
.h415 {height: 415px;}
.h420 {height: 420px;}
.h425 {height: 425px;}
.h430 {height: 430px;}
.h435 {height: 435px;}
.h440 {height: 440px;}
.h445 {height: 445px;}
.h450 {height: 450px;}
.h455 {height: 455px;}
.h460 {height: 460px;}
.h465 {height: 465px;}
.h470 {height: 470px;}
.h475 {height: 475px;}
.h480 {height: 480px;}
.h485 {height: 485px;}
.h490 {height: 490px;}
.h495 {height: 495px;}
.h500 {height: 500px;}
.h550 {height: 550px;}
.h600 {height: 600px;}
.h650 {height: 650px;}
.h700 {height: 700px;}
.h750 {height: 750px;}
.h800 {height: 800px;}
/* END GENERIC */
/* ############################################################################################# */
/* Altura M�nima */
.minh0 {min-height: 0px;}
.minh1 {min-height: 1px;}
.minh2 {min-height: 2px;}
.minh3 {min-height: 3px;}
.minh4 {min-height: 4px;}
.minh5 {min-height: 5px;}
.minh6 {min-height: 6px;}
.minh7 {min-height: 7px;}
.minh8 {min-height: 8px;}
.minh9 {min-height: 9px;}
.minh10 {min-height: 10px;}
.minh11 {min-height: 11px;}
.minh12 {min-height: 12px;}
.minh13 {min-height: 13px;}
.minh14 {min-height: 14px;}
.minh15 {min-height: 15px;}
.minh16 {min-height: 16px;}
.minh17 {min-height: 17px;}
.minh18 {min-height: 18px;}
.minh19 {min-height: 19px;}
.minh20 {min-height: 20px;}
.minh21 {min-height: 21px;}
.minh22 {min-height: 22px;}
.minh23 {min-height: 23px;}
.minh24 {min-height: 24px;}
.minh25 {min-height: 25px;}
.minh30 {min-height: 30px;}
.minh35 {min-height: 35px;}
.minh40 {min-height: 40px;}
.minh45 {min-height: 45px;}
.minh50 {min-height: 50px;}
.minh55 {min-height: 55px;}
.minh60 {min-height: 60px;}
.minh65 {min-height: 65px;}
.minh70 {min-height: 70px;}
.minh75  {min-height: 75px;}
.minh80  {min-height: 80px;}
.minh85  {min-height: 85px;}
.minh90  {min-height: 90px;}
.minh95  {min-height: 95px;}
.minh100 {min-height: 100px;}
.minh105 {min-height: 105px;}
.minh110 {min-height: 110px;}
.minh115 {min-height: 115px;}
.minh120 {min-height: 120px;}
.minh125 {min-height: 125px;}


/* ############################################################################################# */

/* Larguras M�ximas */
.maxw1 {max-width: 1px;}
.maxw2 {max-width: 2px;}
.maxw3 {max-width: 3px;}
.maxw4 {max-width: 4px;}
.maxw5 {max-width: 5px;}
.maxw10 {max-width: 10px;}
.maxw20 {max-width: 20px;}
.maxw30 {max-width: 30px;}
.maxw40 {max-width: 40px;}
.maxw50 {max-width: 50px;}
.maxw60 {max-width: 60px;}
.maxw70 {max-width: 70px;}
.maxw80 {max-width: 80px;}   /* 10% */
.maxw90 {max-width: 90px;}
.maxw100 {max-width: 100px;}
	.maxw105 {max-width: 105px;}
.maxw110 {max-width: 110px;}
.maxw120 {max-width: 120px;}
.maxw130 {max-width: 130px;}
.maxw140 {max-width: 140px;}
.maxw150 {max-width: 150px;}
.maxw160 {max-width: 160px;}
.maxw170 {max-width: 170px;}
.maxw180 {max-width: 180px;}   /* 20% */
.maxw190 {max-width: 190px;}
.maxw200 {max-width: 200px;}
.maxw210 {max-width: 210px;}
/*	.maxw215 {max-width: 215px;}	*/
.maxw220 {max-width: 220px;}   /* 25% */
.maxw230 {max-width: 230px;}
.maxw240 {max-width: 240px;}
.maxw250 {max-width: 250px;}
.maxw260 {max-width: 260px;}
.maxw270 {max-width: 270px;}
.maxw280 {max-width: 280px;}   /* 30% */
.maxw290 {max-width: 290px;}
.maxw300 {max-width: 300px;}
.maxw310 {max-width: 310px;}
.maxw320 {max-width: 320px;}
.maxw330 {max-width: 330px;}
.maxw340 {max-width: 340px;}   /* 40% */
.maxw350 {max-width: 350px;}
.maxw360 {max-width: 360px;}
.maxw370 {max-width: 370px;}
.maxw380 {max-width: 380px;}
.maxw390 {max-width: 390px;}
.maxw400 {max-width: 400px;}
.maxw410 {max-width: 410px;}
.maxw420 {max-width: 420px;}
.maxw430 {max-width: 430px;}   /* 50% */
.maxw440 {max-width: 440px;}
.maxw450 {max-width: 450px;}
.maxw460 {max-width: 460px;}
.maxw470 {max-width: 470px;}
.maxw480 {max-width: 480px;}
.maxw490 {max-width: 490px;}
.maxw500 {max-width: 500px;}
.maxw510 {max-width: 510px;}
.maxw520 {max-width: 520px;}   /* 60% */
.maxw530 {max-width: 530px;}
.maxw540 {max-width: 540px;}
.maxw550 {max-width: 550px;}
.maxw560 {max-width: 560px;}
.maxw570 {max-width: 570px;}
.maxw580 {max-width: 580px;}   /* 70% */
.maxw590 {max-width: 590px;}
.maxw600 {max-width: 600px;}
.maxw610 {max-width: 610px;}
.maxw620 {max-width: 620px;}
.maxw630 {max-width: 630px;}
.maxw640 {max-width: 640px;}   /* 75% */
.maxw650 {max-width: 650px;}
.maxw660 {max-width: 660px;}
.maxw670 {max-width: 670px;}
.maxw680 {max-width: 680px;}    /* 80% */
.maxw690 {max-width: 690px;}
.maxw700 {max-width: 700px;}
.maxw710 {max-width: 710px;}
.maxw720 {max-width: 720px;}
.maxw730 {max-width: 730px;}
.maxw740 {max-width: 740px;}
.maxw750 {max-width: 750px;}
.maxw760 {max-width: 760px;}
.maxw770 {max-width: 770px;}
.maxw780 {max-width: 780px;}   /* 90% */
.maxw790 {max-width: 790px;}
.maxw800 {max-width: 800px;}
.maxw810 {max-width: 810px;}
.maxw820 {max-width: 820px;}
.maxw830 {max-width: 830px;}
.maxw840 {max-width: 840px;}
.maxw850 {max-width: 850px;}
.maxw860 {max-width: 860px;}   /* 100% */
.maxw870 {max-width: 870px;}
.maxw880 {max-width: 880px;}
.maxw890 {max-width: 890px;}
.maxw900 {max-width: 900px;}
.maxw910 {max-width: 910px;}
.maxw920 {max-width: 920px;}
.maxw930 {max-width: 930px;}
.maxw940 {max-width: 940px;}
.maxw950 {max-width: 950px;}
.maxw960 {max-width: 960px;}
.maxw970 {max-width: 970px;}
.maxw980 {max-width: 980px;}
.maxw990 {max-width: 990px;}
.maxw1000 {max-width: 1000px;}

/* Larguras M�nimas */
.minw1 {min-width: 1px;}
.minw2 {min-width: 2px;}
.minw3 {min-width: 3px;}
.minw4 {min-width: 4px;}
.minw5 {min-width: 5px;}
.minw10 {min-width: 10px;}
.minw20 {min-width: 20px;}
.minw30 {min-width: 30px;}
.minw40 {min-width: 40px;}
.minw50 {min-width: 50px;}
.minw60 {min-width: 60px;}
.minw70 {min-width: 70px;}
.minw80 {min-width: 80px;}   /* 10% */
.minw90 {min-width: 90px;}
.minw100 {min-width: 100px;}
	.minw105 {min-width: 105px;}
.minw110 {min-width: 110px;}
.minw120 {min-width: 120px;}
.minw130 {min-width: 130px;}
.minw140 {min-width: 140px;}
.minw150 {min-width: 150px;}
.minw160 {min-width: 160px;}
.minw170 {min-width: 170px;}
.minw180 {min-width: 180px;}   /* 20% */
.minw190 {min-width: 190px;}
.minw200 {min-width: 200px;}
.minw210 {min-width: 210px;}
/*	.minw215 {min-width: 215px;}	*/
.minw220 {min-width: 220px;}   /* 25% */
.minw230 {min-width: 230px;}
.minw240 {min-width: 240px;}
.minw250 {min-width: 250px;}
.minw260 {min-width: 260px;}
.minw270 {min-width: 270px;}
.minw280 {min-width: 280px;}   /* 30% */
.minw290 {min-width: 290px;}
.minw300 {min-width: 300px;}
.minw310 {min-width: 310px;}
.minw320 {min-width: 320px;}
.minw330 {min-width: 330px;}
.minw340 {min-width: 340px;}   /* 40% */
.minw350 {min-width: 350px;}
.minw360 {min-width: 360px;}
.minw370 {min-width: 370px;}
.minw380 {min-width: 380px;}
.minw390 {min-width: 390px;}
.minw400 {min-width: 400px;}
.minw410 {min-width: 410px;}
.minw420 {min-width: 420px;}
.minw430 {min-width: 430px;}   /* 50% */
.minw440 {min-width: 440px;}
.minw450 {min-width: 450px;}
.minw460 {min-width: 460px;}
.minw470 {min-width: 470px;}
.minw480 {min-width: 480px;}
.minw490 {min-width: 490px;}
.minw500 {min-width: 500px;}
.minw510 {min-width: 510px;}
.minw520 {min-width: 520px;}   /* 60% */
.minw530 {min-width: 530px;}
.minw540 {min-width: 540px;}
.minw550 {min-width: 550px;}
.minw560 {min-width: 560px;}
.minw570 {min-width: 570px;}
.minw580 {min-width: 580px;}   /* 70% */
.minw590 {min-width: 590px;}
.minw600 {min-width: 600px;}
.minw610 {min-width: 610px;}
.minw620 {min-width: 620px;}
.minw630 {min-width: 630px;}
.minw640 {min-width: 640px;}   /* 75% */
.minw650 {min-width: 650px;}
.minw660 {min-width: 660px;}
.minw670 {min-width: 670px;}
.minw680 {min-width: 680px;}    /* 80% */
.minw690 {min-width: 690px;}
.minw700 {min-width: 700px;}
.minw710 {min-width: 710px;}
.minw720 {min-width: 720px;}
.minw730 {min-width: 730px;}
.minw740 {min-width: 740px;}
.minw750 {min-width: 750px;}
.minw760 {min-width: 760px;}
.minw770 {min-width: 770px;}
.minw780 {min-width: 780px;}   /* 90% */
.minw790 {min-width: 790px;}
.minw800 {min-width: 800px;}
.minw810 {min-width: 810px;}
.minw820 {min-width: 820px;}
.minw830 {min-width: 830px;}
.minw840 {min-width: 840px;}
.minw850 {min-width: 850px;}
.minw860 {min-width: 860px;}   /* 100% */
.minw870 {min-width: 870px;}
.minw880 {min-width: 880px;}
.minw890 {min-width: 890px;}
.minw900 {min-width: 900px;}
.minw910 {min-width: 910px;}
.minw920 {min-width: 920px;}
.minw930 {min-width: 930px;}
.minw940 {min-width: 940px;}
.minw950 {min-width: 950px;}
.minw960 {min-width: 960px;}
.minw970 {min-width: 970px;}
.minw980 {min-width: 980px;}
.minw990 {min-width: 990px;}
.minw1000 {min-width: 1000px;}

/*** Styles added to fix the issue with zoom in on iphone ***/
/* iPhone < 5: */
@media screen and (device-aspect-ratio: 2/3) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 16px; }

	#picker {width: 180px;}	/* DIV frame */
	#exp_data {width: 140px;}	/* input field */
	#valor {width: 160px;}	/* DIV frame */
	#exp_amount {width: 150px;}	/* input field */
	#who_paid {width: 200px;}	/* DIV frame */
	#pmt_by {width: 210px;}	/* input field */
	#metodo {width: 200px;}	/* DIV frame */
	#pmt_met {width: 210px;}	/* input field */
	#fx_rate {width: 120px;}	/* DIV frame */
}

/* iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 16px; }

	#picker {width: 180px;}	/* DIV frame */
	#exp_data {width: 140px;}	/* input field */
	#valor {width: 160px;}	/* DIV frame */
	#exp_amount {width: 150px;}	/* input field */
	#who_paid {width: 200px;}	/* DIV frame */
	#pmt_by {width: 210px;}	/* input field */
	#metodo {width: 200px;}	/* DIV frame */
	#pmt_met {width: 210px;}	/* input field */
	#fx_rate {width: 120px;}	/* DIV frame */
}

/* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */
@media screen and (device-aspect-ratio: 375/667) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 16px; }

	#picker {width: 180px;}	/* DIV frame */
	#exp_data {width: 140px;}	/* input field */
	#valor {width: 160px;}	/* DIV frame */
	#exp_amount {width: 150px;}	/* input field */
	#who_paid {width: 200px;}	/* DIV frame */
	#pmt_by {width: 210px;}	/* input field */
	#metodo {width: 200px;}	/* DIV frame */
	#pmt_met {width: 210px;}	/* input field */
	#fx_rate {width: 120px;}	/* DIV frame */
}

/* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */
@media screen and (device-aspect-ratio: 9/16) {
	select, textarea, input[type="text"], input[type="password"],
	input[type="datetime"], input[type="datetime-local"],
	input[type="date"], input[type="month"], input[type="time"],
	input[type="week"], input[type="number"], input[type="email"],
	input[type="url"]{ font-size: 16px; }

	#picker {width: 180px;}	/* DIV frame */
	#exp_data {width: 140px;}	/* input field */
	#valor {width: 160px;}	/* DIV frame */
	#exp_amount {width: 150px;}	/* input field */
	#who_paid {width: 200px;}	/* DIV frame */
	#pmt_by {width: 210px;}	/* input field */
	#metodo {width: 200px;}	/* DIV frame */
	#pmt_met {width: 210px;}	/* input field */
	#fx_rate {width: 120px;}	/* DIV frame */
}
/*** Styles added to fix the issue with zoom in on iphone ***/

/* Overlay Text/Image on top of another */
/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 70px;
    left: 250px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}

/* Bottom right text */
.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Top center text - Site Update Page*/
.top-center {
	position: absolute;
	top: 5%;
	left: 15%;
	transform: translate(-5%, -15%);
}
/* Overlay Text/Image on top of another */