:root {
    --primary-color: black;
    --primary-link-color: #1e79a7;
    --bg-color: white;
    --bg-light-color: #ddd;
    
    /* skins */
    --paper-light-bg-color: #f7f7f7;
    --paper-light-hover-bg-color: #eee;

    --button-primary: #4285f4;

    /* polymer */
    --primary-text-color: var(--primary-color);
    --paper-checkbox-checkmark-color: var(--bg-color);
    --paper-dialog-button-color: var(--primary-link-color);
}

:root[color-scheme='dark'] { /* note that color-scheme in dom cannot be empty for this logic to work */
    --primary-color: #ddd;
    --primary-link-color: #8ab4f8;
    --bg-color: #222;
    --bg-light-color: #333;

    --button-primary: #3b8183;

    /* skins */
    --paper-light-bg-color: var(--bg-light-color);
    --paper-light-hover-bg-color: #555;

    --ad-filter: invert();
    --ad-outline: 1px solid #aaa;

    --thankyou-social-buttons-filter: grayscale(100%);

    /* dark only */
    --primary-color-lighter: #ccc;
    --input-bg-color: #2a2a2a;

    --paper-dialog-background-color: var(--bg-light-color);
    --paper-listbox-background-color: var(--bg-light-color);
    --primary-background-color: var(--bg-light-color);
}

[hidden] {display: none !important}

body {
    padding:0;
    margin:0 auto;
}

