[hidden]{display:none}.inputGroup{box-sizing:border-box;width:12%;display:inline-block;background-color:#fff;margin:8px;position:relative}@media(max-width:767px){.inputGroup{width:100%;margin:4px 0}}.inputGroup label{display:block;text-align:left;color:#3c454c;cursor:pointer;position:relative;z-index:2;transition:color 100ms ease-in;overflow:hidden}.inputGroup label:before{width:12px;height:12px;border-radius:50%;content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale3d(1,1,1);transition:all 100ms cubic-bezier(.4,0,.2,1);opacity:0;z-index:-1}.inputGroup label:after{width:32px;height:32px;content:'';border:2px solid #d1d7dc;background-color:#fff;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMzInIGhlaWdodD0nMzInIHZpZXdCb3g9JzAgMCAzMiAzMicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNNS40MTQgMTFMNCAxMi40MTRsNS40MTQgNS40MTRMMjAuODI4IDYuNDE0IDE5LjQxNCA1bC0xMCAxMHonIGZpbGw9JyNmZmYnIGZpbGwtcnVsZT0nbm9uemVybycvPjwvc3ZnPg==);background-repeat:no-repeat;background-position:2px 3px;border-radius:50%;z-index:2;position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;transition:all 100ms ease-in}.inputGroup input:checked~label{color:#8f78c9}.inputGroup input:checked~label:before{transform:translate(-50%,-50%) scale3d(56,56,1);opacity:1}.inputGroup input:checked~label:after{background-color:#8f78c9;border-color:#8f78c9}.inputGroup input{width:32px;height:32px;order:1;z-index:2;position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;visibility:hidden}.form{padding:0 16px;max-width:550px;margin:50px auto;font-size:18px;font-weight:600;line-height:36px}html body{margin:0;padding:0;position:relative;background-color:#fbd8b0}html body .wrapper{width:60%;max-width:800px;margin:0 auto}@media(max-width:767px){html body .wrapper{width:80%}}html body .wrapper .input-container{padding:1rem}html body .wrapper .input-container .book-selector .inputGroup{flex:1}html body .wrapper .input-container p.famliy label{font-size:2rem}html body .wrapper .input-container button{width:100%;line-height:3;background-color:#f74b2b;color:#fff;border-radius:2px;padding:.2rem 1.1rem;border:none;text-align:center;margin:.2rem auto;outline:none;cursor:pointer}html body .wrapper .input-container button:hover{background-color:#f86044}{position:relative}.result-container{list-style-type:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.result-container .name-box{box-sizing:border-box;min-height:280px;min-width:320px;flex:1;margin:1rem;padding:2rem 1rem;font-size:1rem;box-shadow:0 2px 2px 0 rgba(0,0,0,.05),0 1px 4px 0 rgba(0,0,0,.08),0 3px 1px -2px rgba(0,0,0,.2);border-radius:2px}@media(max-width:767px){.result-container .name-box{width:100%;min-height:0;min-width:90%}}.result-container .name-box>h3{font-size:3rem;text-align:center;line-height:1.6;margin:0}.result-container .name-box .sentence{line-height:1.5rem}.result-container .name-box .source-row{display:flex;margin-top:10px}.result-container .name-box .source-row .book,.result-container .name-box .source-row .author{flex:1}.result-container .name-box .source-row .author{text-align:right}.result-container .name-box i{font-style:normal;padding:0 2px;font-size:1.2rem;font-weight:700}html body .loader{z-index:100;left:0;top:0;min-height:100vh;position:absolute;width:100%;background-color:rgba(0,0,0,.05)}html body .loader svg{width:100px;height:100px;display:block;margin:20px auto;margin-top:40vh}.sentence i{color:#8e78c9!important}