:root{--color-primary: #2a9df4;--color-primary-light: #187bcd;--color-primary-dark: #1167b1;--color-grey-light-2: #f4f2f2;--color-grey-light-1: #faf9f9;--color-grey-light-3: #f0eeee;--color-grey-light-4: #ccc;--color-grey-dark-1: #333;--color-grey-dark-2: #777;--color-grey-dark-3: #999;--color-online: #2c962c;--color-offline: rgb(170, 22, 22);--color-chat-bubble: #00bfb6}*,*::after,*::before{margin:0;padding:0;-webkit-box-sizing:inherit;box-sizing:inherit}html{font-size:62.5%;-webkit-box-sizing:border-box;box-sizing:border-box}body{font-family:"Open Sans", sans-serif;font-weight:400;line-height:1.6;background-image:-webkit-gradient(linear, left top, right bottom, from(var(--color-primary-light)), to(var(--color-primary-dark)));background-image:-o-linear-gradient(left top, var(--color-primary-light), var(--color-primary-dark));background-image:linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));background-size:cover;background-repeat:no-repeat;min-height:100vh;color:var(--color-grey-dark-2)}.logo{font-size:3rem;margin-left:3rem;font-weight:600;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-primary-light)), to(var(--color-primary-dark)));background-image:-o-linear-gradient(left, var(--color-primary-light), var(--color-primary-dark));background-image:linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;text-transform:uppercase}.logo:hover{letter-spacing:1rem}.search{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.search__input{font-family:inherit;font-size:inherit;background-color:var(--color-grey-light-2);border:none;padding:0.7rem 2rem;border-radius:100px;width:90%;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;margin-right:-3.25rem}.search__input:focus{width:100%;outline:none;background-color:var(--color-grey-light-4)}.search__input::-webkit-input-placeholder{font-weight:100;color:var(--color-grey-dark-2)}.search__input::-moz-placeholder{font-weight:100;color:var(--color-grey-dark-2)}.search__input:-ms-input-placeholder{font-weight:100;color:var(--color-grey-dark-2)}.search__input::-ms-input-placeholder{font-weight:100;color:var(--color-grey-dark-2)}.search__input::placeholder{font-weight:100;color:var(--color-grey-dark-2)}.search__icon{height:2rem;width:2rem;fill:var(--color-grey-dark-3)}.search__button{border:none;background-color:var(--color-grey-light-2);-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}.search__button:focus{outline:none}.search__button:active{-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px)}.search__input:focus+.search__button{background-color:var(--color-grey-light-4)}.user-nav{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch}.user-nav>*{padding:0 1rem;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.user-nav>*:hover{background-color:var(--color-grey-light-2)}.user-nav__icon-box{position:relative}.user-nav__icon{height:2rem;width:2rem;fill:var(--color-grey-dark-2)}.user-nav__notification{font-size:0.8rem;height:1.75rem;width:1.75rem;border-radius:50%;background-color:var(--color-primary);color:#fff;position:absolute;top:1.2rem;right:0rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.user-nav__user{position:relative}.user-nav__user:hover .user-nav__dropdown-menu{visibility:visible;opacity:1}.user-nav__dropdown-menu{visibility:hidden;opacity:0;width:24rem;position:absolute;font-size:1.6rem;top:7rem;left:-15rem;-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border-radius:4px;padding:1rem;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.user-nav__dropdown-item{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--color-grey-light-3);border-radius:4px}.user-nav__dropdown-item p{margin-left:2rem}.user-nav__dropdown-item .icons{display:inline-block;width:2rem;height:2rem;stroke-width:0;stroke:currentColor;fill:var(--color-primary-light)}.user-nav__dropdown-item:hover{background-color:var(--color-primary);color:#fff}.user-nav__dropdown-item:hover .icons{fill:#fff}.side-nav{list-style:none;font-size:1.4rem;margin-top:3.5rem}.side-nav__item{position:relative}.side-nav__item::before{content:"";position:absolute;top:0;left:0;height:100%;width:3px;background-color:var(--color-primary);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transition:width 0.2s cubic-bezier(1, 0, 0, 1) 0.2s,-webkit-transform 0.2s;transition:width 0.2s cubic-bezier(1, 0, 0, 1) 0.2s,-webkit-transform 0.2s;-o-transition:transform 0.2s,width 0.2s cubic-bezier(1, 0, 0, 1) 0.2s;transition:transform 0.2s,width 0.2s cubic-bezier(1, 0, 0, 1) 0.2s;transition:transform 0.2s,width 0.2s cubic-bezier(1, 0, 0, 1) 0.2s,-webkit-transform 0.2s}.side-nav__item:hover::before{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);width:100%}.side-nav__item:active::before{background-color:var(--color-primary-light)}.side-nav__link:link,.side-nav__link:visited{text-decoration:none;color:var(--color-grey-light-1);text-transform:uppercase;padding:1.5rem 3rem;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.legal{font-size:1.2rem;text-align:center;padding:2.5rem;color:var(--color-grey-light-4)}.misc__nav{display:-webkit-box;display:-ms-flexbox;display:flex}.misc__nav-container{-webkit-box-flex:0;-ms-flex:0 0 30%;flex:0 0 30%;background-color:#797ef6;height:20rem;position:relative;overflow:hidden}.misc__nav-img{width:100%;height:20rem;margin-top:0rem;background-size:cover;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.misc__nav-quote{font-size:2rem;color:#fff;-ms-flex-wrap:wrap;flex-wrap:wrap;display:block;text-align:center;position:absolute;padding-top:3.5rem;top:20rem;height:20rem;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;left:0}.misc__nav-quote span{display:block}.misc__nav-container:hover .misc__nav-img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.misc__nav-container:hover .misc__nav-quote{background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.493)), to(rgba(0,0,0,0.5)));background-image:-o-linear-gradient(rgba(0,0,0,0.493), rgba(0,0,0,0.5));background-image:linear-gradient(rgba(0,0,0,0.493), rgba(0,0,0,0.5));top:0rem}.misc__nav-music{-webkit-box-flex:1;-ms-flex:1;flex:1;background-color:#1aa7ec;height:20rem}.misc__nav-music-1{height:100%;padding:1rem}h2{text-align:center;font-size:4rem;color:#000;border-bottom:1px solid var(--color-grey-dark-1);font-weight:300}.main__features{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#c1e2fa;height:100%}.main__features>*{background-color:#86c5f3;margin:2.5rem;height:50rem}.main__features-friend{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;font-size:5rem;font-weight:600;border-radius:7px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:50rem}.main__features-friend-main{height:100%;display:grid;grid-template-columns:repeat(1, 1fr);grid-template-rows:100px}.main__features-friend__list{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-grey-light-2);border-radius:10px}.main__features-friend__list .friend{padding:1rem;padding-left:5rem;text-transform:uppercase;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;color:#000;font-size:1.3rem;background-color:var(--color-grey-light-1);position:relative;border-radius:10px;border-bottom:1px solid var(--color-grey-dark-1);height:4rem;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}.main__features-friend__list .friend:hover{background-color:var(--color-grey-dark-1);color:#fff}.main__features-friend__list .friend:not(:last-child){margin-bottom:0.5rem}.main__features-friend__list .friend .status{text-transform:uppercase}.main__features-friend__list .friend .status-online{color:var(--color-online)}.main__features-friend__list .friend .status-offline{color:var(--color-offline)}.main__features-friend__list:not(:last-child){margin-right:2rem;border-right:1px solid var(--color-grey-light-1)}.main__features-todoist{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;font-size:5rem;font-weight:600;border-radius:7px}.main__features-calendar{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;font-size:5rem;font-weight:600;border-radius:7px;overflow:hidden}.main__features-pomodoro{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;font-size:5rem;font-weight:600;border-radius:7px}.main__features-pomodoro-start,.main__features-pomodoro-reset{border:none;color:var(--color-primary-dark);font-size:1.2rem;border-bottom:1px solid currentColor;padding:2px;background-color:transparent;cursor:pointer;display:inline-block;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}.main__features-pomodoro-start:hover,.main__features-pomodoro-reset:hover{color:var(--color-grey-dark-1)}.main__features-pomodoro-start:active,.main__features-pomodoro-reset:active{-webkit-transform:translateY(0.2rem);-ms-transform:translateY(0.2rem);transform:translateY(0.2rem)}.main__features-chat{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:7px}.main__features-chat-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.main__features-chat-heading{-webkit-box-flex:0;-ms-flex:0 0 5%;flex:0 0 5%;font-size:2rem;color:#000;text-align:center;text-transform:uppercase}.main__features-chat-display{height:60rem;-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;background-color:var(--color-grey-light-2);display:-webkit-box;display:-ms-flexbox;display:flex;border-bottom:1rem solid var(--color-grey-light-1);-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.main__features-chat-form{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex}.main__features-chat-form .form-type{width:100%}.main__features-chat-form .form-type .chat__input{font-family:inherit;font-size:inherit;background-color:var(--color-grey-light-2);border:none;border-bottom-left-radius:7px;border-bottom-right-radius:7px;padding:0.7rem 2rem;height:100%;width:100%;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s;margin-right:-3.25rem;outline:none}.countdown-container{display:-webkit-box;display:-ms-flexbox;display:flex}.countdown-container>*:not(:last-child){margin-right:2.5rem}.countdown-el{text-align:center}.big-text{color:#000}.icon{font-size:3.5rem;position:absolute;top:1px;left:8px}.box3{width:200px;margin:10px auto;border-radius:10px;background:var(--color-chat-bubble);color:#fff;padding:20px;text-align:center;font-weight:900;font-size:1.3rem;font-family:inherit;position:relative}.sb1{margin-left:2rem}.sb1:before{content:"";width:0px;height:0px;position:absolute;border-left:15px solid transparent;border-right:15px solid var(--color-chat-bubble);border-top:15px solid var(--color-chat-bubble);border-bottom:15px solid transparent;left:-16px;top:0px}.sb2{margin-right:2rem}.sb2:before{content:"";width:0px;height:0px;position:absolute;border-left:15px solid var(--color-chat-bubble);border-right:15px solid transparent;border-top:15px solid var(--color-chat-bubble);border-bottom:15px solid transparent;right:-16px;top:0px}.user-1{color:#000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-weight:400;font-size:1.5rem;padding-left:3rem;background-color:#dceffd;border-bottom:1px solid var(--color-grey-light-1)}.user-icon{font-size:4rem}.hide{opacity:1;visibility:hidden;display:none}.container{margin:8rem auto;background-color:var(--color-grey-light-2);max-width:120rem;-webkit-box-shadow:0 2rem 10rem rgba(0,0,0,0.5);box-shadow:0 2rem 10rem rgba(0,0,0,0.5);min-height:80rem;overflow:hidden;border-radius:3px}.header{height:7rem;font-size:1.4rem;background-color:#fff;border-bottom:1px solid var(--color-grey-dark-2);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.content{display:-webkit-box;display:-ms-flexbox;display:flex}.sidebar{-webkit-box-flex:0;-ms-flex:0 0 18%;flex:0 0 18%;background-color:var(--color-grey-dark-1);min-height:80rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.features{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1}