/**
 * This file contains CSS variables (and their default values) not presesent in the native Bootstrap variables, and how to apply them.
 * This allows the overwriting of these and the native Bootstrap variables by the actual whitelabel values coming from the management app site settings.
 * Currently catering for Bootstrap version v5.1.3.
 * See https://getbootstrap.com/docs/5.1/customize/css-variables/
 */

/**
 * Colors
 */

:root {

	/* Darker variations */
	--bs-primary-darker: var( --bs-primary );
	--bs-secondary-darker: var( --bs-secondary );
	--bs-success-darker: var( --bs-success );
	--bs-info-darker: var( --bs-info );
	--bs-warning-darker: var( --bs-warning );
	--bs-danger-darker: var( --bs-danger );

	/* Lighter variations */
	--bs-primary-lighter: var( --bs-primary );
	--bs-secondary-lighter: var( --bs-secondary );
	--bs-success-lighter: var( --bs-success );
	--bs-info-lighter: var( --bs-info );
	--bs-warning-lighter: var( --bs-warning );
	--bs-danger-lighter: var( --bs-danger );

}

/**
 * Background variations
 */
/* Darker variations */
.bg-primary-darker {
	background-color: var( --bs-primary-darker ) !important;
}
.bg-secondary-darker {
	background-color: var( --bs-secondary-darker ) !important;
}
.bg-success-darker {
	background-color: var( --bs-success-darker ) !important;
}
.bg-info-darker {
	background-color: var( --bs-info-darker ) !important;
}
.bg-warning-darker {
	background-color: var( --bs-warning-darker ) !important;
}
.bg-danger-darker {
	background-color: var( --bs-danger-darker ) !important;
}
/* Lighter variations */
.bg-primary-lighter {
	background-color: var( --bs-primary-lighter ) !important;
}
.bg-secondary-lighter {
	background-color: var( --bs-secondary-lighter ) !important;
}
.bg-success-lighter {
	background-color: var( --bs-success-lighter ) !important;
}
.bg-info-lighter {
	background-color: var( --bs-info-lighter ) !important;
}
.bg-warning-lighter {
	background-color: var( --bs-warning-lighter ) !important;
}
.bg-danger-lighter {
	background-color: var( --bs-danger-lighter ) !important;
}

/**
 * Typography: Headers
 */

:root {
	--bs-headings-font-family: var( --bs-body-font-family );
	--bs-headings-color-rgb: var( --bs-body-color-rgb );
	--bs-headings-color: var( --bs-body-color );
	--bs-h0-font-size: 4.25rem;
	--bs-h1-font-size: 3rem;
	--bs-h2-font-size: 2.5rem;
	--bs-h3-font-size: 2rem;
	--bs-h4-font-size: 1.5rem;
	--bs-h5-font-size: 1.25rem;
	--bs-h6-font-size: 1rem;
	--bs-h0-font-size-sm: var( --bs-h2-font-size );
	--bs-h2-font-size-sm: var( --bs-h3-font-size );
}
h1, h2, h3, h4, h5, h6, .h0, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var( --bs-headings-font-family );
	color: var( --bs-headings-color );
	font-weight: var( --bs-headings-font-weight, 600 );
	text-transform: var( --bs-headings-text-transform, none );
}
.title {
	font-family: var( --bs-title-font-family, var( --bs-headings-font-family ) ) !important;
	text-transform: var( --bs-title-text-transform, var( --bs-headings-text-transform, none ) );
	font-weight: var( --bs-title-font-weight, var( --bs-headings-font-weight, 600 ) );
}
.h0 {
	font-size: var( --bs-h0-font-size );
}
@media ( max-width: 767.98px ) {
	.h0 {
		font-size: var( --bs-h0-font-size-sm );
	}
	h1, h2, .h1, .h2 {
		font-size: var( --bs-h2-font-size-sm );
	}
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	color: var( --bs-headings-color );
}
.lead {
	font-size: var( --bs-large-font-size );
}

/**
 * Typography: Colored links
 */

