.hamburger-icon {
  position: relative;
  z-index: 2;
  top: 1vh;
  left: .5vh;
  width: 34px;  /*3vh;*/
}

.hamburger-icon span {
  height: 4px;    /*.3vh;*/
  width: 32px;     /* 2.4vh; */
  background-color: var(--textColor);
  display: block;
  margin: 4px 0 4px 0;
  transition: 0.7s ease-in-out;
  transform: none;
}

input.hamburger-checkbox {
  position: absolute;
  z-index: 3;
  top: 1vh;
  left: 1.5vh;
  width: 2vh;
  opacity: 0;
  height: 3vh;
}

#openmenu:checked ~ .menu-pane {
  left: 0;
  top: 1vh;
  transform: translateX(0);
}

#openmenu:hover ~ .hamburger-icon span {
  background-color: var(--shadowColor);
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(2) {  
  background-color: var(--menuTxtColor);
  transform: translate(0%, 175%) rotate(-45deg);
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(3) {  
  background-color: var(--menuTxtColor);
  transform: rotate(45deg);
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(1) {  
  background-color: var(--menuTxtColor);
  opacity: 0;
}

#openmenu:checked ~ .hamburger-icon span:nth-of-type(4) {  
  background-color: var(--menuTxtColor);
  opacity: 0;
}

div.menu-pane {
  border: thin #dddddd solid;
  position: absolute;
  transform: translateX(-105vh);
  transform-origin: (0, 0);
  /*width: 28vh;*/
  transition: 0.6s ease-in-out;
  background-image: linear-gradient(to bottom right, #000000, var(--menuBkgColor));
  z-index: 1;
}

.menu-pane nav {
  padding: var(--scrollableTop) 1.5vh 1.5vh 1vh;
  font-size: var(--fontSize);
}

.section {
  position: static;
  display:  block;
  color: var(--menuTxtColor);
  border-bottom: thin var(--menuTxtColor) solid;
  margin: 0 0 2vh 0;
  width: 23.5vh;
  height: 1.6vh;
  padding: 1vh 1vh .75vh 0;
}

.section p {
  color: var(--menuTxtColor);
  margin: 0;
  text-align: left;
}

nav form {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  position: static;
}

@scope (#kwdform) {
 input:nth-of-type(1) {
   width: 20.5vh;
   font-size: var(--fontSize);
 }

 input:nth-of-type(2) {
   width: 3vh;
   font-size: var(--fontSize);
   color: var(--menuBkgColor);
   background-color: var(--menuTxtColor);
 }
}

nav > a {
  color: var(--menuTxtColor);
  display: block;
  text-decoration: none;
  text-align: left;
  padding-bottom: 2vh;
  font-size: var(--fontSize);
  text-shadow: none;
}

nav > a img {
  height: 2.5vh;
  padding: 0 1vh 0 0;
  vertical-align: text-bottom;
}

nav > a span {
   padding-bottom: .5vh;
}

nav label {
  color: var(--menuTxtColor);
  display: block;
  text-align: left;
  padding: 0 0  0 .5vh;
}

label input {
   float: right;
   margin: 1vh 2vh 0 0;
   accent-color: black;
   /*transform: scale(1.5);*/
}

input[type="checkbox" i] {
   margin: 0 .5vh .5vh .5vh ;
}

div.opt {
  display: grid;
  /*background-color: var(--menuBkgColor);*/
  grid-template-columns: auto auto;
  grid-template-rows: 4vh 4vh 4vh 4vh 4vh 4vh ;
  gap: 1px;
  padding: 0;
}

.opt p {
   grid-column: 1 / span 2;
   margin: 0 0 0 .5vh;
   color: var(--menuTxtColor);
}

.opt input {
   accent-color: black;
} 

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}

.flex-container > div {
   height: 35px;
   width: 5vh;
   background-color: #666666;
   position: static;
   margin-bottom: 1.5vh;
   border-radius: 2vh;
   box-sizing: border-box;
}

#icon-l {
   height: 4vh;
   margin: .5vh 3vh 0 1.25vh;
}

#icon-r {
   height: 4vh;
   margin: .5vh 1.25vh 0 3vh;
}

#toggle-l {
   height: 4vh;
   margin: .5vh 3vh 0 1.25vh;
}

#toggle-r {
   height: 4vh;
   margin: .5vh 1.25vh 0 3vh;
}

#toggle-l {
   font-size: 2vh;
   margin: 0;
   text-decoration: none;
   /*height: var(--fontSize);
   position: relative;
   top: -.35vh;
   left: 0;*/
   opacity: 1;
   height: 2.6vh;
   border-radius: 2vh 0 0 2vh;
   background-color: #888888;
}

#toggle-r {
   font-size: 2vh;
   margin: 0;
   text-decoration: none;
   /*font-size: var(--fontSize);
   position: relative;
   top: -2.65vh;
   left: 1.5vh;*/
   opacity: 1;
   height: 2.6vh;
   border-radius: 0 2vh 2vh 0;
   background-color: #888888;
}
/*
#toggle-l:hover {
   opacity: 1;
}

#toggle-l:hover + a {
   opacity: 0;
}

#toggle-r:hover {
   opacity: 1;
}

#toggle-l:has(+ a:hover) {
   opacity: 0;
}
*/
.subopt {
   padding-left: 2vh;
}
