@import url("https://fonts.googleapis.com/css?family=Roboto");
@font-face {
	font-family: 'PlutoIcon';
	src: url("/core/assets/fonts/pluto-icon.woff2?3189123") format("woff2");
	font-weight: normal;
	font-style: normal;
}
:root {
	--pluto-primary-color: #007bff;
	--pluto-secondary-color: #6c757d;
	--pluto-success-color: #28a745;
	--pluto-danger-color: #dc3545;
	--pluto-warning-color: #ffc107;
	--pluto-info-color: #17a2b8;

	--pluto-primary-color-dark: #0056b3;
	--pluto-secondary-color-dark: #545b62;
	--pluto-success-color-dark: #1e7e34;
	--pluto-danger-color-dark: #b02a37;

	--pluto-text-color: #333;
	--pluto-text-color-light: #ffffff;
	--pluto-text-color-dark: #111;
	--pluto-bg-color: #f4f7f6;
	--pluto-bg-light: #ffffff;
	--pluto-bg-dark: #e9ecef;
	--pluto-border-color: #dee2e6;
	--pluto-border-radius: 8px;
	--pluto-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	--pluto-modal-overlay-bg: rgba(0, 0, 0, 0.5);
	--pluto-font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--pluto-success-bg: #d1e7dd;
	--pluto-success-border: #badbcc;
	--pluto-success-text: #0f5132;
	--pluto-danger-bg: #f8d7da;
	--pluto-danger-border: #f5c2c7;
	--pluto-danger-text: #842029;
	--pluto-warning-bg: #fff3cd;
	--pluto-warning-border: #ffecb5;
	--pluto-warning-text: #664d03;
	--pluto-info-bg: #cff4fc;
	--pluto-info-border: #b6effb;
	--pluto-info-text: #055160;

	--pluto-grid: 1rem;
	--pluto-spacing: 1rem;
	--pluto-v-spacing: 100%;
	--pluto-direction: row;
	--pluto-align: center;
	--pluto-v-align: stretch;
	--pluto-v-direction: column;
	--pluto-padding: 1rem;
	--pluto-margin: 1rem;
	--pluto-padding-top: 1rem;
	--pluto-padding-bottom: 1rem;
	--pluto-padding-left: 1rem;
	--pluto-padding-right: 1rem;
	--pluto-margin-top: 1rem;
	--pluto-margin-bottom: 1rem;
	--pluto-margin-left: 1rem;
	--pluto-margin-right: 1rem;

	--pluto-form-border-color: #ced4da;
	--pluto-form-bg-color: #fff;
	--pluto-form-border-radius: 0.25rem;
	--pluto-form-padding: 0.5rem 0.75rem;
	--pluto-form-font-size: 1rem;
	--pluto-form-line-height: 1.5;
	--pluto-form-color: #495057;

	--pluto-form-focus-color: #495057;
	--pluto-form-focus-bg-color: #fff;
	--pluto-form-focus-border-color: #80bdff;
	--pluto-form-focus-outline: 0;
	--pluto-form-focus-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);

	--pluto-form-invalid-color: #dc3545;
	--pluto-form-invalid-bg-color: #ffecec;
	--pluto-form-invalid-border-color: #dc3545;
	--pluto-form-invalid-outline: 0;
}

body {
	font-family: var(--pluto-font-family);
	background-color: var(--pluto-bg-color, #f4f7f6);
	color: var(--pluto-text-color, #333);
	margin: 0;
	padding: 0;
}

:hosted .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--pluto-padding, 1rem);
}