html:not(.search):not(.newtab) body {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

body, table {font-size:16px}
body, h1, h2 {font-family: roboto, sans-serif !important}

app-drawer-layout.loading {opacity:0.5}

paper-button > iron-icon {margin-inline-end:8px}

paper-icon-button {opacity:0.7;transition:opacity 0.1s ease-in}
paper-icon-item iron-icon {opacity:0.5}
paper-icon-button:hover {opacity:1}

paper-item:hover,
paper-icon-item:hover {
    cursor:pointer;
    background-color: var(--paper-light-hover-bg-color);
}

.separator {height:1px;background:#ddd;margin:8px 0;min-height:0 !important}

html.wiki app-toolbar .center {width:auto;text-align:left} /* patch because wiki overwrites the .center class */
app-toolbar {color:white;background:#525659}
app-toolbar a:hover, paper-tabs a:hover {text-decoration:none}

@media screen and (min-width: 1400px) {
	body:not(.popup) app-toolbar {padding:0 calc(calc(100% - 1366px) / 2)}
}
#middle {
    margin: 0 auto;
    width: 100%;
    max-width: 1366px;
}

paper-tabs {
    --paper-tabs-selection-bar-color: white;

    & a {
        text-transform: uppercase;
    }

    & paper-tab {
        border-radius: 8px 8px 0 0;
        transition: background 0.1s ease-in !important;
    }

    & paper-tab:hover {
        background:rgba(255,255,255,0.1);
    }
}

app-toolbar a,
paper-tabs a,
paper-tabs a:visited,
app-toolbar a:visited,
paper-tabs paper-tab a:hover {
    color:white !important;
}

.drawerMenu {margin-inline-end:20px}

button.colored,
.Button.colored,
paper-button.colored {
    background-color: var(--button-primary) !important;
    color: #fff;
}

paper-toast {min-width:auto}
.rtl paper-toast {left:auto;right:12px}
paper-toast {padding-right:20px}
xxpaper-toast#error {font-weight:bold;--paper-toast-color:#FF5050}
.toastLink {color:#a1c2fa}
.toastLink:hover {color:#bbdefb}

paper-toast {padding:8px 9px 4px 16px}

.closeToast {cursor:pointer}

.adsbygoogle {display:block}

a {text-decoration:none;color:var(--primary-link-color)}
a:hover {text-decoration: underline}

.jason-blog a,
.jason-blog a:hover {
    box-shadow: none;
    transition: none;
    text-decoration: none;
}

img {border:0}
ul {-webkit-padding-start:15px;-moz-padding-start:15px}
ol {-webkit-padding-start:22px;-moz-padding-start:22px}
li {padding:3px 0}

.local-pub {text-align:center}
.local-pub:hover {opacity:0.8}

input, select {font-size:1em}
input[type='text'], input[type='email'], select, textarea {transition:border-color ease .1s;border:1px solid #ddd;padding:5px 10px;font-family:roboto, sans-serif;font-size:16px}
input[type='text']:hover, input[type='email']:hover, select:hover, textarea:hover {border-color:#bbb}
input[type='text']:focus, input[type='email']:focus, select:focus, textarea:focus {border-color:#4184f3}

@-moz-document url-prefix() {
	.adsbygoogle {max-width:500px}
}

[unresolved] app-drawer,
[unresolved] app-header {
	height: 32px !important;
	display: block;
	color:transparent;
	background-color:#525659;
}

[unresolved] app-header * {
	opacity:0;
}

[unresolved] #yikes-title {
	display:none;
}

[unresolved2] paper-toast,
[unresolved2] paper-tooltip {
	display:none! important;
}

[unresolved2] .installButton {
	padding:0 !important;
}
[unresolved2] .installButton img {
	max-height:42px;
}

[unresolved2] iron-icon {
	height:24px;
}

[unresolved2] social-media-icons {
	height:20px;
}

[unresolved2] #middle paper-button {
	display:inline-flex;
	justify-content: center;
	min-width: 5.14em;
	margin: 0 0.29em;
	padding: 0.7em 0.57em;
	position: relative;
	box-sizing: border-box;
	text-transform: uppercase;
    outline-width: 0;
	border-radius: 3px;
}

[unresolved2] #middle paper-button[raised] {
	box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
}

#mainContent {margin:10px}
.homepage #mainContent, .forum #mainContent {margin:0}
.homepage #mainContent section {position:relative;margin:10px;xxtransform:translateY(90px);transition:all 320ms cubic-bezier(0.55, 0, 0.1, 1)}
#pageMiddleAdWrapper {xxwidth:100%;max-width:334px;max-height:280px}
.polymer-ready.homepage #mainContent section {transform:translateY(0)}
.homepage #mainContent section a {display:block;line-height:0}
.homepage #mainContent paper-button {background:white;color:black}
.homepage #mainContent .playButton {position:absolute;width:65px;height:65px;left:43%;top:42%;background:rgba(0,0,0,0.3);color:white;border-radius:50%;transition:all 0.1s ease-in}
.homepage #mainContent .playButton:hover {background:rgb(190,28,33);transform:scale(1.2)}
.extensionImage {width:100%}
.tileFooter {
    position:absolute;
    left:0;
    font-size:1em;
    width:100%;
    bottom:0px;
    color:white;
    cursor:pointer;
    pointer-events:none;
    direction:ltr;
    opacity:0;
    transform:translateY(30px);
    transition:all 320ms cubic-bezier(0.55, 0, 0.1, 1) !important;
}
body:not(.edge) .installButton {padding:0}
.installButton img {width:120px}
#appPage .installButton img {width:150px}
.homepage .installButton {pointer-events:none;margin-inline-end:20px}
.homepage .installButton:hover {background-color:#ddd !important}
.tileFooter .slideshowBlurb {margin-top:5px}

.edge .installButton:after {content:"Get it on Microsoft Edge"}
.edge .installButton img {max-height: 19px;width: auto !important;padding-right:8px}
.edge .tileFooter .stars,
.edge .tileFooter .slideshowBlurb {display: none}

.homepage #mainContent section img {
    -webkit-backface-visibility: hidden;
    transition:opacity 0.15s ease-in-out;
    border-radius: 7px;
} /* backface patch for transition/width bug http://stackoverflow.com/questions/12980153/image-moves-on-hover-chrome-opacity-issue */
.homepage #mainContent section:hover img {opacity:0.8}
.homepage #mainContent section:hover .tileFooter {opacity:1;transform:translateY(0)}
.homepage #mainContent section:hover .installButton {pointer-events:auto}

.linkAds {display:none}

.browser {position:absolute;top:8px;right:8px;width:25px}

#blurb {cursor:pointer;font-size:0.8em}
#blurb .title {font-size:20px}
.jason-blog #blurb .title {font-size:16px}
#logo img {max-height:50px;border-radius:50%;vertical-align:middle;margin-inline-end:15px}
#blurb > * {line-height:1.4 !important}
#blurb.slogan-transition .title,
.slogan-transition .siteSlogan {transition:all 0.3s ease-in}
.siteSlogan {display:none}
#blurb.animate-slogan .title {transform:translateY(0) !important}
#blurb.animate-slogan .siteSlogan {transform:translateY(0) !important;opacity:1}

#mainNav {width:790px}
.jason-blog #mainNav {width:400px}
#mainNav #selectionBar {background-color:white}

#video {width:65vw;height:60vh}
#video, iframe[src*='youtube.com/embed'] {max-width:660px;max-height:371px}

.video {display:none;pointer-events: none}

html:not(.forum) #middle {margin-top:2px}
#middle {margin-bottom:15px}

.adHeader {font-size:11px;text-align:center;margin-bottom:1px}

html.thankYou #mainContent {text-align:center}
#pageLeft, #pageRight {display:none;min-width:160px;width:160px;margin:0 10px} /* used overflow because inner google ad layers were larger then outer ??? and generated vertical scrollbars when my web pages were short */
#pageMiddleAd {margin:10px auto}
.homepage #pageMiddleAd {min-height:280px;min-width:100%}
#body-footer {text-align:center;color:gray;margin:5px 0;font-size:0.8em}
#body-footer a {margin:0 4px;color:gray}
#body-footer .footerSep {line-height:11px;display:inline-block;margin-right:-2px;border-left:1px solid #ccc}
table {margin: 0;padding: .5em}
html:not(.jason-blog) h1 {font-weight:bold;border-bottom:none}
.hide {display:none}

.socialButton {min-width:2em;opacity:0.7;transition:opacity 0.1s ease-in}
app-toolbar .socialButton,
.homepage .socialButton {filter:grayscale(100%)}
.socialButton:hover {opacity:1}
#thankYouPoints .socialButton {filter: var(--thankyou-social-buttons-filter)}

.noads #pageLeft,
.noads #pageRight,
.no-side-ads #pageLeft,
.no-side-ads #pageRight {display:none}

.noads .adsbygoogle {display:none !important}

.no-header-footer app-header {display:none}
.fullbleed #middle {margin:0 !important;max-width:initial !important}
.fullbleed #mainContent {margin:0}

address {margin-top:4px}

paper-dialog {
    border-radius:8px;
    max-width: 600px;
}

h2 {margin:0}
paper-dialog h2 {
    margin-top:24px;
    white-space: pre-wrap;
}
h2 a {font-size:1em !important}

button:not([class$='-atMentionStyles-suggestion']):not(.richEditor-button):not([class$='styles-buttonIconMenuBar']):not(.stripe-button-el),
.Button {
	font-size: 1em;
	font-weight: normal;
	padding: 0.7em 0.57em;
	text-decoration: none;
    text-shadow:none;
    text-transform: uppercase;
	box-shadow:none;
	display: inline-block;
	border: none;
    border-radius: 3px;
    box-shadow: var(--paper-material-elevation-1_-_box-shadow);
	cursor: pointer;
}

button:not([class$='-atMentionStyles-suggestion']):not(.richEditor-button):not([class$='styles-buttonIconMenuBar']):hover,
.Button:hover {
	border-color: #aaa;
	box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
	
button.primary:hover,
.Button.Primary:hover {
	border-color: #333;
	text-decoration: none !important;
}
button:active,
.Button:active {
	transform:translateY(1px);
}

a:not(.inherit) {color: var(--primary-link-color)}
a:hover.Button {text-decoration:none}

#loading-spinner {
    position:absolute;
    top:48%;
    left:calc(50% - 35px);
    width:70px;
    height:70px;
    z-index: 2000;
}

#search {display:none;height:47px;max-width:400px}
.search #mainNav, .searchVisible app-toolbar .socialButton, .searchVisible #mainNav, .search #mySearchButton, .searchVisible #mySearchButton {display:none}
.search #search, .searchVisible #search {display:block}

button.gsc-search-button {
    padding: 6px 27px !important;
}
#search .gsc-clear-button {display:none}
.gsc-search-button-v2 {
    background-color: var(--button-primary) !important;
}

.socialButton.large {transform:scale(2);margin:20px}

#appPage {margin-top:15px; margin-bottom: 100px} /* go above ezoic ads */
#appPage paper-card {margin:20px 10px;width:100%}
#appPage paper-card iframe {width:100%;xxheight:207px}
#appPage paper-card paper-button iron-icon {color:#666}
.appPageImage {max-width:100%;border-radius:7px}
.appPageButtons {margin-bottom:30px}
.inherit, .inherit:visited {color:inherit;background-color:inherit}
.inherit:hover {text-decoration:none}
#appPageHeader h1 {margin:0 0 3px}
#appPageLogoWrapper {display:inline-block;position:relative;color:white}
.appPageIntro {max-width:85%}
.appPreviewImage {max-width:100%}
#appPage iframe {width:100%;margin:0 10px}
#appPageDetails {position:absolute;left:1px;bottom:10px;text-align:left}
.appPageIntro {margin:22px 0}
#rating {margin-left:2px}
#appPageDetails #rating, #appPageDetails #rating a {color:white}
#rating a {color:black}
#ratingUsers {margin-top: 4px;vertical-align: top;display: inline-block}
#users {margin:6px}
.appPreviewImage {margin-bottom:50px;xxbox-shadow:5px 5px 5px gray}
#appPage pre {white-space: pre-wrap;font-family:inherit;text-align:left}

.local-pub img:not([src*="roadway"]):not([src*="bitcoin"]):not([src*="supportYour"]):not([src*="industryDestroyingPlanet"]) {
    filter: var(--ad-filter);
    outline: var(--ad-outline);
}

/* Wiki */

#mw-page-base, #mw-head-base {display:none} /* was causing the right ad fixed to hover lower than the left ad */

html.wiki img {max-width:100%;height:auto}
html.wiki #mainContent {position:static}

html.wiki #mainContent a:not(.inherit):not(.new),
html.wiki #mainContent a:not(.inherit):not(.new):visited {
    color: var(--primary-link-color) !important
}

/* official w3c patch to change color of disc: https://www.w3.org/Style/Examples/007/color-bullets.en.html */
html[color-scheme='dark'].wiki ul > li:not(.toclevel-1):not(.toclevel-2)::before {
    margin-inline: -10px 5px;
    content: "•";
    color: var(--primary-color);
}

div#content.mw-body {
    color: var(--primary-color);
    background-color: var(--bg-color);
    margin-left:0;
    border:none;
}

div#content a.external, div#content a.external[href ^="https://"], .link-https {background-image:none;padding-right:0}
.mw-body a.external:visited {color:#7759ae}

#toc, .toc {font-size:1em}
#toctitle {display:none}
.tocnumber {display:none}

#mainContent.loggedout #mw-navigation {display:none}
#mainContent:not(.loggedout) #mw-navigation {position:relative}
#mainContent:not(.loggedout) #mw-navigation h2 {display: none}
#mainContent:not(.loggedout) #mw-navigation #mw-panel {position:static}

.mw-newarticletext {display:none}
.mw-jump {display:none}
#editpage-copywarn {display:none}

html.wiki .Main_Page #firstHeading {display:none}
html.wiki .Main_Page #contentSub {display:none}
html.wiki .Main_Page h2 {padding-top:0}

html.wiki .MAC_compareTable {border-collapse:collapse;margin:10px 0}
html.wiki .MAC_compareTable tr:first-child td {vertical-align:top}
html.wiki .MAC_compareTable td {border:1px solid #aaa;margin:0;padding:5px;text-align:center}
html.wiki .MAC_compareTable td:first-child {white-space:nowrap;text-align:left}
html.wiki .MAC_compareTable_no {color:red}
html.wiki .MAC_compareTable_yes {color:green;font-size:3em;line-height:0em}

html.wiki .Gmail_extension_comparison .MAC_compareTable tr td:nth-child(2), html.wiki .Calendar_extension_comparison .MAC_compareTable tr td:nth-child(2) {background-color:rgb(255, 255, 172)} 

html.wiki #footer {display:none}

html.wiki .highlights {padding:0 0 10px 10px;font-size:14px;border-radius:12px;border:2px solid rgb(119, 194, 143)}
html.wiki .highlights h2 {padding-top:0;color:green}

html.wiki .editOptions {
    background-color: black;
    color: white;
}

html.wiki .tocnumber {
    color: var(--primary-color);
}

/* Forum */

html.forum ins[data-anchor-status] {display:none !important}
html.forum body {line-height:normal}
html.forum a:hover {color: inherit}
html.forum ul {-webkit-padding-start:0;-moz-padding-start:0px}
html.forum .flex { /* patch to override flex in style.css */
	xx-webkit-align-items: inherit;
	xx-ms-flex-align: inherit;
	xxalign-items: inherit;
}
html.forum .TextBox ul {-webkit-padding-start:20px;-webkit-padding-start:20px;list-style:circle}
html.forum .TextBox ul li {list-style: disc}
html.forum .TextBox ol, .TextBox ul {padding-left:24px}
html.forum .TextBox ol {list-style:decimal}
html.forum #Head {display:none;background:none}
html.forum #Head a {font-weight:normal}
html.forum #Head #Menu {
	list-style: none;
	display:-webkit-flex;display: flex;
	-webkit-justify-content:center;justify-content: center;
	margin: 0;
	padding: 0;
	width: 100%;
	border-radius: 0 0 10px 10px;
	background: #797979;
}
html.forum #Menu li {
	line-height: 27px;
	float: left;
	position: relative;
	display: block;
	list-style: none;
	margin: 0 4px 0 0;
	padding: 5px 10px;
	font-weight: bold;
	text-align: left;
}
html.forum #Body {margin-top:10px}
html.forum #Content {margin:0;-webkit-flex:1;flex:1}
html.forum #jLeftColumn {margin-left:6px}
html.forumPopupVisible #Content {z-index:-1}
html.forum #mainContent .menuImage {margin:4px 0 10px -12px;float:left;width:30px;height:30px}
html.forum .BreadcrumbsWrapper {display:none}
html.forum #forumSearch {display:none}
html.forum #forumSearch input {margin-bottom:10px;width:123px}
html.forum #forumSearch button {padding-top:0.3em !important;padding-bottom:0.1em !important}
html.forum #newDiscussion {margin: 7px auto;width:91%}
html.forum #newDiscussionNote {display:none}
html.forum #Panel {display:none;width:auto;line-height:1.4em;float:none}
html.forum .ViewCount, html.forum .CommentCount {display:none}
html.forum .BoxCategories h4 {display:none}
html.forum .BoxCategories .Count {display:none}
html.forum .Post.discussion #mainContent {padding-left:10px;padding-right:10px}

html.forum .Post.discussion #jLeftColumn,
html.forum .Post.editdiscussion #jLeftColumn,
html.forum .signin #jLeftColumn,
html.forum body.connect #jLeftColumn {display:none}

html.forum .Post.discussion #Content,
html.forum .Post.editdiscussion #Content,
html.forum .signin #Content {
    box-shadow:none !important;
    margin:0 auto;
}

html.forum #Frame {width:100%}
html.forum .Post.discussion .FormWrapper {padding:0 !important}
html.forum input.SmallInput:focus, html.forum input.InputBox:focus, html.forum textarea:focus {background:none}
html.forum .FormWrapper {background:none}
xxhtml.forum #PagerBefore {display:none}
html.forum .NumberedPager {font-size:1.5em}
html.forum .NumberedPager .Highlight {display:inline-block}
html.forum .NumberedPager span + a {display:none !important} /* If a is immediately preceeded by span then we must on first page so let's hide the #1 */
html.forum .NumberedPager a.Previous {display:inline-block;margin-right:10px}
html.forum .NumberedPager a.Previous:after {content:" Prev"}
html.forum .NumberedPager a.Next {display:inline-block;margin-left:10px}
html.forum .NumberedPager a.Next:before {content:"Next "}
html.forum .NumberedPager span.Previous, html.forum .NumberedPager span.Next {display:none}
html.forum button a:hover {text-decoration:none}
html.forum #DiscussionForm h1 {display:none}
html.forum #DiscussionForm .Category label[for='Form_CategoryID'] {display:none}
html.forum #Form_CategoryID {width: auto}
html.forum #DiscussionForm .Cancel {display:none}
html.forum .Row {width:auto}
html.forum .Hidden {display:none !important}
html.forum .InputBox {box-sizing:border-box}
html.forum #panelAsset {font-size:small}
html.forum #panelAsset .BoxNewDiscussion {display:none}
html.forum #panelAsset .AllCategories, #panelAsset .Activities {display:none}
html.forum .Discussions.Active {background:none !important;border-bottom:none !important}
/* hide "All Categories" which happens to be the first in list */
html.forum .PanelCategories li:first-child {display:none}
html.forum .MessageForm h2 {visibility:hidden}
html.forum .ItemDiscussion .Category {display:none}
html.forum .ItemDiscussion .Message {font-size:100%} /* discussion was 110% ??? but the comments were 100% */
html.forum .Message {margin-top:14px}
html.forum .Message a {word-break: break-word}
html.forum .Reactions {display:none;opacity:0;-webkit-animation:opacity 500ms ease-in-out}
html.forum .Item .AuthorInfo {color:gray}
html.forum .Item:hover .Reactions {opacity:1}
/* text area */
html.forum .Message .insertedImage, .TextBox .insertedImage {max-width:100%;cursor:pointer}
html.forum .DraftButton, html.forum .PreviewButton {display:none !important}
#dashboard_entry_signin .search, body.Profile .search {display:none}
html.forum .HomepageTitle {display:none}
html.forum .PageDescription {display:none}
html.forum .Meta-Discussion {color:#aaa !important}
.MultipleEntryMethods {margin: 0 auto;overflow:auto}
.MultipleEntryMethods .Methods {position:static;margin:0 auto;border-left:none;padding-bottom:24px !important;top: 33px;bottom: 0;right: 0;padding: 12px 20px 6px;line-height: 1}
.MultipleEntryMethods .Methods div:first-child b {display:none}
.MultipleEntryMethods .Methods .Method {padding: 10px 0 0;text-align:center}
.MultipleEntryMethods .Methods .Method a:hover {text-decoration:none}
.MultipleEntryMethods .SocialIcon.HasText {min-width:216px}
.MultipleEntryMethods .Methods .Method a img {max-width:100%}
.MultipleEntryMethods .MainForm {display:none;border-top:1px solid rgb(213, 213, 213)}
.MultipleEntryMethods form {margin:12px auto 0 auto}
.MultipleEntryMethods .patchForAdBlocker {color:white;padding:4px}
html.forum #dashboard_entry_signin #Content h1 {display:none} /* remove "Sign In" header in PAGE */
html.forum .Popup .Content h1 {display:none} /* remove "Sign In" header from POPUP */
html.forum #Form_User_SignIn .Buttons {display:none}
html.forum .PageControls.Top {display:none}
html.forum .DataList .Title {font-size: 18px}
html.forum .Alert {display:none}
html.forum .ProfilePhoto {border-radius:50%}
html.forum .editor-upload-progress {background: #38ABE3 url(/forum/applications/dashboard/design/images/upload-progress-back.gif) repeat}

#dashboard_entry_signin #quickFixList {
    text-align: center;
}

#beforePostingBug {
    display:inline-block;
    text-align:left;
    line-height: 1.4;
    margin:23px 10px 12px 0;
    padding:15px;
}

#beforePostingBug ul,
#beforePostingBug li {list-style: disc}

html.forum #Form_Comment .Back {display:none}
html.forum .CommentHeading {visibility: hidden} /* removing completely with display:none would cause alignment issues  */

#BoxFilterTitle {display: none}

.highlight {border-color:#4184f3 !important}

html.forum #Form_PostComment {margin-right:5px}

html.forum .CommentInfo .IPAddress {display:none}

html.forum .replyToUsername {color:gray;opacity:0;transition:opacity .15s ease-in;margin-left:2px;height:17px;cursor:pointer}
html.forum .Item:hover .replyToUsername {opacity:1}
html.forum .Item:hover .replyToUsername:hover {color:black}

html[color-scheme='dark'] .paper-material {
    background-color: var(--bg-light-color);
}

html[color-scheme='dark'] #mainContent select,
html[color-scheme='dark'] #mainContent textarea,
html[color-scheme='dark']:not(.newtab) #mainContent input:not(.Button) {
    background-color: var(--input-bg-color) !important;
    color: white;
}

html[color-scheme='dark'] #mainContent paper-button:not(.socialButton) {
    background-color: #333;
}

