.t4e-shape-control{
    background-color: #2d2d2d;
    margin: 5px;
    border: 1px solid #1a1a1a;
}

.t4e-property-panel-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1a1a1a;
    padding-left: 5px;
}

.t4e-property-panel-header button{
    float: right;
}

.t4e-property-panel-header h5{
    margin: 0px;
    width: fit-content;
}

.t4e-property-group label{
    font-size: 14px;
    color: #ffffff;
    margin-left: 15px;
    margin-right: 5px;
}

.t4e-property-group input[type="number"] {
   width: 50px;
}

#t4e-properties-panel{
    overflow: scroll;
    max-height: 50vh;
}

.t4e-property-panel{
    background-color: #2d2d2d;
    
}

.t4e-property-panel h5{
    font-size: 14px;
    margin: 0px 0px 5px 0px;
}

.t4e-lowerthirds-app {
    display: flex;
    background-color: #1a1a1a;
    color: #ffffff;
    min-height: 600px;
    padding: 20px;
    gap: 20px;
    max-width: none !important;
}

.t4e-canvas-container {
    flex: 1;
    background-color: #2d2d2d;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.t4e-canvas-container-buttons input[type="button"]{
    width: fit-content;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    padding: 5px;
    margin: 2px;
    cursor: pointer;
}

.t4e-shape-controls button{
    width: 35px;
    height: 35px;
    background-color: #2d2d2d;
    color: #ffffff;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    font-size: 12px;
}

.t4e-shape-controls button:hover{
    background-color: #4d4d4d;
}

.t4e-canvas-container-buttons input[type="button"]:hover{
    background-color: #4d4d4d;
}

.t4e-toolbox {
    width: 300px;
    background-color: #2d2d2d;
    border-radius: 8px;
    padding: 20px;
}

.t4e-resolution-selector {
    margin-bottom: 0px;
}

.t4e-resolution-selector select {
    width: 100%;
    padding: 8px;
    background-color: #3d3d3d;
    color: #ffffff;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
    margin-bottom: 10px;
}

.t4e-custom-resolution {
    display: none;
    gap: 10px;
}

.t4e-custom-resolution input {
    width: 100%;
    padding: 8px;
    background-color: #3d3d3d;
    color: #ffffff;
    border: 1px solid #4d4d4d;
    border-radius: 4px;
}

.t4e-delete-btn{
    background-color: #1a1a1a !important; 
    border: 1px solid #4d4d4d !important;
    color: #ffffff !important;
    cursor: pointer !important;    
}

.t4e-delete-btn:hover{
    background-color: #4d4d4d !important;
}



.t4e-canvas {
    background-color: #00FF00;
    border: 1px solid #4d4d4d;
    border-radius: 0px;
    margin: auto;
    width: 100%;
    height: auto;
}

.t4e-toolbox-section {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #4d4d4d;
}

.t4e-toolbox-section:last-child {
    border-bottom: none;
}

.t4e-toolbox-section h3 {
    margin: 0 0 15px 0;
    color: #ffffff;
    font-size: 16px;
}

#t4e-save-jpg, #t4e-save-png, #t4e-save-svg{
    float: left;
}

#t4e-full-screen, #t4e-open-in-new-window{
    float: right;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #2d2d2d;
}

::-webkit-scrollbar-thumb {
    background: #4d4d4d;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5d5d5d;
}