#start-menu {
  display: none;

  position: absolute;

  left: 3px;
  bottom: 38px;

  width: 250px;
  height: 324px;

  background: #c0c0c0;

  border-top: 2px solid white;
  border-left: 2px solid white;

  border-right: 2px solid #202020;
  border-bottom: 2px solid #202020;

  z-index: 6000;
}

#start-menu.open {
  display: flex;
}

.start-menu-side {
  width: 34px;

  padding: 8px 5px;

  background: #000080;
  color: white;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  font-size: 17px;
  font-weight: bold;

  letter-spacing: 1px;
}

.start-menu-items {
  flex: 1;

  padding: 3px;
}

.start-item {
  height: 42px;

  padding: 0 5px;

  display: grid;

  grid-template-columns:
    34px
    1fr
    18px;

  align-items: center;

  font-size: 13px;

  cursor: pointer;
}

.start-item:hover {
  background: #000080;
  color: white;
}

.arrow {
  text-align: right;

  font-size: 10px;
}

.start-divider {
  height: 2px;

  margin: 5px 2px;

  border-top: 1px solid #808080;
  border-bottom: 1px solid white;
}
.has-submenu {
  position: relative;
}

.submenu {
  display: none;

  position: absolute;

  left: 100%;
  top: -3px;

  width: 190px;

  padding: 3px;

  background: #c0c0c0;

  border-top: 2px solid white;
  border-left: 2px solid white;

  border-right: 2px solid #202020;
  border-bottom: 2px solid #202020;
}

.has-submenu:hover .submenu {
  display: block;
}

.submenu-item {
  padding: 10px;

  color: black;

  font-size: 12px;

  cursor: pointer;
}

.submenu-item:hover {
  background: #000080;
  color: white;
}