/* Bordered form */
form {
	border: 3px solid #f1f1f1;
	width: auto;
	margin: auto;
	background: white;
	color: black;
}

h1.UpDown {
	margin-top: 3px;
	margin-bottom: 3px;
}

box {
	/*display: flex;
	flex-wrap: wrap;
	gap: 5px 5px;*/
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 5px 0;
	align-items: center;
}

.box2ActivaPremios {
	display: grid;
	grid-template-columns: 15% 85%;
	margin: 5px;
	align-items: center;
}

.box30-60-Prcnt {
	grid-template-columns: 1fr 2fr;
	align-items: flex-start;
}

.box4 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: 5px;
	align-items: center;
}

.box5 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	margin: 5px;
	align-items: center;
}

box div {
	margin: 3px;
}

.selectWide {
	width: 90%;
}

textarea {
	width: 99%;
	margin: 5px 0
}

	textarea.AngostoCierre {
		width: 70%;
	}

div.DivDrawlist {
	margin-top: 3px;
	width: 620px;
	height: 485px;
	border: 2px groove black;
	float: left;
}

div.DivDrawform {
	margin-top: 3px;
	width: 700px;
	height: 485px;
	border-left: 2px groove black;
	float: right;
}

.ButtonSpan {
	text-decoration: none;
	color: initial;
}

div.google-table-tooltip {
	display: none;
	box-shadow: 0 0 6px 2px #000000;
	background: linear-gradient( 168deg, whitesmoke, #989898);
	font-size: 16px;
	padding: 2px 7px 2px 7px;
	border-color: white;
	font-family: Raleway;
	position: absolute;
	width: auto;
	height: auto;
	/*color: #000000;*/
	color: white;
	text-align: center;
	vertical-align: middle;
	border: black;
	border-width: medium;
	border-radius: 7px;
}

.HoverLink {
	text-decoration: underline;
	color: #005aff;
}

.tooltip {
	position: relative;
	display: inline-block;
}

	.tooltip .tooltiptext {
		visibility: hidden;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		position: absolute;
		z-index: 1;
		top: -5px;
		left: 105%;
		white-space: nowrap;
		padding: 5px;
		font-size: small;
		margin: 3px;
	}

	.tooltip:hover .tooltiptext {
		visibility: visible;
	}

.tooltip2 {
	display: block;
	position: relative;
}

	.tooltip2 .tooltiptext2 {
		visibility: hidden;
		width: 300px;
		background-color: black;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px 0;
		/* Position the tooltip */
		position: absolute;
		z-index: 1;
		left: 50px;
		top: 18px;
		font-size: 14px;
		padding: 5px;
		border-radius: 5px;
	}

	.tooltip2:hover .tooltiptext2 {
		visibility: visible;
	}

.DisplayNone {
	display: none;
}

.Tabla {
	border: 3px solid #f1f1f1;
	width: auto;
	margin: auto;
	background: white;
	color: black;
}

.Td .AlCentro {
}


/*.ButtonGroup {*/
/*flex-direction: column;
	display: flex;*/
/*}*/

.FullHeightTable {
	min-width: 130px;
}

.LoginForm {
	max-width: 500px;
}

.StandardForm {
	max-width: 100%;
}

label.check {
	font-weight: 600;
	margin-left: 2px;
}

label.MenuButton {
	margin: 5px;
}

label {
	font-weight: 600;
}

.marginleft Label {
	margin-left: 50px;
}

.marginright Label {
	margin-right: 50px;
}

/*div.lineavertical {
	border-right: 2px solid black;
	height: 35px;
}*/

.Totales Label {
	font-weight: normal;
	margin-left: 20px;
}

.Normal Label {
	font-weight: normal;
}

select {
	font-family: 'Roboto', sans-serif;
	margin: 5px 10px;
}

	select.ConMargen {
		margin: 8px 0 8px 0;
	}

input {
	font-family: 'Roboto', sans-serif;
}

	input:invalid {
		box-shadow: 0 0 5px 1px rgba(216, 12, 78, .9);
		border-style: solid;
		border-color: #d80c4e;
	}

textarea:invalid {
	box-shadow: 0 0 5px 1px rgba(216, 12, 78, .9);
	border-style: solid;
	border-color: #d80c4e;
}

select:invalid {
	box-shadow: 0 0 5px 1px rgba(216, 12, 78, .9);
	border-style: solid;
	border-color: #d80c4e;
}


/* Full-width inputs */
input[type=text], input[type=password], input[type=number] {
	margin: 5px 10px;
	display: inline-block;
	border: 1px solid #ccc;
	box-sizing: border-box;
}

input.DateInput {
	width: 110px;
}

/* Sin spinner en campos numéricos */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 5px 0;
}

