body {
	/*--xwhite: #ffffff;*/
	--xwhite: #ffffff;
	--xgainsboro: Gainsboro;
	/*--xgainsboro: #d2fcff;*/
	--xsilver: Silver;
	--xgray: Gray;
	/*--xdarkgray: #414041;*/
	--xdarkgray: #202020;
	--xblack: #000000;
	--xblue: #3a6596;
	--xmaroon: #a03228;
	/*--xseal: #467b84;*/
	--xseal: #000000;
	--azulprem: #0c0a28;
	background-color: var(--azulprem);
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
	margin: 4px;
	font-size: 14px;
	color: var(--xdarkgray);
	user-select: none;
}

/* Clase para que un elemento (como una imagen en medio de un texto) */
/* quede alineado exactamente en la linea media de los otros */
.centrosalineados {
	vertical-align: middle;
}

/* Clase para imagen icono con efecto hover */
.beatingicon {
	transition: 0.25s linear;
}

/* Animación de la miniatura */
.beatingicon:hover {
	transform: scale(1.25);
	filter: drop-shadow(0.2em 0.2em 0.1em rgba(20, 20, 20, 0.4));
}

/* Clase para íconos de barra de herramientas en ModalWin */
.buttonimage {
	height: 28px;
	width: auto;
}

/* Clase para íconos de barra de herramientas en ModalWin */
.tableimage {
	height: 20px;
	width: auto;
}

.username {
	color: var(--azulprem);
	font-weight: bold;
	background-color: var(--xgainsboro);
	border-radius: 0.4em;
	padding: 0.4em;
}

@media (max-width: 1023px) and (min-width: 480px) {
	body {
		font-size: 16px;
	}
}

@media (max-width: 479px) {
	body {
		font-size: 18px;
	}
}

header {
	background-color: var(--azulprem);
	text-align: left;
}

#menu-icon {
	position: fixed;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

@media (max-width: 1023px) {
	#menu-icon {
		display: block;
	}
}

@media (min-width: 1024px) {
	#menu-icon {
		display: none;
	}
}

.homebody {
	background-color: var(--xblack);
	background-image: url(img/home2.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-x: center;
	background-position-y: center;
}

.cotiform {
	text-align: center;
	box-shadow: 0px 0px 1em #303030;
}

h1 {
	font-size: 2em;
	color: var(--xwhite);
	background-color: var(--xdarkgray);
	padding: 0.25em;
	border-radius: 0em;
	box-shadow: 0em 0em 0.1em var(--xdarkgray);
}

#modalwin h1 {
	border-radius: 0.25em;
	background-image: linear-gradient(
		to right,
		var(--xblue),
		var(--xdarkgray) 60%
	);
}

.loginform {
	background-color: rgba(200, 200, 200, 0.75);
	border: 1px solid var(--xgray);
	height: auto;
	width: 30vw;
	border-radius: 0.5em;
	margin: 40vh auto 35vh auto;
	padding: 5% 10% 5%;
}

@media (max-width: 799px) {
	.loginform {
		height: auto;
		width: auto;
		padding: 2%;
		margin: 35vh auto;
	}
}

input[type="button"] {
	cursor: pointer;
}

div[class="loginform"] input {
	font-size: 1.2em;
	border-radius: 0.3em;
	padding: 0.3em;
	margin-bottom: 0.3em;
	border: 1px solid var(--xblue);
}

div[class="loginform"] input[type="button"]:enabled {
	background-color: var(--xblue);
	color: var(--xwhite);
}

div[class="loginform"] input[type="button"]:disabled {
	background-color: var(--xgray);
	color: var(--xblack);
}

.toolbar {
	align-items: center;
	padding: 0.5em;
	border: 1px solid var(--xsilver);
	border-radius: 0.3em;
	margin-bottom: 0.5em;
	box-shadow: 0em 0em 0.2em var(--xgray);
	background: var(--xwhite) url("img/trama.jpg") no-repeat left center;
	background-size: auto;
}

.toolbar button {
	height: 32px;
	width: auto;
	border-radius: 0.5em;
	border: 1px solid silver;
	background-color: var(--xwhite);
	cursor: pointer;
}

@media (min-width: 800px) {
	div[class="toolbar"] br {
		display: none;
	}
}

@media (max-width: 799px) and (min-width: 480px) {
	div[class="toolbar"] br[id="filterbr"] {
		display: none;
	}

	div[class="toolbar"] br[id="paginabr"] {
		display: block;
	}
}

@media (max-width: 479px) {
	div[class="toolbar"] br {
		display: block;
	}
}

#grdMain {
	width: 100%;
	overflow: auto;
	border-bottom: 1px solid var(--xgray);
}

