@import "https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap";:root{--font-size-small:1.4rem;--font-size-regular:1.6rem;--font-size-large:1.8rem;--font-size-xLarge:4.2rem;--font-weight-light:300;--font-weight-regular:400;--font-weight-bold:700;--default-padding:1.6rem;--font-family-ar:"Almarai", sans-serif;--timing-animation:.2s;--color-black:#3e3e3e;--color-red:#ff2d2d;--color-blue:#064267;--color-white:white;--color-gray:#525252;--color-light-gray:#f1f3f5;--color-text:var(--color-black);--color-bg:var(--color-light-gray);--color-input:var(--color-white);--color-link:var(--color-blue);--color-task-hover:#ececec;--color-bg-dark-theme:#222;--color-input-dark-theme:#333;--color-text-dark-theme:var(--color-light-gray)}*{box-sizing:border-box;border-radius:0;margin:0;padding:0}html{font-size:62%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{font-family:Almarai,sans-serif;font-size:var(--font-size-regular);background:var(--color-bg);color:var(--color-text);min-height:100vh;transition:background var(--timing-animation);flex-direction:column;display:flex}.App--isDark{--color-bg:var(--color-bg-dark-theme);--color-input:var(--color-input-dark-theme);--color-text:var(--color-text-dark-theme);--color-task-hover:var(--color-input-dark-theme);--color-link:#3cb6ff;--color-gray:#adadad}.App__wrapper{width:100%;max-width:70rem;padding:var(--default-padding);flex-direction:column;flex:1;margin:0 auto;display:flex}.Header{padding:var(--default-padding);justify-content:space-between;display:flex}.DarkThemeToggle{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--color-gray);cursor:pointer;transition:all var(--timing-animation);background:0 0;border:0;align-items:center;font-family:inherit;display:flex}.App--isDark .DarkThemeToggle{color:var(--color-link);text-shadow:0 0 2px var(--color-blue)}.App--isDark .DarkThemeToggle__deactivate{display:inline-block}.App--isDark .DarkThemeToggle__activate{display:none}.DarkThemeToggle__activate,.DarkThemeToggle__deactivate{margin-left:calc(var(--default-padding) / 4);font-size:var(--font-size-small)}.DarkThemeToggle__deactivate{display:none}.DarkThemeToggle--isActive{color:var(--color-link);text-shadow:0 0 2px var(--color-blue)}.SocialLinks{gap:calc(var(--default-padding) / 2);display:flex}.SocialLinks__img{width:24px}.TaskSearchBar{flex-direction:column;display:flex}.TaskSearchBar__label{font-size:var(--font-size-xLarge);font-weight:var(--font-weight-light);text-align:center;margin-top:calc(var(--default-padding) * 2);margin-bottom:calc(var(--default-padding) * 2)}.TaskSearchBar__searchContent{cursor:text;border-radius:.3rem;height:6.4rem;display:flex;overflow:hidden;box-shadow:0 .6rem .8rem #55667708,0 .1rem .1rem #5676}.TaskSearchBar__input{padding:var(--default-padding);background-color:var(--color-input);color:var(--color-text);min-width:4.8rem;font-family:var(--font-family-ar);font-size:var(--font-size-large);transition:background-color var(--timing-animation);border:0;flex:auto}.TaskSearchBar ::placeholder{color:var(--color-gray);opacity:1}.TaskSearchBar__button{background-color:var(--color-blue);color:var(--color-white);font-family:var(--font-family-ar);font-size:var(--font-size-large);font-weight:var(--font-weight-regular);cursor:pointer;padding:0 calc(var(--default-padding) * 1.5);transition:background-color var(--timing-animation);border:0}.TaskSearchBar__button:hover{background-color:#099df8}.show{display:none}.TaskList__link{font-size:var(--font-size-small);font-weight:var(--font-weight-bold);color:var(--color-gray);cursor:pointer;transition:all var(--timing-animation);margin-top:var(--default-padding);background:0 0;border:0;font-family:inherit}.TaskList__link--isActive{color:var(--color-link);text-shadow:0 0 2px var(--color-blue)}.TaskList__link--isActive .show{display:inline-block}.TaskList__link--isActive .hide{display:none}.TaskList__list{margin-top:calc(var(--default-padding) * 2);flex-direction:column;flex:1;list-style:none;display:flex}.TaskList__taskContent{padding:0 var(--default-padding);flex:1;align-items:center;height:5.4rem;display:flex}.TaskList__taskContent:hover{background-color:var(--color-task-hover)}.TaskList__taskContent:hover .TaskList__deleteIcon{opacity:1;visibility:visible}.TaskList__taskContent--isActive{color:var(--color-gray);text-decoration:line-through}.TaskList__list--hideCompleted .TaskList__taskContent--isActive{display:none}.TaskList__taskContent--isActive .TaskList__checkbox{background-color:var(--color-blue)}.TaskList__taskContent--isActive .TaskList__checkboxImage{opacity:1;visibility:visible}.TaskList__valueContent{font-size:var(--font-size-large);flex:1;align-items:center;display:flex;position:relative}.TaskList__value{cursor:pointer;height:100%;padding:var(--default-padding);padding-right:calc(var(--default-padding) / 2);transition:all var(--timing-animation);flex:1}.TaskList__valueInput{padding:var(--default-padding);padding-right:calc(var(--default-padding) / 2);font-family:var(--font-family-ar);font-size:var(--font-size-large);background-color:var(--color-white);border:none;width:100%;height:100%}.TaskList__checkbox{width:2.2rem;height:2.2rem;margin-left:calc(var(--default-padding) / 2);cursor:pointer;transition:all var(--timing-animation);background-color:#fff;border-radius:.2rem;padding:.2rem;box-shadow:0 0 .3rem #0000001a}.TaskList__checkboxImage{opacity:0;visibility:hidden;-webkit-user-select:none;user-select:none}.TaskList__deleteIcon{opacity:0;visibility:hidden;width:2.8rem;transition:all var(--timing-animation);cursor:pointer;position:absolute;left:0}.EmptyList{text-align:center;color:var(--color-gray);font-weight:var(--font-weight-regular);font-size:var(--font-size-large);margin:var(--default-padding) auto 0}.EmptyList__img{filter:grayscale();opacity:.5;height:30rem}.hidden,.TaskList__list--hideCompleted .TaskList__taskContent--isActive{display:none}.isActive .show{display:inline}.isActive .hide{display:none}