/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

html {
  height: 100%;
  width: 100%;
}
body {
	background: #333;
  color: #bababa;;
	overflow: hidden;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
  height: 100%;
  width: 100%;
  margin: 0;
}
p {
  margin: 0;
}

/* Other */
.hide {
  visibility: hidden;
  opacity: 0;
}

*[disabled] {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  opacity: 0.7;
  pointer-events: none;
}

.purple-side {
  background: #5a4aade1;
}

.orange-side {
  background: #76453cdc;
}

.neutral-side {
  background: #7c7776de;
}

.base-side {
  background: #7c7776de;
}

.item-side {
  background: #7c7776de
}

.purple-mon {
  border: 2px solid #8473fd;
  border-radius: 50%;
  background-color: #594ba8ef;
  -webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	    transform: scaleX(-1);
  overflow-y: hidden
}

.orange-mon {
  border: 2px solid #e4825c;
  border-radius: 50%;
  background-color: #ca6e4a4d;
}

.neutral-mon {
  border: 2px solid #1e1e20;
  border-radius: 50%;
  background-color: #1b17316e;
}

.base-mon {
  width: 5.5vh;
  height: 5.5vh;
}

.bitem-mon {
  border: 2px solid #1e1e20;
  border-radius: 50%;
  background-color: #1b17316e;
}

.hitem-mon {
  border: 2px solid #1e1e20;
  border-radius: 50%;
  background-color: #1b17316e;
}

/* Map */
.map-container {
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transform-origin: 0px 0px;
      -ms-transform-origin: 0px 0px;
          transform-origin: 0px 0px;
  -webkit-transform: scale(1) translate(0px, 0px);
      -ms-transform: scale(1) translate(0px, 0px);
          transform: scale(1) translate(0px, 0px);
}

