/**
 * @name Default
 * @path default
 * @copy Miguel92
 * @link #
*/
:root {
	--font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-size-base: 14px;
	--font-size-sm: 13px;
	--font-size-lg: 16px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;

	--sm: 560px;
	--md: 768px;
	--lg: 992px;
	--xl: 1200px;
	--xxl: 1440px;

	--color-bg: #f4f6f8;
	--color-surface: #ffffff;
	--color-surface-alt: #f1f3f5;

	--color-text: #2b2f33;
	--color-text-muted: #6b7280;
	--color-border: #dcdfe3;

	--color-primary: #0A5DCB;
	--color-primary-contrast: #ffffff;

	--color-success: #0e6b28;
	--color-danger: #D32318;
	--color-warning: #E29E08;
	--color-info: #1188D4;
	--color-secondary: #5f6368;

	--color-hover: color-mix(in srgb, currentColor 85%, #000);
	--color-surface-hover: color-mix(in srgb, var(--color-surface) 92%, #000);
	--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #000);
	--color-danger-hover: color-mix(in srgb, var(--color-danger) 85%, #000);
	--color-success-hover: color-mix(in srgb, var(--color-success) 85%, #000);

	--radius-xs: 3px;
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;

	--border-width: 1px;
	--border-base: var(--border-width) solid var(--color-border);

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
	--shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.18);

	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
}
html {
	padding: 0;
	margin: 0;
	height: 100dvh;
}

body {
	padding: 0;
	margin: 0 0 0 0;
	font: normal normal 400 14px/1.3rem 'Lucida Grande',Tahoma,Arial,Verdana,Sans-Serif;	
	background: var(--color-bg);
	overflow-x: hidden;
}
a {
	cursor: pointer;
}
.floatL{float:left}
.floatR{float:right}
.color_red{color:red!important}
.color_green{color:green!important}
.color_blue{color:blue}
.color_gray, .color_gray a {color: gray!important}

.clearBoth::after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}
p {
	text-wrap: pretty;
}
img {
	border: 0;
}
picture {
	width: 100%;
	height: 100%;
	border-radius: .325rem;
	display: block;
	overflow: hidden;
	* {
		width: 100%;
		height: 100%;
	}
}
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
li, ol li {
	word-wrap: break-word;
	list-style-position:outside;
}
input, textarea, select, option {
	accent-color: var(--color-primary);
}
input:focus,
textarea:focus,
select:focus {
	 border-color: var(--color-primary);
	 box-shadow: 0 0 0 2px rgba(30,111,184,0.2);
	 outline: none;
}
[role=button] {
	cursor: pointer;
}
/****** TEXTOS ******/

a {
	&:link, &:visited, &:active, &:hover {
		text-decoration:none;
		color:#333;
	}
	&:hover {
		text-decoration: underline;
	}
}

h1 {
	font-size: 2rem; 
	font-weight:normal;
}

.size9 { font-size: .563rem; }
.size10 { font-size: .625rem; }
.size12 { font-size: .75rem; }
.size13 { font-size: .813rem; }
.size14 { font-size: .875rem; }
.size15 { font-size: .938rem; }
.size16 { font-size: 1rem; }

hr {
	background:#CCC;
	color:#CCC;
	height:1px;
	border:0 none;
}
.cursor-pointer, .pointer {
	cursor: pointer;
}
.pointer-events-none {
	pointer-events: none;
}
/* === DISPLAY === */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.hidden { display: none; }

/* === POSITION === */
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }

/* === FLEXBOX === */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* === GRID === */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* === MARGIN & PADDING === */
/* Padding */
.p-0 { padding: 0!important; }
.p-1 { padding: 0.25rem!important; }
.p-2 { padding: 0.5rem!important; }
.p-3 { padding: 0.75rem!important; }
.p-4 { padding: 1rem!important; }
.p-5 { padding: 1.25rem!important; }
.p-6 { padding: 1.5rem!important; }
.p-8 { padding: 2rem!important; }
.px-0 { padding-inline: 0!important; }
.px-1 { padding-inline: 0.25rem!important; }
.px-2 { padding-inline: 0.5rem!important; }
.px-3 { padding-inline: 0.75rem!important; }
.px-4 { padding-inline: 1rem!important; }
.px-5 { padding-inline: 1.25rem!important; }
.px-6 { padding-inline: 1.5rem!important; }
.px-8 { padding-inline: 2rem!important; }
.py-0 { padding-block: 0!important; }
.py-1 { padding-block: 0.25rem!important; }
.py-2 { padding-block: 0.5rem!important; }
.py-3 { padding-block: 0.75rem!important; }
.py-4 { padding-block: 1rem!important; }
.py-5 { padding-block: 1.25rem!important; }
.py-6 { padding-block: 1.5rem!important; }
.py-8 { padding-block: 2rem!important; }
.pt-0 { padding-top: 0!important; }
.pt-1 { padding-top: 0.25rem!important; }
.pt-2 { padding-top: 0.5rem!important; }
.pt-3 { padding-top: 0.75rem!important; }
.pt-4 { padding-top: 1rem!important; }
.pt-5 { padding-top: 1.25rem!important; }
.pt-6 { padding-top: 1.5rem!important; }
.pt-8 { padding-top: 2rem!important; }
.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: 0.25rem!important; }
.pb-2 { padding-bottom: 0.5rem!important; }
.pb-3 { padding-bottom: 0.75rem!important; }
.pb-4 { padding-bottom: 1rem!important; }
.pb-5 { padding-bottom: 1.25rem!important; }
.pb-6 { padding-bottom: 1.5rem!important; }
.pb-8 { padding-bottom: 2rem!important; }

/* Margin */
.m-auto { margin: auto!important; }
.mx-auto { margin-inline: auto!important; }
.my-auto { margin-block: auto!important; }
.m-0 { margin: 0!important; }
.m-1 { margin: 0.25rem!important; }
.m-2 { margin: 0.5rem!important; }
.m-3 { margin: 0.75rem!important; }
.m-4 { margin: 1rem!important; }
.m-5 { margin: 1.25rem!important; }
.m-6 { margin: 1.5rem!important; }
.m-8 { margin: 2rem!important; }
.mx-0 { margin-inline: 0!important; }
.mx-1 { margin-inline: 0.25rem!important; }
.mx-2 { margin-inline: 0.5rem!important; }
.mx-3 { margin-inline: 0.75rem!important; }
.mx-4 { margin-inline: 1rem!important; }
.mx-5 { margin-inline: 1.25rem!important; }
.mx-6 { margin-inline: 1.5rem!important; }
.mx-8 { margin-inline: 2rem!important; }
.my-0 { margin-block: 0!important; }
.my-1 { margin-block: 0.25rem!important; }
.my-2 { margin-block: 0.5rem!important; }
.my-3 { margin-block: 0.75rem!important; }
.my-4 { margin-block: 1rem!important; }
.my-5 { margin-block: 1.25rem!important; }
.my-6 { margin-block: 1.5rem!important; }
.my-8 { margin-block: 2rem!important; }
.mt-0 { margin-top: 0!important; }
.mt-1 { margin-top: 0.25rem!important; }
.mt-2 { margin-top: 0.5rem!important; }
.mt-3 { margin-top: 0.75rem!important; }
.mt-4 { margin-top: 1rem!important; }
.mt-5 { margin-top: 1.25rem!important; }
.mt-6 { margin-top: 1.5rem!important; }
.mt-8 { margin-top: 2rem!important; }
.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: 0.25rem!important; }
.mb-2 { margin-bottom: 0.5rem!important; }
.mb-3 { margin-bottom: 0.75rem!important; }
.mb-4 { margin-bottom: 1rem!important; }
.mb-5 { margin-bottom: 1.25rem!important; }
.mb-6 { margin-bottom: 1.5rem!important; }
.mb-8 { margin-bottom: 2rem!important; }

