@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

@import url('navbar.css');
@import url('buttons.css');
@import url('text.css');
@import url('cards.css');
@import url('input.css');
@import url('modal.css');
@import url('table.css');
@import url('grid.css');

@import url('dashboard.css');

:root {
	--primary: #5059cd;
	--primary-100: #d5dfff;
	--primary-200: #e0f7fa ;
	--primary-300: #e0f7fa;
	--body-font: 'Outfit', sans-serif;
	--header-font: 'Bebas Neue', serif;
}

body, input, button {
	font-family: var(--body-font);
}

section {
	padding: 2% 0;
}

.primary {
	background-color: var(--primary) !important;
}

.primary.lighten-1 {
	background-color: var(--primary-100) !important;
}

.primary.lighten-2 {
	background-color: var(--primary-200) !important;
}

.primary.lighten-3 {
	background-color: var(--primary-300) !important;
}

.flexbox {
	display: flex;
}

.flexbox.justify-center {
	justify-content: center;
}

.flexbox.space-between {
	justify-content: space-between;
}

.flexbox.align-center {
	align-items: center;
}

.full-width {
	width: 100%;
}

footer.page-footer {
	background-color: var(--primary-200);
}

ul.collapsible > li > .collapsible-header {
	padding: 30px
}

header, main {
	padding-left: 350px;
	padding-right: 350px;
}

@media only screen and (max-width : 992px) {
	header, main {
		padding-left: 0;
	}
}

span.badge.off {
	margin-left: 10px;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--primary);
	background-color: var(--primary-100);
	border-radius: 8px;
}

.badges {
	background-color: #f5f5f5 !important;
	border: 1px solid #616161 !important;
	color: #616161;
	border-radius: 4px;
	font-size: 12px;
	padding: 1px 6px;
	cursor: default;
}

.badges.green {
	background-color: #e8f5e9 !important;
	border: 1px solid #4caf50 !important;
	color: #4caf50;
	
}

.badges.blue {
	background-color: #e3f2fd !important;
	border: 1px solid #2196f3 !important;
	color: #2196f3;
}

.badges.red {
	background-color: #ffebee !important;
	border: 1px solid #f44336 !important;
	color: #f44336;
}

.loading-wrapper {
	height: 100svh;
	width: 100vw;
	position: fixed;
	z-index: 99999;
	background-color: white;
	top: 0;
	left: 0;
	pointer-events: none;
	display: none;
}

.loading-wrapper.active {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.loading-wrapper .icon {
	width: 200px;
}

.loading-wrapper.active .icon path {
	fill: transparent;
	stroke-width: 10;
	stroke: var(--primary);
	stroke-dasharray: 1300;
	stroke-dashoffset: 1300;
	animation: loading 4s linear forwards infinite;
}

@keyframes loading {
	0% {
		stroke-dashoffset: 1300;
	}

	50% {
		stroke-dashoffset: 0;
	}

	100% {
		stroke-dashoffset: -1300;
	}
}

.form-part:not(.active) {
	display: none !important;
	visibility: hidden !important;
}

.sticky-top {
	position: sticky;
}

.top-0 {
	top: 0;
}

.top-128 {
	top: 128px;
}

.tabs .tab a {
	text-transform: none !important;
	color: var(--primary);
	background-color: #ffffff !important;
}

.tabs .tab a:hover {
	color: var(--primary);
}

.tabs .tab a.active {
	color: var(--primary);
}

.tabs .indicator {
	background-color: var(--primary);
}

.material-symbols-rounded.filled {
	font-variation-settings:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24
}


.material-symbols-outlined.filled {
	font-variation-settings:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 24
}

.preloader-wrapper.tiny {
	height: 16px;
	width: 16px;
	top:calc(50% - 12px);
}

ul.indicators > li.indicator-item {
	background-color: var(--primary-100) !important;
}

ul.indicators > li.indicator-item.active {
	background-color: var(--primary) !important;
}

#error-screen {
	position: fixed;
	height: 100svh;
	width: 100vw;
	top: 0;
	left: 0;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: white;
	z-index: 999999;
}

[type="checkbox"]:checked + span:not(.lever)::before {
	border-right: 2px solid var(--primary);
	border-bottom: 2px solid var(--primary);
}

.number-box {
	background-color: var(--primary);
	color: white;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	font-size: 43.8px;
	display: flex;
	justify-content: center;
	align-items: center;	
}

.easy-step-container{
	flex-direction: row;
	gap: 0px;
}

@media only screen and (max-width : 400px) {
	
	.easy-step-container{
		flex-direction: column;
		gap: 10px;
	}
}