/* ************************************* */
/*          1. CSS Reset                 */
/* ************************************* */
h1,
h2,
h3,
div,
p,
span,
ol,
ul,
li,
a,
label,
button,
svg,
strong,
kbd,
pre,
code {
  all: unset;
  box-sizing: border-box !important;
}

*::before,
*:before,
*::after,
*:after {
  all: unset;
}

div {
  display: block;
}

* {
  font-family: var(--sa11y-font-face) !important;
  -webkit-font-smoothing: auto !important;
}

p,
ol,
ul,
li,
label {
  font-size: var(--sa11y-normal-text);
  font-weight: normal;
  line-height: 22px !important;
  text-align: start;
  letter-spacing: normal;
  word-break: break-word;
}

.sa11y-overflow {
  overflow: auto;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

audio {
  max-width: 100%;
}

/* ************************************* */
/*          2. Main toggle               */
/* ************************************* */
#toggle {
  position: fixed;
  bottom: 15px;
  z-index: 2147483644;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  margin: 0;
  overflow: visible;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(to top, #e040fb, #00bcd4);
  background-color: var(--sa11y-setting-switch-bg-off);
  background-size: 150% 150%;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  inset-inline-end: 18px;
}
#toggle.left, #toggle.top-left {
  inset-inline-start: 18px;
}
#toggle.top-left, #toggle.top-right {
  top: 15px;
  bottom: unset;
}
@media screen and (forced-colors: active) {
  #toggle {
    background: ButtonFace !important;
    border: 2px solid transparent;
  }
}
#toggle svg {
  width: 35px;
  height: 35px;
}
#toggle svg path {
  fill: var(--sa11y-panel-bg);
}
#toggle:hover, #toggle:focus {
  animation: sa11y-toggle-gradient 3s ease;
}
#toggle:disabled:hover, #toggle:disabled:focus {
  animation: none;
}
#toggle.on {
  background: linear-gradient(to bottom, #e040fb, #00bcd4);
}
#toggle:disabled {
  cursor: not-allowed;
  background: unset;
  background-color: var(--sa11y-setting-switch-bg-off);
}

/* ************************************* */
/*        3. Notification badge          */
/* ************************************* */
#notification-badge {
  position: absolute;
  top: -5.5px;
  right: -3px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2.5px;
  font-size: 13.5px;
  font-weight: normal;
  line-height: 1;
  color: #fff;
  text-wrap: nowrap;
  background-color: #eb0000;
  border: 1px solid transparent;
  border-radius: 12px;
}
#notification-badge.notification-badge-warning {
  color: var(--sa11y-warning-text);
  background-color: var(--sa11y-warning-hover);
  border: 1px solid var(--sa11y-warning);
}

/* ************************************* */
/*            4. Main panel              */
/* ************************************* */
#panel {
  position: fixed;
  bottom: 25px;
  z-index: 2147483643;
  overflow: visible;
  visibility: hidden;
  background: var(--sa11y-panel-bg);
  border-radius: 4px;
  box-shadow: 0 0 20px 4px rgba(154, 161, 177, 0.15), 0 4px 80px -8px rgba(36, 40, 47, 0.25), 0 4px 4px -2px rgba(91, 94, 105, 0.15);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s background 0.2s;
  transform: scale(0);
  transform-origin: 100% 100%;
  inset-inline-end: 42px;
}
#panel.left, #panel.top-left {
  inset-inline-start: 42px;
  inset-inline-end: unset;
}
#panel.top-right, #panel.top-left {
  top: 35px;
  bottom: unset;
}
#panel.active {
  height: auto;
  visibility: visible;
  opacity: 1;
  transition: transform 0.2s, opacity 0.2s;
  transform: scale(1);
  transform-origin: bottom right;
}
@media screen and (forced-colors: active) {
  #panel {
    border: 2px solid transparent;
  }
}

#panel.active.left,
[dir=rtl] #panel.active {
  transform-origin: bottom left;
}

#panel.active.top-left {
  transform-origin: top left;
}

#panel.active.top-right {
  transform-origin: top right;
}

/* ************************************* */
/*            5. Panel alerts            */
/* ************************************* */
#panel-alert {
  display: none;
  opacity: 0;
}
#panel-alert.active {
  display: block;
  opacity: 1;
}

