#spg-root{width:100%;background:#fff}#spg-root h2{margin-bottom:30px;text-align:center}#spg-length option{padding:12px 14px;font-size:15px;color:#000;background:#fff}#spg-length option:hover{background:#999!important;color:#000!important}#spg-length option:checked{background:#0075db!important;color:#fff!important}.spg-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap;height:100px}.spg-options input[type=checkbox],input[type=radio]{width:18px;height:18px;margin:0}#spg-length{padding:0 12px;box-shadow:none;border:0;margin:0;height:20px}.spg-strength-wrap{width:500px;background:#fff;border:1px solid #ddd;border-radius:8px;padding:0 15px;height:64px;display:flex;align-items:center}div#spg-strength{display:flex;align-items:center;justify-content:center;gap:8px}.spg-strength-row{display:flex;align-items:center;gap:12px;justify-content:space-between;width:100%}.rightsrp{display:flex;flex-direction:column;justify-content:center}.spg-strength-label{font-size:14px;white-space:nowrap;height:22px;display:flex;align-items:center;font-weight:300;color:#555}#spg-strength span{display:inline-block;width:42px;height:42px;border-radius:4px;opacity:.2;transition:opacity .2s}.tool-content{padding:30px;background:#fff;border-radius:8px}#spg-strength span.on{opacity:1}#spg-strength span:nth-child(1){background:#f03}#spg-strength span:nth-child(2){background:#ff5c00}#spg-strength span:nth-child(3){background:#ffb300}#spg-strength span:nth-child(4){background:#fe0}#spg-strength span:nth-child(5){background:#a3e635}#spg-strength span:nth-child(6){background:#22c55e}#spg-strength span.on:nth-child(1){background:#f03}#spg-strength span.on:nth-child(2){background:#ff5c00}#spg-strength span.on:nth-child(3){background:#ffb300}#spg-strength span.on:nth-child(4){background:#fe0}#spg-strength span.on:nth-child(5){background:#a3e635}#spg-strength span.on:nth-child(6){background:#22c55e}.spg-strength-text{font-weight:500;height:20px;display:flex;align-items:center}#spg-length::-webkit-scrollbar{width:6px}.spg-length-wrap{position:relative;width:420px;background:#fff;border:1px solid #d1d5db;border-radius:8px;height:64px;display:flex;align-items:center}.spg-length-wrap label{margin:0;padding:5px 0 0 15px;color:#555;font-weight:300;font-size:14px}#spg-length{display:none}.spg-dropdown{position:relative;cursor:pointer;width:100%}.spg-dd-selected{padding:2px 15px;background:#fff;font-size:15px;border-radius:8px}.spg-dd-list{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:300px;overflow-y:auto;border-radius:8px;background:#fff;border:1px solid #d1d5db;z-index:999;display:none}.spg-dd-item{padding:12px 14px;font-size:15px;cursor:pointer}.spg-dd-item:hover{background:#999;color:#000}.spg-dd-item.active{background:#0075db;color:#fff}.spg-dd-selected{position:relative;padding-right:40px}.spg-dd-selected::after{content:'';position:absolute;top:50%;right:14px;width:0;height:0;border-left:6px solid #fff0;border-right:6px solid #fff0;border-top:6px solid #6b7280;transform:translateY(-50%);transition:transform .2s ease}.spg-dropdown.open .spg-dd-selected::after{transform:translateY(-50%) rotate(180deg)}.spg-dd-list::-webkit-scrollbar{width:8px}.spg-dd-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:8px}.spg-dd-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:8px}.spg-dd-list::-webkit-scrollbar-thumb:hover{background:#999}#spg-length::-webkit-scrollbar-track{background:#f1f1f1;border-radius:8px}#spg-length::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:8px}#spg-length::-webkit-scrollbar-thumb:hover{background:#999}.spg-strength-note{margin-top:-15px;font-size:14px;color:#f59e0b;width:100%;display:flex;justify-content:flex-end;height:24px}.leftsrp{background:#fff;border:1px solid #ddd;border-radius:8px;width:420px;display:flex;flex-direction:column;justify-content:center;height:56px}.leftsrp label{margin:0;font-size:12px;color:#999;font-weight:300;padding:0 12px}.spg-options label{display:flex;gap:10px;align-items:center;margin:15px 0;font-size:14px;font-weight:400}.spg-result{display:flex;gap:10px;margin-top:30px;width:800px}#spg-output{flex:1;padding:10px;font-size:16px;margin:0;border-radius:8px;height:48px;display:flex;align-items:center}#spg-generate,#spg-copy{padding:6px 16px;background:#0075db;color:#fff;border:0;border-radius:8px;cursor:pointer;margin:0;height:48px;display:flex;align-items:center;text-transform:capitalize}.spg-note{margin-top:16px;font-size:13px;color:#555}.hidden{display:none}@media screen and (max-width:1440px) and (min-width:1371px){.spg-length-wrap{width:350px}.spg-strength-wrap{width:480px}.spg-result{width:700px}}@media screen and (max-width:1370px) and (min-width:1270px){.spg-length-wrap{width:280px}.spg-strength-wrap{width:450px}.spg-result{width:500px}}@media screen and (max-width:1269px) and (min-width:1024px){.spg-length-wrap{width:280px}.spg-strength-wrap{width:450px}.spg-result{width:500px}.spg-options{margin-top:80px}}@media screen and (max-width:1023px) and (min-width:768px){.spg-length-wrap{width:200px}.spg-strength-wrap{width:450px}.spg-result{width:500px}.spg-options{margin-top:0}}@media (max-width:767px){.spg-length-wrap{width:200px}.spg-strength-wrap{padding:0 10px;height:48px}.spg-strength-label{font-size:12px;height:17px}.spg-strength-text{height:15px}#spg-strength span{width:28px;height:28px}.spg-options{margin-top:90px}#spg-generate,#spg-copy{padding:4px 10px;height:40px;font-size:12px}#spg-output{font-size:12px;height:40px}.spg-result{width:100%}.spg-strength-note{font-size:12px}}