
#svgMenu {
  background: #52525222;
  /* border: 1px solid black; */
  display: none;
  height: 96vh;
  left: 2vw;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  stroke-linecap: round;
  stroke-linejoin: round;
  top: 2vh;
  transition-duration: 1.2s;
  width: 96vw;

}



#blueRect{ pointer-events: all; z-index: 1;}



.button {

}
.btnsInner { pointer-events: none;}

.menuItems {
  transition-duration: 3.0s;
  transition-timing-function: cubic-bezier(0.2, 1.7, 0.4, 0.9);
}

#gBtnPlans {
  position: absolute;
  transform: translate(20%, 60%) scale(.6);;
}


#gMenu {
  transition-duration: 3s;
  transition-timing-function: ease-in-out;
  pointer-events: all;
}

@keyframes cirMcOuterDwd52Spinner {
      0% {transform: rotate3d(0,1,0,180deg);}
    100% {transform: rotate3d(0,1,0,0deg);}
          /* 0% {transform: rotate3d(0,1,0,90deg);} */
         /* 50% {transform: rotate3d(-1,1,0,90deg);} */
        /* 100% {transform: rotate3d(1,-1,0,90deg);} */
}
@keyframes cirMcInnerDwd52Spinner {
      0% {transform: rotate3d(-1,1,0,180deg);}
    100% {transform: rotate3d(-1,1,0,0deg);}
}
@keyframes cirMcSmallSpinner {
      0% {transform: rotate3d(1,-1,0,180deg);}
    100% {transform: rotate3d(1,-1,0,0deg);}
}

#gDwd52 {
  border: none;
  /* display: none; */
  left: 0px;
  position: absolute;
  top: 0px;
}
#gDwd52:hover { stroke: #2229; }
#cirMcOuterDwd52{
 animation: cirMcOuterDwd52Spinner linear 2.1s infinite alternate;
}
#cirMcInnerDwd52 {
 animation: cirMcInnerDwd52Spinner linear 1.9s infinite alternate;
}
#cirMcSmall {
 animation: cirMcSmallSpinner linear 1.7s infinite alternate;
}
#cirMiArchitecture:hover {fill: var(--cCarolinaBlue); stroke: var(--cWhite);}
#cirMiArt:hover {fill: var(--cCadetBlue); stroke: var(--cHotPink);}
#cirMiFurniture:hover {fill: var(--cPaleOrange); stroke: var(--cGoldenRod);}
#cirMiMusic:hover {fill: var(--cLilac);  stroke: var(--cMauve);}
#cirMiWritings:hover {fill: var(--cTan);  stroke: var(--cPaleOrange);}


.subMenuItems:hover{
  fill: #1f2ff27a;
  stroke-width: .9%;
}
.subMenuItems {
  opacity: 1;
  transition-property: all;
  transition-duration: 1.2s;
}
#gMsiArchitecture {
  opacity: 0;
}

#btnMsiABC {fill: var(--cTan);  stroke: var(--cPaleOrange);}
#btnMsiDEF {fill: var(--cTan);  stroke: var(--cPaleOrange);}
#btnMsiGHI {fill: var(--cTan);  stroke: var(--cPaleOrange);}
#btnMsiCFQ {fill: var(--cTan);  stroke: var(--cPaleOrange);}
#btnMsiTRM {fill: var(--cTan);  stroke: var(--cPaleOrange);}






#gMsMenuWritings {
  /* fill: var(--cTan);  stroke: var(--cPaleOrange); */
}

#gMsiABC {
  /* transform: translate(50%, 50%); */
}


#divPassword {
  background: purple;
  border-radius: 3vw;
  border: .8vmax solid lightblue;
  height: 27vmin;
  left: 10vw;
  opacity: .9;
  position: absolute;
  top: 20vh;
  width: 60vw;
}
#pPassword {
  /* border: 1px solid black; */
  color: #f2f2f2f2;
  font-size: 3vmax;
  /* height: 2em; */
  left: 3vw;
  position: relative;
  top: 1vh;
  /* width:3em; */
}
#imgHidePassword {
  /* border: 1px solid red; */
  height: 6vh;
  left: 70%;
  position: relative;
  top: -4vh;
  width: 8vw;
}
#imgShowPassword {
  display: none;
  height: 6vh;
  left: 70%;
  position: relative;
  top: -4vh;
  width: 8vw;
}
#pPassword2 {
  /* border: 1px solid green; */
  color: #a2a2a2f2;
  font-size: medium;
  /* height: 1em; */
  left: 5vw;
  position: relative;
  top: -1.5vh;
  width:60em;
}
#inpPassword {
  font-size: 3vh;
  left: 3vw;
  height: 8vh;
  position: relative;
  width: 30vw;
  top: 4vh;
}
#inpMaskedPassword {
  display: none;
  font-size: 3vh;
  left: 3vw;
  height: 8vh;
  position: relative;
  width: 30vw;
  top: 4vh;
}


#divBtn {
  position: relative;
  top: 4vh;
  left: .5vw;
}

#btnOk:hover {
  color: #2f2f2f2f;
}
#btnOk {
  background: linear-gradient(90deg, lightgreen, #66B075);
  border: 2px solid #0C4E3A;
  font-size: larger;
  height: 8vh;
  left: 10vw;
  position: relative;
  color: #f2f2f2f2;
  top: 5vh;
  width: 15vw;
}
#btnCancel:hover {
  color: #f2f2f2f2;
}
#btnCancel {
  background: linear-gradient(90deg, #E97277, pink);
  border: 2px solid #831E26;
  font-size: larger;
  color: #2f2f2f2f;
  height: 8vh;
  left: 1vw;
  position: relative;
  top: 5vh;
  width: 15vw;
}