#panel-alert-content {
  position: relative;
  align-items: center;
  max-height: 400px;
  padding: 15px 20px 15px 15px;
  overflow-y: auto;
  line-height: 22px;
  color: var(--sa11y-panel-primary);
  border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}

.top-left #panel-alert-content,
.top-right #panel-alert-content {
  border: 0;
}

#panel-alert-preview .close-tooltip {
  display: none;
}

#panel-alert-preview,
#panel-alert-text {
  font-family: var(--sa11y-font-face);
  font-size: var(--sa11y-normal-text);
  font-weight: normal;
  line-height: 22px;
}

.panel-alert-preview {
  padding: 10px;
  margin-top: 15px;
  background: var(--sa11y-panel-bg-secondary);
  border: 1px dashed var(--sa11y-panel-bg-splitter);
  border-radius: 5px;
}
.panel-alert-preview ul {
  position: relative;
  padding: 0;
  margin: 0;
  margin-block-end: 0;
  margin-block-start: 0;
}
.panel-alert-preview li {
  display: list-item;
  padding-bottom: 5px;
  margin: 5px 10px 0 20px;
}

.element-preview {
  padding: 5px;
  margin-bottom: 10px;
  overflow-wrap: break-word;
  background-color: var(--sa11y-element-preview);
  border-radius: 3.2px;
}

/* Dismiss button for issues */
button[data-sa11y-dismiss] {
  display: block;
  padding: 4px 8px;
  margin: 10px 5px 5px 0;
  color: var(--sa11y-panel-primary);
  cursor: pointer;
  background: var(--sa11y-panel-bg-secondary);
  border: 2px solid var(--sa11y-button-outline);
  border-radius: 5px;
  margin-inline-end: 15px;
}
button[data-sa11y-dismiss]:hover, button[data-sa11y-dismiss]:focus {
  background: var(--sa11y-shortcut-hover);
}

/* ************************************* */
/*          6. General styles            */
/* ************************************* */
h2 {
  display: block;
  margin-bottom: 3px;
  font-size: var(--sa11y-large-text);
  font-weight: 700;
}

h3 {
  display: block;
  margin-bottom: 3px;
  font-size: calc(var(--sa11y-large-text) - 1px);
  font-weight: 600;
}

strong {
  font-weight: 600;
}

a:not(#outline-list a):not(.edit) {
  font-weight: 500;
  color: var(--sa11y-hyperlink);
  text-decoration: underline;
  cursor: pointer;
  border-bottom: 0;
}

a:hover,
a:focus {
  text-decoration: none !important;
}

hr {
  height: 1px;
  padding: 0;
  margin: 10px 0;
  background: var(--sa11y-panel-bg-splitter);
  border: none;
  opacity: 1;
}

/* ******************************************** */
/*  7. Base styling for dismiss & skip buttons  */
/* ******************************************** */
#dismiss-button,
#skip-button {
  position: relative;
  display: none;
  width: 36px;
  height: 36px;
  overflow: visible;
  text-align: center;
  cursor: pointer;
  background: var(--sa11y-panel-bg-secondary);
  border: 1px solid var(--sa11y-button-outline);
  border-radius: 50px;
  transition: all 0.1s ease-in-out;
  margin-inline-end: 8px;
  margin-inline-start: 2px;
}
#dismiss-button.active,
#skip-button.active {
  display: block;
}
#dismiss-button:disabled,
#skip-button:disabled {
  cursor: default;
  background: none;
  border: 0;
  box-shadow: none;
}
#dismiss-button:before,
#skip-button:before {
  position: absolute;
  inset: -5px;
  content: "";
}
#dismiss-button:hover:not(:disabled), #dismiss-button:focus:not(:disabled),
#skip-button:hover:not(:disabled),
#skip-button:focus:not(:disabled) {
  background-color: var(--sa11y-shortcut-hover);
}

#panel.top-left #dismiss-button,
#panel.top-left #skip-button,
#panel.left #dismiss-button,
#panel.left #skip-button {
  margin-inline-start: 8px;
  margin-inline-end: 2px;
}

/* Dismiss button */
.dismiss-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: -4px;
  background: var(--sa11y-setting-switch-bg-off);
  -webkit-mask: var(--sa11y-dismiss-icon) center no-repeat;
          mask: var(--sa11y-dismiss-icon) center no-repeat;
}

.dismiss-group {
  display: flex;
}

