:root {
	--cb-tabular-group1-bg: rgba(248, 249, 250);
	--cb-tabular-group2-bg: rgba(248, 249, 250, 0.7);
	--cb-tabular-group3-bg: rgba(248, 249, 250, 0.4);
	--cb-tabular-group4-bg: rgba(248, 249, 250, 0.2);
}

div.hintHook {
	z-index: 1056 !important;
	max-width: 350px;
}

.flatpickr-calendar.animate.open {
	box-shadow: var(--bs-box-shadow-lg);
	border: 1px solid #2f4158;
}

.cbUIHolder {
	z-index: 1056 !important;
	background-color: #000;
	opacity: 0.7;
}

.Dialog, .Window, #Alert {
	z-index: 1057 !important;
}

/* This is used for transition effect when a datapage is loaded async, it will smoothly remove the loading icon */
[data-cb-target] { 
	min-height: 75px;
}

.caspio-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--light-100);
	color: var(--primary);
	z-index: 1050;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: opacity 0.1s ease;
}

.caspio-loader.p-unset {
	position: unset;
}

.caspio-loader.fade-out {
	opacity: 0;
	pointer-events: none;
}
/* End of the loading icon effect */

#caspioform {
	@media (width <= 1024px) {
		section.cbColumnarReport > div {
			margin-bottom: 1rem;
		}
	}

	[class^="cbFormSection"] {
		background-color: transparent !important;
	}

	[class^="cbFormSection"] [data-cb-alternate-semantic-row-desktop] {
		background-color: transparent !important;
	}

	div:has(> section[data-cb-name="cbTable"]) {
		width: 100%;
	}
	
	section[data-cb-name="cbTable"] {
		overflow: unset;
	}

	section[data-cb-name="cbTable"]:not(.cbColumnarReport):not(.cbSearchSpa) {
		grid-auto-columns: minmax(0, 1fr);
		column-gap: 10px;
		width: 100% !important;
		margin: 0px !important;
	}

	section[data-cb-name="cbTable"] {
		&.cbColumnarReport {
			column-gap: 1rem;
			grid-gap: 1rem;
		}

		&.cbSearchSpa {
			grid-gap: 0.5rem;
		}
	}

	label {
		display: inline;
	}

	span.cbFormHintLabel img.cbFormHintLabelImage {
		vertical-align: middle;
	}

	input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="file"]), textarea, select {
		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

		&:focus {
			border-color: var(--secondary) !important;
			/*box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;*/
			outline: 0 !important;
			box-shadow: 0 0 6px var(--secondary-rgba-20);
			transition: box-shadow 0.1s ease-in-out;
		}
	}

	input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;

		width: 1.25em;
		height: 1.25em;
		vertical-align: top;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		border: 1px solid rgba(0, 0, 0, 0.25);
		border-radius: var(--bs-border-radius);
		cursor: pointer;

		&:checked {
			background-color: var(--secondary);
			border-color: var(--secondary) !important;
			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='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
		}

		&:disabled {
			pointer-events: none;
			filter: none;
			opacity: 0.5;
		}
	}

	input[type="file"] {
		padding: 2px 0px 0px;
		display: block;
		font-size: 12px;
		cursor: pointer;
	}

	input[type="file"]::file-selector-button {
		background-color: var(--light);
		color: var(--secondary);
		border: 1px solid var(--secondary);
		cursor: pointer;
		transition: background-color 0.15s ease-in-out;
		display: block;
		margin-bottom: 5px;
	}

	input[type="file"]::file-selector-button:hover {
		background-color: var(--secondary);
		color: var(--light);
	}

	.cbResultSetListViewTableOddCell, .cbResultSetListViewTableEvenCell {
		box-shadow: var(--bs-box-shadow-sm);

		&:hover{
			box-shadow: var(--bs-box-shadow) !important;
		}

		& > div:first-of-type {
			/*border: 1px solid var(--bs-card-border-color);
			border-left: none;*/
		}
	}

	span[data-cb-name="switch-group-state-btn"] a.cbResultSetShowHideGroupText img {
		width: 16px;
		vertical-align: text-top;
	}

	.cbResultSetNavigationTable .cbNavBarCtnt {
		padding: 8px 0px;
	}
}