<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
select {
  // A reset of styles, including removing the default dropdown arrow
 appearance: none;
  // Additional resets for further consistency
 background-color: transparent; /* background-color: transparent; */
  border: none;
 padding: 0 1em 0 0;
  margin: 0;
 /* width: 10%;*/

  min-width: 15ch;
  max-width: 30ch;

  font-family: inherit;
  font-size: inherit;
   cursor: inherit;
 line-height: inherit;
}
select::-ms-expand {
  display: none;
}
select {
  // ...existing styles
  outline: none;
}
:root {
  --select-border: #777;
  --select-focus: blue;
  --select-arrow: var(--select-border);
}
.vertical-menu {
  width: 100%px;
  height: 45px;
  overflow-x: auto;
  overflow-y: hidden;
}
.vertical-menu a {
  background-color: #eee;
  color: black;
 /* display: block;*/
  padding: 2px;
  text-decoration: none;
}
.vertical-menu select {
  background-color: #eee;
  color: blue;
/*   display: block;
  padding: 92px;*/
  text-decoration: none;
}
.vertical-menu select {
  /*width: 15%;*/
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);color: blue;
  border-radius: 1.25em;
  padding: 0.05em 0.5em;
  font-size: 1.55rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #red;
  background-image: linear-gradient(to top, #FFD700, #eff 33%);
}
.vertical-menu a:hover {
  background-color: #ccc;
}
.vertical-menu a.active {
  background-color: #04AA6D;
  color: white;
}
@media (max-width: 640px) {
.vertical-menu {
  width: 100%px;
  height: 80%;
  overflow-y: hide;
}
.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}
.vertical-menu select {
  background-color: #eee;
  color: black;
  display: block;
  padding: 6px;
  text-decoration: none;
}
.vertical-menu select {
  width: 100%;
  min-width: 15ch;
  max-width: 80%; /*35ch;*/
  border: 1px solid var(--select-border);color: blue;

  border-radius: 1.25em;
  padding: 0.25em 0.5em;
  font-size: 1.55rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #red;
  background-image: linear-gradient(to top, #66f9f9, #eff 33%);
}
.vertical-menu a:hover {
  background-color: #ccc;
}
.vertical-menu a.active {
  background-color: #04AA6D;
  color: white;
}
}
/*
@media screen and (min-width: 769px) and (max-width: 1000px) {
.vertical-menu {
  width: 100%px;
  height: 230px;
  overflow-y: auto;
}
.vertical-menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}
.vertical-menu select {
  background-color: #eee;
  color: black;
  display: block;
  padding: 6px;
  text-decoration: none;
}
.vertical-menu select {
  width: 100%;
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);color: blue;
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;
  background-color: #red;
  background-image: linear-gradient(to top, #f966f9, #ffe 33%);
}
}*/
</style>