@media screen and (forced-colors: active) {
  .dismiss-icon {
    filter: invert(1);
  }
}
/* ***************************************** */
/*  8. Panel status, Skip To Issue, Dismiss  */
/* ***************************************** */
#panel-content {
  display: flex;
  align-items: center;
  padding: 6px;
  color: var(--sa11y-panel-primary);
}
#panel-content.errors .panel-icon, #panel-content.good .panel-icon, #panel-content.warnings .panel-icon {
  width: 26px;
  height: 26px;
  margin: 0 auto;
}
#panel-content.errors .panel-icon {
  margin-top: -2px;
  background: var(--sa11y-panel-error);
  -webkit-mask: var(--sa11y-error-svg) center no-repeat;
          mask: var(--sa11y-error-svg) center no-repeat;
}
#panel-content.good .panel-icon {
  background: var(--sa11y-good);
  -webkit-mask: var(--sa11y-good-svg) center no-repeat;
          mask: var(--sa11y-good-svg) center no-repeat;
}
#panel-content.warnings .panel-icon {
  background: var(--sa11y-yellow-text);
  transform: scaleX(var(--sa11y-icon-direction));
  -webkit-mask: var(--sa11y-warning-svg) center no-repeat;
          mask: var(--sa11y-warning-svg) center no-repeat;
}
@media screen and (forced-colors: active) {
  #panel-content.errors .panel-icon, #panel-content.good .panel-icon, #panel-content.warnings .panel-icon {
    filter: invert(1);
  }
}

#panel.top-left #panel-content,
#panel.left #panel-content {
  flex-direction: row-reverse;
}

#status {
  font-size: var(--sa11y-large-text);
  color: var(--sa11y-panel-primary);
}

.panel-count {
  padding: 2px 4px;
  margin-right: 3px;
  margin-left: 3px;
  font-size: 15px;
  font-weight: normal;
  color: var(--sa11y-panel-primary);
  background-color: var(--sa11y-panel-badge);
  border-radius: 4px;
}

/* ***************************************** */
/*   9. Outline and Settings shared styles   */
/* ***************************************** */
#page-issues,
#images-panel,
#settings-panel,
#outline-panel {
  display: none;
  color: var(--sa11y-panel-primary);
  opacity: 0;
}

#page-issues.active,
#images-panel.active,
#settings-panel.active,
#outline-panel.active {
  display: block;
  opacity: 1;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px 0;
  text-align: start;
}

#about-content {
  padding-top: 5px;
}
#about-content p {
  display: block;
  margin-block-end: 1em;
}

#page-issues-content,
#images-content,
#settings-content,
#outline-content {
  padding: 0 15px 10px;
  border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}
.top-right #page-issues-content, .top-left #page-issues-content,
.top-right #images-content,
.top-left #images-content,
.top-right #settings-content,
.top-left #settings-content,
.top-right #outline-content,
.top-left #outline-content {
  border: 0;
}

#page-issues-content {
  max-height: 160px;
  overflow-y: auto;
}

#settings-content {
  max-height: 400px;
  overflow-y: auto;
}

/* Note to self: stop tinkering with the max-height. This is the max height that will accommodate the Page Issues and Readability panel on your average 13" screen. */
#images-content,
#outline-content {
  max-height: 250px;
  overflow-y: auto;
}

#settings-panel .sa11y-red-text,
#outline-panel .outline-list-item.sa11y-red-text {
  color: var(--sa11y-red-text);
}

/* ***************************************** */
/*          10. Page Outline list            */
/* ***************************************** */
#outline-list {
  display: block;
  padding: 0;
  margin: 0;
}
#outline-list a {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
#outline-list li {
  display: block;
  padding: 0;
  margin-top: 0;
  margin-bottom: 3px;
  list-style-type: none;
}
#outline-list li:first-child {
  margin-top: 5px;
}
#outline-list li a:hover,
#outline-list li a:focus {
  display: block;
  background: var(--sa11y-panel-outline-hover);
  border-radius: 5px;
  box-shadow: 0 0 0 2px var(--sa11y-panel-outline-hover);
}
#outline-list .outline-2 {
  margin-inline-start: 15px;
}
#outline-list .outline-3 {
  margin-inline-start: 30px;
}
#outline-list .outline-4 {
  margin-inline-start: 45px;
}
#outline-list .outline-5 {
  margin-inline-start: 60px;
}
#outline-list .outline-6 {
  margin-inline-start: 75px;
}