.link-primary {
	color: var( --bs-primary );
}
.link-secondary {
	color: var( --bs-secondary );
}
.link-success {
	color: var( --bs-success );
}
.link-info {
	color: var( --bs-info );
}
.link-warning {
	color: var( --bs-warning );
}
.link-danger {
	color: var( --bs-danger );
}
.link-light {
	color: var( --bs-light );
}
.link-dark {
	color: var( --bs-dark );
}

.link-primary:hover, .link-primary:active, .link-primary:focus {
	color: var( --bs-primary-darker );
}
.link-secondary:hover, .link-secondary:active, .link-secondary:focus {
	color: var( --bs-secondary-darker );
}
.link-success:hover, .link-success:active, .link-success:focus {
	color: var( --bs-success-darker );
}
.link-info:hover, .link-info:active, .link-info:focus {
	color: var( --bs-info-darker );
}
.link-warning:hover, .link-warning:active, .link-warning:focus {
	color: var( --bs-warning-darker );
}
.link-danger:hover, .link-danger:active, .link-danger:focus {
	color: var( --bs-danger-darker );
}
.link-light:hover, .link-light:active, .link-light:focus {
	color: var( --bs-light-lighter );
}
.link-dark:hover, .link-dark:active, .link-dark:focus {
	color: var( --bs-dark-darker );
}

/**
 * Buttons
 */

:root {
	--bs-btn-padding-x: 1rem;  /* (bs default, remove at 5.2) */
	--bs-btn-padding-y: 0.5rem; /* (bs default, remove at 5.2) */
	--bs-btn-padding-x-sm: 1.25rem;
	--bs-btn-padding-y-sm: 0.75rem;
}
.btn:not( .btn-sm ) {
	padding: var( --bs-btn-padding-y ) var( --bs-btn-padding-x );
}
@media ( max-width: 575.98px ) {
	.btn:not( .btn-sm ) {
		width: 100%;
		padding: var( --bs-btn-padding-y-sm ) var( --bs-btn-padding-x-sm );
	}
}

.btn {
	border-radius: var( --button-radius );
}
.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
	background: var( --button-primary-bg-color, var( --bs-primary ) );
	border-color: var( --button-primary-bg-color, var( --bs-primary ) );
	color: var( --button-primary-text-color, var( --bs-primary-button-text-color ) );
	border-radius: var( --button-primary-radius, var( --button-radius ) ) !important;
}
.btn-secondary, .btn-secondary:disabled, .btn-secondary.disabled {
	background: var( --button-secondary-bg-color, var( --bs-secondary ) );
	border-color: var( --button-secondary-bg-color, var( --bs-secondary ) );
	color: var( --button-secondary-text-color, var( --bs-secondary-button-text-color ) );
	border-radius: var( --button-secondary-radius, var( --button-radius ) ) !important;
}
.btn-success, .btn-success:disabled, .btn-success.disabled {
	background: var( --button-success-bg-color, var( --bs-success ) );
	border-color: var( --button-success-bg-color, var( --bs-success ) );
	color: var( --button-success-text-color, var( --bs-success-button-text-color ) );
	border-radius: var( --button-success-radius, var( --button-radius ) ) !important;
}
.btn-info, .btn-info:disabled, .btn-info.disabled {
	background: var( --button-info-bg-color, var( --bs-info ) );
	border-color: var( --button-info-bg-color, var( --bs-info ) );
	color: var( --button-info-text-color, var( --bs-info-button-text-color ) );
	border-radius: var( --button-info-radius, var( --button-radius ) ) !important;
}
.btn-warning, .btn-warning:disabled, .btn-warning.disabled {
	background: var( --button-warning-bg-color, var( --bs-warning ) );
	border-color: var( --button-warning-bg-color, var( --bs-warning ) );
	color: var( --button-warning-text-color, var( --bs-warning-button-text-color ) );
	border-radius: var( --button-warning-radius, var( --button-radius ) ) !important;
}
.btn-danger, .btn-danger:disabled, .btn-danger.disabled {
	background: var( --button-danger-bg-color, var( --bs-danger ) );
	border-color: var( --button-danger-bg-color, var( --bs-danger ) );
	color: var( --button-danger-text-color, var( --bs-danger-button-text-color ) );
	border-radius: var( --button-danger-radius, var( --button-radius ) ) !important;
}
.btn-light, .btn-light:disabled, .btn-light.disabled {
	background: var( --button-light-bg-color, var( --bs-light ) );
	border-color: var( --button-light-bg-color, var( --bs-light ) );
	color: var( --button-light-text-color, var( --bs-light-button-text-color ) );
	border-radius: var( --button-light-radius, var( --button-radius ) ) !important;
}
.btn-dark, .btn-dark:disabled, .btn-dark.disabled {
	background: var( --button-dark-bg-color, var( --bs-dark ) );
	border-color: var( --button-dark-bg-color, var( --bs-dark ) );
	color: var( --button-dark-text-color, var( --bs-dark-button-text-color ) );
	border-radius: var( --button-dark-radius, var( --button-radius ) ) !important;
}
.btn-white, .btn-white:disabled, .btn-white.disabled {
	background: var( --button-white-bg-color, var( --bs-white ) );
	border-color: var( --button-white-bg-color, var( --bs-white ) );
	color: var( --button-white-text-color, var( --bs-white-button-text-color, var( --bs-dark ) ) );
	border-radius: var( --button-white-radius, var( --button-radius ) ) !important;
}
.btn-cta, .btn-cta:disabled, .btn-cta.disabled {
	background: var( --button-cta-bg-color, var( --bs-cta ) );
	border-color: var( --button-cta-bg-color, var( --bs-cta ) );
	color: var( --button-cta-text-color, var( --bs-cta-button-text-color, var( --bs-dark ) ) ) !important;
	border-radius: var( --button-cta-radius, var( --button-radius ) ) !important;
}

