/*
 * This file is part of Adblock Plus <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Adblock Plus is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Adblock Plus is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
 */
/*
 * This file is part of Adblock Plus <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Adblock Plus is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Adblock Plus is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
 */
io-popout {
  --background-color: #FFF;
  --border: 1px solid #077CA6;
  --icon-size-inner: 1.1rem;
  --icon-size-outer: 1.5rem;
  --pointer-size: 10px;
  --pointer-offset-out: calc(var(--pointer-size) / -2 - 1px);
  --pointer-offset-start: calc(
    var(--icon-size-outer) + var(--pointer-offset-out)
  );
  --content-offset-out: calc(-0.5 * var(--icon-size-outer));
  --content-offset-start: calc(1.5 * var(--icon-size-outer)); }

/*
 * This component is not keyboard-accessible yet but we need it to be focusable
 * to detect when we can close it
 */
io-popout:focus {
  outline: none; }

/* Prevent pre-rendered content to show up before component has loaded */
io-popout > :not(.wrapper) {
  display: none; }

/*******************************************************************************
 * Anchor
 ******************************************************************************/
io-popout > .wrapper {
  display: inline-block;
  position: relative; }

io-popout > .wrapper::before {
  width: var(--icon-size-inner);
  height: var(--icon-size-inner);
  cursor: pointer; }