input[type="number"] {
	-moz-appearance: textfield;
}

input[type="radio"] + label {
	font-weight: normal;
}

	input[type="radio"] + label.bold {
		font-weight: bolder;
	}

input[type="checkbox"] + label {
	font-weight: normal;
}

	input[type="checkbox"] + label.bold {
		font-weight: bolder;
	}

.bold {
	font-weight: bolder;
}


input:read-only {
	margin: 5px 0;
	background-color: #a3a3a3;
	color: #fdfdfd;
}

/* Full-width inputs */
.FullWidth {
	width: 100%;
	padding: 12px 20px;
}

.form-group {
	text-align: right;
	float: left;
}

.Button {
	background: linear-gradient( 168deg, whitesmoke, #989898);
	box-shadow: 0 0 6px 2px #000000;
	box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
	margin: 3px;
	padding: 5px 5px 5px 5px;
	border-color: white;
	border-width: thin;
	border-style: ridge;
}

input.NumControl {
	margin-right: -5px;
	width: 41ch;
}

.closebutton {
	padding-top: 1px;
	padding-bottom: 10px;
	width: 10px;
	height: 10px;
}

/* Set a style for all buttons */
button {
	background: linear-gradient(172deg, #05286d, #507fde);
	box-shadow: 0 0 6px 2px #000000;
	box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	font-weight: bold;
	font-size: 18px;
	line-height: 21px;
	text-align: center;
	color: #FFFFFF;
	margin: 1px;
	padding: 1px 7px 1px 7px;
	border-color: white;
	border-width: thin;
	border-style: ridge;
	font-family: Raleway;
	font-style: normal;
}

	button:disabled {
		background: linear-gradient(90deg, #737373 40.48%, #efe6d3 141.75%);
	}

/* Add a hover effect for buttons */
.button:hover {
	opacity: 0.4;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
	background-color: #f74724;
	background: linear-gradient(90deg, red 40.48%, #F4AE21 141.75%);
}

/* Center the avatar image inside this container */
.imgcontainer {
	text-align: center;
	margin: 24px 0 12px 0;
}

/* Add padding to containers */
.container {
	padding: 16px;
}

.margenizquierdo {
	padding-left: 40px;
}

.ContainerFilter {
	padding: 0;
}

.graycontainer {
	padding: 16px;
	background-color: #f1f1f1;
}

.selectorBox {
	border: black;
	border-style: double;
	padding: 10px;
}

.buttonContainer {
	padding: 4px;
	background-color: #f1f1f1;
	text-align: right;
}

.BotonesDerecha {
	display: flex;
	justify-content: right;
	width: 50%
}

.BotonesIzquierda {
	display: flex;
	float: left;
	width: 50%;
}

#ContenedorDeBotones {
	display: flex;
	margin: 6px 0 4px 0;
	width: 100%;
}

	#ContenedorDeBotones button {
		margin: 3px 6px 3px 6px;
	}

/* Avatar image */
img.avatar {
	width: 40%;
	border-radius: 50%;
}

/* The "Forgot password" text */
span.psw {
	float: right;
	padding-top: 16px;
}

.shadow-box {
	padding: 20px;
	margin: 20px;
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
	display: inline-block;
}


/* Google Chart Table classes */
.Table-Header-left {
	text-align: left;
}

.Table-Header-center {
	text-align: center;
}

.conLineas {
	border-width: 0 1px 0 0;
	border-style: groove;
}


.Table-Header-right {
	text-align: right;
}

.Table-Row-Totales {
	font-weight: bold;
	filter: brightness(93%);
}

h2.Title {
	margin-top: 8px;
	margin-bottom: 8px;
}


div.MainDiv40 {
	border: 3px solid #f1f1f1;
	width: auto;
	margin: auto;
	background: white;
	color: black;
	max-width: 40%;
}

div.MainDiv {
	border: 3px solid #f1f1f1;
	width: auto;
	margin: auto;
	background: white;
	color: black;
	max-width: 85%;
}

div.MainDiv60 {
	border: 3px solid #f1f1f1;
	width: 55%;
	margin: auto;
	background: white;
	color: black;
	min-width: 60%;
	max-width: 85%;
}


div.Izquierda {
	text-align: left;
	float: left;
	margin: 4px;
}


div.Derecha {
	text-align: right;
	float: right;
	margin: 4px;
}

button.AlaDerecha {
	float: right;
}

div.AlCentro {
	display: flex;
	justify-content: center;
}

box.Centra {
	display: flex;
	justify-content: center;
}

button.MarginAlaIzquierda {
	margin-left: 30px;
}

.BorTop {
	margin-top: 10px;
}


.LabelDer {
	display: inline-block;
	width: 130px;
	text-align: right;
}

.LabelCentro {
	display: inline-block;
	width: 130px;
	text-align: center;
}


input.noDisplay {
	display: none;
}

.enRojo {
	color: red;
}

.enNegro {
	color: black;
}

.CentradoVertical {
	vertical-align: middle;
}

textarea.CentradoVertical {
	width: 30%;
	min-width: 35vmin;
	max-width: 90%;
}

input.FechaCorta {
	width: 85px;
	margin-right: 32px;
	color: black;
}

input.FechaCortaBco {
	width: 85px;
	margin-right: 32px;
	color: white;
}

input.dinero {
	width: 90px;
	margin: 1px;
	padding: 2px 7px 0 7px;
}

input.etiqueta {
	width: 100px;
	margin: 1px;
}

input.buscar {
	width: 160px;
	margin: 1px;
	padding: 2px 7px 0 7px;
}

div.ImageScroll {
	overflow-x: auto;
	overflow-y: auto;
	border: 3px solid #f1f1f1;
	width: auto;
	height: 550px;
	margin: auto;
	display: none;
}

#TablaDiv {
	margin: 0;
}

#DesgloseDiv {
	margin-left: 8px;
	margin-bottom: 20px;
}

