#qf-app{max-width:800px; min-height: 125px; margin:auto; justify-content: center; align-items: center; text-align:center;}
.qf-container{display:flex;flex-wrap:wrap;gap:15px}
.qf-card {width:100px;border:1px solid #ddd;text-align:center;cursor:pointer;margin: auto}
.qf-card img{width:60px;height:60px;margin:15px}
.qf-card:hover{border-color:#334155}
.qf-subcategory {width:100px;border:1px solid #ddd;text-align:center;cursor:pointer;margin: auto}
.qf-subcategory img{width:60px;height:60px;margin:15px}
.qf-subcategory:hover{border-color:#334155}
.qf-problem:hover{border:1px solid #334155;}
.selectable.active{border:2px solid #0073aa}
.qf-next,.qf-book{margin-top:5px;padding:5px 5px;background:#0073aa;color:#fff;border:none}
.qf-back{width:100px;text-align:center;cursor:pointer;margin: auto;}
.qf-back img{width:60px;height:60px;margin:15px}
.qf-loader{width:180px;height:120px;position:relative;display:none}
.qf-loader:before,.qf-loader:after{content:"";position:absolute;border-radius:50%;background:#334155;box-sizing:border-box;background-repeat:no-repeat}
.qf-loader:before{width:108px;height:108px;left:0;top:0;background-image:radial-gradient(circle 24px at 54px 54px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 54px 0,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 0 54px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 108px 54px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 54px 108px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 90px 15px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 90px 15px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 90px 90px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 15px 90px,#F5F8F6 100%,transparent 0),radial-gradient(circle 12px at 15px 15px,#F5F8F6 100%,transparent 0);animation:r 3s linear infinite}
.qf-loader:after{width:72px;height:72px;left:105px;top:45px;background-image:radial-gradient(circle 15px at 36px 36px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 36px 0,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 0 36px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 72px 36px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 36px 72px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 60px 9px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 60px 9px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 60px 60px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 9px 60px,#F5F8F6 100%,transparent 0),radial-gradient(circle 7.5px at 9px 9px,#F5F8F6 100%,transparent 0);animation:r 4s linear infinite reverse}
@keyframes r{to{transform:rotate(-360deg)}}