html[color-scheme='dark'] .installButton {
    color: black;
    background-color:white !important;
}

html[color-scheme='dark'] iron-icon[src*="apple_logo_black.svg"] {filter:invert()}

html[color-scheme='dark'] #mainContent #uninstallReasons label:hover {background:#333 !important}

html[color-scheme='dark'] #middle social-media-icons[icon='twitter'] {
    opacity: 0.5;
}

html[color-scheme='dark'].jason-blog h2,
html[color-scheme='dark'].jason-blog h3 {
    color: var(--primary-color)
}
html[color-scheme='dark'].jason-blog a:hover,
html[color-scheme='dark'].jason-blog a:focus {color: #aaa !important}

html[color-scheme='dark'].jason-blog label {
    color: var(--primary-color-lighter);
}
html[color-scheme='dark'].jason-blog .comment-body {
    color: var(--primary-color-lighter);
}

html[color-scheme='dark'].jason-blog li.theChampSelectedTab {
    color: var(--primary-color-lighter);
}

html[color-scheme='dark'].jason-blog .nav-title {
    color: var(--primary-link-color);
}

html[color-scheme='dark'].jason-blog button,
html[color-scheme='dark'].jason-blog input[type="button"],
html[color-scheme='dark'].jason-blog input[type="submit"] {
    background-color: #363636;
}

html[color-scheme='dark'].wiki h1,
html[color-scheme='dark'].wiki h2,
html[color-scheme='dark'].wiki h3,
html[color-scheme='dark'].wiki h4,
html[color-scheme='dark'].wiki h5,
html[color-scheme='dark'].wiki h6 {
    color: white
}

html[color-scheme='dark'].wiki .Gmail_extension_comparison .MAC_compareTable tr td:nth-child(2),
html[color-scheme='dark'].wiki .Calendar_extension_comparison .MAC_compareTable tr td:nth-child(2) {
    background-color: #222;
}

html[color-scheme='dark'].wiki .toc,
html[color-scheme='dark'].wiki .mw-warning,
html[color-scheme='dark'].wiki .toccolours {background-color: black}

/* Forum */

html[color-scheme='dark'].forum .Item.Read {
    background: none;
}

html[color-scheme='dark'].forum a.Bookmark:hover {
    filter: invert(1);
}

html[color-scheme='dark'].forum .Sprite,
html[color-scheme='dark'].forum .OptionsTitle {
    filter: invert();
}

html[color-scheme='dark'].forum .richEditor-text {
    color: white;
}

html[color-scheme='dark'].forum .richEditor-frame {
    background-color: var(--input-bg-color);
}

html[color-scheme='dark'].forum #forumSearch button {
    background: #333 !important;
}

