/*
 * WordPress Theme Global CSS Variables and Utility Classes
 *
 * This stylesheet defines global CSS custom properties (variables)
 * and a comprehensive set of utility classes for your custom WordPress theme.
 *
 * Variables are defined in the :root pseudo-class for global access.
 * Utility classes are designed for rapid, consistent styling directly in HTML.
 *
 * @package MRLDTheme
 * @since 1.0.0
 */

/*
 * -----------------------------------------------------------------------------
 * Global CSS Variables (:root)
 * Defines your theme's design tokens for colors, typography, spacing, etc.
 * -----------------------------------------------------------------------------
 */

:root {
	/* Colors */
	--primary-color: #0073AA;
	--primary-color-dark: #005A87;
	--primary-color-light: #4A9CDB;

	--secondary-color: #6C757D;
	--secondary-color-dark: #5A6268;
	--secondary-color-light: #868E96;

	--accent-color: #D63638;
	--accent-color-dark: #081706;
	--accent-color-light: #F05052;

	/* Neutral / Grayscale Palette */
	--white-color: #FFFFFF;
	--black-color: #000000;

	--gray-100: #F8F9FA;
	--gray-200: #E9ECEF;
	--gray-300: #DEE2E6;
	--gray-400: #CED4DA;
	--gray-500: #ADB5BD;
	--gray-600: #6C757D;
	--gray-700: #495057;
	--gray-800: #343A40;
	--gray-900: #212529;

	/* Text Colors */
	--text-color-base: var(--gray-800);
	--text-color-light: var(--gray-600);
	--text-color-heading: var(--gray-900);
	--text-color-inverse: var(--white-color);

	/* Background Colors */
	--bg-color-base: var(--white-color);
	--bg-color-light: var(--gray-100);
	--bg-color-dark: var(--gray-900);

	/* Status Colors */
	--success-color: #28A745;
	--warning-color: #FFC107;
	--danger-color: #DC3545;
	--info-color: #17A2B8;

	/* Typography */
	--main-font: 'Roboto', sans-serif; /* Example main font */
	--font-family-base: var(--main-font);
	--font-family-heading: var(--main-font);
	--font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

	/* Font Weights */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* Base Font Size and Line Height */
	--font-size-base: 1rem;
	--line-height-base: 1.5;

	/* Heading Font Sizes */
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.75rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.25rem;
	--font-size-h6: 1rem;

	/* Small/Large Text Sizes */
	--font-size-xs: 0.75rem; /* 12px */
	--font-size-sm: 0.875rem; /* 14px */
	--font-size-lg: 1.125rem; /* 18px */
	--font-size-xl: 1.25rem;  /* 20px */
	--font-size-2xl: 1.5rem;  /* 24px */
	--font-size-3xl: 1.875rem; /* 30px */
	--font-size-4xl: 2.25rem; /* 36px */

	/* Line Heights */
	--line-height-none: 1;
	--line-height-tight: 1.25;
	--line-height-snug: 1.375;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.625;
	--line-height-loose: 2;

	/* Spacing Scale */
	--spacing-0: 0;
	--spacing-1: 0.25rem;
	--spacing-2: 0.5rem;
	--spacing-3: 0.75rem;
	--spacing-4: 1rem;
	--spacing-5: 1.25rem;
	--spacing-6: 1.5rem;
	--spacing-8: 2rem;
	--spacing-10: 2.5rem;
	--spacing-12: 3rem;
	--spacing-16: 4rem;
	--spacing-20: 5rem;
	--spacing-24: 6rem;

	/* Borders & Shadows */
	--border-width-base: 1px;
	--border-color-base: var(--gray-300);
	--border-color-strong: var(--gray-400);

	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.375rem;
	--border-radius-lg: 0.5rem;
	--border-radius-xl: 0.75rem;
	--border-radius-full: 9999px;

	/* Box Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Base Body Styles (optional, but good for starting point) */
body {
	font-family: var(--font-family-base), serif;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--text-color-base);
	background-color: var(--bg-color-base);
	margin: 0; /* Reset default body margin */
}

/* General Heading Resets (optional, but good practice) */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-family-heading), serif;
	color: var(--text-color-heading);
	line-height: var(--line-height-tight);
	margin-top: var(--spacing-8);
	margin-bottom: var(--spacing-4);
	font-weight: var(--font-weight-bold); /* Default to bold, can be overridden by font-weight utilities */
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }


/*
 * -----------------------------------------------------------------------------
 * Utility Classes
 * -----------------------------------------------------------------------------
 */

/* Containers */
.container {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1360px;
}

/* Responsive Container Max-Widths */
@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}
@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}
@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}
@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}
}