h1,
h2,
h3,
h4,
h5,
h6,
::part(heading) {
	color: var(--pluto-text-color-dark, #111);
	margin: var(--pluto-margin);
}

.pluto-close {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: var(--pluto-secondary-color, #6c757d);
	line-height: 1;
	padding: 0;
}

.pluto-close:hover {
	color: var(--pluto-text-color-dark, #111);
}

code {
	margin: 0 4px;
}

pluto-toast {
	background-color: var(--pluto-text-color-dark, #333);
	color: var(--pluto-text-color-light, #fff);
	padding: var(--pluto-padding, 1rem) 1.5rem;
	border-radius: var(--pluto-border-radius, 8px);
	box-shadow: var(--pluto-box-shadow);
	display: flex;
	align-items: var(--pluto-align, center);
	gap: var(--pluto-spacing, 1rem);
	opacity: 0;
	transform: translateY(var(--pluto-spacing, 1rem));
	transition: opacity 0.3s ease, transform 0.3s ease;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1050;
	display: flex;
	flex-direction: column;
	cursor: pointer;
}

pluto-toast[active] {
	opacity: 1;
	transform: translateY(0);
}

pluto-toast[type="success"] {
	background-color: var(--pluto-success-color, #28a745);
}

pluto-toast[type="danger"] {
	background-color: var(--pluto-danger-color, #dc3545);
}

pluto-toast[right] {
	right: var(--pluto-spacing, 1rem);
	left: unset;
}

pluto-toast[bottom] {
	bottom: var(--pluto-spacing, 1rem);
	top: unset;
}

pluto-toast[top] {
	top: var(--pluto-spacing, 1rem);
	bottom: unset;
}

pluto-toast[left] {
	left: var(--pluto-spacing, 1rem);
	right: unset;
}

pluto-tab {
	display: none;
	padding: var(--pluto-padding, 1rem);
}

pluto-tab[active] {
	display: block;
}

pluto-modal{
	display: none;
}button,
.button,
:host(pluto-button),
:host(pluto-submit),
::part(button) {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--pluto-border-color);
	border-radius: var(--pluto-border-radius);
	background-color: var(--pluto-bg-light);
	color: var(--pluto-text-color);
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
	font-size: 0.9rem;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	text-decoration: none;
	box-sizing: border-box;
}

button:hover,
.button:hover,
:host(pluto-button:hover),
:host(pluto-submit:hover),
::part(button):hover {
	background-color: var(--pluto-bg-dark);
}

button:disabled,
.button:disabled,
:host(pluto-button:disabled),
:host(pluto-submit:disabled),
::part(button):disabled {
	background-color: var(--pluto-bg-dark);
	cursor: not-allowed;
	color: var(--pluto-text-color-dark);
	opacity: 0.65;
}

button.icon,
.button.icon,
:host(pluto-button.icon),
:host(pluto-submit.icon),
::part(button icon) {
	background: unset !important;
	color: var(--pluto-text-color-dark);
	border: unset !important;
}

button.primary,
.button.primary,
:host(pluto-button.primary),
:host(pluto-submit.primary),
::part(button primary) {
	background-color: var(--pluto-primary-color-dark);
	border-color: var(--pluto-primary-color-dark);
	color: var(--pluto-text-color-light);
}

button.primary:hover,
.button.primary:hover,
:host(pluto-button.primary:hover),
:host(pluto-submit.primary:hover),
::part(button primary):hover {
	background-color: var(--pluto-primary-color-dark);
	border-color: var(--pluto-primary-color-dark);
}

button.secondary,
.button.secondary,
:host(pluto-button.secondary),
:host(pluto-submit.secondary),
::part(button secondary) {
	background-color: var(--pluto-secondary-color);
	border-color: var(--pluto-secondary-color);
	color: var(--pluto-text-color-light);
}

button.secondary:hover,
.button.secondary:hover,
:host(pluto-button.secondary:hover),
:host(pluto-submit.secondary:hover),
::part(button secondary):hover {
	background-color: var(--pluto-secondary-color-dark);
	border-color: var(--pluto-secondary-color-dark);
}

button.success,
.button.success,
:host(pluto-button.success),
:host(pluto-submit.success),
::part(button success) {
	background-color: var(--pluto-success-color);
	border-color: var(--pluto-success-color);
	color: var(--pluto-text-color-light);
}

button.success:hover,
.button.success:hover,
:host(pluto-button.success:hover),
:host(pluto-submit.success:hover),
::part(button success):hover {
	background-color: var(--pluto-success-color-dark);
	border-color: var(--pluto-success-color-dark);
}

button.danger,
.button.danger,
:host(pluto-button.danger),
:host(pluto-submit.danger),
::part(button danger) {
	background-color: var(--pluto-danger-color);
	border-color: var(--pluto-danger-color);
	color: var(--pluto-text-color-light);
}

button.danger:hover,
.button.danger:hover,
:host(pluto-button.danger:hover),
:host(pluto-submit.danger:hover),
::part(button danger):hover {
	background-color: var(--pluto-danger-color-dark);
	border-color: var(--pluto-danger-color-dark);
}

button.sm,
.button.sm,
:host(pluto-button.sm),
:host(pluto-submit.sm),
::part(button sm) {
	padding: 0.15rem 0.25rem;
}

button.lg,
.button.lg,
:host(pluto-button.lg),
:host(pluto-submit.lg),
::part(button lg) {
	padding: 0.75rem 1.25rem;
	font-size: 1.1rem;
}

button.xl,
.button.xl,
:host(pluto-button.xl),
:host(pluto-submit.xl),
::part(button xl) {
	padding: 1rem 1.5rem;
	font-size: 1.25rem;
}

@import url("/core/style/layout/layout.css");
* {
	box-sizing: border-box;
}

form {
	display: flex;
	flex-direction: column;
}

:host(pluto-select.w-100) select {
	width: 100%;
}

:host {
	--pluto-primary: #007bff;
	--pluto-primary-text: #ffffff;
	--pluto-border-color: #ced4da;
	--pluto-border-radius: 0.375rem;
	--pluto-bg-color: #ffffff;
	--pluto-text-color: #212529;
	--pluto-focus-ring-color: rgba(0, 123, 255, 0.25);
	--pluto-invalid-color: #dc3545;
	--pluto-hover-bg-color: #f8f9fa;
	--pluto-disabled-bg-color: #e9ecef;
	--form-group-margin-bottom: 1rem;
	--input-border-radius: 0.375rem;
}

:host(pluto-adv-select)::slotted(*) {
	--form-group-margin-bottom: 0rem;
	--input-border-radius: 0rem;
}

.form-group {
	margin-bottom: var(--form-group-margin-bottom);
}

.form-group label {
	display: flex;
	margin-bottom: 0.5rem;
	font-weight: 500;
	align-items: center;
}

.form-group .error-message {
	color: var(--pluto-invalid-color);
	font-size: 0.875rem;
	margin-top: 0.25rem;
}

:host(.is-invalid) [name],
:host(.is-invalid) .adv-select-display {
	color: var(--pluto-form-invalid-color);
	border-color: var(--pluto-form-invalid-border-color);
	background-color: var(--pluto-form-invalid-bg-color);
	outline: var(--pluto-form-invalid-outline);
}

:host(.is-invalid) label {
	color: var(--pluto-form-invalid-color);
}

:host(.is-valid) [name] {
	color: var(--pluto-success-text);
	border-color: var(--pluto-success-border);
	background-color: var(--pluto-success-bg);
}

:host(.is-valid) label {
	color: var(--pluto-success-text);
}

.vertical label.radio-label {
	flex-direction: row;
	width: 100%;
}

label.radio-label {
	flex-direction: column;
}

.radio-group.vertical {
	flex-direction: column;
	align-items: start;
	gap: 0rem;
}

.radio-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--pluto-spacing);
}

.radio-group input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 2px 5px 0px 0px;
	font: inherit;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid var(--pluto-form-border-color);
	border-radius: 100%;
	display: grid;
	place-content: center;
}

.radio-group input::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transform-origin: bottom left;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--pluto-primary);
	background-color: CanvasText;
	border-radius: 100%;
}

.radio-group input:checked::before {
	transform: scale(1);
}

.radio-group input:disabled {
	--form-control-color: var(--pluto-form-border-color);
	color: var(--pluto-form-border-color);
	border-color: var(--pluto-form-border-color);
	cursor: not-allowed;
}

.radio-group label:has(input:disabled) {
	color: var(--pluto-form-border-color);
}

.radio-group input:disabled:before {
	box-shadow: inset 1em 1em var(--pluto-form-border-color);
}

.select input[type="checkbox"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 2px 5px 0px 0px;
	font: inherit;
	width: 1.15em;
	height: 1.15em;
	border: 0.15em solid var(--pluto-form-border-color);
	border-radius: 0.15em;
	display: grid;
	place-content: center;
}

.select input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transform-origin: bottom left;
	transition: 120ms transform ease-in-out;
	box-shadow: inset 1em 1em var(--pluto-primary);
	background-color: CanvasText;
}

