.navi-body{flex:1}.navi-body>.list{flex-flow:column;justify-content:center;margin:0;display:flex}.navi-body>.list>.list-item{margin:0 8px 8px}.navi-body>.list>.list-item>a,.navi-body>.list>.list-item>.logout{color:#fff;border-radius:5px;width:100%;height:44px;padding:0 0 0 44px;display:flex;position:relative}.navi-body>.list>.list-item>a>.icon,.navi-body>.list>.list-item>.logout>.icon{width:44px;height:100%;padding:0 8px;position:absolute;top:0;left:0}.navi-body>.list>.list-item>a>.icon svg,.navi-body>.list>.list-item>.logout>.icon svg{width:100%;height:100%;position:relative}.navi-body>.list>.list-item>a>.icon svg .real-path,.navi-body>.list>.list-item>.logout>.icon svg .real-path{fill:#fff;transition:fill .3s}.navi-body>.list>.list-item>a>.icon img,.navi-body>.list>.list-item>.logout>.icon img{border-radius:50%;width:44px;height:44px;margin-left:-8px;padding:6px}.navi-body>.list>.list-item>a>.detail,.navi-body>.list>.list-item>.logout>.detail{flex-flow:column;flex:1;padding:6px 0;display:flex}.navi-body>.list>.list-item>a>.detail .display,.navi-body>.list>.list-item>a>.detail .desc,.navi-body>.list>.list-item>.logout>.detail .display,.navi-body>.list>.list-item>.logout>.detail .desc{flex:2;align-items:center;display:flex}.navi-body>.list>.list-item>a>.detail .desc,.navi-body>.list>.list-item>.logout>.detail .desc{flex:1;font-size:10px}.navi-body>.list>.list-item>a:hover,.navi-body>.list>.list-item>a.active,.navi-body>.list>.list-item>.logout:hover,.navi-body>.list>.list-item>.logout.active{cursor:pointer;color:#1d6998;background-color:#fff;text-decoration:none;transition:all .3s}.navi-body>.list>.list-item>a:hover>.icon svg .real-path,.navi-body>.list>.list-item>a.active>.icon svg .real-path,.navi-body>.list>.list-item>.logout:hover>.icon svg .real-path,.navi-body>.list>.list-item>.logout.active>.icon svg .real-path{fill:#1d6998}.navi-body .line{background:linear-gradient(90deg,#1d6998,#fff,#1d6998);width:calc(100% - 8px);height:1px;margin:0 4px 8px}@media screen and (min-width:780px){.navi-main.toggle-width-active>.navi-body>.list>.list-item>a>.detail,.navi-main.toggle-width-active>.navi-body>.list>.list-item>.logout>.detail{opacity:0;z-index:100;color:#fff;white-space:nowrap;border-radius:3px;width:0;height:0;padding:0;transition:left .3s,opacity .3s;position:absolute;left:58px;overflow:hidden;box-shadow:0 1px 3px #0003}.navi-main.toggle-width-active>.navi-body>.list>.list-item:hover>a>.detail,.navi-main.toggle-width-active>.navi-body>.list>.list-item:hover>.logout>.detail{opacity:1;width:auto;height:44px;padding:6px 12px;display:flex;left:64px;overflow:visible}.navi-main.top-navi .navi-body{display:flex}.navi-main.top-navi .navi-body>.list{flex-flow:row;align-items:center;height:100%}.navi-main.top-navi .navi-body>.list .list-item{margin:0 0 0 8px}.navi-main.top-navi .navi-body>.list .list-item>a{height:36px;padding-left:36px;padding-right:8px}.navi-main.top-navi .navi-body>.list .list-item>a .icon{width:36px;padding:5px}.navi-main.top-navi .navi-body .line,.navi-main.top-navi .navi-body .list.user-sign{display:none}}.sandbox .navi-body>.list>.list-item>a:hover,.sandbox .navi-body>.list>.list-item>a.active,.sandbox .navi-body>.list>.list-item>.logout:hover,.sandbox .navi-body>.list>.list-item>.logout.active{color:#22aaa1}.sandbox .navi-body>.list>.list-item>a:hover>.icon svg .real-path,.sandbox .navi-body>.list>.list-item>a.active>.icon svg .real-path,.sandbox .navi-body>.list>.list-item>.logout:hover>.icon svg .real-path,.sandbox .navi-body>.list>.list-item>.logout.active>.icon svg .real-path{fill:#22aaa1}.sandbox .navi-body .line{background:linear-gradient(90deg,#22aaa1,#fff,#22aaa1)}

.navi-footer{margin:20px 0 12px}.navi-footer #account-notifs .badge{text-align:center;color:#fff;background-color:red;border-radius:50%;width:14px;height:14px;font-size:12px;line-height:14px;position:absolute;top:2px;right:2px;box-shadow:0 1px 3px #00000080}.navi-footer .account-related #account-username{position:relative}.navi-footer .account-related #account-username #account-click-box{width:100%;height:100%;position:absolute;top:0;left:0}.navi-footer .navi-footer-button{cursor:pointer;border-radius:5px;height:44px;margin:8px;padding:0 4px;display:flex}.navi-footer .navi-footer-button .icon{width:32px;height:100%;padding:4px;position:relative}.navi-footer .navi-footer-button .icon svg,.navi-footer .navi-footer-button .icon img{width:100%;height:100%}.navi-footer .navi-footer-button .icon svg .real-path,.navi-footer .navi-footer-button .icon img .real-path{fill:#fff}.navi-footer .navi-footer-button .text{color:#fff;margin:0 4px;line-height:44px}.navi-footer .navi-footer-button:hover{background-color:#fff;transition:all .3s}.navi-footer .navi-footer-button:hover .icon svg .real-path{fill:#1d6998}.navi-footer .navi-footer-button:hover .text{color:#1d6998}.navi-footer .notifications-window{z-index:525;opacity:0;background-color:#f1f2f5;width:280px;height:calc(100vh - 48px);transition:right .3s cubic-bezier(.7,.3,.1,1),opacity .3s cubic-bezier(.7,.3,.1,1);position:fixed;top:48px;right:-280px;box-shadow:-1px 0 3px #0000001a}.navi-footer .notifications-window .close-button{background-color:inherit;z-index:30;cursor:pointer;border-radius:3px 0 0 3px;justify-content:center;align-items:center;width:48px;height:48px;transition:left .3s;display:flex;position:absolute;top:0;left:0;box-shadow:-1px 1px 3px #0000001a}.navi-footer .notifications-window .close-button svg{width:100%;height:100%;padding:10px}.navi-footer .notifications-window .close-button:hover svg{box-shadow:inset 0 0 250px #0000001a}.navi-footer .notifications-window .close-button:active svg{box-shadow:inset 0 0 250px #0003}.navi-footer .notifications-window.show{opacity:1;right:0}.navi-footer .notifications-window.show .close-button{left:-48px}@media screen and (min-width:780px){.navi-main.toggle-width-active .navi-footer .navi-footer-button{justify-content:center;align-items:center}.navi-main.toggle-width-active .navi-footer .navi-footer-button .text{opacity:0;z-index:100;color:#fff;white-space:nowrap;background-color:#1d6998;border-radius:3px;width:0;height:0;padding:0;transition:left .3s,opacity .3s;position:absolute;left:60px;overflow:hidden;box-shadow:0 1px 3px #0003}.navi-main.toggle-width-active .navi-footer .navi-footer-button:hover .text{opacity:1;width:auto;height:32px;padding:0 12px;line-height:32px;display:flex;left:66px;overflow:visible}}.navi-footer .account-related,.navi-footer .account-menu{display:none}@media screen and (min-width:780px){.navi-main.top-navi .navi-footer{margin:0}.navi-main.top-navi .navi-footer .navi-footer-button{display:none}.navi-main.top-navi .navi-footer .account-related{margin:0 4px;display:flex}.navi-main.top-navi .navi-footer .account-related .block{color:#fff;border-radius:3px;align-items:center;height:36px;margin:0 4px;padding:0 0 0 36px;display:flex;position:relative}.navi-main.top-navi .navi-footer .account-related .block .icon{width:36px;height:100%;padding:6px;position:absolute;top:0;left:0}.navi-main.top-navi .navi-footer .account-related .block .icon svg,.navi-main.top-navi .navi-footer .account-related .block .icon img{width:100%;height:100%}.navi-main.top-navi .navi-footer .account-related .block .icon svg .real-path,.navi-main.top-navi .navi-footer .account-related .block .icon img .real-path{fill:#fff;transition:fill .3s}.navi-main.top-navi .navi-footer .account-related .block .icon img{border-radius:50%}.navi-main.top-navi .navi-footer .account-related .block .text{padding:0 8px 0 4px}.navi-main.top-navi .navi-footer .account-related .block:hover,.navi-main.top-navi .navi-footer .account-related .block.active{cursor:pointer;color:#1d6998;background-color:#fff;text-decoration:none}.navi-main.top-navi .navi-footer .account-related .block:hover .icon svg .real-path,.navi-main.top-navi .navi-footer .account-related .block.active .icon svg .real-path{fill:#1d6998}.navi-main.top-navi .navi-footer .account-menu{z-index:100;background-color:#fff;border-radius:3px;padding:4px 0;position:fixed;top:56px;box-shadow:3px 3px 8px #00000040}.navi-main.top-navi .navi-footer .account-menu:not(.hide){display:block}.navi-main.top-navi .navi-footer .account-menu .block{align-items:center;height:40px;margin:0 0 4px;display:flex}.navi-main.top-navi .navi-footer .account-menu .block:last-of-type{margin:0}.navi-main.top-navi .navi-footer .account-menu .block .icon{width:40px;height:100%;padding:6px}.navi-main.top-navi .navi-footer .account-menu .block .icon svg,.navi-main.top-navi .navi-footer .account-menu .block .icon img{width:100%;height:100%}.navi-main.top-navi .navi-footer .account-menu .block .icon svg .real-path,.navi-main.top-navi .navi-footer .account-menu .block .icon img .real-path{fill:#1d6998;transition:fill .3s}.navi-main.top-navi .navi-footer .account-menu .block .icon img{border-radius:50%}.navi-main.top-navi .navi-footer .account-menu .block .text{color:#1d6998;flex:1;padding:0 16px 0 4px}.navi-main.top-navi .navi-footer .account-menu .block .text .display{font-size:16px}.navi-main.top-navi .navi-footer .account-menu .block .text .desc{font-size:10px}.navi-main.top-navi .navi-footer .account-menu .block:hover{cursor:pointer;color:#fff;background-color:#1d6998;text-decoration:none}.navi-main.top-navi .navi-footer .account-menu .block:hover .icon svg .real-path{fill:#fff}.navi-main.top-navi .navi-footer .account-menu .block:hover .text{color:#fff}}.sandbox .navi-footer-button:hover .icon svg .real-path{fill:#22aaa1}.sandbox .navi-footer-button:hover .text{color:#22aaa1}.sandbox .navi-main.top-navi .navi-footer .account-related .block:hover,.sandbox .navi-main.top-navi .navi-footer .account-related .block.active{color:#22aaa1;background-color:#fff}.sandbox .navi-main.top-navi .navi-footer .account-related .block:hover .icon svg .real-path,.sandbox .navi-main.top-navi .navi-footer .account-related .block.active .icon svg .real-path,.sandbox .navi-main.top-navi .navi-footer .account-menu .block .icon svg .real-path{fill:#22aaa1}.sandbox .navi-main.top-navi .navi-footer .account-menu .block .text{color:#22aaa1}.sandbox .navi-main.top-navi .navi-footer .account-menu .block:hover{background-color:#22aaa1}.sandbox .navi-main.top-navi .navi-footer .account-menu .block:hover .icon svg .real-path{fill:#fff}.sandbox .navi-main.top-navi .navi-footer .account-menu .block:hover .text{color:#fff}
.navi-notifications{height:100%;overflow:auto}.navi-notifications .no-new-notifs{justify-content:center;align-items:center;height:100%;display:flex}.navi-notifications .notif-item{background-color:#fff;margin:20px;padding:12px;position:relative;box-shadow:0 1px 3px #0000001a}.navi-notifications .notif-item .notif-message,.navi-notifications .notif-item .notif-date{font-size:14px}.navi-notifications .notif-item.unseen:before{content:"";background-color:red;border-radius:50%;width:6px;height:6px;position:absolute;top:calc(50% - 3px);left:-12px;box-shadow:0 1px 3px #00000040}.navi-notifications .not-signed-in{flex-flow:column;flex:1;justify-content:center;align-items:center;height:100%;padding:0 12px;display:flex}.navi-notifications .not-signed-in span{margin:12px 0}
.navi-mobile{background-color:#1d6998;flex:0 0 0;height:0;transition:height .3s,flex 3.3s;display:flex;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000001a}.navi-mobile>.button{padding:0 8px;position:absolute;top:0}.navi-mobile>.button svg{width:100%;height:100%}.navi-mobile>.button svg .real-path{fill:#fff}.navi-mobile>.button.menu{left:0}.navi-mobile>.button.notifications{right:0}.navi-mobile>.button.notifications svg{padding:2px}.navi-mobile>.logo-container{flex:1}.navi-mobile>.logo-container .navi-logo{background-color:#0000}.navi-mobile>.logo-container .navi-logo .text{font-size:20px}.navi-mobile .notifications .badge{text-align:center;color:#fff;background-color:red;border-radius:50%;width:14px;height:14px;font-size:12px;line-height:14px;position:absolute;top:8px;right:8px;box-shadow:0 1px 3px #00000080}.sandbox .navi-mobile{background-color:#22aaa1}@media screen and (min-width:780px){.navi-mobile>.button,.navi-mobile>.logo-container{width:0}}@media screen and (max-width:779px){.navi-mobile{z-index:150;flex:0 0 48px;width:100%;height:48px;padding:0 44px;position:fixed}.navi-mobile button{width:48px;height:48px}}
.navi-gray-out-screen{opacity:0}@media screen and (max-width:779px){.navi-gray-out-screen.open{z-index:25;opacity:1;background-color:#000000a6;width:100%;height:100%;transition:opacity .3s;display:block;position:fixed;top:0;left:0}}
.navi-language-modal .available-languages-list{margin:0}.navi-language-modal .available-languages-list li{border-radius:3px;padding:8px 16px;transition:all .3s}.navi-language-modal .available-languages-list li:hover{cursor:pointer;color:#fff;background-color:#1d6998}.navi-language-modal .available-languages-list li:last-of-type{margin:0}.sandbox .navi-language-modal .available-languages-list li:hover{background-color:#22aaa1}