#y-accessibility-bar,
#y-accessibility-bar * {
  box-sizing: border-box !important;
}

#y-accessibility-button {
  position: fixed;
  bottom: 10px;
  left: 0;
  background-color: #006dd5;
  border: none;
  color: white;
  padding: 10px;
  z-index: 9999;
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0 5px 5px 0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

#y-accessibility-button:hover,
#y-accessibility-button:focus {
  background-color: #0056b3;
  outline: none;
}

#y-accessibility-button svg {
  color: white;
  width: 24px;
  height: 24px;
}

#y-accessibility-bar {
  font-size: 16px;
  font-family: "Arial", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  max-width: 90%;
  height: 100vh;
  background-color: #f7fbff;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  z-index: 9998;
  transition: transform 0.3s ease;
  align-content: center;
  overflow-y: auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  transition: transform 0.3s ease;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

#y-accessibility-title {
  font-size: 16px;
  background-color: #006dd5;
  color: white;
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 10px 0px 10px;
  border-radius: 5px;
  border-bottom: 1px solid #a3c3e1;
}

#y-accessibility-buttons-wrap {
  width: 100%;
}

#y-accessibility-bar button {
  position: relative;
  padding: 7px;
  border: 2px solid #006dd5;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  align-items: center;
  min-height: 95px;
  transition:
    background-color 0.3sease,
    border-color 0.3sease;
  text-align: center;
  width: calc(50% - 20px);
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  float: right;
  margin: 10px;
}

#y-accessibility-bar button:hover,
#y-accessibility-bar button:focus {
  background-color: #f5f5f5;
  outline: none;
}

#y-accessibility-bar button span {
  font-size: 16px;
  margin-top: 5px;
}

#y-accessibility-bar button svg {
  width: 24px;
  height: 24px;
}

#y-accessibility-credits {
  font-size: 16px;
  background-color: #f7fbff;
  color: #333;
  padding: 10px;
  width: 100%;
  text-align: center;
}

.y-accessibility-highlight-links a {
  color: yellow !important;
  border: 2px solid red !important;
  text-decoration: underline !important;
  background-color: black !important;
}

.y-accessibility-contrast,
.y-accessibility-contrast * {
  background: none !important;
  background-color: #000 !important;
  color: white !important;
}

.y-accessibility-contrast a {
  color: yellow !important;
}

.y-accessibility-contrast button {
  background-color: yellow !important;
  color: black !important;
}

.y-accessibility-contrast input,
.y-accessibility-contrast textarea {
  background-color: white !important;
  color: black !important;
}

.y-accessibility-colorless * {
  filter: grayscale(100%) !important;
}

#y-accessibility-shadow-host {
  filter: none !important;
}

.y-accessibility-stop-flickering * {
  animation: none !important;
}

#y-accessibility-reset {
  width: calc(100% - 20px) !important;
  margin: 10px !important;
  min-height: 50px !important;
}

.y-accessibility-button-active {
  background-color: #006dd5 !important;
  color: white;
}

.y-accessibility-button-active * {
  color: white !important;
  fill: white !important;
}

#y-accessibility-credits {
  font-size: 13px;
  margin-bottom: 50px;
}

#y-accessibility-credits a {
  color: #006dd5;
}

.y-accessibility-checkmark {
  color: yellow !important;
  background-color: #008700 !important;
  position: absolute;
  right: 3px;
  top: 0px;
  border-radius: 50%;
  border: 2px solid white;
  width: 20px;
  height: 20px;
  font-size: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.y-accessibility-simple-font {
  font-family: "Arial", sans-serif !important;
}

.y-accessibility-alt-text {
  position: absolute;
  background-color: #000;
  border: 2px solid red;
  color: yellow;
  padding: 10px;
  border-radius: 5px;
  z-index: 9999;
  font-size: 16px;
}

body.y-accessibility-big-cursor {
  cursor:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0 0 48 48'%3E%3Cpath fill='%23E0E0E0' d='M27.8,39.7c-0.1,0-0.2,0-0.4-0.1c-0.2-0.1-0.4-0.3-0.6-0.5l-3.7-8.6l-4.5,4.2C18.5,34.9,18.3,35,18,35c-0.1,0-0.3,0-0.4-0.1C17.3,34.8,17,34.4,17,34l0-22c0-0.4,0.2-0.8,0.6-0.9C17.7,11,17.9,11,18,11c0.2,0,0.5,0.1,0.7,0.3l16,15c0.3,0.3,0.4,0.7,0.3,1.1c-0.1,0.4-0.5,0.6-0.9,0.7l-6.3,0.6l3.9,8.5c0.1,0.2,0.1,0.5,0,0.8c-0.1,0.2-0.3,0.5-0.5,0.6l-2.9,1.3C28.1,39.7,27.9,39.7,27.8,39.7z'/%3E%3Cpath fill='%23212121' d='M18,12l16,15l-7.7,0.7l4.5,9.8l-2.9,1.3l-4.3-9.9L18,34L18,12 M18,10c-0.3,0-0.5,0.1-0.8,0.2c-0.7,0.3-1.2,1-1.2,1.8l0,22c0,0.8,0.5,1.5,1.2,1.8C17.5,36,17.8,36,18,36c0.5,0,1-0.2,1.4-0.5l3.4-3.2l3.1,7.3c0.2,0.5,0.6,0.9,1.1,1.1c0.2,0.1,0.5,0.1,0.7,0.1c0.3,0,0.5-0.1,0.8-0.2l2.9-1.3c0.5-0.2,0.9-0.6,1.1-1.1c0.2-0.5,0.2-1.1,0-1.5l-3.3-7.2l4.9-0.4c0.8-0.1,1.5-0.6,1.7-1.3c0.3-0.7,0.1-1.6-0.5-2.1l-16-15C19,10.2,18.5,10,18,10L18,10z'/%3E%3C/svg%3E")
      0 0,
    auto;
}

/* screen */

@media (max-width: 600px) {
  #y-accessibility-bar {
    width: 100%;
    max-width: 100%;
    padding: 10px;
  }
}