/*
 * 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/>.
 */
:root {
  --background-color-secondary: #f7f7f7;
  --background-color-primary: #fff;
  --border-color-secondary: #d2d2d2;
  --border-color-primary: #e6e6e6;
  --border-radius-primary: 6px;
  --border-style-primary: solid;
  --border-width-thick: 4px;
  --border-width-thin: 1px;
  --box-shadow-primary: 0 2px 4px 0 hsla(0, 0%, 84%, 0.5);
  --color-secondary: #000;
  --color-critical: #ca0000;
  --color-primary: #585858;
  --color-link: #0797e1;
  --color-info: #0797e1;
  --font-size-big: 17px;
  --font-size-medium: 16px;
  --font-size-primary: 13px;
  --font-size-small: 12px;
  --margin-primary: 16px;
  --padding-primary: 16px;
  --padding-secondary: calc(var(--padding-primary) / 2); }

/*
 * 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-big-toggle,
io-big-toggle *::before,
io-big-toggle *::after {
  box-sizing: border-box; }

io-big-toggle {
  --width: 52px;
  --height: 16px;
  --translateY: -12px;
  --translateX: 20px;
  display: inline-block;
  width: var(--width);
  height: 8px;
  margin: 0;
  border-radius: 8px;
  background-color: var(--background-color-ternary, #e4e4e4);
  cursor: pointer;
  transition: background 0.2s ease-out;
  transform: translateY(calc(var(--height) / 2));
  will-change: background; }

html[dir="rtl"] io-big-toggle {
  --translateX: -20px; }

io-big-toggle[disabled] {
  opacity: 0.5;
  cursor: default; }

io-big-toggle button {
  width: calc(var(--height) * 2);
  height: calc(var(--height) * 2);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--height);
  outline: none;
  font-weight: 400;
  text-transform: initial;
  cursor: pointer;
  transition: border 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out, width 0.2s ease-out;
  transform: translateY(var(--translateY));
  will-change: border, box-shadow, transform, width; }

io-big-toggle button {
  background-repeat: no-repeat;
  background-position: center center; }

io-big-toggle button[aria-checked="false"] {
  background-color: var(--color-critical, #ca0000);
  background-image: url(icons/iconOff.svg);
  box-shadow: 0 1px 2px 0 #e5d1d1; }

io-big-toggle button[aria-checked="false"]:hover {
  box-shadow: 0 2px 4px 0 #d3b0b0; }

io-big-toggle button[aria-checked="true"] {
  border: 2px solid #059cd0;
  background-color: var(--color-info, #0797e1);
  background-image: url(icons/iconOn.svg);
  box-shadow: 0 1px 2px 0 #a6cede;
  transform: translateY(var(--translateY)) translateX(var(--translateX)); }

io-big-toggle button[aria-checked="true"]:hover {
  box-shadow: 0 2px 4px 0 #a6cede; }

io-big-toggle button:focus,
io-big-toggle button[aria-checked="true"]:focus {
  border: 2px solid #87bffe; }

io-big-toggle[refresh] button {
  width: 160%;
  background-image: none;
  transform: translateY(var(--translateY)) translateX(-20%); }

html[dir="rtl"] io-big-toggle[refresh] button {
  transform: translateY(var(--translateY)) translateX(20%); }

io-big-toggle button > span {
  display: none;
  overflow: hidden;
  max-width: 100%;
  color: var(--color-ternary, #fdfafa);
  white-space: nowrap;
  text-overflow: ellipsis; }

io-big-toggle[refresh] button > span {
  display: inline-block; }

:root {
  --height-adjusted-by: 35px;
  --border-width-thick-doubled: calc(2 * var(--border-width-thick));
  --border-width-thin-negative: calc(-1 * var(--border-width-thin));
  --margin-primary-half: calc(var(--margin-primary) / 2); }

*,
*::before,
*::after {
  box-sizing: border-box; }

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

html,
body,
h1,
h2 {
  margin: 0; }

/*
  explicitly disable Issue Reporter in EdgeHTML due bug
  https://issues.adblockplus.org/ticket/7175
 */
html[data-platform="edgehtml"] #issue-reporter,
html[data-application="edge"] footer,
body.nohtml #block-element,
body.disabled #stats-page,
body.ignore #page-status,
body.ignore #default-container .options {
  display: none; }

html,
body {
  padding: 0;
  background-color: var(--background-color-primary); }

