*{width:100%;margin:0;padding:0;box-sizing:border-box;overflow-x:hidden;overflow-y:visible}body{display:grid;grid-template-columns:100%;grid-template-rows:auto;grid-template-areas:"header" "nav" "main"}header{width:100vw;display:grid;grid-area:header;grid-template-columns:2fr 50px minmax(auto, 150px);padding:10px 5px}h1{margin:auto 0 auto 5px}main{display:grid;grid-area:main}.profile-tag{display:flex;flex-direction:row;justify-content:flex-end;margin-left:auto;border-left:1px solid #fff}.bell-container{margin-left:auto}.main-header{display:grid;grid-template-columns:1fr 2fr;height:50px}.headline{width:100%;margin:auto}.tab{border-left:1px solid #cdcdcd;border-bottom:1px solid #cdcdcd;background-color:#f5f5f5}.alert{border:1px solid #7477bf;background-color:#7477bf;color:#fff;border-radius:5px;height:40px;width:95%;margin:20px auto}.alert-banner{display:grid;grid-template-columns:auto minmax(10px, 30px);grid-template-rows:20px;margin-top:9px;text-align:center}section{border-bottom:1px solid #cdcdcd}section:last-of-type{border-bottom:none;padding-bottom:20px}.traffic,.daily-traffic,.mobile-users{padding-bottom:20px}h3{margin:20px 15px 10px}.traffic{width:100%}.social-container{border:1px solid #cdcdcd;background-color:#f5f5f5;border-radius:5px;width:90%;margin:15px auto;padding:20px 0;display:grid;grid-template-columns:1fr 2fr}.members-container{width:90%;margin:auto;padding:20px 0;border-bottom:1px solid #cdcdcd;display:flex;flex-direction:column}.members-container:last-of-type{border-bottom:none}.arrow{display:none}*{font-family:'Roboto';font-size:1em;font-weight:300}header{background-color:#7477bf;color:#fff;vertical-align:middle}h1{font-size:1.4rem}span{font-weight:500}nav{background-color:#4d4c72}.profile-name{font-size:.8rem;margin:auto 0;display:flex;flex-direction:column}.headline{text-align:center;font-weight:400;font-size:1.1rem}h3{font-weight:400;font-size:1.1rem;text-transform:uppercase}strong{font-weight:500}.social-title{color:#7477bf;font-size:1.5rem;font-weight:400}.member-numbers{color:grey;font-size:3rem;font-weight:300}.social-text{margin-left:10px}.members-text{text-align:center}.members-text a{text-decoration:none;color:#7477bf}.date{text-align:center}.alert-banner-close{border:none;background-color:transparent;color:#fff}.toggle-settings{display:grid;grid-template-columns:2fr 1fr;padding:12px 0 12px}label{margin:auto auto auto 10px}.toggle-button{width:100%;margin-top:5px;position:relative;overflow-y:hidden}.on-off-label{position:absolute;display:flex;flex-direction:row;font-size:12px;font-family:sans-serif;transition:all 0.4s ease-in-out;top:8px;left:20px}.on-off-label::after{content:attr(data-off);color:#fff;opacity:1;transition:all 0.4s ease-in-out}.on-off-label::before{content:attr(data-on);color:#fff;opacity:0;transition:all 0.4s ease-in-out}input:checked ~ .on-off-label::after{opacity:0}input:checked ~ .on-off-label::before{opacity:1}input{-webkit-appearance:none;position:relative;width:80px;height:30px;margin:auto;border-radius:25px;background-color:#cdcdcd;transition:background .3s;outline:none;cursor:pointer}input::after{content:"";position:absolute;top:50%;left:20%;transform:translate(-50%, -50%);border-radius:50%;height:1.25em;width:1.25em;background-color:#fff;transition:left .3s}input:checked{background-color:#7477bf}input:checked::after{left:80%}.button-primary{display:block;height:50px;border:1px solid #7477bf;border-radius:5px;background-color:#7477bf;color:#fff;text-transform:uppercase}#send{width:90%;margin:auto auto 15px auto}.settings-button{width:100%;display:grid;grid-template-columns:repeat(2, 1fr);margin-left:5%}#save{width:80%}#cancel{width:80%;height:50px;border:1px solid grey;border-radius:5px;background-color:grey;color:#fff;text-transform:uppercase}form{width:100%}.form-field{width:90%;display:block;margin:20px auto 15px auto;height:50px;border:1px solid #cdcdcd;border-radius:5px;background-color:#f5f5f5;padding-left:10px}.form-area{width:90%;display:block;margin:auto auto 15px auto;height:150px;border:1px solid #cdcdcd;border-radius:5px;background-color:#f5f5f5;padding-left:10px;padding-top:10px}.profile-img{border-radius:50%;width:40px;margin:auto 5px}.profile-image{width:70px;border-radius:50%;margin:auto}.widget-container-full,.widget-container-half{width:95vw;margin:auto}nav{padding:10px 10% 10px;display:grid;grid-area:nav;grid-gap:10px;grid-template-columns:repeat(4, 1fr)}nav a{padding-left:7px;margin:auto}.traffic-nav{list-style:none;display:grid;grid-template-columns:repeat(4, 1fr)}.traffic-nav-link{margin:auto;text-align:center}.traffic-nav-link-selected{width:auto;padding:5px 10px;border-radius:20px;background-color:#81c98f;color:#fff}.bell-container{width:100%;display:flex;justify-content:right}.notifications{display:none}.notification-bell{margin:auto;width:30px}.bell-container:hover{-webkit-animation:ring 4s .7s ease-in-out infinite;-webkit-transform-origin:50% 4px;-moz-animation:ring 4s .7s ease-in-out infinite;-moz-transform-origin:50% 4px;animation:ring 4s .7s ease-in-out infinite;transform-origin:50% 4px}@-webkit-keyframes ring{0%{-webkit-transform:rotateZ(0)}1%{-webkit-transform:rotateZ(30deg)}3%{-webkit-transform:rotateZ(-28deg)}5%{-webkit-transform:rotateZ(34deg)}7%{-webkit-transform:rotateZ(-32deg)}9%{-webkit-transform:rotateZ(30deg)}11%{-webkit-transform:rotateZ(-28deg)}13%{-webkit-transform:rotateZ(26deg)}15%{-webkit-transform:rotateZ(-24deg)}17%{-webkit-transform:rotateZ(22deg)}19%{-webkit-transform:rotateZ(-20deg)}21%{-webkit-transform:rotateZ(18deg)}23%{-webkit-transform:rotateZ(-16deg)}25%{-webkit-transform:rotateZ(14deg)}27%{-webkit-transform:rotateZ(-12deg)}29%{-webkit-transform:rotateZ(10deg)}31%{-webkit-transform:rotateZ(-8deg)}33%{-webkit-transform:rotateZ(6deg)}35%{-webkit-transform:rotateZ(-4deg)}37%{-webkit-transform:rotateZ(2deg)}39%{-webkit-transform:rotateZ(-1deg)}41%{-webkit-transform:rotateZ(1deg)}43%{-webkit-transform:rotateZ(0)}100%{-webkit-transform:rotateZ(0)}}@-moz-keyframes ring{0%{-moz-transform:rotate(0)}1%{-moz-transform:rotate(30deg)}3%{-moz-transform:rotate(-28deg)}5%{-moz-transform:rotate(34deg)}7%{-moz-transform:rotate(-32deg)}9%{-moz-transform:rotate(30deg)}11%{-moz-transform:rotate(-28deg)}13%{-moz-transform:rotate(26deg)}15%{-moz-transform:rotate(-24deg)}17%{-moz-transform:rotate(22deg)}19%{-moz-transform:rotate(-20deg)}21%{-moz-transform:rotate(18deg)}23%{-moz-transform:rotate(-16deg)}25%{-moz-transform:rotate(14deg)}27%{-moz-transform:rotate(-12deg)}29%{-moz-transform:rotate(10deg)}31%{-moz-transform:rotate(-8deg)}33%{-moz-transform:rotate(6deg)}35%{-moz-transform:rotate(-4deg)}37%{-moz-transform:rotate(2deg)}39%{-moz-transform:rotate(-1deg)}41%{-moz-transform:rotate(1deg)}43%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(0)}}@keyframes ring{0%{transform:rotate(0)}1%{transform:rotate(30deg)}3%{transform:rotate(-28deg)}5%{transform:rotate(34deg)}7%{transform:rotate(-32deg)}9%{transform:rotate(30deg)}11%{transform:rotate(-28deg)}13%{transform:rotate(26deg)}15%{transform:rotate(-24deg)}17%{transform:rotate(22deg)}19%{transform:rotate(-20deg)}21%{transform:rotate(18deg)}23%{transform:rotate(-16deg)}25%{transform:rotate(14deg)}27%{transform:rotate(-12deg)}29%{transform:rotate(10deg)}31%{transform:rotate(-8deg)}33%{transform:rotate(6deg)}35%{transform:rotate(-4deg)}37%{transform:rotate(2deg)}39%{transform:rotate(-1deg)}41%{transform:rotate(1deg)}43%{transform:rotate(0)}100%{transform:rotate(0)}}.notification-list{display:none;flex-direction:column;position:absolute;border:1px solid #4d4c72;background-color:#4d4c72;max-width:300px;margin:30px auto auto -165px}.notifications ul li{display:grid;grid-template-columns:minmax(10px, 30px) auto minmax(10px, 30px);grid-template-rows:auto;padding:20px 0 20px 15px;border-bottom:1px solid #fff}.notifications ul li:last-of-type{border-bottom:none}.notification-circle{height:10px;width:10px;border:1px solid #81c98f;background-color:#81c98f;border-radius:50%;margin-top:5px}.bell{fill:#fff}.alert{stroke:#81c98f;fill:#81c98f}.nav-icon{width:40px;fill:#fff}.social-image{width:80px;height:auto;fill:#fff;background-color:#7477bf;border-radius:50%;margin:0 auto;overflow-y:hidden}@media (min-width: 768px){body{grid-template-columns:55px 1fr;grid-template-rows:1fr auto;grid-template-areas:"header header" "nav main"}nav{grid-template-columns:55px;grid-template-rows:repeat(4, 50px);padding:10px 0}main{grid-template-columns:50% 50%}.alert{grid-column:1/ span 2}.alert-banner{text-align:left;margin-left:10px}.traffic-header{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.widget-container-full{width:90vw;margin:auto}.widget-container-half{width:45vw}.main-header,.traffic,.social-stats{grid-column:1/ span 2}.daily-traffic{grid-column:1/ span 1;border-right:1px solid #cdcdcd}.mobile-users{grid-column:2/ span 1}.recent-activity,.settings,.members,.message{grid-column:1/ span 2}.social-stats{padding-bottom:20px}.social-container{width:95%;margin:auto;padding-left:10px}.social-stat-container{display:grid;grid-template-columns:repeat(3, 1fr)}.social-image{width:60px;height:60px}.social-title{font-size:1.2rem}.social-text{margin:auto auto auto 5px}.member-numbers{font-size:2rem}.members-container{width:95%;padding:20px 0;display:grid;grid-template-columns:70px auto 70px}.arrow{display:flex;margin:auto auto auto 50px;font-size:1.2rem;color:#7477bf}.members-text{text-align:left;margin:auto 0 auto 15px}.date{margin:auto}.form-field,.form-area,#send{width:95%;margin:10px auto}.toggle-settings{grid-template-columns:1fr 2fr}.on-off-label{left:30px}#email,#public{margin-left:10px}.settings-button{margin-left:2.5%}#save,#cancel{width:90%}}@media (min-width: 1024px){.traffic{margin:auto}.daily-traffic,.members,.message{grid-column:1/ span 1}.mobile-users,.recent-activity,.settings{grid-column:2/ span 2}.recent-activity{border-left:1px solid #cdcdcd}.toggle-settings{grid-template-columns:repeat(2, 1fr)}#timezone{margin-top:39px;margin-bottom:15px}#email,#public{margin-left:10px}.settings-button{margin-top:15px}section:last-of-type{padding-bottom:0;border-left:1px solid #cdcdcd}.message{border-bottom:none}}