.container-full {
	width: 100%;
}

/* Flexbox */
.flex {
	display: flex;
}

.inline-flex {
	display: inline-flex;
}

.flex-row {
	flex-direction: row;
}

.flex-col {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.justify-start {
	justify-content: flex-start;
}

.justify-end {
	justify-content: flex-end;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

.justify-evenly {
	justify-content: space-evenly;
}

.items-start {
	align-items: flex-start;
}

.items-end {
	align-items: flex-end;
}

.items-center {
	align-items: center;
}

.items-baseline {
	align-items: baseline;
}

.items-stretch {
	align-items: stretch;
}

.self-auto {
	align-self: auto;
}

.self-start {
	align-self: flex-start;
}

.self-end {
	align-self: flex-end;
}

.self-center {
	align-self: center;
}

.self-baseline {
	align-self: baseline;
}

.self-stretch {
	align-self: stretch;
}

.content-start {
	align-content: flex-start;
}

.content-end {
	align-content: flex-end;
}

.content-center {
	align-content: center;
}

.content-between {
	align-content: space-between;
}

.content-around {
	align-content: space-around;
}

.content-stretch {
	align-content: stretch;
}

/* Grid */
.grid {
	display: grid;
}

.inline-grid {
	display: inline-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-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-flow-row {
	grid-auto-flow: row;
}

.grid-flow-col {
	grid-auto-flow: column;
}

.grid-flow-dense {
	grid-auto-flow: dense;
}

.grid-flow-row-dense {
	grid-auto-flow: row dense;
}

.grid-flow-col-dense {
	grid-auto-flow: column dense;
}

/* Block & Inline */
.block {
	display: block;
}

.inline {
	display: inline;
}

.hidden {
	display: none !important;
}

/* Position */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.sticky {
	position: sticky;
}

.top-0 {
	top: 0;
}

.right-0 {
	right: 0;
}

.bottom-0 {
	bottom: 0;
}

.left-0 {
	left: 0;
}

/* Visibility */
.invisible {
	visibility: hidden;
}

.visible {
	visibility: visible;
}

/* Overflow */
.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-scroll {
	overflow: scroll;
}

.overflow-x-auto {
	overflow-x: auto;
}

.overflow-y-auto {
	overflow-y: auto;
}

/* Column System (Flexbox Based) */
.row {
	display: flex;
	flex-wrap: wrap;
}

.col {
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
}

/* Define column widths */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Offset classes */
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }

/* Responsive Column Classes (Example for 'md' breakpoint) */
@media (min-width: 768px) {
	.md\:col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
	.md\:col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
	.md\:col-3 { flex: 0 0 25%; max-width: 25%; }
	.md\:col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.md\:col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
	.md\:col-6 { flex: 0 0 50%; max-width: 50%; }
	.md\:col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
	.md\:col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
	.md\:col-9 { flex: 0 0 75%; max-width: 75%; }
	.md\:col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
	.md\:col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
	.md\:col-12 { flex: 0 0 100%; max-width: 100%; }

	.md\:offset-0 { margin-left: 0; }
	.md\:offset-1 { margin-left: 8.333333%; }
	/* Add more responsive offsets for md: if needed */
}
/* Repeat for other breakpoints (sm, lg, xl, etc.) as needed */


/* Spacing (Margins and Paddings) */
.m-0 { margin: var(--spacing-0); }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-1 { margin-top: var(--spacing-1); }
.mr-1 { margin-right: var(--spacing-1); }
.mb-1 { margin-bottom: var(--spacing-1); }
.ml-1 { margin-left: var(--spacing-1); }
.m-1 { margin: var(--spacing-1); }

.mt-2 { margin-top: var(--spacing-2); }
.mr-2 { margin-right: var(--spacing-2); }
.mb-2 { margin-bottom: var(--spacing-2); }
.ml-2 { margin-left: var(--spacing-2); }
.m-2 { margin: var(--spacing-2); }

.mt-3 { margin-top: var(--spacing-3); }
.mr-3 { margin-right: var(--spacing-3); }
.mb-3 { margin-bottom: var(--spacing-3); }
.ml-3 { margin-left: var(--spacing-3); }
.m-3 { margin: var(--spacing-3); }

.mt-4 { margin-top: var(--spacing-4); }
.mr-4 { margin-right: var(--spacing-4); }
.mb-4 { margin-bottom: var(--spacing-4); }
.ml-4 { margin-left: var(--spacing-4); }
.m-4 { margin: var(--spacing-4); }

.mt-5 { margin-top: var(--spacing-5); }
.mr-5 { margin-right: var(--spacing-5); }
.mb-5 { margin-bottom: var(--spacing-5); }
.ml-5 { margin-left: var(--spacing-5); }
.m-5 { margin: var(--spacing-5); }

.mt-6 { margin-top: var(--spacing-6); }
.mr-6 { margin-right: var(--spacing-6); }
.mb-6 { margin-bottom: var(--spacing-6); }
.ml-6 { margin-left: var(--spacing-6); }
.m-6 { margin: var(--spacing-6); }

.mt-8 { margin-top: var(--spacing-8); }
.mb-8 { margin-bottom: var(--spacing-8); }
.m-8 { margin: var(--spacing-8); }

.mt-10 { margin-top: var(--spacing-10); }
.mb-10 { margin-bottom: var(--spacing-10); }
.m-10 { margin: var(--spacing-10); }

/* Horizontal Spacing */
.px-0 { padding-left: var(--spacing-0); padding-right: var(--spacing-0); }
.mx-0 { margin-left: var(--spacing-0); margin-right: var(--spacing-0); }

.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }

.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }

