*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Arial,sans-serif;
}

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    background:#2b2b2b;
    color:white;

}

body{

    display:flex;
    flex-direction:column;

}

#toolbar{

    height:48px;

    background:#252525;

    border-bottom:1px solid #444;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 15px;

}

#toolbar button{

    padding:5px 10px;

    font-size:14px;

}

#main{

    flex:1;

    display:flex;

    overflow:hidden;

}

#layersPanel{

    width:240px;

    background:#313131;

    border-right:1px solid #444;

    padding:8px;

    overflow-y: auto;

}

#propertiesPanel{

    width:240px;

    background:#313131;

    border-left:1px solid #444;

    padding:8px;

    overflow-y: auto;

}


#workspace{

    flex:1;

    background:#202020;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center !important;

    align-items:center !important;

    overflow-x: auto;
    overflow-y: auto;

    padding-top:0px !important;
}

.canvas-container{
    margin:auto !important;
    background-color:white;
    box-shadow:0 0 20px rgba(0,0,0,.5);

}

#statusbar{

    height:28px;

    background:#252525;

    border-top:1px solid #444;

    display:flex;

    align-items:center;

    padding:0 12px;

    font-size:13px;

}

.statusSpacer{

    width:40px;

}

.panelPlaceholder{

    color:#999;

    margin-top:20px;

}

.layerItem{

    padding:5px;

    border-bottom:1px solid #444;

    cursor:pointer;

}

.layerItem:hover{

    background:#444;

}

.layerItem{

    padding:8px;

    border-bottom:1px solid #444;

    cursor:pointer;

    display:flex;

    gap:5px;

    align-items:center;

}


.layerItem:hover{

    background:#444;

}


.eye{
padding-top:5px;
    width:20px;

}


.layerName{

    flex:1;
    font-size:13px;

}

.lock{
    cursor:pointer;
    margin-right:2px;
}

.eye{
    cursor:pointer;
    margin-right:2px;
}

.layerItem{
    padding:3px;
    cursor:pointer;
}


.layerItem.active{

    background:#333;

    border-left:4px solid #4da3ff;

}

.layerItem.selected{

    background:#3b82f6;
    color:white;

}

/* PROPERTY PANEL */

#propertiesContent {

    font-size:14px;

}


#propertiesContent h4 {

    margin:15px 0 10px;

    padding-bottom:5px;

    border-bottom:1px solid #444;

    font-size:15px;

}


/* INPUTS */

#propertiesContent input,
#propertiesContent select {

    background:#222;

    color:white;

    border:1px solid #555;

    border-radius:4px;

    padding:5px;

    font-size:14px;

}


#propertiesContent input[type="number"] {

    width:66px;

}

#propertiesContent input[type="color"] {

    width:66px;

}


#propertiesContent select {

    width:120px;

}
hr{
    margin-top:10px;
}

.modal {

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    align-items:center;

    justify-content:center;

    z-index:1000;

}



.modalBox {

    background:#222;

    color:white;

    padding:25px;

    border-radius:8px;

    width:300px;

}


.modalBox input {

    width:100%;

}
.canvas-container {

    box-shadow:
    0 0 0 1px #666,
    0 0 25px rgba(0,0,0,.75);

}
#exportModal .modalBox{

    width:360px;

}
#exportModal .modalBox{

    width:460px;

}
.miniSpan{
    width:100px !important;
    font-size:11px;
}

/* PANEL SCROLLBARS */

#layersPanel::-webkit-scrollbar,
#propertiesPanel::-webkit-scrollbar {

    width:8px;

}


/* Scrollbar track */

#layersPanel::-webkit-scrollbar-track,
#propertiesPanel::-webkit-scrollbar-track {

    background:#252525;

}


/* Scrollbar handle */

#layersPanel::-webkit-scrollbar-thumb,
#propertiesPanel::-webkit-scrollbar-thumb {

    background:#555;

    border-radius:8px;

}


/* Hover */

#layersPanel::-webkit-scrollbar-thumb:hover,
#propertiesPanel::-webkit-scrollbar-thumb:hover {

    background:#777;

}

/* WORKSPACE SCROLLBARS */


#workspace::-webkit-scrollbar {

    width:8px;
height:8px;
}


/* Scrollbar track */


#workspace::-webkit-scrollbar-track {

    background:#252525;

}


/* Scrollbar handle */


#workspace::-webkit-scrollbar-thumb {

    background:#555;

    border-radius:8px;

}


/* Hover */


#workspace::-webkit-scrollbar-thumb:hover {

    background:#777;

}

 .tootTitles{
    vertical-align:top;
 }

 /* RANGE SLIDERS */

