html, body {
  height: 100%;
  font-size: 13px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
a {
  font-size: 13px;
  text-decoration: none;
}
ul, li, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main {
  height: 100%;
  display: flex;
  justify-content: flex-start;
}
.toolbar {
  width: 50px;
  height: calc(100% - 70px);
  padding-bottom: 70px;
  /* background: #083D4D; */
  background: linear-gradient(60deg, #563D7C 0%, #6D4D9D 100%);
  position: relative;
}
.toolbar .title {
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-bottom: 20px;
  color: #FFF;
}
.toolbar .title a {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: #FFF;
}
.toolbar .title .logo {
  width: 50px;
  height: 50px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAOVBMVEVHcEz31Wf31Wj31Wf31mf41mf41Wf/2m351Wn//5n31Wf31Wf31mf//3/31Wf/12v31mj31Wf31Wdj0MNCAAAAEnRSTlMA2aalilHcHFUF5vO2Au0atfLdvyXLAAAA8ElEQVR4Xu3a7QrDIAyF4dgPY+u2drn/ix2UsP2TTnJgZee9gQcEJWDkaCljqhZYTWNZ5N2cDVCeHbhPBmq6H8BksKbjfAzYLLJkJJAXKQatyIgFRkkO7CqB6c2BJNWBTUJTB6qYJ8GZ9/cAAQIECOiw2onWQfsAfdjJHtoFDHa6oQtYzwNrF2BfhAUI3LQx/UQAjYlMQwBp9CNAuzbQ6AIAAQLXuMnwx+4Kz3U7AEAAOnjhR0f88Isf3/sjQIAAAQIECBAgQIBAdUBjgc2B5+e7d4sEdHcg4T+sCxYo8KUB9NoDenEDv3qCX56Br/+8ALc5Fk5kqALLAAAAAElFTkSuQmCC') no-repeat center center;
  background-size: 24px 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  position: relative;
  top: -1px;
}
.toolbar .list {
  width: 100%;
  position: relative;
}
.toolbar .list li {
  height: 50px;
  line-height: 50px;
  cursor: pointer;
  position: relative;
}
.toolbar .list li .tip {
  position: absolute;
  left: 65px;
  top: 0;
  display: none;
  pointer-events:none;
}
.toolbar .list li .tip span {
  display: block;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  font-size: 14px;
  white-space: nowrap;
  background: rgba(0, 0, 0, .6);
  color: #FFF;
  box-shadow: 1px 0px 20px 10px rgba(0,0,0, .05);
  -webkit-box-shadow: 1px 0px 20px 10px rgba(0,0,0, .05);
  -moz-box-shadow: 1px 0px 20px 10px rgba(0,0,0, .05);
  border-radius: 6px;
  pointer-events:none;
	-webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.toolbar .list li .tip span::after {
  content: '';
  width: 0;
  height: 0;
  border: 10px solid;
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  border-color: transparent rgba(0, 0, 0, .6) transparent transparent;
}
.toolbar .list li:hover .tip {
  display: block;
}
.toolbar .list li#home {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEVElEQVR4AbTZAxDkPBjG8c+2bdu2bdv+zrZt27Zt27Zt++6/M81M5p20l6S5Z+Z36CbdvFunJ72Z7b0gjh49+hzKoDkGYS52ROZjKNqgEj7BGSG+N+2g30BFLIdr9qIxvsTF/gW4D/o8/I8pCJXVKIargxYgBn4V8mMh4jIDzVAAv+JdfIB/UBYtMTRkIbaDf9c0cJHN+NZyfdcjHybDlIV4N0gB0S9pylD8C5lWDlv1Q7TCfpjya6oCWEEemPKP1uZaDDNsjZfwD/7Aa1r7B1AZK2CTPF4F0PFnyMzH5THtcyIpXTEBMocwXO37yA+Zn50KoMPLkClmsUvcgb6wSQf8bDpgY3bNl60KoOHjkOnusF83ttgSr1qs50fIPC7bmU6Vc6FngeN1YihiI9s7FjEX1yYVkD/lF76E+YhLfY8LZwPoKa1/Lq+w8lx/n8MX5YRN7nEs4CrMhso23Gkq4H/InOe53w/QdyXxwxzwKOJT6KluKmAKZMp47PPNtM8uz4j+3QEqszyKaCZOvY9klqsP34OedVD50GHw+RPaXopFUOnkWMD70FNSL6A+VFbgAXFVfeY4g9+NzywGIX+oPx2LWAqVqXoBq6FSPlpWFCqL0BRLMUkMfi1ecxhEMaisxC0OfctAzyOZha9Cz2NahzpIyny9vcNAuvicWml7v9yNZFVzDJ1GIi5VPZ/kbhVb/VGHvpugMiazoDlUeskO4otkpqZ4HC3muRXGQGV5ZsEgqLQ2dNiOuOxMUcDVPlshOhZVDp0k7n3qGDr0QFxG46JAW6GmVR9xu3MSdkClrKHD50jKcnzkWcANUFmKM+yvyvYFNIDMdNMB7TGrIK9Bn1rdMGqRu1Bt0fg28Qx8Oa6NPnsd83xnFcSEmEpT1wLkQdxSNK4ClZdiVlg+YXrkZcsiVDbhaYer+SF5Gu2uNXxQFpaw0kdRH6asREt8histb8PrWx74y+WFbKjWsDpUnlTLfQsRN4o9UAhvIC75xLrfQiUMlRcyeStxEx30Y2Oc59nla9TBcvhmMlYmzBuVNF1tC+Ae+9kI63uYP1APo7EDIfKI6VQ2R+xn5oMqfVF5sdViunIWeqCguApPjX2g0eYst+DUwAP/2nJmu4Po96LcfWweKfsHHPjt6AKZztgIPUMN/QfJR0qbh/qSgQb/JZZBz378Yjo9Gvr/Ih/qbadV3g8w+PKQ6Yur+Nz4A4rll2G+nFaxndhqmXLwPaBnB3LFtP0mpoDmcmLLdWqxiufgJ0FPNzyS0P4tWUA0DW+eWnSc3H3JcfCr5T5r0edN1Tjh3cTjaabXv7QcvEwxy35fQOV7yLwc4gVHMZyT0Gegw+Bl3z8Rl59DvmKagq8MbQtBTw3nK7M5eU7US74eeC9q85vv2Su676oZ/iWf/WtW27c58tz+Kwake80a/kX3UHRAbRTDsYVC10WUQfvWO6Hd0O+EJrqH4lKDepDDRxd7DLXlNgDgeid2RJrmrgAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#json {
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#image {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAP1BMVEVHcEz///////////////////////////////////////////////////////////////////////////////9KjZoYAAAAFHRSTlMAlP22BiuPHNXz/r3N+NI0Tgvt6m0oy44AAADVSURBVHhe7dq5DsQgDEVRQ8Kafcb//60juWCWBoGwMsW7tZVTpbAM/U/I+Zh4UCl69wPMxvLQrJm/vr/w8JZPwbBChkrOagDWFcCzSr4AUYAp0KDCJEAsQBIg0LCCAKkALNHAWLoHAAAAAAAAAAAAABBT5/5SB3r2F0VAWmZlgI02YJ0ywL4ZmELb/tIMhMb9ReFHq88DAAAAAAAAAAAAAAAAAAAAWYCjd42tT2wCPI/ORbw+sWofS8+sfO6lXflgTddD+eRO154VHw1I57pljWcP94deQxq9bOkt0okAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#javascript {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAECElEQVR4Ae3dA5DkWgCF4Wfbtm3btm3btm3bNte2bdse45+qjNI32MxNMps+p+p72N3uzuZftGp6sWNvOylHRUXFCrgEv2I4CpD1FWA4fsUlWME5H7EynfwLMa5CG4cLEwvAjS2JN6DV3xtYMokAr0Iz75VYA3ADZ0Dz3xmxBOCKl8JQaP4biqXiCHAm/NYU9+GajLsPTeG3M+MI8Dm8drPrAplX9XOG1z6PI8AgmNbUfKHs8/mdMDCOALNh2h15HOAOmDbbfgDvnZ3HAc6GcQqgAAqgAAqgAAqgAAqgAAqgAAqgAJmjAAqgAKfCtGIFSCbAFjCtqwIkF+Fd1F0JjlGA5AIsjsvxPT7AXs73pRVAFEABRAEUQBRAAUQBFCBzD7y2wXkuy/j8+KWxH07BWTgX54VwhjmAAtwG99bwCPUL5iDKZkYMoAD8/8GYDmeJBVAA/ntZjANLI4AC3AjTmuJFPIJ7cU+AW6MFUIDf4N6jyd0LUoCBcG/H5AIoQDe4d3ByARTgXbjXHusnE0ABzodpZRiAtmhWRxP8gs9wF3ZqWAAFWBz/IOrK8QXWUYDoD8TWwkA0ZG2xZG4ABbg95FMRS+Bs/IsBmB0hwk25ARTgPri3SsjLLosV6lgZm+Eqj+eMfsoNoABPwb1lLVzvCXBvVG4ABfgWdTff0vUugxK4t5oCwDlJm2MB6q6jpeve1OMe0bIKAOdFlfZw7yFLYdvCvRF580eQ82UHerj0wWCf5/ZnYGPDdbVAjwA9MQiT4LXH8ynAyxEeMJ3kcV1T0dANxZoKYN5kXOdcNo4AE7GFc315HaAcBZiF4WiJ67G8czkbAUqwABPQFldjJT0XpLeliAIogChACJyDvfEQbsK6CpD86wPlqN5U7KwAyZz8dVEE95opQDIBToBp8xVAX6pAARRAARRAARRAARQg/AndETfhObwfQlMFsHPiT0M/WJkChD/xy+M7OFOAJE/+0mgNlkYABXgbTAHSOPm7ohxxbaYC+Af4Bn6bge7o5mEQ/DZHAfzfgzkbps3D+SHeQtgHfhujAP5//HjtlhBvT5yMoN3tfT0KcBy8tr7P5c5HAYL2ChZXAEtPH1SdTDyOoJXgGovHqgB803IhH6jNwBEWj1MB+N/10BlBG4JtLB6jAjh/UY9B0FpiDYvHpwD862TMRdA+wtIWj00B2F0og9/KcFfE29eHeToBom4uTk7rrYkDYVrTPAkwBruGvy19oLPNAJ2xnp1j0Eeav4+F2XdYLp0Trw/1f9z8tELyqn/7noF8WIHhWdH0AzgRXkWWNwn7eZ+M9AMsiTeQxfXBpo3xzoPp3sSFGIes7C+s3FjvvXndpVsBl+BXDEcBFqVNxmDciiUa893nSut2lEzhu8rhAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#css {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAFHElEQVR4AWJwL/DBwP///+cCtHcP0JIjYRTHz8zatm3btm3btm3btm3btm178/Rf934nSXVXKul6efee89sdflVT9zEtrI1r8BZ+Qd3zC97CNVgbg9tzKUPa4a+BD7uVD7FGZQWw2AA4Hsr/czwGqKKAY5Ae5ehSC2CB5aHkZ/lSCmDwgHgDSn7ewIBlFLAC8nIHdsXGNbcr7kBeViijgPOQla1yB9TQH/9mZOW8Mgp4FWm5wzmgpnLeE14po4DvkJbt+3AB2yMt34UvIDsr9eECVkJqVIAKqB0VoAJUgApQASpABagAFaACVIAKUAEqQAUsg7T8Xk0BKmB8pOUJFVBdCaegMQkWrq4AFdAP6+EynI4ZPebEWICoABUgKkAFiApQAaIC8qkA9jEeZsHiWAWrZpgg4+8PhFmxNFY0M/Is38TexsQiWB4rY9UmTRx1Aaw9Dc7ER2g2G5sZE+NqfA+ffJOzvx3wAnyzTZQFsGZ/HIoErWbjhjlz4SsUyTcZ700XwaY2BRwN32z894xB8CFI8AK2AKlhAay3HNLShadwEfbFzhmmcRzSHTgCe2MX7OywjdnfwBnFfo7TcAB2x85NmCHGAu6DzduYp8U518JmnwD7mxY2n2GkXv9VEGtNBpufMLLHrFdgM0WAPa4Cmys8ZkVZwMGwOd5z1pOwmSvAHpeEzV11KeAK2Cxe4JYsm4cwWsE9jgKb37Ee+vf2Ah6GzXSes1ZDWjrxMh7AnQ1ux9U4FztiypzZryEtX+IJ3G1m34RLcTRWxSCxFvAebEYtcFPizfBNF87HyCmz50AC37yLlWMs4AfYjFBg3oh4BUXyAAZImb0NkoIFLxpbAe/DZrwA31WvhFvwMr5Dq9kyY/bYOBaP4gOPQj7DADEV8BRs5ixhnUEweIOhMC42xPewubKFsgc3RsKsuA5pmTKmAm6EzdYVfyO4OGzeDTB3ADwCm3VjKmBH2DxYcQEDI4HNsAFm7w+bY2MqYBKkZbkK9zAObLowSIDZ58DmoNiuBT0Im59xGMas4EafB2DzdoDPOeshgc3asRUwFr5AVn7Ea3g6w/INs+7G0w7P4FV8iqzsZ/a4Mp5uwvN4Bz8jLT9gqBhvD1gYnSBFbpChyOJ5AyOUdHvA1tHeJMm6y+OpNhfwCcYv6QaZw3vFjfKsPzeuwDv4ER0lFZDgZ3yMB7ARhrT78SigC7/hW7yO0zB9RNeCRAWoAFEBKiBenMFM2BNbYhQVUO3hb4su/JMvMJUKKJG5/fc32NypAqq9NG3zkwrQUxWoABWgAlSAClAB8VMB8RzoFNgSh+K0JtyhAsIc/LJ4EV5RAf4HPxguhY0KqODwB8J9ICqgHQWcBKIC2vX44i6UlW9UQH4BFyMvX+MpPJnhVeTlexWQf9/O75CWH7FaE3dNfB55eV8F5H34yc7Wjr87Kz6DKztlz1EBiyIrozkeU/YLXDka/VRAscsH9rFk+8GVBBsH3KsK4JcGxaVw5WvMH3CfKoCfjorH4MrrmDjA3lSA+UT9Ply5B8MH3J8K4H9L4Qe4ciYGCrg3FUB2RCfy0okdPdbWi3maAnzyA5Zq110TX0Fa7ugjBbyPaTzW1As6ByjgMYwaZg96SfPT0EouxaDtOXi9qP9+5rJC2zQ8MK5P5Bd7VTSKAv4u4RjUOZ9i1pgO3xYwAI5HHfM8xonxi4e0rybWwIeoS27851HpURdgShgca+MavIVf0JvyGV7DNuYJ9aLTA2MSfl+NE9doAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#html {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAEhUlEQVR4AWJwL/DBwP///+cCtHcPQJJrcRTGa+bZtm3btm2j8Gzbtm3btm3b5u4Y31YN/pW9uTfZCXo651T9HjrJdHe+NbEt7sIXaEK9rwlf4C5sizHtPcmL6+Zvhe+7tO+xVWEBeLKRcC40M3YuRioiwFlwTzsz1wA8wYbwT9swlwB84JHxGfzTPsPIeQTYCL49hoOxa507GI/Bt43yCHAN4raHObkShr1nxO2aPAJ8DNceMydWiudzwkd5BPgHru1b4QD7wrV/sg8Qv00qHGATOKcAClB3FEABFEABFEABFEABFEABFEABFEABFGA9uNZaTAAFmBGuvaYAxUW4CHZtWLW4AArQgB1wCy7FwuZ4GQGkqgEUQBRAAUQBFEAUQAF4fHVsbiwX+A5NIzaPmLPn2PTYPCONPR9zg5jjK6b4TthsnueZJHLuQpHjG+Yd4F3YPRx4M6MiusN7jm2HrDZaz8f8Da79g9ESBrgNcVsmcu75sPtTAeK3ZoKbPxaG5BNAAS5PEGAzsGoEmBsHxngJdi040GOkBAF+xUiB13tHZQIErrsQdv+HrjEBfFvOc+3YGJptAAX4AHZne67dHHbvKcDAAxyLTvP/33iuvRN2hyrAwAPsihdht7DjunHQZM5pxayDIcCPuM7jxhoIsA/sTnBctyXs7sPEtR8g+coMMC3sPnJcdzfstswogAL0PP4y7GY314yLZnNsCMbKNoAC7A+7Q801W8Pu5p7HkwQ4D3Z/FR3geczpMX+NBJgedq+Za+6F3XopApwBuxZ9KygSwBx7DXbTYjy02E/BGDVFgBMQ3WgK4A5wEOz2xLawu8KcnyTAgYhuegVwB5gJdk/jftitnDLAhohuHwUwASLH3zTH2tFq/v8njJQywMT4G3ZN2B1TKsDwAQ5B3M615/oDeL8YsvsdX+JdvBkxRhUDzIK4LT6CAUbDl0i7saoUwJ7zNqL70pyTNIA9d0pchU4EpgCHI7oTBxDAXrMgrsNr+Bn/oDWzAKJfF6QAogAKUAXcg0VwOHbHZApQ7M3fO/JNyt8wjwIUc/MnQwuie7yYAAqwJlwbogD6owoUQAEUQAEUQAEUQAGS39C5sDtOxiUJPKYA2dz49fE+MpkCJL/xY+Bm2ClAQTd/FDwDVkYABbgATAHKuPnzoRN57S8F8Ae4Eb79iTfweoyP4du/CuD/1Rf/wLX/sUXg+unwLnz7VgH8X/zEbc/AtYvjF4R2gALA84eIxG0Kz3VboAmhnYkGBcjohw94uAHHILQ27Jrha1UAHhodNyO0P7Fihq9TAfjfyfEKQvsUs2bz+hTAfkX9LUJ7ChNm+PoUgH+tg/8Q2uUYJcPXpgBsf3TAtw7sH34u/WWe6QOE9x/WKeuXJn4E1x6rSIBvMV/S59Ff6JxtgFcweTavQX+l+SVIs5sxejk3Xn+p/zH2hxXKZH+zcRXWZH5UtCbYL0PPQj3vZ/vbUGsxwEg4F/W4dzFdrd18G8CG2Arfo152P8YJ34zyA9gIY2Jb3IUv0ITBtF/wCfZCYy1/87kbKlHbDKOv+IYAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#base {
  background-image: url('data:image/png;base64,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');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#shadow {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAjVBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+umAc7AAAALnRSTlMALfP9yHjr9ZVBK5QGD9WPDhy9+Pbytu7x8PT36NHD79375fn+ser6kLq5Aez81lUcWQAAAclJREFUeF7t2klvgzAUBGDHDoGYACFAtmbrvvv//7yqVGIknLoH3qgX5oR88HdCz9I89R1b5NoNjM4Lq65nkRonEpMurt6/cmJZXRNSJ5jUB6yRBIz1gMKJpvCAvAXWpRqYct0CuQfoFijV4JQtoD3AtVECwU3/B4zACIzACPgzmgZgRrMAzGgy4FI2YCwZcAUbyNmAZgNOHEjYgErYAAQSAIEEQCABEEgABBIAgQRAIAEQyMB7wwEmnbDlALMJGYDQcAAImgBA4AEQ9hwAQswAINAACDUHgHDDASB8coCY/aqYx2RAQSABEEgABBIAgQRAIAEQSAAEEgCBC6j5AxlQzxwg6oB7DgChIgAQeAAE4sCJmACEmgFAYL8qIhoAYd8C4gUFhJ9P6Yrl4nqRLomSaQ8Qr7mWPUG+qOsJ4lVjXxAvS/uCXN17SbqaMYPgwr9MgrPJrAPiOY4jENOlgvAHICCEAQkhCIgIIUBEqALAACHrhGMAEBFeA4CIcPod0BJCVqPA9mv44UL2iArey4vzcrg7PH1sds2+rgzc283mfN7ttk2jtUOq49upxhKBH2s4axBIylrkwDqK2HygLdRgPvgRmBGoGr8A0cs5NKcRYvYAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#flex {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgBAMAAAAQtmoLAAAAJFBMVEVHcEz///////////////////////////////////////////8Uel1nAAAAC3RSTlMAj9Xz/ZQGHCu9tvjCnioAAACYSURBVHhe7dctCgJQEEXhV9QtCEajzeoGBIvJbLGbbYK7cAFmf4qczTmgpgcytzr31OErL73bCuWOU1LNx2+wW5HssWnR8Ey65zbAAKF1gBNCywAThK4BZnBpqQ5wC7CAfQ6M4B4AaMmA2oBvn0NfRWBg8COD/lm7wz8BAwMDg0yFgfxZl+eAPDjkSSOPJnmWqcNPnpZ1ci96Ph1r9rf4owAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#color {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADFElEQVR4Ae3ZA7DcXADF8c+27eHn2rZt27Zt27ZtW4Patt2OX/91e+Ymm7fB2+LM/IY3N/csbrKbV9LXyPJMe1ngrqioqF9QGO0xC4dwN+ewHANROuIKsKhMGI4bcJK5EVGAheTGJoSbfwMrIAv/AQPgNucDL8BJ8+IgrHIdU9EYKZ447h/0gaaF7wVk8VZZier4McQcpaFJ53sBTlIUpuxGkWh+BBfIHI19LcAJ6sKUnvgqjC9/OZlnhucFZIs0pYyLbfcPmeuklwX0wnQWmhQ2i5uEMziJmTbjLuJR/CowHZpKNosyxmLsBhkW29MCTJgWEttXdCasMskwvoWO8brAWDnBNnxpU+AkrHLGMD6pl9cEnTw+NOXkoHAK6DHLoRmKFG4L9JBJt8gB4X6E9JifYJdjGI86SBedAjvsXn2XX2I9JgmcZkTIAgyKIwfdwmd6gMttVI/5FnPhJNcR366A7g5TZbAvOM+bqIp5CBm7AqtNV9wgyW17XoyEprNVgW0yMJ7F5P+gEkohYQBlikJT1FTgqAz6zTBZVWjSBVBitG65pgJXZNDHhonWQLMugAK6Y60xFdC863y79L3Al/qT1FTgsAz6J0bfAWH1otld3nNF0HcghZzzgKnAcBlUL9BdyL5AY1nbNCcXsllOJg+owFSru1d9ZfVW4p0IWPyHOCdry+n0Zi6Lw5N0xnEcxiSPC+SUNZ3Ah1YFOsrgwQ5v4jSdPSzQV+buY3c7ncHhD3ndfjXHPVp8fFyTuVOH+kk5We9KAyqg875h2No36jjLPVfSIOiPEHN0gaaI079VhkGTM6gvMXOUsflnxFGBf3Aq6Hse/QQ4+S7aTZQfpiT0cfElYUrrcP/crQxTavqw+EEwpYfbv9dbwJSlyOTBwrNgFkwZ4dUDjnSwyhDkwntuFy7p5fUjpoTYB6vcxiLUQy78g3fxEX5BLOTCYJyAVfYjv18P+f7CMPiVIfgxiMesKTAZXmUB0sfEg+6M6IX9iG5OYoLbJ/heboNx0ALDsfyJe6Qr2IY56IdqwT/o9s/LAncAH+goJRkw0O0AAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#entity {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAD6UlEQVR4Ae3dA4xkSxjF8YfGs23btm3btm3btm3btm0buztG47/hl0rdvnXRGZ2T/MK6la/njJo1yuoHrNOHpD8PpwJEBaiAWq02N87Hp2iB0jgt+BTnY+7UBXBxCZegAiVdKrgEpdAC7Bf/WSj55FmUkhRwCZR8c0lQASycGxXkG6WCuUMKOB/NiXJ+SAGfwpfHMI2z3iEjv0Z4DL58GlJACzxJ9MVXCf60BBTgT9IhVII/KkAFZKMCRAWoAFEBKkBUgAoQFaACRAWoAFEBKkBUgAoQFaAC8r8hE+Ew3IhX8Rs+w4M4F0urgObcgHFwHIYjLg9jXhWQ3/AlvIQkacfC+cygAq6BTSfOwtqYGyvhEPwDm18xlQrINvjqsPkfc0WsnQTvw+ZaFZBt8JNhs0PM+vlh85kKyDb4k7CZLuCa38z6KsZPP4MK+Bo24wZc8y5sZko/gwp4HDarxawvoM2s70Ex/Qwq4DjYPBOzfm/YPJhtBhUwMUbAZrMGf4D/N+u6sIQKyD788bD5DzM6a5bAP7DZJp8ZVEABr8HmY4yHEk5BL2yO00MR+b/J4RfYvIIvYTMCe+nBuObciHkxDFF5FNPG7FHEBMaY4TOogKnwPNxUsG3gHjvD5ngVED/82DgBbYjKFYF7nZrsD7X+Dd0Kv8HN56jA5uyA/e6AzZIqIP6BOJtenIgC9oSbY2P2fAs2k6kA/8AXwM3XWMJZdwTcHNBg33/tf0z6L8g/7IZwcyvGjlh/Omyq2NmzbmrYvK8CHGw9Bv6GzfMoxFx3GWwq2NxZsw9s7lEBDrbeFjbfY5KA60bFLbDpxjpmzYuw2VUFONj6EdgckvAhiwdg04GVMIXzX1OL/7kFFfBFln8TWV/GM7BpwbWwuca/hwpocX6Pl1K+huh1NMriKsDDc6drxpT7TIgP4ctH0deqgPdgs2WGvSbHV3BzqApA4OfTPYJRMzyb9iHcfIep/depgBXg5tgU+0yCDxCVzzCpCvD/P/8ibKo4BOUED+D9CTctsHkP46sAB9vPgVa4+Qm7Yw6UzfrRMBMOxjtw04udsLinhFf9D3HowbilMRxRqeAn/IpeRKUTG5p9V0QHbJ5GWQX4fxLuRAVp8hBm8ey7Drph8wAKKsA//Fy4I7CIFtwd8Aq6LTz73YrRVED0jZgAC2NTHIGrcAPOwAFYE2W9RWloUQEqQFSAChAVoAJEBagAUQEqQFSAChAVoAJEBaiADFRA3x/kpoPc+v4oQx1leD6U5uT8vj/OVsfZ6kDnPsolfXykuY40HyiH+utQf8/fhPPxKVrQOEoLPsX59nd+TAF9QFRAX1MBKkDq6/XPnDi8/FwAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#mime {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABFElEQVR4Ae3aIWhyURTA8a99aO+sdxhrBnEMhu2lFdNrwpL59Wgz2asd7OCCPZjsPf2WLXM8z7te2fnDyfrDe/TC89/r5/tDTwKqB2CFg/IdsLoJgIX7t+gFwEw9zfoAlupp2QfQueyMZuilRIOzy7oIwK7UNwt2QwC6coDrr50ArMW1LgrARHyT0p/AXlz7u+wAJhHzJ5c4AZijC5p5UQBG4huVBIzFNy59hJrAI9TkEtcPyB+y6q4SeZnbiGuTS5yARwPgA/sfZlktAE9+16JWwH98ud5LzUfo+coF7S2XOAEJSEAoYFsQsB0CcEJb4M23OEUAWvXU9gFM1dO072PWzv3rbn3Q3eCofEc0+VeDgScB37wfCK8zzld3AAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li#less {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABgCAYAAACQVxWOAAAE7klEQVR4AezdA5Qk6RKG4e1e27Zt7x6tbdu2bdu2bdu2bdvmu86J/Suz/5iMyjPV33fOc++qYmrecc10d3/zbb7w//z222+DYVVchlfwHTp93+EVXIZVMZjtUodU7JXw9m/a21gpLDjH+8eRKE6jCfqPCH4Y0tMOrTU4B5dE+bQlawnOoQHwEkqn0YhWdQRfCmW7Cdtj3Q63PW5C2ZaqI/gZaLVNzAM63h+fZ6RHqzqCP4/Ubuotka2Sr+nP1RH8C6S2ZS8OviVS+6KO4K22TC8OvgySU3AFV3AFV3AFV3AFV/COpeB+Cq7gCq7gCq7giyG1H2OCK/h4SO0hBY+LfhyK+wnzxgVX8C6sgQtwImZw3AkLLgqu4KLgCq7gouBBFFzB+WcDY3ljopp+oTE4ZsGCWBbLlxi65M4YmA9Llt9Jfz5C7zqCjwC7Tfsy9Jg4H7+gp5sycWcrPAXvNrM3I+42GvyPx+Ib5G7Kwo0BcQ78s2EC7zYWnMetDc9s8I3Aagtj7nZAcB4zDX6C3Re4BAdiV2yHbRNG+PvOQHgbdh/iBOyFHbFtD0z/x83Iu00GvxZ2d2Fsxxec3QcYMedO/N02Bzc3poTdaxjQEWY52F3kDxJ7t6ng28JuG2eYhWF3i+dW/N3mgl8Pu/mdYUaG3Y9YA92em5F3mwr+LOxOxl4ZRi7cewGpfYyHcCtuLrgG5+NQLI+B7XOMvNtE8A+RmPunhbPjJ3j3Opa1zzPqbhPBP60juLm5WV/G+dV+txZy1xF8eNhtlhn8kbqCm7tj4XDcj7ccoT5A/1F3vcGHhN0OmcEvhN2OWCjDkD34dLoxmDEiZsEVSG2KqLve4APCbr/M4PvDbqs2/xGI/nEf7FYPu5sR3B79FsWdnvmk1oDddQ38uZM9YXd43F1/8CcTry8MlPm69wewW7HNwU+D3T5xd/3B94HdbZgVA2a8LGv3LY7GZOgODD0w1sBPsFs17q4/+JB4H6l9j3fwPB7DowWbm1fjXker/Yx38QQeTZigcGtZPNoDT+I1fIvUvsKQsXczgpvo6yJ3ByV+YfFR46+Hm19PRN11BzdfA17LDG5vjItH0XTwA/+5F3HXGzwVfRBsgxvwMj7BN/ilIri9My32x614DG/gy4Dgv+IHfI4XcQKmM88n9K4/uLgouIIruCh4e9BgRuyMjTGygsfG3hy/4p99hCkVPCb2yPgBdjcreEzwBZHaNwquN/1WcAVXcAVXcAVX8H454OTYGPvjhB64ScF9oRfH0/BMwTNCD4rzYafgAbEHxB1g7Qiu4MeAKXg7Yk+NXxG1zxS8z+Dnomyf4hE83MLzKNuXCt7nHy76Aql9jRUqHj82nkTZ3lTw4ncnrbdpxWNnwQcwK3vjLwWfH602asnjVsB3qNqh6FJw5y/H/4iHPVC1n7Cu4zkpuPkTY+ejap9iTu9zgoLzt6PgAVTtRef7glFw8wPrm6jabRjO+1yg4PzfIvgKVTvZ8Xb/Cm62NX5B2X7B1vaupQ9+Z4I79xUWadcfdXsOqd3US4K/ialzPi19AFN/8Acwiu/T1IfoPQE5Ox+DtCe0Pgj1HuiKD6wPs/6dedWwmeB/Rz8Mnbz3MUuTsW3w/nEkOnFPYuwmAlupH+1XwtvolF2NIZuPbYKb6INhVVyGV/Ad+qV9gBew2e+D7dsfLBgAmrljlJj2G28AAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}
.toolbar .list li:hover {
  color: rgba(255, 255, 255, .6);
}
.toolbar .list li.selected {
  background-color: rgba(255, 255, 255, .1);
  color: #FFF;
}
.toolbar .list li.selected::after {
  width: 4px;
  height: 50px;
  background: #2196F3;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
}
.toolbar .list li.selected a{
  color: #FFF;
}
.toolbar .copyright-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .08);
  text-align: center;
  font-size: 12px;
  padding-top: 10px;
  font-size: 0;
  text-indent: -9999;
}
.toolbar .copyright-footer p {
  line-height: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
.content {
  flex-grow: 1;
  height: 100%;
  background: #F4F5F5;
}
.content-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.transition-page {
  width: calc(100% - 50px);
  height: 100%;
  position: fixed;
  left: 50px;
  top: 0;
  display: block;
}
.transition-page-load {
  width: 100%;
  height: 100%;
  background: #F4F5F5;
  animation: hide 1s forwards;
  -webkit-animation: hide 1s forwards;
}

.loading {
  margin: 0 auto;
  padding: 10px 0;
  position: relative;
  font: normal 18px/1em Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  color: #CCC;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loading::after {
  content: "";
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-animation: wormsPong cubic-bezier(0.77, 0, 0.175, 1) 0.8s infinite;
  -webkit-animation: wormsPong cubic-bezier(0.77, 0, 0.175, 1) 0.8s infinite;
  animation: wormsPong cubic-bezier(0.77, 0, 0.175, 1) 0.8s infinite;
  background-color: #F1D064;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 4px;
}
.footer-none {
  position: fixed;
  bottom: -200px;
  left: 0;
}
@-moz-keyframes wormsPong {
  25% {
    width: 100%;
  }

  50% {
    width: 0;
    left: auto;
    right: 0;
  }

  75% {
    width: 100%;
  }

  100% {
    width: 0;
    right: auto;
    left: 0;
  }
}

@-webkit-keyframes wormsPong {
  25% {
    width: 100%;
  }

  50% {
    width: 0;
    left: auto;
    right: 0;
  }

  75% {
    width: 100%;
  }

  100% {
    width: 0;
    right: auto;
    left: 0;
  }
}

@keyframes wormsPong {
  25% {
    width: 100%;
  }

  50% {
    width: 0;
    left: auto;
    right: 0;
  }

  75% {
    width: 100%;
  }

  100% {
    width: 0;
    right: auto;
    left: 0;
  }
}
@-webkit-keyframes slide-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-left {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@-webkit-keyframes hide {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hide {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}