io-popout > .wrapper.menubar::before {
  background-image: url(icons/gear.svg?default#default); }

io-popout > .wrapper.tooltip::before {
  background-image: url(icons/tooltip.svg); }

/*******************************************************************************
 * Anchor pointer
 ******************************************************************************/
io-popout > .wrapper > [role]::before {
  display: block;
  position: absolute;
  z-index: 2;
  width: var(--pointer-size);
  height: var(--pointer-size);
  border: var(--border);
  border-right: none;
  border-bottom: none;
  background-color: var(--background-color);
  content: ""; }

io-popout[expanded=""] > .wrapper > [role]::before,
io-popout[expanded="above"] > .wrapper > [role]::before,
io-popout[expanded="below"] > .wrapper > [role]::before {
  right: var(--pointer-offset-start); }

html[dir="rtl"] io-popout[expanded=""] > .wrapper > [role]::before,
html[dir="rtl"] io-popout[expanded="above"] > .wrapper > [role]::before,
html[dir="rtl"] io-popout[expanded="below"] > .wrapper > [role]::before {
  right: auto;
  left: var(--pointer-offset-start); }

io-popout[expanded=""] > .wrapper > [role]::before,
io-popout[expanded="below"] > .wrapper > [role]::before {
  top: var(--pointer-offset-out);
  transform: rotate(45deg); }

io-popout[expanded="above"] > .wrapper > [role]::before {
  bottom: var(--pointer-offset-out);
  transform: rotate(-135deg); }

io-popout[expanded="start"] > .wrapper > [role]::before {
  z-index: 1;
  top: var(--pointer-offset-start);
  right: var(--pointer-offset-out);
  transform: rotate(135deg); }

html[dir="rtl"] io-popout[expanded="start"] > .wrapper > [role]::before {
  right: auto;
  left: var(--pointer-offset-out);
  transform: rotate(-45deg); }

/*******************************************************************************
 * Content
 ******************************************************************************/
io-popout > .wrapper > [role] {
  position: absolute;
  z-index: 1;
  border: var(--border);
  border-radius: 3px;
  background-color: var(--background-color);
  line-height: 1.5rem;
  cursor: default; }

io-popout [aria-hidden="true"] {
  display: none; }

io-popout[expanded=""] > .wrapper > [role],
io-popout[expanded="above"] > .wrapper > [role],
io-popout[expanded="below"] > .wrapper > [role] {
  right: var(--content-offset-out); }

html[dir="rtl"] io-popout[expanded=""] > .wrapper > [role],
html[dir="rtl"] io-popout[expanded="above"] > .wrapper > [role],
html[dir="rtl"] io-popout[expanded="below"] > .wrapper > [role] {
  right: auto;
  left: var(--content-offset-out); }

io-popout[expanded=""] > .wrapper > [role],
io-popout[expanded="below"] > .wrapper > [role] {
  top: var(--content-offset-start); }

io-popout[expanded="above"] > .wrapper > [role] {
  bottom: var(--content-offset-start); }

io-popout[expanded="start"] > .wrapper > [role] {
  top: var(--content-offset-out);
  right: var(--content-offset-start); }

html[dir="rtl"] io-popout[expanded="start"] > .wrapper > [role] {
  right: auto;
  left: var(--content-offset-start); }

io-popout > .wrapper > [role="menubar"] {
  width: 12.2rem; }

io-popout > .wrapper > [role="tooltip"] {
  width: 15rem; }

/*
 * We need to ensure that any content overlays the anchor pointer or otherwise
 * its inner half becomes visible when the content's background color changes
 */
io-popout > .wrapper > [role] * {
  z-index: 3; }

io-popout .close {
  position: absolute;
  top: 10px;
  right: 10px; }

html[dir="rtl"] io-popout .close {
  right: auto;
  left: 10px; }

io-popout .close:focus {
  outline: none; }

io-popout p {
  padding: 0.2rem 1rem; }

io-popout [role="tooltip"] p {
  overflow-y: auto;
  /* Approximated to achieve a total tooltip height of 12.5em without
  hiding overflowing anchor pointer */
  max-height: 9em; }

io-popout .close + * {
  margin-top: 2em; }

/*
 * This file is part of Adblock Plus <https://adblockplus.org/>,
 * Copyright (C) 2006-present eyeo GmbH
 *
 * Adblock Plus is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as
 * published by the Free Software Foundation.
 *
 * Adblock Plus is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
 */
io-popout ul {
  padding: 0; }

io-popout li {
  list-style: none; }

.table.cols io-popout li {
  padding: 0;
  border: 0; }

.table.cols io-popout li > * {
  display: flex;
  width: 100%;
  padding: 0.7rem 0rem;
  border: 0rem;
  color: #077CA6;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  text-transform: none;
  align-items: center; }

io-popout li > *:hover,
io-popout li > *:focus {
  background-color: #E1F2FA;
  cursor: pointer; }

io-popout li .icon::before {
  width: var(--icon-size-inner);
  height: var(--icon-size-inner);
  margin: 0 var(--icon-size-inner);
  border: none; }

html {
  font-size: 16px; }

body {
  display: flex;
  /* We force vertical scrollbars to keep the content centered */
  overflow-y: scroll;
  margin: 1rem 0.3rem;
  color: #4A4A4A;
  background-color: #F3F3F3;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  line-height: 1.3rem;
  justify-content: center; }

h1 {
  font-size: 3rem;
  font-weight: 300;
  line-height: 3rem; }

h2 {
  font-size: 1.125rem;
  font-weight: 700; }

a {
  color: #077CA6; }

a:hover {
  color: #5CBCE1; }

ul {
  margin: 0rem; }

main h3 {
  margin-top: 0rem;
  margin-bottom: 0.5rem; }

[aria-hidden="true"] {
  display: none !important; }

input[type="text"],
input[type="url"],
textarea,
main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*
  Normalization
 */
input,
button {
  font-family: inherit; }

button {
  border-radius: 0rem; }

/*
  Buttons and links
 */
button,
.button {
  display: block;
  padding: 0.6rem 0.8rem;
  background-color: transparent;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer; }

button:disabled,
button[aria-disabled="true"] {
  cursor: default; }

/* Ignore .icon to avoid overriding "specific" (primary, secondary) styles */
button.primary:not(.icon),
.button.primary:not(.icon) {
  border: 0px;
  color: #FFF;
  background-color: #077CA6; }

button.primary:not([disabled]):not(.icon):hover,
.button.primary:not(.icon):hover {
  box-shadow: inset 0 0 0 3px #005D80; }

button.primary[disabled]:not(.icon) {
  background-color: #5CBCE1; }

button.secondary:not(.icon),
.button.secondary:not(.icon) {
  border: 2px solid #077CA6;
  color: #077CA6; }

button.secondary:not(.icon):hover,
.button.secondary:not(.icon):hover {
  box-shadow: inset 0 0 0 1px #077CA6; }

button.link,
button.list {
  color: #077CA6; }

button.link {
  padding: 0.2rem;
  border: 0px;
  background-color: transparent;
  font-family: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-transform: none; }

button.link:hover {
  color: #5CBCE1; }

button.list {
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #CDCDCD;
  background-color: #E1F2FA;
  text-align: initial; }

button.list:hover {
  border-color: #077CA6;
  box-shadow: inset 0 0 0 3px #077CA6; }

.side-controls:not(.wrap) {
  display: flex;
  margin: 0.8rem 0rem;
  justify-content: flex-end; }

.side-controls button {
  margin: 0rem; }

/*
  Due to Edge adoption as new target browser
  we cannot use -moz/webkit-margin-start
  or -moz/webkit-margin-end because
  these lack Edge support.
  Yet we need to preserve html direction
  and potential UI that might swap right to left.
*/
html:not([dir="rtl"]) .side-controls button {
  margin-left: 1rem; }

html[dir="rtl"] .side-controls button {
  margin-right: 1rem; }

.side-controls.wrap button {
  margin: 0.6rem 0rem; }

html:not([dir="rtl"]) .side-controls.wrap button {
  margin-left: auto; }

html[dir="rtl"] .side-controls.wrap button {
  margin-right: auto; }

/*
  icons
 */
.icon {
  padding: 0px;
  border: 0px;
  background-color: transparent; }

.icon:hover {
  box-shadow: none; }

.icon::before {
  display: block;
  border: 0.2rem solid transparent;
  background-repeat: no-repeat;
  content: ""; }

button[role="checkbox"].icon::before {
  width: 1.2rem;
  height: 1.2rem;
  padding: 0px; }

button[role="checkbox"][disabled].icon:not(.toggle)::before,
button[role="checkbox"][aria-disabled="true"].icon:not(.toggle)::before {
  margin: 0.2rem;
  border: 0rem;
  border-radius: 2px;
  background-color: #ccc; }

button[role="checkbox"].icon:not(.toggle)::before {
  /* Using ?query as a workaround to chromium bug #643716 */
  background-image: url(icons/checkbox.svg?off#off); }

button[role="checkbox"][aria-checked="true"].icon:not(.toggle)::before {
  background-image: url(icons/checkbox.svg?on#on); }

button[role="checkbox"][aria-checked="true"].icon:disabled:not(.toggle)::before {
  background-image: url(icons/checkbox.svg?on-disabled#on-disabled); }

button[role="checkbox"].icon.toggle::before {
  background-image: url(icons/toggle.svg?on#on); }

button[role="checkbox"][aria-checked="false"].icon.toggle::before {
  background-image: url(icons/toggle.svg?off#off); }

button[role="checkbox"].icon.toggle::before {
  width: 1.9rem;
  height: 1rem; }

button[role="checkbox"][disabled].icon.toggle::before {
  background: none; }

.icon.delete::before {
  background-image: url(icons/trash.svg?default#default); }

.icon.delete:hover::before {
  background-image: url(icons/trash.svg?hover#hover); }

.icon.gear::before {
  background-image: url(icons/gear.svg?default#default); }

.icon.gear:hover::before {
  background-image: url(icons/gear.svg?hover#hover); }

.icon.gear::before,
.icon.delete::before {
  width: 1rem;
  height: 1rem; }

[data-validation] .floating-input input:focus:invalid ~ .icon.attention::before {
  background-image: url(icons/attention.svg); }

[data-validation] .floating-input input:valid ~ .icon.attention::before {
  top: 0.5rem;
  background-image: url(icons/checkmark.svg?approved#approved); }

.icon.update-subscription::before {
  background-image: url(icons/reload.svg); }

.icon.website::before {
  background-image: url(icons/globe.svg); }

.icon.source::before {
  background-image: url(icons/code.svg); }

.icon.delete::before {
  background-image: url(icons/trash.svg?default#default); }

.close.icon::before {
  width: 1rem;
  height: 1rem; }

.icon.close.primary::before {
  background-image: url(icons/delete.svg?primary#primary); }

.icon.close.primary:hover::before {
  background-image: url(icons/delete.svg?primary-hover#primary-hover); }

.icon.close.secondary::before {
  background-image: url(icons/delete.svg?secondary#secondary); }

.icon.close.tertiary::before {
  background-image: url(icons/delete.svg?tertiary#tertiary); }

.icon.close.secondary:hover::before {
  background-image: url(icons/delete.svg?secondary-hover#secondary-hover); }

.icon.close.tertiary:hover::before {
  background-image: url(icons/delete.svg?tertiary-hover#tertiary-hover); }

#dialog .table.list li button.icon::before {
  width: 1.3rem;
  height: 1.3rem;
  margin: 0rem;
  border: 0rem;
  background-image: none; }

#dialog .table.list li button[aria-checked="true"].icon::before {
  background-image: url(icons/checkmark.svg?default#default); }

#social ul li .icon::before {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0em auto; }

.icon#twitter::before {
  background-image: url("social/twitter.svg"); }

.icon#facebook::before {
  background-image: url("social/facebook.svg"); }

.icon#google-plus::before {
  background-image: url("social/googleplus.svg"); }

/*
  Forms
 */
.floating-input {
  position: relative;
  margin: 1.8rem 0rem 0.5rem;
  padding-top: 0.7rem; }

.floating-input input {
  width: 100%;
  padding: 5px;
  border-width: 0px 0px 1px;
  border-color: #CDCDCD;
  outline: none;
  font-size: 1rem; }

.floating-input input:placeholder-shown ~ label,
.floating-input input + label,
.floating-input input:focus + label {
  position: absolute;
  top: 0.9rem;
  left: 0.3rem;
  font-size: 1rem; }

.floating-input input + label,
.floating-input input:focus + label {
  top: -0.5rem;
  font-size: 0.9rem; }

html[dir="rtl"] .floating-input input:placeholder-shown ~ label,
html[dir="rtl"] .floating-input input ~ label,
html[dir="rtl"] .floating-input input:focus ~ label {
  right: 0.3rem;
  left: auto; }

[data-validation] .floating-input input:focus:invalid {
  border-color: #C11D27; }

[data-validation] .floating-input input:focus:invalid ~ .attention::before,
[data-validation] .floating-input input:valid ~ .attention::before {
  position: absolute;
  top: 0.3rem;
  right: 0rem;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.3rem; }

/* stylelint-disable indentation */
html[dir="rtl"] [data-validation] .floating-input input:focus:invalid
~ .attention::before,
html[dir="rtl"] [data-validation] .floating-input input:valid
~ .attention::before {
  right: auto;
  left: 0rem; }

/* stylelint-enable indentation */
[data-validation] .floating-input input ~ .error-msg {
  display: block;
  visibility: hidden;
  margin-top: 0.5rem;
  color: #C11D27; }

[data-validation] .floating-input input:focus:invalid ~ .error-msg {
  visibility: visible; }

/*
  Animations
*/
.highlight-animate {
  animation: highlight 1s 3; }

@keyframes highlight {
  0% {
    background-color: transparent; }
  30% {
    background-color: #ffd7a3; }
  70% {
    background-color: #ffd7a3; }
  100% {
    background-color: transparent; } }

/*
  Sidebar
 */
#sidebar,
#sidebar .fixed,
[role="tablist"] {
  width: 14.3rem; }

#sidebar {
  flex-shrink: 0; }

#sidebar .fixed {
  top: 1.2rem;
  bottom: 0rem;
  height: auto; }

#sidebar header {
  margin-right: 2rem;
  text-align: right; }

html[dir="rtl"] #sidebar header {
  margin-left: 2rem; }

#sidebar header h1 {
  margin: 0rem;
  font-size: 1.5rem;
  line-height: 2rem; }

#sidebar header h1 strong {
  font-weight: 700; }

#sidebar header p {
  margin: 0rem;
  font-size: 1.8rem;
  line-height: 2.6rem; }

html[dir="rtl"] #sidebar header {
  text-align: left; }

#sidebar-logo {
  width: 3rem;
  margin-bottom: 0.7rem; }

#sidebar nav,
#sidebar footer {
  margin: 1.4rem 0rem; }

[role="tablist"] {
  position: relative;
  margin: 0rem;
  padding: 0rem;
  font-size: 1rem;
  list-style: none; }

[role="tablist"] li a {
  display: flex;
  margin-top: -1px;
  margin-right: -1px;
  margin-left: -1px;
  padding: 1rem 0.8rem;
  border-width: 1px;
  border-style: solid;
  border-color: #CDCDCD transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer; }

li a[role="tab"][aria-selected] {
  background-color: #FFF;
  font-weight: 700; }

html:not([dir="rtl"]) li a[role="tab"][aria-selected] {
  border-left-color: #CDCDCD; }

html[dir="rtl"] li a[role="tab"][aria-selected] {
  border-right-color: #CDCDCD; }

#sidebar footer {
  width: 100%; }

#sidebar footer p {
  display: flex;
  margin: 1rem 0rem;
  justify-content: center; }

/* This is a stopgap solution of footer overlapping tabs on low resolutions */
@media (min-height: 37rem) {
  #sidebar .fixed {
    position: fixed; }
  #sidebar footer {
    position: absolute;
    bottom: 0px; } }

/*
  Main content
 */
body[data-tab|="general"] #content-general,
body[data-tab|="advanced"] #content-advanced,
body[data-tab|="whitelist"] #content-whitelist,
body[data-tab|="help"] #content-help {
  display: block; }

main {
  width: 46.3rem;
  padding: 0px 0rem 1.4rem;
  border: 1px solid #CDCDCD;
  background-color: #FFF; }

main > div {
  display: none; }

main p {
  margin: 0.8rem 0rem; }

/*
  Sections
 */
[role="tabpanel"] > section,
[role="tabpanel"] > .section {
  padding: 1.4rem 2rem;
  border-top: 1px solid #CDCDCD; }

[role="tabpanel"] > header h1,
[role="tabpanel"] > header p {
  margin: 1.4rem 0rem;
  padding: 0rem 2rem; }

section h2,
.section h2 {
  margin: 0rem; }

section h2 {
  text-transform: uppercase; }

section,
.section {
  clear: both; }

section.cols {
  display: flex; }

section.cols > *:first-child {
  flex: 1; }

html:not([dir="rtl"]) section.cols > *:first-child {
  margin-right: 2rem; }

html[dir="rtl"] section.cols > *:first-child {
  margin-left: 2rem; }

section.cols > *:last-child {
  flex: 3; }

/*
  Acceptable ads
 */
#tracking-warning {
  position: relative;
  margin-bottom: 1rem;
  padding: 1.5rem;
  border: 2px solid #ffd7a3;
  background-color: #fefbe3; }

#acceptable-ads:not(.show-warning) #tracking-warning {
  display: none; }

#hide-tracking-warning {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem; }

html[dir="rtl"] #hide-tracking-warning {
  right: auto;
  left: 1rem; }

#tracking-warning .link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline; }

#acceptable-ads ul {
  position: relative;
  padding-left: 2.2rem;
  list-style: none; }

html[dir="rtl"] #acceptable-ads ul {
  padding-right: 2.2rem;
  padding-left: 0rem; }

#acceptable-ads ul button {
  position: absolute;
  left: 0rem; }

html[dir="rtl"] button {
  right: 0rem;
  left: auto; }

#acceptable-ads label {
  font-size: 1rem;
  font-weight: 700; }

html:not([dir="rtl"]) #acceptable-ads label {
  margin-right: 0.5rem; }

html[dir="rtl"] #acceptable-ads label {
  margin-left: 0.5rem; }

#dnt {
  padding: 0.8rem;
  border: 1px solid #077CA6; }

.new {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 0.2rem;
  color: #FFF;
  background-color: #077CA6;
  font-size: 0.8rem;
  line-height: 100%;
  text-transform: uppercase; }

/*
  Tables
 */
ul.table,
ul.list {
  margin: 0rem;
  padding: 0rem;
  list-style: none; }

.table li,
.list li {
  display: flex;
  align-items: center; }

.table li {
  margin: 0rem;
  border-width: 0px 1px 1px;
  border-style: solid;
  border-color: #CDCDCD; }

.list li {
  margin-bottom: 0.8rem;
  padding: 0rem; }

.list li [role="checkbox"] {
  flex-shrink: 0; }

.table li:first-of-type {
  border-top: 1px solid #CDCDCD; }

.table.list li {
  margin: 0rem;
  padding: 0.5rem 1rem; }

.table.list.bottom-control li:last-of-type {
  border-bottom: 0px; }

.list li > span {
  margin: 0rem 1rem; }

.table.list li > span {
  margin: 0rem;
  flex: 1; }

.table.list li.empty-placeholder {
  padding: 1rem 1.4rem; }

.table.list li.empty-placeholder:not(:last-of-type) {
  border-bottom: 0px; }

.table.list button.link {
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase; }

.table:not(.list):not(.cols) li {
  padding-top: 0px;
  padding-bottom: 6px; }

.table li [data-single="visible"],
.table li:first-of-type:last-of-type [data-single="hidden"] {
  display: none; }

.table li:first-of-type:last-of-type [data-single="visible"] {
  display: block; }

.th {
  display: flex; }

.col5 > * {
  display: inline-block;
  vertical-align: middle; }

.cols .col5,
.th .col5 {
  margin: 0rem 1rem;
  align-self: center; }

.th .col5:nth-of-type(1),
.table .col5:nth-of-type(1) {
  flex: 5; }

.th .col5:nth-of-type(2),
.table .col5:nth-of-type(2) {
  flex: 8; }

.th .col5:nth-of-type(3),
.table .col5:nth-of-type(3) {
  flex: 4; }

.th .col5:nth-of-type(4),
.table .col5:nth-of-type(4) {
  flex: 1; }

.th .col5:nth-of-type(5),
.table .col5:nth-of-type(5) {
  flex: 1; }

html:not([dir="rtl"]) .th .col5:nth-of-type(5),
html:not([dir="rtl"]) .table .col5:nth-of-type(5) {
  margin-right: 1.8rem;
  margin-left: 0; }

html[dir="rtl"] .th .col5:nth-of-type(5),
html[dir="rtl"] .table .col5:nth-of-type(5) {
  margin-right: 0;
  margin-left: 1.8rem; }

.table.cols > span {
  margin: 0rem; }

.table.cols li {
  padding: 0.5rem 0rem; }

.table.cols .toggle {
  -moz-margin-end: 0.5rem;
  -webkit-margin-end: 0.5rem; }

.table.cols .gear {
  margin: 0rem; }

#dialog .table.list li {
  display: block;
  padding: 0rem;
  border-width: 1px 0px 0px; }

#dialog .table.list li:first-of-type {
  border: 0px; }

#dialog .table.list li button {
  display: flex;
  width: 100%;
  height: auto;
  padding: 1.1rem 1rem;
  background-image: none; }

#dialog .table.list li button:hover,
#dialog .table.list li button:focus {
  background-color: #E1F2FA; }

#dialog .table.list li button[aria-checked="true"],
.table.list li .dimmed {
  color: #BBB; }

#dialog .table.list li button > span {
  margin: 0rem 0.8rem;
  font-weight: 400;
  text-transform: none;
  flex: none; }

li.preconfigured [data-hide="preconfigured"] {
  display: none !important; }

/*
  Tooltips
*/
.tooltip {
  position: relative;
  margin: 0rem;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: help; }

html:not([dir="rtl"]) .tooltip {
  margin-right: 1rem; }

html[dir="rtl"] .tooltip {
  margin-left: 1rem; }

/*
  General tab content
*/
#blocking-languages-dialog-table {
  border-bottom: none; }

.button-add,
.cancel-button {
  border: 0px;
  color: #3A7BA6;
  background-color: transparent;
  cursor: pointer; }

/*
  Whitelist tab
 */
#content-whitelist form {
  display: flex; }

#content-whitelist form input {
  height: 100%;
  padding: 0.5rem 1rem;
  border: 2px solid #077CA6;
  font-size: 1rem;
  flex: 1; }

html:not([dir="rtl"]) #content-whitelist form button {
  margin-left: 0.7rem; }

html[dir="rtl"] #content-whitelist form button {
  margin-right: 0.7rem; }

#whitelisting-table li {
  padding-right: 1.4rem;
  padding-left: 1.4rem;
  border-right: 0rem;
  border-left: 0rem; }

/*
  Advanced tab content
*/
#all-filter-lists-table li.show-message .last-update,
#all-filter-lists-table li:not(.show-message) .message,
#custom-filters:not([data-mode="empty"]) #empty-custom-filters,
#custom-filters[data-mode="empty"] #custom-filters-raw,
#custom-filters:not([data-mode="write"]) #custom-filters-raw-controls,
#custom-filters:not([data-mode="read"]) #custom-filters-edit,
.state span,
#acceptable-ads:not(.show-dnt-notification) #dnt {
  display: none; }

/* stylelint-disable indentation */
#all-filter-lists-table button[role="checkbox"][aria-checked="true"]
+ .state #state-active {
  display: inline; }

/* stylelint-enable indentation */
/* stylelint-disable indentation */
#all-filter-lists-table button[role="checkbox"][aria-checked="false"]
+ .state #state-disabled {
  display: inline; }

/* stylelint-enable indentation */
#all-filter-lists-table {
  margin-bottom: 0.8rem; }

#custom-filters-raw {
  width: 100%;
  height: 23.6rem;
  padding: 0.8rem; }

#custom-filters-raw:focus {
  border: 2px solid #077CA6;
  outline: none; }

#empty-custom-filters {
  padding: 1.5rem;
  border: 1px solid #CDCDCD; }

/*
  Help tab content
*/
html:not([lang="zh"]) #social-chinese,
html[lang="zh"] #social-general {
  display: none; }

#social ul {
  padding: 0px;
  list-style: none; }

#social ul li {
  display: inline-block; }

html:not([dir="rtl"]) #social ul li {
  margin-right: 1rem; }

html[dir="rtl"] #social ul li {
  margin-left: 1rem; }

#social ul li a {
  display: block;
  text-align: center;
  text-decoration: none; }

/*
  Dialog
*/
#dialog-background {
  display: none;
  position: fixed;
  z-index: 2;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 0.7;
  background-color: #000; }

body[data-dialog] #dialog-background {
  display: block; }

#dialog {
  position: fixed;
  z-index: 2;
  top: 100px;
  right: 0px;
  left: 0px;
  width: 50vw;
  margin: auto;
  border-radius: 3px;
  background-color: #FFF; }

#dialog header {
  display: flex;
  padding: 0.7rem 1.5rem;
  background-color: #077CA6; }

#dialog header h3 {
  margin: 0rem;
  font-size: 1rem;
  font-weight: 700; }

.close {
  margin: 0rem;
  cursor: pointer; }

#dialog #dialog-body {
  overflow: auto;
  max-height: 60vh; }

.dialog-content {
  margin: 1rem 1.8rem; }

#dialog-content-language-add {
  margin: 0rem; }

#dialog-content-about {
  text-align: center; }

#dialog-content-about button {
  margin: 1.5rem auto 1.8rem; }

#dialog-content-about p {
  margin: 0.5rem 0rem; }

#dialog-content-import .side-controls {
  margin-top: 2.45rem; }

#dialog .table {
  width: 100%; }

#dialog .section:not(:first-child) {
  margin-top: 24px; }

#dialog-title {
  color: #FFF;
  font-size: 16px;
  flex: 1; }

