@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@import"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css";*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}html{scroll-behavior:smooth}body{background-color:#f3f4f7;color:#000}.container{width:1024px;background-color:#fff;margin:0 auto;max-width:100%;height:100vh;padding:1.5rem 2.5rem}@media only screen and (max-width: 620px){.container{padding:1.5rem 1.25rem}}a{text-decoration:none;color:unset}button,input{outline:0}ul{list-style-type:none}img{max-width:100%}.header{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.header .search-bar{width:calc(100% - 7rem);background-color:#f3f4f7;padding:0;height:3rem;border-radius:.5rem;display:flex;align-items:center}.header .search-bar .search-input{outline:none;border:none;background-color:transparent;height:100%;padding:0 0 0 1rem;width:100%}.header .search-bar .search-input::placeholder{color:#949fae}.header .search-bar .search-icon{padding:0 1rem;display:grid;place-items:center}.header .header-icon{width:3rem;height:3rem;display:grid;place-items:center;border-radius:.5rem;background-color:#f3f4f7;color:#000;outline:none;border:none;cursor:pointer;transition:all .1s}.header .header-icon:active{transform:scale(.9)}.icon-boxes{height:4.5rem;display:grid;gap:.5rem;align-items:center;flex-direction:column;grid-template-columns:repeat(5,1fr)}.icon-boxes .icon-box{height:3rem;display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;gap:.25rem;background-color:#f3f4f7;padding:.75rem .5rem;border-radius:.5rem;outline:none;border:none;cursor:pointer;transition:all .1s}.icon-boxes .icon-box:active{transform:scale(.9)}.icon-boxes .icon-box .icon-text{margin:0;font-size:.9rem;color:#000}@media only screen and (max-width: 620px){.icon-boxes .icon-box .icon-text{display:none}}.icon-boxes .icon-box .bi{font-size:.9rem;color:#000}.icon-boxes .active{background-color:#646cff}.icon-boxes .active .icon-text,.icon-boxes .active .bi{color:#fff}.list{position:relative;width:100%;height:calc(100vh - 9rem);overflow-y:scroll;padding:1rem 0}.list-boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}@media only screen and (max-width: 620px){.list-boxes{grid-template-columns:repeat(1,1fr)}}.list-boxes .list-box{background-color:#fff;box-shadow:5px 3px 20px 4px #7b808a16;border-radius:.75rem;display:flex;flex-direction:column;gap:1rem;padding:1rem;height:max-content}.list-boxes .list-box .list-word-box{display:flex;align-items:flex-start;gap:.5rem}.list-boxes .list-box .list-word-box:nth-child(1){padding-bottom:1rem;border-bottom:2px solid #f3f4f7}.list-boxes .list-box .list-word-box .list-flag{position:relative;top:.15rem;width:1.25rem;height:1.25rem;border-radius:50%;object-fit:cover}.list-boxes .list-box .list-word-box .list-text{margin:0;padding:0;text-transform: capitalize;}.list-boxes .list-box .list-buttons{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;gap:.5rem}.list-boxes .list-box .list-buttons .list-btn{background-color:#f3f4f7;outline:none;border:none;padding:.5rem;border-radius:.5rem;cursor:pointer;transition:all .1s;text-align:center}.list-boxes .list-box .list-buttons .list-btn:active{transform:scale(.9)}.list-boxes .list-box .list-buttons .list-btn .bi{color:#000}.list-boxes .list-box .list-buttons .list-btn.active{background-color:#646cff}.list-boxes .list-box .list-buttons .list-btn.active .bi{color:#fff}.list-boxes .list-box.hide .list-word-box:nth-child(2){text-decoration-line:line-through;-webkit-text-decoration-line:line-through;text-decoration-color:#f3f4f7;-webkit-text-decoration-color:#f3f4f7;text-decoration:line-through #f3f4f7 2px;color:transparent}.popup-area{position:absolute;top:0;left:0;width:100%;height:100vh;display:grid;place-items:center;background-color:#0000003e;z-index:9;transition:all .25s;opacity:0;pointer-events:none}.popup-area.show{opacity:1;pointer-events:visible}.popup-area.show .popup-box{transform:scale(1)}.popup-area .popup-box{max-width:500px;width:calc(100% - 2rem);max-height:calc(100vh - 2rem);padding:1.5rem 1.75rem;background-color:#fff;box-shadow:5px 3px 20px 4px #7b808a16;border-radius:1rem;display:flex;flex-direction:column;gap:1rem;transition:all .25s;transform:scale(0);overflow:hidden;overflow-y:scroll}.popup-area .popup-box .popup-title{display:flex;align-items:center;gap:.5rem}.popup-area .popup-box .popup-title .bi{font-size:1.25rem;color:#646cff}.popup-area .popup-box .popup-title .popup-title-text{font-size:1.25rem;font-weight:600;color:#000}.popup-area .popup-box .popup-input-box{display:flex;flex-direction:column;gap:.5rem}.popup-area .popup-box .popup-input-box .popup-label{display:flex;align-items:center;gap:.5rem;font-size:1rem}.popup-area .popup-box .popup-input-box .popup-label .popup-flag{width:1.25rem;height:1.25rem;border-radius:50%;object-fit:cover}.popup-area .popup-box .popup-input-box .popup-textarea{width:100%;border-radius:.5rem;border:2px solid #f3f4f7;outline:none;padding:.75rem;resize:vertical}.popup-area .popup-box .popup-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem .5rem;border-radius:.5rem;background-color:#646cff;color:#fff;outline:none;border:none;transition:all .1s;cursor:pointer}.popup-area .popup-box .popup-btn:active{transform:scale(.9)}.popup-area .popup-box .popup-btn.remove-btn{background-color:#fef2f2;color:#f04545}.popup-area .popup-box .info-list{display:flex;gap:.75rem;flex-direction:column;list-style-type:none}.popup-area .popup-box .info-list .info-list-item{display:flex;flex-direction:column;gap:.25rem;font-size:1rem;font-weight:500}.popup-area .popup-box .info-list .info-list-item .info-list-title{display:flex;align-items:center;gap:.5rem}.popup-area .popup-box .info-list .info-list-item .info-list-title .bi{color:#646cff}.popup-area .popup-box .info-list .info-list-item .info-list-detail{font-weight:400;font-size:.9rem;color:#949fae}.popup-area .popup-box .filters{display:flex;flex-direction:column;gap:1rem}.popup-area .popup-box .filters .filter-input{display:none}.popup-area .popup-box .filters .filter-input:checked~.filter-label{border-color:#646cff;color:#646cff;background-color:#aaaef43b}.popup-area .popup-box .filters .filter-label{width:100%;padding:1rem 1.25rem;border-radius:.5rem;border:2px solid #f3f4f7;display:flex;align-items:center;justify-content:space-between;font-size:.9rem;background-color:transparent;cursor:pointer;transition:all .2s}.popup-area .popup-box .filters .filter-label:active{transform:scale(.9)}