.image-converter-container{max-width:900px;padding:20px;background:#fefefe;margin:150px auto 0}.container{margin-top:100px}h2{font-size:30px;color:#333;margin-bottom:10px}p{font-size:16px;color:#777;margin-top:0}.upload-area{border:2px dashed #575052;background-color:#f9f9f9;margin-bottom:20px}.upload-area h2{font-size:24px;color:#333}.image-settings-panel{margin-top:30px}.thumbnail-container{margin-bottom:20px}.thumbnail{width:100px;height:100px;object-fit:cover;border-radius:5px}.image-meta p{font-size:14px;color:#555}.settings-button{background-color:#575052;color:#fff;border:none;padding:8px 15px;cursor:pointer;border-radius:4px}.settings-button:hover{background-color:#4d4341}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.popup{background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 10px #0003;width:500px;max-width:90%;display:flex;flex-direction:column;gap:20px}h3{font-size:1.5rem;margin-bottom:15px;text-align:center;color:#333}.background-options,.compression-options,.resize-options{display:flex;flex-direction:column;gap:15px}label{font-weight:700;color:#575052}input[type=range]{width:100%}input[type=color]{width:50px;height:30px}.popup-actions{display:flex;justify-content:space-between;gap:10px}.popup-actions button{background-color:#575052;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .3s ease}.popup-actions button:hover{background-color:#3d3a38}.popup-actions button:focus{outline:none}input[type=number]{width:100%}input[type=number],select{padding:8px;margin-top:5px}.output-format-select{padding:8px;margin-bottom:5px;border-radius:4px;border:1px solid #ccc}.format-dropdown{z-index:1}.format-list{background-color:#fff;padding:10px;box-shadow:0 0 10px #0000001a}.format-item{padding:8px;cursor:pointer}.format-item:hover{background-color:#f0f0f0}.thumbnail-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;border:1px solid #ddd;padding:10px;border-radius:5px}.image-meta{flex:1 1;margin-left:15px}.image-options{display:flex;align-items:center;gap:15px}.settings-container{display:flex;align-items:center;gap:10px}.output-format-select{padding:5px;font-size:14px}.convert-button{color:#fff;padding:8px 15px;border:none;border-radius:5px;cursor:pointer}.convert-button,.convert-button:hover{background-color:#575052}.image-cropper-container{justify-content:center;align-items:flex-start;gap:20px;margin-top:150px}.image-cropper{text-align:center}.upload-area{padding:20px}.cropper-wrapper{display:flex;gap:20px}.cropper-area{width:500px;height:400px;position:relative}.sidebar{display:flex;flex-direction:column;gap:10px;width:200px}.sidebar h3{margin:0 0 10px}.sidebar label{display:flex;justify-content:space-between;align-items:center}.sidebar input{margin-left:10px}button{color:#fff;border:none;padding:10px;cursor:pointer;font-size:16px}button,button:hover{background-color:#575052}.image-cropper-container{padding:20px}.image-cropper-container,.upload-area{display:flex;flex-direction:column;align-items:center}.upload-area{justify-content:center;padding:40px;border:2px dashed #ccc;border-radius:8px;cursor:pointer;width:100%;text-align:center}.cropper-wrapper{position:relative;width:100%;max-width:600px;margin-top:20px;height:400px;background-color:#ccc}.save-button{margin-top:20px;padding:10px 20px;background-color:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer}.save-button:hover{background-color:#218838}.ReactCrop{margin:auto!important;width:80%!important}.image-converter-container{display:flex;flex-direction:column;justify-content:center;margin-top:150px;align-items:center;width:100%;text-align:center}@keyframes celebration{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.5);opacity:1}to{transform:scale(1);opacity:0}}.celebration{display:inline-block;animation:celebration 1s ease-in-out;color:#ff9800;font-size:2rem;font-weight:700}.text-red-400{text-align:center}@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size:12px;--rc-drag-handle-mobile-size:24px;--rc-drag-handle-bg-colour:#0003;--rc-drag-bar-size:6px;--rc-border-color:#ffffffb3;--rc-focus-color:#08f}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop :after,.ReactCrop :before{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed #fff}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(90deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0),linear-gradient(180deg,#fff 50%,#444 0);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-vt:before{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:after,.ReactCrop__rule-of-thirds-hz:before{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;cursor:ne-resize}.ReactCrop .ord-e,.ReactCrop .ord-ne{right:0;transform:translate(50%,-50%)}.ReactCrop .ord-e{top:50%;cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{left:50%;cursor:s-resize}.ReactCrop .ord-s,.ReactCrop .ord-sw{bottom:0;transform:translate(-50%,50%)}.ReactCrop .ord-sw{left:0;cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w,.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle{display:none}@media (pointer:coarse){.ReactCrop .ord-e,.ReactCrop .ord-n,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}