/*#region */
/*#endregion*/

:root {
	--wd-sidebar: 200px;
	--wd-sidebar-sw: 80px;
	--font: 'Quicksand', sans-serif !important;
}

/*#region config*/
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-thumb {
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
	background-color: var(--color-primary);
}

::-webkit-scrollbar-track {
	background-color: #f1f1f1;
}

html {
	font-family: var(--font);
	font-size: 14px;
	position: relative;
	min-height: 100%;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-control-sm:focus,
.form-check-input:focus,
.form-select-sm:focus,
.form-select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}
.btn.active {
	color: white !important;
	background-color: var(--color-primary) !important;
}

.btn-custom-hover:hover {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--color-primary);
}
body {
	overflow: hidden;
}

	.overflow-auto {
		overflow: auto !important;
		overflow-x: hidden !important;
	}

	.modal-body {
		max-height: 60vh;
		overflow-y: auto;
	}

	.container-custom {
		width: calc(100% - 85px);
		margin-left: 85px;
		margin-top: 15px;
	}

	.card {
		border-radius: 1rem;
	}

	.fa {
		display: contents !important;
	}

.fa-calendar {
	cursor: pointer;
}
/*#region dropdown do autocomplete*/
.ui-autocomplete {
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 4px 0 !important;
    max-height: 250px !important; /* controla overflow */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    font-size: 16px !important; /* tamanho da fonte */
    color: #333 !important;
	z-index: 3000 !important;
}

.ui-menu-item-wrapper {
    padding: 10px 14px !important;
    color: #333 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* corta texto grande com ... */
    font-size: 17px !important; /* ajuste individual */
}

.ui-state-active {
    background-color: #605757 !important;
    color: #ffffff !important;
    border: none !important;
}

/*#endregion*/
/*#region select2*/
.select2-container .select2-selection--single {
	height: 50px !important; /* altura total */
	display: flex !important;
	align-items: center !important; /* centraliza o texto na vertical */
	padding: 8px 12px; /* espa�o interno */
	font-size: 1rem; /* aumenta a fonte se quiser */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal !important; /* evita que o texto fique cortado */
	white-space: normal; /* deixa o texto quebrar linha se for longo */
}
/*#endregion*/

/*#endregion*/