/* === WIDTH & HEIGHT === */
.w-full { width: 100%; }
.w-1/2 { width: 50%; }
.w-1/3 { width: 33.333333%; }
.w-2/3 { width: 66.666667%; }
.w-1/4 { width: 25%; }
.w-3/4 { width: 75%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* === TEXT STYLES === */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* === ROUNDES === */
.rounded { border-radius: 0.325rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* === SHADOWS === */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }

/* === TRANSITIONS === */
.transition { transition: all 0.2s ease; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

/* === RESPONSIVE UTILITIES === */
@media (min-width: 640px) {
	.sm\:block { display: block; }
	.sm\:inline { display: inline; }
	.sm\:inline-block { display: inline-block; }
	.sm\:flex { display: flex; }
	.sm\:inline-flex { display: inline-flex; }
	.sm\:grid { display: grid; }
	.sm\:inline-grid { display: inline-grid; }
	.sm\:hidden { display: none; }

	/* Position */
	.sm\:static { position: static; }
	.sm\:fixed { position: fixed; }
	.sm\:absolute { position: absolute; }
	.sm\:relative { position: relative; }
	.sm\:sticky { position: sticky; }

	/* Flexbox */
	.sm\:flex-row { flex-direction: row; }
	.sm\:flex-col { flex-direction: column; }
	.sm\:items-center { align-items: center; }
	.sm\:items-start { align-items: flex-start; }
	.sm\:items-end { align-items: flex-end; }
	.sm\:justify-center { justify-content: center; }
	.sm\:justify-between { justify-content: space-between; }
	.sm\:justify-end { justify-content: flex-end; }
	.sm\:justify-around { justify-content: space-around; }
	.sm\:justify-evenly { justify-content: space-evenly; }

	/* Grid */
	.sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sm\:gap-0 { gap: 0; }
	.sm\:gap-1 { gap: 0.25rem; }
	.sm\:gap-2 { gap: 0.5rem; }
	.sm\:gap-3 { gap: 0.75rem; }
	.sm\:gap-4 { gap: 1rem; }
	.sm\:gap-6 { gap: 1.5rem; }
	.sm\:gap-8 { gap: 2rem; }

	/* Padding */
	.sm\:p-0 { padding: 0!important; }
	.sm\:p-1 { padding: 0.25rem!important; }
	.sm\:p-2 { padding: 0.5rem!important; }
	.sm\:p-3 { padding: 0.75rem!important; }
	.sm\:p-4 { padding: 1rem!important; }
	.sm\:p-5 { padding: 1.25rem!important; }
	.sm\:p-6 { padding: 1.5rem!important; }
	.sm\:p-8 { padding: 2rem!important; }
	.sm\:px-0 { padding-inline: 0!important; }
	.sm\:px-1 { padding-inline: 0.25rem!important; }
	.sm\:px-2 { padding-inline: 0.5rem!important; }
	.sm\:px-3 { padding-inline: 0.75rem!important; }
	.sm\:px-4 { padding-inline: 1rem!important; }
	.sm\:px-5 { padding-inline: 1.25rem!important; }
	.sm\:px-6 { padding-inline: 1.5rem!important; }
	.sm\:px-8 { padding-inline: 2rem!important; }
	.sm\:py-0 { padding-block: 0!important; }
	.sm\:py-1 { padding-block: 0.25rem!important; }
	.sm\:py-2 { padding-block: 0.5rem!important; }
	.sm\:py-3 { padding-block: 0.75rem!important; }
	.sm\:py-4 { padding-block: 1rem!important; }
	.sm\:py-5 { padding-block: 1.25rem!important; }
	.sm\:py-6 { padding-block: 1.5rem!important; }
	.sm\:py-8 { padding-block: 2rem!important; }
	.sm\:pt-0 { padding-top: 0!important; }
	.sm\:pt-1 { padding-top: 0.25rem!important; }
	.sm\:pt-2 { padding-top: 0.5rem!important; }
	.sm\:pt-3 { padding-top: 0.75rem!important; }
	.sm\:pt-4 { padding-top: 1rem!important; }
	.sm\:pt-5 { padding-top: 1.25rem!important; }
	.sm\:pt-6 { padding-top: 1.5rem!important; }
	.sm\:pt-8 { padding-top: 2rem!important; }
	.sm\:pb-0 { padding-bottom: 0!important; }
	.sm\:pb-1 { padding-bottom: 0.25rem!important; }
	.sm\:pb-2 { padding-bottom: 0.5rem!important; }
	.sm\:pb-3 { padding-bottom: 0.75rem!important; }
	.sm\:pb-4 { padding-bottom: 1rem!important; }
	.sm\:pb-5 { padding-bottom: 1.25rem!important; }
	.sm\:pb-6 { padding-bottom: 1.5rem!important; }
	.sm\:pb-8 { padding-bottom: 2rem!important; }

	/* Margin */
	.sm\:m-auto { margin: auto!important; }
	.sm\:mx-auto { margin-inline: auto!important; }
	.sm\:my-auto { margin-block: auto!important; }
	.sm\:m-0 { margin: 0!important; }
	.sm\:m-1 { margin: 0.25rem!important; }
	.sm\:m-2 { margin: 0.5rem!important; }
	.sm\:m-3 { margin: 0.75rem!important; }
	.sm\:m-4 { margin: 1rem!important; }
	.sm\:m-5 { margin: 1.25rem!important; }
	.sm\:m-6 { margin: 1.5rem!important; }
	.sm\:m-8 { margin: 2rem!important; }
	.sm\:mx-0 { margin-inline: 0!important; }
	.sm\:mx-1 { margin-inline: 0.25rem!important; }
	.sm\:mx-2 { margin-inline: 0.5rem!important; }
	.sm\:mx-3 { margin-inline: 0.75rem!important; }
	.sm\:mx-4 { margin-inline: 1rem!important; }
	.sm\:mx-5 { margin-inline: 1.25rem!important; }
	.sm\:mx-6 { margin-inline: 1.5rem!important; }
	.sm\:mx-8 { margin-inline: 2rem!important; }
	.sm\:my-0 { margin-block: 0!important; }
	.sm\:my-1 { margin-block: 0.25rem!important; }
	.sm\:my-2 { margin-block: 0.5rem!important; }
	.sm\:my-3 { margin-block: 0.75rem!important; }
	.sm\:my-4 { margin-block: 1rem!important; }
	.sm\:my-5 { margin-block: 1.25rem!important; }
	.sm\:my-6 { margin-block: 1.5rem!important; }
	.sm\:my-8 { margin-block: 2rem!important; }
	.sm\:mt-0 { margin-top: 0!important; }
	.sm\:mt-1 { margin-top: 0.25rem!important; }
	.sm\:mt-2 { margin-top: 0.5rem!important; }
	.sm\:mt-3 { margin-top: 0.75rem!important; }
	.sm\:mt-4 { margin-top: 1rem!important; }
	.sm\:mt-5 { margin-top: 1.25rem!important; }
	.sm\:mt-6 { margin-top: 1.5rem!important; }
	.sm\:mt-8 { margin-top: 2rem!important; }
	.sm\:mb-0 { margin-bottom: 0!important; }
	.sm\:mb-1 { margin-bottom: 0.25rem!important; }
	.sm\:mb-2 { margin-bottom: 0.5rem!important; }
	.sm\:mb-3 { margin-bottom: 0.75rem!important; }
	.sm\:mb-4 { margin-bottom: 1rem!important; }
	.sm\:mb-5 { margin-bottom: 1.25rem!important; }
	.sm\:mb-6 { margin-bottom: 1.5rem!important; }
	.sm\:mb-8 { margin-bottom: 2rem!important; }

	/* Width & Height */
	.sm\:w-full { width: 100%; }
	.sm\:w-1/2 { width: 50%; }
	.sm\:w-1/3 { width: 33.333333%; }
	.sm\:w-2/3 { width: 66.666667%; }
	.sm\:w-1/4 { width: 25%; }
	.sm\:w-3/4 { width: 75%; }
	.sm\:h-full { height: 100%; }
	.sm\:h-screen { height: 100vh; }
	.sm\:min-h-screen { min-height: 100vh; }
}
@media (min-width: 768px) {
	.md\:block { display: block; }
	.md\:inline { display: inline; }
	.md\:inline-block { display: inline-block; }
	.md\:flex { display: flex; }
	.md\:inline-flex { display: inline-flex; }
	.md\:grid { display: grid; }
	.md\:inline-grid { display: inline-grid; }
	.md\:hidden { display: none; }

	/* Position */
	.md\:static { position: static; }
	.md\:fixed { position: fixed; }
	.md\:absolute { position: absolute; }
	.md\:relative { position: relative; }
	.md\:sticky { position: sticky; }

	/* Flexbox */
	.md\:flex-row { flex-direction: row; }
	.md\:flex-col { flex-direction: column; }
	.md\:items-center { align-items: center; }
	.md\:items-start { align-items: flex-start; }
	.md\:items-end { align-items: flex-end; }
	.md\:justify-center { justify-content: center; }
	.md\:justify-between { justify-content: space-between; }
	.md\:justify-end { justify-content: flex-end; }
	.md\:justify-around { justify-content: space-around; }
	.md\:justify-evenly { justify-content: space-evenly; }

	/* Grid */
	.md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.md\:gap-0 { gap: 0; }
	.md\:gap-1 { gap: 0.25rem; }
	.md\:gap-2 { gap: 0.5rem; }
	.md\:gap-3 { gap: 0.75rem; }
	.md\:gap-4 { gap: 1rem; }
	.md\:gap-6 { gap: 1.5rem; }
	.md\:gap-8 { gap: 2rem; }

	/* Padding */
	.md\:p-0 { padding: 0!important; }
	.md\:p-1 { padding: 0.25rem!important; }
	.md\:p-2 { padding: 0.5rem!important; }
	.md\:p-3 { padding: 0.75rem!important; }
	.md\:p-4 { padding: 1rem!important; }
	.md\:p-5 { padding: 1.25rem!important; }
	.md\:p-6 { padding: 1.5rem!important; }
	.md\:p-8 { padding: 2rem!important; }
	.md\:px-0 { padding-inline: 0!important; }
	.md\:px-1 { padding-inline: 0.25rem!important; }
	.md\:px-2 { padding-inline: 0.5rem!important; }
	.md\:px-3 { padding-inline: 0.75rem!important; }
	.md\:px-4 { padding-inline: 1rem!important; }
	.md\:px-5 { padding-inline: 1.25rem!important; }
	.md\:px-6 { padding-inline: 1.5rem!important; }
	.md\:px-8 { padding-inline: 2rem!important; }
	.md\:py-0 { padding-block: 0!important; }
	.md\:py-1 { padding-block: 0.25rem!important; }
	.md\:py-2 { padding-block: 0.5rem!important; }
	.md\:py-3 { padding-block: 0.75rem!important; }
	.md\:py-4 { padding-block: 1rem!important; }
	.md\:py-5 { padding-block: 1.25rem!important; }
	.md\:py-6 { padding-block: 1.5rem!important; }
	.md\:py-8 { padding-block: 2rem!important; }
	.md\:pt-0 { padding-top: 0!important; }
	.md\:pt-1 { padding-top: 0.25rem!important; }
	.md\:pt-2 { padding-top: 0.5rem!important; }
	.md\:pt-3 { padding-top: 0.75rem!important; }
	.md\:pt-4 { padding-top: 1rem!important; }
	.md\:pt-5 { padding-top: 1.25rem!important; }
	.md\:pt-6 { padding-top: 1.5rem!important; }
	.md\:pt-8 { padding-top: 2rem!important; }
	.md\:pb-0 { padding-bottom: 0!important; }
	.md\:pb-1 { padding-bottom: 0.25rem!important; }
	.md\:pb-2 { padding-bottom: 0.5rem!important; }
	.md\:pb-3 { padding-bottom: 0.75rem!important; }
	.md\:pb-4 { padding-bottom: 1rem!important; }
	.md\:pb-5 { padding-bottom: 1.25rem!important; }
	.md\:pb-6 { padding-bottom: 1.5rem!important; }
	.md\:pb-8 { padding-bottom: 2rem!important; }

	/* Margin */
	.md\:m-auto { margin: auto!important; }
	.md\:mx-auto { margin-inline: auto!important; }
	.md\:my-auto { margin-block: auto!important; }
	.md\:m-0 { margin: 0!important; }
	.md\:m-1 { margin: 0.25rem!important; }
	.md\:m-2 { margin: 0.5rem!important; }
	.md\:m-3 { margin: 0.75rem!important; }
	.md\:m-4 { margin: 1rem!important; }
	.md\:m-5 { margin: 1.25rem!important; }
	.md\:m-6 { margin: 1.5rem!important; }
	.md\:m-8 { margin: 2rem!important; }
	.md\:mx-0 { margin-inline: 0!important; }
	.md\:mx-1 { margin-inline: 0.25rem!important; }
	.md\:mx-2 { margin-inline: 0.5rem!important; }
	.md\:mx-3 { margin-inline: 0.75rem!important; }
	.md\:mx-4 { margin-inline: 1rem!important; }
	.md\:mx-5 { margin-inline: 1.25rem!important; }
	.md\:mx-6 { margin-inline: 1.5rem!important; }
	.md\:mx-8 { margin-inline: 2rem!important; }
	.md\:my-0 { margin-block: 0!important; }
	.md\:my-1 { margin-block: 0.25rem!important; }
	.md\:my-2 { margin-block: 0.5rem!important; }
	.md\:my-3 { margin-block: 0.75rem!important; }
	.md\:my-4 { margin-block: 1rem!important; }
	.md\:my-5 { margin-block: 1.25rem!important; }
	.md\:my-6 { margin-block: 1.5rem!important; }
	.md\:my-8 { margin-block: 2rem!important; }
	.md\:mt-0 { margin-top: 0!important; }
	.md\:mt-1 { margin-top: 0.25rem!important; }
	.md\:mt-2 { margin-top: 0.5rem!important; }
	.md\:mt-3 { margin-top: 0.75rem!important; }
	.md\:mt-4 { margin-top: 1rem!important; }
	.md\:mt-5 { margin-top: 1.25rem!important; }
	.md\:mt-6 { margin-top: 1.5rem!important; }
	.md\:mt-8 { margin-top: 2rem!important; }
	.md\:mb-0 { margin-bottom: 0!important; }
	.md\:mb-1 { margin-bottom: 0.25rem!important; }
	.md\:mb-2 { margin-bottom: 0.5rem!important; }
	.md\:mb-3 { margin-bottom: 0.75rem!important; }
	.md\:mb-4 { margin-bottom: 1rem!important; }
	.md\:mb-5 { margin-bottom: 1.25rem!important; }
	.md\:mb-6 { margin-bottom: 1.5rem!important; }
	.md\:mb-8 { margin-bottom: 2rem!important; }

	/* Width & Height */
	.md\:w-full { width: 100%; }
	.md\:w-1/2 { width: 50%; }
	.md\:w-1/3 { width: 33.333333%; }
	.md\:w-2/3 { width: 66.666667%; }
	.md\:w-1/4 { width: 25%; }
	.md\:w-3/4 { width: 75%; }
	.md\:h-full { height: 100%; }
	.md\:h-screen { height: 100vh; }
	.md\:min-h-screen { min-height: 100vh; }
}
@media (min-width: 992px) {
	/* Display */
	.lg\:block { display: block; }
	.lg\:inline { display: inline; }
	.lg\:inline-block { display: inline-block; }
	.lg\:flex { display: flex; }
	.lg\:inline-flex { display: inline-flex; }
	.lg\:grid { display: grid; }
	.lg\:inline-grid { display: inline-grid; }
	.lg\:hidden { display: none; }

	/* Position */
	.lg\:static { position: static; }
	.lg\:fixed { position: fixed; }
	.lg\:absolute { position: absolute; }
	.lg\:relative { position: relative; }
	.lg\:sticky { position: sticky; }

	/* Flexbox */
	.lg\:flex-row { flex-direction: row; }
	.lg\:flex-col { flex-direction: column; }
	.lg\:items-center { align-items: center; }
	.lg\:items-start { align-items: flex-start; }
	.lg\:items-end { align-items: flex-end; }
	.lg\:justify-center { justify-content: center; }
	.lg\:justify-between { justify-content: space-between; }
	.lg\:justify-end { justify-content: flex-end; }
	.lg\:justify-around { justify-content: space-around; }
	.lg\:justify-evenly { justify-content: space-evenly; }

	/* Grid */
	.lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.lg\:gap-0 { gap: 0; }
	.lg\:gap-1 { gap: 0.25rem; }
	.lg\:gap-2 { gap: 0.5rem; }
	.lg\:gap-3 { gap: 0.75rem; }
	.lg\:gap-4 { gap: 1rem; }
	.lg\:gap-6 { gap: 1.5rem; }
	.lg\:gap-8 { gap: 2rem; }

	/* Padding */
	.lg\:p-0 { padding: 0!important; }
	.lg\:p-1 { padding: 0.25rem!important; }
	.lg\:p-2 { padding: 0.5rem!important; }
	.lg\:p-3 { padding: 0.75rem!important; }
	.lg\:p-4 { padding: 1rem!important; }
	.lg\:p-5 { padding: 1.25rem!important; }
	.lg\:p-6 { padding: 1.5rem!important; }
	.lg\:p-8 { padding: 2rem!important; }
	.lg\:px-0 { padding-inline: 0!important; }
	.lg\:px-1 { padding-inline: 0.25rem!important; }
	.lg\:px-2 { padding-inline: 0.5rem!important; }
	.lg\:px-3 { padding-inline: 0.75rem!important; }
	.lg\:px-4 { padding-inline: 1rem!important; }
	.lg\:px-5 { padding-inline: 1.25rem!important; }
	.lg\:px-6 { padding-inline: 1.5rem!important; }
	.lg\:px-8 { padding-inline: 2rem!important; }
	.lg\:py-0 { padding-block: 0!important; }
	.lg\:py-1 { padding-block: 0.25rem!important; }
	.lg\:py-2 { padding-block: 0.5rem!important; }
	.lg\:py-3 { padding-block: 0.75rem!important; }
	.lg\:py-4 { padding-block: 1rem!important; }
	.lg\:py-5 { padding-block: 1.25rem!important; }
	.lg\:py-6 { padding-block: 1.5rem!important; }
	.lg\:py-8 { padding-block: 2rem!important; }
	.lg\:pt-0 { padding-top: 0!important; }
	.lg\:pt-1 { padding-top: 0.25rem!important; }
	.lg\:pt-2 { padding-top: 0.5rem!important; }
	.lg\:pt-3 { padding-top: 0.75rem!important; }
	.lg\:pt-4 { padding-top: 1rem!important; }
	.lg\:pt-5 { padding-top: 1.25rem!important; }
	.lg\:pt-6 { padding-top: 1.5rem!important; }
	.lg\:pt-8 { padding-top: 2rem!important; }
	.lg\:pb-0 { padding-bottom: 0!important; }
	.lg\:pb-1 { padding-bottom: 0.25rem!important; }
	.lg\:pb-2 { padding-bottom: 0.5rem!important; }
	.lg\:pb-3 { padding-bottom: 0.75rem!important; }
	.lg\:pb-4 { padding-bottom: 1rem!important; }
	.lg\:pb-5 { padding-bottom: 1.25rem!important; }
	.lg\:pb-6 { padding-bottom: 1.5rem!important; }
	.lg\:pb-8 { padding-bottom: 2rem!important; }

	/* Margin */
	.lg\:m-auto { margin: auto!important; }
	.lg\:mx-auto { margin-inline: auto!important; }
	.lg\:my-auto { margin-block: auto!important; }
	.lg\:m-0 { margin: 0!important; }
	.lg\:m-1 { margin: 0.25rem!important; }
	.lg\:m-2 { margin: 0.5rem!important; }
	.lg\:m-3 { margin: 0.75rem!important; }
	.lg\:m-4 { margin: 1rem!important; }
	.lg\:m-5 { margin: 1.25rem!important; }
	.lg\:m-6 { margin: 1.5rem!important; }
	.lg\:m-8 { margin: 2rem!important; }
	.lg\:mx-0 { margin-inline: 0!important; }
	.lg\:mx-1 { margin-inline: 0.25rem!important; }
	.lg\:mx-2 { margin-inline: 0.5rem!important; }
	.lg\:mx-3 { margin-inline: 0.75rem!important; }
	.lg\:mx-4 { margin-inline: 1rem!important; }
	.lg\:mx-5 { margin-inline: 1.25rem!important; }
	.lg\:mx-6 { margin-inline: 1.5rem!important; }
	.lg\:mx-8 { margin-inline: 2rem!important; }
	.lg\:my-0 { margin-block: 0!important; }
	.lg\:my-1 { margin-block: 0.25rem!important; }
	.lg\:my-2 { margin-block: 0.5rem!important; }
	.lg\:my-3 { margin-block: 0.75rem!important; }
	.lg\:my-4 { margin-block: 1rem!important; }
	.lg\:my-5 { margin-block: 1.25rem!important; }
	.lg\:my-6 { margin-block: 1.5rem!important; }
	.lg\:my-8 { margin-block: 2rem!important; }
	.lg\:mt-0 { margin-top: 0!important; }
	.lg\:mt-1 { margin-top: 0.25rem!important; }
	.lg\:mt-2 { margin-top: 0.5rem!important; }
	.lg\:mt-3 { margin-top: 0.75rem!important; }
	.lg\:mt-4 { margin-top: 1rem!important; }
	.lg\:mt-5 { margin-top: 1.25rem!important; }
	.lg\:mt-6 { margin-top: 1.5rem!important; }
	.lg\:mt-8 { margin-top: 2rem!important; }
	.lg\:mb-0 { margin-bottom: 0!important; }
	.lg\:mb-1 { margin-bottom: 0.25rem!important; }
	.lg\:mb-2 { margin-bottom: 0.5rem!important; }
	.lg\:mb-3 { margin-bottom: 0.75rem!important; }
	.lg\:mb-4 { margin-bottom: 1rem!important; }
	.lg\:mb-5 { margin-bottom: 1.25rem!important; }
	.lg\:mb-6 { margin-bottom: 1.5rem!important; }
	.lg\:mb-8 { margin-bottom: 2rem!important; }

	/* Width & Height */
	.lg\:w-full { width: 100%; }
	.lg\:w-1/2 { width: 50%; }
	.lg\:w-1/3 { width: 33.333333%; }
	.lg\:w-2/3 { width: 66.666667%; }
	.lg\:w-1/4 { width: 25%; }
	.lg\:w-3/4 { width: 75%; }
	.lg\:h-full { height: 100%; }
	.lg\:h-screen { height: 100vh; }
	.lg\:min-h-screen { min-height: 100vh; }
}
@media (min-width: 1200px) {
	.xl\:block { display: block; }
	.xl\:inline { display: inline; }
	.xl\:inline-block { display: inline-block; }
	.xl\:flex { display: flex; }
	.xl\:inline-flex { display: inline-flex; }
	.xl\:grid { display: grid; }
	.xl\:inline-grid { display: inline-grid; }
	.xl\:hidden { display: none; }

	/* Position */
	.xl\:static { position: static; }
	.xl\:fixed { position: fixed; }
	.xl\:absolute { position: absolute; }
	.xl\:relative { position: relative; }
	.xl\:sticky { position: sticky; }

	/* Flexbox */
	.xl\:flex-row { flex-direction: row; }
	.xl\:flex-col { flex-direction: column; }
	.xl\:items-center { align-items: center; }
	.xl\:items-start { align-items: flex-start; }
	.xl\:items-end { align-items: flex-end; }
	.xl\:justify-center { justify-content: center; }
	.xl\:justify-between { justify-content: space-between; }
	.xl\:justify-end { justify-content: flex-end; }
	.xl\:justify-around { justify-content: space-around; }
	.xl\:justify-evenly { justify-content: space-evenly; }

	/* Grid */
	.xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.xl\:gap-0 { gap: 0; }
	.xl\:gap-1 { gap: 0.25rem; }
	.xl\:gap-2 { gap: 0.5rem; }
	.xl\:gap-3 { gap: 0.75rem; }
	.xl\:gap-4 { gap: 1rem; }
	.xl\:gap-6 { gap: 1.5rem; }
	.xl\:gap-8 { gap: 2rem; }

	/* Padding */
	.xl\:p-0 { padding: 0!important; }
	.xl\:p-1 { padding: 0.25rem!important; }
	.xl\:p-2 { padding: 0.5rem!important; }
	.xl\:p-3 { padding: 0.75rem!important; }
	.xl\:p-4 { padding: 1rem!important; }
	.xl\:p-5 { padding: 1.25rem!important; }
	.xl\:p-6 { padding: 1.5rem!important; }
	.xl\:p-8 { padding: 2rem!important; }
	.xl\:px-0 { padding-inline: 0!important; }
	.xl\:px-1 { padding-inline: 0.25rem!important; }
	.xl\:px-2 { padding-inline: 0.5rem!important; }
	.xl\:px-3 { padding-inline: 0.75rem!important; }
	.xl\:px-4 { padding-inline: 1rem!important; }
	.xl\:px-5 { padding-inline: 1.25rem!important; }
	.xl\:px-6 { padding-inline: 1.5rem!important; }
	.xl\:px-8 { padding-inline: 2rem!important; }
	.xl\:py-0 { padding-block: 0!important; }
	.xl\:py-1 { padding-block: 0.25rem!important; }
	.xl\:py-2 { padding-block: 0.5rem!important; }
	.xl\:py-3 { padding-block: 0.75rem!important; }
	.xl\:py-4 { padding-block: 1rem!important; }
	.xl\:py-5 { padding-block: 1.25rem!important; }
	.xl\:py-6 { padding-block: 1.5rem!important; }
	.xl\:py-8 { padding-block: 2rem!important; }
	.xl\:pt-0 { padding-top: 0!important; }
	.xl\:pt-1 { padding-top: 0.25rem!important; }
	.xl\:pt-2 { padding-top: 0.5rem!important; }
	.xl\:pt-3 { padding-top: 0.75rem!important; }
	.xl\:pt-4 { padding-top: 1rem!important; }
	.xl\:pt-5 { padding-top: 1.25rem!important; }
	.xl\:pt-6 { padding-top: 1.5rem!important; }
	.xl\:pt-8 { padding-top: 2rem!important; }
	.xl\:pb-0 { padding-bottom: 0!important; }
	.xl\:pb-1 { padding-bottom: 0.25rem!important; }
	.xl\:pb-2 { padding-bottom: 0.5rem!important; }
	.xl\:pb-3 { padding-bottom: 0.75rem!important; }
	.xl\:pb-4 { padding-bottom: 1rem!important; }
	.xl\:pb-5 { padding-bottom: 1.25rem!important; }
	.xl\:pb-6 { padding-bottom: 1.5rem!important; }
	.xl\:pb-8 { padding-bottom: 2rem!important; }

	/* Margin */
	.xl\:m-auto { margin: auto!important; }
	.xl\:mx-auto { margin-inline: auto!important; }
	.xl\:my-auto { margin-block: auto!important; }
	.xl\:m-0 { margin: 0!important; }
	.xl\:m-1 { margin: 0.25rem!important; }
	.xl\:m-2 { margin: 0.5rem!important; }
	.xl\:m-3 { margin: 0.75rem!important; }
	.xl\:m-4 { margin: 1rem!important; }
	.xl\:m-5 { margin: 1.25rem!important; }
	.xl\:m-6 { margin: 1.5rem!important; }
	.xl\:m-8 { margin: 2rem!important; }
	.xl\:mx-0 { margin-inline: 0!important; }
	.xl\:mx-1 { margin-inline: 0.25rem!important; }
	.xl\:mx-2 { margin-inline: 0.5rem!important; }
	.xl\:mx-3 { margin-inline: 0.75rem!important; }
	.xl\:mx-4 { margin-inline: 1rem!important; }
	.xl\:mx-5 { margin-inline: 1.25rem!important; }
	.xl\:mx-6 { margin-inline: 1.5rem!important; }
	.xl\:mx-8 { margin-inline: 2rem!important; }
	.xl\:my-0 { margin-block: 0!important; }
	.xl\:my-1 { margin-block: 0.25rem!important; }
	.xl\:my-2 { margin-block: 0.5rem!important; }
	.xl\:my-3 { margin-block: 0.75rem!important; }
	.xl\:my-4 { margin-block: 1rem!important; }
	.xl\:my-5 { margin-block: 1.25rem!important; }
	.xl\:my-6 { margin-block: 1.5rem!important; }
	.xl\:my-8 { margin-block: 2rem!important; }
	.xl\:mt-0 { margin-top: 0!important; }
	.xl\:mt-1 { margin-top: 0.25rem!important; }
	.xl\:mt-2 { margin-top: 0.5rem!important; }
	.xl\:mt-3 { margin-top: 0.75rem!important; }
	.xl\:mt-4 { margin-top: 1rem!important; }
	.xl\:mt-5 { margin-top: 1.25rem!important; }
	.xl\:mt-6 { margin-top: 1.5rem!important; }
	.xl\:mt-8 { margin-top: 2rem!important; }
	.xl\:mb-0 { margin-bottom: 0!important; }
	.xl\:mb-1 { margin-bottom: 0.25rem!important; }
	.xl\:mb-2 { margin-bottom: 0.5rem!important; }
	.xl\:mb-3 { margin-bottom: 0.75rem!important; }
	.xl\:mb-4 { margin-bottom: 1rem!important; }
	.xl\:mb-5 { margin-bottom: 1.25rem!important; }
	.xl\:mb-6 { margin-bottom: 1.5rem!important; }
	.xl\:mb-8 { margin-bottom: 2rem!important; }

	/* Width & Height */
	.xl\:w-full { width: 100%; }
	.xl\:w-1/2 { width: 50%; }
	.xl\:w-1/3 { width: 33.333333%; }
	.xl\:w-2/3 { width: 66.666667%; }
	.xl\:w-1/4 { width: 25%; }
	.xl\:w-3/4 { width: 75%; }
	.xl\:h-full { height: 100%; }
	.xl\:h-screen { height: 100vh; }
	.xl\:min-h-screen { min-height: 100vh; }
}
@media (min-width: 1440px) {
	.xxl\:block { display: block; }
	.xxl\:inline { display: inline; }
	.xxl\:inline-block { display: inline-block; }
	.xxl\:flex { display: flex; }
	.xxl\:inline-flex { display: inline-flex; }
	.xxl\:grid { display: grid; }
	.xxl\:inline-grid { display: inline-grid; }
	.xxl\:hidden { display: none; }

	/* Position */
	.xxl\:static { position: static; }
	.xxl\:fixed { position: fixed; }
	.xxl\:absolute { position: absolute; }
	.xxl\:relative { position: relative; }
	.xxl\:sticky { position: sticky; }

	/* Flexbox */
	.xxl\:flex-row { flex-direction: row; }
	.xxl\:flex-col { flex-direction: column; }
	.xxl\:items-center { align-items: center; }
	.xxl\:items-start { align-items: flex-start; }
	.xxl\:items-end { align-items: flex-end; }
	.xxl\:justify-center { justify-content: center; }
	.xxl\:justify-between { justify-content: space-between; }
	.xxl\:justify-end { justify-content: flex-end; }
	.xxl\:justify-around { justify-content: space-around; }
	.xxl\:justify-evenly { justify-content: space-evenly; }

	/* Grid */
	.xxl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.xxl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.xxl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.xxl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.xxl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.xxl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.xxl\:gap-0 { gap: 0; }
	.xxl\:gap-1 { gap: 0.25rem; }
	.xxl\:gap-2 { gap: 0.5rem; }
	.xxl\:gap-3 { gap: 0.75rem; }
	.xxl\:gap-4 { gap: 1rem; }
	.xxl\:gap-6 { gap: 1.5rem; }
	.xxl\:gap-8 { gap: 2rem; }

	/* Padding */
	.xxl\:p-0 { padding: 0!important; }
	.xxl\:p-1 { padding: 0.25rem!important; }
	.xxl\:p-2 { padding: 0.5rem!important; }
	.xxl\:p-3 { padding: 0.75rem!important; }
	.xxl\:p-4 { padding: 1rem!important; }
	.xxl\:p-5 { padding: 1.25rem!important; }
	.xxl\:p-6 { padding: 1.5rem!important; }
	.xxl\:p-8 { padding: 2rem!important; }
	.xxl\:px-0 { padding-inline: 0!important; }
	.xxl\:px-1 { padding-inline: 0.25rem!important; }
	.xxl\:px-2 { padding-inline: 0.5rem!important; }
	.xxl\:px-3 { padding-inline: 0.75rem!important; }
	.xxl\:px-4 { padding-inline: 1rem!important; }
	.xxl\:px-5 { padding-inline: 1.25rem!important; }
	.xxl\:px-6 { padding-inline: 1.5rem!important; }
	.xxl\:px-8 { padding-inline: 2rem!important; }
	.xxl\:py-0 { padding-block: 0!important; }
	.xxl\:py-1 { padding-block: 0.25rem!important; }
	.xxl\:py-2 { padding-block: 0.5rem!important; }
	.xxl\:py-3 { padding-block: 0.75rem!important; }
	.xxl\:py-4 { padding-block: 1rem!important; }
	.xxl\:py-5 { padding-block: 1.25rem!important; }
	.xxl\:py-6 { padding-block: 1.5rem!important; }
	.xxl\:py-8 { padding-block: 2rem!important; }
	.xxl\:pt-0 { padding-top: 0!important; }
	.xxl\:pt-1 { padding-top: 0.25rem!important; }
	.xxl\:pt-2 { padding-top: 0.5rem!important; }
	.xxl\:pt-3 { padding-top: 0.75rem!important; }
	.xxl\:pt-4 { padding-top: 1rem!important; }
	.xxl\:pt-5 { padding-top: 1.25rem!important; }
	.xxl\:pt-6 { padding-top: 1.5rem!important; }
	.xxl\:pt-8 { padding-top: 2rem!important; }
	.xxl\:pb-0 { padding-bottom: 0!important; }
	.xxl\:pb-1 { padding-bottom: 0.25rem!important; }
	.xxl\:pb-2 { padding-bottom: 0.5rem!important; }
	.xxl\:pb-3 { padding-bottom: 0.75rem!important; }
	.xxl\:pb-4 { padding-bottom: 1rem!important; }
	.xxl\:pb-5 { padding-bottom: 1.25rem!important; }
	.xxl\:pb-6 { padding-bottom: 1.5rem!important; }
	.xxl\:pb-8 { padding-bottom: 2rem!important; }

	/* Margin */
	.xxl\:m-auto { margin: auto!important; }
	.xxl\:mx-auto { margin-inline: auto!important; }
	.xxl\:my-auto { margin-block: auto!important; }
	.xxl\:m-0 { margin: 0!important; }
	.xxl\:m-1 { margin: 0.25rem!important; }
	.xxl\:m-2 { margin: 0.5rem!important; }
	.xxl\:m-3 { margin: 0.75rem!important; }
	.xxl\:m-4 { margin: 1rem!important; }
	.xxl\:m-5 { margin: 1.25rem!important; }
	.xxl\:m-6 { margin: 1.5rem!important; }
	.xxl\:m-8 { margin: 2rem!important; }
	.xxl\:mx-0 { margin-inline: 0!important; }
	.xxl\:mx-1 { margin-inline: 0.25rem!important; }
	.xxl\:mx-2 { margin-inline: 0.5rem!important; }
	.xxl\:mx-3 { margin-inline: 0.75rem!important; }
	.xxl\:mx-4 { margin-inline: 1rem!important; }
	.xxl\:mx-5 { margin-inline: 1.25rem!important; }
	.xxl\:mx-6 { margin-inline: 1.5rem!important; }
	.xxl\:mx-8 { margin-inline: 2rem!important; }
	.xxl\:my-0 { margin-block: 0!important; }
	.xxl\:my-1 { margin-block: 0.25rem!important; }
	.xxl\:my-2 { margin-block: 0.5rem!important; }
	.xxl\:my-3 { margin-block: 0.75rem!important; }
	.xxl\:my-4 { margin-block: 1rem!important; }
	.xxl\:my-5 { margin-block: 1.25rem!important; }
	.xxl\:my-6 { margin-block: 1.5rem!important; }
	.xxl\:my-8 { margin-block: 2rem!important; }
	.xxl\:mt-0 { margin-top: 0!important; }
	.xxl\:mt-1 { margin-top: 0.25rem!important; }
	.xxl\:mt-2 { margin-top: 0.5rem!important; }
	.xxl\:mt-3 { margin-top: 0.75rem!important; }
	.xxl\:mt-4 { margin-top: 1rem!important; }
	.xxl\:mt-5 { margin-top: 1.25rem!important; }
	.xxl\:mt-6 { margin-top: 1.5rem!important; }
	.xxl\:mt-8 { margin-top: 2rem!important; }
	.xxl\:mb-0 { margin-bottom: 0!important; }
	.xxl\:mb-1 { margin-bottom: 0.25rem!important; }
	.xxl\:mb-2 { margin-bottom: 0.5rem!important; }
	.xxl\:mb-3 { margin-bottom: 0.75rem!important; }
	.xxl\:mb-4 { margin-bottom: 1rem!important; }
	.xxl\:mb-5 { margin-bottom: 1.25rem!important; }
	.xxl\:mb-6 { margin-bottom: 1.5rem!important; }
	.xxl\:mb-8 { margin-bottom: 2rem!important; }

	/* Width & Height */
	.xxl\:w-full { width: 100%; }
	.xxl\:w-1/2 { width: 50%; }
	.xxl\:w-1/3 { width: 33.333333%; }
	.xxl\:w-2/3 { width: 66.666667%; }
	.xxl\:w-1/4 { width: 25%; }
	.xxl\:w-3/4 { width: 75%; }
	.xxl\:h-full { height: 100%; }
	.xxl\:h-screen { height: 100vh; }
	.xxl\:min-h-screen { min-height: 100vh; }
}
.object-fit-cover {
	object-fit: cover;
}
.overflow-auto {overflow: auto !important;}
.overflow-hidden {overflow: hidden !important;}
.overflow-visible {overflow: visible !important;}
.overflow-scroll {overflow: scroll !important;}
.overflow-x-auto {overflow-x: auto !important;}
.overflow-x-hidden {overflow-x: hidden !important;}
.overflow-x-visible {overflow-x: visible !important;}
.overflow-x-scroll {overflow-x: scroll !important;}
.overflow-y-auto {overflow-y: auto !important;}
.overflow-y-hidden {overflow-y: hidden !important;}
.overflow-y-visible {overflow-y: visible !important;}
.overflow-y-scroll {overflow-y: scroll !important;}
.ratio {
	position: relative;
	width: 100%;
	&::before {
		display: block;
		padding-top: var(--aspect-ratio);
		content: "";
	}
	> * {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	&.ratio-1x1 {--aspect-ratio: 100%;}
	&.ratio-4x3 {--aspect-ratio: 75%;}
	&.ratio-16x9 {--aspect-ratio: 56.25%;}
	&.ratio-21x9 {--aspect-ratio: 42.8571428571%;}
}
.truncate {
	display: -webkit-box!important;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	padding: .125rem 0;
}

#maincontainer {
	background: var(--color-primary-hover);
	width: var(--lg);
	margin: 0 auto;
	position: relative;
	padding: 1rem;
	margin-top: 1rem;
	border-radius: .5rem;
}

#head {
	margin-bottom: 1rem;
	min-height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#logo {
	display: block;
	width: 183px;
	height: calc(96px / 2);
	background: url('./images/logoBeta.png') no-repeat;
	&:hover {
		background-position: 0 -50px;
	}
}
#banner {
	width: 468px;
	min-height: 60px;
	max-height: 75px;
	border-radius: .5rem;
	overflow: hidden;
	background-color: #EEE3;
}
/* Noticias */
#mensaje-top {
	background: #FFF3B4;
	.msgtxt {
		text-align: center;
		height: 1.75rem;
		overflow: hidden;
		line-height: 1.75rem;
		border-top: 1px solid #ffe970;
		color:#333;
		a {
			text-decoration: underline;
		}
	}
}

