.range-slider__range{-webkit-appearance:none;background:#00a2ff;border-radius:50px;outline:none;width:100%;height:8px;margin:0;padding:0;display:block}.range-slider__range::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#2c3e50;border-radius:50%;width:10px;height:10px;transition:background .15s ease-in-out}.range-slider__range::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 6px #2c3e50}.color-stop-slider-div{position:relative}.color-stop-slider-div span{color:#fff;opacity:0;background:#2c3e50;border-radius:2px;padding:2px 8px;font-size:10px;display:none;position:absolute;top:-30px;transform:translate(-50%)}.color-stop-slider-div:hover span{opacity:1}.gradient-main-box-area{width:100%;padding-left:calc(var(--toolsSidebarWidth) + 0px);background:#fff;transition:all .5s ease-in-out}.gradient-main-box-area.scrolled{z-index:10;transition:all .5s ease-in-out;position:sticky;top:50px}.gradient-main-box-area.scrolled .gradient-main-box{height:60px;transition:all .5s ease-in-out}.tools-sidebar.collapsed~.gradient-main-box-area{padding-left:calc(var(--collapsedToolsSidebarWidth) + 0px)}.gradient-main-box{width:100%;height:200px;padding:15px;transition:all .5s ease-in-out;display:block;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000013}.gradient-main-box .copy-btn{opacity:1;background-color:#fff;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;width:32px;height:32px;transition:all .25s ease-in-out;display:flex}.gradient-main-box .copy-btn img{transition:all .25s ease-in-out}.gradient-main-box .copy-btn:hover img{transform:scale(.9)}.bottom-copy-btn{margin-inline:auto;color:var(--text-color1);box-shadow:none;background:#fff;border:none;border-radius:100px;outline:none;justify-content:center;align-items:center;margin-top:25px;padding:8px 15px;font-size:14px;font-weight:600;transition:all .25s ease-in-out;display:flex;transform:scale(1)}.bottom-copy-btn img{filter:grayscale()brightness(.5)}.bottom-copy-btn:hover{transform:scale(1.02)}.generate-gradient-buttons-div{border-left:1px solid #ddd;width:100%;height:auto;padding-left:15px;display:block;position:relative;overflow:hidden}.generated-gradient-code{color:#fff;text-align:center;background-color:#283e4a;border-radius:15px;width:90%;margin-inline:auto;padding:25px;font-size:16px;font-weight:500;line-height:1.6}.generated-gradient-code span{color:#ffe400}.total-color-label{color:#6f6f6f;white-space:nowrap;font-size:14px;font-weight:500;display:block}.color-stop-container{width:100%;box-shadow:none;cursor:pointer;border:none;border-radius:5px;outline:none;align-items:center;gap:12px;margin-bottom:5px;padding:8px;display:flex;position:relative}.color-stop-container:hover{background:#f4f5f8}.color-stop-container.selected{cursor:auto;background:#eff0f3}.color-stop-slider-div{width:100%;box-shadow:0 5px 15px #0000001a}.custom-color-box{width:30px;height:30px;box-shadow:none;cursor:pointer;border:none;border-radius:5px;outline:none;display:block;position:relative;overflow:hidden}.custom-color-box.selected{border:2px solid #000}.custom-color-box.selected:before{content:"";border:3px solid #fff;border-radius:3px;width:26px;height:26px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.transformCopyTxtBtn{cursor:pointer;position:absolute;top:15px;right:15px}.remove-color-btn{cursor:pointer;box-shadow:none;background:0 0;border:none;outline:none;margin:0;padding:0}.remove-color-btn.disabled{opacity:.2;cursor:not-allowed}.gradient-all-colors-div{margin-inline:auto;z-index:1;background:#fff;border:1px solid #ced3d6;border-radius:15px;width:90%;margin-top:-45px;position:relative;overflow:hidden}.gradient-all-colors-div .top-customize-div{justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px;display:flex}.gradient-all-colors-div .top-customize-div .gradient-type-div{border:1px solid #ddd;border-radius:50px;align-items:center;width:100%;max-width:300px;padding:5px;display:flex}.gradient-all-colors-div .top-customize-div .gradient-type-div label.each-gradient-type-label{text-align:center;width:100%;color:var(--text-color1);cursor:pointer;border-radius:50px;padding:5px 10px;font-size:14px;font-weight:500}.gradient-all-colors-div .top-customize-div .gradient-type-div label.each-gradient-type-label:has(input:checked){background:var(--blue1);color:#fff}.gradient-all-colors-div .top-customize-div .direction-select{border:1px solid #ced3d6;border-radius:50px;align-items:center;display:flex}.gradient-all-colors-div .top-customize-div .direction-select .direction-icon{background-color:#002007;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;display:flex;position:relative}.gradient-all-colors-div .top-customize-div .direction-select .direction-icon span{color:#fff;font-size:20px;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 1px))}.gradient-all-colors-div .top-customize-div .direction-select select{min-width:150px;color:var(--text-color2);box-shadow:none;appearance:none;cursor:pointer;background:url(/front-assets/images/icons/select-box-arrow.svg) right 15px center no-repeat;border:none;border-radius:50px;outline:none;font-weight:500;box-shadow:none!important;padding:5px 10px!important;font-size:1rem!important}.direction-select:has(.gradient-all-colors-div .top-customize-div .direction-select select:disabled){opacity:.2;cursor:not-allowed}.direction-select:has(.gradient-all-colors-div .top-customize-div .direction-select select:disabled) select{cursor:not-allowed}.sketch-picker{flex-direction:column-reverse;display:flex;position:relative;box-shadow:none!important;border:none!important;outline:none!important;gap:10px!important;width:100%!important;min-height:200px!important;padding:0!important}.sketch-picker>div:first-child{border-radius:10px;touch-action:none!important;width:40%!important;height:200px!important;padding:0!important;position:absolute!important;left:0!important}.sketch-picker>div:first-child .saturation-white div:nth-child(2) div{background-color:#000!important;border:6px solid #000!important;width:14px!important;height:14px!important;box-shadow:0 0 0 2.5px #fff,inset 0 0 2px 2px #0000004d,0 0 2px 3px #0006!important}.sketch-picker>div:nth-child(2){top:140px;width:calc(60% - 15px)!important;position:absolute!important;right:0!important}.sketch-picker>div:nth-child(2) div{flex-direction:column;gap:10px;display:flex}.sketch-picker>div:nth-child(2)>div div{border-radius:50px;height:14px!important;overflow:visible!important}.sketch-picker>div:nth-child(2)>div div .hue-horizontal div{top:1px}.sketch-picker>div:nth-child(2)>div div .hue-horizontal div div{outline:3px solid #000;box-shadow:none!important;cursor:pointer!important;background:0 0!important;border:3px solid #fff!important;border-radius:10px!important;width:8px!important;height:22px!important;margin-top:-4.5px!important}.sketch-picker>div:nth-child(2)>div div>div div div{top:1px}.sketch-picker>div:nth-child(2)>div div>div div div div{outline:3px solid #000;box-shadow:none!important;cursor:pointer!important;background:0 0!important;border:3px solid #fff!important;border-radius:10px!important;width:8px!important;height:22px!important;margin-top:-4.5px!important}.sketch-picker>div:nth-child(2)>div:nth-child(2){display:none!important}.sketch-picker div.flexbox-fix:nth-child(4){display:none!important}.sketch-picker .flexbox-fix:nth-child(3){top:0;flex-wrap:wrap!important;gap:0!important;width:calc(60% - 15px)!important;padding:0!important;display:flex!important;position:absolute!important;right:0!important}.sketch-picker .flexbox-fix:nth-child(3) div{padding:0!important}.sketch-picker .flexbox-fix:nth-child(3) div:first-child{margin-bottom:6px;flex:unset!important;width:100%!important}.sketch-picker .flexbox-fix:nth-child(3) div:first-child input{border-radius:5px}:is(.sketch-picker .flexbox-fix:nth-child(3) div:nth-child(3),.sketch-picker .flexbox-fix:nth-child(3) div:nth-child(4)) input{border-radius:0;border-right:none!important}.sketch-picker .flexbox-fix:nth-child(3) div:nth-child(2) input{border-right:none!important;border-radius:5px 0 0 5px!important}.sketch-picker .flexbox-fix:nth-child(3) div:nth-child(5) input{border-radius:0 5px 5px 0!important}.sketch-picker .flexbox-fix:nth-child(3) div{flex-direction:column-reverse;gap:2px;display:flex}.sketch-picker .flexbox-fix:nth-child(3) div input{color:var(--text-color2);font-weight:500;box-shadow:none!important;text-align:start!important;width:100%!important;height:100%!important;box-shadow:none!important;border:1px solid #ced3d6!important;outline:none!important;padding:5px 10px!important;font-size:1rem!important}.sketch-picker .flexbox-fix:nth-child(3) div label{color:var(--text-color2)!important;text-align:start!important;text-transform:uppercase!important;margin:0!important;padding:0!important;font-size:12px!important;font-weight:700!important}.total-color-label-div{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.total-color-label-div label{color:var(--text-color2);text-align:start;margin:0;padding:0;font-size:12px;font-weight:700}.total-color-label-div .random-gradient-btn{cursor:pointer;opacity:1;background-color:#fff;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;transition:all .25s ease-in-out;display:flex}.total-color-label-div .add-btn{color:var(--text-color1);box-shadow:none;cursor:pointer;background:0 0;border:1px solid #121212;border-radius:50px;outline:none;justify-content:center;align-items:center;gap:5px;margin:0;padding:3px 12px;font-size:13px;font-weight:600;display:flex}.total-color-label-div .add-btn.disabled{opacity:.2;cursor:not-allowed}.total-color-label-div .add-btn:hover{color:#fff;background:#121212}@media (max-width:991px){.gradient-main-box-area{padding-left:calc(var(--collapsedToolsSidebarWidth) + 0px)}}@media (max-width:767px){.gradient-main-box-area{padding-inline:0}.gradient-all-colors-div{width:100%;padding:15px!important}.generate-gradient-buttons-div{border:none;padding:0}.generated-gradient-code{width:100%}}@media (max-width:567px){.gradient-all-colors-div{width:100%;margin-top:10px;padding:10px!important}.gradient-main-box{height:150px}.top-customize-div .direction-select .direction-icon{width:36px!important;height:36px!important}.top-customize-div .direction-select .direction-icon span{font-size:20px!important;line-height:0!important;transform:translate(-50%,calc(-50% - 2px))!important}.top-customize-div .direction-select select#direction{width:100%;min-width:100px;max-width:100%}.sketch-picker{flex-direction:column}.sketch-picker>div:first-child{width:100%!important;height:200px!important;position:relative!important}.sketch-picker>div:nth-child(2){top:unset;width:100%!important;position:relative!important}.sketch-picker .flexbox-fix:nth-child(3){width:100%!important;position:relative!important}}