@font-face {
  font-family: HelveticaNeueUltraLight;
  src: url(HelveticaNeueUltraLight.ttf);
}

@font-face {
  font-family: HelveticaNeueMediumCond;
  src: url(HelveticaNeue-MediumCond.otf);
}

/* define a fixed width for the entire menu */
.root-menu, .top-menu {
	padding: 0px;
	margin: 0;
	height: 100%;
	overflow: auto;
	font-family: HelveticaNeueMediumCond;
	border: 2px solid #0000aa;
	border-radius: 5px;
}

.root-menu {
	height: calc(50vh - 65px);
	overflow: auto;
}

.top-menu {
	height: calc(40vh - 65px);
}

.main-menu-container, .top-menu-container {
	position: relative;
	padding: 2px;
}

.main-frame-container {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: #ffffff;
	z-index: 900
}

.right-frame-container {
    width: 75%;
    right: 0;
    left: unset;
    height: calc(100vh - 60px);
    top: 60px;
}

.main-frame-container .main-frame-loading {
	position: absolute;
    top: 60%;
    width: 100%;
    font-size: 6rem;
	text-align: center;
}

.main-frame {
    position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.right-frame {
	
}

.animated {
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes bounce {
	0%, 100% {
		-webkit-transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-5px);
	}
}

@keyframes bounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
}

.top-menu-remove-container i {
	position: relative;
	top: 50%;
	display: block;
	font-size: 10rem;
    text-align: center;
    color: #FF0000;
}

.top-menu-remove-container i:before {
	transform: translateY(-50%);
}

.top-menu-remove-container .user-info {
	position: relative;
	top: 50%;
    text-align: center;
    color: #FF0000;
    transform: translateY(-50%);
    font-size: 1.6rem;
	font-weight: bold;
}

.top-menu-remove-container {
	position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
	box-shadow: inset 0px 0px 300px #FFAAAA;
    background: #FFFFFF;
    border: 2px solid #DB0000;
    border-radius: 5px;
    z-index: 1;
}

.ui-draggable-dragging {
	transform: scale(1.5);
	z-index: 100;
}

.menu-controls {
	
}

.menu-controls>* {
    margin: 2px 2px 0px 2px;
    padding: 2px 4px;
    font-size: 1.6rem;
	border-radius: 5px;
    border: 2px solid #0000aa;
}

.menu-controls .menu-search {
	width: 50%;
}

.menu-controls .menu-hot-key-search {
	width: 25%;
}

.menu-controls i {
	line-height: unset;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #c1c1b1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: #14a098;
	border: 2px solid #006400;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #34d0c8; 
}

/* reset our lists to remove bullet points and padding */
.fc-menu-container ul {
  list-style: none;
  padding-inline-start: 0px;
  margin: 0px;
}

/* make ALL links (main and submenu) have padding and background color */
.fc-menu-container ul a {
  display: block;
  text-decoration: none;
  padding: 5px;
  color: #632900;
  font-size: 16px;
  font-weight: 600;
}

.fc-menu-container ul li.active>ul, .fc-menu-container ul li.silent-active>ul {
	display: block;
}

.fc-menu-container li {
	white-space: nowrap;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.fc-menu-container ul.menu.lev1 {
	background-color: #a8dff4;
}

.fc-menu-container ul.menu.lev2 {
  background-color: #a8dff4;
}

.fc-menu-container ul.menu.lev3 {
	background-color: #a8dff4;
}

.fc-menu-container ul.menu.lev4 {
  background-color: #a8dff4;
}

/* add hover behaviour */
.fc-menu-container ul.menu.lev1>li:hover, .fc-menu-container ul.menu.lev2>li:hover , .fc-menu-container ul.menu.lev3>li:hover , .fc-menu-container ul.menu.lev4>li:hover  {
    background-color: #e7ff91;;
	cursor: pointer;
}

/* active behaviour */
.fc-menu-container ul.menu.lev1>li.active, .fc-menu-container ul.menu.lev2>li.active , .fc-menu-container ul.menu.lev3>li.active , .fc-menu-container ul.menu.lev4>li.active {
	background-color: #bedd4d;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.sub-menu {
	/*max-height:0;
	overflow:hidden;*/
	display: none;
	/*-webkit-transition: all 0.5s ease-out;*/
}

.menu-indication-container {
	display: inline-block;
	width: 20px;
}

.fc-menu-container li .menu-indicator-minus {
	display: none;
}

.fc-menu-container li.active>a .menu-indicator-minus, .fc-menu-container li.silent-active>a .menu-indicator-minus {
	display: block;
}

.fc-menu-container li .menu-indicator-plus {
	display: block;
}

.fc-menu-container li.active>a .menu-indicator-plus, .fc-menu-container li.silent-active>a .menu-indicator-plus {
	display: none;
}
.drag-and-drop {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

@media only screen and (max-width: 768px) {
	.menu-controls {
		width: 100%
	}
	.top-menu-container {
		display: none;
	}
	.main-menu-container {
		width: 100%
	}
	.user-info.drag-and-drop {
		display: none;
	}
}