@media screen and (((min-width: 1200px) and (orientation:landscape))) {
	.btn-modals {
		background-color: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0px 20px;
		font-size: 1.2rem;
	}
}

@media screen and (((min-width: 767px) and (orientation:portrait)) or ((min-width:1200px) and (orientation:landscape))) {
	.btn-modals {
		background-color: transparent !important;
		border: none !important;
		padding: 0 !important;
		font-size: 1.2rem;
	}
}

@media screen and (((max-width: 767px) and (orientation:portrait)) or ((max-width:1200px) and (orientation:landscape))) {
	.btn-modals {
		background-color: transparent !important;
		border: none !important;
		padding: 0 !important;
		margin: 0px 8px;
		font-size: 1.2rem;
	}

	.btn {
		padding: 0.375rem 0.4rem;
	}
}

/*BTN FORMATO SPAN*/
.btn-span {
	display: inline-block;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	border-radius: 0.25rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-black {
	color: white;
	background-color: black !important;
}

[class^="btn"],
[class*=" btn"] {
	--bs-btn-percentage-hover: 7%;
	--text-color: var(--bs-gray);
}

:is([class^="btn"], [class*=" btn"]):not([class^="btn-outline-"], [class*=" btn-outline-"]) {
	--bs-btn-color: var(--text-color);
	--bs-btn-bg: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-border-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));

	--bs-btn-hover-color: var(--text-color);
	--bs-btn-hover-bg: hsl(var(--bs-color-h), var(--bs-color-s), calc(var(--bs-color-l) - var(--bs-btn-percentage-hover)));
	--bs-btn-hover-border-color: hsl(var(--bs-color-h), var(--bs-color-s), calc(var(--bs-color-l) - 9%));

	--bs-btn-active-color: var(--text-color);
	--bs-btn-active-bg: hsl(var(--bs-color-h), var(--bs-color-s), calc(var(--bs-color-l) - 11%));
	--bs-btn-active-border-color: hsl(var(--bs-color-h), var(--bs-color-s), calc(var(--bs-color-l) - 13%));

	--bs-btn-disabled-color: var(--text-color);
	--bs-btn-disabled-bg: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-disabled-border-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
}

:is([class^="btn"], [class*=" btn"]):not([class^="btn-outline-"], [class*=" btn-outline-"]).btn-ghost {
	--bs-btn-bg: hsla(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l), 0.2);
	--bs-btn-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-border-color: transparent;

	--bs-btn-hover-bg: hsla(var(--bs-color-h), var(--bs-color-s), calc(var(--bs-color-l) - var(--bs-btn-percentage-hover)), 0.83);
	--bs-btn-active-color: var(--bs-btn-color);

	--bs-btn-hover-border-color: transparent;

	--bs-btn-disabled-color: var(--bs-btn-color);
	--bs-btn-disabled-bg: var(--bs-btn-bg);
	--bs-btn-disabled-border-color: var(--bs-btn-border-color);
}

[class^="btn-outline-"],
[class*=" btn-outline-"] {
	--bs-btn-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-border-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));

	--bs-btn-hover-color: var(--text-color);
	--bs-btn-hover-bg: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-hover-border-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));

	--bs-btn-focus-shadow-rgb: var(--bs-color-h), var(--bs-color-s), var(--bs-color-l);

	--bs-btn-active-color: var(--text-color);
	--bs-btn-active-bg: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-active-border-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

	--bs-btn-disabled-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: hsl(var(--bs-color-h), var(--bs-color-s), var(--bs-color-l));

	--bs-gradient: none;
}

.btn-white {
	--bs-color-h: var(--bs-white-h);
	--bs-color-s: var(--bs-white-s);
	--bs-color-l: var(--bs-white-l);
	--text-color: black;

	--bs-btn-border-color: lightgrey !important;
}

.btn-primary,
.btn-outline-primary {
	--bs-color-h: var(--bs-primary-h);
	--bs-color-s: var(--bs-primary-s);
	--bs-color-l: var(--bs-primary-l);
	--text-color: white;
}

.btn-secondary,
.btn-outline-secondary {
	--bs-color-h: var(--bs-secondary-h);
	--bs-color-s: var(--bs-secondary-s);
	--bs-color-l: var(--bs-secondary-l);
	--text-color: white;
}

.btn-success,
.btn-outline-success {
	--bs-color-h: var(--bs-success-h);
	--bs-color-s: var(--bs-success-s);
	--bs-color-l: var(--bs-success-l);
	--text-color: white;
	--bs-btn-percentage-hover: 12%;
}

.btn-info,
.btn-outline-info {
	--bs-color-h: var(--bs-info-h);
	--bs-color-s: var(--bs-info-s);
	--bs-color-l: var(--bs-info-l);
	--text-color: white;
}

.btn-warning,
.btn-outline-warning {
	--bs-color-h: var(--bs-warning-h);
	--bs-color-s: var(--bs-warning-s);
	--bs-color-l: var(--bs-warning-l);
	--text-color: black;
}

.btn-danger,
.btn-outline-danger {
	--bs-color-h: var(--bs-danger-h);
	--bs-color-s: var(--bs-danger-s);
	--bs-color-l: var(--bs-danger-l);
	--text-color: white;
}

.btn-orange,
.btn-outline-orange {
	--bs-color-h: var(--bs-orange-h);
	--bs-color-s: var(--bs-orange-s);
	--bs-color-l: var(--bs-orange-l);
	--text-color: white;
	--bs-btn-percentage-hover: 10%;
}

.btn-purple,
.btn-outline-purple {
	--bs-color-h: var(--bs-purple-h);
	--bs-color-s: var(--bs-purple-s);
	--bs-color-l: var(--bs-purple-l);
	--text-color: white;
}


/* FILTRA PER */
.btn_filtra_per,
.btn_tutorial {
	white-space: nowrap;
	position: relative;
	display: flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--border-nr-navbar);
	background-color: white;
}

.btn_filtra_per:hover,
.btn_tutorial:hover {
	background-color: #f4f4f4;
	border: 1px solid var(--border-nr-navbar);
}

.btn_filtra_per *,
.btn_tutorial * {
	font-size: 12px;
	text-transform: uppercase;
	color: var(--color-nr-navbar);
	font-weight: 500;
}

.btn-link {
	border: 0;
	color: var(--bs-primary);
	background-color: transparent;
	text-decoration: underline;
}

.btn-ripple {
	position: relative;
	overflow: hidden;
}

.btn-white {
	--bs-btn-color: black;
	--bs-btn-border-color: #d7d7d7;
	--bs-btn-bg: white;
	--bs-btn-active-bg: #f9f9f9;
	--bs-btn-hover-bg: var(--bs-btn-active-bg);
	--bs-btn-active-border-color: var(--bs-btn-border-color);
	--bs-btn-active-color: var(--bs-btn-color);
}

.btn-white:hover {
	--bs-btn-hover-border-color: var(--bs-btn-border-color);
	--bs-btn-hover-color: var(--bs-btn-color);
}

.btn-transparent {
	--bs-btn-color: black;
	--bs-btn-border-color: transparent;
	--bs-btn-bg: transparent;
	--bs-btn-active-bg: transparent;
	--bs-btn-hover-bg: transparent;
	--bs-btn-active-border-color: transparent;
	--bs-btn-active-color: var(--bs-btn-color);
}

.btn-transparent:hover {
	--bs-btn-hover-border-color: var(--bs-btn-border-color);
	--bs-btn-hover-color: var(--bs-btn-color);
	--bs-btn-hover-bg: #eff2f6;
}

.btn {
	font-weight: 500;
}