/* Icon */

.icon-circle {
	width: 44px;
	min-width: 44px;
	height: 44px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon-circle.size-large {
	width: 88px;
	min-width: 88px;
	height: 88px;
	border-radius: 44px;
}

.icon {
	width: 20px;
	height: 20px;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 20px 20px;
}

.size-large .icon {
	width: 40px;
	height: 40px;
	mask-size: 40px 40px;
}

/* Icon tints */

.icon.tint-blue1, .icon-circle.tint-blue1 {
	background: var(--edirt-blue-1);
}

.icon.tint-blue2, .icon-circle.tint-blue2 {
	background: var(--edirt-blue-2);
}

.icon.tint-brown, .icon-circle.tint-brown {
	background: var(--edirt-brown-2);
}

.icon.tint-darkblue, .icon-circle.tint-darkblue {
	background: var(--edirt-blue-1);
}

.icon.tint-error, .icon-circle.tint-error {
	background: var(--edirt-error-red);
}

.icon.tint-gold, .icon-circle.tint-gold {
	background: var(--edirt-yellow-2);
}

.icon.tint-green, .icon-circle.tint-green {
	background: var(--edirt-success-green);
}

.icon.tint-grey1, .icon-circle.tint-grey1 {
	background: var(--edirt-grey-1);
}

.icon.tint-grey2, .icon-circle.tint-grey2 {
	background: var(--edirt-grey-2);
}

.icon.tint-grey3, .icon-circle.tint-grey3 {
	background: var(--edirt-grey-3);
}

.icon.tint-lightblue, .icon-circle.tint-lightblue {
	background: var(--edirt-blue-3);
}

.icon.tint-lighterblue, .icon-circle.tint-lighterblue {
	background: var(--edirt-blue-4);
}

.icon.tint-lightgrey, .icon-circle.tint-lightgrey {
	background: var(--edirt-grey-3);
}

.icon.tint-offwhite, .icon-circle.tint-offwhite {
	background: var(--edirt-off-white);
}

.icon.tint-teal, .icon-circle.tint-teal {
	background: var(--edirt-teal-2);
}

.icon.tint-teallight, .icon-circle.tint-teallight {
	background: var(--edirt-teal-4);
}

.icon.tint-white, .icon-circle.tint-white {
	background: var(--edirt-white);
}

/* Cards */

.card-normal {
	background: var(--edirt-white);
	border: 1px solid var(--edirt-grey-4);
	border-radius: 8px;
}

.card-yellow {
	background: var(--edirt-yellow-4);
	border: 1px solid var(--edirt-yellow-2);
	border-radius: 8px;
	color: var(--edirt-yellow-1);
}

.card-padded {
	padding: 16px;
}

.card-xpadded {
	padding: 32px;
}

.card-centred {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.card-cell {
	padding: 20px 16px;
}

/* Card info lines */

.card-info-line {
	display: flex;
	align-items: start;
	justify-content: start;
	gap: 12px;
	margin-top: 12px;
}

.card-info-line:first-child {
	margin-top: 0;
}

.card-info-label {
	flex-basis: calc(25% - 6px);
}

.card-info-value {
	flex-basis: calc(75% - 6px);
}

/* Card actions */

.card-action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	color: var(--edirt-blue-1);
	font-weight: 500;
}

.card-yellow .card-action {
	color: var(--edirt-grey-1);
}

/* Pills */

.pill {
	height: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	padding: 0 12px;
}

.pill-yellow {
	background: var(--edirt-yellow-4);
	border: 1px solid var(--edirt-yellow-3);
	color: var(--edirt-yellow-1);
}

.pill-green {
	background: var(--edirt-success-green-bg);
	border: 1px solid var(--edirt-success-green);
	color: var(--edirt-success-green);
}

.pill-grey {
	background: var(--edirt-grey-4);
	border: 1px solid var(--edirt-grey-3);
	color: var(--edirt-grey-1);
}

/* Alerts */

.alert {
	border-radius: 8px;
	padding: 12px 16px;
	color: var(--edirt-info-blue);
	background-color: var(--edirt-info-blue-bg);
	display: flex;
	align-items: center;
	margin-top: 12px;
	font-size: 12px;
}

.alert-success {
	background-color: var(--edirt-success-green-bg);
	color: var(--edirt-success-green)
}

.alert-info {
	background-color: var(--edirt-info-blue-bg);
	color: var(--edirt-info-blue);
}

.alert-warning {
	background-color: var(--edirt-warning-orange-bg);
	color: var(--edirt-warning-orange);
}

.alert-error {
	background-color: var(--edirt-error-red-bg);
	color: var(--edirt-error-red);
}

/* Checkbox */

.checkbox-field {
	display: flex;
	align-items: center;
	justify-content: start;
	border: 1px solid var(--ezee-pale-grey);
	padding: 15px;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.checkbox-field label {
	margin-left: 15px;
}

/* Fancy checkbox */

.fancybox {
	display: flex;
	justify-content: start;
	align-items: center;
}

.fancybox label {
	padding: 6px 0;
	font-size: 16px;
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
	.fancybox input[type=checkbox] {
		--active: var(--ezee-indigo);
		--active-inner: var(--ezee-white);
		--focus: 2px rgba(98, 79, 218, 0.5);
		--border: var(--ezee-light-grey);
		--border-hover: rgba(98, 79, 218, 0.5);
		--background: var(--ezee-white);
		--disabled: var(--ezee-pale-grey);
		--disabled-inner: var(--ezee-white);
		-webkit-appearance: none;
		-moz-appearance: none;
		height: 24px;
		outline: none;
		display: inline-block;
		vertical-align: top;
		position: relative;
		margin: 0;
		cursor: pointer;
		border: 1px solid var(--bc, var(--border));
		background: var(--b, var(--background));
		transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
	}
	.fancybox input[type=checkbox]:after {
		content: "";
		display: block;
		left: 0;
		top: 0;
		position: absolute;
		transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
	}
	.fancybox input[type=checkbox]:checked {
		--b: var(--active);
		--bc: var(--active);
		--d-o: .3s;
		--d-t: .6s;
		--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
	}
	.fancybox input[type=checkbox]:disabled {
		--b: var(--disabled);
		cursor: not-allowed;
		opacity: 0.9;
	}
	.fancybox input[type=checkbox]:disabled:checked {
		--b: var(--disabled-inner);
		--bc: var(--border);
	}
	.fancybox input[type=checkbox]:disabled + label {
		cursor: not-allowed;
	}
	.fancybox input[type=checkbox]:hover:not(:checked):not(:disabled) {
		--bc: var(--border-hover);
	}
	.fancybox input[type=checkbox]:focus {
		box-shadow: 0 0 0 var(--focus);
	}
	.fancybox input[type=checkbox]:not(.switch) {
		width: 24px;
	}
	.fancybox input[type=checkbox]:not(.switch):after {
		opacity: var(--o, 0);
	}
	.fancybox input[type=checkbox]:not(.switch):checked {
		--o: 1;
	}
	.fancybox input[type=checkbox] + label {
		display: inline-block;
		vertical-align: middle;
		cursor: pointer;
		margin-left: 8px;
	}

	.fancybox input[type=checkbox]:not(.switch) {
		border-radius: 7px;
	}
	.fancybox input[type=checkbox]:not(.switch):after {
		width: 7px;
		height: 11px;
		border: 2px solid var(--active-inner);
		border-top: 0;
		border-left: 0;
		left: 8px;
		top: 4px;
		transform: rotate(var(--r, 20deg));
	}
	.fancybox input[type=checkbox]:not(.switch):checked {
		--r: 43deg;
	}
}

.fancybox * {
	box-sizing: inherit;
}
.fancybox *:before,
.fancybox *:after {
	box-sizing: inherit;
}