/* ***************************************** */
/*          10A. Images list            */
/* ***************************************** */
#images-list {
  display: block;
  padding: 0;
  margin: 0;
}
#images-list li {
  display: block;
  width: 100%;
  margin: 15px 0;
  overflow: hidden;
  list-style-type: none;
  border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}
#images-list li:first-child {
  margin-top: 5px;
}
#images-list li:last-child {
  margin-bottom: 0;
  border: none;
}
#images-list li .alt {
  padding: 2px 5px 10px;
}
#images-list li .edit-block {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 15px;
}
#images-list li .edit {
  position: relative;
  padding: 4px 7px;
  color: var(--sa11y-panel-primary);
  text-decoration: none;
  cursor: pointer;
  margin-inline-end: 5px;
  background: var(--sa11y-panel-bg-secondary);
  border: 2px solid var(--sa11y-button-outline);
  border-radius: 5px;
}
#images-list li .edit:hover, #images-list li .edit:focus {
  background-color: var(--sa11y-shortcut-hover);
}
#images-list li .edit::before {
  position: absolute;
  inset: -10px;
  content: "";
}
#images-list li img {
  float: inline-start;
  max-width: 110px;
  margin-inline-end: 10px;
  margin-block-end: 15px;
  border-radius: 5px;
}
#images-list li.warning .alt {
  color: var(--sa11y-yellow-text);
}
#images-list li.warning img {
  background-color: var(--sa11y-yellow-text);
  border: 5px solid var(--sa11y-yellow-text);
}
#images-list li.error .alt {
  color: var(--sa11y-error);
}
#images-list li.error img {
  background-color: var(--sa11y-error);
  border: 5px solid var(--sa11y-error);
}
#images-list li.good img {
  background-color: var(--sa11y-panel-badge);
  border: 5px solid var(--sa11y-panel-badge);
}
@media screen and (forced-colors: active) {
  #images-list li img {
    background-color: ButtonBorder !important;
  }
}

/* **************************************** */
/*    11. Various icons                     */
/* **************************************** */
.move-panel-icon {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--sa11y-setting-switch-bg-off);
  -webkit-mask: var(--sa11y-move-panel-icon);
          mask: var(--sa11y-move-panel-icon);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.info-icon {
  margin-top: -2px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  display: inline-block;
  background: var(--sa11y-setting-switch-bg-off);
  -webkit-mask: var(--sa11y-info-icon);
          mask: var(--sa11y-info-icon);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.sun-icon {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--sa11y-setting-switch-bg-off);
  -webkit-mask: var(--sa11y-sun-icon);
          mask: var(--sa11y-sun-icon);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.moon-icon {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--sa11y-setting-switch-bg-off);
  -webkit-mask: var(--sa11y-moon-icon);
          mask: var(--sa11y-moon-icon);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.error-icon {
  margin-bottom: -4px;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: var(--sa11y-error-text);
  -webkit-mask: var(--sa11y-error-svg);
          mask: var(--sa11y-error-svg);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.hidden-icon {
  margin-bottom: -3px;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: var(--sa11y-panel-primary);
  -webkit-mask: var(--sa11y-hidden-icon-svg);
          mask: var(--sa11y-hidden-icon-svg);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.link-icon {
  margin-bottom: -3.5px;
  width: 16px;
  height: 16px;
  display: inline-block;
  background: var(--sa11y-panel-primary);
  -webkit-mask: var(--sa11y-link-icon-svg);
          mask: var(--sa11y-link-icon-svg);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.error-badge .link-icon,
.error-badge .hidden-icon {
  background: var(--sa11y-error-text);
}

.warning-badge .link-icon,
.warning-badge .hidden-icon {
  background: var(--sa11y-panel-bg);
}

.error .link-icon {
  background: var(--sa11y-error-text);
}

.warning .link-icon {
  background: var(--sa11y-panel-bg);
}

@media screen and (forced-colors: active) {
  .move-panel-icon,
  .sun-icon,
  .moon-icon,
  .info-icon,
  .error-icon,
  .link-icon,
  .hidden-icon {
    filter: invert(1);
  }
}
/* ***************************************** */
/*    12. Page Outline & Settings toggles    */
/* ***************************************** */
#panel-controls {
  display: flex;
  overflow: hidden;
  border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
  border-radius: 0 0 4px 4px;
}

#panel-controls button {
  position: relative;
  display: block;
  width: 100%;
  height: 30px;
  padding: 0;
  margin: 0;
  font-size: var(--sa11y-normal-text);
  font-weight: 400;
  line-height: 0;
  color: var(--sa11y-panel-secondary);
  text-align: center;
  cursor: pointer;
  background: var(--sa11y-panel-bg-secondary);
  background-color: var(--sa11y-panel-bg-secondary);
  border-top: 1px solid var(--sa11y-panel-bg-splitter);
  border-inline-end: 1px solid var(--sa11y-panel-bg-splitter);
  outline: 0;
  opacity: 1;
  transition: background 0.2s;
}
#panel-controls button:hover, #panel-controls button.active {
  background-color: var(--sa11y-shortcut-hover);
}
#panel-controls button.active {
  font-weight: 600;
}