.select input[type="checkbox"]:checked::before {
	transform: scale(1);
}

.select input[type="checkbox"]:disabled {
	--form-control-color: var(--pluto-form-border-color);
	color: var(--pluto-form-border-color);
	border-color: var(--pluto-form-border-color);
	cursor: not-allowed;
}

.select input[type="checkbox"]:disabled ~ span {
	color: var(--pluto-form-border-color);
}

.select input[type="checkbox"]:disabled:before {
	box-shadow: inset 1em 1em var(--pluto-form-border-color);
}

.select label > input:checked + span {
	color: #29316b;
}

.checkbox label {
	cursor: pointer;
	display: block;
}

.checkbox label > input {
	display: none;
}

.checkbox label span {
	color: #6a759b;
}

.checkbox label i {
	display: inline-block;
	width: 42px;
	height: 23px;
	border-radius: 20px;
	vertical-align: middle;
	transition: 0.25s 0.09s;
	position: relative;
	background: var(--pluto-secondary-color);
}

.checkbox label i:after {
	content: " ";
	display: block;
	width: 14px;
	height: 14px;
	top: 4px;
	left: 4px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	box-shadow: 1px 2px 4px 0 var(--pluto-form-color);
	transition: 0.15s;
}

.checkbox label > input:checked + i {
	background: var(--pluto-primary);
}

.checkbox label > input:checked + i + span {
	color: #29316b;
}

.checkbox label > input:checked + i:after {
	transform: translateX(20px);
}

.adv-select {
	position: relative;
	width: 100%;
}

