* {
    margin:0px;
    padding:0px;
    font-family: "Righteous";
}

#mapid { height: 100%; width: 100% }

#logo {
    position:fixed;
    right: 20px;
    top: 20px;
    font-size: 40px;
    z-index: 1000000000;
}

#sidebar {
    position:fixed;
    width:200px;
    height: 100%;
    background:#151719;
    left:-200px;
    transition: all 500ms ease;
    z-index: 1000000000;
}

#sidebar.active {
    left:0px;
}

#sidebar ul li {
    color:rgba(230,230,230,0.9);
    list-style:none;
    padding:10px 25px;
    border-bottom: 1px solid rgba(65,65,65,0.8);
    transition: all 300ms;
    cursor:pointer;
    font-size: 14px;
    font-family: "Roboto Condensed";
}

#sidebar ul li.vecname {
    font-size: 25px;
    padding:15px 8px;
    margin-top: 8px;
    cursor:initial;
    font-family: "Righteous";
}

#sidebar ul li:not(.vecname):hover {
    background:#565756;
}

#sidebar .toggle-btn {
    position:absolute;
    left:230px;
    top:20px;
}

#sidebar .toggle-btn:hover {
    cursor: pointer;
}

#sidebar .toggle-btn span {
   display:block;
   width:30px;
   height:5px;
   background: #151719;
   margin: 5px 0px;
   transition: all 0.3s ease;
}

#sidebar.active .line1{
	transform: rotate(-45deg) translate(-4.8px, 9.5px);
}

#sidebar.active .line2{
	opacity: 0;
}

#sidebar.active .line3{
	transform: rotate(45deg) translate(-4.8px, -9.5px);
}

.inputbar{
    padding:1px 12px;
    height:40px;
}

.inputbar.transformbar{
    width:calc(50%);
    float:left;
    text-align: center;
    margin: 0;
}