@import"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";:root{--clr--accent: #2c74d4}*{padding:0;margin:0;box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-width:thin}ul{list-style-type:none}a{text-decoration:none}button{font:inherit;color:inherit}body{height:100%;font-family:Montserrat,sans-serif;color:#4d5058;background-color:#f4f4f6}body.loading{overflow:hidden}.container{padding:0 20px;max-width:1280px;margin:0 auto}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.btn{border:0;display:block;font-size:14px;font-weight:500;border-radius:4px}.btn--fill{color:#f5f5f5;background-color:#4685c8;box-shadow:0 3px 4px #0003}.section-box{padding:20px;display:flex;flex-direction:column;gap:20px;background-color:#fefefe;border:2px solid #e8e8eb;border-radius:10px;box-shadow:0 6px 10px #0000001a}.section-box__header{padding-bottom:10px;border-bottom:1px solid #cecece}.section-box__title{font-size:20px;font-weight:600}.section-box__form{padding-bottom:10px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid #cecece}.section-box__form-input{padding:12px;font-family:inherit;font-size:14px;caret-color:var(--clr--accent);border:1px solid #cecece;border-radius:4px;transition:border-color .25s ease-in-out}.section-box__form-input:focus-visible{outline:0;border-color:var(--clr--accent)}.section-box__form-message{font-size:14px;cursor:default}.section-box__form-btn{flex-shrink:0;padding:8px 10px;color:var(--clr--accent);background-color:#fff;border:1px solid #cecece;margin-left:auto}.section-box__form-btn:disabled{color:#cecece;cursor:not-allowed}.section-box__filter-buttons{display:flex;flex-wrap:wrap;gap:10px}.section-box__filter-btn{padding:2px 6px;font-size:14px;text-transform:lowercase;line-height:1;border-radius:4px;border:1px solid #cecece;background-color:#f5f5f5;transition:font-weight .4s ease,border-color .4s ease}.section-box__filter-btn--active{font-weight:500;border-color:#4d5058}.section-box__list{display:flex;flex-direction:column;gap:10px}.section-box__item{padding:10px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background-color:#f4f4f6;border-radius:4px;position:relative;overflow:hidden}.section-box__item-text{display:flex;align-items:flex-start;gap:10px}.section-box__item-checkbox{display:block;margin-top:3px}.section-box__item-actions{flex-shrink:0;display:flex;gap:20px}.section-box__item-state{flex-shrink:0;padding:8px 10px;font-size:14px;font-weight:500;background-color:#fde898;border:1px solid #ecd785;border-radius:4px;margin-left:auto;transition:margin-right .4s ease-in-out,color .4s ease-in-out,border-color .4s ease-in-out,background-color .4s ease-in-out}.section-box__item-state--completed{color:#f5f5f5;border-color:#2a673f;background-color:#459862}.section-box__item-buttons,.section-box__item-edit-buttons{width:78px;display:flex;align-items:center;gap:10px}.section-box__item-btn{width:34px;height:34px;display:grid;place-items:center;font-size:14px;color:#4d5058;border:1px solid #cecece;background-color:#e3e3e3;border-radius:4px}.section-box__item-buttons.hidden,.section-box__item-edit-buttons.hidden{display:none}.loader{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background-color:#f5f5f5;opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease}.loader__logo{font-size:36px;font-weight:900;color:#4d5058;margin-bottom:30px}.loader__logo span{font-weight:300}.loader__quote{font-weight:500;font-style:italic;margin-bottom:10px}.loader.hidden{opacity:0;pointer-events:none;visibility:hidden}.header{padding:12px 0;position:fixed;top:0;left:0;z-index:100;width:100%;background-color:#f8f8f9;border-bottom:2px solid #e8e8eb;box-shadow:0 1px 12px #3737371a}.header__container{display:flex;align-items:flex-end;justify-content:space-between}.logo{font-size:22px;font-weight:900;-webkit-user-select:none;user-select:none}.logo span{font-weight:300}.nav-menu{display:flex;align-items:center;gap:40px}.nav-menu__link{font-weight:500;color:#4d5058;position:relative}.nav-menu__link:after{content:"";position:absolute;left:-10%;bottom:-12px;width:0;height:2px;background-color:var(--clr--accent);border-radius:2px;transition:width .25s ease-in-out,color .25s ease-in-out}.nav-menu__link--active{color:var(--clr--accent)}.nav-menu__link--active:after{width:120%}.nav-toggle{width:34px;height:34px;display:none;place-items:center;background-color:#fff;border:1px solid #cecece;border-radius:4px}.nav-toggle__line{width:20px;height:2px;background-color:#4d5058;border-radius:2px;position:relative;transition:transform .2s ease-in-out}.nav-toggle__line:before,.nav-toggle__line:after{content:"";position:absolute;left:0;width:100%;height:100%;background-color:#4d5058;border-radius:inherit}.nav-toggle__line:before{top:-6px;transition:top .2s ease-in-out .2s}.nav-toggle__line:after{top:6px;transition:transform .2s ease-in-out,top .2s ease-in-out .2s}.nav-toggle--open .nav-toggle__line{transform:rotate(-45deg);transition:transform .2s ease-in-out .2s}.nav-toggle--open .nav-toggle__line:before,.nav-toggle--open .nav-toggle__line:after{top:0}.nav-toggle--open .nav-toggle__line:before{transition:top .2s ease-in-out}.nav-toggle--open .nav-toggle__line:after{transform:rotate(90deg);transition:top .2s ease-in-out,transform .2s ease-in-out .2s}.page{padding-top:80px;padding-bottom:40px}.page__container{display:grid;align-items:start;grid-template-columns:repeat(2,1fr);gap:30px}.page__container>:first-child{grid-column:span 2}.focus{background-color:#e5ecf4}.focus__header{margin-bottom:20px}.focus__title{color:#144d93}.focus__quote{max-width:620px;text-align:center;margin:0 auto 20px}.focus__quote-text{font-style:italic;margin-bottom:20px}.focus__btn{padding:8px 16px;margin:0 auto}@media(hover:hover){.btn,.section-box__item-checkbox,.section-box__item-label{cursor:pointer}.section-box__item-edit-input{padding:4px 6px;width:100%;font-family:inherit;font-size:14px;border:1px solid var(--clr--accent);border-radius:4px}.section-box__item-buttons,.section-box__item-edit-buttons{position:absolute;right:10px;opacity:0;transform:translate(calc(100% + 10px));transition:opacity .4s ease-in-out,transform .4s ease-in-out}.section-box__item-btn:hover{cursor:pointer}.section-box__item:hover .section-box__item-state{margin-right:98px}.section-box__item:hover .section-box__item-buttons,.section-box__item:hover .section-box__item-edit-buttons{opacity:1;transform:translate(0);transition:opacity .4s ease-in-out,transform .4s ease-in-out}.section-box__filter-btn{cursor:pointer}.nav-menu__link:hover{color:var(--clr--accent)}.nav-menu__link:hover:after{width:120%}.nav-toggle{cursor:pointer}}@media(max-width:767.98px){.section-box__item{align-items:flex-start;flex-direction:column-reverse}.section-box__item-actions{width:100%;justify-content:space-between}.section-box__item-state{margin-left:initial}.nav-menu{position:fixed;top:60px;right:0;z-index:90;padding-top:60px;width:100%;min-height:100dvh;flex-direction:column;background-color:#ffffffb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translate(100%);transition:transform .25s ease-in-out}.nav-menu--open{transform:translate(0)}.nav-toggle{display:grid}}@media(max-width:1279.98px){.page__container{grid-template-columns:1fr}.page__container>:first-child{grid-column:auto}}