.home.tool-section{background:#f5f7fb}.tool{display:flex;justify-content:space-between;flex-direction:column;padding:1rem;gap:1rem;background-color:#fff;margin:1rem auto 0;max-width:1040px}.gap-1r{gap:1rem;position:relative}.mode-container{display:flex;gap:8px;color:#000;font-size:12px;line-height:18px}.mode{padding:6px 12px;border-radius:8px;display:flex;align-items:center;gap:4px;font-size:12px;line-height:18px;color:gray}.mode:not(.mode.selectedMode) img{filter:opacity(50%)}.mode:hover{background-color:#f1f3f7;cursor:pointer}.mode.selectedMode{background-color:#f1f3f7;color:#000;cursor:pointer}.tool-area{display:block;border:1px solid #eaeaea;border-radius:12px;padding:10px 1rem;max-width:582px;width:100%}.input-container label{font-size:14px;font-weight:400;line-height:20px;text-align:left;color:#000}.form-control{display:block;width:100%;padding:12px 16px;font-size:16px;font-weight:400;line-height:22px;color:#6c757d;background-color:#fff;background-clip:padding-box;border:1px solid #eaeaea;border-radius:8px;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;resize:none}.input-container#card{display:flex;justify-content:space-between;flex-wrap:wrap}.single_row{width:48%}.mt-2{margin-top:20px}.mt-1{margin-top:10px}.result-area{border:1px solid #e4e8f1;background:#fff;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:5px;width:100%;max-width:375px}.export-type{padding:0 17px}.custom-border{border-left:1px solid #eaeaea;border-right:1px solid #eaeaea}#qr-image{border:1px solid #eaeaea;border-radius:8px;display:flex;justify-content:center;align-items:center;padding:10px;width:fit-content;margin:0 auto}.qr-image img{display:block}.formate-container{display:flex;gap:2px;justify-content:space-between}.export-type:hover{color:#fff;background-color:#414a55;cursor:pointer;border-radius:5px}#jsShadowRoot{width:100%;justify-content:center;display:flex}button:disabled{color:#9da9b5}.download-btn{padding:8px 8px 8px 16px;display:flex;gap:8px;justify-content:space-around;align-items:center;font-size:14px;font-weight:400;line-height:20px;text-align:center;border:unset;border-radius:8px;background:#000;color:#fff}.d-flex{display:flex}.justify-between{justify-content:space-between}.start-over-btn{cursor:pointer;background:#f1f3f7;border:none;padding:8px 16px;border-radius:8px;font-size:14px;line-height:20px;margin:unset;display:flex;align-items:center;justify-content:center;gap:4px;transition:all ease-in-out .2s}.start-over-btn:hover{background:#d2d5db}.container-qr{width:100%;margin:16px auto;display:flex;flex-direction:column;gap:8px}.one{display:flex;justify-content:space-between;width:100%;padding:8px 8px 8px 12px;background-color:#f5f7fb;border-radius:8px}.radius-props{border-radius:8px 8px 0 0}.one span{font-size:14px;font-weight:500;line-height:20px;text-align:left}.dropdown-qr{cursor:pointer;display:flex;flex-direction:column;align-items:center;font-weight:700}.dropdown-qr:last-child{border-bottom:none}.dropdown-content-qr{display:none;background-color:#fff;padding:8px 12px;border:1px solid #eaeaea;border-bottom-right-radius:8px;border-bottom-left-radius:8px;margin:0 8px;width:100%}.arrow{transition:transform .3s ease}.arrow.open{transform:rotate(180deg)}.buttons{display:flex;justify-content:space-between;margin-top:10px}.btn{padding:10px;border:none;cursor:pointer;border-radius:5px}.btn-reset{background-color:#ddd}.btn-download{background-color:#000;color:#fff}.frames_main_div{display:flex;gap:8px}.frame{text-align:center;border:1px solid transparent;display:flex;height:48px;width:48px;align-items:center;justify-content:center;transition:all ease-in-out .2s;border-radius:6px}.frame:hover{border:1px solid #a28cff;background:#f7f3ff}.active_qr_frame{border:1px solid #a28cff;background:#f7f3ff;border-radius:6px}.qr-container{display:flex;flex-direction:column;align-items:center;gap:20px}#qr-image-wrapper{background:#fff}.frame-border{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:none}.frame-text-top,.frame-text-bottom{position:absolute;left:0;width:100%;padding:4px;background:#000;text-align:center;font-size:10px;pointer-events:none;display:none}.frame-text-top{top:-20px;border-top-left-radius:8px;border-top-right-radius:8px}.frame-text-bottom{bottom:-20px;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.active-frame{display:block!important}.preset_main_div{display:flex;gap:8px}.preset{text-align:center;border:1px solid transparent;display:flex;height:48px;width:48px;align-items:center;justify-content:center;transition:all ease-in-out .2s;border-radius:6px}.preset:hover{border:1px solid #a28cff;background:#f7f3ff}.active_qr_preset{border:1px solid #a28cff;background:#f7f3ff;border-radius:6px}.color-picker-container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:10px}.color-group{width:44%;display:flex;flex-direction:column}.color-group label{font-size:12px;line-height:18px;font-weight:400;color:#9da9b5;margin-bottom:5px}.color-input{display:flex;align-items:center;border:1px solid #eaeaea;border-left:0px;border-radius:6px;overflow:hidden;height:30px}.color-input input[type=color]{width:41px;height:38px;border:none;padding:0;background:none;cursor:pointer}.color-input input[type=text]{border:none;outline:none;padding-left:8px;font-size:14px;font-weight:400;line-height:20px;text-align:left;background-color:#fff;width:100%}.upload-area-QR{padding:22px 10px;border:1.5px dashed #ddddf8;border-radius:6px;transition:all ease-in-out .2s}.upload-area-QR:hover{border:1.5px solid #a28cff;background:#f7f3ff}.upload-area-QR .text-logo-hide p{font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#000}.upload-area-QR .text-logo-hide p span label{font-size:14px;font-weight:500;line-height:20px;text-align:center;color:#a28cff;cursor:pointer}.upload-area-QR .text-logo-hide p span label:hover{text-decoration:underline}.qr-logo-prev-div{display:flex;justify-content:space-between;gap:4px;align-items:center}.name_size{display:flex;flex-direction:column;flex:2}.bold_name{font-size:14px;font-weight:500;line-height:20px;text-align:left;color:#000}.light_size{font-size:12px;font-weight:400;line-height:18px;text-align:left;color:#9da9b5}.dropdown-qr-download{position:relative;display:inline-block}.dropdown-menu-qr-download{display:none;position:absolute;background-color:#fff;box-shadow:0 4px 6px #0000001a;border-radius:8px;z-index:100;width:100%}.dropdown-menu-qr-download a{display:block;padding:6px;text-decoration:none;color:#333;font-weight:400;font-size:14px;line-height:20px;text-align:center;transition:all ease-in-out .2s}.dropdown-menu-qr-download a:hover{background-color:#f1f1f1;color:#202020!important}.download-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fffc;padding:10px;border-radius:5px}.loader-wrapper{display:flex;align-items:center;display:none}.loader{animation:spin 1s linear infinite;filter:invert(1)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mode-dropdown{display:none;position:relative;width:100%;margin-bottom:1rem}.dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;background-color:#fff}.dropdown-items{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-radius:8px;margin-top:4px;z-index:1}.dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;color:gray}.dropdown-item:hover{background-color:#f1f3f7}.dropdown-item img{width:16px;height:16px}.dropdown-arrow{width:16px;height:16px;transition:transform .2s;transform:rotate(180deg)}.dropdown-header.active .dropdown-arrow{transform:rotate(0)}.selected-option{display:flex;align-items:center;gap:6px;font-size:14px}@media(max-width:990px){.mode-container{flex-wrap:wrap}}@media(max-width:920px){.mode,.tool-area,.result-area{padding:6px}.preset_main_div,.frames_main_div{gap:0px}.preset{width:40px}}@media(max-width:740px){.tool,.d-flex.gap-1r{flex-direction:column}.tool-area,.result-area{max-width:unset}.preset_main_div,.frames_main_div{gap:8px}.preset{width:48px}.single_row{width:98%}}@media(max-width:500px){.mode-container{display:none}.mode-dropdown{display:block}}@media(min-width:501px){.mode-dropdown{display:none}}