html[color-scheme='dark'].forum button:not(.richEditor-button):not([class$='styles-buttonIconMenuBar']):not([class$='-atMentionStyles-suggestion']),
html[color-scheme='dark'].forum .Button {
    background-color: #333;
    color: white;
    border-color: transparent;
}
html[color-scheme='dark'].forum .Button.colored {
    background-color: var(--button-primary);
}

html[color-scheme='dark'].forum .Item:hover .replyToUsername:hover {color: white}

html[color-scheme='dark'].forum #Head #Menu {
    background: #292929;
}

html[color-scheme='dark'].forum ul.token-input-list {color:white}

html[color-scheme='dark'].forum ul.token-input-list,
html[color-scheme='dark'].forum li.token-input-selected-token,
html[color-scheme='dark'].forum div.token-input-dropdown,
html[color-scheme='dark'].forum div.token-input-dropdown ul li,
html[color-scheme='dark'].forum div.token-input-dropdown ul li.token-input-dropdown-item,
html[color-scheme='dark'].forum div.token-input-dropdown ul li.token-input-dropdown-item2,
html[color-scheme='dark'].forum div.token-input-dropdown ul li.token-input-selected-dropdown-item {
    background-color: black;
}

html[color-scheme='dark'].forum div.Popup .Body {background:black}