#export-results-mode,
label {
  display: inline-block;
  width: 100%;
  margin: 0;
  font-weight: normal;
  color: var(--sa11y-panel-primary);
}

label:not(#colour-filter-mode, #export-results-mode) {
  cursor: pointer;
}

#panel.right #panel-controls:has(#images-toggle)::after {
  width: 80px;
  content: "";
}

#panel.left #panel-controls:has(#images-toggle)::before {
  width: 50px;
  content: "";
}

/* ***************************************** */
/*           13. Settings Panel              */
/* ***************************************** */
#settings-panel .export-results-group,
#settings-panel .appearance-group {
  display: flex;
  margin: 5px 0;
}
#settings-panel .export-results-group button,
#settings-panel .appearance-group button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 34px;
  margin: 2px 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--sa11y-setting-switch-bg-off);
  border-radius: 5px;
  margin-inline-start: 8px;
  margin-inline-end: 4px;
}
#settings-panel .export-results-group button:hover, #settings-panel .export-results-group button:focus, #settings-panel .export-results-group button:focus-within,
#settings-panel .appearance-group button:hover,
#settings-panel .appearance-group button:focus,
#settings-panel .appearance-group button:focus-within {
  background: var(--sa11y-shortcut-hover);
}
#settings-panel .export-results-group button:before,
#settings-panel .appearance-group button:before {
  position: absolute;
  inset: -7px;
  content: "";
}
#settings-panel .export-results-group button .text,
#settings-panel .appearance-group button .text {
  padding: 0 6px;
  font-weight: 600;
  color: var(--sa11y-setting-switch-bg-off);
}
#settings-panel .switch {
  position: relative;
  width: 105px;
  height: 44px;
  padding: 7px 10px;
  margin: 0;
  font-size: var(--sa11y-normal-text);
  font-weight: 600;
  color: var(--sa11y-setting-switch-bg-off);
  text-align: end;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 5px;
}
#settings-panel .switch[aria-pressed=true]:after, #settings-panel .switch[aria-pressed=false]:after {
  display: inline-block;
  width: 27px;
  height: 27px;
  margin: 0 4px 4px;
  vertical-align: middle;
  content: "";
}
#settings-panel .switch[aria-pressed=true]:after {
  background: var(--sa11y-setting-switch-bg-on);
  -webkit-mask: var(--sa11y-setting-switch-on-svg) center no-repeat;
          mask: var(--sa11y-setting-switch-on-svg) center no-repeat;
}
#settings-panel .switch[aria-pressed=false]:after {
  background: var(--sa11y-setting-switch-bg-off);
  -webkit-mask: var(--sa11y-setting-switch-off-svg) center no-repeat;
          mask: var(--sa11y-setting-switch-off-svg) center no-repeat;
}
@media screen and (forced-colors: active) {
  #settings-panel .switch[aria-pressed=false]:after, #settings-panel .switch[aria-pressed=true]:after {
    filter: invert(1);
  }
}
#settings-panel #settings-options li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1px 0;
  list-style-type: none;
  border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}
#settings-panel #settings-options li:last-child {
  border: none;
}

/* ************************************* */
/*            14. Page issues            */
/* ************************************* */
#page-issues {
  align-items: center;
  color: var(--sa11y-panel-primary);
}

#page-issues-list {
  display: block;
  margin-top: 4px;
}
#page-issues-list li {
  display: block;
  margin: 0 0 10px;
}

