canvas{box-sizing:border-box;transform-origin:top left}canvas:not(.upper-canvas){border:solid 1px #ccc}.canvas-wrapper{display:flex;justify-content:center;align-items:center;width:100%;max-width:100%;margin:auto;overflow:auto;box-sizing:border-box;position:relative}.canvas-container{position:relative;overflow:visible;display:inline-block;transform-origin:top left}.brush-controls{max-width:640px;margin:0 auto;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;padding:10px;overflow-x:auto;position:relative;scroll-behavior:smooth}.brush-icon,.brush-icon-submenu,.brush-settings-submenu{position:relative;display:flex;justify-content:center;align-items:center;background-color:#f0f0f0;border-radius:8px;cursor:pointer;transition:transform 0.2s ease,background-color 0.3s;overflow:hidden}.brush-icon{width:75px;height:75px;min-width:75px;min-height:75px}.control-options-container{max-height:400px;overflow-y:auto;padding-right:8px}.control-options-container .brush-item{display:flex;justify-content:center;margin-bottom:10px}.brush-icon-submenu,.brush-settings-submenu{display:flex;align-items:center;gap:10px;background-color:#f0f0f0;border-radius:8px;padding:8px 12px;width:90%;max-width:320px;cursor:pointer;box-shadow:0 0 5px rgba(0,0,0,0.1);transition:background-color 0.2s ease}.brush-icon-submenu svg{flex-shrink:0}.brush-icon.small{width:55px!important;height:55px!important;min-width:55px!important;min-height:55px!important}.brush-controls,.control-options-container{scrollbar-width:thin;scrollbar-color:rgb(16,131,254) #e0e0e0}.brush-controls::-webkit-scrollbar,.control-options-container::-webkit-scrollbar{width:8px;height:8px}.brush-controls::-webkit-scrollbar-thumb,.control-options-container::-webkit-scrollbar-thumb{background-color:#11ccbd;border-radius:4px}.brush-controls::-webkit-scrollbar-track,.control-options-container::-webkit-scrollbar-track{background:#11ccbd;border-radius:4px}.brush-controls{display:flex;flex-wrap:nowrap}// .brush-item{// display:flex;// flex-direction:column;// align-items:center;// gap:4px;//}//// .brush-label{// font-size:14px;// font-weight:500;// color:#5f6368;// text-align:center;// white-space:nowrap;//}.brush-item{display:flex;justify-content:center;align-items:center}.brush-icon,brush-submenu{display:flex;flex-direction:column;align-items:center;padding:10px;background-color:#f0f0f0;border-radius:12px;box-shadow:0 0 5px rgba(0,0,0,0.05);cursor:pointer;transition:transform 0.2s}.jsRecent svg{transform:scale(.9)!important}.brush-icon:hover{background-color:#e1e1e1;transform:scale(1.1)}.brush-icon-submenu:hover{background-color:#e1e1e1;transform:scale(1.01)}.more-icon,.extra-icon{position:absolute;top:2px;right:2px;width:23px;height:23px;background-color:#fff;color:#666;font-size:12px;font-weight:bold;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;transition:transform 0.2s,background-color 0.3s}.extra-icon{top:50%;transition:transform 0.3s ease;transform:translateY(-50%)}// .extra-icon svg.rotated{// transform:rotate(180deg);//}.plus-icon,.minus-icon{position:absolute;left:2px;width:24px;height:50%;background-color:#ccc;color:#666;font-size:14px;font-weight:bold;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;transition:transform 0.2s,background-color 0.3s}.plus-icon{top:0;border-bottom:1px solid #aaa}.minus-icon{bottom:0}.plus-icon:hover,.minus-icon:hover{background-color:#bbb;transform:scale(1.2)}.more-icon:hover,extra-icon:hover{background-color:#bbb;transform:scale(1.2)}.plus-icon-full{position:absolute;left:2px;width:24px;height:100%;background-color:#ccc;color:#666;font-size:14px;font-weight:bold;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;transition:transform 0.2s,background-color 0.3s}.minus-icon-full{position:absolute;right:2px;width:24px;height:100%;background-color:#ccc;color:#666;font-size:14px;font-weight:bold;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:10;transition:transform 0.2s,background-color 0.3s}.plus-icon-full:hover,.minus-icon-full:hover{background-color:#bbb;transform:scale(1.2)}.dropdown-menu{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background-color:white;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,0.1);z-index:1000;padding:10px;width:150px}.brush-icon:hover .dropdown-menu,.more-icon:hover + .dropdown-menu{display:block}.brush-icon.active .more-icon svg{fill:#666;transform:scale(1)}.brush-icon.active-option svg:not(.more-icon svg):not(.brush-icon .more-icon svg):not(.extra-icon svg):not(.brush-icon .extra-icon svg),.brush-icon-submenu.active-option svg:not(.more-icon svg):not(.brush-icon-submenu .extra-icon svg),.brush-settings-submenu.active-option svg:not(.more-icon svg):not(.brush-icon .more-icon svg):not(.extra-icon svg):not(.brush-icon .extra-icon svg){fill:rgb(16,131,254);transform:scale(1.2)}.brush-icon-submenu.active-text-option{color:var(--primary-color)}.dropdown-menu{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);background-color:white;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,0.1);z-index:1000;padding:10px;width:150px}.brush-icon.dropdown:hover .dropdown-menu{display:block}.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);z-index:1000}.modal.active ~ .modal-overlay{display:block}.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;background-color:white;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,0.2);z-index:2000;padding:20px;max-height:90vh;overflow:hidden}.modal.active{display:block}.close-modal{color:black;font-size:28px;font-weight:bold;position:absolute;top:10px;right:10px;cursor:pointer}.close-modal:hover,.close-modal:focus{color:black;text-decoration:none}.modal-content{padding:20px;margin-top:20px;max-height:calc(90vh - 50px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#aaa transparent}.modal-content::-webkit-scrollbar{width:6px}.modal-content::-webkit-scrollbar-thumb{background-color:#aaa;border-radius:10px}.modal-content::-webkit-scrollbar-thumb:hover{background-color:#888}.modal-content::-webkit-scrollbar-track{background:transparent}.color-pickers{display:flex;flex-direction:column;width:100%;height:100%}.border-picker{flex:1;background-color:#000;position:relative;border-bottom:1px solid #ccc}.fill-picker{flex:1;background-color:#fff;position:relative;border-top:1px solid #ccc}input[type="color"]{position:absolute;width:100%;height:100%;cursor:pointer;opacity:0}.fill-picker:hover,.border-picker:hover{transform:scale(1.05);box-shadow:0 0 5px rgba(0,0,0,0.8)}#close-selector{position:absolute;top:10px;right:10px;background:none;border:none;color:#333;font-size:18px;font-weight:bold;cursor:pointer}#close-selector:hover{color:#f00;transform:scale(1.2)}#shape-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px}#shape-options button{width:50px;height:50px;display:flex;justify-content:center;align-items:center;background:#f9f9f9;border:1px solid #ccc;border-radius:4px;cursor:pointer;overflow:hidden}#shape-options button:hover{background:#e0e0e0}#shape-options button svg{width:60%;height:60%}.hidden{display:none}textarea,input:not["type=color"],select{background:0 0;border:1px solid rgb(194 200 208 / 1);border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#262626;color:rgba(var(--i1d,38,38,38),1);-webkit-box-flex:0;-webkit-flex:0 1 355px;-ms-flex:0 1 355px;flex:0 1 355px;font-size:16px;padding:6px 10px;resize:vertical;width:100%;font-family:"Inter","proxima-nova",Arial,Tahoma,sans-serif}.input-container-app input,.input-container-app textarea,.input-container-app select{background:0 0;border:1px solid rgba(194,200,208,1);border-radius:4px;box-sizing:border-box;color:#262626;flex:0 1 355px;font-size:16px;padding:6px 10px;resize:vertical;width:100%;font-family:"Inter","proxima-nova",Arial,Tahoma,sans-serif;*/ // margin-bottom:1rem}.input-container-app{position:relative;display:block;width:100%;// margin-bottom:2rem}.input-container-app::after{content:"";display:table;clear:both}textarea{height:100px}textarea{padding-top:.75rem!important}input,select{// height:54px;height:44px}.form-group{margin-bottom:1rem;width:100%}.brush-loading{display:none}.brush-loading.active{display:block}select:not(#jsSlctInfluencerCategory):not(#jsSlctInfluencerSubcategory):after{font-family:"FontAwesome";content:"\f107";pointer-events:none;position:absolute;display:inline-flex;justify-content:center;align-items:center;right:10px;top:50%;transform:translateY(-50%)}.dots-box{display:none;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.7);width:50px;height:20px;border-radius:5px;cursor:pointer}.dots-box.dots{display:flex}.dot{background-color:white;border-radius:50%;width:6px;height:6px;margin:0 2px}.brush-with-slider-container{display:flex;align-items:center;justify-content:flex-start;width:100%;height:100%}#stroke-size-slider::-webkit-slider-thumb,#brush-opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#000;border-radius:50%;cursor:pointer}.brush-with-slider-preview-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;margin-left:28px}#stroke-size-preview,#brush-opacity-preview{width:100%;height:10px;margin-bottom:5px}#stroke-size-label,#brush-opacity-label{font-size:14px;color:#333;text-align:center;display:block}.brush-icon svg{height:30px;width:30px}.smaller-controls{display:flex;justify-content:center;gap:15px;padding:5px 0}.smaller-controls .brush-icon{width:40px;height:40px;max-width:40px;max-height:40px;min-width:40px;min-height:40px;background-color:#f5f5f5;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color 0.3s,transform 0.2s}.canvas-controls{margin-left:10px;text-align:center}.canvas-controls div{display:inline-block;padding:.25rem}.canvas-controls div.active{background:#efefef}@media (max-width:768px){.canvas-controls{display:none}}@media (min-width:768px){.brush-controls.main.isAnimations{justify-content:center}}@media (max-width:588px){textarea{height:200px}@media (max-width:768px){.canvas-wrapper{scrollbar-width:thick;scrollbar-color:#888 #ccc}.canvas-wrapper::-webkit-scrollbar{width:16px;height:16px}.canvas-wrapper::-webkit-scrollbar-thumb{background-color:#888;border-radius:8px}.canvas-wrapper::-webkit-scrollbar-track{background-color:#ccc;border-radius:8px}}}@media (max-width:768px){.brush-controls{gap:10px}.brush-icon:not(.smaller-controls .brush-icon){width:75px;height:75px;min-width:75px;min-height:75px}.brush-icon svg{height:35px;width:35px}.smaller-controls .brush-icon{width:50px;height:50px;max-width:50px;max-height:50px;min-width:50px;min-height:50px;background-color:#f5f5f5;border-radius:50%;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:background-color 0.3s,transform 0.2s}#shape-options button{width:60px;height:60px;display:flex;justify-content:center;align-items:center;background:#f9f9f9;border:1px solid #ccc;border-radius:4px;cursor:pointer;overflow:hidden}.brush-zoom-label{font-size:12px}}.slider-container{display:block}.stepper-container{display:none;text-align:center}button{font-size:18px;padding:8px 12px;background:#333;color:white;border:none;border-radius:4px;cursor:pointer}@media (max-width:768px){.slider-container{display:none}.stepper-container{display:flex;flex-direction:column;align-items:center}}#durationPicker{position:absolute;top:60px;left:20px;background:#fff;border:1px solid #ccc;border-radius:8px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:1000;display:none}#durationPicker.show{display:block}#frameDuration{width:100%;padding:8px;border-radius:4px;outline:none;border:1px solid #ccc;transition:0.3s}#frameDuration:hover{border-color:#007BFF}.jsAnimationControls{opacity:1;pointer-events:auto;transition:opacity 0.3s ease-in}.jsAnimationControls.off{opacity:0;pointer-events:none;transition:opacity 0.3s ease-out}.frame-controls-wrapper{max-width:640px;margin:0 auto;width:100%}.mode-controls-row{display:flex;justify-content:space-between;align-items:center;padding:6px 12px}.mode-icons{display:flex;gap:8px}.brush-icon{cursor:pointer}.frame-label{font-size:14px;color:var(--primary-color);white-space:nowrap}.brush-icon.jsCloneNewFrame.mode-on svg{stroke:var(--primary-color);transform:scale(1.2)}.brush-icon.jsBtnOpenAnimationControls.mode-on svg{stroke:rgb(16,131,254);transform:scale(1.2)}.brush-controls.animation > .brush-icon{height:35px;width:35px;min-height:35px;max-height:35px;min-width:35px;max-width:35px;padding-top:5px;padding-bottom:5px}.brush-options-container{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding:10px}body.keyboard-open .canvas-wrapper{height:auto;max-height:90vh}.jsLayerList .layer-item{display:flex;align-items:center;padding:8px;border-bottom:1px solid #eee;cursor:pointer;user-select:none;box-sizing:border-box;min-height:40px;transition:background 0.2s ease,color 0.2s ease}.jsLayerList .layer-item.selected{background:#ffa500;color:#fff;outline:2px solid #cc8400}.jsLayerList .layer-item.active{background:#e0e0e0}.jsLayerList .layer-item svg{margin-right:8px}.jsLayerList .layer-label{flex-grow:1}.jsLayerList .layer-controls{display:flex;gap:5px}.jsLayerList .layer-controls button{padding:5px;background:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center}.jsLayerList .layer-controls button:disabled{background:#ccc;cursor:not-allowed}.control-options-container{padding:10px}#jsGroupLayers,#jsUngroupLayers{margin-bottom:10px}#c{width:100%;height:100%;margin:0;padding:0;border:none}#c,.canvas-container,.canvas-container canvas{margin:0;padding:0;border:none}