.adv-select-display {
	width: 100%;
	text-align: left;
	background-color: var(--pluto-form-bg-color, #fff);
	border: 1px solid var(--pluto-form-border-color, #ced4da);
	border-radius: var(--pluto-border-radius, 0.375rem);
	padding: 0.5rem 2rem 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pluto-form-color, #495057);
	cursor: pointer;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.adv-select-display:after {
	content: "";
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s ease-in-out;
}

.adv-select-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	width: 100%;
	background-color: var(--pluto-bg-color, #fff);
	border: 1px solid var(--pluto-border-color, #ced4da);
	border-radius: var(--pluto-border-radius, 0.375rem);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.adv-select-options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 200px;
	overflow-y: auto;
}

.adv-select-option,
.adv-select-option-none {
	padding: 0.5rem 0.75rem;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.adv-select-option:hover {
	background-color: var(--pluto-hover-bg-color, #f8f9fa);
}

.adv-select-option.selected {
	background-color: var(--pluto-primary, #007bff);
	color: var(--pluto-primary-text, #fff);
}

.input {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pluto-form-color, #495057);
	background-color: var(--pluto-form-bg-color, #fff);
	background-clip: padding-box;
	border: 1px solid var(--pluto-form-border-color, #ced4da);
	border-radius: var(--input-border-radius);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.input:focus {
	color: var(--pluto-form-focus-color, #495057);
	background-color: var(--pluto-form-focus-bg-color, #fff);
	border-color: var(--pluto-form-focus-border-color, #80bdff);
	outline: 0;
	box-shadow: var(--pluto-form-focus-box-shadow);
}

.textarea {
	display: block;
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pluto-form-color, #495057);
	background-color: var(--pluto-form-bg-color, #fff);
	background-clip: padding-box;
	border: 1px solid var(--pluto-form-border-color, #ced4da);
	border-radius: var(--input-border-radius);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.textarea:focus {
	color: var(--pluto-form-focus-color, #495057);
	background-color: var(--pluto-form-focus-bg-color, #fff);
	border-color: var(--pluto-form-focus-border-color, #80bdff);
	outline: 0;
	box-shadow: var(--pluto-form-focus-box-shadow);
}

select,
::part(select) {
	padding: 0.7rem 1.5rem 0.7rem 0.75rem;
	border: 1px solid var(--pluto-border-color);
	background-color: var(--pluto-bg-light);
	border-radius: var(--pluto-border-radius);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var(--accordion-icon-color)'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px;
	cursor: pointer;
	outline: none;
	font-size: 1rem;
	color: var(--pluto-form-color, #495057);
}

select:hover,
::part(select):hover {
	background-color: var(--pluto-bg-dark);
	border-color: var(--pluto-border-color);
}

/* Base & Reset */
::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px var(--pluto-secondary-color);
	border-radius: 10px;
}
::-webkit-scrollbar-thumb {
	background: var(--pluto-secondary-color-dark);
	border-radius: 10px;
}
* {
	box-sizing: border-box;
}
a {
	text-decoration: none;
	color: currentColor;
}
a:hover {
	opacity: 0.8;
}
/* Layout */
.container {
	width: 100%;
	padding-right: 1rem;
	padding-left: 1rem;
	margin-right: auto;
	margin-left: auto;
}
spacer {
	flex: 1;
}
h-stack,
v-stack {
	display: flex;
	justify-content: space-between;
}
h-stack {
	align-items: var(--pluto-align);
	flex-direction: var(--pluto-direction);
}
h-stack > * + * {
	margin-left: var(--pluto-spacing);
}
v-stack {
	align-items: var(--pluto-v-align);
	flex-direction: var(--pluto-v-direction);
}
v-stack > * + * {
	margin-left: unset;
	margin-top: var(--pluto-spacing);
}

.cursor-pointer {
	cursor: pointer;
}

.cursor-not-allowed {
	cursor: not-allowed;
}

.cursor-help {
	cursor: help;
}

.cursor-wait {
	cursor: wait;
}

.cursor-move {
	cursor: move;
}

.cursor-grab {
	cursor: grab;
}

.cursor-default {
	cursor: default;
}

.cursor-progress {
	cursor: progress;
}

.cursor-text {
	cursor: text;
}

.cursor-grabbing {
	cursor: grabbing;
}

.cursor-zoom-in {
	cursor: zoom-in;
}

.cursor-zoom-out {
	cursor: zoom-out;
}

/* Display */
.d-block {
	display: block !important;
}
.d-flex {
	display: flex !important;
}
.d-inline {
	display: inline !important;
}
.d-inline-block {
	display: inline-block !important;
}
.d-none {
	display: none !important;
}
.d-grid {
	display: grid !important;
}

/* Flexbox */
.flex-row {
	flex-direction: row !important;
}
.flex-column {
	flex-direction: column !important;
}
.flex-row-reverse {
	flex-direction: row-reverse !important;
}
.flex-column-reverse {
	flex-direction: column-reverse !important;
}
.flex-wrap {
	flex-wrap: wrap !important;
}
.flex-nowrap {
	flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
	flex-wrap: wrap-reverse !important;
}
.flex-grow-1 {
	flex-grow: 1 !important;
}
.flex-shrink-1 {
	flex-shrink: 1 !important;
}
.justify-start {
	justify-content: flex-start !important;
}
.justify-end {
	justify-content: flex-end !important;
}
.justify-center {
	justify-content: center !important;
}
.justify-between {
	justify-content: space-between !important;
}
.justify-around {
	justify-content: space-around !important;
}
.justify-evenly {
	justify-content: space-evenly !important;
}
.items-start {
	align-items: flex-start !important;
}
.items-end {
	align-items: flex-end !important;
}
.items-center {
	align-items: center !important;
}
.items-baseline {
	align-items: baseline !important;
}
.items-stretch {
	align-items: stretch !important;
}
.self-auto {
	align-self: auto !important;
}
.self-start {
	align-self: flex-start !important;
}
.self-end {
	align-self: flex-end !important;
}
.self-center {
	align-self: center !important;
}
.self-stretch {
	align-self: stretch !important;
}

/* Grid */
.grid-cols-1 {
	grid-template-columns: repeat(1, 1fr) !important;
}
.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr) !important;
}
.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr) !important;
}
.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr) !important;
}
.grid-cols-5 {
	grid-template-columns: repeat(5, 1fr) !important;
}
.grid-cols-6 {
	grid-template-columns: repeat(6, 1fr) !important;
}
.grid-cols-7 {
	grid-template-columns: repeat(7, 1fr) !important;
}
.grid-cols-8 {
	grid-template-columns: repeat(8, 1fr) !important;
}
.grid-cols-9 {
	grid-template-columns: repeat(9, 1fr) !important;
}
.grid-cols-10 {
	grid-template-columns: repeat(10, 1fr) !important;
}
.grid-cols-11 {
	grid-template-columns: repeat(11, 1fr) !important;
}
.grid-cols-12 {
	grid-template-columns: repeat(12, 1fr) !important;
}

/* Spacing */
.gap-0 {
	gap: 0 !important;
}
.gap-1 {
	gap: 0.25rem !important;
}
.gap-2 {
	gap: 0.5rem !important;
}
.gap-3 {
	gap: 0.75rem !important;
}
.gap-4 {
	gap: 1rem !important;
}
.gap-5 {
	gap: 1.25rem !important;
}
.gap-6 {
	gap: 1.5rem !important;
}
.gap-8 {
	gap: 2rem !important;
}

.p {
	padding: var(--pluto-padding);
}
.m {
	margin: var(--pluto-margin);
}
.pt {
	padding-top: var(--pluto-padding-top);
}
.pb {
	padding-bottom: var(--pluto-padding-bottom);
}
.pl {
	padding-left: var(--pluto-padding-left);
}
.pr {
	padding-right: var(--pluto-padding-right);
}
.p-0 {
	padding: 0 !important;
}
.p-1 {
	padding: calc(var(--pluto-padding) * 0.25);
}
.p-2 {
	padding: calc(var(--pluto-padding) * 0.5);
}
.p-3 {
	padding: calc(var(--pluto-padding) * 0.75);
}
.p-4 {
	padding: var(--pluto-padding);
}
.p-5 {
	padding: calc(var(--pluto-padding) * 1.25);
}
.pt-0 {
	padding-top: 0 !important;
}
.pt-1 {
	padding-top: calc(var(--pluto-padding) * 0.25);
}
.pt-2 {
	padding-top: calc(var(--pluto-padding) * 0.5);
}
.pt-3 {
	padding-top: calc(var(--pluto-padding) * 0.75);
}
.pt-4 {
	padding-top: var(--pluto-padding);
}
.pt-5 {
	padding-top: calc(var(--pluto-padding) * 1.25);
}
.pb-0 {
	padding-bottom: 0 !important;
}
.pb-1 {
	padding-bottom: calc(var(--pluto-padding) * 0.25);
}
.pb-2 {
	padding-bottom: calc(var(--pluto-padding) * 0.5);
}
.pb-3 {
	padding-bottom: calc(var(--pluto-padding) * 0.75);
}
.pb-4 {
	padding-bottom: var(--pluto-padding);
}
.pb-5 {
	padding-bottom: calc(var(--pluto-padding) * 1.25);
}
.pl-0 {
	padding-left: 0 !important;
}
.pl-1 {
	padding-left: calc(var(--pluto-padding) * 0.25);
}
.pl-2 {
	padding-left: calc(var(--pluto-padding) * 0.5);
}
.pl-3 {
	padding-left: calc(var(--pluto-padding) * 0.75);
}
.pl-4 {
	padding-left: var(--pluto-padding);
}
.pl-5 {
	padding-left: calc(var(--pluto-padding) * 1.25);
}
.pr-0 {
	padding-right: 0 !important;
}
.pr-1 {
	padding-right: calc(var(--pluto-padding) * 0.25);
}
.pr-2 {
	padding-right: calc(var(--pluto-padding) * 0.5);
}
.pr-3 {
	padding-right: calc(var(--pluto-padding) * 0.75);
}
.pr-4 {
	padding-right: var(--pluto-padding);
}
.pr-5 {
	padding-right: calc(var(--pluto-padding) * 1.25);
}
.px-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.px-1 {
	padding-left: calc(var(--pluto-padding) * 0.25);
	padding-right: calc(var(--pluto-padding) * 0.25);
}
.px-2 {
	padding-left: calc(var(--pluto-padding) * 0.5);
	padding-right: calc(var(--pluto-padding) * 0.5);
}
.px-3 {
	padding-left: calc(var(--pluto-padding) * 0.75);
	padding-right: calc(var(--pluto-padding) * 0.75);
}
.px-4 {
	padding-left: var(--pluto-padding);
	padding-right: var(--pluto-padding);
}
.px-5 {
	padding-left: calc(var(--pluto-padding) * 1.25);
	padding-right: calc(var(--pluto-padding) * 1.25);
}
.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.py-1 {
	padding-top: calc(var(--pluto-padding) * 0.25);
	padding-bottom: calc(var(--pluto-padding) * 0.25);
}
.py-2 {
	padding-top: calc(var(--pluto-padding) * 0.5);
	padding-bottom: calc(var(--pluto-padding) * 0.5);
}
.py-3 {
	padding-top: calc(var(--pluto-padding) * 0.75);
	padding-bottom: calc(var(--pluto-padding) * 0.75);
}
.py-4 {
	padding-top: var(--pluto-padding);
	padding-bottom: var(--pluto-padding);
}
.py-5 {
	padding-top: calc(var(--pluto-padding) * 1.25);
	padding-bottom: calc(var(--pluto-padding) * 1.25);
}
.mt {
	margin-top: var(--pluto-margin-top);
}
.mb {
	margin-bottom: var(--pluto-margin-bottom);
}
.ml {
	margin-left: var(--pluto-margin-left);
}
.mr {
	margin-right: var(--pluto-margin-right);
}
.m-0 {
	margin: 0 !important;
}
.m-1 {
	margin: calc(var(--pluto-margin) * 0.25);
}
.m-2 {
	margin: calc(var(--pluto-margin) * 0.5);
}
.m-3 {
	margin: calc(var(--pluto-margin) * 0.75);
}
.m-4 {
	margin: var(--pluto-margin);
}
.m-5 {
	margin: calc(var(--pluto-margin) * 1.25);
}
.mt-0 {
	margin-top: 0 !important;
}
.mt-1 {
	margin-top: calc(var(--pluto-margin) * 0.25);
}
.mt-2 {
	margin-top: calc(var(--pluto-margin) * 0.5);
}
.mt-3 {
	margin-top: calc(var(--pluto-margin) * 0.75);
}
.mt-4 {
	margin-top: var(--pluto-margin);
}
.mt-5 {
	margin-top: calc(var(--pluto-margin) * 1.25);
}
.mb-0 {
	margin-bottom: 0 !important;
}
.mb-1 {
	margin-bottom: calc(var(--pluto-margin) * 0.25);
}
.mb-2 {
	margin-bottom: calc(var(--pluto-margin) * 0.5);
}
.mb-3 {
	margin-bottom: calc(var(--pluto-margin) * 0.75);
}
.mb-4 {
	margin-bottom: var(--pluto-margin);
}
.mb-5 {
	margin-bottom: calc(var(--pluto-margin) * 1.25);
}
.ml-0 {
	margin-left: 0 !important;
}
.ml-1 {
	margin-left: calc(var(--pluto-margin) * 0.25);
}
.ml-2 {
	margin-left: calc(var(--pluto-margin) * 0.5);
}
.ml-3 {
	margin-left: calc(var(--pluto-margin) * 0.75);
}
.ml-4 {
	margin-left: var(--pluto-margin);
}
.ml-5 {
	margin-left: calc(var(--pluto-margin) * 1.25);
}
.mr-0 {
	margin-right: 0 !important;
}
.mr-1 {
	margin-right: calc(var(--pluto-margin) * 0.25);
}
.mr-2 {
	margin-right: calc(var(--pluto-margin) * 0.5);
}
.mr-3 {
	margin-right: calc(var(--pluto-margin) * 0.75);
}
.mr-4 {
	margin-right: var(--pluto-margin);
}
.mr-5 {
	margin-right: calc(var(--pluto-margin) * 1.25);
}
.mx-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mx-1 {
	margin-left: calc(var(--pluto-margin) * 0.25);
	margin-right: calc(var(--pluto-margin) * 0.25);
}
.mx-2 {
	margin-left: calc(var(--pluto-margin) * 0.5);
	margin-right: calc(var(--pluto-margin) * 0.5);
}
.mx-3 {
	margin-left: calc(var(--pluto-margin) * 0.75);
	margin-right: calc(var(--pluto-margin) * 0.75);
}
.mx-4 {
	margin-left: var(--pluto-margin);
	margin-right: var(--pluto-margin);
}
.mx-5 {
	margin-left: calc(var(--pluto-margin) * 1.25);
	margin-right: calc(var(--pluto-margin) * 1.25);
}
.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.my-1 {
	margin-top: calc(var(--pluto-margin) * 0.25);
	margin-bottom: calc(var(--pluto-margin) * 0.25);
}
.my-2 {
	margin-top: calc(var(--pluto-margin) * 0.5);
	margin-bottom: calc(var(--pluto-margin) * 0.5);
}
.my-3 {
	margin-top: calc(var(--pluto-margin) * 0.75);
	margin-bottom: calc(var(--pluto-margin) * 0.75);
}
.my-4 {
	margin-top: var(--pluto-margin);
	margin-bottom: var(--pluto-margin);
}
.my-5 {
	margin-top: calc(var(--pluto-margin) * 1.25);
	margin-bottom: calc(var(--pluto-margin) * 1.25);
}

/* Sizing */
.w-auto {
	width: auto !important;
}
.w-25 {
	width: 25% !important;
}
.w-50 {
	width: 50% !important;
}
.w-75 {
	width: 75% !important;
}
.w-100 {
	width: 100% !important;
}
.w-1\/3 {
	width: 33.333333% !important;
}
.w-2\/3 {
	width: 66.666667% !important;
}
.w-1\/4 {
	width: 25% !important;
}
.w-3\/4 {
	width: 75% !important;
}
.h-auto {
	height: auto !important;
}
.h-25 {
	height: 25% !important;
}
.h-50 {
	height: 50% !important;
}
.h-75 {
	height: 75% !important;
}
.h-100 {
	height: 100% !important;
}
.hvh-25 {
	height: 25vh;
}
.hvh-50 {
	height: 50vh;
}
.hvh-75 {
	height: 75vh;
}
.hvh-100 {
	height: 100vh;
}

/* Typography */
.fs-1 {
	font-size: 2.5rem !important;
}
.fs-2 {
	font-size: 2rem !important;
}
.fs-3 {
	font-size: 1.75rem !important;
}
.fs-4 {
	font-size: 1.5rem !important;
}
.fs-5 {
	font-size: 1.25rem !important;
}
.fs-6 {
	font-size: 1rem !important;
}
.text-sm {
	font-size: 0.875rem !important;
}
.text-xs {
	font-size: 0.75rem !important;
}
.fw-light {
	font-weight: 300 !important;
}
.fw-normal {
	font-weight: 400 !important;
}
.fw-semibold {
	font-weight: 600 !important;
}
.fw-bold {
	font-weight: 700 !important;
}
.fw-bolder {
	font-weight: 900 !important;
}
.fst-italic {
	font-style: italic !important;
}
.fst-normal {
	font-style: normal !important;
}
.text-left {
	text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.text-right {
	text-align: right !important;
}
.text-decoration-none {
	text-decoration: none !important;
}
.text-decoration-underline {
	text-decoration: underline !important;
}
.text-decoration-line-through {
	text-decoration: line-through !important;
}
.text-lowercase {
	text-transform: lowercase !important;
}
.text-uppercase {
	text-transform: uppercase !important;
}
.text-capitalize {
	text-transform: capitalize !important;
}
.text-primary {
	color: var(--pluto-primary-color) !important;
}
.text-primary-dark {
	color: var(--pluto-primary-color-dark) !important;
}
.text-secondary {
	color: var(--pluto-secondary-color) !important;
}
.text-success {
	color: var(--pluto-success-color) !important;
}
.text-danger {
	color: var(--pluto-danger-text) !important;
}
.text-warning {
	color: var(--pluto-warning-text) !important;
}
.text-info {
	color: var(--pluto-info-color) !important;
}
.text-light {
	color: var(--pluto-text-color-light) !important;
}
.text-dark {
	color: var(--pluto-text-color-dark) !important;
}
.text-muted {
	color: var(--pluto-secondary-color) !important;
}

/* Backgrounds */
.bg-primary {
	background-color: var(--pluto-primary-color) !important;
}
.bg-light {
	background-color: var(--pluto-bg-light) !important;
}
.bg-dark {
	background-color: var(--pluto-bg-dark) !important;
}
.bg-success {
	background-color: var(--pluto-success-bg) !important;
}
.bg-danger {
	background-color: var(--pluto-danger-bg) !important;
}
.bg-warning {
	background-color: var(--pluto-warning-bg) !important;
}
.bg-info {
	background-color: var(--pluto-info-bg) !important;
}

/* Borders */
.border-0 {
	border-width: 0 !important;
	border-style: solid;
}
.border {
	border-width: 1px !important;
	border-style: solid;
}
.border-1 {
	border-width: 1px !important;
	border-style: solid;
}
.border-2 {
	border-width: 2px !important;
	border-style: solid;
}
.border-3 {
	border-width: 3px !important;
	border-style: solid;
}
.border-primary {
	border-color: var(--pluto-primary-color) !important;
}
.border-secondary {
	border-color: var(--pluto-secondary-color) !important;
}
.border-success {
	border-color: var(--pluto-success-color) !important;
}
.border-danger {
	border-color: var(--pluto-danger-color) !important;
}
.border-warning {
	border-color: var(--pluto-warning-color) !important;
}
.border-info {
	border-color: var(--pluto-info-color) !important;
}

/* Position */
.relative {
	position: relative !important;
}
.absolute {
	position: absolute !important;
}
.fixed {
	position: fixed !important;
}
.sticky {
	position: sticky !important;
}
.top-0 {
	top: 0 !important;
}
.bottom-0 {
	bottom: 0 !important;
}
.left-0 {
	left: 0 !important;
}
.right-0 {
	right: 0 !important;
}
.top-50 {
	top: 50% !important;
}
.left-50 {
	left: 50% !important;
}
.translate-middle {
	transform: translate(-50%, -50%) !important;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
	.sm\:d-none {
		display: none !important;
	}
	.sm\:d-block {
		display: block !important;
	}
	.sm\:d-flex {
		display: flex !important;
	}
	.sm\:d-grid {
		display: grid !important;
	}
	.sm\:grid-cols-1 {
		grid-template-columns: 1fr !important;
	}
	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.sm\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.sm\:grid-cols-5 {
		grid-template-columns: repeat(5, 1fr) !important;
	}
	.sm\:grid-cols-6 {
		grid-template-columns: repeat(6, 1fr) !important;
	}
	.sm\:grid-cols-7 {
		grid-template-columns: repeat(7, 1fr) !important;
	}
	.sm\:grid-cols-8 {
		grid-template-columns: repeat(8, 1fr) !important;
	}
	.sm\:grid-cols-9 {
		grid-template-columns: repeat(9, 1fr) !important;
	}
	.sm\:grid-cols-10 {
		grid-template-columns: repeat(10, 1fr) !important;
	}
	.sm\:grid-cols-11 {
		grid-template-columns: repeat(11, 1fr) !important;
	}
	.sm\:grid-cols-12 {
		grid-template-columns: repeat(12, 1fr) !important;
	}
	.sm\:flex-col {
		flex-direction: column !important;
	}
	.sm\:w-auto {
		width: auto !important;
	}
	.sm\:w-25 {
		width: 25% !important;
	}
	.sm\:w-50 {
		width: 50% !important;
	}
	.sm\:w-75 {
		width: 75% !important;
	}
	.sm\:w-100 {
		width: 100% !important;
	}
	.sm\:w-1\/3 {
		width: 33.333333% !important;
	}
	.sm\:w-2\/3 {
		width: 66.666667% !important;
	}
	.sm\:w-1\/4 {
		width: 25% !important;
	}
	.sm\:w-3\/4 {
		width: 75% !important;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
	.md\:d-none {
		display: none !important;
	}
	.md\:d-block {
		display: block !important;
	}
	.md\:d-flex {
		display: flex !important;
	}
	.md\:d-grid {
		display: grid !important;
	}
	.md\:grid-cols-1 {
		grid-template-columns: 1fr !important;
	}
	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.md\:grid-cols-5 {
		grid-template-columns: repeat(5, 1fr) !important;
	}
	.md\:grid-cols-6 {
		grid-template-columns: repeat(6, 1fr) !important;
	}
	.md\:grid-cols-7 {
		grid-template-columns: repeat(7, 1fr) !important;
	}
	.md\:grid-cols-8 {
		grid-template-columns: repeat(8, 1fr) !important;
	}
	.md\:grid-cols-9 {
		grid-template-columns: repeat(9, 1fr) !important;
	}
	.md\:grid-cols-10 {
		grid-template-columns: repeat(10, 1fr) !important;
	}
	.md\:grid-cols-11 {
		grid-template-columns: repeat(11, 1fr) !important;
	}
	.md\:grid-cols-12 {
		grid-template-columns: repeat(12, 1fr) !important;
	}
	.md\:flex-row {
		flex-direction: row !important;
	}
	.md\:flex-col {
		flex-direction: column !important;
	}
	.md\:justify-start {
		justify-content: flex-start !important;
	}
	.md\:justify-end {
		justify-content: flex-end !important;
	}
	.md\:justify-center {
		justify-content: center !important;
	}
	.md\:justify-between {
		justify-content: space-between !important;
	}
	.md\:items-start {
		align-items: flex-start !important;
	}
	.md\:items-end {
		align-items: flex-end !important;
	}
	.md\:items-center {
		align-items: center !important;
	}
	.md\:text-left {
		text-align: left !important;
	}
	.md\:text-center {
		text-align: center !important;
	}
	.md\:text-right {
		text-align: right !important;
	}
	.md\:w-auto {
		width: auto !important;
	}
	.md\:w-25 {
		width: 25% !important;
	}
	.md\:w-50 {
		width: 50% !important;
	}
	.md\:w-75 {
		width: 75% !important;
	}
	.md\:w-100 {
		width: 100% !important;
	}
	.md\:w-1\/3 {
		width: 33.333333% !important;
	}
	.md\:w-2\/3 {
		width: 66.666667% !important;
	}
	.md\:w-1\/4 {
		width: 25% !important;
	}
	.md\:w-3\/4 {
		width: 75% !important;
	}
	.md\:w-1\/2 {
		width: 50% !important;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 1025px) {
	.container {
		max-width: 960px;
	}
	.lg\:w-1\/3 {
		width: 33.333333% !important;
	}
	.lg\:d-none {
		display: none !important;
	}
	.lg\:d-block {
		display: block !important;
	}
	.lg\:d-flex {
		display: flex !important;
	}
	.lg\:d-grid {
		display: grid !important;
	}
	.lg\:grid-cols-1 {
		grid-template-columns: 1fr !important;
	}
	.lg\:grid-cols-2 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr) !important;
	}
	.lg\:grid-cols-5 {
		grid-template-columns: repeat(5, 1fr) !important;
	}
	.lg\:grid-cols-6 {
		grid-template-columns: repeat(6, 1fr) !important;
	}
	.lg\:grid-cols-7 {
		grid-template-columns: repeat(7, 1fr) !important;
	}
	.lg\:grid-cols-8 {
		grid-template-columns: repeat(8, 1fr) !important;
	}
	.lg\:grid-cols-9 {
		grid-template-columns: repeat(9, 1fr) !important;
	}
	.lg\:grid-cols-10 {
		grid-template-columns: repeat(10, 1fr) !important;
	}
	.lg\:grid-cols-11 {
		grid-template-columns: repeat(11, 1fr) !important;
	}
	.lg\:grid-cols-12 {
		grid-template-columns: repeat(12, 1fr) !important;
	}
	.lg\:flex-row {
		flex-direction: row !important;
	}
	.lg\:flex-col {
		flex-direction: column !important;
	}
	.lg\:justify-start {
		justify-content: flex-start !important;
	}
	.lg\:justify-end {
		justify-content: flex-end !important;
	}
	.lg\:justify-center {
		justify-content: center !important;
	}
	.lg\:justify-between {
		justify-content: space-between !important;
	}
	.lg\:items-start {
		align-items: flex-start !important;
	}
	.lg\:items-end {
		align-items: flex-end !important;
	}
	.lg\:items-center {
		align-items: center !important;
	}
	.lg\:text-left {
		text-align: left !important;
	}
	.lg\:text-center {
		text-align: center !important;
	}
	.lg\:text-right {
		text-align: right !important;
	}
	.lg\:w-auto {
		width: auto !important;
	}
	.lg\:w-25 {
		width: 25% !important;
	}
	.lg\:w-50 {
		width: 50% !important;
	}
	.lg\:w-75 {
		width: 75% !important;
	}
	.lg\:w-100 {
		width: 100% !important;
	}
	.lg\:w-1\/3 {
		width: 33.333333% !important;
	}
	.lg\:w-2\/3 {
		width: 66.666667% !important;
	}
	.lg\:w-1\/4 {
		width: 25% !important;
	}
	.lg\:w-3\/4 {
		width: 75% !important;
	}
	.lg\:w-1\/2 {
		width: 50% !important;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

.navbar {
	background-color: #ffffff;
	border-bottom: 1px solid #e5e7eb;
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.navbar-brand {
	font-weight: 700;
	font-size: 1.25rem;
	color: #4f46e5;
	text-decoration: none;
}

.navbar-menu a {
	color: #374151;
	text-decoration: none;
	margin-left: 1.5rem;
	font-size: 0.95rem;
	transition: color 0.2s;
}

.navbar-menu a:hover {
	color: #4f46e5;
}

.breadcrumb {
	list-style: none;
	display: flex;
	padding: 0;
}