.sidebar-noova {
	display:none;

	&.active {
		display:block;
	}
}

.sidebar-noova-overlay {
	background: rgba(30, 115, 190, 0.5);
	opacity: 1 !important;
	transition: opacity 1s ease !important;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1040;
	width: 100vw;
	height: 100vh;
}

.sidebar-noova-sidebar {
	position: absolute;
	//top: 20px;
	//right: 20px;
    margin: 0;
    padding: 35px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(216, 144, 144, 0.5);
    font-size: 100%;
    line-height: 1;
    color: #000000;
    vertical-align: baseline;
    overflow-y: auto;
    z-index: 99999;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
    font-synthesis: none;
    font-family: 'Lato', sans-serif;

	quack {
		display: block;
		margin-top: 2px;
	}

	&.filter {

		&.desktop {
			width: 500px !important;
		}

		&.mobile {
			width: 340px !important;
		}
	}


    .close-button {
		position: absolute;
		top: 20px;
		right: 20px;
		margin: 0;
		padding: 0;
		font-size: 24px;
		font-weight: 300;
		line-height: 1.15;
		color: #444343;
		cursor: pointer;
		overflow: visible;
		-webkit-appearance: button;
		border-style: none;
		box-sizing: border-box;
		background: none;
	}

	.header {
		display: flex;
		margin: 0;
		margin-bottom: 19px;
		padding: 0;
		border: 0;
		text-align: left;
		-moz-osx-font-smoothing: grayscale;
		-ms-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
		-webkit-tap-highlight-color: transparent;
		-webkit-text-size-adjust: 100%;
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;

		.titolo {
			margin-bottom: 5px;
			font-size: 16px;
		}
		.sottotitolo {
			margin-bottom: 8px;
			font-size: 16px;
			font-weight: 400;
			color: #262626;
		}
	}

	.body {
		.section {
			padding:20px 0;
			border-bottom: 1px solid #e6e6e6;

			.titolo {
				margin-bottom: 10px;
				font-size: 16px;
				font-weight: 800;
				color: #ffaeae;
			}

			.items {
				//margin-left: 12px;

				.item {
					display: block;
					position: relative;
					margin:0;
					margin-bottom: 5px;
					//margin-left: -12px;
					line-height: 1.1;

					a {
						padding: 8px 30px 8px 12px;
						border-radius: 16px;
						color: #000;
						text-decoration: none;
						font-size: 16px;
						font-weight: 400;
						display:inline-block;
						position:relative;

						&.selected {
							background: rgb(245, 245, 245);

							.cancel-icon {
								display:block;
							}
						}

						.sottotitolo {
							color: #848484;
							font-size: 14px;
						}

						.cancel-icon {
							position: absolute;
							top: 9px;
							right: 10px;
							margin: 0;
							padding: 0;
							border: 0;
							font-size: 15px;
							line-height: 1;
							color: #898989;
							vertical-align: baseline;
							cursor: pointer;
							-moz-osx-font-smoothing: grayscale;
							-ms-text-size-adjust: 100%;
							-webkit-font-smoothing: antialiased;
							-webkit-tap-highlight-color: transparent;
							-webkit-text-size-adjust: 100%;
							box-sizing: border-box;
							font-synthesis: none;
							display:none;
							color: #ffb2b2;
						}
					}

					a:hover {
						background: rgb(245, 245, 245);
					}

				}

				.item:not(.selected):not(.disabled) {
					background: transparent;
					transition: background 0.2s ease;
				}

				&.items-colors {
					display: grid;
					gap: 5px;
					grid-template-columns: repeat(5, 1fr);
					justify-content: flex-start;

					.item-color {
						position: relative;
						overflow: visible;
						display: flex;
						width: 40px;
						height: 32px;
						min-height: 32px;
						max-height: 32px;
						margin: 0;
						margin-right: 0px;
						margin-bottom: 0px;
						margin-right: 5px;
						margin-bottom: 5px;
						padding: 0;
						background-color: #f9f9fa;
						border: 0.5px solid #d4d4d4;
						border-radius: 8px;
						box-shadow: inset 0 0 0 2px rgba(255, 186, 186, 0);
						align-items: center;

						.cancel-icon-wrapper {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 100%;
							pointer-events: none;
							display: flex;
							align-items: center;
							justify-content: center;

							.cancel-icon {
								position: absolute;
								top: 0;
								left: 0;
								pointer-events: none;
								align-items: center;
								justify-content: center;
								pointer-events: auto;
								background: rgba(255, 255, 255, 0.9);
								border-radius: 50%;
								padding: 2px;
								width: 20px;
								height: 20px;
								display: none !important;
								align-items: center !important;
								justify-content: center !important;
								font-size: 14px !important;
								color: #666 !important;
								box-shadow: 0 1px 3px rgba(0,0,0,0.2);
								cursor: pointer;
								z-index: 10;
							}
						}
					}

					.item-color.selected {
						.cancel-icon {
							display:flex !important;
							background: transparent !important;
							box-shadow: none !important;
							font-size: 18px !important;
							color: #ffb2b2 !important;
						}
					}

				}
			}
		}


		.sidebar-footer {
			position: relative;

			.button-browse {
				display: inline-block;
				float:right;
				margin: 15px 0 0 0;
				padding: 12px 24px 12px 24px;
				background-color: #ffc9c9;
				border: 0;
				border-radius: 20px;
				font-size: 16px;
				font-weight: 400;
				line-height: 16px;
				color: #ffffff;
				vertical-align: middle;
				cursor: pointer;
			}
		}
	}


}



.material-icons.md-18 {
	font-size: 16px;
}
.material-icons.md-18 {
	font-size: 16px;
	vertical-align: text-bottom;
	padding: 0 2px 0 0;
	color: #ffb2b2;
}