#pie {
	width:100%;
	padding: .5rem 0;
	text-align:center;
	color: #e1e1e1;
	a {
		color: #FFF;
	}
}

#cuerpocontainer {
	background: #FFFFFF;
	padding: 1rem;
	border-bottom-left-radius: .325rem;
	border-bottom-right-radius: .325rem;
}

/* Icons */
.icon {
	vertical-align:top;
}
.icons {
	background:url('./images/big2v1.webp') no-repeat scroll left top;
	display: block;
	width: 1rem;
	height: 1rem;
}
.icons.anterior, 
.icons.siguiente {padding: 0 8px;}
.icons.anterior {background-position: left 0px;}
.icons.siguiente {background-position: left -23px;}
.icons.anterior span,
.icons.siguiente span {display:none;}
.icons.agregar_favoritos {
	background-position: left -241px;
	&:hover {
		background-position: left -64px;
		color: red;
		text-decoration: none;
	}
}
.icons.denunciar_post {
	background-position: left -263px;
	&:hover {
		background-position: left -834px;
	}
}
.icons.recomendar_post {
	background-position: left -220px;
	&:hover {
		background-position: left -854px;
	}
}
.icons.puntos_post {background-position: left -41px;}
.icons.favoritos_post {background-position: left -64px;}
.icons.visitas_post {background-position: left -88px;}
.icons.follow {background-position: 0 -1365px;}
.icons.unfollow {background-position: 0 -1384px;}

