.cropImageContainer{background:#0e141d;min-height:100vh;padding:20px 10px}@media (min-width:768px){.cropImageContainer{padding:40px 0}}.cropImageContainer .mainArea{max-width:1100px;margin:0 auto;padding:0 20px}.cropImageContainer .leftPanel,.cropImageContainer .rightPanel{box-sizing:border-box;width:100%}.cropImageContainer .crop-image-header{text-align:center;max-width:1200px;margin:0 auto 40px;padding:0 20px}.cropImageContainer .crop-image-header .cntr_header_nano{text-align:center;margin-bottom:40px}.cropImageContainer .crop-image-header .cntr_header_nano h4{color:#fff;margin-bottom:12px;font-size:52px;font-weight:700}.cropImageContainer .crop-image-header .cntr_header_nano p{color:#b5b5b5;max-width:720px;margin:0 auto;font-size:16px}.cropImageContainer .crop-image-header .shine{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@media (max-width:768px){.cropImageContainer .crop-image-header .cntr_header_nano h4{font-size:36px}.cropImageContainer .crop-image-header .cntr_header_nano p{font-size:14px}}.cropImageContainer :is(.titleArea h4,.modeSelector h4,label,strong){color:#101828}.cropImageContainer :-webkit-any(.hint,.subHint,small,p){color:#667085}.cropImageContainer :-moz-any(.hint,.subHint,small,p){color:#667085}.cropImageContainer :is(.hint,.subHint,small,p){color:#667085}.cropImageContainer :-webkit-any(input,select,textarea){color:#182230;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;border-color:#cbd5e1}.cropImageContainer :-moz-any(input,select,textarea){color:#182230;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;border-color:#cbd5e1}.cropImageContainer :is(input,select,textarea){color:#182230;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#fff;border-color:#cbd5e1}@media (max-width:576px){.cropImageContainer .crop-image-header .cntr_header_nano h4{font-size:28px}}.cropImageContainer .row{grid-template-columns:1fr;gap:20px;display:grid}.cropImageContainer .titleArea{border-bottom:1px solid rgba(255,255,255,.21);margin-bottom:20px;padding-bottom:10px}.cropImageContainer .titleArea h4{color:#fff;align-items:center;gap:12px;margin-bottom:0;font-size:20px;font-weight:700;display:flex}.cropImageContainer .titleArea i,.cropImageContainer .titleArea svg{color:#fff;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border-radius:50px;justify-content:center;align-items:center;width:50px;height:50px;font-size:18px;display:flex}.cropImageContainer .leftPanel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:25px 20px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3)}.cropImageContainer .uploadBox{cursor:pointer;background-color:rgba(0,0,0,.39);border:2px dashed rgba(255,87,0,.45);border-radius:10px;justify-content:center;align-items:center;margin-bottom:20px;padding:25px 20px;transition:all .3s;display:flex}.cropImageContainer .uploadBox:hover{border-color:#ff5700;box-shadow:inset 0 0 0 1px #ff5700}.cropImageContainer .uploadContent{text-align:center;width:100%}.cropImageContainer .uploadContent svg{background:#374151;border-radius:50px;width:80px;height:80px;margin:0 auto 20px;padding:10px;display:block}.cropImageContainer .uploadContent h4{color:#fff;margin-bottom:10px;font-size:15px;font-weight:600}.cropImageContainer .uploadContent .hint{color:#99a1b3;margin-bottom:20px;display:block}.cropImageContainer .uploadContent button{color:#fff;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .5s}.cropImageContainer .uploadContent button:hover{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .uploadContent button i{color:#fff;margin-right:8px}.cropImageContainer .uploadContent .subHint{color:#99a1b3;margin-top:10px;font-size:13px;display:block}.cropImageContainer .imagePreview{background:rgba(0,0,0,.39);border:1px solid rgba(255,255,255,.21);border-radius:10px;margin-bottom:20px;overflow:hidden}.cropImageContainer .imagePreview img{width:100%;height:auto;display:block}.cropImageContainer .modeSelector{background:rgba(0,0,0,.39);border:1px solid rgba(255,255,255,.21);border-radius:10px;margin-bottom:20px;padding:20px}.cropImageContainer .modeSelector h4{color:#fff;margin-bottom:15px;font-size:18px;font-weight:600}.cropImageContainer .modeButtons{grid-template-columns:1fr 1fr;gap:8px;display:grid}@media (max-width:576px){.cropImageContainer .modeButtons{grid-template-columns:1fr}}.cropImageContainer .modeButton{cursor:pointer;text-align:center;background:#000;border:1px solid transparent;border-radius:10px;padding:12px 15px;transition:all .5s}.cropImageContainer .modeButton:hover,.cropImageContainer .modeButton.active{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .modeButton span{color:#fff;margin-top:5px;font-size:14px;font-weight:600;display:block}.cropImageContainer .modeButton i{color:#fff;margin-bottom:5px;font-size:18px;display:block}.cropImageContainer .resizeControls,.cropImageContainer .textControls,.cropImageContainer .drawControls{background:rgba(0,0,0,.39);border:1px solid rgba(255,255,255,.21);border-radius:10px;margin-bottom:20px;padding:20px}.cropImageContainer .resizeControls h4,.cropImageContainer .textControls h4,.cropImageContainer .drawControls h4{color:#fff;margin-bottom:15px;font-size:18px;font-weight:600}.cropImageContainer .inputGroup{margin-bottom:15px}.cropImageContainer .inputGroup label{color:#fff;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.cropImageContainer .inputGroup input[type=text],.cropImageContainer .inputGroup input[type=number]{color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.21);border-radius:10px;outline:none;width:100%;padding:10px;font-size:14px}.cropImageContainer .inputGroup input[type=text]:focus,.cropImageContainer .inputGroup input[type=number]:focus{border-color:#ff5700}.cropImageContainer .inputGroup input[type=color]{cursor:pointer;background:0 0;border:none;border-radius:10px;width:100%;height:40px}.cropImageContainer .inputGroup input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e2e8f0;border-radius:999px;outline:none;width:calc(100% - 50px);height:8px;margin-right:10px}.cropImageContainer .inputGroup input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border-radius:50%;width:22px;height:22px;box-shadow:0 4px 12px rgba(255,87,0,.4)}.cropImageContainer .inputGroup input[type=range]::-moz-range-thumb{cursor:pointer;background:#ff5700;border:none;border-radius:50%;width:22px;height:22px}.cropImageContainer .inputGroup span{color:#fff;min-width:40px;font-size:14px;font-weight:600;display:inline-block}.cropImageContainer .checkboxGroup{align-items:center;margin-bottom:15px;display:flex}.cropImageContainer .checkboxGroup input[type=checkbox]{cursor:pointer;accent-color:#ff5700;width:18px;height:18px;margin-right:10px}.cropImageContainer .checkboxGroup label{color:#fff;cursor:pointer;margin:0;font-size:14px;font-weight:500}.cropImageContainer .applyButton,.cropImageContainer .clearButton{color:#fff;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border:none;border-radius:50px;width:100%;padding:12px 20px;font-size:15px;font-weight:600;transition:all .5s}.cropImageContainer .applyButton:hover,.cropImageContainer .clearButton:hover{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .clearButton{background:#dc3545;margin-top:10px}.cropImageContainer .clearButton:hover{background:#c82333}.cropImageContainer .hint{color:#99a1b3;margin-top:10px;font-size:13px;display:block}.cropImageContainer .rightPanel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:25px 20px;box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 6px -1px rgba(0,0,0,.3)}.cropImageContainer .canvasContainer{background:rgba(0,0,0,.39);border:2px solid rgba(255,255,255,.07);border-radius:10px;flex-direction:column;justify-content:center;align-items:center;min-height:500px;padding:20px;display:flex}.cropImageContainer .canvas{cursor:crosshair;border-radius:10px;max-width:100%;height:auto;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,.5)}.cropImageContainer .placeholder{text-align:center;color:#fff}.cropImageContainer .placeholder svg{opacity:.5;width:90px;height:90px;margin:0 auto 20px}.cropImageContainer .placeholder h4{color:#fff;opacity:.7;font-size:18px;font-weight:500}.cropImageContainer .actionButtons{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.cropImageContainer .actionButton{color:#fff;cursor:pointer;background:linear-gradient(-90deg,#f59e0b 10%,#ff5700 62%);border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .5s}.cropImageContainer .actionButton:hover{background:linear-gradient(90deg,#f59e0b 10%,#ff5700 62%)}.cropImageContainer .actionButton i{margin-right:5px}.cropImageContainer .resetButton{color:#fff;cursor:pointer;background:#6c757d;border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:600;transition:all .5s}.cropImageContainer .resetButton:hover{background:#5a6268}.cropImageContainer .resetButton i{margin-right:5px}@media (min-width:992px){.cropImageContainer .row{grid-template-columns:1fr 2fr;align-items:flex-start;gap:30px}.cropImageContainer .leftPanel{margin-bottom:30px}}.titleWithIcon{align-items:center;gap:10px;display:flex}@media (max-width:768px){.cropImageContainer .modeButtons{grid-template-columns:1fr}.cropImageContainer .titleArea h4{font-size:16px}.cropImageContainer .uploadContent h4{font-size:13px}.cropImageContainer .canvasContainer{min-height:300px}.cropImageContainer .actionButtons{flex-direction:column}.cropImageContainer .actionButton,.cropImageContainer .resetButton{width:100%}}@media (max-width:576px){.cropImageContainer .mainArea{padding:0 10px}.cropImageContainer .leftPanel,.cropImageContainer .rightPanel{padding:15px}.cropImageContainer .uploadContent button{padding:8px 15px;font-size:12px}.cropImageContainer .uploadBox{padding:20px 12px}.cropImageContainer .uploadContent svg{width:55px;height:55px}.cropImageContainer .uploadContent button{width:100%;padding:8px 12px;font-size:13px}.cropImageContainer .uploadContent h4{font-size:14px}}@media (max-width:768px){.cropImageContainer .canvasContainer{min-height:auto;padding:10px}.cropImageContainer .canvas{max-width:100%;height:auto}}.cropImageContainer{color:#344054!important;background:linear-gradient(135deg,#fff8f3,#f7f9fc 48%,#f2f5ff)!important}.cropImageContainer .crop-image-header .cntr_header_nano h4{color:#101828!important}.cropImageContainer :is(.titleArea h4,.modeSelector h4,label,strong){color:#101828!important}.cropImageContainer .crop-image-header .cntr_header_nano p{color:#667085!important}.cropImageContainer :-webkit-any(.hint,.subHint,small,p){color:#667085!important}.cropImageContainer :-moz-any(.hint,.subHint,small,p){color:#667085!important}.cropImageContainer :is(.hint,.subHint,small,p){color:#667085!important}.cropImageContainer :-webkit-any(.leftPanel,.rightPanel,.modeSelector,.controlsPanel,.settingsPanel){color:#344054!important;background:#fff!important;border-color:#d8e0eb!important;box-shadow:0 10px 28px rgba(16,24,40,.07)!important}.cropImageContainer :-moz-any(.leftPanel,.rightPanel,.modeSelector,.controlsPanel,.settingsPanel){color:#344054!important;background:#fff!important;border-color:#d8e0eb!important;box-shadow:0 10px 28px rgba(16,24,40,.07)!important}.cropImageContainer :is(.leftPanel,.rightPanel,.modeSelector,.controlsPanel,.settingsPanel){color:#344054!important;background:#fff!important;border-color:#d8e0eb!important;box-shadow:0 10px 28px rgba(16,24,40,.07)!important}.cropImageContainer .titleArea{border-bottom-color:#e1e7ef!important}.cropImageContainer .uploadBox{background:#fffaf7!important;border-color:#ff8a4c!important}.cropImageContainer .uploadBox:hover{background:#fff4ec!important}.cropImageContainer .uploadContent svg{color:#ff5700!important;background:#fff0e6!important}.cropImageContainer .uploadContent h4{color:#182230!important}.cropImageContainer :-webkit-any(.imagePreview,.canvasContainer){background:#fff!important;border-color:#d8e0eb!important}.cropImageContainer :-moz-any(.imagePreview,.canvasContainer){background:#fff!important;border-color:#d8e0eb!important}.cropImageContainer :is(.imagePreview,.canvasContainer){background:#fff!important;border-color:#d8e0eb!important}.cropImageContainer :-webkit-any(input,select,textarea){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#182230!important;background:#fff!important;border-color:#cbd5e1!important}.cropImageContainer :-moz-any(input,select,textarea){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#182230!important;background:#fff!important;border-color:#cbd5e1!important}.cropImageContainer :is(input,select,textarea){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#182230!important;background:#fff!important;border-color:#cbd5e1!important}.cropImageContainer .modeButton{box-shadow:0 3px 9px rgba(16,24,40,.05);color:#344054!important;background:#fff!important;border-color:#cbd5e1!important}.cropImageContainer .modeButton :-webkit-any(span,i){color:#344054!important}.cropImageContainer .modeButton :-moz-any(span,i){color:#344054!important}.cropImageContainer .modeButton :is(span,i){color:#344054!important}.cropImageContainer .modeButton:hover{color:#c4320a!important;background:#fff2e8!important;border-color:#ff7a3d!important}.cropImageContainer .modeButton:hover :-webkit-any(span,i){color:#c4320a!important}.cropImageContainer .modeButton:hover :-moz-any(span,i){color:#c4320a!important}.cropImageContainer .modeButton:hover :is(span,i){color:#c4320a!important}.cropImageContainer .modeButton.active{color:#fff!important;background:linear-gradient(100deg,#ff5700,#f59e0b)!important;border-color:transparent!important}.cropImageContainer .modeButton.active :-webkit-any(span,i){color:#fff!important}.cropImageContainer .modeButton.active :-moz-any(span,i){color:#fff!important}.cropImageContainer .modeButton.active :is(span,i){color:#fff!important}