/*#region Login*/
.login-background {
	background-image: url('/images/background-login.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

	.card-login {
		width: 400px !important;
	}

	.btn-password {
		background-color: #fff;
		border-top: 1px solid #ced4da;
		border-bottom: 1px solid #ced4da;
		border-right: 1px solid #ced4da;
	}

		.btn-password:hover, .icon-password:hover, .btn-password:focus {
			font-weight: 700;
			box-shadow: none !important;
		}

	.input-password:focus {
		box-shadow: none !important;
		border-top: 1px solid #ced4da;
		border-bottom: 1px solid #ced4da;
		border-left: 1px solid #ced4da;
		border-right: none;
	}
	/*#endregion*/
	/*#region nav*/
	.nav-content {
		top: 5px;
		left: 10px;
		margin-left: var(--wd-sidebar);
		margin-right: 15px;
	}

		.nav-content.active {
			margin-left: var(--wd-sidebar-sw);
		}

	#navbarBody {
		border-radius: 8px;
	}
	/*#endregion*/
	/*#region Dropdown*/
	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		width: 180px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		border-radius: 5px;
	}

		.dropdown-content a {
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
		}

			.dropdown-content a:hover {
				background-color: #f1f1f1;
				cursor: pointer;
			}

	.dropdown:hover .dropdown-content {
		display: block;
	}
	/*#endregion*/
	/*#region Sidebar*/
	#sidebar {
		position: fixed;
		top: 5px;
		bottom: 5px;
		left: 5px;
		right: 5px;
		background-color: var(--color-primary);
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
		width: var(--wd-sidebar);
		min-width: var(--wd-sidebar-sw);
	}

		#sidebar.active {
			width: 75px;
		}

		#sidebar .nav-link {
			padding: 10px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

			#sidebar .nav-link span {
				margin-left: 10px;
				display: inline;
			}

		#sidebar.active .nav-link span {
			display: none;
		}

		#sidebar.active .item-title span {
			display: none;
		}

	#content {
		/*margin-top: 30px;*/
		margin-left: 210px;
		transition: all 0.3s;
	}

		#content.active {
			margin-left: 100px;
		}
	/*#endregion*/
	/*#region Button*/
	.btn-search {
		background-color: var(--color-primary);
		border-bottom-right-radius: 0.25rem;
	}

	.btn-add-register {
		cursor: pointer;
		color: #169E38;
	}

		.btn-add-register:hover {
			color: #19B540;
		}

	.btn-remove-register {
		cursor: pointer;
		color: #C00000;
	}

		.btn-remove-register:hover {
			color: #E00000;
		}

	.btn-modal {
		background-color: var( --color-nav-dark-font)
	}
	/*#endregion*/
	/*#region Snackbar*/
	#snackbar {
		visibility: hidden;
		min-width: 250px;
		margin-left: -125px;
		background-color: #333;
		font-family: var(--font);
		font-weight: 800;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		padding: 16px;
		position: fixed;
		z-index: 1;
		left: 90%;
		bottom: 30px;
	}

		#snackbar.show {
			visibility: visible;
			-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
			animation: fadein 0.5s, fadeout 0.5s 2.5s;
		}

	@-webkit-keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 30px;
			opacity: 1;
		}
	}

	@keyframes fadein {
		from {
			bottom: 0;
			opacity: 0;
		}

		to {
			bottom: 30px;
			opacity: 1;
		}
	}

	@-webkit-keyframes fadeout {
		from {
			bottom: 30px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}

	@keyframes fadeout {
		from {
			bottom: 30px;
			opacity: 1;
		}

		to {
			bottom: 0;
			opacity: 0;
		}
	}

	#progress-bar {
		width: 100%;
		height: 5px;
		background-color: #ccc;
		margin-top: 8px;
		border-radius: 5px;
		display: none;
	}

		#progress-bar.active {
			display: block;
		}

	#progress-bar-inner {
		height: 100%;
		background-color: #4CAF50; /* Cor da barra de progresso */
		width: 0;
		border-radius: 5px;
		transition: width 0.001s ease-in-out;
	}
	/*#endregion*/
	/*#region Switches toggle*/
	.toggle {
		--width: 52px; /* use .toggle-sm / .toggle-lg para variar */
		--height: 28px;
		--knob: 22px;
		--bg-off: #e5e7eb; /* cinza quando desligado */
		--bg-on: #22c55e; /* verde quando ligado */
		--ring: rgba(0,0,0,.18); /* sombra externa */
		--inset: rgba(0,0,0,.20); /* sombra interna */
		--inset-strong: rgba(0,0,0,.28); /* mais forte para relevo */
		--knob-shadow: rgba(0,0,0,.35);
		display: inline-flex;
		align-items: center;
		gap: .5rem;
	}

	.toggle-sm {
		--width: 40px;
		--height: 22px;
		--knob: 18px;
	}

	.toggle-lg {
		--width: 64px;
		--height: 34px;
		--knob: 28px;
	}

	.toggle-input {
		position: absolute;
		opacity: 0;
		width: 0;
		height: 0;
		pointer-events: none;
	}

	.toggle-label {
		position: relative;
		width: var(--width);
		height: var(--height);
		cursor: pointer;
		border-radius: 999px;
		display: inline-block;
		transition: background-color .22s ease, box-shadow .22s ease;
		/* fundo (desligado) com leve gradiente e sombras (inner + outer) */
		background: linear-gradient(to bottom, #fafafa, var(--bg-off));
		box-shadow: 0 2px 6px var(--ring), /* outer */
		inset 0 1px 2px var(--inset), /* inner suave topo */
		inset 0 -1px 2px var(--inset-strong); /* inner forte base */
	}

	.toggle-input:focus-visible + .toggle-label {
		outline: 2px solid #60a5fa;
		outline-offset: 2px;
	}

	.toggle-input:checked + .toggle-label {
		background: linear-gradient(to bottom, #44d07a, var(--bg-on));
		box-shadow: 0 2px 8px var(--ring), inset 0 1px 2px rgba(255,255,255,.25), inset 0 -1px 3px rgba(0,0,0,.25);
	}

	.toggle-knob {
		position: absolute;
		top: 50%;
		left: 3px;
		width: var(--knob);
		height: var(--knob);
		transform: translateY(-50%);
		border-radius: 50%;
		background: #fff;
		transition: left .22s ease, box-shadow .22s ease;
		box-shadow: 0 2px 4px var(--knob-shadow), /* outer */
		inset 0 1px 1px rgba(0,0,0,.06); /* inner sutil no bot�o */
	}

	.toggle-input:checked + .toggle-label .toggle-knob {
		left: calc(var(--width) - var(--knob) - 3px);
		box-shadow: 0 3px 6px var(--knob-shadow), inset 0 1px 1px rgba(0,0,0,.06);
	}

	.toggle-text {
		font-size: .9rem;
		user-select: none;
	}

	.toggle-label .state-on,
	.toggle-label .state-off {
		display: none;
	}

	.toggle-input:checked ~ .toggle-text .state-on {
		display: inline;
	}

	.toggle-input:checked ~ .toggle-text .state-off {
		display: none;
	}

	.toggle-input:not(:checked) ~ .toggle-text .state-off {
		display: inline;
	}
	/* Variante �esqueleto� para usar sobre fundos escuros */
	.toggle-outline .toggle-label {
		background: linear-gradient(to bottom, #f4f4f5, #ddd);
	}
	/*#endregion*/

	.item-title {
		font-family: var(--font);
		font-weight: 800;
		font-size: 1.5rem;
		text-align: center;
		color: var(--color-body-dark-bg);
		border-radius: 10px;
	}

		.item-title:hover {
			color: var(--color-body-dark-bg);
		}

	.item-menu {
		font-family: var(--font);
		font-weight: 400;
		font-size: 1.2rem;
		padding: 1rem;
		text-align: center;
		color: var(--color-body-dark-bg);
		border-radius: 10px;
	}

		.item-menu:hover, .item-menu:focus {
			background-color: var(--color-nav-item-hover);
			color: var(--color-body-dark-bg);
		}

	.text-label {
		font-family: var(--font);
		font-weight: 400;
		font-size: 1.2rem;
	}

	.input-search {
		background-color: #F7F7F7
	}

	.form-check-input:checked {
		background-color: var(--color-primary);
		border-color: var(--color-primary);
	}

	.form-check-input {
		cursor: pointer;
	}

	@media (min-width: 768px) {
		html {
			font-family: var(--font);
			font-size: 16px;
		}

		body {
			margin-bottom: 60px;
		}
	}

	@media (max-width: 767px) {
		.card-login {
			margin: 1.5rem !important;
		}

		#sidebar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			top: auto;
			width: 100vw !important;
			height: 70px;
			min-width: unset;
			background-color: var(--color-primary);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
			z-index: 9999;
			box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
			overflow-x: auto;
			border-radius: 0;
		}

			#sidebar .nav-item, #sidebar ul.nav {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin: 0;
				padding: 0;
			}

			#sidebar ul.nav {
				flex-direction: row;
				gap: 0.5rem;
				border-top: none;
			}

			#sidebar .nav-link {
				padding: 0.5rem 0.7rem;
				font-size: 1.1rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
			}

				#sidebar .nav-link span {
					margin-left: 0;
					margin-top: 2px;
					display: block;
					font-size: 0.9rem;
				}

			#sidebar hr, #sidebar .footer-fixed {
				display: none;
			}

		#sidebarCollapse {
			display: none;
		}

		.nav-content {
			margin-left: 0 !important;
		}

		#content {
			margin-left: 0 !important;
		}
	}

.invisible-scroll {
	max-height: calc(100vh - 100px);
	overflow: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

	.invisible-scroll::-webkit-scrollbar {
		display: none;
	}