.top-left.has-page-issues #page-issues,
.top-right.has-page-issues #page-issues {
  /* Hide double border. */
  margin-top: -1px;
  border-top: 1px solid var(--sa11y-panel-bg-splitter);
}

/* ************************************* */
/*      15. Colour filters plugin        */
/* ************************************* */
#panel-colour-filters {
  display: none;
  align-items: center;
  font-family: var(--sa11y-font-face);
  font-size: var(--sa11y-normal-text);
  font-weight: 400;
  line-height: 22px;
  color: var(--sa11y-panel-primary);
}
#panel-colour-filters.active {
  display: flex;
}
#panel-colour-filters p {
  width: 100%;
  padding: 6px 20px 6px 6px;
}
#panel-colour-filters[data-colour=protanopia] {
  -o-border-image: linear-gradient(94deg, rgb(120, 103, 25) 11%, rgb(224, 198, 0) 36%, rgb(224, 198, 0) 47%, rgb(0, 89, 227) 75%, rgb(0, 66, 170) 91%);
     border-image: linear-gradient(94deg, rgb(120, 103, 25) 11%, rgb(224, 198, 0) 36%, rgb(224, 198, 0) 47%, rgb(0, 89, 227) 75%, rgb(0, 66, 170) 91%);
  border-bottom: 6px solid transparent;
  border-image-slice: 1;
}
#panel-colour-filters[data-colour=deuteranopia] {
  -o-border-image: linear-gradient(270deg, rgb(86, 127, 219) 0%, rgb(164, 162, 141) 48%, rgb(195, 173, 20) 69%, rgb(167, 149, 5) 100%);
     border-image: linear-gradient(270deg, rgb(86, 127, 219) 0%, rgb(164, 162, 141) 48%, rgb(195, 173, 20) 69%, rgb(167, 149, 5) 100%);
  border-bottom: 6px solid transparent;
  border-image-slice: 1;
}
#panel-colour-filters[data-colour=tritanopia] {
  -o-border-image: linear-gradient(270deg, rgb(177, 80, 111) 0%, rgb(6, 150, 193) 35%, rgb(243, 169, 186) 70%, rgb(217, 28, 93) 87%, rgb(254, 1, 92) 100%);
     border-image: linear-gradient(270deg, rgb(177, 80, 111) 0%, rgb(6, 150, 193) 35%, rgb(243, 169, 186) 70%, rgb(217, 28, 93) 87%, rgb(254, 1, 92) 100%);
  border-bottom: 6px solid transparent;
  border-image-slice: 1;
}
#panel-colour-filters[data-colour=monochromacy] {
  -o-border-image: linear-gradient(270deg, rgb(0, 0, 0) 0%, rgb(167, 167, 167) 50%, rgb(0, 0, 0) 100%);
     border-image: linear-gradient(270deg, rgb(0, 0, 0) 0%, rgb(167, 167, 167) 50%, rgb(0, 0, 0) 100%);
  border-bottom: 6px solid transparent;
  border-image-slice: 1;
}
#panel-colour-filters[data-colour=protanopia] .panel-icon {
  background: var(--sa11y-panel-error);
}
#panel-colour-filters[data-colour=deuteranopia] .panel-icon {
  background: var(--sa11y-good-hover);
}
#panel-colour-filters[data-colour=tritanopia] .panel-icon {
  background: var(--sa11y-blue);
}
#panel-colour-filters[data-colour=monochromacy] .panel-icon {
  background: linear-gradient(90deg, rgb(56, 164, 89) 20%, #f00 50%, rgb(0, 119, 200) 80%);
}
#panel-colour-filters .panel-icon {
  width: 30px;
  height: 30px;
  margin-inline-end: 5px;
  margin-inline-start: 10px;
  -webkit-mask: var(--sa11y-low-vision-icon) center no-repeat;
          mask: var(--sa11y-low-vision-icon) center no-repeat;
}
@media screen and (forced-colors: active) {
  #panel-colour-filters .panel-icon {
    forced-color-adjust: none;
  }
}

.select-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.select-dropdown:after {
  position: absolute;
  content: " ";
  border-top: 5px solid var(--sa11y-setting-switch-bg-off);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  inset-inline-end: 14px;
}