#grdmaingrid td {
	padding: 0.3em 0.3em;
	border: none;
}

#grdmaingrid {
	width: 100%;
	border: none;
	border-collapse: collapse;
}

#grdmaingrid tr:nth-child(1n) {
	background-color: var(--xwhite);
}

#grdmaingrid tr:nth-child(2n) {
	background-color: var(--xgainsboro);
}

#grdmaingrid tr:first-child {
	text-align: center;
}

div[id="modalwin"] label {
	display: inline-block;
	width: 15em;
	font-weight: bold;
	color: var(--xblack);
}

h1 img {
	vertical-align: middle;
	margin-left: 16px;
	/* border-radius: 50%;
	box-shadow: 0px 0px 3px 2px var(--xwhite); */
}

.imgfit {
	border-radius: 0;
	clear: both;
	width: auto;
	max-width: 100%;
}

@media (min-width: 800px) {
	.imgfit {
		max-width: 100%;
		height: auto;
	}
}

@media (max-width: 799px) and (min-width: 480px) {
	.imgfit {
		max-height: 30%;
		width: auto;
	}
}

@media (max-width: 479px) {
	.imgfit {
		max-height: 15%;
		width: auto;
	}
}

@media (min-width: 800px) {
	div[id="modalwin"] label {
		text-align: right;
		margin-right: 1em;
	}

	.br799 {
		display: none;
	}
}

@media (max-width: 799px) {
	div[id="modalwin"] label {
		text-align: left;
	}

	.br799 {
		display: block;
	}
}

div[id="modalwin"] input,
select {
	padding: 0.15em 0.25em;
	border-radius: 0.2em;
	margin-bottom: 0.25em;
	border: 1px solid var(--xseal);
	font-size: 1.2em;
	color: #444746;
}

div[id="modalwin"] select:disabled {
	color: var(--xwhite);
	background-color: var(--xdarkgray);
}

div[id="modalwin"] input:read-only {
	color: var(--xwhite);
	background-color: var(--xdarkgray);
}

#major {
	position: absolute;
	width: 99%;
}

#modalmask {
	position: fixed;
	z-index: 1000;
	background-color: None;
	background-image: url(img/mask.png);
	display: none;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
}

#modalwin {
	position: fixed;
	top: 10vh;
	left: 10vw;
	z-index: 1001;
	background-color: var(--xwhite);
	background-image: none;
	background-repeat: repeat;
	display: none;
	padding: 0.25em;
	border-radius: 0.7em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
	overflow: auto;
	height: 80vh;
	width: 80vw;
}

@media (max-width: 799px) {
	#modalwin {
		top: 0;
		left: 0;
		height: 98vh;
		width: 98vw;
	}
}

@media (min-width: 800px) {
	#helppage {
		margin: 0em 5em;
		font-size: 1.5em;
		font-family:
			system-ui,
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			Roboto,
			Oxygen,
			Ubuntu,
			Cantarell,
			"Open Sans",
			"Helvetica Neue",
			sans-serif;
	}
}

@media (max-width: 799px) {
	#helppage {
		margin-left: 0em;
		font-size: 1.2em;
		font-family:
			system-ui,
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			Roboto,
			Oxygen,
			Ubuntu,
			Cantarell,
			"Open Sans",
			"Helvetica Neue",
			sans-serif;
	}
}

#helppage a:link,
a:visited {
	text-decoration: none;
	color: var(--xseal);
	background-color: var(--xwhite);
	padding: 0em 0.3em;
	border: 1px solid var(--xseal);
	border-radius: 0.25em;
}

#helppage a:hover {
	text-decoration: none;
	color: var(--xwhite);
	background-color: var(--xmaroon);
	padding: 0em 0.3em;
	border: 1px solid var(--xmaroon);
	border-radius: 0.25em;
}

#helppage p,
h2 {
	line-height: 1.5em;
	color: var(--xgainsboro);
}

#helppage h3 {
	line-height: 1.5em;
	color: rgb(148, 148, 255);
}

#helppage h4 {
	line-height: 1.5em;
	color: palegreen;
}

footer {
	padding: 2em;
	border-radius: 1em 1em 0 0;
	background-color: var(--azulprem);
	/*background-image: linear-gradient(to right, var(--xblack), var(--xseal));*/
	color: var(--xwhite);
}

footer a:link {
	color: var(--xwhite);
	text-decoration: none;
}