.btn-white:hover, .btn-white:active,
.btn-white:focus, .btn-white.active {
	background: var( --bs-light );
	border-color: var( --bs-light );
	color: var( --bs-white-button-text-color, var( --bs-dark ) );
}

.btn-outline-primary, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
	color: var( --bs-primary );
	border-color: var( --bs-primary );
}
.btn-outline-secondary, .btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
	color: var( --bs-secondary );
	border-color: var( --bs-secondary );
}
.btn-outline-success, .btn-outline-success:disabled, .btn-outline-success.disabled {
	color: var( --bs-success );
	border-color: var( --bs-success );
}
.btn-outline-info, .btn-outline-info:disabled, .btn-outline-info.disabled {
	color: var( --bs-info );
	border-color: var( --bs-info );
}
.btn-outline-warning, .btn-outline-warning:disabled, .btn-outline-warning.disabled {
	color: var( --bs-warning );
	border-color: var( --bs-warning );
}
.btn-outline-danger, .btn-outline-danger:disabled, .btn-outline-danger.disabled {
	color: var( --bs-danger );
	border-color: var( --bs-danger );
}
.btn-outline-light, .btn-outline-light:disabled, .btn-outline-light.disabled {
	color: var( --bs-light );
	border-color: var( --bs-light );
}
.btn-outline-dark, .btn-outline-dark:disabled, .btn-outline-dark.disabled {
	color: var( --bs-dark );
	border-color: rgba( var( --bs-dark-rgb ), 0.25 );
}
.btn-outline-white, .btn-outline-white:disabled, .btn-outline-white.disabled {
	color: var( --bs-white );
	border-color: var( --bs-white );
}
.btn-outline-cta, .btn-outline-cta:disabled, .btn-outline-cta.disabled {
	color: var( --bs-cta );
	border-color: var( --bs-cta );
}