.icon-medallas, .listado-content .medalla {
	background-image: url('./images/sprite-notification.webp');
	display:block;
	height:16px;
	width:16px;
}
.icon-medallas.medalla-bronce { background-position: 0 -284px }
.icon-medallas.medalla-plata { background-position: 0 -304px; }
.icon-medallas.medalla-oro { background-position: 0 -220px; }
.icon-medallas.medalla-platino { background-position: 0 -360px; }
.icon-medallas.medalla-diamante { background-position: 0 -344px; }
.icon-medallas.medalla-moderador { background-position: -1px -382px; }
.icon-medallas.medalla-autor-libro { background-position: -1px -424px }
.icon-medallas.medalla-great-user {  background-position: -1px -403px}
.listado-content .medalla {
	width: 32px;
	float: left;
	height: 32px;
	margin-right: 10px;
	margin-top: 2px;
}
.medalla.medalla-oro-big {background-position: -19px -131px;}
.medalla.medalla-bronce-big {background-position: -19px -99px;}
.medalla.medalla-plata-big {background-position: -19px -67px;}
.medalla.medalla-platino-big {background-position: -19px -197px;}
.medalla.medalla-diamante-big {background-position: -19px -165px;}
.medalla-autor-libro-big {background-position: -19px -309px }
.medalla-great-user-big {background-position: -19px -271px }
.medalla-moderador-big {background-position: -19px -236px }
.icon-noti {
	background-image: url('./images/sprite-notification.webp');
	background-repeat: no-repeat;
	display:block;
	font-size:12px;
	height:16px;
	width:16px;
	float:left;
	margin-right:5px;
}
.sprite-balloon-left, .comentarios-n { background-position: 0 0px; } 
.sprite-balloon-left-blue, .comentarios-n-b { background-position:  0 -177px }
.sprite-balloon-left-green, .comentarios-n-g { background-position: 0 -197px; }
.sprite-balloons, .respuestas-n { background-position: 0 -26px; } 
.sprite-block, .comunidades-n { background-position: 0 -52px; } 
.sprite-document-text-image, .post-n { background-position: 0 -78px; } 
.sprite-point, .puntos-n  { background-position: 0 -103px; } 
.sprite-star, .favoritos-n  { background-position: 0 -129px; } 
.sprite-follow, .follow-n { background-position: 0 -154px; }
.sprite-recomendar-p, .recomendar-p { background-position: 0 -324px }
.sprite-voto, .voto { background-position: 0 -261px }
.sprite-medallas, .medallas-n { background-position: 0 -284px; }
.systemicons {
	width: 1rem;
	height: 1rem;
	background-image: url('./images/big2v1.webp');
	background-repeat: no-repeat;
	display:block;
	&.rango0 {background-position: 0 -110px;} 
	&.rango5 {background-position: 0 -110px;} 
	&.rango10 {background-position: 0 -110px;}
	&.rango11 {background-position: 0 -110px;}
	&.rango12 {background-position: 0 -110px;}
	&.rango13 {background-position: 0 -110px;}
	&.rango14 {background-position: 0 -110px;}
	&.rango50 {background-position: 0 -110px;}
	&.rango100 {background-position: 0 -110px;}
	&.sexoM {background-position: -2px -132px}
	&.sexoF {background-position: 0 -153px}
	&.mensaje {background-position:0 -221px; float:left;}
	&.mps {background-position:0 -856px;}
	&.historyMod { background-position: 0 -1252px; }
	&.micuenta { background-position: 0 -874px; }
	&.borradores { background-position:0 -1470px;margin-top:-1px; }
	&.favoritos { background-position: 0 -946px; }
	&.monitor { background-position: 0 -929px; }
	&.actualizar { background-position: 0 -1000px; }
	&.logout { background-position: 0 -964px; &:hover { background-position: 0 -982px; } }
	&.sRss { background-position: 0 -1018px;}
	&.fecha { background-position: 0 -1275px; }
	&.respuestas { background-position: 0 -1298px; }
	&.cerrada {background-position:0 -1326px; display:inline;width:auto;height:auto;padding-left: 12px;}
}
/* NAVBAR */
.navbar {
	background: var(--color-bg);
	border-top-left-radius: .325rem;
	border-top-right-radius: .325rem;
	height: max-content;
}
.navbar-left {
	#tabbedhome a span {
		display: block;
		width: 1rem;
		height: 1rem;
		background: url('../../assets/images/icons/home.png') no-repeat center center;
	}
}
.navbar-right {
	.navbar-user {
		> div {
			> a  {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 .5rem;
				height: 1.9rem;
			}
			&.usernameMenu a {
				font-weight: 700;
			}
			.alertas, .alertas a {
				background: url('./images/alert-notification.png') no-repeat right top;
			}
			.alertas {
				display: block;
				color: #FFF;
				text-align: center;
				font-size: 11px;
				top: -6px;
				position: absolute;
				right:20px;
				padding: 0 8px 0 0;
				a {
					padding:2px 0px 4px 8px;
					background-position: left top;
				}
			}
		}
	}
}
/* NAVBAR: ITEM */
.nav-item {
	&:first-child {
		border-top-left-radius: .325rem;
	}
	a {
		display: block;
		padding: .5rem .75rem;
		font-weight: 500;
		font-size: 0.85rem;
		text-decoration: none;
	}
	&.active, &:hover {
		color: var(--color-surface);
		background: var(--color-hover);
	}
	&:where(.registrate, .identificarme) {
		--bg: var(--color-success);
		--hover: var(--color-success-hover);
		background: var(--bg);
		a {
			font-weight: 600;
			color: var(--color-surface);
		}
		&:hover {
			background: var(--hover);
		}
	}
	&.identificarme {
		--bg: var(--color-primary);
		--hover: var(--color-primary-hover);
		border-radius: 0;
		border-top-right-radius: .325rem;
	}
}
/* SUBMENU */
.subMenu {
	background: #034e63;
	font-size: 12px;
	font-weight: bold;
	color: #CCC;
	.tabsMenu {
		.tabsItem {
			background: #12657d;
			border-top-left-radius: .325rem;
			border-top-right-radius: .325rem;
			a {
				text-decoration: none;
				color: var(--color-surface);
			}
			&:hover {
				background: #99c7d4;
			}
			&.active {
				background: var(--color-surface);
				a { color: #007394; }
			}
		}
	}
}
/* ALERTS */
.alert-empty {
	--background: #F4F4F4;
	--border-color: #C6C6C6;
	--color: #828282;
	background: var(--background);
	border: 1px solid var(--border-color);
	border-radius: .325rem;
	padding: .875rem 0!important;
	font-weight: bold;
	text-align:center!important;
	margin: 0.125rem;
	height: auto!important;
	color: var(--color);
	a {
		color:var(--color);
	}
	&.danger {
		--background: #FBB6B6;
		--border-color: #E63A3A;
		--color: #BB1616;
	}
	&.success {
		--background: #FBB6B6;
		--border-color: #E63A3A;
		--color: #BB1616;
	}
}
/* === BUTTONS === */
.mBtn,
.btn {
	all: unset;
	--btn: #EEE;
	--btn-color: #333;
	background-color: var(--btn) !important;
	color: var(--btn-color) !important;
	font-size: var(--font-size-base) !important;
	font-weight: bold !important;
	cursor: pointer !important;
	border-radius: 0.325rem !important;
	/* Altura base: 1.75rem = 28px */
	padding: .5rem 1rem !important;
	border: 1px solid transparent !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.325rem;
	text-decoration: none !important;
	box-sizing: border-box;
	&:active, &:hover {
		--btn: #E3E3E3;
		--btn-border-color: var(--color-border);
	}
	&.block {
		width: 100%;
		text-align: center;
	}
	/* Botones con ícono (como "Mensaje privado", "Seguir Usuario") */
	&.btn-post-icon {
		--btn: var(--color-surface-alt);
		--btn-color: var(--color-text);
		width: 100%;
		padding: 0.5rem !important;
		height: auto !important;
		line-height: normal !important;
		gap: 0.325rem;
		/* Íconos (img, .icons, .icon) */
		.icons, .icon, img {
			flex-shrink: 0;
			width: 1rem!important;
			height: 1rem!important;
			object-fit: contain;
			/* Asegura alineación vertical central */
			margin-top: -0.125rem; /* ajuste fino si es necesario */
		}
		/* Hover: solo cambia fondo, no afecta tamaño */
		&:hover {
			--btn: var(--color-border);
		}
	}
	/* Variantes de color */
	&.btnOk, &.btn-primary {
		--btn: var(--color-primary);
		--btn-color: var(--color-primary-contrast);
		&:hover {
			--btn: var(--color-primary-hover);
		}
	}
	&.btnDelete, &.btn-danger {
		--btn: var(--color-danger);
		--btn-color: var(--color-primary-contrast);
		&:hover {
			--btn: var(--color-danger-hover);
		}
	}
	&.btnCancel, &.btnYellow, &.btn-warning {
		--btn: var(--color-warning);
		--btn-color: var(--color-text);
		&:hover {
				--btn: var(--color-warning-hover);
		}
	}
	&.btnGreen, &.btn-success {
		--btn: var(--color-success);
		--btn-color: var(--color-surface);
		&:hover {
			--btn: var(--color-success-hover);
		}
	}
	/* Para botones grandes (opcional, si necesitas más altura) */
	&.bigF {
		font-size: 14px;
		padding: 5px 15px;
		height: auto !important;
		line-height: 1.4;
	}
	/* Para botones grandes (opcional, si necesitas más altura) */
	&.bigS, &.btn-sm {
		font-size: 13px;
		padding: .325rem .5rem!important;
	}
}

/* TOPS NUEVOS */
.boxy {
	background: #FFF;
	border: 1px solid #CCC;
}
.boxy a {
	color: #005494;
	font-weight: bold;
}
.boxy a.selected {
	background-color:#005494;
	color:#FFFFFF;
	display:block;
	margin:3px 0;
	padding:3px;
}
.boxy-title {
	background: #d9d9d9 url('./images/bg-title-boxy.gif') repeat-x top left;
	padding: 10px;
	border-bottom: #bdbdbd 1px solid;
	position: relative;
}
.boxy-title h3 {
	margin: 0;
	text-shadow: #f4f4f4  0 1px 0;
	font-size:13px;
}

.boxy-title span.icon-noti {
	background-image:url('./images/sprite-notification.png');
	display:block;
	float:right;
	height:16px;
	position:absolute;
	right:9px;
	top:8px;
	width:16px;
}

.boxy-content {
	padding: 12px;
}
.boxy select {
	width: 125px;
}
.boxy h4 {
	color: #FF6600;
	margin: 0 0 5px 0;
	font-size: 14px;
}
.boxy hr {
	border-top: dashed 1px #CCC;
	background: #FFF;
	margin: 10px 0;
}

#loading {
	position: fixed;
	top: 0;
	left: 44%;
	width: 120px;
	text-align: center;
	background: #444;
	background: rgba(0, 0, 0, 0.7);
	color: white;
	font-size: 14px;
	padding: 8px 10px;
	border-radius: 0 0 5px 5px;
	z-index: 10003;
}
.form-group {
	position: relative;
	padding: .5rem;
	margin-bottom: .5rem;
}
.form-label {
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	display: block;
	margin-bottom: 0.325rem;	
}
.form-control, .form-select {
	border: 1px solid var(--color-border);
	padding: .5rem;
	border-radius: .325rem;
	width: 100%;
	box-sizing: border-box;
}
.form-select {
	padding: 0;
	option {
		padding: 0.325rem;
	}
}
.form-helper {
	font-style: italic;
	font-size: var(--font-size-sm);
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}
.box {
	border: 1px solid var(--color-border);
	margin-bottom: 1rem;
	border-radius: .325rem;
	overflow: hidden;
}
.box-header {
	background: var(--color-bg);
	padding: 0.5rem;
	border-bottom: 1px solid var(--color-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	.box_txt {
		font-weight: 600;
		font-size: 0.85rem;
	}
}
.box-filter {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--color-bg);
	span {
		display: block;
		text-align: center;
		padding: 0.325rem;
		cursor: pointer;
		&.active {
			background: var(--color-text);
			color: var(--color-primary-contrast);
		}
		&:hover {
			background: var(--color-text-muted);
		}
	}
}
.box-content {
	padding: 0.325rem;
}
.box-footer {
	text-align: center;
	padding: 0.325rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
}
/** => Search **/
#search_box {
	margin-bottom: 1rem;
}
.bar-options {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	.bar-item {
		display: block;
		padding: 0.325rem 0;
		cursor: pointer;
		width: 70px;
		text-align: center;
		&.active, &:hover {
			font-weight: 600;
			background: var(--color-surface-alt);
		}
		&.active {
			border-top-left-radius: .325rem;
			border-top-right-radius: .325rem;
		}
	}
}
#search_box{
	> button {
		all: unset;
		display: inline-block;
		padding: .325rem .5rem;
		background: var(--color-surface-alt);
		border-bottom-left-radius: .325rem;
		border-bottom-right-radius: .325rem;
		cursor: pointer;
	}
	> form[name="search"] {
		background: var(--color-surface-alt);
		padding: 0.5rem;
		.search-group {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border: 1px solid var(--color-border);
			background: var(--color-surface);
			border-radius: .325rem;
			overflow: hidden;
			input, button {
				--h: 2rem;
				all: unset;
				display: block;
				height: var(--h);
			}
			input {
				flex-grow: 1;
				padding: 0 .325rem;
				line-height: var(--h);
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			button {
				width: var(--h);
				flex-grow: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
				cursor: pointer;
			}
		}
		.category {
			padding: 0.325rem;
			display: none;
			select {
				padding: .225rem .325rem;
				border: 1px solid var(--color-border);
				background: var(--color-surface);
				border-radius: .325rem;
			}
		}
	}
}
#banner .bar-options .bar-item {
	padding: .125rem 0;
}
/**
 * LiteYTEmbed
*/
lite-youtube {
	background-color: var(--color-primary);
	position: relative;
	display: block;
	contain: content;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
	width: 80%;
	aspect-ratio: 16 / 9;
}
/* gradient */
lite-youtube::after {
	content: "";
	display: block;
	padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
}
lite-youtube > .lty-playbtn {
	display: block;
	width: 58px;
	height: 41px;
	position: absolute;
	cursor: pointer;
	transform: translate3d(-50%, -50%, 0);
	top: 50%;
	left: 50%;
	z-index: 1;
	background-color: transparent;
	/* YT's actual play button svg */
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>');
	filter: grayscale(100%);
	transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
	border: none;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
	filter: none;
}
lite-youtube.lyt-activated {
	cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
	opacity: 0;
	pointer-events: none;
}
.lyt-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}