.operation{
    height:500px;
    width:300px;
    position: absolute;
    right:0;
    top:27vw;
    border:1px solid #000;
}
.myPalettepCss{
    width:17%;
    position: absolute;
    right:0;
    border: solid 1px black;
    height: 41.5vw;
    background:#000;
}
.cssDiagramp{
  border: solid 1px black;
  height:41.5vw;
  background:#000;
}
.activeul{
    height:36px;
    width:180px;
    background:rgba(63,155,253,0.2);
    position: absolute;
    left:20px;
    top:15px;
    z-index:666;
    color:#fff;
    border-radius:2px;
    border:1px solid #00B3FF;
    outline:none;
}
option{
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    height:36px;
    width:180px;
    background:rgba(63,155,253,0.2);
    border:1px solid rgba(0,179,255,1);
    color:#fff;
    border-radius:2px;
    outline:none;
}

.ctxmenu {
  display: none;
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 8px 0;
  z-index: 999;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
  list-style: none;
  background-color: #ffffff;
  border-radius: 4px;
}
.menu-item {
  display: block;
  position: relative;
  min-width: 60px;
  margin: 0;
  padding: 6px 16px;
  font: bold 12px sans-serif;
  color: rgba(0, 0, 0, .87);
  cursor: pointer;
}
.menu-item::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.menu-item:hover::before {
  opacity: .04;
}
.menu .menu {
  top: -8px;
  left: 100%;
}
.show-menu, .menu-item:hover  .ctxmenu {
  display: block;
  opacity: 1;
}