.btn-outline-primary:hover, .btn-outline-primary:active,
.btn-outline-primary:focus, .btn-outline-primary.active {
	background-color: var( --bs-primary );
	border-color: var( --bs-primary );
}
.btn-outline-secondary:hover, .btn-outline-secondary:active,
.btn-outline-secondary:focus, .btn-outline-secondary.active {
	background-color: var( --bs-secondary );
	border-color: var( --bs-secondary );
}
.btn-outline-success:hover, .btn-outline-success:active,
.btn-outline-success:focus, .btn-outline-success:active {
	background-color: var( --bs-success );
	border-color: var( --bs-success );
}
.btn-outline-info:hover, .btn-outline-info:active,
.btn-outline-info:focus, .btn-outline-info.active {
	background-color: var( --bs-info );
	border-color: var( --bs-info );
}
.btn-outline-warning:hover, .btn-outline-warning:active,
.btn-outline-warning:focus, .btn-outline-warning.active {
	background-color: var( --bs-warning );
	border-color: var( --bs-warning );
}
.btn-outline-danger:hover, .btn-outline-danger:active,
.btn-outline-danger:focus, .btn-outline-danger.active {
	background-color: var( --bs-danger );
	border-color: var( --bs-danger );
}
.btn-outline-light:hover, .btn-outline-light:active,
.btn-outline-light:focus, .btn-outline-light.active {
	background-color: var( --bs-light );
	border-color: var( --bs-light );
}
.btn-outline-dark:hover, .btn-outline-dark:active,
.btn-outline-dark:focus, .btn-outline-dark.active {
	background-color: var( --bs-dark );
	border-color: var( --bs-dark );
}
.btn-outline-white:hover, .btn-outline-white:active,
.btn-outline-white:focus, .btn-outline-white.active {
	background-color: var( --bs-white );
	border-color: var( --bs-white );
	color: var( --bs-dark );
}
.btn-outline-cta:hover, .btn-outline-cta:active,
.btn-outline-cta:focus, .btn-outline-cta.active {
	background-color: var( --bs-cta );
	border-color: var( --bs-cta );
	color: var( --bs-dark );
}
/* .btn-check + .btn:hover, */
/* .btn-check + .btn:focus, */
/* .btn-check + .btn:active, */
.btn-check:checked + .btn {
	background-color: var( --bs-secondary );
	border-color: var( --bs-secondary );
	color: var( --bs-white );
}

/**
 * Badge component
 */

.badge {
	padding: var( --bs-badge-padding-y, 0.35em ) var( --bs-badge-padding-x, 0.65em );
	border: 1px solid transparent;
}
.badge-sm {
	padding: var( --bs-badge-sm-padding-y, 0.167em ) var( --bs-badge-sm-padding-x, 0.38em );
}
.badge-md {
	font-size: 1rem;
}
.badge.bg-white {
	background-color: var( --bs-badge-white-bg, var( --bs-white ) ) !important;
	color: var( --bs-badge-white-text, var( --bs-dark ) );
	border-color: var( --bs-badge-white-border, transparent );
}
.badge.bg-light {
	background-color: var( --bs-badge-light-bg, var( --bs-light ) ) !important;
	color: var( --bs-badge-light-text, var( --bs-dark ) );
	border-color: var( --bs-badge-light-border, var( --bs-border-color ) );
}
.badge.bg-primary {
	background-color: var( --bs-badge-primary-bg, var( --bs-primary ) ) !important;
	color: var( --bs-badge-primary-text, var( --bs-white ) );
	border-color: var( --bs-badge-primary-border, transparent );
}
.badge.bg-secondary {
	background-color: var( --bs-badge-secondary-bg, var( --bs-secondary ) ) !important;
	color: var( --bs-badge-secondary-text, var( --bs-white ) );
	border-color: var( --bs-badge-secondary-border, transparent );
}
.badge.bg-success {
	background-color: var( --bs-badge-success-bg, var( --bs-success ) ) !important;
	color: var( --bs-badge-success-text, var( --bs-white ) );
	border-color: var( --bs-badge-success-border, transparent );
}
.badge.bg-warning {
	background-color: var( --bs-badge-warning-bg, var( --bs-warning ) ) !important;
	color: var( --bs-badge-warning-text, var( --bs-dark ) );
	border-color: var( --bs-badge-warning-border, transparent );
}
.badge.bg-danger {
	background-color: var( --bs-badge-danger-bg, var( --bs-danger ) ) !important;
	color: var( --bs-badge-danger-text, var( --bs-white ) );
	border-color: var( --bs-badge-danger-border, transparent );
}
.badge.bg-cta {
	background-color: var( --bs-badge-cta-bg, var( --bs-cta ) ) !important;
	color: var( --bs-badge-cta-text, var( --bs-white ) );
	border-color: var( --bs-badge-cta-border, transparent );
}
.badge.bg-dark {
	background-color: var( --bs-badge-dark-bg, var( --bs-dark ) ) !important;
	color: var( --bs-badge-dark-text, var( --bs-light ) );
	border-color: var( --bs-badge-dark-border, var( --bs-border-color ) );
}