body {
  width: 340px;
  color: var(--color-primary);
  font-family: "Source Sans Pro", Arial, sans-serif;
  font-size: var(--font-size-primary); }

button {
  border: 0;
  color: var(--color-link);
  background: none;
  cursor: pointer; }

button[disabled] {
  cursor: default; }

header,
main > *,
footer {
  padding: var(--padding-primary); }

header {
  padding-bottom: var(--padding-primary); }

header .top,
#page-status > div:not(.refresh-info),
footer {
  display: flex;
  flex-direction: row; }

header h1 {
  color: var(--color-secondary);
  background-image: url(abp-logo.svg);
  background-repeat: no-repeat;
  background-size: 24px;
  font-size: var(--font-size-big);
  flex-grow: 1; }

html:not([dir="rtl"]) header h1 {
  padding-left: 30px;
  background-position: left center; }

html[dir="rtl"] header h1 {
  padding-right: 30px;
  background-position: right center; }

header .notification::before {
  --border-top-color: var(--border-color-primary);
  display: block;
  overflow: hidden;
  height: var(--border-width-thick-doubled);
  margin-right: var(--border-width-thin-negative);
  margin-left: var(--border-width-thin-negative);
  border: 0;
  border-top: var(--border-width-thick) var(--border-style-primary) var(--border-top-color);
  border-radius: var(--border-radius-primary);
  content: ""; }

header .notification.critical::before {
  --border-top-color: var(--color-critical); }

header .notification.information::before {
  --border-top-color: var(--color-info); }

header .notification,
main .card {
  border-width: var(--border-width-thin);
  border-style: var(--border-style-primary);
  border-color: var(--border-color-primary);
  border-radius: var(--border-radius-primary);
  box-shadow: var(--box-shadow-primary); }

header .notification {
  margin-top: var(--margin-primary);
  margin-bottom: var(--margin-primary-half);
  border-top: 0; }

header .notification > div {
  padding: var(--padding-primary); }

header .notification h3[hidden] + p {
  margin-top: 0; }

header .notification h3 {
  margin: 0;
  color: var(--color-secondary);
  font-size: var(--font-size-primary); }

header .notification h3::before {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  content: ""; }

html:not([dir="rtl"]) header .notification.critical h3,
html:not([dir="rtl"]) header .notification.information h3 {
  padding-left: 24px; }

html:not([dir="rtl"]) header .notification.critical h3::before,
html:not([dir="rtl"]) header .notification.information h3::before {
  margin-left: -24px; }

html[dir="rtl"] header .notification.critical h3,
html[dir="rtl"] header .notification.information h3 {
  padding-right: 24px; }

html[dir="rtl"] header .notification.critical h3::before,
html[dir="rtl"] header .notification.information h3::before {
  margin-right: -24px; }

header .notification.critical h3::before {
  background-image: url(icons/critical.svg); }

header .notification.information h3::before {
  background-image: url(icons/info.svg); }

header .notification hr {
  height: var(--border-width-thin);
  border: 0;
  background: var(--border-color-primary); }

header .notification button {
  display: block;
  padding-right: 0;
  padding-left: 0;
  font-size: var(--font-size-primary); }

header .notification button {
  margin-top: var(--margin-primary-half); }

#options {
  min-width: var(--font-size-big);
  border: 0;
  opacity: 0.5;
  background-image: url(icons/options.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--font-size-big);
  transition: opacity 0.1s ease-in; }

#options:hover {
  opacity: 1; }

.refresh-info {
  display: block;
  overflow: hidden;
  padding: var(--margin-primary-half);
  border-width: var(--border-width-thin);
  border-style: var(--border-style-primary);
  border-color: var(--border-color-primary);
  border-radius: var(--border-radius-primary);
  font-size: var(--font-size-primary);
  transition: transform 0.3s ease-out;
  transform: scale3d(1, 1, 1) translateY(4px);
  will-change: transform; }

.refresh-info[hidden] {
  height: 0;
  padding: 0;
  border: 0;
  transform: scale3d(1, 0, 1) translateY(0); }

#page-status {
  height: var(--page-status-height, auto);
  transition: height 0.3s ease-out;
  will-change: height; }

.refresh #page-status {
  height: calc(var(--page-status-height) + var(--height-adjusted-by)); }

#page-status .details {
  width: 240px; }

#page-status io-big-toggle {
  margin: var(--margin-primary-half); }

body.disabled #page-status .details {
  opacity: 0.5; }

