/* Eliminar Arrows/Spinners Input > Number
****************************************************************/
/* Chrome */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}


/* CSS in Mobiles by CarlosPineda
----------------------------------------- */
@media screen and (min-width: 601px) {
	.show-mobile {
		display: none;
	}
}

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

	.show-mobile {
		display: block !important;
	}

	.hide-mobile {
		display: none !important;
	}

	.text-center-mobile {
		text-align: center !important;
	}

	.m-mobile {
		margin: 20px !important;
	}

	.m0-mobile {
		margin: 0 !important;
	}

	.mb-mobile {
		margin-bottom: 20px !important;
	}

	.mt-mobile {
		margin-top: 20px !important;
	}

	.p-mobile {
		padding: 20px !important;
	}

	.p0-mobile {
		padding: 0 !important;
	}

	.pt-mobile {
		padding-top: 20px !important;
	}

	.pb-mobile {
		padding-bottom: 20px !important;
	}

	.inline-mobile {
		display: inline !important;
	}

	.block-mobile {
		display: block !important;
	}

	.size10-mobile {
		width: 10% !important;
	}

	.size20-mobile {
		width: 20% !important;
	}

	.size30-mobile {
		width: 30% !important;
	}

	.size40-mobile {
		width: 40% !important;
	}

	.size50-mobile {
		width: 50% !important;
	}

	.size60-mobile {
		width: 60% !important;
	}

	.size70-mobile {
		width: 70% !important;
	}

	.size80-mobile {
		width: 80% !important;
	}

	.size90-mobile {
		width: 90% !important;
	}

	.size100-mobile {
		width: 100% !important;
	}

}

/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	margin-left: -8px;
	margin-top: -23px;
	padding: 0 10px;
}

.ribbon {
	--f: .5em; /* control the folded part*/
	--r: .8em; /* control the ribbon shape */

	position: absolute;
	top: 20px;
	left: calc(-1 * var(--f));
	padding-inline: .25em;
	line-height: 1.8;
	background: #406b80;
	border-bottom: var(--f) solid #0005;
	border-right: var(--r) solid #0000;
	clip-path: polygon(0 0, 0 calc(100% - var(--f)), var(--f) 100%,
	var(--f) calc(100% - var(--f)), 100% calc(100% - var(--f)),
	calc(100% - var(--r)) calc(50% - var(--f) / 2), 100% 0);
}

/* HTML: <div class="tooltip">This is a Tooltip with a border and a border radius. Border can have a solid or gradient coloration and the background is transparent</div> */
.tooltip {
	color: #fff;
	font-size: 18px;
	max-width: 28ch;
	text-align: center;
}

.tooltip {
	/* triangle dimension */
	--a: 90deg; /* angle */
	--h: 1em; /* height */

	--p: 50%; /* triangle position (0%:left 100%:right) */
	--b: 7px; /* border width */
	--r: 1.2em; /* the radius */

	padding: 1em;
	color: #415462;
	position: relative;
	z-index: 0;
}


/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
.tooltip-top {
	color: #fff;
	font-size: 18px;
	max-width: 28ch;
	text-align: center;
}

.tooltip-top {
	/* triangle dimension */
	--b: 2em; /* base */
	--h: 1em; /* height */

	--p: 50%; /* triangle position (0%:left 100%:right) */
	--r: .4em; /* the radius */
	--c: #32a4df;

	padding: 1em;
	border-radius: min(var(--r), var(--p) - var(--b) / 2) min(var(--r), 100% - var(--p) - var(--b) / 2) var(--r) var(--r)/var(--r);
	clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0,
	min(100%, var(--p) + var(--b) / 2) 0,
	var(--p) calc(-1 * var(--h)),
	max(0%, var(--p) - var(--b) / 2) 0);
	background: var(--c);
	border-image: conic-gradient(var(--c) 0 0) fill 0/
    0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(var(--p) - var(--b) / 2)/
    var(--h) 0 0 0;
}