/*
 █████╗  ██████╗ ██████╗███████╗███████╗███████╗     ██████╗ ██████╗  ██████╗ ██╗  ██╗██╗███████╗███████╗
██╔══██╗██╔════╝██╔════╝██╔════╝██╔════╝██╔════╝    ██╔════╝██╔═══██╗██╔═══██╗██║ ██╔╝██║██╔════╝██╔════╝
███████║██║     ██║     █████╗  ███████╗███████╗    ██║     ██║   ██║██║   ██║█████╔╝ ██║█████╗  ███████╗
██╔══██║██║     ██║     ██╔══╝  ╚════██║╚════██║    ██║     ██║   ██║██║   ██║██╔═██╗ ██║██╔══╝  ╚════██║
██║  ██║╚██████╗╚██████╗███████╗███████║███████║    ╚██████╗╚██████╔╝╚██████╔╝██║  ██╗██║███████╗███████║
╚═╝  ╚═╝ ╚═════╝ ╚═════╝╚══════╝╚══════╝╚══════╝     ╚═════╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═╝╚═╝╚══════╝╚══════╝
*/

/* _______________ Animation _______________ */
 html[data-cookie-animation=true] *,  html[data-cookie-animation=true] *:before, html[data-cookie-animation=true] *:after {
    transition-property: none !important;
    /* transform: none !important; */
    animation: none !important;
  }

/* _______________ Underline _______________ */
 html[data-cookie-underline=true] a, html[data-cookie-underline=true] a * {
  text-decoration: underline !important;
}

/* _______________ Readable _______________ */
html[data-cookie-readable=true] body{
	font-family: Verdana,Arial,Helvetica,sans-serif !important;
	/* Might need important */
}

/*_______________ Low Contrast ____________*/
html[data-cookie-contrast=low] {
	filter: contrast(50%);
}
/*_______________ Dark Mode ____________*/
:root{
  /* rest of website */
  --access-dark-background: rgba(0,0,0,1);
  --access-dark-text: rgba(255,213,1,1);
}
/* NEED TO FIND A WAY TO DO THIS WITH HELP OF SITE DEVS */
/* Neeed to implement dark mode from the start */
html[data-cookie-contrast=high] body {
	/* background-color: #000 !important;
  color: #ffd501 !important; */
  filter: contrast(130%);
}

/* root = root of doc i.e. html */
html[data-cookie-contrast=high] {

  /* modal */
  --access-top-colour: var(--access-dark-background);
  --access-accent-colour: var(--access-dark-background);
  --access-select-colour: var(--access-dark-text);
  /* select has border yellow */
  --access-text: var(--access-dark-text);
  --access-panel-one: rgba(0,0,0,0.75);
  --access-panel-two: rgba(0,0,0,0.85);
  --access-panel-three: rgba(0,0,0,0.95);
  --access-toggle: var(--access-dark-background);
}

html[data-cookie-contrast=high] #modal-accessibility .grid-y > .grid-x:first-child .button-group > button {
  border: 1px solid var(--access-dark-text);
}

html[data-cookie-contrast=high] #modal-accessibility ul.accordion > li.accordion-item > a.accordion-title h2 {
  color: var(--access-dark-text);
}
html[data-cookie-contrast=high] #modal-accessibility ul.accordion div.accordion-content > fieldset > div > div {
  border: 1px solid var(--access-dark-text);
}
html[data-cookie-contrast=high] #modal-accessibility ul.accordion div.accordion-content > fieldset > div > div .switch input ~ .switch-paddle {
  border: 1px solid var(--access-dark-text);
}
html[data-cookie-contrast=high] #modal-accessibility .grid-y > .grid-x:first-child .button-group > button {
  color: var(--access-dark-background);
}
html[data-cookie-contrast=high] #modal-accessibility ul.accordion div.accordion-content > fieldset > div > div.access-selected{
  --access-text: var(--access-dark-background);
  --access-toggle: var(--access-dark-text);
}
html[data-cookie-contrast=high] #modal-accessibility ul.accordion div.accordion-content > fieldset > div > div .switch input:checked ~ .switch-paddle {
  border: 1px solid var(--access-dark-background);
}
html[data-cookie-contrast=high] #modal-accessibility .grid-y > .grid-x:first-child > .grid-x:first-child > svg {
  color: var(--access-dark-text);
}
html[data-cookie-contrast=high] #modal-accessibility .grid-y > .grid-x:first-child > .grid-x:first-child > h1 {
  color: var(--access-dark-text);
}

@media screen and (max-width: 39.9375em), screen and (max-height: 39.9375em) {
  html[data-cookie-contrast=high] #modal-accessibility ul.accordion > li.accordion-item > a.accordion-title::before {
    border: 1px solid var(--access-dark-text);
  }

  html[data-cookie-contrast=high] #modal-accessibility #modal-accessibility-description {
    background: var(--access-dark-background);
  }
}
/*
html[data-cookie-contrast=high] body {
	background-color: #000;
  color: #ffd501;
}
html[data-cookie-contrast=high] header {
	background-color: #000;
  color: #ffd501;
}
html[data-cookie-contrast=high] main {
	background-color: #000;
  color: #ffd501;
}
html[data-cookie-contrast=high] footer{
	background-color: #000;
  color: #ffd501;
} */
/* filter: contrast(130%); */


/* Greyscale */
/* -moz-filter: grayscale(100%);
-webkit-filter: grayscale(100%);
filter: gray; /* IE6-9
filter: grayscale(100%); */