:root {
	--brand-color-l1: var(--wa-color-blue-20);
	--brand-color-l2: var(--wa-color-blue-50);
	--brand-color-l3: var(--wa-color-blue-80);
	--brand-color-l4: var(--wa-color-blue-95);
}

/*common items*/
wa-button.common-outlined-btn::part(base) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

wa-button.common-filled-btn::part(base) {
	background: var(--brand-color-l1);
	color: var(--brand-color-l4);
}

html,
body {
	min-height: 100%;
	padding: 0;
	margin: 0;
	background: var(--wa-color-surface-lowered);
}

body {
	color: var(--wa-color-text-normal);
}

main {
	padding: 0;
}

a {
	color: var(--wa-color-text-link);
}

.app-shell {
	--menu-width: calc(var(--wa-space-5xl) * 3);
	background: var(--wa-color-surface-lowered);
}

.app-shell[view='mobile'] {
	--menu-width: auto;
}

.app-header {
	background: var(--wa-color-surface-default);
	border-bottom: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.app-impersonation-banner {
	padding: var(--wa-space-xs) var(--wa-space-m);
	background: var(--wa-color-danger-fill-loud);
	color: var(--wa-color-danger-on-loud);
}

.app-impersonation-banner form {
	margin: 0;
}

.app-impersonation-stop::part(base) {
	border-color: var(--wa-color-danger-on-loud);
	color: var(--wa-color-danger-on-loud);
}

.app-section {
	padding: var(--wa-space-2xl);
}

.app-container {
	max-width: 74ch;
	margin-inline: auto;
}

.app-navigation,
.app-navigation-footer {
	padding: var(--wa-space-m);
}

.app-nav-item,
.app-full-width {
	width: 100%;
}

.app-nav-item::part(base) {
	justify-content: flex-start;
}

.app-notification-button wa-badge {
	inset-block-start: 1em;
	inset-inline-end: 1em;
	font-size: var(--wa-font-size-xs);
	transform: none;
}

.app-notification-button wa-icon {
	font-size: var(--wa-font-size-l);
}

.app-notification-button wa-badge::part(base) {
	border-radius: var(--wa-border-radius-pill);
	line-height: 1;
}

.app-muted {
	color: var(--wa-color-text-quiet);
}

.app-dashboard-grid {
	--min-column-size: 24ch;
}

.notification-summary-grid {
	--min-column-size: 18ch;
}

.notification-list {
	max-width: 82ch;
	margin-inline: auto;
}

/*Login*/
.login-card {
	padding: 20px;
	border: 1px solid var(--brand-color-l1);
	border-radius: var(--wa-border-radius-m);
	background: var(--brand-color-l4);
}

wa-button.login-submit::part(base) {
	background: var(--brand-color-l1);
}

wa-button.login-gmail::part(base) {
	color: var(--brand-color-l1);
}

/*Navbar*/
wa-button.logo::part(base) {
	color: var(--brand-color-l1);
}

wa-button.nav-btn::part(base) {
	background: white;
	color: var(--brand-color-l1);
}

wa-button.nav-btn::part(base):hover {
	background: var(--brand-color-l4);
}
wa-button.grp-btn-inactive::part(base) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}
wa-button.grp-btn-active::part(base) {
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}
wa-avatar.user-icon::part(icon) {
	color: var(--brand-color-l1);
}

/*sidebar*/
wa-button.app-nav-item::part(base){
	color: var(--brand-color-l1);
	font-weight: var(--wa-font-weight-light);
}

wa-button.app-nav-item::part(base):hover {
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
	font-weight: var(--wa-font-weight-bold);
}

wa-button.btn-logout::part(base) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l1);
	color: var(--brand-color-l4);
}

wa-button.btn-logout::part(base):hover {
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

/*Domain search*/
wa-button.search-btn::part(base) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l1);
	color: var(--brand-color-l4);
}

wa-card.src-result::part(body) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

/*Buy domain*/
wa-card.buy-domain-form::part(body) {
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

/*wa-input::part(label) {*/
/*	color: var(--brand-color-l1);*/
/*}*/

/*Transfer domain*/
wa-card.transfer-domain-form::part(body) {
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

/*View domain*/
wa-card.view-domain-cards::part(body) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

/*Manage DNS*//*Nameservers*/
wa-card.manage-dns-cards::part(body) {
	border: 1px solid var(--brand-color-l1);
	background: var(--brand-color-l4);
	color: var(--brand-color-l1);
}

wa-card.domain-card::part(body) {
	color: var(--brand-color-l1);
}