#ErrorDiv {
	background-color: #D04040;
	font-weight: bold;
	font-size: small;
	letter-spacing: 1.5px;
	color: white;
	padding: 3px;
}

#PremioActivado {
	background-color: #005aff;
	font-weight: bold;
	font-size: small;
	letter-spacing: 1.5px;
	color: white;
	padding: 3px;
}

#ImagenGastoDiv {
	display: flex;
	align-items: center;
	justify-content: center;
}

#ImagenGasto {
	max-height: 350px;
}

#Guardar {
	margin-left: 16px;
}

fieldset.ErrorMsg {
	margin-top: 8px;
	margin-bottom: 8px;
	padding: 4px;
}

legend {
	font-size: small;
	font-weight: bold;
	padding-left: 6px;
	padding-right: 6px;
}

div.Encabezados {
	margin: 4px 8px 0 0;
	float: right;
}

span.texto {
	font-family: 'Roboto', sans-serif;
}

span.Encabezados {
	margin-left: 16px;
}

.Negritas {
	font-weight: 800
}

span.Totales {
	margin: 8px 16px 8px 16px;
}

div.Totales {
	padding: 4px;
}

button.Derecha {
	float: right;
	margin-right: 8px;
}

button.Centro {
	float: right;
}

.basura {
	height: 20px;
	padding: 4px 0 0 0;
}

.swal-button {
	font-size: 20px;
	font-family: sans-serif;
}

option.centrar {
	text-align: center;
	font-weight: 900;
}

.selCorredor {
	max-width: 380px;
}