html[color-scheme='dark'].forum .Pager,
html[color-scheme='dark'].forum .Highlight {
    color: white;
}

/* this is triggered by adding class .highlight-effect */
@-webkit-keyframes highlight {
    0% {
        background-color: #333
    }
    10% {
        background-color: #333;
    }
}
@keyframes highlight {
    0% {
        background-color: #333;
    }
    10% {
        background-color: #333;
    }
}

@media (min-width: 600px) {
    html[color-scheme='dark'].forum #Content {
        box-shadow: -5px 0 4px -4px #333;
    }
}

/* end of [color-scheme='dark'] */

@media all and (min-width:321px) {
	.adHeader {display:none}
	html.forum .adHeader {display:block;margin-top:2px}
}

@media all and (max-width:420px) {
	#logoWrapper {display:none}
}

/* Nexux 7 */
@media all and (min-width: 600px) {
	
	.jason-blog #blurb .title {font-size:20px}
	#blurb.can-have-slogan .title {transform:translateY(10px)}
	.can-have-slogan .siteSlogan {transform:translateY(-10px);display:block;text-align:start;opacity:0}
	
	.homepage #mainContent section {width:46%}
	.homepage #mainContent section:nth-child(1), .homepage #mainContent section:nth-child(2) {margin-top:0}
	
	.tileFooter {margin-bottom: 10px;margin-inline-start:10px}
    .tileFooter .slideshowBlurb {font-size:1.5em}
    
	#appPageDetails {margin:0 0 10px 10px}
	
	html.forum #Head {display:block}
	html.forum #jWrapper {display:-webkit-flex;display:flex;-webkit-flex-flow:row;flex-flow:row}
	html.forum #jLeftColumn {position:fixed;min-width:210px}
	html.forum #mainContent .menuImage {display:none}
	html.forum .BreadcrumbsWrapper {display:block}
	html.forum #forumSearch {display:block}
	html.forum #newDiscussionNote {display:block}
	html.forum #Panel {display:block}
	html.forum #Content {margin-inline-start:220px;-webkit-padding-start:8px;-moz-padding-start:8px;box-shadow: -8px 0 4px -4px #ddd}
	html.forum .ViewCount {display:inline-block}

	@supports (-ms-ime-align:auto) {
		.tileFooter {margin-left:10px}
		html.forum #jLeftColumn {position:static !important}
		html.forum #Content {padding-left:8px}
	}
}

