@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap);.header{display:flex;flex-direction:column;flex-shrink:0;justify-content:space-between;width:90px}.header__logo{width:60px}.nav__list{display:flex;flex-direction:column;justify-content:space-between;list-style:none}.nav__link{color:#454545;text-align:center}.nav__link button:hover{cursor:pointer}.icon{background-color:unset;border:none;color:#454545;display:block;margin:30px auto;padding:10px;position:relative}.icon:before{background-color:transparent;border-bottom-right-radius:4px;border-top-right-radius:4px;content:"";height:100%;left:0;position:absolute;top:0;width:6px}.icon--with-bg{background:#f9a109;border-radius:50%;box-sizing:content-box;color:#fff}.icon--with-bg:hover{cursor:pointer}.icon--selected:before{background-color:#f9a109;border-bottom-right-radius:4px;border-top-right-radius:4px;content:"";height:100%;left:0;position:absolute;top:0;width:6px}.icon:hover .tooltip{visibility:visible}.icon-wrapper{position:relative;text-align:center}.non-completed{background-color:#eb5757;font-size:12px;padding:3px 7px;right:18px;top:26px}.non-completed,.tooltip{border-radius:4px;color:#fff;font-family:Quicksand,sans-serif;position:absolute}.tooltip{background-color:#454545;font-size:.83rem;font-weight:500;margin-left:20px;padding:3px 16px;visibility:hidden;z-index:4}.tooltip:before{border-bottom:5px solid transparent;border-right:5px solid #454545;border-top:5px solid transparent;content:"";display:block;height:0;left:-5px;position:absolute;top:7px;width:0}@media only screen and (max-width:1100px){.header{flex-shrink:1}}@media only screen and (max-width:500px){.header{height:100%;width:60px}.non-completed{right:4px}.icon{margin:10px auto}}@media only screen and (max-height:640px){.header{height:100%}.icon{margin:10px auto}}.message{align-items:center;animation-duration:.5s;animation-fill-mode:forwards;animation-name:fade-in;border-radius:10px;bottom:10px;display:flex;flex-direction:row;margin:10px 30px 10px 0;opacity:0;padding:10px;position:fixed;z-index:102}.message p{font-family:Quicksand,sans-serif;font-size:16px;padding:0 10px}.message--error,.message--error--full-width{background-color:#eb5757;color:#fff}.message--error--full-width{left:14px;position:absolute;right:14px}.message--success,.message--success--full-width{background-color:#beefff;color:#34333a}.message--success--full-width{left:14px;margin:0 20px;position:absolute;right:14px}.add-item-card{background-color:#fafafe;display:flex;flex-direction:column;height:100%;justify-content:space-between;padding:30px 44px 34px;position:relative;row-gap:20px}.add-item-card--edit{bottom:0;left:0;position:absolute;right:0;top:0;z-index:100}.add-item-card__main{display:flex;flex-direction:column;height:100%;overflow-y:auto;padding-bottom:128px;row-gap:5px;-ms-overflow-style:none;scrollbar-width:none}.add-item-card__main::-webkit-scrollbar{display:none}.add-item-card__tag{color:#34333a;display:block;font-family:Quicksand,sans-serif;font-size:16px;margin-bottom:6px}.add-item-card__tag.error{color:red}.add-item-card__tag .add-item-card__tag{display:inline-block}.add-item-card__list{background-color:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-top:-16px;padding:6px 8px}.add-item-card__list li{list-style-type:none}.add-item-card__list-item{background:transparent;border:none;border-radius:12px;color:#828282;font-family:Quicksand,sans-serif;font-size:18px;padding:10px 24px;width:100%}.add-item-card__list-item:focus,.add-item-card__list-item:hover{background-color:#f2f2f2;color:#34333a;cursor:pointer}.add-item-card--center{background-color:#fafafe;border-radius:20px;height:unset;min-width:380px;overflow:auto;width:400px}.add-item-card--center .btn--bright{margin-top:30px}@media only screen and (max-width:480px){.add-item-card--center{height:100%;min-width:320px;width:100vw}}.add-item-card.add-item-card--center .add-item-card__main{padding-bottom:0}.add-item-card-wrapper{align-items:center;display:flex;margin:0 auto}.form__alt-box{display:flex;justify-content:center;margin-top:30px;padding:30px 10px}.heading{color:#000;font-weight:500;line-height:30px;margin-bottom:10px}@media only screen and (max-width:500px){.add-item-card{padding:24px 18px 30px}}.btns{background-color:#fff;bottom:0;display:flex;flex-direction:row;justify-content:space-evenly;left:0;padding:34px 0;position:absolute;right:0;width:100%;z-index:1}.btns--grey{background-color:#fafafe}.btns--box{padding:0;position:static;width:auto}.btn-wrapper{display:flex;flex-direction:row;justify-content:space-between}.btn{background-color:transparent;border:none;border-radius:12px;color:#34333a;font-family:Quicksand,sans-serif;font-size:16px;font-weight:700;line-height:20px;outline:none;padding:20px 26px}.btn:hover{cursor:pointer}.btn--bright-text{color:#f9a109}.btn--blue-text,.btn--bright-text{align-self:flex-start;font-size:14px;height:44px;padding:0;position:relative}.btn--blue-text{color:#80485b}.btn--bright{background-color:#f9a109;color:#fff}.btn--blue{background-color:#56ccf2;color:#fff}.btn--blue-lighter{background-color:#beefff;color:#fff}.btn--bright-input{background-color:#f9a109}.btn--bright-input,.btn--grey-input{border:none;color:#fff;padding:18px 26px;position:absolute;right:44px}.btn--grey-input{background-color:#c1c1c4}.btn--narrow{background-color:#fff;font-size:14px;height:40px;padding:0 26px}.btn--arrow{position:absolute;right:10px}.btn--arrow,.btn--arrow>a{color:#f9a109;padding:0}.btn--danger{background-color:#eb5757;color:#fff}.arrow{position:relative;top:8px;transform:rotate(180deg)}@media only screen and (max-width:500px){.btns{padding:16px 0}.btn{font-size:14px}.btn--bright-input,.btn--grey-input{right:16px}}@media only screen and (max-height:500px){.btns{z-index:9}}.inpt{background-color:transparent;border:2px solid #bdbdbd;border-radius:12px;color:#717171;font-family:Quicksand,sans-serif;font-size:14px;margin-bottom:15px;outline:none;padding:18px 22px;width:100%}.inpt::placeholder{color:#bdbdbd;opacity:1}.inpt:-ms-input-placeholder{color:#bdbdbd;opacity:1}.inpt--bright{border:2px solid #f9a109}.inpt--bright,.inpt--grey{padding:18px 100px 18px 22px}.inpt--search{background-color:#fff;border:2px solid transparent;padding:15px 60px 15px 50px;width:275px}.inpt--error{border-color:red}.inpt:focus,.inpt:hover{border:2px solid #f9a109;transition:border;transition-duration:.2s;transition-timing-function:ease-in}.inpt:focus+button,.inpt:hover+button{background-color:#f9a109;transition:background-color;transition-duration:.2s;transition-timing-function:ease-in}.inpt+button{transition:background-color;transition-duration:.2s;transition-timing-function:ease-out}.inpt--select:focus+ul,.inpt--select:hover+ul{visibility:visible}.inpts{background-color:#fff;bottom:0;display:flex;flex-direction:row;justify-content:space-around;left:0;padding:34px 44px;position:absolute;right:0;width:100%;z-index:1}.search-bar{position:relative}.search-bar__icon{color:#454545;left:18px;margin:15px 0;position:absolute}@media only screen and (max-width:500px){.inpts{padding:18px 20px}.inpt{padding:14px 16px}.inpt--bright,.inpt--grey{padding:18px 22px}}@media only screen and (max-height:500px){.inpts{z-index:9}}.item-info-card{background-color:#fff;bottom:0;display:flex;flex-direction:column;height:100%;justify-content:space-between;left:0;padding:30px 44px 34px;position:absolute;right:0;top:0;z-index:99}.item-info-card__main{display:flex;flex-direction:column;overflow-y:scroll;padding-bottom:128px;row-gap:34px;width:100%;-ms-overflow-style:none;scrollbar-width:none}.item-info-card__main::-webkit-scrollbar{display:none}.item-info-card__img{border-radius:25px;height:220px;object-fit:cover;width:100%}.item-info-card__tag{color:#c1c1c4;font-family:Quicksand,sans-serif;font-size:12px;margin-bottom:10px}.item-info-card__content{color:#000;font-family:Quicksand,sans-serif;font-size:18px}@media only screen and (max-width:500px){.item-info-card{padding:24px 18px 30px}}.shopping-list{background-color:#fff0de;display:flex;flex-direction:column;height:100%;padding:30px 44px 34px;position:relative;row-gap:40px}.shopping-list__icon{color:#f9a109;margin-right:6px}.shopping-list__tag{align-items:center;display:flex;flex-direction:row}.shopping-list__tag span{overflow:hidden;overflow-wrap:break-word;text-overflow:ellipsis}.shopping-list__main{display:flex;flex-direction:column;overflow-y:scroll;padding-bottom:128px;row-gap:40px;width:100%;-ms-overflow-style:none;scrollbar-width:none}.shopping-list__main::-webkit-scrollbar{display:none}.shopping-list__main--no-items{align-items:center}.shopping-list__add-item{background-color:#80485b;border-radius:24px;display:flex;flex-direction:row;justify-content:center;padding:16px;z-index:4}.shopping-list__img{left:0;position:absolute;top:-30px}.shopping-list__img--low{bottom:110px;position:absolute;z-index:2}.shopping-list__qs{align-self:center;padding:0 30px 0 100px;position:relative}.shopping-list__qs p{color:#fff;font-family:Quicksand,sans-serif;font-size:16px;font-weight:700;margin-bottom:10px}.shopping-list__item{align-items:center;animation-duration:.1s;animation-fill-mode:forwards;animation-name:fade-in;animation-timing-function:ease-in;display:flex;flex-direction:row;font-family:Quicksand,sans-serif;font-size:18px;justify-content:space-between;margin:4px 0;min-height:47px;opacity:0;width:100%}.linethrough{text-decoration:line-through}@media only screen and (max-width:500px){.shopping-list{padding:24px 18px 30px}.shopping-list__qs{padding:2px 2px 2px 100px}.shopping-list__add-item{padding:15px}.shopping-list__img{left:0;top:-30px}.shopping-list__tag{font-size:14px;overflow:hidden;text-overflow:ellipsis}.shopping-list__tag--edit{min-width:60px}.shopping-list__img--low{bottom:86px;height:140px}}.subheading{align-self:flex-start;color:#34333a;font-family:Quicksand,sans-serif;font-size:1.5rem;position:relative;width:100%}.subheading__icon{position:absolute;right:0;top:4px}.subheading__icon:hover{cursor:pointer}.subheading--no-items{align-content:center;align-items:center;background:url(b681884775f2678e294c.svg);background-position:center calc(100% - 100px);background-repeat:no-repeat;background-size:240px 240px;bottom:0;display:flex;font-size:20px;font-weight:700;justify-content:center;left:0;position:absolute;right:0;text-align:center;top:0;z-index:2}.subheading--items{font-size:18px;margin-bottom:20px}.subheading--date{color:#000;font-size:12px;margin-bottom:20px}.subheading--history-item{font-size:16px;line-height:20px}.subheading--list{animation-duration:.09s;animation-fill-mode:forwards;animation-name:fade-in;animation-timing-function:ease-in;color:#828282;font-size:14px;margin-bottom:15px}.subheading--top{color:#000;font-size:14px;width:auto}.subheading--top-percent{color:#000;font-size:18px;width:auto}.subheading--title{padding-right:30px}.heading{color:#34333a;font-family:Quicksand,sans-serif;font-size:24px;margin-right:60px;padding:10px 0}.heading--box{margin:0}.heading__detail{color:#f9a109}@media only screen and (max-width:500px){.heading{font-size:20px}.subheading--items{font-size:18px}.subheading--no-items{background-position:center calc(100% - 70px);background-size:170px 170px}.subheading--top{font-size:14px}.subheading--top-percent{font-size:18px}}.confirmation-box{align-items:center;background-color:rgba(0,0,0,.1);bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:5}.confirmation-box__box{align-items:flex-end;background-color:#fff;border-radius:24px;display:flex;flex-direction:column;margin:30px;max-width:500px;padding:20px 30px 30px;position:absolute}.confirmation-box__icon{color:#828282}.confirmation-box__icon:hover{cursor:pointer}.loader{align-items:center;animation:move .8s ease-in-out 0s infinite alternate;background-color:transparent;bottom:0;display:flex;justify-content:center;left:0;margin-top:40px;position:absolute;right:0;top:0;transform:rotate(-5deg)}.loader--dots{animation:none;transform:none}.loader__img{height:80px}.loader__dots{text-align:center;width:100%}.loader__dot{animation:dot-keyframes 1.5s ease-in-out infinite;background-color:#56ccf2;border-radius:50%;display:inline-block;height:6px;margin:4px;width:6px}.loader__dot:nth-child(2){animation-delay:.5s}.loader__dot:nth-child(3){animation-delay:1s}@keyframes dot-keyframes{0%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}to{opacity:.4;transform:scale(1)}}@keyframes move{0%{transform:rotate(-5deg)}to{transform:rotate(30deg)}}.side-panel{flex-shrink:0;position:relative;width:390px}@media only screen and (max-width:800px){.side-panel{animation:slide-in .5s;bottom:0;position:absolute;right:0;top:0;width:390px}.side-panel--hidden{display:none}}@media only screen and (max-width:500px){.side-panel{animation:slide-in-2 .5s;bottom:0;left:60px;position:absolute;right:0;top:0;width:auto}.side-panel--hidden{display:none}}@keyframes slide-in{0%{right:-390px}to{right:0}}@keyframes slide-in-2{0%{left:500px;right:-500px}to{left:60px;right:0}}.items{background-color:#fafafe;overflow-y:auto;padding:30px 6% 80px;position:relative;width:100%;-ms-overflow-style:none;scrollbar-width:none}.items::-webkit-scrollbar{display:none}.items__header{margin:0 0 60px}.items__header,.items__items{display:flex;flex-direction:row}.items__items{align-items:flex-start;column-gap:20px;flex-wrap:wrap;row-gap:30px}.items__category{animation-duration:1s;animation-fill-mode:forwards}.items__category,.items__item{animation-name:fade-in;opacity:0}.items__item{animation-duration:1.2s;animation-fill-mode:forwards;background-color:#fff;border:none;border-radius:12px;color:#000;font-family:Quicksand,sans-serif;font-size:16px;font-weight:500;overflow:hidden;padding:15px 54px 15px 16px;position:relative;text-align:left;text-overflow:ellipsis;width:182px}.items__item:hover{cursor:pointer}.items__item--history:hover{cursor:zoom-in}.items__icon{color:#c1c1c4;position:absolute;right:16px;top:13px;transition:color;transition-duration:.25s}.items__icon:hover{color:#56ccf2;transition:color;transition-duration:.5s}.items__categories{display:flex;flex-direction:column;row-gap:50px}@media only screen and (max-width:1100px){.items{padding:30px 6% 160px}.items__header{flex-wrap:wrap}}@media only screen and (max-width:500px){.items{padding:30px 6% 160px}.items__categories{row-gap:30px}.items__items{column-gap:9px;row-gap:24px}.items__header{display:none}.items__item{font-size:14px;width:140px}}.pieces{background-color:transparent;border:2px solid #f9a109;border-radius:24px;color:#f9a109;font-family:Quicksand,sans-serif;font-size:12px;padding:7px 20px}.pieces:hover{border:2px solid #fab43b;color:#fab43b;cursor:pointer;transition:color,border;transition-duration:.15s}.pieces--simple{border:none;padding:0;position:absolute;right:16px;top:16px}.pieces--simple:hover{border:none;color:#f9a109;cursor:zoom-in;padding:0 4px;transition:none}.pieces--unclickable:hover{border:2px solid #f9a109;color:#f9a109;cursor:zoom-in;transition:none}.pieces__panel{align-items:center;background-color:#fff;border-radius:12px;display:flex;flex-direction:row;flex-shrink:0;justify-content:space-between;padding:7px 7px 7px 40px;position:relative;width:200px}.pieces__icon{color:#f9a109;margin:4px}.pieces__icon--bright{align-items:center;background-color:#f9a109;border:none;border-radius:12px;bottom:0;color:#fff;display:flex;justify-content:center;left:0;margin:0;position:absolute;top:0;transition:color,background-color;transition-duration:.15s;width:37px}.pieces__icon--bright:hover{background-color:#fff;color:#f9a109}.pieces__icon--inside{padding:1px}.pieces__icon,.pieces__icon:hover{transition:color;transition-duration:.15s}.pieces__icon:hover{color:#fab43b;cursor:pointer}@media only screen and (max-width:500px){.pieces__panel{flex-shrink:1;width:170px}.pieces--panel{padding:7px 10px}}.completed-detail{border:1px solid #56ccf2;border-radius:8px;color:#56ccf2;font-family:Quicksand,sans-serif;font-size:12px;padding:4px 7px}.completed-detail--cancelled{border:1px solid #eb5757;color:#eb5757;margin:0 3px}.calendar-detail{align-items:center;color:#c1c1c4;display:flex;flex-direction:row;font-family:Quicksand,sans-serif;font-size:12px;font-weight:500;min-width:120px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.history__items{display:flex;flex-direction:column;row-gap:30px}.history__item{animation-duration:1s;animation-fill-mode:forwards;animation-name:fade-in;background-color:#fff;border-radius:12px;justify-content:space-between;opacity:0;padding:24px;width:100%}.history__item,.history__item-details{align-items:center;display:flex;flex-direction:row}.history__item-details{column-gap:26px}@media only screen and (max-width:1100px){.history__item-details{column-gap:0}}@media only screen and (max-width:500px){.history__item-details{flex-wrap:wrap;row-gap:6px}}.history{background-color:#fafafe;overflow-y:auto;padding:30px 6% 80px;position:relative;width:100%;-ms-overflow-style:none;scrollbar-width:none}.history__item{padding-right:60px;position:relative}.history::-webkit-scrollbar{display:none}.history__header{margin:0 0 60px}.history__months{display:flex;flex-direction:column;row-gap:50px}@media only screen and (max-width:1100px){.history{padding:30px 6% 160px}.history__item{flex-wrap:wrap;row-gap:10px}}.top-statistics{width:100%}.top-statistics>h1{margin-bottom:40px}.top-statistics__items{column-gap:65px;display:flex;flex-direction:column;row-gap:30px;width:100%}.top-statistics__item{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;row-gap:15px}.top-statistics__item:hover .top-statistics__bar--percent,.top-statistics__item:hover .top-statistics__bar--percent-blue{background-color:#fbc76d;transition:background-color;transition-duration:.2s}.top-statistics__item:hover .top-statistics__bar--percent-blue{background-color:#10a3d2}.top-statistics__item:hover .subheading{transform:scale(1.3);transition:transform;transition-duration:.2s}.top-statistics__item .subheading{transform:scale(1);transition:transform;transition-duration:.2s}.top-statistics__details{display:flex;justify-content:space-between}.top-statistics__bar{background-color:#e0e0e0;border-radius:4px;height:6px;overflow:hidden;position:relative;transition:background-color;transition-duration:.2s;width:100%}.top-statistics__bar--percent{background-color:#f9a109}.top-statistics__bar--percent,.top-statistics__bar--percent-blue{border-radius:6px;bottom:0;content:"";height:6px;position:absolute;top:0;transition:background-color;transition-duration:.2s}.top-statistics__bar--percent-blue{background-color:#56ccf2}.monthly-summary>h1{margin-bottom:40px}.statistics{background-color:#fafafe;display:flex;flex-direction:column;overflow-y:auto;padding:30px 6% 80px;position:relative;row-gap:65px;width:100%;-ms-overflow-style:none;scrollbar-width:none}.statistics::-webkit-scrollbar{display:none}.statistics__top{column-gap:65px;display:flex;flex-direction:row;justify-content:space-between;max-width:100%}@media only screen and (max-width:1100px){.statistics{padding:30px 6% 160px}.statistics__top{align-items:center;flex-direction:column;row-gap:65px}.top-statistics__items{margin:auto;width:300px}}@media only screen and (max-width:500px){.statistics{padding:30px 6% 160px}.statistics__top{align-items:center;flex-direction:column;row-gap:65px}.top-statistics{width:100%}.top-statistics__items{margin:auto;width:auto}}*{margin:0;padding:0}*,:after,:before{-moz-box-sizing:border-box;box-sizing:border-box}#root,body,html{height:100%;overflow:hidden;width:100%}.main{display:flex;flex-direction:row;height:100%;justify-content:space-between;width:100vw}.page-loader{background-color:#beefff;flex-direction:column;justify-content:center;position:relative}.page-loader div{margin:0 auto;position:relative}.page-loader .loader{height:200px;width:auto}.page-loader .subheading{margin:0 auto;max-width:300px;text-align:center}