.body{
	font-family: Roboto;
	margin:0;
	padding:0;
	padding-top: env(safe-area-inset-top);
}

.navigation{
		background:var(--secondary-surface);
		display: flex;
		padding-top: 60px;
		width: 300px;	
		height: 390px;	
		padding-bottom: 0px;	
		flex-direction: column;	
		flex-shrink: 0;
}

.menu{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.name_application{
	color: var(--primary);
	text-align: center;
	font-family: Roboto;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 83.333% */
	letter-spacing: 2px;
}

.menu_bars{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.menus_active{
	display: flex;
	width: 250px;
	padding: 16px;
	align-items: center;
	gap: 16px;border-radius: 0px 16px 16px 0px;;
	background: var(--secondary-surface);
}

.menus_inactive{
	display: flex;
	width: 250px;
	padding: 16px;
	align-items: center;
	gap: 16px;border-radius: 0px 16px 16px 0px;
}

.information_line{
	display: flex;
	width: 200px;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.name_bars{
	color: var(--primary);
	text-align: center;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 125% */
	letter-spacing: 2px;
}

.name_bars_two{
	color: var(--primary);
	text-align: center;
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 125% */
}

.flex{
	display: flex;
}

.button_profile{
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	color: var(--primary);
	text-align: center;
	/* M3/title/medium */
	font-family: Roboto;
	font-size: clamp(10px, 1vw, 16px);
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.15px;
	background: var(--primary-container);
	display: flex;
	align-items: center;
  justify-content: center;
}

.card_request{
	width: 360px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 12px;
	border: 1px solid var(--outline-variant)
}

.head_card_request{
	width: 340px;
	height: 72px;
	padding: 12px 4px 12px 16px;
	align-items: center;
	flex-shrink: 0;
}

.card_profile{
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	color: var(--surface);
	text-align: center;
	/* M3/title/medium */
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0.15px;
	background: var(--primary);
	}

	.first_name_card{
	color: var(--on-surface);
	/* M3/title/medium */
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px; /* 150% */
	letter-spacing: 0.15px;
	}

	.condition_name_card{
	color: #F00;
	/* M3/body/medium */
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.25px;
	}

	.work_status{
	display: flex;
	padding: 0px 10px;
	align-items: center;
	gap: 8px;
	color: #000;
	text-align: center;
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.25px
	}

	.trait_description{
		display: flex;
		width: 320px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.feature{
	width: 320px;
	height: 1px;
	background: var(--outline-variant);
	}
	
	.application_category{
	color: var(--on-surface);
	/* M3/body/large */
	font-family: Roboto;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
	letter-spacing: 0.5px;
	}

	.subcategory{
	color: var(--on-surface-variant);
	/* M3/body/medium */
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.25px;
	}

	.categories{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	}

	.part_card{
		display: inline-flex;
		padding: 20px 0px 626px 20px;
		justify-content: flex-end;
	}

	.second_part_card{
		display: flex;
		width: 340px;
		padding: 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		padding-right: 4px;
	}

	.list_tags{
		display: flex;
		width: 328px;
		height: 110px;
		align-items: flex-start;
		align-content: flex-start;
		gap: 6px;
		flex-wrap: wrap;
	}

	.tag{
	display: flex;
	height: 32px;
	padding: 6px 16px;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	border: 1px solid var(--outline);
	}

	.time_passed{
	color: #B4B4B4;
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.25px;
	width: 100%;
	padding-left: 16px
	}

	.more_detailed_button{
	display: flex;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 100px;
	border: 1px solid var(--outline);
	}

	.finish_button{
	color:  #FFF;
	text-align: center;
	/* M3/label/large */
	font-family: Roboto;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 142.857% */
	letter-spacing: 0.1px;
	display: flex;
	height: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 100px;
	background: var(--primary);
	}	

	.finish_button:hover{
	cursor: pointer;
	transition: background-color 1s 0.5s;
	background-color: #14738A;
	box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30);
	}

	.secondary-button{
		color:  #FFF;
		text-align: center;
		/* M3/label/large */
		font-family: Roboto;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 20px; /* 142.857% */
		letter-spacing: 0.1px;
		display: flex;
		height: 40px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 8px;
		border-radius: 100px;
	}	

	.secondary-button:hover{
	cursor: pointer;
	}

	.line_button{
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 8px;
	align-self: stretch;
	}

	.title_button{
	display: flex;
	padding: 10px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex: 1 0 0;
	align-self: stretch;
	}

	.search{
	display: flex;
	width: 720px;
	height: 56px;
	min-width: 360px;
	max-width: 720px;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;border-radius: 28px;
	background: var(--secondary-surface);
	}

	.sandwich{
	display: flex;
	width: 48px;
	height: 48px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	}

	.placeholder-text{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border: 3px solid transparent;
		background-color: transparent;
		pointer-events: none;
		display: flex;
		align-items: center;
	}
	
	.loader {
		width: 48px;
		height: 48px;
		border: 5px solid #FFF;
		border-bottom-color: #FF3D00;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
		}
	
		@keyframes rotation {
		0% {
				transform: rotate(0deg);
		}
		100% {
				transform: rotate(360deg);
		}
		}

	.authorization-space{
	height: 100vh;
	display: grid;
	/* Change  values to experiment*/
	align-content: center;
	justify-content: center;
		}

	.authorization-field{
		flex-direction: column;
		display: flex; 
		width: 500px;
		flex-shrink: 0;
		background: #F2F4F5;
		filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15)) drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.30));
	}

	.title-entrance{
	color: #000;
	font-family: Roboto;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px; /* 83.333% */
	letter-spacing: 0.1px;display: flex;
  justify-content: center;padding-top: 40px
	}

	.input-group {
	width: 360px;
	position: relative;
	border-radius: 4px;
	margin: 16px;
	}

		.input-group input {
	padding: var(--padding);
	border: none;
	background-color: transparent;
	width: 100%;
	color: var(--text);
	font-size: 16px;
	line-height: var(--line-height);
	}

	.input-group:hover,
	.input-group:focus-within {
	border-color: var(--primary);
	}
		
	.input-group input:focus,
	.input-group:hover input {
	color: var(--primary);
	}

	.input-group label {
	position: absolute;
	background-color: transparent;
	padding: var(--padding);
	line-height: var(--line-height);
	top: 0;
	left: 0;
	bottom: 0;
	color: var(--on-surface-variant);
	cursor: text;
	}

	.input-group:hover label {
	color: var(--primary);
	}

	.input-group:focus-within label,
	.input-group input:not(:placeholder-shown) ~ label {
	padding: 0px 8px;
	background-color: var(--color-input-group);
	top: -12px;
	left: 16px;
	bottom: auto;
	color: var(--on-surface-variant);
	}

	.input-main{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 60px;
	}

	.input-email{
	padding-right: 0px;
	padding-left: 4px;
	}
	.input-password{
	padding-right: 0px;
	padding-left: 4px;
	}
	
	.button-group{
	margin-top: 120px;
	display: flex;
	justify-content: flex-end;
	padding-bottom: 20px;
	}

	.application-for-registration{
	display: flex;
	padding: 10px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex: 2 0 0;
	align-self: stretch;
	}
	.login-button{
	display: flex;
	padding: 10px 24px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex: 1 0 0;
	align-self: stretch;
	}
	
	.bottom-menu{
		background-color: var(--secondary-surface);
		overflow: hidden;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 1;
		display:grid;
		padding: 0px 8px;
		align-items: flex-start;
		gap: 8px;
		justify-content: center;
		justify-items: stretch;
		grid-template-columns: repeat(auto-fit, minmax(60px,1fr));
	}
	.item-bottom-menu{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 6px;
		padding-top: 6px;
	}
	.icon-bottom-menu{
		display: flex;
		width: 32px;
		justify-content: center;
		align-items: center;
	}
	.on-bottom-menu{
		border-radius: 16px;
		background: var(--m-3-sys-light-secondary-container, #CFE6F1);
		display: flex;
		height: 32px;
		padding: 4px 20px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}
	.off-bottom-menu{
		border-radius: 16px;
		background: var(--m-3-sys-light-secondary-container, #CFE6F1);
		display: flex;
		height: 32px;
		padding: 4px 20px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		flex-shrink: 0;
	}
	.text-menu{
		color: var(--m-3-sys-light-on-surface, #191C1D);
		text-align: center;
		font-family: Roboto;
		font-size: 12px;
		font-style: normal;
		font-weight: 600;
		line-height: 16px;
		letter-spacing: 0.5px;
	}
	md-outlined-text-field{
		width: 360px;
	}
	@media screen and (max-width: 375px) {
    .bottom-menu{
			display: none;
		}
	}
	@media screen and (max-width: 576px) {

		.button-group{
			flex-direction: column;
		}
		.authorization-field{
			width: auto;
			filter:none;
		}
		.authorization-field{
			background:none;
		}
		.input-group{
			width: auto;
		}
		md-outlined-text-field{
			width: 300px;
		}
	}