body{padding:0!important}[ripple]{position:relative;overflow:hidden}[ripple] .ripple--container{position:absolute;top:0;right:0;bottom:0;left:0}[ripple] .ripple--container span{transform:scale(0);border-radius:100%;position:absolute;opacity:.75;background-color:rgba(33,150,243,.5);animation:ripple 1s}@keyframes ripple{to{opacity:0;transform:scale(2)}}body,html{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{height:100%;transition:padding-top 150ms;padding-top:56px}.action-bar{position:fixed;top:0;z-index:999;color:rgba(0,0,0,.9);height:100%;display:flex;justify-content:space-between;align-items:center;background-color:#fff;box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)}.action-bar .title{display:flex;justify-content:center;align-items:center}.action-bar .title h3{font-weight:400;margin:0;user-select:none;cursor:pointer}.action-bar .title i{color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;position:relative;height:32px;border-radius:50%;margin:16px 32px 16px 16px;cursor:pointer;user-select:none;top:27rem}.action-bar .icons{display:flex;justify-content:space-between;align-content:center}.action-bar .icons i{transition:margin 150ms;color:rgba(0,0,0,.7);display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;user-select:none;margin:16px;cursor:pointer;display:flex;justify-content:center;align-items:center}.side-nav{transform:translateX(-320px);overflow-x:hidden;z-index:1000;position:fixed;top:0;left:0;height:100vh;transition:max-width .2s,transform .2s cubic-bezier(.4,0,.6,1);min-width:240px;max-width:280px;box-shadow:0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12)}.side-nav header{transition:padding 150ms;background:url(https://lh3.googleusercontent.com/-OpzXLwUodco/VUzSNKm5x5I/AAAAAAAANtw/QlXckPJDTxs/w1366-h768/Wallrox%2B%25281%2529.png) no-repeat;background-size:320px 180px;background-color:#fff;width:auto}.side-nav header .rich-area{display:flex;flex-direction:column;justify-content:center;padding:0 16px 8px 16px;height:56px}.side-nav header .rich-area .email{display:flex;justify-content:space-between;align-items:center;color:#fff}.side-nav header .rich-area .email i{border-radius:50%;user-select:none;height:32px;width:32px;display:flex;justify-content:center;align-items:center;cursor:pointer}.side-nav header .rich-area a{font-size:15px;text-decoration:none;color:#000;box-shadow:0,0,0}.side-nav header .avatars-container{padding:16px 16px 0 16px;display:flex;justify-content:space-between}.side-nav header .avatars-container img{user-select:none;border-radius:50%}.side-nav nav ul{background-color:#fff;padding:8px 0 0 0;margin:0;list-style:none}.side-nav nav ul hr{background-color:rgba(0,0,0,.15);height:1.2px;border:0}.side-nav nav ul #subheader{user-select:none;pointer-events:none;color:rgba(0,0,0,.5)}.side-nav nav ul li{user-select:none;color:rgba(0,0,0,.9);padding:0 16px;font-weight:500;font-size:14px;cursor:pointer;height:48px;display:flex;align-items:center;margin:0;padding:0 16px}.side-nav nav ul li.active{color:#2196f3}.side-nav nav ul li.active i{color:#2196f3}.side-nav nav ul li i{color:rgba(0,0,0,.6);padding-right:32px}@media all and (max-width:335px){.action-bar .icons i{margin:8px}}@media all and (min-width:960px){body{padding-top:64px}.action-bar .title i{margin:24px 32px 24px 24px}.action-bar .icons i{margin:24px}.side-nav{max-width:320px}.side-nav header .rich-area{padding:0 24px 8px 24px}.side-nav header .avatars-container{padding:24px 24px 0 24px}}@media all and (max-width:320px){.action-bar{height:56px}.action-bar .title i{margin:0 8px}.action-bar .icons i{margin:0 6px}}