.generator{padding:2rem 1rem;margin:1rem}.generator button{border:1px solid;outline:0;padding:1rem 1.5rem}.generator .center{text-align:center}.generator .passwordSelection{padding:1rem;margin:1.5rem 0}.generator .passwordSelection .inner{display:grid;grid-template-columns:87% 10%;grid-column-gap:1%}.generator .passwordSelection .inner .range{appearance:none;width:100%;height:25px;outline:none;position:relative;top:-0.35rem;padding:0 2px}.generator .passwordSelection .inner .range::-webkit-slider-thumb{appearance:none;width:20px;height:20px;cursor:pointer;border-radius:50%;background:#fff}.generator .passwordSelection .inner .range::-moz-range-thumb{width:20px;height:20px;background:#fff;cursor:pointer}.generator .passwordSelection .inner .rangeText{font-weight:bold;border:1px solid;padding:0.5rem;width:100%;display:block;position:relative;top:-10px;text-align:center}.generator .switch{display:block;position:relative;padding-left:2.3rem;margin-bottom:1rem;user-select:none}.generator .switch label{line-height:1.5rem}.generator .switch input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.generator .switch .checkmark{position:absolute;top:0;left:0;height:1.5rem;width:1.5rem;background-color:#fff;border:1px solid}.generator .switchinput ~ .checkmark{background-color:#fff}.generator .switch .checkmark:after{content:"";position:absolute;display:none}.generator .switch input:checked ~ .checkmark:after{display:block}.generator .switch .checkmark:after{left:8px;top:5px;width:5px;height:10px;border:solid;border-width:0 3px 3px 0;transform:rotate(45deg)}.generator .result-container{letter-spacing:1px;display:grid;grid-template-columns:94% 5%;grid-column-gap:1%}.generator .result-container .clipboard{background-color:#8c8c8c;color:#fff;padding:0.25rem}.generator .result-container .clipboard .clipBoardIcon{width:30px;max-width:80%}.generator .result-container .result{font-size:0.95rem;word-wrap:break-word;border:0px;background-color:transparent;padding:0.5rem}.generator .result-container .result::-webkit-scrollbar{width:1rem}.generator .result-container .result:focus-visible{border:0px;outline:0px}@media only screen and (max-width: 767px){.generator .result-container{display:grid;grid-template-columns:79% 20%}.generator .passwordSelection .inner{display:grid;grid-template-columns:70% 20%}}