.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }

.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }

.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }

.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }

/* Vertical Spacing */
.py-0 { padding-top: var(--spacing-0); padding-bottom: var(--spacing-0); }
.my-0 { margin-top: var(--spacing-0); margin-bottom: var(--spacing-0); }

.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }

.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }

.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }

.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }

.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }

.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }


/* Typography */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Font Weight */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* Font Size */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

/* Text Transform */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Font Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Text Decoration */
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-through { text-decoration: line-through; }

/* Line Height */
.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Letter Spacing */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide { letter-spacing: 0.025em; }


/* Colors (Text and Background) */
/* Text Colors */
.text-primary { color: var(--primary-color); }
.text-secondary { color: var(--secondary-color); }
.text-accent { color: var(--accent-color); }
.text-success { color: var(--success-color); }
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }
.text-white { color: var(--white-color); }
.text-black { color: var(--black-color); }

/* Grayscale Text Colors */
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

/* Background Colors */
.bg-primary { background-color: var(--primary-color); }
.bg-secondary { background-color: var(--secondary-color); }
.bg-accent { background-color: var(--accent-color); }
.bg-accent-dark { background-color: var(--accent-color-dark); }
.bg-success { background-color: var(--success-color); }
.bg-danger { background-color: var(--danger-color); }
.bg-warning { background-color: var(--warning-color); }
.bg-info { background-color: var(--info-color); }
.bg-white { background-color: var(--white-color); }
.bg-black { background-color: var(--black-color); }

/* Grayscale Background Colors */
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-500 { background-color: var(--gray-500); }
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-700 { background-color: var(--gray-700); }
.bg-gray-800 { background-color: var(--gray-800); }
.bg-gray-900 { background-color: var(--gray-900); }


/* Borders */
.border {
	border-width: var(--border-width-base);
	border-style: solid;
	border-color: var(--border-color-base);
}

.border-0 { border-width: 0; }
.border-t { border-top-width: var(--border-width-base); }
.border-r { border-right-width: var(--border-width-base); }
.border-b { border-bottom-width: var(--border-width-base); }
.border-l { border-left-width: var(--border-width-base); }

.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }

/* Border Colors */
.border-primary { border-color: var(--primary-color); }
.border-secondary { border-color: var(--secondary-color); }
.border-accent { border-color: var(--accent-color); }
.border-gray-300 { border-color: var(--gray-300); }
.border-gray-500 { border-color: var(--gray-500); }
.border-gray-700 { border-color: var(--gray-700); }
.border-white { border-color: var(--white-color); }
.border-black { border-color: var(--black-color); }

/* Border Radius */
.rounded { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

.rounded-t {
	border-top-left-radius: var(--border-radius-sm);
	border-top-right-radius: var(--border-radius-sm);
}
.rounded-b {
	border-bottom-left-radius: var(--border-radius-sm);
	border-bottom-right-radius: var(--border-radius-sm);
}
.rounded-l {
	border-top-left-radius: var(--border-radius-sm);
	border-bottom-left-radius: var(--border-radius-sm);
}
.rounded-r {
	border-top-right-radius: var(--border-radius-sm);
	border-bottom-right-radius: var(--border-radius-sm);
}

/* Sizing (Width and Height) */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-full { max-width: 100%; }
.min-w-0 { min-width: 0; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-0 { min-height: 0; }
.min-h-screen { min-height: 100vh; }
.max-h-full { max-height: 100%; }


/* Effects */
/* Shadow */
.shadow { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-default { cursor: default; }

/* Transition */
.transition-all {
	transition-property: all;
	transition-duration: 150ms; /* Adjust as needed */
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}

/* Z-index (common levels) */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }