.button--icon{font-size:var(--fs-4);color:var(--black-clr);text-align:center;display:flex;justify-content:center;align-items:center;min-width:30px;min-height:30px;max-width:30px;max-height:30px;border-radius:var(--br-10);background-color:var(--white-clr);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:var(--transition-1)}.button--icon:is(:hover,:focus-visible){background-color:var(--light-grey-clr)}.header{position:fixed;top:0;right:0;left:0;padding-block:16px;background-color:var(--white-clr);border-bottom:1px solid var(--border-clr)}.header__container{display:flex;justify-content:space-between;gap:16px;align-items:center}.header__nav{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;visibility:hidden;pointer-events:none;background-color:var(--light-grey-clr);transition:var(--transition-2)}.header__nav--active{opacity:1;visibility:visible;pointer-events:all}.nav__wrapper{padding:20px;position:fixed;top:0;bottom:0;left:-100%;display:flex;flex-direction:column;gap:16px;min-width:300px;background-color:var(--white-clr);border-right:1px solid var(--border-clr);transition:var(--transition-2)}.header__nav--active .nav__wrapper{left:0}.nav__close-btn{position:absolute;top:16px;right:20px}.header__link{padding:6px 12px;max-width:max-content;border-radius:var(--br-10);line-height:125%;transition:var(--transition-1)}.header__link:hover{background-color:var(--light-grey-clr)}@media (min-width: 500px){.header__burger{display:none}.header__nav,.nav__wrapper{all:unset}.nav__wrapper{display:flex;gap:8px}.nav__wrapper .header__logo,.nav__close-btn{display:none}}.input-field{padding:6px 12px;max-height:37px;min-height:37px;width:100%;background-color:var(--white-clr);border:1px solid var(--border-clr);border-radius:var(--br-10);transition:var(--transition-1)}.input-field:is(:hover,:focus,:focus-visible){border-color:var(--primary-clr);box-shadow:var(--input-shadow)}.input-field::placeholder{color:var(--grey-clr)}.input-field--has-error{border-color:var(--red-clr)}.input-field--has-error::is(:hover,:focus,:focus-visible){border-color:var(--red-clr)!important;box-shadow:var(--input-with-error-shadow)!important}.button{width:100%;min-height:37px;max-height:37px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--br-10);transition:var(--transition-1);cursor:pointer}.button--important{color:var(--red-clr);background-color:var(--light-grey-clr)}.button--secondary{background-color:var(--light-grey-clr)}.button--secondary:is(:hover,:focus,:focus-visible){color:var(--primary-clr)}.button--primary{color:var(--white-clr);background-color:var(--primary-clr)}.button__icon{font-size:var(--fs-4)}.workspace__avatar{font-weight:var(--fw-medium);text-transform:uppercase;color:var(--white-clr);min-width:25px;min-height:25px;max-width:25px;max-height:25px;border-radius:var(--br-4);background-color:var(--black-clr);display:flex;flex-direction:column;justify-content:center;text-align:center}.select{position:relative}.select__btn{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:6px 12px;border:1px solid var(--border-clr);border-radius:var(--br-10);min-height:37px;max-height:37px;width:100%;height:100%;background-color:var(--white-clr);transition:var(--transition-1)}.select__btn:is(:hover,:focus,:focus-visible){border-color:var(--primary-clr);box-shadow:var(--input-shadow)}.select__placeholder{color:var(--grey-clr)}.select__list{margin-top:6px;padding:6px;position:absolute;display:flex;flex-direction:column;left:0;right:0;max-width:100%;border-radius:var(--br-10);background-color:var(--white-clr);box-shadow:var(--dropdown-shadow);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:var(--transition-1);overflow-y:scroll;max-height:160px;z-index:100}.select__list--active{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0)}.select__item{padding-inline:6px 10px;display:flex;max-height:37px;min-height:37px;text-align:left;border-radius:var(--br-4);align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--transition-1);cursor:pointer}.select__item:is(:hover,:focus,:focus-visible){background-color:var(--light-grey-clr)}.preloader{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--white-clr)}.preloader__spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-top:2px solid var(--primary-clr);border-radius:var(--br-circle);animation:loading .75s ease infinite}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.user__avatar{position:relative;min-width:20px;max-width:20px;min-height:20px;max-height:20px;background-color:var(--light-grey-clr);border-radius:var(--br-circle)}.user__avatar:hover .avatar__tooltip{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.avatar__tooltip{padding:5px 6px;position:absolute;margin-top:-24px;left:50%;transform:translate(-50%) translateY(-4px);font-size:var(--fs-6);color:var(--white-clr);background-color:var(--black-clr);border-radius:var(--br-4);pointer-events:none;opacity:0;transition:var(--transition-1);z-index:1000}.avatar__symbol{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--fs-6);font-weight:var(--fw-semi-bold);color:var(--grey-clr);text-transform:uppercase}.member{padding-block:10px;display:flex;gap:8px;align-items:center;width:100%}.member__info{display:flex;gap:8px;width:100%;min-width:0;flex:1 1 auto}.member__name,.member__email{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.popup{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--black-25-clr);opacity:0;visibility:hidden;pointer-events:none;z-index:100000000;transition:var(--transition-2)}.popup--shown{opacity:1;visibility:visible;pointer-events:all}.popup__wrapper{position:absolute;top:50%;right:20px;left:20px;transform:translateY(-50%);margin-inline:auto;max-width:600px;padding:24px;display:flex;flex-direction:column;gap:16px;background-color:var(--white-clr);border-radius:var(--br-20)}.popup__text-box{display:grid;gap:6px}.popup__title{font-size:var(--fs-3);font-weight:var(--fw-bold)}.popup__actions{display:grid;gap:16px}@media (min-width: 600px){.popup__actions{grid-auto-flow:column;grid-template-columns:repeat(2,1fr)}}.settings{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--black-25-clr);opacity:0;visibility:hidden;pointer-events:none;transition:var(--transition-2);z-index:100000}.settings--shown{opacity:1;visibility:visible;pointer-events:all}.settings__wrapper{position:absolute;top:50%;left:20px;right:20px;transform:translateY(-50%);border-radius:var(--br-20);background-color:var(--white-clr);overflow:hidden;max-height:600px;height:100%;max-width:800px;margin-inline:auto}.settings__sidebar{position:fixed;top:0;left:0;right:0;bottom:0;padding:24px;display:flex;flex-direction:column;gap:8px;height:100%;background-color:var(--background-clr);transition:var(--transition-2);z-index:100}.settings__sidebar--hidden{left:-100%;right:100%}.settings__list{display:flex;flex-direction:column;gap:2px}.settings__item{display:flex;gap:8px;align-items:center;justify-content:center;padding:6px 12px;max-height:37px;height:100%;width:100%;border-radius:var(--br-10);transition:var(--transition-1)}.settings__item:is(:hover,:focus,:focus-visible){background-color:var(--light-grey-clr)}.settings__icon{font-size:var(--fs-3);color:var(--grey-clr);text-align:center}.settings__label{font-weight:var(--fw-medium);text-align:left;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.settings__workspace-option{display:flex;align-items:center;gap:8px}.settings__main{padding:20px;display:flex;flex-direction:column;gap:24px;overflow-y:auto;overflow-x:hidden;height:100%}.settings__form{display:flex;flex-direction:column;gap:24px}.settings__back-btn{display:flex;gap:4px;align-items:center}.settings__top,.settings__section{display:flex;flex-direction:column;gap:8px}.settings__title{font-size:var(--fs-3);font-weight:var(--fw-bold)}.settings__subtitle{font-size:var(--fs-4);font-weight:var(--fw-semi-bold)}.settings__members{display:flex;flex-direction:column;justify-content:space-between}.settings__member{align-items:center;display:flex;gap:8px;justify-content:space-between}.settings__member:not(:last-child){border-bottom:1px solid var(--border-clr)}@media (min-width: 600px){.settings__sidebar,.settings__sidebar--hidden{left:0;right:unset;width:260px;border-right:1px solid var(--border-clr)}.settings__back-btn{display:none}.settings__main{padding:24px;margin-left:260px}.settings__item--active{background-color:var(--light-grey-clr)}}@media (min-width: 800px){.settings__main{padding-inline:60px}}.sidebar{padding-block:16px;position:fixed;top:0;left:0;height:100%;width:100%;background-color:var(--background-clr);overflow-y:auto;transition:var(--transition-2);z-index:10000}.sidebar--hidden{left:-100%}.sidebar__container{display:flex;flex-direction:column;gap:16px}.sidebar__item{padding-inline:6px 10px;margin-inline:16px;display:flex;gap:8px;font-weight:var(--fw-medium);border-radius:var(--br-10);height:37px;align-items:center;transition:var(--transition-1)}.sidebar__item--active{background-color:var(--light-grey-clr)}.sidebar__icon{font-size:var(--fs-4);display:flex;align-items:center;justify-content:center;width:25px;height:25px}.sidebar__item:hover{background-color:var(--light-grey-clr)}.sidebar__workspace-btn{display:flex;align-items:center;gap:8px}.sidebar__label{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.sidebar__count{opacity:40%}.sidebar__list{display:flex;flex-direction:column;gap:2px}.sidebar__emoji{color:var(--primary-clr)}.new-list__form{display:grid;gap:16px}.emoji__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.emoji__label{display:flex;justify-content:center;align-items:center;text-align:center;min-height:37px;max-height:37px;border:1px solid var(--border-clr);border-radius:var(--br-10);background-color:var(--white-clr);transition:var(--transition-1);cursor:pointer}.emoji__radio:checked+.emoji__label{border-color:var(--primary-clr);background-color:var(--primary-clr)}.emoji__label--has-error{border-color:var(--red-clr)!important}@media (min-width: 600px){.sidebar{max-width:250px;border-right:1px solid var(--border-clr)}.emoji__label:is(:hover){border-color:var(--primary-clr);box-shadow:var(--input-shadow)}}@media (min-width: 800px){.sidebar{max-width:300px}}.task{padding:0 6px 12px 0;display:flex;flex-direction:column;gap:6px;width:100%;-webkit-user-select:none;user-select:none;max-height:500px;transition:.75s linear}.task--completed,.task--uncompleted{padding:0;max-height:0;visibility:hidden;opacity:0;transform:scale(.95)}.task__dropdown{padding:6px;position:absolute;display:flex;flex-direction:column;border-radius:var(--br-10);background-color:var(--white-clr);box-shadow:var(--dropdown-shadow);opacity:0;visibility:hidden;pointer-events:none;z-index:10001}.task__dropdown--active{opacity:1;visibility:visible;pointer-events:all}.task__action{padding-inline:10px 10px;display:flex;max-height:37px;min-height:37px;text-align:left;border-radius:var(--br-4);align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--transition-1);cursor:pointer}.task__action:hover{background-color:var(--light-grey-clr)}.task:last-child .task__separator{display:none}.task__top{display:flex;gap:8px;align-items:center;width:100%}.task__title{font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task__title--grey{color:var(--grey-clr)}.task__separator{padding-top:6px;padding-left:28px!important}.task__date{padding:5px 6px;font-size:var(--fs-6);font-weight:var(--fw-semi-bold);line-height:100%;text-transform:uppercase;text-wrap:nowrap;color:var(--grey-clr);background-color:var(--light-grey-clr);border-radius:var(--br-4)}.task__date--today{color:var(--green-clr)!important;background-color:var(--green-light-clr)!important}.task__date--late{color:var(--red-clr)!important;background-color:var(--red-light-clr)!important}.task__bottom{padding-left:28px;display:flex;gap:8px;align-items:start}.task__priority{color:var(--grey-clr)}.task__tags{color:var(--primary-clr);display:initial;overflow-x:scroll;scrollbar-width:none;-ms-overflow-style:none}.task__tags::-webkit-scrollbar{display:none}.task__tag:not(:first-child){padding-left:8px}.input-date{padding:6px 12px;max-height:37px;min-height:37px;width:100%;background-color:var(--white-clr);border:1px solid var(--border-clr);border-radius:var(--br-10);align-items:center;display:flex;justify-content:space-between;transition:var(--transition-1)}.input-date:is(:hover,:focus,:focus-visible){border-color:var(--primary-clr);box-shadow:var(--input-shadow)}.input-field--date--active{border-color:var(--primary-clr);box-shadow:var(--input-shadow)}.input-date__placeholder{color:var(--grey-clr)}.input-date__inputs{display:flex;justify-content:end;width:100%}.input-date__input{text-align:center;width:22px;transition:var(--transition-1)}.input-date__input--year{width:40px}.input-date__input:is(:hover,:focus,:focus-visible){color:var(--white-clr)!important;background-color:var(--primary-clr);border-radius:var(--br-4)}.multiselect{position:relative;z-index:1}.multiselect__btn{display:flex;gap:10px;justify-content:space-between;align-items:center;padding:6px 12px;border:1px solid var(--border-clr);border-radius:var(--br-10);min-height:37px;max-height:37px;width:100%;height:100%;background-color:var(--white-clr);transition:var(--transition-1)}.multiselect__btn:is(:hover,:focus,:focus-visible){border-color:var(--primary-clr);box-shadow:var(--input-shadow)}.multiselect__placeholder{color:var(--grey-clr)}.multiselect__list{margin-top:6px;padding:6px;position:absolute;display:flex;flex-direction:column;left:0;right:0;max-width:100%;border-radius:var(--br-10);background-color:var(--white-clr);box-shadow:var(--dropdown-shadow);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:var(--transition-1);max-height:160px;overflow-y:scroll}.multiselect__list--active{opacity:1;visibility:visible;pointer-events:all;transform:translateY(0)}.multiselect__item{padding-inline:6px 10px;display:flex;gap:6px;max-height:37px;min-height:37px;text-align:left;border-radius:var(--br-4);align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--transition-1);cursor:pointer}.multiselect__item:is(:hover,:focus,:focus-visible){background-color:var(--light-grey-clr)}.select__icon{color:var(--black-clr)}.multiselect__selected-count{height:20px;width:20px;text-align:center;display:flex;flex-direction:column;justify-content:center;border-radius:50%;color:var(--white-clr);background-color:var(--primary-clr)}.multiselect__selected-count{font-size:var(--fs-6)}.list__container{display:flex;flex-direction:column;gap:30px}.list-top{display:flex;gap:10px;align-items:center}.list-top__icon,.list-top__emoji{font-size:var(--fs-3)}.list-top__title{font-size:var(--fs-4);width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dropdown{position:relative;z-index:100}.dropdown__list{margin-top:6px;position:absolute;right:0;display:grid;padding:6px;background-color:var(--white-clr);border-radius:var(--br-10);box-shadow:var(--dropdown-shadow);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px);transition:var(--transition-2)}.dropdown__list--active{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all}.dropdown__item{border-radius:var(--br-4);padding-inline:10px;max-height:37px;min-height:37px;width:100%;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--transition-1)}.dropdown__item:is(:hover,:focus,:focus-visible){background-color:var(--light-grey-clr)}#delListBtn{color:var(--red-clr)}.tasks{display:flex;flex-direction:column}@media (min-width: 600px){#header-btn{display:none}}@media (min-width: 1200px){.list-top__title{font-size:var(--fs-3)}.list-top__icon,.list-top__emoji{font-size:var(--fs-2)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}li{list-style:none}button,input,select{border:none;background:none;outline:none}a,button,select{cursor:pointer}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}img{height:auto}p{color:var(--grey-clr);line-height:150%}body{font-family:var(--ff-inter);font-size:var(--fs-5);font-weight:var(--fw-regular);letter-spacing:-1.6%;color:var(--black-clr);background-color:var(--white-clr)}:root{--white-clr: rgba(255, 255, 255, 1);--black-clr: rgba(34, 34, 36, 1);--black-25-clr: rgba(34, 34, 36, .25);--grey-clr: rgba(150, 150, 153, 1);--light-grey-clr: rgba(0, 0, 0, .06);--background-clr: rgba(245, 245, 245, 1);--border-clr: rgba(214, 214, 214, 1);--primary-clr: rgba(35, 107, 250, 1);--primary-light-clr: rgba(35, 107, 250, .16);--red-clr: rgba(229, 23, 30, 1);--red-light-clr: rgba(229, 23, 30, .16);--green-clr: rgba(18, 178, 85, 1);--green-light-clr: rgba(18, 178, 85, .16);--ff-inter-tight: "Inter Tight", sans-serif;--ff-inter: "Inter", sans-serif;--fs-1: 3.125rem;--fs-2: 2.5rem;--fs-3: 1.875rem;--fs-4: 1.25rem;--fs-5: 1rem;--fs-6: .625rem;--fw-bold: 700;--fw-semi-bold: 600;--fw-medium: 500;--fw-regular: 400;--br-circle: 50%;--br-20: 20px;--br-10: 10px;--br-4: 4px;--input-shadow: 0 0 0 4px var(--primary-light-clr);--input-with-error-shadow: 0 0 0 4px var(--red-light-clr);--dropdown-shadow: 0 7.5px 15px var(--black-25-clr);--transition-1: .25s ease;--transition-2: .35s ease}.separator{display:block;width:100%;height:1px;background-color:var(--border-clr)}.main{padding-block:40px}.container{padding-inline:20px}.hidden{display:none}.form__row{display:grid;gap:16px}.selected-member{text-align:right;display:block;width:85px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.select__item .selected-member{text-align:left!important;width:100%}.checkbox{position:relative;display:flex;justify-content:center;align-items:center;color:var(--white-clr);min-width:20px;max-width:20px;min-height:20px;max-height:20px;border:1px solid var(--border-clr);border-radius:var(--br-circle);transition:var(--transition-1);cursor:pointer}.checkbox--unavailable:is(:hover,:focus,:focus-visible){border-color:var(--red-clr)!important;box-shadow:var(--input-with-error-shadow)!important}.checkbox:is(:hover,:focus,:focus-visible){border-color:var(--primary-clr);box-shadow:var(--input-shadow)}.checkbox:before{content:"";position:absolute;top:0;right:0;left:0;bottom:0;display:flex;background-color:var(--primary-clr);border-radius:var(--br-circle);transform:scale(.25);opacity:0;transition:var(--transition-1)}.input__checkbox:checked+.checkbox{border-color:var(--primary-clr)}.input__checkbox:checked+.checkbox:before{transform:scale(1);opacity:1}.input-radio{padding:6px 12px;display:flex;align-items:center;gap:8px;max-height:37px;min-height:37px;width:100%;background-color:var(--white-clr);border:1px solid var(--border-clr);border-radius:var(--br-10);cursor:pointer;transition:var(--transition-1)}.input-radio--error{border-color:var(--red-clr)}.radio{position:relative;width:16px;height:16px}.radio:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--border-clr);border-radius:var(--br-circle);transition:var(--transition-1)}.radio:after{content:"";position:absolute;width:10px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background-color:var(--primary-clr);border-radius:var(--br-circle);transition:var(--transition-1)}.input__radio:checked+.radio:before{border-color:var(--primary-clr)}.input__radio:checked+.radio:after{transform:translate(-50%,-50%) scale(.9)}.form-wrapper{display:flex;flex-direction:column;min-height:100vh;justify-content:center;margin-inline:auto;max-width:400px;width:100%}.form-wrapper__container{display:grid;gap:26px;text-align:center;align-items:center}.form-wrapper__text-box{display:grid;gap:10px;text-align:center}.form-wrapper__title{font-size:var(--fs-2)}.form{display:grid;gap:16px}.form__bottom-text{display:flex;justify-content:center;gap:6px}.form__bottom-text--in-row{display:initial;text-align:center;margin-inline:auto}.form__link{color:var(--primary-clr)}.form__link:hover,.form__link--in-row{text-decoration:underline}.form__link--in-row{display:initial}.form__link-input{position:relative}.form__link-input .button--icon{position:absolute;right:6px;top:50%;transform:translateY(-50%)}@media (min-width: 600px){.main{margin-left:250px}.header-btn{display:none}.form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}}@media (min-width: 800px){.main{margin-left:300px}}@media (min-width: 1100px){.container{padding:0;max-width:750px;margin-inline:auto}}