@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  margin:0px;
  font-family: 'Poppins', sans-serif;
  user-select: none;
  color: white !important;
}
#context-menu {
  transform: scale(0.0);
  -webkit-transform: scale(0.0);
  position:fixed;
  z-index:10000;
  min-width:160px;
  animation-name: opens;
  animation-duration: 1s;
  top: 50%;
  left: 50%;
  background-color: rgba(30, 30, 30, 0.898);
  transform-origin:top left;
  border-radius: 6px;
  list-style-type: none;
}

#context-menu.active {
  transform: scale(0.0);
  -webkit-transform: scale(0.0);
  animation: center-animate 0.16s normal forwards;
  transform: translateY(-50%) translateX(10%) !important;
}

@keyframes center-animate {
  0% {
    line-height: 0%;
  }
  100% {
    line-height: 1;
  }
}

@keyframe opens {
  from {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
    min-width:0px;
    width:0px;
  }

  to {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
    min-width:190px;
    width:190px;
  }
}

#context-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#context-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
  font-family: 'Poppins', sans-serif;
}
#context-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}
#context-menu hr {
  margin:2px 0px;
  border-color:#555;
}
/* 
-Door menu-
-----------
*/
#door-menu::after {
  /* This is the Submenu Arrow */
  content: "";
  position: absolute;
  right: 5px;
  border: 5px solid transparent;
  border-left-color: #fff;
  color: white;
}

#context-menu #door-menu:hover::after { border-left-color: #fff; }

#door-sub-menu{
  position:absolute;
  z-index:10000;
  width:160px;
  left: 100%;
  background-color: rgba(30, 30, 30, 0.898);
  transform:scale(0);
  list-style-type: none;
}
#door-sub-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#door-sub-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
  font-family: 'Poppins', sans-serif;
}
#door-sub-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}

.menu-item:hover > #door-sub-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0 ,-23px) scale(1);
  pointer-events: auto;
}





#window-menu::after {
  /* This is the Submenu Arrow */
  content: "";
  position: absolute;
  right: 5px;
  border: 5px solid transparent;
  border-left-color: #fff;
}

#context-menu #window-menu:hover::after { border-left-color: #fff; }

#window-sub-menu{
  position:absolute;
  z-index:10000;
  width:160px;
  left: 100%;
  background-color: rgba(30, 30, 30, 0.898);
  transform:scale(0);
  list-style-type: none;
}
#window-sub-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#window-sub-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
  font-family: 'Poppins', sans-serif;
}
#window-sub-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}

.menu-item:hover > #window-sub-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0 ,-23px) scale(1);
  pointer-events: auto;
}



#entercar-menu::after {
  /* This is the Submenu Arrow */
  content: "";
  position: absolute;
  right: 5px;
  border: 5px solid transparent;
  border-left-color: #fff;
}

#context-menu #entercar-menu:hover::after { border-left-color: #fff; }

#entercar-sub-menu{
  position:absolute;
  z-index:10000;
  width:160px;
  left: 100%;
  background-color: rgba(30, 30, 30, 0.898);
  transform:scale(0);
  list-style-type: none;
}
#entercar-sub-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#entercar-sub-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
  font-family: 'Poppins', sans-serif;
}
#entercar-sub-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}

.menu-item:hover > #entercar-sub-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0 ,-23px) scale(1);
  pointer-events: auto;
}





#neon-menu::after {
  /* This is the Submenu Arrow */
  content: "";
  position: absolute;
  right: 5px;
  border: 5px solid transparent;
  border-left-color: #fff;
}

#context-menu #neon-menu:hover::after { border-left-color: #fff; }

#neon-sub-menu{
  position:absolute;
  z-index:10000;
  width:160px;
  left: 100%;
  background-color: rgba(30, 30, 30, 0.898);
  transform:scale(0);
  list-style-type: none;
}
#neon-sub-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#neon-sub-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
  font-family: 'Poppins', sans-serif;
}
#neon-sub-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}

.menu-item:hover > #neon-sub-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0 ,-23px) scale(1);
  pointer-events: auto;
}
/* 
-Tow Menu-
----------
*/
#tow-menu::after {
  /* This is the Submenu Arrow */
  content: "";
  position: absolute;
  right: 5px;
  border: 5px solid transparent;
  border-left-color: #fff;
}

#context-menu #tow-menu:hover::after { border-left-color: #fff; }

#tow-sub-menu{
  position:absolute;
  z-index:10000;
  width:160px;
  left: 100%;
  background:#1b1a1a;
  transform:scale(0);
  list-style-type: none;
}
#tow-sub-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#tow-sub-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
}
#tow-sub-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}

.menu-item:hover > #tow-sub-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0, -23px) scale(1);
  pointer-events: auto;
}

/*
-Police Menu-
-------------
*/

#police-menu::after {
  /* This is the Submenu Arrow */
  content: "";
  position: absolute;
  right: 5px;
  border: 5px solid transparent;
  border-left-color: #fff;
}

#context-menu #police-menu:hover::after { border-left-color: #fff; }

#police-sub-menu{
  position:absolute;
  z-index:10000;
  min-width:160px;
  left: 100%;
  background-color: rgba(39,38,39,.9);
  transform:scale(0);
  list-style-type: none;
}
#police-sub-menu .menu-item {
  padding:8px 10px;
  font-size:15px;
  color:#eee;
}
#police-sub-menu .menu-item:hover {
  background: linear-gradient(90deg, rgba(66, 65, 66, 0.9) 0%, rgba(0,212,255,0) 100%);
  font-family: 'Poppins', sans-serif;
}
#police-sub-menu .menu-item i {
  display:inline-block;
  margin-right:5px;
}

.menu-item:hover > #police-sub-menu {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1);
  transform: translate(0 ,-23px) scale(1);
  pointer-events: auto;
}



#context-menu #steal:hover {
  background:rgb(255, 0, 0);
}
#context-menu #lockpick:hover {
  background:rgb(255, 0, 0);
}

#context-menu #context-menu {
  top: 4px;
  left: 99%;
}