.mod_kalender_element {	
	
	.street_element_container{
		.street_name{
			margin-bottom: 30px;
			font-weight: lighter;
		}
		
		.dates{
			display: grid;
			gap: 30px;
			justify-items: stretch;
			grid-template-columns: 1fr;
			margin-bottom: 30px;
			
			.date{
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.background_container{
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding-top: 40px;
					padding-bottom: 20px;
					
					.divider{
						width: 70%;
						margin-left: auto;
						margin-right: auto;
						background: #FFFCFC;
						opacity: 0.1;
						margin-bottom: 7px;
					}
				}
				
				.date_text_container{
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 20px;
					background: white;
					
					.day{
						font-weight: bold;
						//font-size: 1.25rem;
						margin-bottom: 5px;
					}
				}
				
				&.bin_black{
					.background_container{
						background: #3D3D3C;
						color: white;
					}
				}
				&.bin_green{
					.background_container{
						background: #11800D;
						color: white;
					}
				}
				&.bin_yellow{
					.background_container{
						background: #FACA00;
						color: black;
						
						.divider{
							opacity: 0.35;
						}
					}
				}
				
				.svg_container{
					margin-bottom: 20px;
					svg{
						height: 65px;
						width: auto;	
					}
			
				}
			}
		}
		
		.all_dates_both_years_wrapper{
			
			.all_dates_this_year, .all_dates_next_year {
				.all_dates_container:not(.hide){
					margin-bottom: 30px;
				}
			}
			
			.year_headline{
				color: #FF8000;
				text-decoration: underline;
				
				&:hover{
					cursor: pointer;
				}
			}
			
			.all_dates_container{
				display: grid;
				grid-template-rows: 1fr;
				opacity: 1;
				transition: opacity 0.75s ease-out, grid-template-rows 0.3s ease-out;
					
				.all_dates{
					columns: 4;
					column-width: 150px;
					overflow: visible;

						.date{
							padding: 10px 5px;
							list-style-type: none;
							display: inline-block;
							width: 100%;
							margin-bottom: 10px;
						}
						
						.date_black{
							background: #3D3D3C;
							color: white;
						}	
						
						.date_green{
							background: #11800D;
							color: white;
						}
						
						.date_yellow{
							background: #FACA00;
							color: #3D3D3C;
						}
					
				}
				
				.buttons_container {
					display: flex;
					gap: 20px;
					flex-wrap: wrap;
					margin-top: 10px;
					
					.print_container, .file_download {
						display: flex;
						align-items: center;
					}
					
					.svg_container {
						svg {
							display: block;
						}
					}
				}
				
				.divider{
					margin-bottom: 0;
					margin-top: 30px;
				}
				
			}
			
			.hide{
				transition: 0.5s ease-out;
				grid-template-rows: 0fr;
				opacity: 0;
				
				.all_dates{
					overflow: hidden;
				}
				
				.print_container{
					display: none;
				}
				
				.kalender_year{
					display: none;
				}
				
				.divider{
					display: none;
				}
			}
			
		}
		
		.icon_button_wrapper{
			display: flex;
			gap: 20px;
			flex-wrap: wrap;
			margin-bottom: 30px;
			
			.kalender_thisyear, .kalender_nextyear {
				display: flex;
				align-items: center;
			}
		}
			
		.icon_button, .print_icon {
			display: inline-block;
			text-decoration: none;
			text-transform: uppercase;
			padding: 20px;
			background: #262626;
			color: white;
			width: fit-content;
			transition: 0.3s;
			margin-right: 15px;
				
			&:hover, &:focus, &:focus-within, &:focus-visible{
				scale: 1.02;
				cursor: pointer;
				background: #FF8000;
				color: #262626;
			}
			
			.svg_container{
				svg{
					display: block;
					height: 20px;
					width: 20px;
				}
			}
		}	
			
	}
}

@media screen and (min-width: 37.500rem){
	.mod_kalender_element{
		.street_element_container{
			.dates{
				grid-template-columns: 1fr 1fr;
			}
			.all_dates_container{
				.all_dates{
					
				}
			}
		}
	}
}

@media screen and (min-width: 56.250rem){
	.mod_kalender_element{
		.street_element_container{
			.dates{
				grid-template-columns: 1fr 1fr 1fr;
			}
			.all_dates_container{
				.all_dates{
					
				}
			}
		}
	}
}

@media print {
	
	body{
		visibility: hidden;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
	
	.all_dates_container{
		visibility: visible;
		
		.year_headline, .print_container{
			visibility: hidden;
			height: 0 !important;
		}
		
		.all_dates_this_year{
			margin-bottom: 15px !important;
		}
		
		.all_dates{
			columns: 4;
			column-width: 150px;
			
			.date{
				display: inline-block;
				width: 100%;
				padding: 5px !important;
				list-style-type: none;
				margin-bottom: 10px !important;
			}
			
			.date_black{
				background: #3D3D3C !important;
				background-color: #3D3D3C !important; 
				color: white;
			}	
			
			.date_green{
				background: #11800D !important;
				background-color: #11800D !important;
				color: white;
			}
			
			.date_yellow{
				background: #FACA00 !important;
				background-color: #FACA00 !important;
				color: #3D3D3C;
			}
		}
	}
}