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

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

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

.btn.btn-xs {
	height: 24px;
	padding: var(--size-xs);

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: .8rem;
	aspect-ratio: 1/1;
}

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);
	border-color: var(--clr-primary);
	transition: all .15s;
}
.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-dark);
	border-color: var(--clr-primary-dark);
	transition: all .15s;
}

.btn.btn-secondary {
	background-color: var(--clr-secondary);
	border-color: var(--clr-secondary);
	transition: all .15s;
}
.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;
}

.btn.btn-tertiary {
	background-color: var(--clr-surface-a20);
	border-color: var(--clr-surface-a20);
	transition: all .15s;
}
.btn.btn-tertiary:hover,
.btn.btn-tertiary:active,
.btn.btn-tertiary:focus,
.btn.btn-tertiary:focus-visible,
.btn.btn-tertiary:focus-within {
	background-color: var(--clr-surface-a30);
	border-color: var(--clr-surface-a30);
	transition: all .15s;
}

.btn.btn-cancel {
	color: #FFFFFF;
	background-color: var(--clr-red);
	border-color: var(--clr-red);
}
.btn.btn-cancel:hover,
.btn.btn-cancel:active,
.btn.btn-cancel:focus,
.btn.btn-cancel:focus-visible,
.btn.btn-cancel:focus-within {
	color: #FFFFFF;
	background-color: var(--clr-red-dark);
	border-color: var(--clr-red-dark);

	transition: all .15s;
}

.btn.btn-icon {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
}

.btn.btn-square {
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1/1;
}

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

h1 {}

h2 {}

h3 {}

h4 {}

h5 {}

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

.no-data {
	display: flex;
	font-weight: 500;
}

.text-white {
	color: #FFFFFF;
}
.text-black {
	color: #000000;
}
.text-primary {
	color: var(--clr-primary) !important;
}
.text-secondary {
	color: var(--clr-secondary) !important;
}
.text-danger {
	color: var(--clr-red) !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;
}

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

.form-control,
.input-group-text {
	border-radius: var(--radius-xs);
}

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

.overflow-hidden {
	overflow: hidden !important;
}

/* ==================================================================== */
/* =============================== 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-content-space-between {
	justify-content: space-between;
}
.justify-content-end {
	justify-content: flex-end;
}
.justify-content-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);
}
.row-gap-xl {
	row-gap: var(--size-xl);
}

.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);
}
.col-gap-xl {
	column-gap: var(--size-xl);
}

/* =============================== 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: var(--size-xs);
}
.padding-s {
	padding: var(--size-s);
}
.padding-m {
	padding: var(--size-m);
}
.padding-l {
	padding: var(--size-l);
}

.padding-w-xs {
	padding: var(--size-xs) 0;
}
.padding-w-s {
	padding: var(--size-s) 0;
}
.padding-w-m {
	padding: var(--size-m) 0;
}
.padding-w-l {
	padding: var(--size-l) 0;
}

.padding-h-xs {
	padding: 0 var(--size-xs);
}
.padding-h-s {
	padding: 0 var(--size-s);
}
.padding-h-m {
	padding: 0 var(--size-m);
}
.padding-h-l {
	padding: 0 var(--size-l);
}

.margin-center {
	margin: auto;
}

.margin-l-auto {
	margin-left: auto !important;
}
.margin-r-auto {
	margin-right: auto !important;
}
.margin-t-auto {
	margin-top: auto !important;
}
.margin-b-auto {
	margin-bottom: auto !important;
}

.margin-l-xs {
	margin-left: var(--size-xs);
}
.margin-l-s {
	margin-left: var(--size-s);
}
.margin-l-m {
	margin-left: var(--size-m);
}
.margin-l-l {
	margin-left: var(--size-l);
}

.margin-r-xs {
	margin-right: var(--size-xs);
}
.margin-r-s {
	margin-right: var(--size-s);
}
.margin-r-m {
	margin-right: var(--size-m);
}
.margin-r-l {
	margin-right: var(--size-l);
}

.margin-t-xs {
	margin-top: var(--size-xs);
}
.margin-t-s {
	margin-top: var(--size-s);
}
.margin-t-m {
	margin-top: var(--size-m);
}
.margin-t-l {
	margin-top: var(--size-l);
}

.margin-b-xs {
	margin-bottom: var(--size-xs);
}
.margin-b-s {
	margin-bottom: var(--size-s);
}
.margin-b-m {
	margin-bottom: var(--size-m);
}
.margin-b-l {
	margin-bottom: var(--size-l);
}

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

.no-bg {
	background: none;
}

/* ==================================================================== */
/* ============================== ALERTIFY ============================ */
/* ==================================================================== */

.alertify .ajs-dialog {
	border-radius: var(--radius-m);
	overflow: hidden;

	box-shadow: rgba(0,0,0,.24) 0 3px 8px;
}

.ajs-message {
	border-radius: var(--radius-m);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.ajs-success {
	background: var(--clr-green) !important;
	color: #FFFFFF;
	font-weight: 500;
}

.ajs-success::before {
	font: var(--fa-font-solid);
	content: '\f164';
	margin-right: var(--size-m);
	color: #FFFFFF;
}

.ajs-warning {
	background: var(--clr-orange) !important;
	color: #FFFFFF;
	font-weight: 500;
}

.ajs-warning::before {
	font: var(--fa-font-solid);
	content: '\f071';
	margin-right: var(--size-m);
	color: #FFFFFF;
}

.ajs-error {
	background: var(--clr-red) !important;
	color: #FFFFFF;
	font-weight: 500;
}

.ajs-error::before {
	font: var(--fa-font-solid);
	content: '\f00d';
	margin-right: var(--size-m);
	color: #FFFFFF;
}

.ajs-button {
	border-radius: var(--radius-s);
}

.ajs-button.ajs-ok {
	background: var(--clr-primary);
	color: #FFFFFF;
	border: none;

	transition: all .15s;
}

.ajs-button.ajs-ok:hover {
	background: var(--clr-primary-dark);

	transition: all .15s;
}

/* ==================================================================== */
/* ================================ ICONS ============================= */
/* ==================================================================== */

.icon-stack {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-stack > .over {
	position: absolute;
	font-size: 1.4em;
}

/* ==================================================================== */
/* =============================== LOADERS ============================ */
/* ==================================================================== */

.spinner-border.small {
	height: 16px;
	width: 16px;
}
.spinner-border.medium {
	height: 24px;
	width: 24px;
}
.spinner-border.large {
	height: 32px;
	width: 32px;
}
.spinner-border.extra-large {
	height: 40px;
	width: 40px;
}

/* ==================================================================== */
/* =============================== VERSION ============================ */
/* ==================================================================== */

.version-container {
	position: absolute;
	bottom: 0;
	left: 0;

	width: fit-content;
	padding: var(--size-xs);
	
	font-size: .8rem;

	border-top-right-radius: var(--radius-s);
	color: #FFF;
	background: var(--clr-primary);
}