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