.ColDerecha {
	text-align: right;
}

.ColCentro {
	text-align: center;
}

select.aire {
	margin: 0 0 4px 0;
}

select.mintam {
	min-width: 150px;
}

label.lm00 {
	margin-left: 0;
}

input.lm10 {
	margin-left: 16px;
}


.Subrayado {
	text-decoration: underline;
}

/* Nov/2022. CSS Grid Captura de Liquidación */
label.Top {
	display: block;
}

div.TopTxt {
	font-family: 'Roboto', sans-serif;
	font-size: 90%;
	display: block;
	min-width: 100px;
	width: 200px;
	max-width: 200px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	padding: 1px 2px 1px 2px;
	margin: 2px 0 10px 0
}

label.TopCen {
	display: block;
}

input.dineroCen {
	display: block;
	max-width: 90px;
	margin: 1px;
	padding: 2px 7px 0 7px;
}

	input.dineroCen:read-only {
		background-color: #ddd;
	}

input.opaco:read-only {
	max-width: 90px;
	background-color: #ddd;
}

form.CapturaForm {
	margin: 10px 0 0 0;
	padding: 10px 0 0 0;
}

div.capliq-Select {
	grid-area: grSel;
}

div.capliq-Derecha {
	grid-area: grDer;
}

div.capliq-Independ {
	grid-area: grInd;
	padding: 16px;
}

div.capliq-VBruta {
	grid-area: grVBru;
}

div.capliq-Comi {
	grid-area: grCom;
}

div.capliq-VNeta {
	grid-area: grVNet;
}

div.capliq-Hojas {
	grid-area: grHjs;
}

div.capliq-Guardar {
	grid-area: grSave;
	margin-top: 15px;
}

div.capliq-Efectivo {
	grid-area: grEfec;
}

div.capliq-Sobrante {
	grid-area: grSob;
}

div.capliq-Faltante {
	grid-area: grFalt;
}

div.capliq-Dife {
	grid-area: grDif;
}

div.capliq-AboCom {
	grid-area: grAbCo;
}

div.capliq-AcumAC {
	grid-area: grAcu;
}

.Grid-CapturaLiq {
	display: grid;
	grid-template-areas:
		'grSel  grSel  grSel  grSel  grSel  grDer'
		'grVBru grCom  grVNet grHjs  grSave grDer'
		'grEfec grSob  grFalt grDif  grAbCo grDer'
		'grInd  grInd  grInd  grInd  grInd  nop'
		'xxxx   xxxx   xxxx   xxxx   grAcu  grAcu';
	grid-template-columns: 15% 15% 15% 15% 15% 25%;
	gap: 10px;
}

/* RZG. Nov/2022 Alinear desglose de venta con detalle de faltante/sobrante */
div.salTra-Desglose {
	grid-area: grDesglose;
}

div.salTra-FaltSobr {
	grid-area: grFaltSobr;
	font-family: arial;
	font-size: 12pt;
	align-self: end;
	margin-left: 8px;
	margin-bottom: 20px;
}

.Grid-SalesTransfer {
	display: grid;
	grid-template-areas: 'grDesglose grFaltSobr';
	justify-content: start;
}


/* RZG. Abr/2023 Formato para Reporte de Ganadores Web */
div.Grid-GanEnc {
	display: grid;
	background-color: #FAFAFA /* rgba(0,0,0,0.04) */;
	grid-template-columns: 10% 25% auto 10% 8%;
	padding: 8px 0 8px 0;
	gap: 0;
	margin-bottom: 20px;
	font-family: Arial, Helvetica;
	font-size: 16px;
}

/* RZG. Abr/2023 Formato para Reporte de Ganadores Web */
div.Grid-CieCaja {
	display: grid;
	background-color: #FAFAFA /* rgba(0,0,0,0.04) */;
	grid-template-columns: auto 60%;
	padding: 8px 0 8px 0;
	gap: 0;
	/*padding: 8px 0 8px 0;
	gap: 0;
	margin-bottom: 20px;
	font-family: Arial, Helvetica;
	font-size: 16px;*/
}


