/*
{
		box-sizing: border-box;
		margin: 0;
		padding: 0;
}

/*
#fffcf2
#ccc5b9
#403d39
#252422
#eb5e28
*
body
	{ 
	background-color: #252422;
	color: #eb5e28;
	font-family: Verdana, Arial, sans-serif;
	}

h1, h2
	{
	color: #8D6262;
	align: center;
	}
*/

/* Discord-inspired CSS with your color palette */
:root {
	/* Color Variables */
	--bg-primary: #252422;       /* Main background */
	--bg-secondary: #403d39;    /* Secondary panels */
	--bg-tertiary: #ccc5b9;     /* Button/input backgrounds */
	--text-primary: #fffcf2;     /* Main text */
	--text-secondary: #ccc5b9;   /* Muted text */
	--accent: #eb5e28;     
	--checked: #77dd77;     /* Bright accent (orange) */
	
	/* Spacing */
	--spacing-sm: 8px;
	--spacing-md: 16px;
	--spacing-lg: 24px;

	/* Custom CheckBox Height */
	--size-custom: 28px;
	
	/* Borders */
	--border-radius: 4px;
	--border-radius-lg: 8px;
}

/* Base Styles */
body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: 'Whitney', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin: 0;
	padding: var(--spacing-md);
	line-height: 1.5;
}

/* Container Block */
.container {
	background-color: var(--bg-primary);
	/*border-radius: var(--border-radius-lg);*/
	padding: var(--spacing-md);
	margin-bottom: var(--spacing-md);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	width: calc(100%-16px);
}

/* Buttons */
.btn {
	background-color: var(--bg-tertiary);
	color: var(--bg-primary);
	border: none;
	/*border-radius: var(--border-radius);*/
	padding: var(--spacing-sm) var(--spacing-md);
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.btn:hover {
	background-color: var(--text-primary);
	transform: translateY(-1px);
}

.btn-accent {
	background-color: var(--accent);
	color: var(--text-primary);
}

.btn-accent:hover {
	background-color: #ff7038;
}

/* Form Elements */
.input-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-md);
}

.input-label {
	color: var(--text-secondary);
	font-size: 0.9rem;
	font-weight: 600;
}

.text-input {
	background-color: transparent;
	color: var(--text-primary);
	border: 1px /*solid var(--bg-tertiary)*/;
	/*border-radius: var(--border-radius);*/
	padding: 0 var(--spacing-sm);
	min-height: var(--size-custom);
	font-family: inherit;
	transition: border 0.2s ease;
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 120px;
	max-width: calc(100%-16px);
	width: 0;
	margin: 0;
	box-sizing: border-box;
	word-wrap: break-word;
	white-space: pre-warp;
	overflow-wrap: break-word;
	max-height: auto;;
}

/* Make text input expand with content */
.text-input[type="text"] {
    width: 1 1 auto; /* Grow with content */
    min-width: 120px; /* Minimum width */
	white-space: nowrap;
	overflow: hidden;
}

.text-input:focus {
	border-color: var(--accent);
	outline: none;
}

.checkbox-container {
	display: flex;
	align-items: left;
	/*gap: var(--spacing-sm);*/
	height: var(--size-custom);
	cursor: pointer;
	
    margin: 0 !important;
    padding: 0 !important;
	line-height: 0;
}

.checkbox-input {
	/*appearance: none;
	-webkit-appearance: none;*/
	accent-color: var(--checked);/*var(--accent);*/
	background-color: transparent;
	/*border: 1px solid var(--text-secondary);*/
	display: var(--bg-secondary);
	width: 12px;
	height: var(--size-custom);
	flex-grow: 0;
	flex-shrink: 0;
	margin: 0;
	/*padding: 00px;*/
	cursor: pointer;
	position: relative;
    margin: 0 !important;
    padding: 0 !important;
}

/*.checkbox-input::before {
	content: "";
	width: 12px;
	height: var(--size-custom);
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	/*background-color: #00ff00;
}

.checkbox-input:checked:after {
	content: "✓";
	background-color: #00ff00;
	color: #00ff00;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	font-weight: bold;
}

.checkbox-input:checked:before {
	transform: scale(1);
}*/

/* Custom Blocks */
.custom-block {
	background-color: var(--bg-secondary);
	border-left: 3px ;/*solid var(--accent);*/
	/*border-radius: 6px var(--spacing-sm);*/
	padding: var(--spacing-sm);
	margin: 0px 0;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	transition: all 0.2s ease;
	box-sizing: border-box;
	min-height: var(--size-custom);
	height: var(--size-custom);
	max-height: auto;
	width: calc(100%-16px);
	align-items: flex-start;
}

.custom-block:hover {
	transform: translateX(2px);
	background-color: var(--bg-primary);
}

.block-content {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	height: 100%;
	width: 0;
}

.block-image {
	width: 24px;
	height: 24px;
	border-radius: var(--border-radius);
	object-fit: cover;
	flex-shrink: 0;
}

/* Utility Classes */
.flex-row {
	display: flex;
	gap: var(--spacing-md);
	align-items: center;
}

.flex-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

/* Scrollbars (Discord-style) */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
	background: var(--bg-tertiary);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--accent);
}