/* ==================================================================== */
/* ============================== BUTTONS ============================= */
/* ==================================================================== */

/* .btn {
	border-radius: var(--radius-s);
	outline: none;
	box-shadow: none;
}

a.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: var(--size-s);

	font-weight: 500;
}

a.btn.disabled {
	pointer-events: none;
	filter: grayscale(1);
	cursor: not-allowed;
}

.btn.btn-primary {
	background-color: var(--clr-primary-light);
	border-color: var(--clr-primary-light);
}

.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:focus-visible,
.btn.btn-primary:focus-within {
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);

	transition: all .15s;
}

.btn.btn-secondary {
	background-color: var(--clr-secondary);
	border-color: var(--clr-secondary);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:active,
.btn.btn-secondary:focus,
.btn.btn-secondary:focus-visible,
.btn.btn-secondary:focus-within {
	background-color: var(--clr-secondary-dark);
	border-color: var(--clr-secondary-dark);

	transition: all .15s;
} */

/* ==================================================================== */
/* ============================== HEADERS ============================= */
/* ==================================================================== */

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

/* ==================================================================== */
/* =============================== TEXT =============================== */
/* ==================================================================== */

.text-white {
	color: #FFFFFF;
}

.text-black {
	color: #000000;
}

.text-primary {
	color: var(--clr-primary) !important;
}

.text-secondary {
	color: var(--clr-secondary) !important;
}

.text-no-wrap {
	text-wrap: nowrap;
}

.font-weight-100 {
	font-weight: 100;
}

.font-weight-200 {
	font-weight: 200;
}

.font-weight-300 {
	font-weight: 300;
}

.font-weight-400 {
	font-weight: 400;
}

.font-weight-500 {
	font-weight: 500;
}

.font-weight-600 {
	font-weight: 600;
}

.font-weight-700 {
	font-weight: 700;
}

.font-weight-800 {
	font-weight: 800;
}

.font-weight-900 {
	font-weight: 900;
}

.text-detail {
	font-size: .8rem;
	font-weight: 100;
	font-style: italic;
}

/* ==================================================================== */
/* ================================ FORM ============================== */
/* ==================================================================== */

/* ==================================================================== */
/* ============================= CONTAINER ============================ */
/* ==================================================================== */

.main-container {
	min-height: 100vh;
	background: var(--bs-light);
}

.page-container {

}

/* ==================================================================== */
/* =============================== LAYOUT ============================= */
/* ==================================================================== */

/* =============================== FLEX ============================= */

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

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

.flex-0 {
	flex: 0 !important;
}

.flex-05 {
	flex: 0.5 !important;
}

.flex-1 {
	flex: 1 !important;
}

.flex-2 {
	flex: 2 !important;
}

.flex-3 {
	flex: 3 !important;
}

.flex-4 {
	flex: 4 !important;
}

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

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

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

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

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

.row-gap-xs {
	row-gap: var(--size-xs);
}

.row-gap-s {
	row-gap: var(--size-s);
}

.row-gap-m {
	row-gap: var(--size-m);
}

.row-gap-l {
	row-gap: var(--size-l);
}

.col-gap-xs {
	column-gap: var(--size-xs);
}

.col-gap-s {
	column-gap: var(--size-s);
}

.col-gap-m {
	column-gap: var(--size-m);
}

.col-gap-l {
	column-gap: var(--size-l);
}

/* =============================== SIZE ============================= */

.h-full {
	height: 100%;
}

.w-full {
	width: 100%;
}

.w-h-full {
	height: 100%;
	width: 100%;
}

.w-fit {
	width: fit-content !important;
}

.w-min-fit-content {
	min-width: fit-content !important;
}

.spacer-h {
	height: 100%;
}

.spacer-w {
	width: 100%;
}

/* =============================== POSITIONS ============================= */

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.absolute-right {
	right: 0px !important;
}

.absolute-left {
	left: 0px !important;
}

.absolute-center {
	left: 50% !important;
	transform: translateX(-50%);
}

/* =============================== PADDING / MARGIN ============================= */

.no-padding {
	padding: 0 !important;
}

.no-margin {
	margin: 0 !important;
}

.padding-xs {
	padding: 4px;
}

.padding-s {
	padding: 8px;
}

.padding-m {
	padding: 16px;
}

.padding-l {
	padding: 16px;
}

.padding-w-xs {
	padding: 4px 0;
}

.padding-w-s {
	padding: 8px 0;
}

.padding-w-m {
	padding: 16px 0;
}

.padding-w-l {
	padding: 16px 0;
}

.padding-h-xs {
	padding: 0 4px;
}

.padding-h-s {
	padding: 0 8px;
}

.padding-h-m {
	padding: 0 16px;
}

.padding-h-l {
	padding: 0 16px;
}

.margin-center {
	margin: auto;
}

.margin-l-xs {
	margin-left: 4px;
}

.margin-l-s {
	margin-left: 8px;
}

.margin-l-m {
	margin-left: 16px;
}

.margin-l-l {
	margin-left: 32px;
}

.margin-t-xs {
	margin-top: 4px;
}

.margin-t-s {
	margin-top: 8px;
}

.margin-t-m {
	margin-top: 16px;
}

.margin-t-l {
	margin-top: 32px;
}

/* ==================================================================== */
/* =============================== COLORS ============================= */
/* ==================================================================== */

.no-bg {
	background: none;
}