@charset "UTF-8";/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}@font-face{font-family:Circe;src:local("Circe"),url(/Todo-test-project/fonts/Circe/Circe-Regular.woff2) format("woff2");font-weight:400;font-style:normal}@font-face{font-family:Circe;src:local("Circe"),url(/Todo-test-project/fonts/Circe/Circe-Bold.woff2) format("woff2");font-weight:700;font-style:normal}body{background-color:#f6f7f9;font-weight:400;font-size:14px;font-family:Circe;position:relative;overflow-x:hidden}a{text-decoration:none}.header{height:30px;background-color:#fff;padding:10px 12px;box-shadow:1px 0 15px #dad9d9;display:flex;align-items:center;justify-content:space-between}@media (min-width: 480px){.header{justify-content:space-around}}.header__logo{display:flex;align-items:center;justify-content:space-between;gap:12px}.header__logo img{height:16px;width:14px}.header__logo span{font-weight:700;font-size:14px;font-family:Circe;color:#005bfe}.header__button{display:flex;align-items:center;justify-content:space-between;gap:10px}.header__button button{transition:1s;margin:0;padding-block:5px}.header__button button:hover,.header__button button:focus,.header__button button:active{background-color:#d1003e;transition-duration:.5s;transition-timing-function:ease-in-out}.header__button button:last-child{width:fit-content;background-color:#005bfe;border:none;color:#fff;padding-block:8px;padding-inline:16px;border-radius:7px;letter-spacing:.4px;font-weight:400;font-size:10px;font-family:Circe}.header__button button:last-child:hover,.header__button button:last-child:focus,.header__button button:last-child:active{background-color:#0047c6;transition-duration:.5s;transition-timing-function:ease-in-out}main{padding-inline:12px;height:80vh;margin-inline:auto}@media (min-width: 480px){main{max-width:60%}}.add-contact-btn{display:flex;align-items:center;justify-content:space-between;justify-content:center;gap:2px;transition:1s;margin-top:20px;width:100%;background-color:#f81155;border:none;color:#fff;padding-block:10px;padding-inline:16px;border-radius:7px;letter-spacing:.4px;font-weight:400;font-size:10px;font-family:Circe}.add-contact-btn:hover,.add-contact-btn:focus,.add-contact-btn:active{background-color:#d1003e;transition-duration:.5s;transition-timing-function:ease-in-out}.add-contact-btn__plus{font-size:14px}.contact-group,.aside{position:fixed;top:0;right:-83vw;background-color:#fff;display:flex;align-items:center;justify-content:space-between;justify-content:start;flex-direction:column;width:83vw;height:100vh;box-sizing:border-box;z-index:300}.contact-group.active,.aside.active{right:0}@media (min-width: 450px){.contact-group,.aside{right:0}.contact-group.active,.aside.active{left:0}}@media (min-width: 450px){.contact-group,.aside{width:250px;left:-250px}}.contact-group__aside-header,.contact-group .aside-header,.aside__aside-header,.aside .aside-header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;font-family:Circe;border-bottom:1px solid rgba(0,0,0,.05);box-sizing:border-box;width:100%;padding:15px 15px 18px}.contact-group__aside-header button,.contact-group .aside-header button,.aside__aside-header button,.aside .aside-header button{background-color:transparent;border:none;padding:2px;transition:1s}.contact-group__aside-header button:hover,.contact-group__aside-header button:focus,.contact-group__aside-header button:active,.contact-group .aside-header button:hover,.contact-group .aside-header button:focus,.contact-group .aside-header button:active,.aside__aside-header button:hover,.aside__aside-header button:focus,.aside__aside-header button:active,.aside .aside-header button:hover,.aside .aside-header button:focus,.aside .aside-header button:active{background-color:#0000000d;transition-duration:.5s;transition-timing-function:ease-in-out}.contact-group__aside-header button img,.contact-group .aside-header button img,.aside__aside-header button img,.aside .aside-header button img{width:75%;translate:0 2px}.contact-group__list,.contact-group .group-list,.contact-group .contact-list,.aside__list,.aside .group-list,.aside .contact-list{box-sizing:border-box;width:100%;padding:18px 15px 15px;font-weight:400;font-size:10px;font-family:Circe;display:flex;flex-direction:column;gap:12px}.contact-group__list .list-element,.contact-group .group-list .list-element,.contact-group .contact-list .list-element,.aside__list .list-element,.aside .group-list .list-element,.aside .contact-list .list-element{display:flex;align-items:center;justify-content:space-between;gap:5px}.contact-group__list .list-element__name,.contact-group .group-list .list-element__name,.contact-group .contact-list .list-element__name,.aside__list .list-element__name,.aside .group-list .list-element__name,.aside .contact-list .list-element__name{width:100%;padding:8px 10px;border:none;border-radius:5px;background-color:transparent;background-color:#0000000d}.contact-group__list .list-element__name:focus,.contact-group .group-list .list-element__name:focus,.contact-group .contact-list .list-element__name:focus,.aside__list .list-element__name:focus,.aside .group-list .list-element__name:focus,.aside .contact-list .list-element__name:focus{outline-color:#00000080}.contact-group__list .list-element__button,.contact-group .group-list .list-element__button,.contact-group .contact-list .list-element__button,.aside__list .list-element__button,.aside .group-list .list-element__button,.aside .contact-list .list-element__button{border:none;border-radius:5px;background-color:transparent;border:2px solid rgba(0,0,0,.05);height:100%;width:30px;background-image:url(/Todo-test-project/images/delete-btn.png);background-repeat:no-repeat;background-position:center;background-size:45% 60%}.contact-group__list .list-element__button:hover,.contact-group__list .list-element__button:focus,.contact-group__list .list-element__button:active,.contact-group .group-list .list-element__button:hover,.contact-group .group-list .list-element__button:focus,.contact-group .group-list .list-element__button:active,.contact-group .contact-list .list-element__button:hover,.contact-group .contact-list .list-element__button:focus,.contact-group .contact-list .list-element__button:active,.aside__list .list-element__button:hover,.aside__list .list-element__button:focus,.aside__list .list-element__button:active,.aside .group-list .list-element__button:hover,.aside .group-list .list-element__button:focus,.aside .group-list .list-element__button:active,.aside .contact-list .list-element__button:hover,.aside .contact-list .list-element__button:focus,.aside .contact-list .list-element__button:active{background-image:url(/Todo-test-project/images/delete-btn-red.png);background-size:100%;background-position:0;animation:opacity 1s,ease-in-out}@keyframes opacity{0%{opacity:.3}to{opacity:1}}.contact-group__list__info-text,.contact-group .group-list__info-text,.contact-group .contact-list__info-text,.aside__list__info-text,.aside .group-list__info-text,.aside .contact-list__info-text{font-weight:400;font-size:12px;font-family:Circe;color:#00000080;text-align:center}.contact-group .contact-list__element,.aside .contact-list__element{width:-webkit-fill-available;padding:8px 10px;border:none;border-radius:5px;background-color:transparent;background-color:#0000000d}.contact-group .contact-list__element:focus,.aside .contact-list__element:focus{outline-color:#00000080}.contact-group__aside-buttoт,.aside__aside-button,.aside-button,.modal-button{box-sizing:border-box;width:100%;padding:15px;border:none;border-radius:5px;background-color:transparent;display:flex;gap:10px;justify-content:flex-end;margin-top:auto}.contact-group__aside-buttoт .transparent-btn,.aside__aside-button .transparent-btn,.aside-button .transparent-btn,.modal-button .transparent-btn{width:fit-content;background-color:transparent;border:none;color:#fff;padding-block:8px;padding-inline:16px;border-radius:7px;letter-spacing:.4px;font-weight:400;font-size:10px;font-family:Circe;color:#005bfe;font-weight:700}.contact-group__aside-buttoт .transparent-btn:hover,.contact-group__aside-buttoт .transparent-btn:focus,.contact-group__aside-buttoт .transparent-btn:active,.aside__aside-button .transparent-btn:hover,.aside__aside-button .transparent-btn:focus,.aside__aside-button .transparent-btn:active,.aside-button .transparent-btn:hover,.aside-button .transparent-btn:focus,.aside-button .transparent-btn:active,.modal-button .transparent-btn:hover,.modal-button .transparent-btn:focus,.modal-button .transparent-btn:active{background-color:#0059fe1a;transition-duration:.5s;transition-timing-function:ease-in-out}.contact-group__aside-buttoт button,.contact-group__aside-buttoт .blue-btn,.aside__aside-button button,.aside__aside-button .blue-btn,.aside-button button,.aside-button .blue-btn,.modal-button button,.modal-button .blue-btn{transition:1s;width:fit-content;background-color:#005bfe;border:none;color:#fff;padding-block:8px;padding-inline:16px;border-radius:7px;letter-spacing:.4px;font-weight:400;font-size:10px;font-family:Circe}.contact-group__aside-buttoт button:hover,.contact-group__aside-buttoт button:focus,.contact-group__aside-buttoт button:active,.contact-group__aside-buttoт .blue-btn:hover,.contact-group__aside-buttoт .blue-btn:focus,.contact-group__aside-buttoт .blue-btn:active,.aside__aside-button button:hover,.aside__aside-button button:focus,.aside__aside-button button:active,.aside__aside-button .blue-btn:hover,.aside__aside-button .blue-btn:focus,.aside__aside-button .blue-btn:active,.aside-button button:hover,.aside-button button:focus,.aside-button button:active,.aside-button .blue-btn:hover,.aside-button .blue-btn:focus,.aside-button .blue-btn:active,.modal-button button:hover,.modal-button button:focus,.modal-button button:active,.modal-button .blue-btn:hover,.modal-button .blue-btn:focus,.modal-button .blue-btn:active{background-color:#0047c6;transition-duration:.5s;transition-timing-function:ease-in-out}.overlay,.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:200;display:none;opacity:0;transition:opacity .3s ease}.overlay.active,.modal.active{display:block;opacity:1}.header,.contact{position:relative;z-index:100}.modal{box-sizing:border-box;z-index:400;padding-inline:20px}.modal__inner,.modal .modal-inner{width:100%;max-width:300px;background-color:#fff;padding:10px;border-radius:7px;display:flex;align-items:center;justify-content:space-between;flex-direction:column}.modal__inner .modal-header,.modal .modal-inner .modal-header{align-self:end}.modal__inner .modal-header button,.modal .modal-inner .modal-header button{padding:2px 2px 0;background-color:transparent;border:none;transition:1s}.modal__inner .modal-header button:hover,.modal__inner .modal-header button:focus,.modal__inner .modal-header button:active,.modal .modal-inner .modal-header button:hover,.modal .modal-inner .modal-header button:focus,.modal .modal-inner .modal-header button:active{background-color:#0000000d;transition-duration:.5s;transition-timing-function:ease-in-out}.modal__inner .modal-header button img,.modal .modal-inner .modal-header button img{height:12px}.modal__inner__title,.modal .modal-inner__title{font-weight:700;font-size:16px;font-family:Circe;text-align:center}.modal__inner__title,.modal__inner__text,.modal .modal-inner__title,.modal .modal-inner__text{margin-block:10px}.modal__inner__text,.modal .modal-inner__text{font-weight:400;font-size:.9em;font-family:Circe;text-align:center}.modal__inner__button,.modal .modal-inner__button{justify-content:center}.modal__inner__button.none,.modal .modal-inner__button.none{display:none}.modal.active{display:flex;flex-flow:column nowrap;justify-content:center;align-items:center}.toaster{position:fixed;right:15px;bottom:30px;z-index:600;width:fit-content;max-width:160px;min-width:140px;gap:8px;background-color:#fff;padding:12px 8px;border-radius:5px;box-shadow:0 0 5px 2px #0000000d;display:flex;align-items:center;justify-content:space-between;font-weight:400;font-size:10px;font-family:Circe;justify-content:center;animation:fadein .8s,fadeout .8s 2.5s}.toaster__image{width:8%}@keyframes fadein{0%{bottom:0;opacity:0}to{bottom:30px;opacity:1}}@keyframes fadeout{0%{bottom:30px;opacity:1}to{bottom:0;opacity:0}}.list_items{padding:10px;cursor:pointer}.container{display:flex;align-items:center;justify-content:space-between;justify-content:flex-start;gap:10px;flex-direction:column;padding-top:25px;height:90%}@media (min-width: 750px){.container{margin-top:20px;gap:1vw}}.container__info-text{margin-bottom:100px;color:#00000080}.container__group,.container .group{background-color:#fff;display:flex;flex-direction:column;border-radius:5px;width:100%;box-sizing:border-box;box-shadow:0 0 25px 2px #0000000d}.container__group input:disabled,.container .group input:disabled{background-color:transparent}.container__group__open-btn,.container .group__open-btn{padding-inline:15px;background-color:transparent;border:none;width:100%;display:flex;align-items:center;justify-content:space-between;padding-block:20px;border-bottom:1px solid rgba(0,0,0,.05)}.container__group__open-btn span,.container .group__open-btn span{font-weight:700;font-size:14px;font-family:Circe}.container__group__open-btn img,.container .group__open-btn img{width:10px;transition:.2s ease-in}.container__group__open-btn img.rotate,.container .group__open-btn img.rotate{transform:rotate(180deg)}.container__group .group__contact,.container .group .group__contact{max-height:0;overflow:hidden;opacity:0;transform:translateY(-10px);transition:all .3s ease-in-out}.container__group .group__contact.open,.container .group .group__contact.open{padding-inline:15px;overflow-y:auto;max-height:330px;opacity:1;transform:translateY(0)}.container__group .contact-item,.container .group .contact-item{display:flex;flex-direction:column;width:100%;border-bottom:1px solid rgba(0,0,0,.05)}@media (min-width: 750px){.container__group .contact-item,.container .group .contact-item{flex-direction:row;align-items:center;padding-block:12px}}.container__group .contact-item__name,.container .group .contact-item__name{margin-top:15px}@media (min-width: 750px){.container__group .contact-item__name,.container .group .contact-item__name{margin-top:0}}.container__group .contact-item input,.container .group .contact-item input{border:none}.container__group .contact-item .contact-info,.container .group .contact-item .contact-info{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;width:100%;margin-top:12px}@media (min-width: 750px){.container__group .contact-item .contact-info,.container .group .contact-item .contact-info{margin-top:0;gap:15px;justify-content:end;padding-bottom:0}}.container__group .contact-item .contact-info__number,.container .group .contact-item .contact-info__number{max-width:150px}.container__group .contact-item .contact-info__button,.container .group .contact-item .contact-info__button{display:flex;align-items:center;justify-content:space-between}.container__group .contact-item .contact-info__button button:first-child,.container .group .contact-item .contact-info__button button:first-child{background-image:url(/Todo-test-project/images/edit-btn.png);margin-right:5px}.container__group .contact-item .contact-info__button button:first-child:hover,.container__group .contact-item .contact-info__button button:first-child:focus,.container__group .contact-item .contact-info__button button:first-child:active,.container .group .contact-item .contact-info__button button:first-child:hover,.container .group .contact-item .contact-info__button button:first-child:focus,.container .group .contact-item .contact-info__button button:first-child:active{background-image:url(/Todo-test-project/images/edit-blue-btn.png);background-size:100%;background-position:0;animation:opacity 1s,ease-in-out}.container__group .contact-item .contact-info__button button,.container .group .contact-item .contact-info__button button{border-radius:5px;background-color:transparent;border-color:#0000000d;padding-inline:5px;padding-block:4px;width:30px;height:30px;background-image:url(/Todo-test-project/images/delete-btn.png);background-size:55%;background-position:6px;background-repeat:no-repeat}.container__group .contact-item .contact-info__button button:hover,.container__group .contact-item .contact-info__button button:focus,.container__group .contact-item .contact-info__button button:active,.container .group .contact-item .contact-info__button button:hover,.container .group .contact-item .contact-info__button button:focus,.container .group .contact-item .contact-info__button button:active{background-image:url(/Todo-test-project/images/delete-btn-red.png);background-size:100%;background-position:0;animation:opacity 1s,ease-in-out}