#colour-filter-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: relative;
  height: 30px;
  font-size: var(--sa11y-normal-text);
  font-weight: 600;
  color: var(--sa11y-setting-switch-bg-off);
  text-align: end;
  vertical-align: middle;
  cursor: pointer;
  background: var(--sa11y-panel-bg);
  border: 2px solid var(--sa11y-setting-switch-bg-off);
  border-radius: 5px;
  padding-inline-end: 25px;
  padding-inline-start: 5px;
  margin-inline-end: 4px;
}
#colour-filter-select:hover, #colour-filter-select:focus {
  background: var(--sa11y-shortcut-hover);
}

#colour-filter-select.active {
  box-shadow: 0 0 0 2px var(--sa11y-setting-switch-bg-on);
}

#colour-filter-item label,
#colour-filter-item select {
  margin-top: 10px;
  margin-bottom: 9px;
}

/* ***************************************** */
/*            16. Readability                */
/* ***************************************** */
#readability-panel {
  display: none;
  opacity: 0;
}
#readability-panel.active {
  display: block;
  opacity: 1;
}

.top-left #readability-content,
.top-right #readability-content {
  border-top: 1px solid var(--sa11y-panel-bg-splitter);
}

.left #readability-content,
.right #readability-content {
  border-bottom: 1px solid var(--sa11y-panel-bg-splitter);
}

#readability-content {
  width: 100%;
  padding: 10px 15px;
  color: var(--sa11y-panel-primary);
}

#readability-details {
  padding: 0;
  margin: 0;
  white-space: normal;
  list-style-type: none;
}
#readability-details li {
  display: inline-block;
  margin: 0;
  list-style-type: none;
  padding-inline-end: 10px;
}

.readability-score {
  padding: 2px 5px;
  color: var(--sa11y-panel-primary);
  background-color: var(--sa11y-panel-badge);
  border-radius: 4px;
  margin-inline-start: 5px;
}

#readability-info {
  margin-inline-start: 10px;
}

/* ************************************* */
/*   17. Skip to Page Issues skip link   */
/* ************************************* */
#skip-to-page-issues {
  display: none;
}

#panel.has-page-issues #skip-to-page-issues {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  font-weight: 600;
  white-space: nowrap;
  background: var(--sa11y-panel-bg);
  border: 0;
  border-radius: 5px;
}

#panel.has-page-issues #skip-to-page-issues:focus {
  z-index: 1;
  width: auto;
  height: auto;
  padding: 7px 10px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ***************************************** */
/*          18. Misc utilities               */
/* ***************************************** */
.hide-settings-border {
  padding: 0 15px !important;
  border-bottom: 0 !important;
}
.hide-settings-border li:not(#colour-filter-item) {
  display: none !important;
}
.hide-settings-border #about-content {
  display: none;
}
.hide-settings-border.scrollable::before {
  all: unset;
}

#contrast-tools {
  display: none;
}

/* ***************************************** */
/*         19. Scrollbar styling             */
/* ***************************************** */
::-webkit-scrollbar {
  width: 7px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--sa11y-button-outline);
  border-radius: 6px;
}

* {
  scrollbar-color: var(--sa11y-button-outline);
  scrollbar-width: thin;
}

.scrollable::before {
  position: absolute;
  top: auto;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 250px;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, var(--sa11y-panel-scrollable) 100%);
  background-position: bottom;
  transition: opacity 1s ease-in-out;
  animation: fade 1s ease-in-out;
}

#settings-content.scrollable::before {
  height: 400px;
}

.top-right .scrollable::before,
.top-left .scrollable::before {
  border-radius: 5px;
}

#page-issues-content.scrollable::before {
  height: 160px;
}

#panel-alert.scrollable::before {
  height: 200px;
}

/* ***************************************** */
/*           20. Animations                  */
/* ***************************************** */
@keyframes sa11y-toggle-gradient {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}
/* ***************************************** */
/*     21. Internationalization (i18n)       */
/* ***************************************** */
#panel {
  width: 400px;
}

#container:lang(en) #panel {
  width: 315px;
}

#container:lang(nb) #panel,
#container:lang(da) #panel,
#container:lang(pl) #panel,
#container:lang(de) #panel,
#container:lang(sv) #panel,
#container:lang(zh) #panel {
  width: 350px;
}

#container:lang(bg) .switch:not(#export-results-item *),
#container:lang(es) .switch:not(#export-results-item *) {
  width: 225px !important;
}

#container:not(:lang(en)):not(:lang(de)) .switch {
  width: 205px;
}