:root.darkmode {
  filter: invert(0.95) hue-rotate(.5turn);
}

:root.darkmode :is(img, iframe, video, .adsbygoogle) {
  filter: invert(0.95) hue-rotate(.5turn);
}

:root.darkmode img:not(:hover) {
  opacity: .7;
  transition: opacity .25s ease-in-out;
}

:root.darkmode .headerbar {
	background-image: none;
}

.navbar-breadcrumbs .styles-darkmode-toggle {
	float: none;
	margin-left: 6px;
	line-height: 35px;
}

.navbar-breadcrumbs .breadcrumbs + .styles-darkmode-toggle,
.navbar-breadcrumbs .rightside:not(.styles-darkmode-toggle) + .styles-darkmode-toggle {
	margin-left: auto;
}

.navbar-breadcrumbs .styles-darkmode-toggle + .styles-darkmode-toggle {
	margin-left: 4px;
}

.navbar-breadcrumbs .styles-darkmode-toggle a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #b6c5d5;
	border-radius: 4px;
	background: linear-gradient(#f8fbff, #d7e1ec);
	box-shadow: inset 0 1px 0 #ffffff;
	text-decoration: none;
	vertical-align: middle;
}

.navbar-breadcrumbs .styles-darkmode-toggle a:hover,
.navbar-breadcrumbs .styles-darkmode-toggle a:focus {
	border-color: #9fb3c7;
	background: linear-gradient(#ffffff, #cfdbea);
	text-decoration: none;
}

.navbar-breadcrumbs .styles-darkmode-toggle .icon {
	margin: 0;
	font-size: 14px;
	line-height: 1;
	text-shadow: 0 1px 0 #ffffff;
}

.navbar-breadcrumbs #callLight .icon {
	color: #d9932f;
}

.navbar-breadcrumbs #callDark .icon {
	color: #5f7fa3;
}

.navbar-breadcrumbs .styles-darkmode-toggle span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Ensure whichever toggle is visible is pushed to the right, even if it is callDark which has a display:none sibling before it */
.navbar-breadcrumbs .styles-darkmode-toggle:not([style*="display: none"]) {
	margin-left: auto !important;
}