/* Utility classes */
.ht-100pct {
	height: 100%;
}

.zi-0 {
	z-index: 0;
}
.zi-1 {
	z-index: 1;
}
.zi-2 {
	z-index: 2;
}
.zi-3 {
	z-index: 3;
}
.zi-4 {
	z-index: 4;
}
.zi-5 {
	z-index: 5;
}
.zi-6 {
	z-index: 6;
}

/* color theme */
:root {
	--secondary: #fada5e;
	--primary: #016dcf;
	--primary-dark: #004890;
	--primary-text: #5c5c5c;
	--secondary-text: #9c9c9c;
}
.ct-button {
	background-color: var(--secondary);
	border-radius: 1rem;
	height: 1.5rem;
	color: var(--primary-text);
	cursor: pointer;
	padding-left: 1rem;
	padding-right: 1rem;
	border: none;
}

.ct-button-block {
	display: block;
	width: 100%;
}

.ct-button:disabled {
	background-color: #d0d0d0;
	color: var(--primary-text);
	cursor: not-allowed;
}

.ct-button-circle {
	background-color: var(--secondary);
	border: none;
	border-radius: 50%;
	height: 1.5rem;
	width: 1.5rem;
	padding: 3px;
	color: var(--primary-text);
	cursor: pointer;
}

.ct-icon {
	display: flex;
	line-height: 0.8rem;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0px;
	aspect-ratio: 1;
	overflow: hidden;
}

.ct-icon .image {
	display: flex;
	/* border: solid 1px var(--primary); */
	align-items: center;
	overflow: hidden;
	padding: 5px;
	opacity: var(--opacity);
	aspect-ratio: 1;
	height: calc(100% - 1.8rem);
}

.ct-icon .image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* border: solid 1px red; */
}

.ct-icon .text {
	width: 100%;
	height: 1.8rem;
	overflow: hidden;
	align-self: flex-end;
}

.ct-icon a {
	text-decoration: none;
	color: var(--primary-text);
}

.ct-icon .selected {
	opacity: 1;
}

.ct-input-file::file-selector-button {
	color: var(--primary-text);
	background-color: var(--secondary);
	border: none;
	margin-left: -0.37em;
	padding-left: 1em;
}

.ct-input-file[type='file'] {
	border-color: var(--secondary);
	border-radius: 1em;
	padding: 0;
}

h4 {
	font-size: 0.9rem;
	font-weight: bold;
}

input[type='checkbox'] {
	background-color: green;
}

body {
	font-family:
		'Jost',
		-apple-system,
		system-ui,
		BlinkMacSystemFont,
		'Segoe UI',
		Roboto,
		'Helvetica Neue',
		sans-serif !important;
	padding: 0;
	margin: 0;
	color: var(--primary-text);
	line-height: 1.2em;
	font-size: 14px;
}

a {
	text-decoration: underline;
	color: var(--primary-text);
	cursor: pointer;
}

a:hover,
a:visited {
	color: var(--primary-text);
}

.ct-select,
.ct-select:active,
.ct-select:focus {
	border: solid 1px var(--secondary);
}