@charset "UTF-8";*,:before,:after{box-sizing:border-box}:where(ul,ol):where([class]){padding-left:0}body,:where(blockquote,figure):where([class]){margin:0}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl):where([class]){margin-block:0}:where(dd[class]){margin-left:0}:where(fieldset[class]){margin-left:0;padding:0;border:none}:where(ul[class]){list-style:none}:where(address[class]){font-style:normal}p{margin-block:0}img,video{display:block;max-width:100%;height:auto}input,textarea,select,button{font:inherit}html{height:100%}html,:has(:target){scroll-behavior:smooth}body{min-height:100%;line-height:1.5}a:where([class]){display:inline-flex;color:inherit;text-decoration:inherit}button,label{cursor:pointer}:where([stroke]:not([stroke=none],[stroke^=url])){stroke:currentColor}svg *{transition-property:fill,stroke}:where(table){border-collapse:collapse;border-color:currentColor}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--color-bg: #FFFEFC;--color-menu-bg: #FFF0E0;--color-task-bg: #FFE3C5;--color-hover-task-bg: #f7dcc0;--color-complete-task-bg: #EFD794;--color-components-bg: #c4cf70;--color-hover-components-bg: #d1dd71;--color-border: #669966;--color-text: #000000;--color-input-field: #FFF8F0;--color-button-text: #FFFFFF;--border: 1px solid var(--color-border);--border-radius: 4px;--border-radius-menu: 8px;--transition-duration: .15s;--menu-width: 700px}html.is-dark-theme{--color-bg: #000707;--color-menu-bg: #003131;--color-task-bg: #002323;--color-hover-task-bg: #001a1a;--color-complete-task-bg: #00110B;--color-components-bg: #336633;--color-hover-components-bg: #285828;--color-border: #336633;--color-text: #BAF6BA;--color-input-field: #002323;--color-button-text: #BAF6BA}body{background-color:var(--color-bg);font-family:sans-serif;color:var(--color-text)}.main{padding:40px 20px}.lock{overflow:hidden}.hidden{display:none!important}*:focus-visible{outline:3px dashed var(--color-border);outline-offset:1px}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;border:0!important;padding:0!important;white-space:nowrap!important;clip-path:inset(100%)!important;clip:rect(0 0 0 0)!important;overflow:hidden!important}.container{display:flex;flex-direction:column;align-items:center;row-gap:20px;margin-inline:auto;max-width:700px}.button{border:none;background-color:var(--color-components-bg);border-radius:var(--border-radius);font-size:clamp(14px,1.57vw,16px);padding:10px 15px;white-space:nowrap;transition:var(--transition-duration) background-color;color:var(--color-button-text)}.button:hover{background-color:var(--color-hover-components-bg)}.input{background-color:transparent;border:var(--border);border-radius:var(--border-radius);padding:10px}.main__content{padding:40px 30px 20px;max-width:700px;background-color:var(--color-menu-bg);border-radius:var(--border-radius-menu);border:var(--border)}.main__header{width:100%}.main__title{font-size:clamp(26px,3.14vw,32px)}.main__controllers{display:grid;grid-template-columns:repeat(4,1fr);justify-content:space-between;gap:10px;width:100%}.main__search-container{position:relative;grid-column:3 span}.main__input{position:relative;width:100%;font-size:clamp(14px,1.57vw,16px);background-color:var(--color-input-field);color:var(--color-text)}.main__input::placeholder{color:inherit;filter:brightness(.8)}.main__search-img{position:absolute;display:block;top:50%;right:12px;transform:translateY(-50%);width:30px;height:30px}.main__search-img svg path{transition-duration:var(--transition-duration);stroke:var(--color-text)}.main__controllers-operations{display:flex;column-gap:10px;grid-column:4 span;height:35px;padding:5px 20px;background-color:var(--color-task-bg);border:var(--border);border-radius:var(--border-radius)}.main__controller{display:flex;justify-content:center;align-items:center;border:none;padding:0;aspect-ratio:1;background-color:transparent;transition:fill var(--transition-duration)}.main__controller svg path,.main__controller svg line{transition-duration:var(--transition-duration);stroke:var(--color-text)}.main__controller:hover svg path,.main__controller:hover svg line{stroke:var(--color-border)}.main__controller:last-child{margin-left:auto}.main__list{position:relative;display:flex;flex-direction:column;row-gap:10px;width:100%}.main__item{width:100%;border-radius:4px}.main__item:has(.is-dragging){background-color:var(--color-components-bg)}.main__item-wrapper{display:flex;align-items:center;padding:12px 15px;border-radius:4px;word-break:break-all;justify-content:flex-start;min-width:100%;background-color:var(--color-task-bg);border:var(--border);border-left:5px solid var(--color-border);transition:background-color var(--transition-duration),transform var(--transition-duration)}.main__item-wrapper:hover{background-color:var(--color-hover-task-bg);cursor:pointer}.main__item-wrapper:has(.main__item-delete-button:hover){background-color:var(--color-task-bg)}.main__item-wrapper:has(.main__item-checkbox:checked){text-decoration:line-through;background-color:var(--color-complete-task-bg)}.main__item-wrapper.is-dragging{transform:scaleX(1.02);background-color:var(--color-hover-task-bg)}.main__item-dnd{display:flex;justify-content:center;align-items:center;border:none;border-radius:var(--border-radius);aspect-ratio:1;flex-shrink:0;width:32px;padding:5px 10px;background-color:transparent;margin-right:.63em;touch-action:none}.main__item-dnd svg,.main__item-dnd path{pointer-events:none}.main__item-checkbox{align-self:flex-start;position:absolute;margin:0;width:32px;aspect-ratio:1;z-index:200;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.main__item-custom-checkbox{--check-image: url("data:image/svg+xml,%3csvg%20viewBox='0%200%2038%2038'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M31.6667%209.5L14.25%2026.9167L6.33333%2019'%20stroke='%23669966'%20stroke-opacity='0.933333'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e");align-self:flex-start;flex-shrink:0;display:flex;width:30px;aspect-ratio:1;background-color:transparent;border:var(--border);border-width:2px;border-radius:var(--border-radius-menu);margin-right:.63em}.main__item-checkbox:checked+.main__item-custom-checkbox{background:var(--check-image) no-repeat center/contain}.main__item-checkbox:focus-visible+.main__item-custom-checkbox{outline:3px dashed var(--color-border)}.main__item--info{display:flex;align-items:center;padding:12px 15px;border-radius:4px;word-break:break-all;background-color:var(--color-hover-task-bg);border:none}.main__item-title{display:-webkit-box;font-size:16px;overflow:hidden;line-clamp:3;-webkit-line-clamp:3;box-orient:vertical;-webkit-box-orient:vertical}.main__item-title:not(:last-child){margin-right:8px}.main__item-delete-button{display:flex;justify-content:center;align-items:center;border:none;border-radius:var(--border-radius);padding:0;aspect-ratio:1;align-self:flex-start;flex-shrink:0;margin-left:auto;width:30px;background-color:var(--color-components-bg);transition:var(--transition-duration) background-color}.main__item-delete-button:hover{background-color:var(--color-hover-components-bg)}.main__item-delete-button svg{width:25px;aspect-ratio:1;pointer-events:none}.main__item-delete-button svg path{stroke:var(--color-text)}@media (max-width: 462px){.main__search-container,.main__button{grid-column:4 span}}.modal{max-width:750px;width:80%;border:var(--border);border-radius:var(--border-radius-menu);padding:0;background-color:var(--color-menu-bg)}.modal::backdrop{background-color:#00000080}.modal-inner{display:flex;flex-direction:column;row-gap:20px;padding:25px 25px 80px}.modal__close-button{position:absolute;top:10px;right:10px;background-color:transparent;border:none;padding-inline:.3em;font-size:28px;color:var(--color-text);transition:color var(--transition-duration)}.modal__close-button:hover{color:var(--color-border)}.modal__title{align-self:center;color:var(--color-text)}.modal__form{display:flex;flex-direction:column}.modal__input{background-color:var(--color-input-field);font-size:clamp(14px,1.57vw,16px);width:100%;color:var(--color-text)}.modal__input:not(:last-child){margin-bottom:10px}.modal__description-input{background-color:var(--color-input-field);color:var(--color-text);width:100%;border-radius:var(--border-radius);border:var(--border);padding:10px;font-size:12px;resize:vertical;min-height:100px}.modal__description-input:not(:last-child){margin-bottom:20px}.modal__error-message{color:red;align-self:center}