footer a:visited {
	color: var(--xwhite);
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

nav {
	display: flex;
	padding: 0.5em;
	border-top: 1px solid var(--xseal);
	border-bottom: 1px solid var(--xseal);
	/*text-align: left;*/
	font-weight: bold;
	background-color: var(--azulprem);
}

@media (min-width: 1024px) {
	nav {
		visibility: visible;
		flex-direction: row;
		overflow-y: none;
	}
}

@media (max-width: 1023px) {
	nav {
		visibility: hidden;
		flex-direction: column;
		position: fixed;
		width: 30%;
		max-width: 320px;
		min-width: 170px;
		height: 100vw;
		right: 0px;
		overflow-y: scroll;
	}
}

nav a:link {
	color: var(--xwhite);
	text-decoration: none;
	padding: 0.5em;
}

nav a:visited {
	color: var(--xwhite);
	text-decoration: none;
	padding: 0.5em;
}

nav a:hover {
	color: var(--xwhite);
	font-weight: bold;
}

.cotiform {
	background-color: rgba(200, 200, 200, 0.75);
	/*border: 1px solid var(--xgray);*/
	height: auto;
	width: 30vw;
	border-radius: 0.75em;
	margin: 0 auto 0 auto;
	padding: 5% 10% 5%;
}

@media (max-width: 799px) {
	.cotiform {
		height: auto;
		width: auto;
		padding: 2%;
		margin: 0 auto;
	}
}

div[class="cotiform"] input {
	font-size: 1em;
	border-radius: 0.3em;
	padding: 0.3em;
	margin-bottom: 0.3em;
	border: 1px solid var(--xblue);
}

div[class="cotiform"] select {
	font-size: 1em;
	border-radius: 0.3em;
	padding: 0.3em;
	margin-bottom: 0.3em;
	border: 1px solid var(--xblue);
}

div[class="cotiform"] input[type="button"]:enabled {
	background-color: var(--xblue);
	color: var(--xwhite);
}

div[class="cotiform"] input[type="button"]:disabled {
	background-color: var(--xgray);
	color: var(--xblack);
}

.formula {
	height: auto;
	width: 45vw;
	border-radius: 0.5em;
	border: 2px solid gray;
	margin: 2em auto 0 auto;
	padding: 2%;
	overflow: auto;
	background-image: url("img/hexagons.jpg");
}

@media (max-width: 799px) {
	.formula {
		height: auto;
		width: auto;
		padding: 2%;
		margin: 0 auto;
	}
}

.formula table {
	font-size: 1em;
	font-weight: bold;
	border-radius: 0.3em;
	padding: 0.3em;
	margin-bottom: 0.3em;
	border: 1px solid var(--xblack);
	width: 100%;
	color: var(--xblack);
	border-collapse: collapse;
}

.formula table td {
	padding: 0.5em 1em;
	font-weight: bold;
	text-align: center;
	border: 1px solid var(--xblack);
	width: 50%;
}

.formulaheader {
	background-color: var(--xblack);
	color: var(--xwhite);
}

div[class="cotiform"] h3 {
	color: var(--xwhite);
	background-color: var(--xblack);
	padding: 0.5em;
	border-radius: 0.5em;
}

.color_sample_code {
	font-size: 3em;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
	margin-top: 0.3em;
	margin-bottom: 0;
	border-top: 4px solid;
}

.color_sample_name {
	font-size: 2em;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;
	margin-top: 0;
	margin-bottom: 0.3em;
	border-bottom: 4px solid;
}

.sel_fc {
	background-color: #ffffff;
	color: black;
	font-weight: normal;
}

.sel_rp {
	background-color: #40c4c2;
	color: black;
	font-weight: normal;
}

.sel_fo {
	background-color: #bc578e;
	color: black;
	font-weight: normal;
}

.sel_du {
	background-color: #9fce71;
	color: black;
	font-weight: normal;
}

.sel_pt {
	background-color: #fedd44;
	color: black;
	font-weight: normal;
}

/* Sector de información de dólar */

.notifhome {
	font-size: 0.8em;
}

.zonausdtitle {
	background-color: transparent;
	color: darkolivegreen;
	padding: 0 0.25em;
}

.zonausd {
	background-color: transparent;
	color: olivedrab;
	padding: 0 0.25em;
}

/*.formula table tr td:nth-child(2n) {
    text-align: right;
}

.formula table tr td:nth-child(3n) {
    text-align: right;
}

.formula table tr:nth-child(2n) {
    background-color: var(--xgainsboro);
}

.formula table tr:first-child {
    font-weight: bold;
    text-align: center;
    background-color: var(--xmaroon);
    color: var(--xwhite);
}

.formula table tr:last-child {
    font-weight: bold;
    text-align: left;
    background-color: var(--xmaroon);
    color: var(--xwhite);
}*/