html .SettingsPanel {
    display: block;
    position: absolute;
    width: 100%;
    color: var(--colors-fg);
    background-position: center;
    background-size: cover !important;
    padding-top: 2.5rem;
  }
  
  .SettingsPanel-Container {
    overflow: auto;
    width: 100%;
    height: fit-content;
    position: relative;
    color: var(--colors-fg);
    padding: 4rem 3rem !important;
    display: block;
    user-select: auto;
    pointer-events: auto;
    box-sizing: border-box;
  }

  /* removing too much empty space on game controls panel - #8811 */
  /* [data-panel="GameControls"] {
    padding: 4em 0 !important;
    justify-content: flex-start !important;
  } */
  .SettingsPanel {
    background: url("../../media/global/img/backgrounds/admin-screen-bg-2.jpg") 0 0 no-repeat !important;
    background-size: cover !important;
  }
  [data-layout="toy-on-screen"] .SettingsPanel {
    padding-top: calc(1.5in + 10rem);
    background: url("../../media/global/img/backgrounds/admin-screen-bg-2.jpg") !important;
    /* background-position: center; */
    background-position: top left;
    background-size: cover !important;
  }
  [data-layout="toy-on-screen"] .SettingsPanel:before {
    content: "";
    z-index: 200;
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: calc(1.5in + 20rem);
    background: red;
    background: url("../../media/global/img/backgrounds/admin-screen-bg-2.jpg");
    background-position: top left;
    /* background-size: cover !important; */
    background-size: 100rem 100rem;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8rem);
    mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 8rem);
    -webkit-mask-size: cover;
    mask-size: cover;
}

  [data-layout="toy-on-screen"] .SettingsPanel-Container {
    padding-top: 1.5in;
    /* position: fixed !important; */
    /* top: 40% !important; */
    /* height: 55svh !important; */
    /* border: 2px solid red !important; */
    /* overflow-y: scroll; */
  }

  [data-layout="toy-on-screen"] .ui-dialogs-settings.ui-buttons-circle-button {
    top: calc(45% - 1.125in) !important;
}
  
  .SettingsPanel-Container ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  .SettingsPanel-Container li {
    display: block;
  }

  .SettingsPanel-Container h1,
  .SettingsPanel-Container h2,
  .SettingsPanel-Container p {
    margin-bottom: 0;
    color: var(--colors-fg);
  }
  
  .SettingsPanel-Container h1 {
    font-size: 3.25rem;
    padding: 2rem 0;
  }
  
  .SettingsPanel-Container h2 {
    margin-top: 2.2vh;
  }
  
  .SettingsPanel-Container p {
    font-size: clamp(16px, 1.8vmax, 1.8vmax);
    margin-top: 0.5rem;
    margin-bottom: 2rem !important; 
  }
  
  
  .SettingsPanel-Container button {
    width: 100%;
    text-align: left;
    position: relative;
    padding: 2.25rem 0 !important;
    padding-left: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--colors-fg);
    margin: 0;
    margin-top: -0.25rem !important;
  }

  .SettingsPanel-Container ul li button.withUnderline {
    position: relative !important;
    width: 100% !important;
  }

  .SettingsPanel-Container ul li button.withUnderline::after {
    content: "";
    position: absolute;
    bottom: 0 !important;
    left: 0;
    width:100%;
    height: 0.2rem !important;
    border-radius: none !important;
    background: var(--colors-fg) !important;
  }
 

  .SettingsPanel button.withChevron::before {
    content: ' ';
    display: inline-block;
    border-bottom: 0.25rem solid var(--colors-fg) !important;
    border-right: 0.25rem solid var(--colors-fg) !important;
    height: 1rem !important;
    width: 1rem !important;
    transform: rotate(-45deg);
    position: absolute;
    right: 1rem !important;
    top: 3rem !important;
  }

  .SettingsPanel-Container button a {
    color: var(--colors-fg);
    text-decoration: none;
  }

  .SettingsPanel li {
    padding: 0.2rem 0;
  }
  
  /* .uTopMargin25 {
    margin-top: 25px;
  } */
  
  .SettingsPanel-Container .toggle-switch-label {
    font-weight: bold;
    color: #fff;
  }
  
  .SettingsPanel-Container .toggle-switch {
    /* background: linear-gradient(180deg, var(--colors-tertiary-90) 0%, var(--colors-tertiary-100) 30%) !important;    color: var(--colors-fg); */
    /* outline: 1.5px solid var(--colors-cta-border); */
    border-width: 0.333rem;
    border-style: solid;
    /* border-color: var(--colors-cta-border); */
    margin: 1rem 0 2rem 0;
    width: 100%;
    padding: 2rem 0;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  
  .SettingsPanel .A11y-Menu {
    background-color: transparent;
  }

  /* .SettingsPanel-Container .toggle-switch span.slider {
    border: 1.5px solid var(--colors-cta-border);
  } */

  .SettingsPanel-Container .toggle-switch span.slider:before {
    /* background: var(--colors-cta-border); */
    /* background: linear-gradient(0deg, var(--colors-gradient-volume-slider-thumb-end) 0%, var(--colors-gradient-volume-slider-thumb-middle3)  25%, var(--colors-gradient-volume-slider-thumb-middle2)  50%, var(--colors-gradient-volume-slider-thumb-middle1)  75%, var(--colors-gradient-volume-slider-thumb-start)  100%) !important; */
  }

  .SettingsPanel-Container .toggle-switch input:checked + .slider {
    /* background-image: linear-gradient(0deg, var(--colors-gradient-primary-stop) 0%, var(--colors-gradient-primary-middle) 50%, var(--colors-gradient-primary-start) 100%) !important; */
    /* background-repeat: no-repeat !important;  */
  }

  /* styling volume slider */


  .SettingsPanel li[data-item-name="VolumeControls"] {
    padding: 2.25rem 2rem 2rem 2rem;
    border-radius: 5px;
    margin-top: 1.5rem;
  }

  #VolumeSlider {
    padding: 1em 0 0 0 !important;
  }



  /* input.volume-range {
    -webkit-appearance: none;
    height: 0.4rem;
    border-radius: 5px;
    background: #091592;
    outline: none;
    padding: 0;
    margin: 0 10px;

  }

  input.volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #091592;
    cursor: pointer;
    border: 1px solid var(--colors-fg);
  } */

  button.volume-down {
    position: relative;
    top: 0.125rem;
    content: '';
    background-size: contain !important;
    width: 3rem !important;
    height: 3rem !important;
    z-index: 101;
  }

  button.volume-down:before {
    content: "";
    z-index: 9;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    -webkit-mask-size: 100% 100% !important;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC40MzMyIDQuMDk4NzFDMTAuNzc5NyA0LjI2NTIzIDExIDQuNjE1NiAxMSA1LjAwMDAxVjE5QzExIDE5LjM4NDQgMTAuNzc5NyAxOS43MzQ4IDEwLjQzMzIgMTkuOTAxM0MxMC4wODY3IDIwLjA2NzggOS42NzU0OCAyMC4wMjEgOS4zNzUzMSAxOS43ODA5TDQuNjQ5MjIgMTZIMUMwLjQ0NzcxNSAxNiAwIDE1LjU1MjMgMCAxNVY5LjAwMDAxQzAgOC40NDc3MiAwLjQ0NzcxNSA4LjAwMDAxIDEgOC4wMDAwMUg0LjY0OTIyTDkuMzc1MzEgNC4yMTkxNEM5LjY3NTQ4IDMuOTc5IDEwLjA4NjcgMy45MzIxOSAxMC40MzMyIDQuMDk4NzFaTTkgNy4wODA2M0w1LjYyNDY5IDkuNzgwODhDNS40NDczOCA5LjkyMjczIDUuMjI3MDcgMTAgNSAxMEgyVjE0SDVDNS4yMjcwNyAxNCA1LjQ0NzM4IDE0LjA3NzMgNS42MjQ2OSAxNC4yMTkxTDkgMTYuOTE5NFY3LjA4MDYzWk0xNS4yOTI5IDguMjkyOUMxNS42ODM0IDcuOTAyMzggMTYuMzE2NiA3LjkwMjM4IDE2LjcwNzEgOC4yOTI5TDE5IDEwLjU4NThMMjEuMjkyOSA4LjI5MjlDMjEuNjgzNCA3LjkwMjM4IDIyLjMxNjYgNy45MDIzOCAyMi43MDcxIDguMjkyOUMyMy4wOTc2IDguNjgzNDMgMjMuMDk3NiA5LjMxNjU5IDIyLjcwNzEgOS43MDcxMkwyMC40MTQyIDEyTDIyLjcwNzEgMTQuMjkyOUMyMy4wOTc2IDE0LjY4MzQgMjMuMDk3NiAxNS4zMTY2IDIyLjcwNzEgMTUuNzA3MUMyMi4zMTY2IDE2LjA5NzYgMjEuNjgzNCAxNi4wOTc2IDIxLjI5MjkgMTUuNzA3MUwxOSAxMy40MTQyTDE2LjcwNzEgMTUuNzA3MUMxNi4zMTY2IDE2LjA5NzYgMTUuNjgzNCAxNi4wOTc2IDE1LjI5MjkgMTUuNzA3MUMxNC45MDI0IDE1LjMxNjYgMTQuOTAyNCAxNC42ODM0IDE1LjI5MjkgMTQuMjkyOUwxNy41ODU4IDEyTDE1LjI5MjkgOS43MDcxMkMxNC45MDI0IDkuMzE2NTkgMTQuOTAyNCA4LjY4MzQzIDE1LjI5MjkgOC4yOTI5WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzE3MzBfNTYzOSkiLz4KPGRlZnM+CjxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhcl8xNzMwXzU2MzkiIHgxPSIxMS41IiB5MT0iNCIgeDI9IjExLjUiIHkyPSIyMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjcxODc1IiBzdG9wLWNvbG9yPSIjQ0NDQ0ZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0VERURGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=)
  }
  
  button.volume-up {
    position: relative;
    top: 0.125rem;
    content: '';
    background-size: contain !important;
    width: 3rem !important;
    height: 3rem !important;
    z-index: 101;

  }

  button.volume-up:before {
    content: "";
    z-index: 9;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    -webkit-mask-size: 100% 100% !important;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xOC4zNjMgNC4yMjI5NkMxOC43NTM2IDMuODMyNSAxOS4zODY3IDMuODMyNTkgMTkuNzc3MiA0LjIyMzE4QzIxLjgzOTQgNi4yODU5OCAyMi45OTc5IDkuMDgzMzcgMjIuOTk3OSAxMi4wMDAyQzIyLjk5NzkgMTQuOTE3IDIxLjgzOTQgMTcuNzE0NCAxOS43NzcyIDE5Ljc3NzJDMTkuMzg2NyAyMC4xNjc4IDE4Ljc1MzYgMjAuMTY3OSAxOC4zNjMgMTkuNzc3NEMxNy45NzI0IDE5LjM4NjkgMTcuOTcyMyAxOC43NTM4IDE4LjM2MjggMTguMzYzMkMyMC4wNSAxNi42NzU0IDIwLjk5NzkgMTQuMzg2NyAyMC45OTc5IDEyLjAwMDJDMjAuOTk3OSA5LjYxMzcgMjAuMDUgNy4zMjQ5MiAxOC4zNjI4IDUuNjM3MThDMTcuOTcyMyA1LjI0NjU5IDE3Ljk3MjQgNC42MTM0MyAxOC4zNjMgNC4yMjI5NlpNMTEuNDMzMiA0LjA5ODg3QzExLjc3OTcgNC4yNjUzOSAxMiA0LjYxNTc3IDEyIDUuMDAwMThWMTkuMDAwMkMxMiAxOS4zODQ2IDExLjc3OTcgMTkuNzM1IDExLjQzMzIgMTkuOTAxNUMxMS4wODY3IDIwLjA2OCAxMC42NzU1IDIwLjAyMTIgMTAuMzc1MyAxOS43ODFMNS42NDkyMiAxNi4wMDAySDJDMS40NDc3MiAxNi4wMDAyIDEgMTUuNTUyNSAxIDE1LjAwMDJWOS4wMDAxOEMxIDguNDQ3ODkgMS40NDc3MiA4LjAwMDE4IDIgOC4wMDAxOEg1LjY0OTIyTDEwLjM3NTMgNC4yMTkzMUMxMC42NzU1IDMuOTc5MTcgMTEuMDg2NyAzLjkzMjM1IDExLjQzMzIgNC4wOTg4N1pNMTAgNy4wODA4TDYuNjI0NjkgOS43ODEwNEM2LjQ0NzM4IDkuOTIyOSA2LjIyNzA3IDEwLjAwMDIgNiAxMC4wMDAySDNWMTQuMDAwMkg2QzYuMjI3MDcgMTQuMDAwMiA2LjQ0NzM4IDE0LjA3NzUgNi42MjQ2OSAxNC4yMTkzTDEwIDE2LjkxOTZWNy4wODA4Wk0xNC44MzMgNy43NTI5NkMxNS4yMjM2IDcuMzYyNSAxNS44NTY3IDcuMzYyNTkgMTYuMjQ3MiA3Ljc1MzE4QzE3LjM3MiA4Ljg3ODM0IDE4LjAwMzkgMTAuNDA0MiAxOC4wMDM5IDExLjk5NTJDMTguMDAzOSAxMy41ODYyIDE3LjM3MiAxNS4xMTIgMTYuMjQ3MiAxNi4yMzcyQzE1Ljg1NjcgMTYuNjI3OCAxNS4yMjM2IDE2LjYyNzkgMTQuODMzIDE2LjIzNzRDMTQuNDQyNCAxNS44NDY5IDE0LjQ0MjMgMTUuMjEzOCAxNC44MzI4IDE0LjgyMzJDMTUuNTgyNyAxNC4wNzMxIDE2LjAwMzkgMTMuMDU1OCAxNi4wMDM5IDExLjk5NTJDMTYuMDAzOSAxMC45MzQ1IDE1LjU4MjcgOS45MTcyOSAxNC44MzI4IDkuMTY3MThDMTQuNDQyMyA4Ljc3NjU5IDE0LjQ0MjQgOC4xNDM0MyAxNC44MzMgNy43NTI5NloiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8xNzMwXzU2NTApIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMTczMF81NjUwIiB4MT0iMTEuOTk4OSIgeTE9IjMuOTMwMTgiIHgyPSIxMS45OTg5IiB5Mj0iMjAuMDcwMiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjAuNjcxODc1IiBzdG9wLWNvbG9yPSIjQ0NDQ0ZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0VERURGRiIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=)  
}
  
  input[type=range].volume-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 1rem;
    margin: 0 10px !important;
  }
  
  input[type=range].volume-range:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0px 7px var( --colors-fg);
  }
  
  
  input[type=range].volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%; 
    cursor: pointer;
    background: var(--colors-fg);
    /* border: 1.5px solid var(--colors-fg); */
    /* background: linear-gradient(0deg, var(--colors-gradient-volume-slider-thumb-end) 0%, var(--colors-gradient-volume-slider-thumb-middle3)  25%, var(--colors-gradient-volume-slider-thumb-middle2)  50%, var(--colors-gradient-volume-slider-thumb-middle1)  75%, var(--colors-gradient-volume-slider-thumb-start)  100%); */
    border-width: 0.333rem;
    border-style: solid; 
    border-color: #fff; 
  }
  input[type=range].volume-range::-moz-range-thumb {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%; 
    cursor: pointer;
  }


  .a11y-controls-list p {
    margin: 0 !important;
  }
  
  /* .SettingsPanel-Container ul li:nth-child(4) button, */
  /* .SettingsPanel-Container ul li:nth-child(5) button */
  /* .SettingsPanel-Container ul li:nth-child(6) button,
  .SettingsPanel-Container ul li:nth-child(7) button */
  /* {
    position: relative;
    width: max-content;
    font-size: 2.25rem;
    font-style: italic;
    text-decoration: underline;
  } */

  /* .SettingsPanel-Container ul li:nth-child(4) button:before,
  .SettingsPanel-Container ul li:nth-child(5) button:before,
  .SettingsPanel-Container ul li:nth-child(6) button:before,
  .SettingsPanel-Container ul li:nth-child(7) button:before {
    content: "";
    position: absolute;
    top: 65%;
    left: 0;
    width: 100%;
    height: 0.75px;
    display: block;
    background: #fff;
  } */


