.pagination-wrapper{display:flex}.pagination-wrapper .pagination-item{padding:3px 8px;border:1px solid var(--pagination-border-color);transition:all .2s;-webkit-user-select:none;user-select:none;cursor:pointer}.pagination-wrapper .pagination-item:hover{background:var(--pagination-hover-color)}.pagination-wrapper .pagination-item.active{padding:3px 8px;background:var(--pagination-active-color)}.pagination-wrapper .pagination-item.disabled,.pagination-wrapper .pagination-item.disabled:hover{cursor:not-allowed;background:var(--button-disabled-color)}.pagination-wrapper .pagination-item+.pagination-item{margin-left:8px}.pagination-wrapper .separator{padding:3px 8px;-webkit-user-select:none;user-select:none;letter-spacing:-1px}.table-title{margin:5px 0 15px;font-size:18px;font-weight:700;text-transform:uppercase}.table .table-header{display:flex;justify-content:start;align-items:center;padding:5px 10px;margin-bottom:10px;background-color:var(--button-color);font-size:14px;font-weight:600;line-height:20px;text-transform:uppercase;letter-spacing:.03em;border-radius:3px;-webkit-user-select:none;user-select:none}.table .table-row{display:flex;justify-content:start;align-items:center;padding:5px 10px;margin-bottom:10px;background-color:var(--table-row-color);box-shadow:0 0 9px 0 var(--table-row-shadow-color);border-radius:3px;text-decoration:none;color:var(--text-color)}.table .table-row .user-1,.table .table-header .user-1{flex-basis:40%;display:flex}.table .table-row .user-2,.table .table-header .user-2,.table .table-row .user-3,.table .table-header .user-3{flex-basis:30%;display:flex}.table .table-row .post-1,.table .table-header .post-1{flex-basis:40%;display:flex}.table .table-row .post-2,.table .table-header .post-2{flex-basis:60%;display:flex}.table .table-row .todo-1,.table .table-header .todo-1{flex-basis:100%;display:flex}.table .table-row .todo-2,.table .table-header .todo-2{flex-basis:150px;display:flex}.table .table-header .user-1,.table .table-header .user-2,.table .table-header .user-3,.table .table-header .post-1,.table .table-header .post-2,.table .table-header .todo-1{cursor:pointer;transition:all .2s}.icon{width:20px;height:20px;display:none}.icon.icon-asc{width:20px;height:20px;display:flex;justify-content:center;align-items:center;transform:rotate(180deg)}.icon.icon-desc{width:20px;height:20px;display:flex;justify-content:center;align-items:center}.icon img{max-width:12px;max-height:12px}.header{background:var(--header-bg-color);padding:15px 0}.header-link{text-decoration:none;color:var(--link-header-text-color);transition:.2s}.header-link:hover{color:var(--link-header-text-hover-color)}.header-link+.header-link{margin-left:12px}.header-link.active{color:var(--link-header-text-active-color)}.post-content{padding:8px 10px;box-shadow:0 0 9px 0 var(--table-row-shadow-color);border-radius:5px}.post-id{font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:start}.post-title,.post-body{margin-top:5px;font-size:16px;font-weight:400}.post-user{margin-top:5px;font-size:14px;display:flex;align-items:center;justify-content:start}.post-id .title{text-transform:uppercase;margin-right:5px}.post-title .title,.post-body .title{text-transform:uppercase;font-weight:600}.post-user .title{text-transform:uppercase;font-weight:600;margin-right:10px}.comment-item{margin:15px 0;padding:5px 10px;box-shadow:0 0 9px 0 var(--table-row-shadow-color);border-radius:5px}.comment-item .comment-title{font-size:16px;font-weight:700}.comment-item .comment-name{font-size:14px;font-weight:600}.comment-item .comment-body{font-size:14px;font-weight:400}.todo-content{padding:8px 10px;box-shadow:0 0 9px 0 var(--table-row-shadow-color);border-radius:5px;margin-bottom:12px}.todo-id{font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:start}.todo-title,.todo-status{margin-top:5px;font-size:16px;font-weight:400}.todo-user{margin-top:5px;font-size:14px;display:flex;align-items:center;justify-content:start}.todo-id .title{text-transform:uppercase;margin-right:5px}.todo-title .title,.todo-status .title{text-transform:uppercase;font-weight:600}.todo-user .title{text-transform:uppercase;font-weight:600;margin-right:10px}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--text-color);background-color:var(--background-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-color: #242424;--background-color: #ffffff;--header-bg-color: teal;--button-color: teal;--button-hover-color: #05aeae;--button-disabled-color: #ebebeb;--table-row-color: #ffffff;--table-row-shadow-color: rgba(0, 0, 0, .1);--modal-shadow-color: rgba(160, 160, 160, .3);--modal-background-color: rgb(250, 250, 250);--pagination-active-color: var(--button-color);--pagination-border-color: var(--button-color);--pagination-hover-color: rgb(212, 235, 235);--link-text-color: teal;--link-header-text-color: #ffffff;--link-header-text-active-color: #08f1ff;--link-header-text-hover-color: #91f1f7}a,a:active{color:var(--link-text-color)}body{margin:0;min-height:100vh}h1{font-size:3.2em;line-height:1.1}.container{max-width:1250px;margin:0 auto;padding:0 25px}.page-content{margin:25px 0}.pagination-content{margin-top:20px}.data-section{padding:8px 10px;margin-bottom:20px;box-shadow:0 0 9px 0 var(--table-row-shadow-color);border-radius:5px}.data-section .section-row span:first-child{font-weight:600}.data-section .title{font-weight:700}figure{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;width:6.25em;height:6.25em;animation:rotate 2.4s linear infinite}.white{top:0;bottom:0;left:0;right:0;background:#fff;animation:flash 2.4s linear infinite;opacity:0}.dot{position:absolute;margin:auto;width:2.4em;height:2.4em;border-radius:100%;transition:all 1s ease}.dot:nth-child(2){top:0;bottom:0;left:0;background:#f44;animation:dotsY 2.4s linear infinite}.dot:nth-child(3){left:0;right:0;top:0;background:#fb3;animation:dotsX 2.4s linear infinite}.dot:nth-child(4){top:0;bottom:0;right:0;background:#9c0;animation:dotsY 2.4s linear infinite}.dot:nth-child(5){left:0;right:0;bottom:0;background:#33b5e5;animation:dotsX 2.4s linear infinite}@keyframes rotate{0%{transform:rotate(0)}10%{width:6.25em;height:6.25em}66%{width:2.4em;height:2.4em}to{transform:rotate(360deg);width:6.25em;height:6.25em}}@keyframes dotsY{66%{opacity:.1;width:2.4em}77%{opacity:1;width:0}}@keyframes dotsX{66%{opacity:.1;height:2.4em}77%{opacity:1;height:0}}@keyframes flash{33%{opacity:0;border-radius:0%}55%{opacity:.6;border-radius:100%}66%{opacity:0}}