*{margin:0;padding:0;font-family:Arial;box-sizing:border-box}.app{width:100vw;height:100vh;position:relative}.app .div-scroll{height:100%;width:var(--width-text-scroll);overflow:auto;border-right:1px solid #fff;position:absolute;z-index:99;top:0;right:15%}.app .div-scroll::-webkit-scrollbar{display:none}.app .layout{height:100%;width:100%;display:flex;justify-content:center;align-items:center}.app .layout .btn-fullScreen{background-repeat:no-repeat;width:40px;height:40px;position:fixed;top:10px;left:10px;z-index:100}.app .layout .col-left{width:85%;height:100%}.app .layout .col-left .result{position:fixed;bottom:10px;left:10px;font-size:60px;color:var(--color-active)}.app .layout .col-left .list-item{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;cursor:pointer}.app .layout .col-left .list-item img{width:50px}.app .layout .col-right{width:15%;height:100%;display:flex;flex-direction:column;justify-content:start;align-items:start;overflow:auto;padding-left:20px}.app .layout .col-right .item{width:100%;height:50px;margin:20px 0;display:flex;justify-content:start;align-items:center;z-index:99}.app .layout .col-right .item img{margin-right:10px;width:50px}.app .layout .col-right .item p{opacity:.4;margin:0}.app .layout .col-right .list-option{width:100%;height:100%;padding-left:10px;overflow:auto}.app .layout .col-right .list-option::-webkit-scrollbar{display:none}.app .layout .list-button{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;right:18%;bottom:10px}.app .layout .list-button .btn{width:40px;height:40px;margin:5px;background-repeat:no-repeat;background-position:center}.app .layout .list-button .btn:hover{cursor:pointer;opacity:.7}.app .modal{position:absolute;z-index:100;width:100vw;height:100vh;background-color:#0006;display:flex;justify-content:center;align-items:center}.none{display:none}@media screen and (max-width:560px){.div-scroll{right:40%!important}.col-left{width:60%!important}.col-left .result{bottom:5px!important;left:5px!important;font-size:30px!important}.col-right{width:40%!important}.list-button{right:45%!important}}.modal-control{width:500px;height:80%;border-radius:10px;padding:10px;box-shadow:#959da533 0 8px 24px}.modal-control .header{display:flex;justify-content:space-between;align-items:start}.modal-control .header .list-control{display:flex;list-style-type:none}.modal-control .header .list-control li{border:none;padding:10px;display:flex;justify-content:center;align-items:center}.modal-control .header .list-control li:hover{cursor:pointer}.modal-control .header .list-control li svg{margin-right:5px}.modal-control .header .icon-close{width:30px;height:30px;background-repeat:no-repeat;background-position:center}@media screen and (max-width:560px){.header .list-control li{padding:5px!important}.header .list-control li .icon{width:20px!important}.modal-control{width:95%!important}}.item:hover{cursor:pointer}:root{--color-text-dark: #9779A6;--color-active: #e8ded0 ;--background-dark:#171319;--background-modal-light:#f7f1e7;--width-text-scroll:25px}