:root {
	--clr-accent-100: hsl(208, 100%, 42%);
	--clr-accent-200: hsl(208, 100%, 40%);
	--clr-accent-300: hsl(208, 100%, 38%);
	--clr-accent-400: hsl(208, 100%, 36%);
	--clr-accent-500: hsl(208, 100%, 34%);
	--clr-accent-600: hsl(208, 100%, 32%);
	--clr-accent-700: hsl(208, 100%, 30%);
}


body {
	overflow-x: hidden !important;
}

[type="checkbox"] {
	color: var(--clr-accent-400) !important;
}

.soft-disable {
	opacity: 0.5;
	pointer-events: none;
	cursor: not-allowed;
}

select option {
	font-family: 'Segoe UI';
}


/********************
*	Colors
********************/

.clr-accent-100 {
	color: var(--clr-accent-100);
}

.clr-accent-200 {
	color: var(--clr-accent-200);
}

.clr-accent-300 {
	color: var(--clr-accent-300);
}

.clr-accent,
.clr-accent-400 {
	color: var(--clr-accent-400);
}

.clr-accent-500 {
	color: var(--clr-accent-500);
}

.clr-accent-600 {
	color: var(--clr-accent-600);
}

.clr-accent-700 {
	color: var(--clr-accent-700);
}


.bg-clr-accent-100 {
	background-color: var(--clr-accent-100);
}

.bg-clr-accent-200 {
	background-color: var(--clr-accent-200);
}

.bg-clr-accent-300 {
	background-color: var(--clr-accent-300);
}

.bg-clr-accent,
.bg-clr-accent-400 {
	background-color: var(--clr-accent-400);
}

.bg-clr-accent-500 {
	background-color: var(--clr-accent-500);
}

.bg-clr-accent-600 {
	background-color: var(--clr-accent-600);
}

.bg-clr-accent-700 {
	background-color: var(--clr-accent-700);
}

.fill-accent-400 {
	fill: var(--clr-accent-400);
}

.hover\:clr-accent:hover {
	color: var(--clr-accent-400);
}

.hover\:clr-accent-500:hover {
	color: var(--clr-accent-500);
}

.hover\:bg-clr-accent:hover {
	background-color: var(--clr-accent-500);
}

.hover\:bg-clr-accent-300:hover {
	background-color: var(--clr-accent-300);
}

.group:hover .group-hover\:clr-accent {
	color: var(--clr-accent-400);
}

.border-clr-accent {
	border-color: var(--clr-accent-400) !important;
}

.hover\:border-clr-accent:hover {
	border-color: var(--clr-accent-400);
}

.group:hover .group-hover\:border-clr-accent {
	border-color: var(--clr-accent-400);
}

.focus\:border-clr-accent:focus {
	border-color: var(--clr-accent-400);
}

.focus\:bg-clr-accent-500:focus {
	background-color: var(--clr-accent-500);
}

.focus\:ring-accent-400:focus {
	--tw-ring-opacity: 1;
	--tw-ring-color: var(--clr-accent-400);
}

.active\:bg-clr-accent-500:active {
	background-color: var(--clr-accent-500);
}

.focus\:ring-accent:focus-visible {
	outline: 3px solid var(--clr-accent-400);
	outline-offset: 2px;
	border-color: transparent;
}

.focus-within\:ring-accent-400:focus-within {
	outline: 3px solid var(--clr-accent-400);
	outline-offset: 2px;
	border-color: transparent;
}

.peer:checked~.peer-checked\:clr-accent {
	background-color: var(--clr-accent-400);
}

input[type="radio"].clr-accent {
	color: var(--clr-accent-400);
}

input[type="radio"].clr-accent:focus {
	--tw-ring-color: var(--clr-accent-400);
}

/********************
*	Animations
********************/

@keyframes notificationSlideInFromBottom {
	from {
		transform: translateY(30px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.notification-slide-in-bottom {
	animation: notificationSlideInFromBottom 250ms cubic-bezier(0.25, 0.8, 0.25, 1) both;
}

@keyframes custom-bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

@keyframes blue-shift {
	0% {
		background-color: #005eb8;
	}

	50% {
		background-color: #66aef7;
	}

	100% {
		background-color: #005eb8;
	}
}

.animate-custom-bounce {
	animation: custom-bounce 0.6s infinite ease-in-out;
}

.animate-blue-shift {
	animation: blue-shift 1.5s infinite ease-in-out;
}


/********************
*	Form
********************/

.custom-input:focus {
	border: 1px solid var(--clr-accent-400) !important;
	--tw-ring-color: transparent !important;
}

.field-blur {
	filter: blur(3px);
}


/********************
*	Table
********************/

.table-column-sort-icon {
	cursor: pointer;
}

.table-column-sort-icon .icon:not(:first-of-type) {
	transform: rotate(180deg);
}


.CardNumberField-input-wrapper {
	border: 1px solid red !important;
}

#card-element-wrapper {
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 4px;
	transition: border-color 0.3s ease;
}

#card-element-wrapper.focused {
	border-color: #007bff;
}

#card-element-wrapper.invalid {
	border-color: #fa755a;
}

#card-element {
	background-color: transparent;
}

/********************
*	Other
********************/

.sidebar-drop-opener.hide-counter-on-expand.active .counter {
	display: none;
}

#zoom-frame>div {
	width: 100%;
	box-shadow: none;
}


/* #zoom-frame .MuiBox-root {
	background-color: transparent;
}

#zoom-frame .MuiToolbar-root,
#zoom-frame button,
#zoom-frame svg {
	display: none;
}

#zoom-frame .MuiPaper-root {
	border-radius: 4px;
	border: none;
	background-color: var(--clr-accent-400);
	box-shadow: none;
}

#zoom-frame .MuiPaper-root li {
	background-color: transparent;
} */

.signature-container {
	max-width: 100px;
	max-height: 100px;
}

.signature-container>svg {
	width: 100%;
	height: 100px;
}

.section-loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.section-loader .loader {
	width: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.section-loader::before {
	content: "";
	background-color: #fffffff5;
	border-radius: 4px;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

button.disabled {
	opacity: 0.5;
	pointer-events: none;
}

.min-h-screen-minus-100 {
	min-height: calc(100vh - 100px);
}

.max-h-screen-minus-100 {
	max-height: calc(100vh - 100px);
}

.iti {
	width: 100%;
}

.iti__selected-dial-code {
	font-size: 14px;
}