@media (max-width: 760px) {
  html body .select {
    position: fixed !important;
  }

  html body .select > .middle {
    left: auto !important;
    right: 47px !important;
    top: 50% !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: calc(100vw - 170px) !important;

    transform: translateY(-50%) !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 4px !important;

    z-index: 1001 !important;
    overflow: visible !important;
  }

  html body .select > .middle > button {
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
  }

  html body .select > .right {
    right: 5px !important;
    z-index: 1003 !important;
  }
}

@media (max-width: 390px) {
  html body .select > .middle {
    right: 42px !important;
    gap: 2px !important;
    max-width: calc(100vw - 150px) !important;
  }

  html body .select > .middle > button {
    flex-basis: 31px !important;
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}


@media (hover: none) and (pointer: coarse) {
  html body .select > .middle,
  html body .select > .middle > button,
  html body .select > .middle > button:hover {
    transform: translateY(-50%) !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  html body .select > .middle > button:hover {
    box-shadow: none !important;
  }
}