#dialog-body .dialog-content-block {
  padding: 12px 0px; }

#dialog .url {
  margin-top: 10px;
  margin-bottom: 20px;
  word-wrap: break-word; }

#dialog-content-predefined h3:empty {
  display: none; }

/* stylelint-disable indentation */
body:not([data-dialog="about"]) #dialog-title-about,
body:not([data-dialog="about"]) #dialog-content-about,
body:not([data-dialog="import"]) #dialog-title-import,
body:not([data-dialog="import"]) #dialog-content-import,
body:not([data-dialog="language-add"]) #dialog-title-language-add,
body:not([data-dialog="language-change"]) #dialog-title-language-change,
body:not([data-dialog="language-add"]):not([data-dialog="language-change"])
#dialog-content-language-add,
body:not([data-dialog="language-add"]) #dialog-body button.add,
body:not([data-dialog="language-change"]) #dialog-body button.change,
body:not([data-dialog="predefined"]) #dialog-title-predefined,
body:not([data-dialog="predefined"]) #dialog-content-predefined,
body:not([data-dialog]) #dialog {
  display: none; }

/* stylelint-enable indentation */
/*
  Notification
*/
#notification {
  display: flex;
  position: fixed;
  top: 0rem;
  left: 0rem;
  box-sizing: border-box;
  width: 100%;
  padding: 1rem 1.9rem;
  opacity: 0.8;
  color: #077CA6;
  background-color: #E1F2FA;
  font-size: 1rem; }

#notification strong {
  text-align: center;
  flex: 1; }
