header {
	background-color: var(--header-background);
	height: 62px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.logos {
		.img-asygn {
			width: 126px;

			@media (max-width: 1270px) {
				width: 100px;
			}
	
			@media (max-width: 1100px) {
				width: 90px;
			}
		}
	
		.img-colibry {
			width: 94px;

			@media (max-width: 1270px) {
				width: 75px;
			}
	
			@media (max-width: 1100px) {
				width: 65px;
			}
		}
	}

	.user {
		display: flex;
		align-items: center;
		gap: 16px;
		margin-right: 16px;
	}

	.action {
		display: flex;
		gap: 16px;
		margin-right: 16px;
	}

	.popup-profile {
		position: relative;
		display: inline-block;
		cursor: pointer;
	
		#profile-button {
			display: flex;
			align-items: center;
			gap: 5px;
			font-weight: bold;
		}
	
		.popup {
			display: none;
			position: absolute;
			top: 110%;
			left: -54%;
			background-color: var(--popup-background, white);
			padding: 16px;
			z-index: 100;
			border-radius: var(--general-border-radius, 10px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			min-width: 150px;

			@media (max-width: 1270px) {
				padding: 12px;
				min-width: 140px;
			}
	
			@media (max-width: 1100px) {
				padding: 8px;
				min-width: 132px;
			}
	
			a,
			button {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				margin: 10px 0;
				text-decoration: none;
				color: black;
				background: none;
				border: none;
				cursor: pointer;
				font-size: 18px;

				@media (max-width: 1270px) {
					font-size: 16px;
				}
		
				@media (max-width: 1100px) {
					font-size: 14px;
				}

				svg {
					@media (max-width: 1270px) {
						width: 20px;
						height: 20px;
					}
				
					@media (max-width: 1100px) {
						width: 18px;
						height: 18px;
					}
				}
			}

			form {
				display: flex;
				justify-content: center;
			}
	
			a {
				border-bottom: 1px solid #ddd;
				padding-bottom: 10px;
			}
		}
	}

}