:root{--color-button:#455471;--color-button-hovered:#4f81b9;--color-text:#2f3b52;--color-text-description:#64748b;--color-text-white:#fff;--color-menu-background:#2f3b52;--color-menu-background-footer:#2c364b;--color-menu-text:#98a7b9;--color-menu-border:#39465c;--color-text-screen:#7bc14e;--color-menu-item-selected-background:#232e44;--color-menu-dropdown-background:#374869;--color-menu-children-background:#293449;--color-border:#e2e8ed;--color-background-body:#f9f9fc;--color-background-body-group:#fff;--font-size-small:12px;--font-size-medium:16px;--font-size-page-title:20px;--font-size-large:30px;font-family:Roboto,sans-serif;font-size:16px}html,body{width:100%;height:100%}body,p{margin:0}.x-not-found{background-image:url(/assets/not-found-BuSiL-xF.jpg);background-position:top;background-repeat:no-repeat;background-size:cover;flex:1;justify-content:center;align-items:center;display:flex}.x-not-found .x-not-found-wrapper{position:absolute;bottom:50px}.x-not-found .x-not-found-wrapper .x-not-found-link{color:var(--color-text-white);background:var(--color-button);font-size:var(--font-size-medium);border-radius:12px;padding:8px 16px;text-decoration:none}.x-not-found .x-not-found-wrapper .x-not-found-link:hover{background:var(--color-button-hovered)}.x-not-found .x-not-found-wrapper .x-not-found-title{color:var(--color-text-white);font-weight:700;font-size:var(--font-size-large);margin-bottom:24px}.x-main-container{text-align:center;box-sizing:border-box;max-width:100%;height:100%;margin:0 auto;display:flex}.x-main-container .x-main-left-menu{background-color:var(--color-menu-background);flex-direction:column;width:210px;height:100%;display:flex}.x-main-container .x-main-left-menu .x-main-left-menu-header{text-align:left;border-bottom:1px solid var(--color-menu-border);font-size:var(--font-size-large);background-image:linear-gradient(to right, var(--color-text-screen) 0, var(--color-text-screen) 3ch, var(--color-text-white) 6ch);color:#0000;-webkit-background-clip:text;background-clip:text;align-items:center;gap:8px;padding:12px 8px;display:flex}.x-main-container .x-main-left-menu .x-main-left-menu-header:before{content:"";background:url(/logo.svg) 50%/contain no-repeat;width:40px;height:36px;margin-bottom:4px;display:inline-block}.x-main-container .x-main-left-menu .x-main-left-menu-content{flex:1;min-height:0;overflow-y:auto}.x-main-container .x-main-left-menu .x-main-left-menu-footer{background-color:var(--color-menu-background-footer);padding:16px}.x-main-container .x-main-left-menu .x-main-left-menu-language{align-items:center;display:flex}.x-main-container .x-main-left-menu .x-main-left-menu-language .x-main-left-menu-title{text-transform:capitalize;color:var(--color-menu-text);font-size:var(--font-size-small)}.x-main-container .x-main-left-menu .x-main-left-menu-language .x-main-left-menu-dropdown{color:var(--color-text-white);background-color:var(--color-menu-dropdown-background);border:none;border-radius:8px;flex:1;margin-left:8px;padding:6px}.x-main-container .x-main-left-menu .x-main-left-menu-item{cursor:pointer;color:var(--color-menu-text);font-size:var(--font-size-small);text-align:left;border-radius:16px;align-items:center;gap:0;padding:6px 8px 6px 2px;line-height:20px;text-decoration:none;display:flex}.x-main-container .x-main-left-menu .x-main-left-menu-item:hover{color:var(--color-text-white)!important}.x-main-container .x-main-left-menu .x-main-left-menu-item.active{color:var(--color-text-screen);background-color:var(--color-menu-item-selected-background)}.x-main-container .x-main-left-menu .x-main-menu-group-button{cursor:pointer;width:100%;height:36px;color:var(--color-menu-text);background-color:#2f3b52;border:none;border-radius:0;align-items:center;padding:8px 16px;display:flex}.x-main-container .x-main-left-menu .x-main-menu-group-button:hover{color:var(--color-text-white)!important}.x-main-container .x-main-left-menu .x-main-menu-group-button.active{background-color:var(--color-menu-item-selected-background);color:var(--color-text-screen)}.x-main-container .x-main-left-menu .x-main-menu-group-button .x-main-menu-group-button-content{flex:1;align-items:center;gap:12px;display:flex}.x-main-container .x-main-left-menu .x-main-menu-children{background-color:var(--color-menu-children-background);flex-direction:column;gap:8px;padding:8px 12px;display:flex}.x-main-container .x-main-body{background-color:var(--color-background-body);flex:1;height:100%;overflow-y:auto}.x-main-container .x-main-body-sub-group{background-color:var(--color-background-body-group);border:1px solid var(--color-border);border-radius:12px;margin:12px}.x-main-container .x-main-body-group{background-color:var(--color-background-body-group);border-radius:12px;margin:12px;display:inline-flex;box-shadow:0 0 12px #0000001f}.x-main-container .title-page{color:var(--color-text);font-size:var(--font-size-page-title);border-bottom:1px solid var(--color-border);padding:10px;font-weight:700;display:inline-block}.x-main-container .description-page{font-size:var(--font-size-small);color:var(--color-text-description);text-align:justify;text-align-last:center;padding:10px 50px;display:inline-block}.x-main-container .group-category .group-category-items{border:1px solid var(--color-button);border-radius:16px;padding:2px;display:inline-flex}.x-main-container .group-category .group-category-items .category-button{cursor:pointer;font-size:var(--font-size-small);color:var(--color-text);background-color:#0000;border:none;border-radius:16px;padding:4px 24px}.x-main-container .group-category .group-category-items .category-button.active{background-color:var(--color-button);color:var(--color-text-white)}.x-keyboard{-webkit-user-select:none;user-select:none;outline:none;align-items:baseline;padding:16px}.x-keyboard .x-keyboard-left{display:inline-block}.x-keyboard .x-keyboard-center,.x-keyboard .x-keyboard-right{margin-left:24px;display:inline-block}.x-keyboard .x-keyboard-center.sub-item,.x-keyboard .x-keyboard-right.sub-item{margin-left:10px}.x-keyboard .keyboard-row{gap:10px;margin-bottom:10px;display:flex}.x-keyboard .keyboard-row .keyboard-key{border:1px solid var(--color-border);border-radius:12px;justify-content:center;align-items:center;font-size:12px;font-weight:700;transition:all .12s;display:flex}.x-keyboard .keyboard-row .keyboard-key.empty-key{border-color:#0000}.x-keyboard .keyboard-row .keyboard-key.pressing{color:#fff;border-color:var(--color-button);background:linear-gradient(135deg, var(--color-button), var(--color-button-hovered));transform:translateY(2px)}.x-keyboard-description{display:flex}.x-keyboard-description .x-keyboard-pressed{flex:1;gap:8px;height:36px;padding:12px;display:flex;overflow:hidden}.x-keyboard-description .x-keyboard-pressed .x-keyboard-pressed-item{background-color:var(--color-button);color:var(--color-text-white);border-radius:8px;justify-content:center;align-items:center;padding:8px 16px;display:flex}.x-keyboard-description .x-keyboard-pressed-count{border-left:1px solid var(--color-border);color:var(--color-text);align-items:center;gap:4px;margin-left:12px;padding:8px;display:flex}.x-keyboard-description .x-keyboard-pressed-count .x-keyboard-pressed-count-title{font-size:var(--font-size-small)}.x-keyboard-description .x-keyboard-pressed-count .x-keyboard-pressed-count-value{color:var(--color-text-white);background-color:var(--color-button-hovered);font-size:var(--font-size-medium);border-radius:16px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:8px;display:flex}