/**
 * Form fields
 */
.form-control,
.form-select {
	background-color: var( --bs-white );
	color: var( --bs-dark );
	border-color: var( --bs-border-color );
}
.form-control:focus {
	border-color: var( --bs-primary-lighter );
}
.form-check-input {
	background-color: var( --bs-white );
}
.input-group-text {
	color: var( --bs-dark );
	border-color: var( --bs-border-color );
	background-color: var( --bs-light );
	border-radius: var( --theme-rounded-inputs, 0 );
}
.input-group.gfield_error > .input-group-text {
	border-color: var( --bs-danger );
}

/**
 * Form fields: Checkboxes, radio buttons
 */
.form-check {
	padding-left: 2em !important;
}
.form-check-input {
	width: 1.35em;
	height: 1.35em;
	margin-left: -2em !important;
	margin-top: 0;
	border-color: var( --input-check-border-color, var( --input-check-bg-color, var( --bs-secondary ) ) );
}
.form-switch {
	padding-left: 2.5em !important;
}
.form-switch .form-check-input {
	margin-left: -2.5em !important;
}
.form-check-input:checked[type=checkbox] {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked {
	background-color: var( --input-check-bg-color, var( --bs-secondary ) ) !important;
	border-color: var( --input-check-border-color, var( --input-check-bg-color, var( --bs-secondary ) ) ) !important;
}
.form-check-input:focus {
	border-color: var( --input-check-border-color, var( --input-check-bg-color, var( --bs-secondary ) ) );
}

/**
 * Form fields: Toggle fields
 */

.form-switch .form-check-input:checked {
	opacity: 1;
}
.form-switch .form-check-input,
.form-switch .form-check-input:disabled {
	background-color: var( --bs-primary );
	border-color: var( --bs-primary );
	background-image: url( "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e" ) !important;
	opacity: 0.5;
}

/**
 * Alerts
 */

.alert-primary {
	background-color: var( --bs-primary );
	border-color: var( --bs-primary );
}
.alert-secondary {
	background-color: var( --bs-secondary );
	border-color: var( --bs-secondary );
}
.alert-success {
	background-color: var( --bs-success );
	border-color: var( --bs-success );
}
.alert-info {
	background-color: var( --bs-info );
	border-color: var( --bs-info );
}
.alert-warning {
	background-color: var( --bs-warning );
	border-color: var( --bs-warning );
}
.alert-danger.alert-danger {
	background-color: rgba( var( --bs-danger-rgb ), 0.1 );
	border: 0;
	color: var( --bs-headings-color ) !important;
	font-weight: var( --bs-headings-font-weight );
}
.alert-light {
	background-color: var( --bs-light );
	border-color: var( --bs-light );
}
.alert-dark {
	background-color: var( --bs-dark );
	border-color: var( --bs-dark );
}

/**
 * Dropdown
 */

.dropdown-item.active,
.dropdown-item:active {
	background: var( --bs-secondary );
}

/**
 * Rounded corners on images, shapes
 */

.theme-rounded-input,
.btn.theme-rounded-input {
	border-radius: var( --theme-rounded-inputs, 0 );
}
.theme-rounded-button {
	border-radius: var( --theme-rounded-buttons, 0 );
}
.theme-rounded-shape {
	border-radius: var( --theme-rounded-shapes, 0 );
}
.theme-rounded-shape-inner-4 {
	border-radius: calc( var( --theme-rounded-shapes, 0 ) * 0.5 );
}
.theme-rounded-shape-end {
	border-radius: 0 var(--theme-rounded-shapes, 0) var(--theme-rounded-shapes, 0) 0;
}
.card.theme-rounded-shape:not(.-force) {
	border-radius: 0;
	border: none;
}
.theme-rounded-shape-top,
.card.theme-rounded-shape:not(.-force) .card-header:first-child {
	border-radius: var( --theme-rounded-shapes, 0 ) var( --theme-rounded-shapes, 0 ) 0 0 !important;
}
.theme-rounded-shape-bottom {
	border-radius: 0 0 var( --theme-rounded-shapes, 0 ) var( --theme-rounded-shapes, 0 );
}
.card.theme-rounded-shape:not(.-force) .card-header.bg-white:first-child  {
	border: 1px solid rgba(0,0,0,.125);
}
.card.theme-rounded-shape:not(.-force) .card-header + .card-body {
	border-radius: 0 0 var( --theme-rounded-shapes, 0 ) var( --theme-rounded-shapes, 0 );
	border: 1px solid rgba(0,0,0,.125);
	border-top: 0;
}

/**
 * Modal windows
 */

:root {
	--bs-backdrop-bg-rgb: var( --bs-primary-rgb );
	--bs-backdrop-bg: var( --bs-primary );
	--bs-backdrop-opacity: 0.5; /* //todo Default in BS 5.2 */
}
.modal-backdrop {
	background-color: var( --bs-backdrop-bg, #000 ); /* //todo Default in BS 5.2 */
}
.modal-content {
	border-radius: var( --theme-rounded-shapes, 0.3rem );
}

/**
 * HR
 */
hr {
	color: var( --bs-border-color ); /* //todo Default in BS 5.2 */
	opacity: 1;
}

/*
* Border variations
* //todo Default in BS 5.2 https://getbootstrap.com/docs/5.2/utilities/borders/#color
 */
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
	border-color: var( --bs-border-color ) !important;
}
.border-primary {
	border-color: var( --bs-primary ) !important;
}
.border-secondary {
	border-color: var( --bs-secondary ) !important;
}
.border-success {
	border-color: var( --bs-success ) !important;
}
.border-info {
	border-color: var( --bs-info ) !important;
}
.border-warning {
	border-color: var( --bs-warning ) !important;
}
.border-danger {
	border-color: var( --bs-danger ) !important;
}
.border-light {
	border-color: var( --bs-light ) !important;
}
.border-dark {
	border-color: var( --bs-dark )!important;
}
.border-cta {
	border-color: var( --bs-cta ) !important;
}
.border-white {
	border-color: #fff !important;
}
.border-black {
	border-color: #000 !important;
}

/*
* Shadows
 */
.shadow-sm {
	box-shadow: 0 3px 0 rgba( 0, 0, 0, 0.06 ) !important;
}

/*
* Additional Position values
 */
.top-25 {
	top: 25% !important;
}
.start-25 {
	left: 25% !important;
}
.bottom-25 {
	bottom: 25% !important;
}
.end-25 {
	right: 25% !important;
}
.top-75 {
	top: 75% !important;
}
.start-75 {
	left: 75% !important;
}
.bottom-75 {
	bottom: 75% !important;
}
.end-75 {
	right: 75% !important;;
}

/*
* Text color
 */
.text-muted,
.text-body-secondary {
	color: var( --bs-gray ) !important;
}

/*
* Table
 */
.table {
	--bs-table-striped-color: var( --bs-dark );
	--bs-table-active-color: var( --bs-dark );
	--bs-table-hover-color: var( --bs-dark );
	color: var( --bs-dark );
	border-color: var( --bs-border-color );
}
/*
* Cards
 */
.card {
	background: var( --bs-white );
}

/*
* Flatpickr customization
 */
/*.flatpickr-day {*/
/*	border-radius: var( --theme-rounded-shapes, 0.25rem ) !important;*/
/*	padding: var( --bs-spacer-1 ) !important;*/
/*	border: none !important;*/
/*	line-height: 150% !important;*/
/*	display: flex !important;*/
/*	align-items: center;*/
/*}*/
/*.flatpickr-day.selected {*/
/*	color: var( --bs-primary );*/
/*}*/
/*.flatpickr-day.today {*/
/*	color: var( --bs-info );*/
/*}*/