.role-wrapper{position:relative}.role-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.role-box{display:block;padding:1.5rem 1rem;border:1px solid #e0e0e0;border-radius:.5rem;background:#fff;cursor:pointer;transition:all .2s ease;position:relative;text-align:center;height:100%;min-height:140px;-webkit-user-select:none;user-select:none}.role-box:hover{border-color:#d0d0d0;box-shadow:0 2px 8px #00000014}.role-checkbox:checked+.role-box{background:#f0f4ff;border-color:#b8c5ff;box-shadow:0 2px 8px #0000001a}.role-box-check{position:absolute;top:.5rem;right:.5rem;width:20px;height:20px;border-radius:50%;background:#696cff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10}.role-box-check i{font-size:.75rem;color:#fff;font-weight:700}.role-checkbox:checked+.role-box .role-box-check{opacity:1;transform:scale(1)}.role-box-icon{font-size:2.5rem;color:#333;transition:all .2s ease;margin-bottom:.75rem}.role-checkbox:checked+.role-box .role-box-icon{color:#333!important}.role-box-title{font-weight:500;font-size:.95rem;color:#666;transition:all .2s ease;margin-bottom:.5rem}.role-checkbox:checked+.role-box .role-box-title{color:#333}.role-checkbox:checked+.role-box .badge{background:#b8c5ff33!important;color:#5a6acf!important}.permission-wrapper{position:relative}.permission-checkbox{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.permission-box{display:block;padding:1.25rem .75rem;border:1px solid #e0e0e0;border-radius:.5rem;background:#fff;cursor:pointer;transition:all .2s ease;position:relative;text-align:center;height:100%;min-height:120px;-webkit-user-select:none;user-select:none}.permission-box:hover{border-color:#d0d0d0;box-shadow:0 2px 8px #00000014}.permission-checkbox:checked+.permission-box{background:#f0f4ff;border-color:#b8c5ff;box-shadow:0 2px 8px #0000001a}.permission-box-check{position:absolute;top:.5rem;right:.5rem;width:20px;height:20px;border-radius:50%;background:#696cff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .2s ease;z-index:10}.permission-box-check i{font-size:.7rem;color:#fff;font-weight:700}.permission-checkbox:checked+.permission-box .permission-box-check{opacity:1;transform:scale(1)}.permission-box-icon{font-size:2rem;color:#333;transition:all .2s ease;margin-bottom:.5rem}.permission-checkbox:checked+.permission-box .permission-box-icon{color:#333!important}.permission-box-title{font-size:.85rem;font-weight:500;color:#666;transition:all .2s ease;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.permission-checkbox:checked+.permission-box .permission-box-title{color:#333}.role-checkbox:checked+.role-box .role-box-check,.permission-checkbox:checked+.permission-box .permission-box-check{animation:checkIn .3s cubic-bezier(.68,-.55,.265,1.55)}@keyframes checkIn{0%{transform:scale(0) rotate(0)}50%{transform:scale(1.2) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}.role-box,.permission-box{-webkit-tap-highlight-color:transparent}.role-box:active,.permission-box:active{transform:scale(.98)}.role-box-meta{margin-top:.5rem}.role-box-meta .badge{font-size:.75rem;padding:.25rem .5rem}