* { box-sizing: border-box; }

body { 
	margin: 0; padding: 0px; width: 100%; background-color: #fff; font-family: "Roboto"; font-size: 16px;
}

input, button { font-size: 16px; }
input { padding: 5px 7px; border: 1px solid #999; border-radius: 5px; }

input[type=text],
input[type=password] { width: 100%; }

input[type=text],
input[type=password],
button { min-height: 37px; }

button { padding: 5px 10px; letter-spacing: .6px; }

.visually-hidden { display: none; }

body {
	> * { max-width: 100%; }
	> header { display: flex; justify-content: space-between; }
}

.navbar-toggler { 
	display: flex; justify-content: center; align-items: center;
	padding: 0px 7px; }
.navbar-toggler > span { display: inline-block; font-size: 20px; }
.navbar-toggler > span:after { content: "\2630" }

#mod-menu1 { display: flex;
	margin: 0px; padding: 0px; list-style-type: none; }

.breadcrumb { display: flex; flex-wrap: wrap;
	margin: 0px 12px; padding: 0px; list-style-type: none;
	.breadcrumb-item { }
	.breadcrumb-item:not(:nth-child(2)):before {
		content: "\276F";
	}
	.breadcrumb-item span { margin: 0px 4px; }
	.breadcrumb-item:nth-child(2) span {
		margin-left: 0px;
	}
}

#principal {
	display: grid; grid-template-columns: 240px auto 220px;
	> aside {
		padding: 6px;
		> * {
			padding: 6px;
		}
		
		.mod-login {
			button { width: 100%; }
		}

		.form-group > * {
			margin-bottom: 12px;
		}

		.input-password-toggle {
			margin-top: 12px;
			> span.visually-hidden { display: inline; }
		}

		.plg_system_webauthn_login_button {
			display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
			svg { width: 30px; margin-right: 9px; }
		}
	}
	main { padding: 0px 6px;
		.com-content-article__body {
			font-family: "Domine"; font-size: 18px; line-height: 28px;
		}
		.article-info {
			display: flex; flex-wrap: wrap;
			line-height: 23px;
			> * { margin: 0px 2px; padding: 0px; }
			> *:not(:last-child):after { content: "|"; }
		}
	}
}

@media (max-width: 1250px){
	#principal { grid-template-columns: 240px auto;
		
	}	
}

@media (max-width: 950px){
	#principal { grid-template-columns: auto;
		> aside { columns: 2; }
	}
}

@media (max-width: 650px){
	#principal {
		> aside { columns: 1; }
	}
}