div.Grid-GanIzqItem {
	text-align: left;
	padding: 4px;
}

div.Grid-GanDerItem {
	text-align: right;
	padding: 4px;
}

div.Grid-GanBorItem {
	text-align: left;
	padding: 4px;
	border-left: 2px solid #000000;
}


/* RZG. Abr/2023. Totales en tablas de Google */
#ChartOverview .table {
	font-family: arial, helvetica;
	font-size: 10pt;
	margin-bottom: 0;
}

#ChartOverview .TotalRow {
	background-color: #e4e9f4;
}

	#ChartOverview .TotalRow td {
		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0.7) 30%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 100%);
		font-weight: bold;
	}

/* RZG. May/2023. */
div.Grid-EncCarterapC {
	display: grid;
	grid-template-columns: 6% 4% 6% auto 6% 12% 6% 6% 6% 5%;
	padding: 8px 0 8px 0;
	gap: 8px;
	margin-bottom: 20px;
	font-family: Arial, Helvetica;
	font-size: 16px;
}

div.Tit-EncCarterapC {
	background-color: #F0F0F0;
	text-align: right;
	padding-right: 6px;
	font-weight: bold;
}

div.MensajeLiq {
	border: 1px solid #AAA;
	padding: 6px 6px 6px 6px;
	text-align: center;
}

.CentrarObjetos {
	display: flex;
	flex-direction: row;
	flex-flow: wrap;
	justify-content: center;
}

.Columna250 {
	width: 250px;
	text-align: right;
}

.BarCodeImage {
	max-width: 464px
}

@media (max-width:1100px) {
	div.MainDiv {
		max-width: 70%;
	}

	box {
		grid-template-columns: 1fr 1fr;
	}

	.box4 {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.box5 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}

	.BarCodeImage {
		max-width: 500px
	}
}

@media (max-width:900px) {
	.BarCodeImage {
		max-width: 400px
	}
}

@media (max-width:740px) {
	div.MainDiv {
		max-width: 99%;
	}

	box {
		grid-template-columns: 1fr;
	}

	.box4 {
		grid-template-columns: 1fr 1fr;
	}

	.box5 {
		grid-template-columns: 1fr 1fr;
	}

	.form-group {
		margin: 4px 2px 4px 2px;
	}
	.BarCodeImage {
		max-width: 300px
	}
}

@media (max-width: 540px), (max-height: 700px) {
	#ContenedorDeBotones {
		display: grid;
	}

	.BotonesDerecha {
		justify-content: left;
	}

	box div {
		margin: 4px 3px 4px 3px;
	}

	.box4 {
		grid-template-columns: 1fr;
	}

	.box5 {
		grid-template-columns: 1fr;
	}
	.BarCodeImage {
		max-width: 150px
	}
}

.campodenombre {
	width: 300px;
}

input.camponumero {
	width: 85px;
	margin-right: 32px;
	text-align: center;
}

input.camponumerofontgde {
	font-weight: bold;
	font-size: 20px;
	width: 100px;
	text-align: center;
}

input.camponumerofontmed {
	font-weight: bold;
	font-size: 16px;
	width: 100px;
	text-align: center;
}

input.camponumero60 {
	width: 60px;
	margin-right: 12px;
	text-align: center;
}

input.camponumerosinmargen {
	width: 85px;
	margin-right: 10px;
	text-align: center;
}

input.checkconmargen40 {
	margin-left: 120px;
}

#Abono {
	margin-left: 2px;
}

#AbaActivacion {
	margin-left: 150px;
}

#ActivosPre {
	margin-left: 19px;
}

#ActivosSPpdte {
	margin-left: 64px;
}

hr.h2 {
	height: 0px;
	border: none;
	border-top: 2px solid black;
}

.ReduceFuente {
	font-size: 80%
}

.AmpliaFuente {
	font-size: 125%
}

.BoxSeparator {
	border-bottom: solid;
	border-width: thin;
	margin: 5px 0 5px 0;
}

hr.linea-para-separar {
	height: 0px;
	background-color: black;
	width: 50%;
	margin-left: 50px;
	float: left;
}