input[type="range"] {

    -webkit-appearance:none;
    appearance:none;

    width:100%;

    height:6px;

    background:#444;

    border-radius:10px;

    outline:none;

    cursor:pointer;

}


/* Chrome / Edge / Safari track */

input[type="range"]::-webkit-slider-runnable-track {

    height:6px;

    background:#444;

    border-radius:10px;

}



/* Chrome / Edge / Safari thumb */

input[type="range"]::-webkit-slider-thumb {

    -webkit-appearance:none;

    appearance:none;

    width:16px;

    height:16px;

    margin-top:-5px;

    background:#4da3ff;

    border-radius:50%;

    border:2px solid white;

    cursor:pointer;

    transition:.2s;

}


input[type="range"]::-webkit-slider-thumb:hover {

    transform:scale(1.2);

    background:#6bb7ff;

}



/* Firefox track */

input[type="range"]::-moz-range-track {

    height:6px;

    background:#444;

    border-radius:10px;

}



/* Firefox thumb */

input[type="range"]::-moz-range-thumb {

    width:16px;

    height:16px;

    background:#4da3ff;

    border-radius:50%;

    border:2px solid white;

    cursor:pointer;

}

.menu{

    position:relative;

}


.menuButton{

    background:#252525;

    color:white;

    border:0px solid #444;

    padding:4px 10px;

    cursor:pointer;

    white-space:nowrap;

    font-size:13px;

}



.menuDropdown{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    background:#F0F0F0;

    color:black;

    border:1px solid #555;

    min-width:180px;

    z-index:5000;

    box-shadow:0 5px 15px rgba(0,0,0,.5);

}



.menuDropdown button{

    width:100%;

    text-align:left;

    padding:8px 12px;

    background:none;

    border:none;

    color:black;

    cursor:pointer;

}



.menuDropdown button:hover{

    background:#3b82f6;

}


.menu:hover .menuDropdown{

    display:block;

}


.menuDropdown hr{

    border:none;

    border-top:1px solid #555;

    margin:5px 0;

}
.toolbar-left{

    display:flex;

    align-items:center;

    gap:8px;

}
#previewMode{
    background:#252525;

    color:white;

    border:1px solid #555;

    border-radius:6px;

    padding:3px 4px;

    margin:3px;

    width:125px;

    height:auto;

    font-size:11px;

    cursor:pointer;

    transition:.15s;
}

#previewMode:hover{

    background:#3b82f6;

    border-color:#6bb7ff;

}
#previewMode:active{

    transform:scale(.97);

}

/* PROJECT SIZE PRESET BUTTONS */

.sizeButton{

    background:#252525;

    color:white;

    border:1px solid #555;

    border-radius:6px;

    padding:3px 4px;

    margin:3px;

    width:125px;

    height:auto;

    font-size:11px;

    cursor:pointer;

    transition:.15s;

}


.sizeButton:hover{

    background:#3b82f6;

    border-color:#6bb7ff;

}


.sizeButton:active{

    transform:scale(.97);

}

.submenu{

position:relative;

}


.submenuDropdown{

display:none;

position:absolute;

left:100%;

top:0;

background:#F0F0F0;

min-width:180px;

border:1px solid #555;

z-index:5000;

}


.submenu:hover .submenuDropdown{

display:block;

}


.submenuDropdown button{

width:100%;

text-align:left;

}



.graphicBox{

width:600px !important;

max-height:80vh;

overflow:auto;

}



#graphicGrid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:15px;

}



.graphicItem{

background:#F0F0F0;

padding:10px;

cursor:pointer;

border-radius:6px;

text-align:center;

}



.graphicItem:hover{

background:#4da3ff;

}



.graphicItem img{

max-width:80px;

max-height:80px;

}

.topbar{

    width:100%;
    height:42px;

    background:#252525;
    color:white;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 15px;

    box-sizing:border-box;

    font-family:Arial, sans-serif;

    border-bottom:1px solid #444;

}



.userInfo{

    display:flex;
    align-items:center;

    gap:8px;

    font-size:14px;

}



.userIcon{

    font-size:18px;

}



.username{

    font-weight:bold;

    color:#eee;

}



.logoutButton{

    background:#3a3a3a;

    color:#ddd;

    text-decoration:none;

    font-size:12px;

    padding:4px 10px;

    border-radius:4px;

    border:1px solid #555;

    transition:all .2s ease;

}



.logoutButton:hover{

    background:#555;

    color:white;

    border-color:#777;

}
.version {
    margin-left: auto;
}