html[style*="font-size"] {
  /* border: 2px solid red; */
}
html[style*="font-size"] .ui-dialogs-settings.ui-buttons-circle-button {
  width: 6.5rem !important;
  height: 6.5rem !important;
}

[id*="radix"] {
  border: 2px solid red;
}

  .slider.round {
  border-radius: 5rem !important;
  }
  
  [id*="radix"] {
  border: none !important;
  }
  .switch-container {
    width: 48px !important;
    height: 28px !important;
    margin: 0.5rem 2rem !important;
  }
  
  .slider:before {
    width: 16px !important;
    height: 16px !important;
    left: 2.5px !important;
    transition: 0.3s !important;
  }
  
  
  input:checked + .slider:before {
    transform: translateX(19.5px)  !important;
    transition: 0.3s !important;
  }

  /* iPad 9th gen ... */
  @media only screen and (min-device-width: 810px) and (max-device-width: 1080px) {
    .switch-container {
      width: 5.5rem !important;
      height: 3.5rem !important;
      margin: 0.5rem 2rem !important;
      }
      
      .slider:before {
        width: 2rem !important;
        height: 2rem !important;
        left: 0.125rem !important;
      transition: 0.3s !important;
      }
      
      
      input:checked + .slider:before {
      transform: translateX(22px)  !important;
      }
  }