@import url(https://fonts.googleapis.com/css?family=Open+Sans:600,400);.frame{position:absolute;top:50%;left:50%;width:400px;height:400px;margin-top:-200px;margin-left:-200px;border-radius:2px;box-shadow:1px 2px 10px 0px rgba(0,0,0,0.3);background:#264057;color:#666666;font-family:'Open Sans', Helvetica, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.panel{position:absolute;z-index:2;height:300px;width:300px;top:50px;left:50px;background:#fff;border-radius:3px;overflow:hidden;box-shadow:10px 10px 15px 0 rgba(0,0,0,0.3);transition:all .5s ease-in-out}.panel.show-menu{transform:translate3d(150px, 0, 0)}.panel .header{height:60px;width:100%;background:#5F98CD}.panel .header .menu-icon{position:absolute;width:29px;height:15px;top:23px;left:20px;cursor:pointer}.panel .header .menu-icon:hover .dash-top,.panel .header .menu-icon:hover .dash-bottom,.panel .header .menu-icon:hover .dash-bottom,.panel .header .menu-icon:hover .circle{background:#fff}.panel .header .menu-icon .dash-top,.panel .header .menu-icon .dash-bottom{position:absolute;width:20px;height:3px;top:0;left:0;background:#B2DAFF;border-radius:3px;transition:all .2s ease-in-out}.panel .header .menu-icon .dash-bottom{width:29px;top:auto;bottom:0}.panel .header .menu-icon .circle{position:absolute;height:7px;width:7px;border-radius:4px;top:-2px;right:0;background:#B2DAFF;transition:all .2s ease-in-out}.panel .header .title{display:block;text-align:center;line-height:60px;color:#fff;font-weight:600;font-size:15px}.panel .header .search-input{box-sizing:border-box;position:absolute;top:13px;right:55px;width:230px;height:34px;border-radius:17px;border:none;background:#fff;padding:0 17px;font-size:13px;color:#666;transition:all .3 ease-in-out;transform:translateX(15px);opacity:0;pointer-events:none}.panel .header .search-input:focus{outline:none}.panel .header .search-input.active{transform:translateX(0);opacity:1;pointer-events:all}.panel .header .search-icon{position:absolute;z-index:2;font-size:21px;color:#B2DAFF;top:18px;right:20px;transition:all .3s ease;cursor:pointer}.panel .header .search-icon:hover{color:#fff}.panel .notifications{position:relative;height:100%;overflow:hidden}.panel .notifications .line{position:absolute;top:0;left:27px;bottom:0;width:3px;background:#EBEBEB}.panel .notifications .notification{position:relative;z-index:2;margin:25px 20px 25px 43px}.panel .notifications .notification:nth-child(2){animation:here-am-i 0.5s ease-out .4s;animation-fill-mode:both}.panel .notifications .notification:nth-child(3){animation:here-am-i 0.5s ease-out .6s;animation-fill-mode:both}.panel .notifications .notification:nth-child(4){animation:here-am-i 0.5s ease-out .8s;animation-fill-mode:both}.panel .notifications .notification:hover{color:#5F98CD;cursor:pointer}.panel .notifications .notification .circle{box-sizing:border-box;position:absolute;height:11px;width:11px;background:#fff;border:2px solid #5F98CD;box-shadow:0 0 0 3px #fff;border-radius:6px;top:0;left:-20px}.panel .notifications .notification .time{display:block;font-size:11px;line-height:11px;margin-bottom:2px}.panel .notifications .notification p{font-size:15px;line-height:20px;margin:0}.panel .notifications .notification p b{font-weight:600}.menu{position:absolute;width:170px;height:270px;top:65px;left:50px;background:#43627D;border-radius:3px;transition:all .5s ease-in-out;transform:translate3d(20px, 0, 0)}.menu.active{box-shadow:5px 5px 8px 0 rgba(0,0,0,0.2);transform:translate3d(0, 0, 0)}.menu ul{margin:0;padding:10px 0}.menu li{color:#93B2CD;margin:0;padding:18px 17px;list-style:none;font-size:14px;line-height:14px;cursor:pointer;transition:all .3s ease-in-out}.menu li:hover{color:#fff;background:#385269}.menu li span{display:block;float:left;margin-right:8px;margin-top:-1px}.menu li .fa-gear,.menu li .fa-user,.menu li .fa-bell{margin-top:0}@feyframes here-am-i{from{transform:translate3d(0, 50px, 0);opacity:0}to{transform:translate3d(0, 0, 0);opacity:1}}