/* Edge */
@supports (-ms-ime-align:auto) {
	.homepage .installButton {margin-right:20px}
	#logo img {margin-right:15px}
}

@media all and (max-width: 767px) {
	app-toolbar .socialButton {display:none}
	.search #blurb, .searchVisible #blurb {display:none}
	.jason-blog .single-post #middle {margin-top:0}
}

/* iPad */
@media all and (min-width: 768px) {
	#pageRight {display:block}
	.installButton img {width:140px}
}

@media all and (max-width: 999px) {
	#mainNav {display:none}
}

@media all and (min-width: 1000px) {
	ul, ol {-webkit-padding-start:40px;-moz-padding-start:40px}
	li {padding:initial}

	.drawerMenu {display:none}
	
	.tileFooter .slideshowBlurb {font-size:1em}
	
	html.forum #forumSearch input {width:176px}
	html.forum #jLeftColumn {min-width:250px}
	html.forum #Panel {line-height:1em}
	html.forum #Content {margin-inline-start: 260px}
	html.forum .BoxCategories .Count {display:block}
	html.forum .CommentCount {display:inline-block}

	#pageLeft, #pageRight {display:block}
	
	#pageMiddleAd.bottom {max-width:300px}
	
	.linkAds {display:inline-block}
}

@media all and (min-width: 1280px) {
    html:not(.forum) #pageLeft,
    html:not(.forum) #pageRight {min-width:300px}
}

@media all and (max-width: 1366px) {
	html.forum .DataList .adsbygoogle {max-width:730px} /* prevented horizontal scrollbars in forum view */
}

@media all and (min-width: 1366px) {
	.installButton img {width:170px}
}

@media all and (min-height: 800px) {
	html:not(.forum) #middle {margin-top:41px}
}