.map {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  margin: auto;
	width: 100%;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.canvas.drawing {
  pointer-events: initial;
}


/* Drag and drop */
.dropped {
  position: absolute;
  overflow: visible;
}

.dragging {
  position: fixed;
  z-index: 1000;
}

.base-mon.dropped {
  width: 10vh;
  height: 10vh;
  max-width: 4vw;
  max-height: 4vw;
}


/* Top Buttons */
.top-menu {
  position: fixed;
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  justify-items: end;
  width: 100vw;
  -ms-grid-columns: auto -webkit-min-content auto;
  -ms-grid-columns: auto min-content auto;
  grid-template-columns: auto -webkit-min-content auto;
  grid-template-columns: auto min-content auto;
}

.timer {
  font-size: xx-large;
  font-weight: bold;
  text-shadow: 2px 2px 1px black, 2px 1px 1px black;
  text-align: center;
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
}

.timer > * {
  margin: 5px;
}

.time {
  position: relative;
}

.time:hover {
  background: -webkit-gradient(linear, left top, right top, color-stop(22%, #8473fd), color-stop(23%, #e4825c), color-stop(46%, #e4825c), color-stop(47%, #8473fd), color-stop(57%, #8473fd), color-stop(58%, #e4825c), color-stop(80%, #e4825c), color-stop(80%, #8473fd));
  background: -o-linear-gradient(left, #8473fd 22%, #e4825c 23%, #e4825c 46%, #8473fd 47%, #8473fd 57%, #e4825c 58%, #e4825c 80%, #8473fd 80%);
  background: linear-gradient(90deg, #8473fd 22%, #e4825c 23%, #e4825c 46%, #8473fd 47%, #8473fd 57%, #e4825c 58%, #e4825c 80%, #8473fd 80%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  -webkit-filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 1));
          filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 1));
}

.dec-time:hover {
  color: #8473fd;
  cursor: pointer;
}

.inc-time:hover {
  color: #e4825c;
  cursor: pointer;
}

.btnholder {
  background: #0000008a;
	border-radius: 0 0 25% 25%;
  padding: 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.btnholder img {
  width: 30px;
  height: 30px;
}

.btnholder .zoombtn {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  text-align: center;
  vertical-align: middle;
  color: #bababa;
  font-size: 1em;
  padding: 5px;
	-webkit-transition: text-shadow 0.3s, opacity 0.2s;
	-o-transition: text-shadow 0.3s, opacity 0.2s;
	transition: text-shadow 0.3s, opacity 0.2s;
}

.zoombtn:hover {
	color: white;
  cursor: pointer;
}

.zoombtn.zoomin {
  color: white;
}


.reset-zoom:hover {
  -webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	    transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}


/* Drawing tools */
.drawtool {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}

.drawtool .selected {
  outline: 2px dashed #9e9e9e;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

.-tool-tool:hover {
  color: #fff;
}

.pencil-tool,
.draw-color,
.draw-size-tool,
.eraser-tool,
.undo-tool,
.redo-tool,
.text-tool {
  cursor: pointer;
}

.redo-tool {
  -webkit-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
          transform: scaleX(-1);
}

.pencil-tool:hover,
.eraser-tool:hover,
.undo-tool:hover,
.text-tool:hover {
  -webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	    transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.redo-tool:hover {
  -webkit-transform: scale(-1.1, 1.1);
	-ms-transform: scale(-1.1, 1.1);
	    transform: scale(-1.1, 1.1);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.draw-color::-webkit-color-swatch:hover {
  border-radius: 5px;
  -webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.draw-color {
  width: 30px;
  height: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
}
.draw-color::-webkit-color-swatch {
  border-radius: 10px;
  border: none;
}
.draw-color::-moz-color-swatch {
  border-radius: 10px;
  border: none;
}

/* Icon on bottom right corner */
.links {
  width: 8vw;
  border-radius: 5px 5px 0 0;
  position: fixed;
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  padding: 5px 2px 0px 2px;
  background: #000000a4;
  bottom: 0;
  right: 0;
}

.links > * {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.discord, 
.unitedb,
.help, 
.github {
  height: 1.3vw;
}

.help {
  cursor: pointer;
}

/* Tooltips */
.tooltip .tooltiptext {
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 10px;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover {
  cursor: pointer;
}

.tooltip-item {
  position: fixed;
  background-color: #555;
  padding: 5px;
  border-radius: 6px;
  color: #fff;
}

/* Category */
.purple-side.category {
  width: 20vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 2px solid #2d2d2d7a;
  border-radius: 0px 5px 5px 0px;
}

.orange-side.category {
  width: 20vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 2px solid #2d2d2d7a;
  -webkit-box-orient: horizontal;
  border-radius: 5px 0px 0px 5px;
}

.neutral-side.category {
  height: 15vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-left: 2px solid #2d2d2d7a;
  border-right: 2px solid #2d2d2d7a;
}

.base-side.category {
  height: 15vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-left: 2px solid #2d2d2d7a;
  border-right: 2px solid #2d2d2d7a;
}

.item-side.category {
  height: 12vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-left: 2px solid #2d2d2d7a;
  border-right: 2px solid #2d2d2d7a;
}
.item-side.category:first-child {
  border-right: 1px solid #2d2d2d7a;
}
.item-side.category:last-child {
  border-left: 1px solid #2d2d2d7a;
}

.category-name {
  width: 5vw;
  border-radius: 4px;
  font-weight: bold;
  color: #fff;
}

.purple-side .category-name {
  padding: 0 2.5vw 0 0.5vw;
}
.orange-side .category-name {
  padding: 0 0.5vw 0 2.5vw;
  text-align: right;
}
.neutral-side .category-name {
  padding: 0 2.5vw 0 0.5vw;
}
.base-side .category-name {
  padding: 0 2.5vw 0 0.5vw;
}
.item-side .category-name {
  padding: 0 2.5vw 0 0.5vw;
}

.purple-side .category-attacker {
  background: -o-linear-gradient(left, #d23927, #f37038);
  background: -webkit-gradient(linear, left top, right top, from(#d23927), to(#f37038));
  background: linear-gradient(90deg, #d23927, #f37038);
}
.orange-side .category-attacker {
  background: -o-linear-gradient(right, #d23927, #f37038);
  background: -webkit-gradient(linear, right top, left top, from(#d23927), to(#f37038));
  background: linear-gradient(270deg, #d23927, #f37038);
}

.purple-side .category-defender {
  background: -o-linear-gradient(left, #3ca90e, #baf565);
  background: -webkit-gradient(linear, left top, right top, from(#3ca90e), to(#baf565));
  background: linear-gradient(90deg, #3ca90e, #baf565);
}
.orange-side .category-defender {
  background: -o-linear-gradient(right, #3ca90e, #baf565);
  background: -webkit-gradient(linear, right top, left top, from(#3ca90e), to(#baf565));
  background: linear-gradient(270deg, #3ca90e, #baf565);
}

.purple-side .category-supporter {
  background: -o-linear-gradient(left, #be9100, #fcc834);
  background: -webkit-gradient(linear, left top, right top, from(#be9100), to(#fcc834));
  background: linear-gradient(90deg, #be9100, #fcc834);
}
.orange-side .category-supporter {
  background: -o-linear-gradient(right, #be9100, #fcc834);
  background: -webkit-gradient(linear, right top, left top, from(#be9100), to(#fcc834));
  background: linear-gradient(270deg, #be9100, #fcc834);
}

.purple-side .category-allrounder {
  background: -o-linear-gradient(left, #8a279e, #d766da);
  background: -webkit-gradient(linear, left top, right top, from(#8a279e), to(#d766da));
  background: linear-gradient(90deg, #8a279e, #d766da);
}
.orange-side .category-allrounder {
  background: -o-linear-gradient(right, #8a279e, #d766da);
  background: -webkit-gradient(linear, right top, left top, from(#8a279e), to(#d766da));
  background: linear-gradient(270deg, #8a279e, #d766da);
}

.purple-side .category-speedster {
  background: -o-linear-gradient(left, #165ec0, #32c3f2);
  background: -webkit-gradient(linear, left top, right top, from(#165ec0), to(#32c3f2));
  background: linear-gradient(90deg, #165ec0, #32c3f2);
}
.orange-side .category-speedster {
  background: -o-linear-gradient(right, #165ec0, #32c3f2);
  background: -webkit-gradient(linear, right top, left top, from(#165ec0), to(#32c3f2));
  background: linear-gradient(270deg, #165ec0, #32c3f2);
}

.neutral-side .category-neutral {
  background: -o-linear-gradient(left, #464646, #6e6e6e);
  background: -webkit-gradient(linear, left top, right top, from(#464646), to(#6e6e6e));
  background: linear-gradient(90deg, #464646, #6e6e6e);
}

.base-side .category-misc {
  background: -o-linear-gradient(left, #464646, #6e6e6e);
  background: -webkit-gradient(linear, left top, right top, from(#464646), to(#6e6e6e));
  background: linear-gradient(90deg, #464646, #6e6e6e);
}

.item-side .category-hitem {
  background: -o-linear-gradient(left, #464646, #6e6e6e);
  background: -webkit-gradient(linear, left top, right top, from(#464646), to(#6e6e6e));
  background: linear-gradient(90deg, #464646, #6e6e6e);
}

.item-side .category-bitem {
  background: -o-linear-gradient(left, #464646, #6e6e6e);
  background: -webkit-gradient(linear, left top, right top, from(#464646), to(#6e6e6e));
  background: linear-gradient(90deg, #464646, #6e6e6e);
}


/* Menus */
.menu {
  position: fixed;
  width: 20vw;
  transition: .7s;
}

.left-menu {
  height: 75vh;
  top: 2.5vh;
  left: 0;
}
.left-name {
  top: 25vh;
  left: 0;
  -webkit-transform: rotate(90deg) translateY(8vh);
      -ms-transform: rotate(90deg) translateY(8vh);
          transform: rotate(90deg) translateY(8vh);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#8473fd), color-stop(30%, #594ba8), color-stop(70%, #594ba8), color-stop(#8473fd), to(transparent));
  background: -o-linear-gradient(left, transparent, #8473fd, #594ba8 30%, #594ba8 70%, #8473fd, transparent);
  background: linear-gradient(90deg, transparent, #8473fd, #594ba8 30%, #594ba8 70%, #8473fd, transparent);
  padding: 0 5vh;
  color: #fff;
  font-size: x-large;
}

.right-menu {
  height: 75vh;
  top: 2.5vh;
  right: 0;
}
.right-name {
  top: 25vh;
  right: 0;
  -webkit-transform: rotate(-90deg) translateY(8vh);
      -ms-transform: rotate(-90deg) translateY(8vh);
          transform: rotate(-90deg) translateY(8vh);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#e4825c), color-stop(30%, #ca6e4a), color-stop(70%, #ca6e4a), color-stop(#e4825c), to(transparent));
  background: -o-linear-gradient(left, transparent, #e4825c, #ca6e4a 30%, #ca6e4a 70%, #e4825c, transparent);
  background: linear-gradient(90deg, transparent, #e4825c, #ca6e4a 30%, #ca6e4a 70%, #e4825c, transparent);
  padding: 0 5vh;
  color: #fff;
  font-size: x-large;
}

.bottom-left-menu {
  width: 25vw;
  height: 15vh;
  bottom: 0;
  left: 10vw;
}
.bottom-left-name {
  bottom: 0;
  left: 10vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#1e1e20), color-stop(30%, #535150de), color-stop(70%, #535150de), color-stop(#1e1e20), to(transparent));
  background: -o-linear-gradient(left, transparent, #7c7776de, #535150de 30%, #535150de 70%, #7c7776de, transparent);
  background: linear-gradient(90deg, transparent, #7c7776de, #535150de 30%, #535150de 70%, #7c7776de, transparent);
  padding: 0 5vh;
  color: #fff;
  font-size: x-large;
}

.bottom-right-menu {
  width: 15vw;
  height: 15vh;
  bottom: 0;
  right: 20vw;
}
.bottom-right-name {
  bottom: 0;
  left: 60vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#7c7776de), color-stop(30%, #535150de), color-stop(70%, #535150de), color-stop(#7c7776de), to(transparent));
  background: -o-linear-gradient(left, transparent, #7c7776de, #535150de 30%, #535150de 70%, #7c7776de, transparent);
  background: linear-gradient(90deg, transparent, #7c7776de, #535150de 30%, #535150de 70%, #7c7776de, transparent);
  padding: 0 5vh;
  color: #fff;
  font-size: x-large;
}

.bottom-middle-menu {
  width: 25vw;
  height: 12vh;
  bottom: 0;
  left: 37.5vw;
}
.bottom-middle-name {
  bottom: 0;
  left: 34vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#7c7776de), color-stop(30%, #535150de), color-stop(70%, #535150de), color-stop(#7c7776de), to(transparent));
  background: -o-linear-gradient(left, transparent, #7c7776de, #535150de 30%, #535150de 70%, #7c7776de, transparent);
  background: linear-gradient(90deg, transparent, #7c7776de, #535150de 30%, #535150de 70%, #7c7776de, transparent);
  padding: 0 5vh;
  color: #fff;
  font-size: x-large;
}

.right-menu .orange-side {
  direction: rtl;
}

.bottom-left-menu .neutral-side {
  border-radius: 10px 10px 0px 0px;
}

.bottom-right-menu .base-side {
  border-radius: 10px 10px 0px 0px;
}

.bottom-middle-menu .item-side {
  border-radius: 10px 10px 0px 0px;
}

.menu .close-menu {
  position: absolute;
  z-index: -1;
  text-align: center;
  width: max-content;
}

.menu .close-menu:hover {
  color: #fff;
  cursor: pointer;
}

.left-menu .close-menu {
  top: 0;
  right: 100%;
  -webkit-transform: translate(100%, 50%);
      -ms-transform: translate(100%, 50%);
          transform: translate(100%, 50%);
  border-radius: 0px 10px 10px 0px;
  padding: 1vw 1vh 1vw 20vw;
  background: -o-linear-gradient(right, #5a4aade1 0%, #5a4aade1 10%, #00000000 20%);
  background: -webkit-gradient(linear, right top, left top, from(#5a4aade1), color-stop(10%, #5a4aade1), color-stop(20%, #00000000));
  background: linear-gradient(270deg, #5a4aade1 0%, #5a4aade1 10%, #00000000 20%);
  display: flex;
  align-items: center;
  direction: rtl;
  height: 10vh;
  max-height: 4vw;
}

.left-menu.closed .close-menu {
  -webkit-transform: translate(90%, 50%);
      -ms-transform: translate(90%, 50%);
          transform: translate(90%, 50%);
}

.left-menu.closed .close-menu .menu-name {
  transform: rotate(90deg) translateY(-100%);
}

.right-menu .close-menu {
  top: 0;
  left: 100%;
  -webkit-transform: translate(-100%, 50%);
      -ms-transform: translate(-100%, 50%);
          transform: translate(-100%, 50%);
  border-radius: 10px 0px 0px 10px;
  padding: 1vw 20vw 1vw 1vh;
  background: -o-linear-gradient(left, #76453cdc 0%, #76453cdc 10%, #00000000 20%);
  background: -webkit-gradient(linear, left top, right top, from(#76453cdc), color-stop(10%, #76453cdc), color-stop(20%, #00000000));
  background: linear-gradient(90deg, #76453cdc 0%, #76453cdc 10%, #00000000 20%);
  display: flex;
  align-items: center;
  direction: ltr;
  height: 10vh;
  max-height: 4vw;
}

.right-menu.closed .close-menu {
  -webkit-transform: translate(-90%, 50%);
      -ms-transform: translate(-90%, 50%);
          transform: translate(-90%, 50%);
}

.right-menu.closed .close-menu .menu-name {
  transform: rotate(-90deg) translateY(-100%);
}

.bottom-left-menu .close-menu {
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
      -ms-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  border-radius: 10px 10px 0px 0px;
  padding: 1vh 1vw 15vh 1vw;
  background: -o-linear-gradient(top, #7c7776de 0%, #7c7776de 20%, #00000000 50%);
  background: -webkit-gradient(linear, left top, left bottom, from(#7c7776de), color-stop(20%, #7c7776de), color-stop(50%, #00000000));
  background: linear-gradient(180deg, #7c7776de 0%, #7c7776de 20%, #00000000 50%);
  width: 14vh;
  max-width: 6vw;
}

.bottom-right-menu .close-menu {
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
      -ms-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  border-radius: 10px 10px 0px 0px;
  padding: 1vh 1vw 15vh 1vw;
  background: -o-linear-gradient(top, #7c7776de 0%, #7c7776de 20%, #00000000 50%);
  background: -webkit-gradient(linear, left top, left bottom, from(#7c7776de), color-stop(20%, #7c7776de), color-stop(50%, #00000000));
  background: linear-gradient(180deg, #7c7776de 0%, #7c7776de 20%, #00000000 50%);
  width: 14vh;
  max-width: 6vw;
}

.bottom-middle-menu .close-menu {
  top: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
      -ms-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
  border-radius: 10px 10px 0px 0px;
  padding: 1vh 1vw 12vh 1vw;
  background: -o-linear-gradient(top, #7c7776de 0%, #7c7776de 20%, #00000000 50%);
  background: -webkit-gradient(linear, left top, left bottom, from(#7c7776de), color-stop(20%, #7c7776de), color-stop(50%, #00000000));
  background: linear-gradient(180deg, #7c7776de 0%, #7c7776de 20%, #00000000 50%);
  width: 25vh;
  max-width: 10vw;
}

.menu-name {
  font-size: large;
}

.close-menu .closed {
  display: none;
}

.left-menu.closed {
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
}
.left-name.closed {
  -webkit-transform: rotate(90deg) translateY(50vh);
      -ms-transform: rotate(90deg) translateY(50vh);
          transform: rotate(90deg) translateY(50vh);
}

.right-menu.closed {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}
.right-name.closed {
  -webkit-transform: rotate(-90deg) translateY(50vh);
      -ms-transform: rotate(-90deg) translateY(50vh);
          transform: rotate(-90deg) translateY(50vh);
}

.bottom-left-menu.closed {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}
.bottom-left-name.closed {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

.bottom-right-menu.closed {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}
.bottom-right-name.closed {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}

.bottom-middle-menu.closed {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}
.bottom-middle-name.closed {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
}


.base-picks {
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 50%;
}

/* Draggables */
.draggable-items {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
  -ms-grid-rows: 1fr 3px 1fr;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: calc(min(6vh, 2vw) + 3px);
  display: -ms-grid;
  display: grid;
  grid-auto-flow: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
}

.item-side .draggable-items {
  grid-auto-columns: calc(min(3.2vh, 2vw) + 3px);
}

.draggable {
  height: 5vh;
  width: 5vh;
  max-width: 2vw;
  max-height: 2vw;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: -webkit-grab;
  cursor: grab;
  display: inline-block;
}

.draggable.bitem-mon {
  height: 3.2vh;
  width: 3.2vh;
}

.draggable.hitem-mon {
  height: 3.2vh;
  width: 3.2vh;
}

[data-drop-item] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.draggable .hitem-mon:nth-of-type(1) {
  left: 3.7vh;
  top: 100%;
}

.draggable .hitem-mon:nth-of-type(2) {
  left: 0;
  top: 100%;
}

.draggable .hitem-mon:nth-of-type(3) {
  left: -3.7vh;
  top: 100%;
}

.draggable .bitem-mon {
  left: 100%;
  top: -50%;
}

/* Scrollbars */
.purple-side .draggable-items,
.orange-side .draggable-items {
  padding-top: 5px;
  padding-bottom: 5px;
}
.purple-side .draggable-items {
  scrollbar-color:#432eafe1 #5a4aade1;
}
.orange-side .draggable-items {
  scrollbar-color:#723126dc #76453cdc;
}
.neutral-side .draggable-items {
  scrollbar-color:#535150de #7c7776de;
}
.item-side .draggable-items {
  scrollbar-color:#535150de #7c7776de;
}
.base-side .draggable-items {
  scrollbar-color:#535150de #7c7776de;
}
.modal-text {
  scrollbar-color:#535150de #7c7776de;
}

/* width */
::-webkit-scrollbar {
  height: 1vh;
}
.draggable-items {
  scrollbar-width: thin;
}

/* Track */
.purple-side .draggable-items::-webkit-scrollbar-track {
  background: #5a4aade1; 
  border-radius: 0 0 10px 0;
}
.orange-side .draggable-items::-webkit-scrollbar-track {
  background: #76453cdc; 
  border-radius: 0 0 0 10px;
}
.neutral-side .draggable-items::-webkit-scrollbar-track {
  background: #7c7776de; 
}
.item-side .draggable-items::-webkit-scrollbar-track {
  background: #7c7776de;  
}
.base-side .draggable-items::-webkit-scrollbar-track {
  background: #7c7776de;  
}
.modal-text::-webkit-scrollbar-track {
  background: #7c7776de;  
  border-radius: 10px 10px 10px 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px 10px 10px 10px;
}
.purple-side .draggable-items::-webkit-scrollbar-thumb {
  background: #432eafe1; 
}
.orange-side .draggable-items::-webkit-scrollbar-thumb {
  background: #723126dc; 
}
.neutral-side .draggable-items::-webkit-scrollbar-thumb {
  background: #535150de;  
}
.item-side .draggable-items::-webkit-scrollbar-thumb {
  background: #535150de;
}
.base-side .draggable-items::-webkit-scrollbar-thumb {
  background: #535150de;
}
.modal-text::-webkit-scrollbar-thumb {
  background: #535150de;
}

/* Handle on hover */
.purple-side .draggable-items::-webkit-scrollbar-thumb:hover {
  background: #432eaf; 
}
.orange-side .draggable-items::-webkit-scrollbar-thumb:hover {
  background: #723126; 
}
.neutral-side .draggable-items::-webkit-scrollbar-thumb:hover {
  background: #535150;  
}
.item-side .draggable-items::-webkit-scrollbar-thumb:hover {
  background: #535150;
}
.base-side .draggable-items::-webkit-scrollbar-thumb:hover {
  background: #535150;
}
.modal-text::-webkit-scrollbar-thumb:hover {
  background: #535150;
}

/* Modals */
.modal {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal h2 {
  border-bottom: 2px solid #76453c;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.modal.closed {
  display: none;
}

.modal.lang-en .text-en,
.modal.lang-fr .text-fr {
  display: initial;
}

.text-en, .text-fr {
  display: none;
}

.modal-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 2px solid;
  margin-bottom: 5px;
}

.modal-close {
  border-radius: 50px;
  width: 5vh;
  max-width: 2vw;
  cursor: pointer;
}

.modal-close:hover,
.modal .flag:hover {
  -webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	    transform: scale(1.1);
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.modal .flag {
  cursor: pointer;
  width: 8vh;
  max-width: 2vw;
}

.modal .flag:not(.selected) {
  -webkit-filter: grayscale(0.8);
          filter: grayscale(0.8);
}

.modal .flag:not(.selected):hover {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
}

.modal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #ececec;
  position: relative;
  left: 100%;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  padding: 20px;
  border: 1px solid #888;
  max-width: 25vw;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 75vh;
  border-top: 2px solid #2d2d2d7a;
  border-radius: 5px 0px 0px 5px;
}

.modal-text {
  overflow-y: scroll;
  color: #76453c;
}

.img-modal {
  width: 5vh;
  max-width: 2vw;
}

.img-modal.dot-size {
  width: 10vh;
  max-width: 4vw;
}
.img-modal.timer-help {
  width: 15vh;
  max-width: 6vw;
}

.modal-text li.li-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1vw;
}

li ~ li {
  margin-top: 5px;
}