/* Burger Menu */
#menuBurger a,
div.dropup-content a {
  text-decoration: none;
  color: var(--main-ft-color);
  align-items: center;
  height: 3rem;
  padding-left: 1rem;
  /* transition: color 0.3s ease; */
}

#menuToggle h1{
  font-size: 15px;
  margin-top: unset;
  margin-bottom: unset;
  line-height: unset;
  font-weight: unset;
}

#menuBurger,
#menuToggle .userType,
#menuToggle .topBlock,
#menuToggle .bottomBlock{
  font-family: var( --common-font-RM);
}
#menuToggle .userType, 
#menuToggle .topBlock,
#menuToggle .bottomBlock{
  font-size: 16px;
}
#menuToggle a:hover
{
  color: var(--hover-ft-color);
}

#menuToggle
{
  display: block;
  position: absolute;
  top: 13px;
  left: 17px;

  z-index: 100;

  -webkit-user-select: none;
  user-select: none;
}
#menuToggle input
{
  display: block;
  width: 40px !important;
  height: 32px;
  position: absolute;
  top: 0px;
  right: -10px;


  cursor: pointer !important;

  opacity: 0; /* hide this */
  z-index: 5; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
 * Span hamburger
 */
#menuToggle span
{
  top: 12px;
  display: block;
  /* width: 33px;
  height: 4px;
  margin-bottom: 5px; */
  width: 25px;
  height: 2px;
  margin-bottom: 4.2px;
  position: relative;

  background: var(--hover-ft-color) !important;
  border-radius: 3px;

  z-index: 3;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--main-ft-color) !important;
}

/*
 * hide the middle one.
 */
#menuToggle input:checked ~ span.snd
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 *the last one should go the other direction
 */
#menuToggle input:checked ~ span.thd
{
  opacity: 1;
  transform: rotate(-45deg) translate(0, -3.8px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menuBurger{
  position: absolute;
  border-bottom-right-radius: 10px 10px;
  width: 310px;
  margin: -100px 0 0 0;
  height: 436px;
  margin-top: -31px;
  padding-top: 88px;
  left: -17px;
  padding-left:0;
  padding-right:0;
  background:  var(--main-bg-color);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;
  transform: translate(-100%, 0);

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
#menuBurger img{
  height: 24px;
  margin-left: 0.5em;
  margin-right: 0.5em;
}
#menuBurger li{
  font-size: 18px;
  font-family: var(--common-font-RM);
  margin-top: 0.2em;
}
#menuToggle ul li.active {
    color: var(--hover-ft-color);
    background-color: unset;
}

#menuToggle .topBlock,
#menuToggle .bottomBlock,
#menuToggle hr{
    position: absolute;
    z-index: 3;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle .topBlock{
  left: -17px;
  width: 310px;
  top: 5px;
  justify-content: space-between;
  align-items: center;
}

#menuToggle .topBlock .logoBurger {
  margin-left: 6.3em;
}

#menuToggle .helper img:hover {
    cursor: pointer;
}

#menuToggle .helper img,
#menuToggle .dropup-content img,
#menuToggle .dropUpbtn img,
#menuToggle a img{
  filter: var(--main-imgColor);
}
#menuToggle .dropup-content img:hover,
#menuToggle .dropUpbtn img:hover,
#menuToggle .helper img:hover,
#menuToggle a:hover img {
  filter: var(--hover-imgColor)
}
#menuToggle .helper img.active{
  filter: invert(24%) sepia(62%) saturate(3554%) hue-rotate(209deg) brightness(106%) contrast(82%);
}
#menuToggle ul a img,
#menuToggle .logout img{
  filter: var(--icon-imgColor);
}
#menuToggle ul a img:hover,
#menuToggle .logout img:hover,
#menuToggle a img.active {
  filter: var(--hover-icon-imgColor)
}

#menuToggle a:hover:not(.logout a) img {
  filter: none;
}

#menuToggle hr{
  margin: unset;
}

#menuToggle hr.bottom{
  top: 450px;
  width: 310px;
  left: -17px;
  height: 1px;
  border-bottom: none;
  border-left: none;
  border-right: none;
}

#menuToggle .userType{
  color: var(--main-ft-color);
  padding-right: 1rem;
  margin-top: 0.2em;
}
#menuToggle .helper,
#menuToggle .logout{
  margin-right: 1rem;
}
#menuToggle .logout img:hover {
    cursor: pointer;
}

#menuToggle .bottomBlock{
  top: 450px;
  width: 310px;
  left: -17px;
  justify-content: space-between;
  align-items: center;
}

#menuToggle .bottomBlock .rightBlock {
  align-items: center;
}
#menuToggle a:hover:not(.logout a) {
    color: var(--hover-ft-color);
}

/* Drop Up Power | Restart */
.dropUpbtn {
    color: var(--main-ft-color);
    width: 63px;
    font-size: 16px;
    border: none;
    height: 63px;
    background-color:transparent;
}

.dropUpbtn img {
  height: 21px;
}

.dropup {
    position: relative;
    display: inline-block;
}

.dropup-content {
    display: none;
    position: absolute;
    background-color: var(--main-bg-color);
    min-width: 183px;
    bottom: 63px;
    z-index: 1;
}

.dropup-content a {
  margin-left: 0.3rem;
}

.dropup-content a:hover {
    color: var(--hover-ft-color)
}

.dropup:hover .dropup-content {
    display: block;
}

.dropup-content img {
  height: 21px;
  padding-right: 0.5rem;
}

.dropup-content p {
  margin: 0;
}

.restart-powerOff-option:hover {
  color: black !important;
}
/*

 * Fade it in from the left
 */
#menuToggle input:checked ~ ul,
#menuToggle input:checked ~ h1,
#menuToggle input:checked ~ .topBlock,
#menuToggle input:checked ~ .bottomBlock,
#menuToggle input:checked ~ hr{
  transform: none;
  opacity: 1;
}

/* @media screen and (max-width: 768px) {
    #menuBurger {
    transform: none;
    opacity: 0;

    transition: opacity 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }
} */
/* End Burger Menu */