#blocking-domain {
  overflow: hidden;
  margin: var(--margin-primary-half) 0;
  white-space: nowrap;
  text-overflow: ellipsis; }

a,
a:hover,
a:visited,
a:active {
  color: var(--color-link);
  text-decoration: none; }

main h2 {
  color: var(--color-secondary);
  font-size: var(--font-size-medium); }

#page-info {
  overflow: hidden;
  height: var(--page-info-height, auto);
  background-color: var(--background-color-secondary);
  transition: height 0.3s ease-out;
  will-change: height; }

#page-info #block-element-container,
#page-info.blocking #default-container {
  display: none; }

#page-info.blocking #block-element-container,
#page-info #default-container {
  display: block; }

.refresh #page-info {
  height: calc(var(--page-info-height) - var(--height-adjusted-by)); }

#page-info > div {
  transition: transform  0.3s ease-out;
  transform: scale3d(1, 1, 1);
  will-change: transform; }

.refresh #page-info > div {
  opacity: 0.9;
  transform: scale3d(0.8, 0.8, 0.8) translateY(-30px);
  pointer-events: none;
  filter: blur(5px); }

main .card {
  margin-top: var(--margin-primary-half);
  padding: var(--padding-primary);
  background-color: var(--background-color-primary); }

main .card strong {
  color: var(--color-secondary); }

main .options {
  display: flex;
  padding-top: var(--padding-primary); }

main .options button {
  padding: var(--padding-secondary);
  border: 0;
  color: var(--color-primary);
  background-color: transparent;
  font-size: var(--font-size-small);
  text-align: center;
  transition: color 0.3s ease-in;
  flex-grow: 1; }

main .options #block-element-cancel {
  margin: auto;
  flex-grow: 0; }

#block-element-cancel .block {
  margin-right: var(--margin-primary);
  margin-left: var(--margin-primary); }

html:not([dir="rtl"]) main .options button {
  border-left: var(--border-width-thin) var(--border-style-primary) var(--border-color-primary); }

html:not([dir="rtl"]) main .options button:last-child {
  border-right: var(--border-width-thin) var(--border-style-primary) var(--border-color-primary); }

html[dir="rtl"] main .options button {
  border-right: var(--border-width-thin) var(--border-style-primary) var(--border-color-primary); }

html[dir="rtl"] main .options button:last-child {
  border-left: var(--border-width-thin) var(--border-style-primary) var(--border-color-primary); }

main .options button .report::before,
main .options button .block::before {
  display: inline-block;
  background-repeat: no-repeat;
  content: ""; }

html:not([dir="rtl"]) main .options button .report::before,
html:not([dir="rtl"]) main .options button .block::before {
  margin-right: var(--margin-primary-half); }

html[dir="rtl"] main .options button .report::before,
html[dir="rtl"] main .options button .block::before {
  margin-left: var(--margin-primary-half); }

main .options button .report::before {
  width: 13px;
  height: 11px;
  background-image: url(icons/report-issue.svg?normal#normal);
  background-size: 13px 11px; }

main .options button .block::before {
  width: 12px;
  height: 12px;
  background-image: url(icons/block-element.svg?normal#normal);
  background-size: 12px 12px;
  transform: translateY(1); }

main .options button[disabled] {
  opacity: 0.5; }

main .options button:not([disabled]):hover .report::before {
  background-image: url(icons/report-issue.svg?hover#hover); }

/* creates a gap between bold numbers and text (both rtl and ltr) */
#stats-page strong::after,
#stats-total strong::after {
  display: inline-block;
  margin: 4px;
  content: ""; }

body:not(.disabled) main .options button:hover .block::before {
  background-image: url(icons/block-element.svg?hover#hover); }

body:not(.disabled) main .options button:hover,
body:not(.disabled) main .options button:focus {
  color: var(--color-info); }

main > *,
footer {
  border-top: var(--border-width-thin) var(--border-style-primary) var(--border-color-primary); }

#block-element-info {
  text-align: center; }

#block-element-info > strong {
  display: block;
  margin-bottom: var(--margin-primary-half); }

footer > span {
  flex-grow: 1; }

footer > button {
  width: var(--font-size-primary);
  margin-right: var(--margin-primary-half);
  margin-left: var(--margin-primary-half);
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: opacity 0.1s ease-in; }

footer > button:hover {
  opacity: 1; }

footer > button.apple {
  background-image: url(icons/apple.svg); }

footer > button.android {
  background-image: url(icons/android.svg); }
