/* Portal Sidebar */
#portal-sidebar {
	background: var(--background-hover-opa-40);
	border-radius: 1rem;
	padding: 1.5rem;
}
#portal-sidebar>hr {
	border-bottom: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
	border-top: 1px solid var(--base-opa-40);
}
#portal-sidebar>p svg {
	width: 1rem;
	height: 1rem;
}

.portal-nav-link {
	display: inline-block;
	width: 100%;
	text-decoration: none;
	color: var(--base);
	opacity: 0.5;
	-webkit-transition: opacity .166s ease-out;
	-o-transition: opacity .166s ease-out;
	transition: opacity .166s ease-out;
}
.portal-nav-link:hover {
	opacity: 1;
}

/* Portal Body */
#portal-body {
	background: var(--background-hover-opa-40);
	border-radius: 1rem;
	padding: 1.5rem;
}
#portal-body .nav-underline {
	-webkit-box-shadow: inset 0 -1px 0 var(--base-opa-15);
			box-shadow: inset 0 -1px 0 var(--base-opa-15);
}
#portal-body .nav-link.active {
	color: var(--base);
	border-color: var(--base);
	pointer-events: none;
}
#portal-body .nav-link:not(.active) {
	opacity: 0.5;
	color: var(--base);
}
#portal-body .nav-link:not(.active):hover {
	border-color: var(--base-opa-50);
}

/* Overview */
#auto-recharge-container {
	border-radius: 0.5rem;
	border: 1px solid var(--neutral-opa-15);
}
#auto-recharge-container svg {
	width: 1rem;
	height: 1rem;
}

/* Time Grants */
#time-grant-table th {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
	color: var(--base-opa-50);
	border-color: var(--neutral-opa-15);
}
#time-grant-table td {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
	color: var(--base-opa-50);
	border-color: var(--neutral-opa-15);
}
#time-grant-table thead th {
	color: var(--base-opa-85);
}
#time-grant-table thead td {
	color: var(--base-opa-85);
}
#time-grant-table .table-last-row>td {
	border: none;
}

#time-grant-progress {
	background: var(--background-hover);
}
#time-grant-progress>.progress-bar {
	background: var(--green-opa-50);
}
#time-grant-consumption-text {
	white-space: nowrap;
}

/* Hint Toolips */
#body-container [class*=hint--] {
	text-decoration: underline;
	-webkit-text-decoration-color: var(--base-opa-15);
			text-decoration-color: var(--base-opa-15);
	text-decoration-thickness: 1px;
	-webkit-text-decoration-style: dotted;
			text-decoration-style: dotted;
}
#body-container [class*=hint--]::after {
	padding: 1rem;
	width: 270px;
	max-width: 40vw;
	white-space: normal;
	font-size: 0.825rem;
}

/* Usage Listings */
#usage-dates-container>.date-items-container>div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
		-ms-flex-pack: justify;
			justify-content: space-between;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	margin-top: 1rem;
}
#usage-dates-container>.date-items-container>div>hr {
	border-top: 1px dashed var(--base-opa-50);
	-webkit-box-flex: 1;
		-ms-flex-positive: 1;
			flex-grow: 1;
	margin-left: 1rem;
	margin-right: 1rem;
}
#date-empty-container {
	background: var(--background-hover);
}

/* Invoice Links */
.invoice-link {
	color: var(--base-opa-50);
	text-decoration: none;
}
.invoice-link:hover {
	text-decoration: underline;
}