/* /Components/HeadshotSearch.razor.rz.scp.css */
.loading-content[b-484s7lj32a] {
    display: flex;
    justify-content: center;
    margin: 32px;
    gap: 12px;
}

.variant-results-modal[b-484s7lj32a] {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: auto;
    overflow-y: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 4px 16px rgba(0,32,128,0.13), 0 1.5px 6px rgba(0,0,0,0.08);
    font-size: 12px;
    padding: 6px;
    z-index: 25000;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
}


.variant-results-back[b-484s7lj32a] {
    margin: 8px 0;
    font-size: 12px;
}

    .variant-results-back:hover[b-484s7lj32a] {
        text-decoration: underline;
        cursor: pointer;
    }


.variant-results[b-484s7lj32a] {
    width: 99%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variant-item[b-484s7lj32a] {
    display: flex;
    height: 25px;
    padding: 16px;
    background: var(--bg-color-darker);
    background: linear-gradient(132deg, rgba(232, 234, 237, 1) 100%, rgba(206, 211, 215, 1) 0%);
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
}

    .variant-item:hover[b-484s7lj32a] {
        background-color: white;
    }

    .variant-item img[b-484s7lj32a] {
        width: 75px;
        height: 40px;
        object-fit: contain;
    }

    .variant-item div[b-484s7lj32a] {
        width: 35px;
        padding: 6px;
        border-radius: 25px;
        background-color: #FFD782;
        font-size: 11px;
        text-align: center;
        margin-left: auto;
        text-transform: uppercase;
    }



.search-input-row[b-484s7lj32a] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    overflow: visible;
    flex-wrap: wrap;
    width: 100%;
}


.search-input[b-484s7lj32a] {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0 16px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    margin-right: -2px;
    background: var(--surface-color);
    color: var(--text-color);
}

    .search-input:focus[b-484s7lj32a] {
        border-color: var(--border-focused-color);
        z-index: 1;
        position: relative;
    }

    .search-input[b-484s7lj32a]::placeholder {
        color: var(--text-color);
    }

.search-results[b-484s7lj32a] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 4px 16px rgba(0,32,128,0.13), 0 1.5px 6px rgba(0,0,0,0.08);
    display: none;
    font-size: 12px;
    padding: 6px;
    z-index: 25000;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
}

    .search-results.active[b-484s7lj32a] {
        display: block;
    }

.search-results-content[b-484s7lj32a] {
    width: 99%;
    overflow-y: auto;
    height: 99%;
}

.search-result-item[b-484s7lj32a] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12px;
    gap: 7px;
}

    .search-result-item:hover[b-484s7lj32a] {
        background: var(--toolbar-hover-color);
    }

    .search-result-item:last-child[b-484s7lj32a] {
        border-bottom: none;
    }

    .search-result-item.already-selected[b-484s7lj32a] {
        background-color: var(--toolbar-hover-color);
        color: var(--text-color);
        cursor: not-allowed;
    }

        .search-result-item.already-selected:hover[b-484s7lj32a] {
            background-color: var(--toolbar-hover-color);
        }

    .search-result-item img[b-484s7lj32a] {
        width: 40px;
        height: 40px;
        object-fit: contain;
        margin-right: 6px;
        border-radius: 3px;
        background: var(--surface-color);
        box-shadow: 0 1px 3px rgba(0,0,0,0.07);
        padding: 1px;
    }

.search-result-item-name[b-484s7lj32a] {
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
}

.search-result-item.already-selected .search-result-item-name[b-484s7lj32a] {
    color: var(--text-color);
}

.search-result-item.already-selected[b-484s7lj32a]::after {
    content: "✓";
    color: var(--text-color);
    font-weight: bold;
    margin-left: 8px;
}


.search-controls-link[b-484s7lj32a] {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0px;
    gap: 10px;
}

    .search-controls-link a[b-484s7lj32a] {
        font-size: 12px;
        color: var(--text-color);
        text-decoration: none;
        cursor: pointer;
    }

        .search-controls-link a:hover[b-484s7lj32a] {
            text-decoration: underline;
        }




/* /Components/HeadshotSelectionPanel.razor.rz.scp.css */

.selection-panel[b-2dt1te96yk] {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    
}

@media (min-width: 1034px) {

}





    .selection-panel.active[b-2dt1te96yk] {
        right: 0;
    }

.selection-panel-title-area[b-2dt1te96yk] {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: left;
    align-content: center;
}

.selection-panel-title-area-empty[b-2dt1te96yk] {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
    align-content: center;
    font-size: 11px;
    color: var(--text-color);
}

    .selection-icon[b-2dt1te96yk] {
        font-size: 24px;
    }

    .selection-title[b-2dt1te96yk] {
        font-size: 14px;
        line-height: 24px;
        align-self: center;
        color: var(--text-color);
    }


.search-controls[b-2dt1te96yk] {
    display: flex;
    justify-content: right;
    box-sizing: border-box;
    padding: 6px 0;
}


/* New sort controls section - separate from search */

.sort-controls-section[b-2dt1te96yk] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .sort-controls-section a[b-2dt1te96yk] {
        font-size: 11px;
        color: #6b7280;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease;
    }

        .sort-controls-section a:hover[b-2dt1te96yk] {
            text-decoration: none;
        }

        .sort-controls-section a div[b-2dt1te96yk] {
            width: 28px;
            height: 28px;
            background-color: none;
            display: flex;
            justify-content: center;
            align-content: center;
            border-radius: 4px;
        }

            .sort-controls-section a div:hover[b-2dt1te96yk] {
                background-color: var(--toolbar-hover-color);
            }

        .sort-controls-section a i[b-2dt1te96yk] {
            font-size: 18px;
            align-self: center;
        }











.sort-controls-header[b-2dt1te96yk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-count-text[b-2dt1te96yk] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.sort-controls-pills[b-2dt1te96yk] {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

    .sort-controls-pills .sort-buttons-group[b-2dt1te96yk] {
        display: flex;
        gap: 6px;
        align-items: center;
    }

.sort-btn-pill[b-2dt1te96yk] {
    padding: 6px 12px;
    height: 26px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    border-radius: 13px; /* Fully rounded pills */
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    box-shadow: none;
}

    .sort-btn-pill:hover[b-2dt1te96yk] {
        background: var(--toolbar-hover-color);
        border-color: var(--border-color);
        color: var(--text-color);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px var(--shadow-color);
    }

    .sort-btn-pill.active[b-2dt1te96yk] {
        background: var(--toolbar-hover-color);
        color: var(--text-color);
        border-color: var(--border-color);
        box-shadow: 0 2px 4px var(--shadow-color);
    }

        .sort-btn-pill.active:hover[b-2dt1te96yk] {
            background: var(--toolbar-hover-color);
            border-color: var(--border-color);
            transform: translateY(-1px);
        }

        .manual-mode-hint[b-2dt1te96yk] {
            display: flex;
            justify-content: center;
            align-content: center;
        }

        .manual-mode-hint span[b-2dt1te96yk] {
            font-size: 10px;
            color: var(--text-color);
            align-self: center;
            font-style: italic;
        }

.selection-list[b-2dt1te96yk] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.selection-empty[b-2dt1te96yk] {
    text-align: center;
    color: var(--text-color);
    font-style: italic;
    padding: 40px 20px;
    font-size: 12px;
}

.selection-item[b-2dt1te96yk] {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: default;
    transition: all 0.2s ease;
}

    .selection-item[draggable="true"][b-2dt1te96yk] {
        cursor: move;
    }

    .selection-item[draggable="false"][b-2dt1te96yk] {
        cursor: default;
    }

    .selection-item:hover[b-2dt1te96yk] {
        background: var(--bg-color-darker);
        transform: translateX(2px);
    }

    .selection-item.dragging[b-2dt1te96yk] {
        opacity: 0.4;
        transform: scale(0.95);
        box-shadow: 0 4px 12px var(--shadow-color);
    }

    .selection-item.drag-over[b-2dt1te96yk] {
        border-color: var(--border-color);
        background: var(--surface-color);
        border-width: 2px;
        padding: 9px;
    }

.drop-indicator[b-2dt1te96yk] {
    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
    margin: 6px 0;
    border-radius: 4px;
    animation: pulse-b-2dt1te96yk 0.8s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.6), 0 2px 6px rgba(0, 123, 255, 0.4);
    position: relative;
    padding: 8px;
    text-align: center;
}

.drop-indicator-bar[b-2dt1te96yk] {
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
    margin: 4px 0;
    width: 100%;
    transition: background 0.2s;
}

.drop-indicator-arrow[b-2dt1te96yk] {
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

.drop-indicator[b-2dt1te96yk]::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.1) 0%, transparent 100%);
}

.drop-indicator[b-2dt1te96yk]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(0deg, rgba(0, 123, 255, 0.1) 0%, transparent 100%);
}

@keyframes pulse-b-2dt1te96yk {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.9;
        transform: scaleX(0.98);
    }
}

.selection-item-logo[b-2dt1te96yk] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
    padding: 4px;
    pointer-events: none;
}

.selection-item img[b-2dt1te96yk] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
    padding: 4px;
    pointer-events: none;
   
}

.selection-item-info[b-2dt1te96yk] {
    flex: 1;
    pointer-events: none;
}

.selection-item-content[b-2dt1te96yk] {
    display: flex;
    align-items: center;
    width: 100%; /* Ensures the content fills the row */
    
}

.selection-item-name[b-2dt1te96yk] {
    margin-right: auto;
    font-size: 12px;
    /* Pushes the button to the right */
}

.selection-item-remove[b-2dt1te96yk] {
    margin-left: 12px;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: none;
}

    .selection-item-remove:hover[b-2dt1te96yk] {
        box-shadow: none;
    }








/* /Components/LogoSearch.razor.rz.scp.css */
.loading-content[b-uenpyv81i9] {
    display: flex;
    justify-content: center;
    margin: 32px;
    gap: 12px;
}

.variant-results-modal[b-uenpyv81i9] {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: auto;
    overflow-y: hidden;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 4px 16px rgba(0,32,128,0.13), 0 1.5px 6px rgba(0,0,0,0.08);
    font-size: 12px;
    padding: 6px;
    z-index: 25000;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
}


.variant-results-back[b-uenpyv81i9] {
    margin: 8px 0;
    font-size: 12px;
}

    .variant-results-back:hover[b-uenpyv81i9] {
        text-decoration: underline;
        cursor: pointer;
    }


.variant-results[b-uenpyv81i9] {
    width: 99%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variant-item[b-uenpyv81i9] {
    display: flex;
    height: 25px;
    padding: 16px;
    background: var(--bg-color-darker);
    background: linear-gradient(132deg, rgba(232, 234, 237, 1) 100%, rgba(206, 211, 215, 1) 0%);
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
}

    .variant-item:hover[b-uenpyv81i9] {
        background-color: white;
    }

    .variant-item img[b-uenpyv81i9] {
        width: 75px;
        height: 40px;
        object-fit: contain;
    }

    .variant-item div[b-uenpyv81i9] {
        width: 35px;
        padding: 6px;
        border-radius: 25px;
        background-color: #FFD782;
        font-size: 11px;
        text-align: center;
        margin-left: auto;
        text-transform: uppercase;
    }



.search-input-row[b-uenpyv81i9] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    overflow: visible;
    flex-wrap: wrap;
    width: 100%;
}


.search-input[b-uenpyv81i9] {
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    font-size: 14px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 0 16px;
    box-sizing: border-box;
    outline: none;
    transition: all 0.2s ease;
    width: 100%;
    margin-right: -2px;
    background: var(--surface-color);
    color: var(--text-color);
}

    .search-input:focus[b-uenpyv81i9] {
        border-color: var(--border-focused-color);
        z-index: 1;
        position: relative;
    }

    .search-input[b-uenpyv81i9]::placeholder {
        color: var(--text-color);
    }

.search-results[b-uenpyv81i9] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 4px 16px rgba(0,32,128,0.13), 0 1.5px 6px rgba(0,0,0,0.08);
    display: none;
    font-size: 12px;
    padding: 6px;
    z-index: 25000;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    width: 100%;
    margin-top: 4px;
    box-sizing: border-box;
}

    .search-results.active[b-uenpyv81i9] {
        display: block;
    }

.search-results-content[b-uenpyv81i9] {
    width: 99%;
    overflow-y: auto;
    height: 99%;
}

.search-result-item[b-uenpyv81i9] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12px;
    gap: 7px;
}

    .search-result-item:hover[b-uenpyv81i9] {
        background: var(--toolbar-hover-color);
    }

    .search-result-item:last-child[b-uenpyv81i9] {
        border-bottom: none;
    }

    .search-result-item.already-selected[b-uenpyv81i9] {
        background-color: var(--toolbar-hover-color);
        color: var(--text-color);
        cursor: not-allowed;
    }

        .search-result-item.already-selected:hover[b-uenpyv81i9] {
            background-color: var(--toolbar-hover-color);
        }

    .search-result-item img[b-uenpyv81i9] {
        width: 40px;
        height: 40px;
        object-fit: contain;
        margin-right: 6px;
        border-radius: 3px;
        background: var(--surface-color);
        box-shadow: 0 1px 3px rgba(0,0,0,0.07);
        padding: 1px;
    }

.search-result-item-name[b-uenpyv81i9] {
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    white-space: nowrap; /* Prevents text from wrapping to a new line */
    overflow: hidden; /* Hides the content that goes outside */
    text-overflow: ellipsis; /* Adds '...' when text is cut off */
    min-width: 0; /* IMPORTANT: Allows flex item to shrink below content size */
}

.search-result-item.already-selected .search-result-item-name[b-uenpyv81i9] {
    color: var(--text-color);
}

.search-result-item.already-selected[b-uenpyv81i9]::after {
    content: "✓";
    color: var(--text-color);
    font-weight: bold;
    margin-left: 8px;
}


.search-controls-link[b-uenpyv81i9] {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0px;
    gap: 10px;
}

    .search-controls-link a[b-uenpyv81i9] {
        font-size: 12px;
        color: var(--text-color);
        text-decoration: none;
        cursor: pointer;
    }

        .search-controls-link a:hover[b-uenpyv81i9] {
            text-decoration: underline;
        }




/* /Components/SelectionPanel.razor.rz.scp.css */

.selection-panel[b-ey6hqgg3lt] {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    
}

@media (min-width: 1034px) {

}





    .selection-panel.active[b-ey6hqgg3lt] {
        right: 0;
    }

.selection-panel-title-area[b-ey6hqgg3lt] {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: left;
    align-content: center;
}

.selection-panel-title-area-empty[b-ey6hqgg3lt] {
    display: flex;
    width: 100%;
    gap: 10px;
    justify-content: center;
    align-content: center;
    font-size: 11px;
    color: var(--text-color);
}

    .selection-icon[b-ey6hqgg3lt] {
        font-size: 24px;
    }

    .selection-title[b-ey6hqgg3lt] {
        font-size: 14px;
        line-height: 24px;
        align-self: center;
        color: var(--text-color);
    }


.search-controls[b-ey6hqgg3lt] {
    display: flex;
    justify-content: right;
    box-sizing: border-box;
    padding: 6px 0;
}


/* New sort controls section - separate from search */

.sort-controls-section[b-ey6hqgg3lt] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .sort-controls-section a[b-ey6hqgg3lt] {
        font-size: 11px;
        color: #6b7280;
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease;
    }

        .sort-controls-section a:hover[b-ey6hqgg3lt] {
            text-decoration: none;
        }

        .sort-controls-section a div[b-ey6hqgg3lt] {
            width: 28px;
            height: 28px;
            background-color: none;
            display: flex;
            justify-content: center;
            align-content: center;
            border-radius: 4px;
        }

            .sort-controls-section a div:hover[b-ey6hqgg3lt] {
                background-color: var(--toolbar-hover-color);
            }

        .sort-controls-section a i[b-ey6hqgg3lt] {
            font-size: 18px;
            align-self: center;
        }











.sort-controls-header[b-ey6hqgg3lt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.selected-count-text[b-ey6hqgg3lt] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}

.sort-controls-pills[b-ey6hqgg3lt] {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: space-between;
}

    .sort-controls-pills .sort-buttons-group[b-ey6hqgg3lt] {
        display: flex;
        gap: 6px;
        align-items: center;
    }

.sort-btn-pill[b-ey6hqgg3lt] {
    padding: 6px 12px;
    height: 26px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-color);
    border-radius: 13px; /* Fully rounded pills */
    cursor: pointer;
    font-size: 10px;
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    box-shadow: none;
}

    .sort-btn-pill:hover[b-ey6hqgg3lt] {
        background: var(--toolbar-hover-color);
        border-color: var(--border-color);
        color: var(--text-color);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px var(--shadow-color);
    }

    .sort-btn-pill.active[b-ey6hqgg3lt] {
        background: var(--toolbar-hover-color);
        color: var(--text-color);
        border-color: var(--border-color);
        box-shadow: 0 2px 4px var(--shadow-color);
    }

        .sort-btn-pill.active:hover[b-ey6hqgg3lt] {
            background: var(--toolbar-hover-color);
            border-color: var(--border-color);
            transform: translateY(-1px);
        }

        .manual-mode-hint[b-ey6hqgg3lt] {
            display: flex;
            justify-content: center;
            align-content: center;
        }

        .manual-mode-hint span[b-ey6hqgg3lt] {
            font-size: 10px;
            color: var(--text-color);
            align-self: center;
            font-style: italic;
        }

.selection-list[b-ey6hqgg3lt] {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    
}

.selection-empty[b-ey6hqgg3lt] {
    text-align: center;
    color: var(--text-color);
    font-style: italic;
    padding: 40px 20px;
    font-size: 12px;
}

.selection-item[b-ey6hqgg3lt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 10px;
    margin-bottom: 8px;
    background: var(--bg-color);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    cursor: default;
    transition: all 0.2s ease;
    overflow: hidden;
}

    .selection-item[draggable="true"][b-ey6hqgg3lt] {
        cursor: move;
    }

    .selection-item[draggable="false"][b-ey6hqgg3lt] {
        cursor: default;
    }

    .selection-item:hover[b-ey6hqgg3lt] {
        background: var(--bg-color-darker);
        transform: translateX(2px);
    }

    .selection-item.dragging[b-ey6hqgg3lt] {
        opacity: 0.4;
        transform: scale(0.95);
        box-shadow: 0 4px 12px var(--shadow-color);
    }

    .selection-item.drag-over[b-ey6hqgg3lt] {
        border-color: var(--border-color);
        background: var(--surface-color);
        border-width: 2px;
        padding: 9px;
    }


.drop-indicator[b-ey6hqgg3lt] {
    background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
    margin: 6px 0;
    border-radius: 4px;
    animation: pulse-b-ey6hqgg3lt 0.8s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(0, 123, 255, 0.6), 0 2px 6px rgba(0, 123, 255, 0.4);
    position: relative;
    padding: 8px;
    text-align: center;
}

.drop-indicator-bar[b-ey6hqgg3lt] {
    height: 4px;
    background: var(--primary-color);
    border-radius: 2px;
    margin: 4px 0;
    width: 100%;
    transition: background 0.2s;
}

.drop-indicator-arrow[b-ey6hqgg3lt] {
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.5px;
}

.drop-indicator[b-ey6hqgg3lt]::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.1) 0%, transparent 100%);
}

.drop-indicator[b-ey6hqgg3lt]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(0deg, rgba(0, 123, 255, 0.1) 0%, transparent 100%);
}

@keyframes pulse-b-ey6hqgg3lt {
    0%, 100% {
        opacity: 1;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.9;
        transform: scaleX(0.98);
    }
}

.selection-item-logo[b-ey6hqgg3lt] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
    padding: 4px;
    pointer-events: none;
}

.selection-item img[b-ey6hqgg3lt] {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 12px;
    border-radius: 4px;
    padding: 4px;
    pointer-events: none;
   
}

.selection-item-info[b-ey6hqgg3lt] {
    flex: 1;
    pointer-events: none;
}

.selection-item-content[b-ey6hqgg3lt] {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 75%;
  
}

.selection-item-status[b-ey6hqgg3lt] {
    display: flex;
    flex-direction: column;
    width: 50px;
    align-items: flex-end;
    margin-right: 0;
  
    
   
}

.match-badge[b-ey6hqgg3lt] {
    width: 12px;
    height: 12px;
    border-radius: 8px;
}


.selection-item-name[b-ey6hqgg3lt] {
    flex: 1;
    font-size: 12px;
    color: var(--text-color);
    white-space: nowrap; /* Prevents text from wrapping to a new line */
    overflow: hidden; /* Hides the content that goes outside */
    text-overflow: ellipsis; /* Adds '...' when text is cut off */
    min-width: 0; /* IMPORTANT: Allows flex item to shrink below content size */
    /* Pushes the button to the right */
   
}

.selection-item-remove[b-ey6hqgg3lt] {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    box-shadow: none;
}


.selection-item-controls[b-ey6hqgg3lt] {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 25px;
    background-color: none;
    display: none;
}


.selection-item:hover > .selection-item-controls[b-ey6hqgg3lt] {
    display: flex;
    flex-direction: column;
    justify-content: center;
   align-items: center;
}




/* /Components/SlidePreview.razor.rz.scp.css */
#pptCanvas[b-pwbvqnnba9] {
    background: white;
    position: relative;
    overflow: visible;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    

    /* Fixed dimensions set by JavaScript - never responsive */
    
}

.ppt-canvas[b-pwbvqnnba9] {
    position: relative;
    background: white;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    margin-left: auto;
    margin-right: auto;
    
}
/* /Components/SlidePreviewPanel.razor.rz.scp.css */
/* Left slide preview panel */
.slide-preview-panel[b-ujxmduob55],
.slide-preview-panel.active[b-ujxmduob55] {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    overflow: hidden;
    z-index: 1001;
    background-color: var(--surface-color);
    height: calc(100vh - 150px); /* Adjust height to account for top bar */
}



/* Make the sidebar a flex column */
.slide-preview-panel[b-ujxmduob55] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Prevents overflow issues */
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    overflow: hidden;
}

/* Header stays at the top, list fills the rest */
.slide-preview-header[b-ujxmduob55] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px;
}

.slide-header-title[b-ujxmduob55] {
    font-size: 14px;
    color: var(--text-color);
}

.slide-header-count[b-ujxmduob55] {
    font-size: 14px;
    color: var(--text-color) !important;
    margin-left: auto;
    text-align: right;
    padding-right: 24px;
    
}

.slide-preview-list[b-ujxmduob55] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0; /* Required for flex children to shrink properly */
    padding: 8px 0;
    /* Optional: add a background or border if desired */
}

/* LogoArchitect.Blazor.Client\wwwroot\css\app.css */
.slide-preview-item[b-ujxmduob55] {
    border: 0px solid var(--border-color);
    border-radius: 0px;
    margin-bottom: 0px;
    padding: 8px 8px 4px 8px;
    background: var(--surface-color);
    transition: background 0.2s;
    cursor: pointer;
}

.slide-preview-slide-title[b-ujxmduob55] {
    font-size: 12px;
    color: var(--text-color);
}

    .slide-preview-item:hover[b-ujxmduob55] {
        background: var(--toolbar-hover-color);
    }

    .slide-preview-item.active[b-ujxmduob55] {
        background: var(--bg-color-darker);
    }

.slide-preview-canvas[b-ujxmduob55] {
    width: 100%;
    max-height: 140px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.slide-preview-logos[b-ujxmduob55] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    padding: 4px;
    gap: 1px;
    box-sizing: border-box;
}

.slide-preview-logo[b-ujxmduob55] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    padding: 1px;
    /* Ensure grid cells maintain their size */
    min-height: 0;
    min-width: 0;
}

    .slide-preview-logo img[b-ujxmduob55] {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.slide-preview-empty[b-ujxmduob55] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 12px;
    font-style: italic;
}


#slideIndicatorTop[b-ujxmduob55] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
    margin-left: 12px;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-zw1z6h813s] {
    background: var(--bg-color);
}

.auth-message-container[b-zw1z6h813s] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
}

    .auth-message-container h1[b-zw1z6h813s] {
        font-size: 18px;
        color: var(--error-text-color);
    }

    .auth-message-container span[b-zw1z6h813s] {
        font-size: 12px;
        color: var(--text-color);
    }



.auth-message-container img[b-zw1z6h813s] {
    max-width: 50%;
}
/* /Layout/MainLayoutPowerPoint.razor.rz.scp.css */
.page[b-elx38tkyv1] {
    background: var(--foreground-color);
}

.auth-message-container[b-elx38tkyv1] {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
}

    .auth-message-container h1[b-elx38tkyv1] {
        font-size: 18px;
        color: var(--error-text-color);
    }

    .auth-message-container span[b-elx38tkyv1] {
        font-size: 12px;
        color: var(--text-color);
    }



    .auth-message-container img[b-elx38tkyv1] {
        max-width: 50%;
    }
/* /Layout/TopBar.razor.rz.scp.css */
.top-bar[b-9fjtv5ddfk] {
    display: flex;
    padding: 2px 0px;
    height: 30px;
    background-color: var(--surface-color);
    justify-content: left;
    align-items: center;
    gap: 0;
}

.top-bar btn i[b-9fjtv5ddfk] {
    font-size: 16px;
}
.menu-toggle[b-9fjtv5ddfk] {
    padding: 8px;
    cursor: pointer;
    position: relative;
}

.file-menu[b-9fjtv5ddfk] {
    position: absolute;
    top: 30px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    z-index: 1003;
    border: solid 1px var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--shadow-color);
    row-gap: 0px;
}

.file-menu a[b-9fjtv5ddfk] {
    text-decoration: none;
}

    .file-menu a:hover[b-9fjtv5ddfk] {
        color:inherit;
    }

    .file-menu a:visited[b-9fjtv5ddfk] {
        color: inherit;
    }

.filemenu-btn[b-9fjtv5ddfk] {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    padding: 8px 8px;
    border-radius: 8px;
}

.filemenu-btn:hover[b-9fjtv5ddfk] {
background-color: var(--toolbar-hover-color);
}

.file-menu i[b-9fjtv5ddfk] {
    font-size: 16px;
}

.file-menu label[b-9fjtv5ddfk] {
    color: var(--text-color);
    font-size: 11px;
    cursor: pointer;
}

.user-info[b-9fjtv5ddfk] {
    display: flex;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    justify-content: center;
    align-content: center;
    width: 80%;
    font-size: 11px;
    align-self: center;
    border-radius: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.project-filename-container[b-9fjtv5ddfk] {
    display: flex;
    justify-content: left;
    align-content: center;
}


.project-rename-mode[b-9fjtv5ddfk] {
    display: flex;
    height: auto;
    width: auto;
    background-color: var(--surface-color);
    border: none;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.project-name-input[b-9fjtv5ddfk] {
    all: unset;
    color: var(--text-color);
    font-size: 12px;
    background: var(--surface-color);
    padding: 6px 6px 6px 6px;
    border-radius: 0px;
    field-sizing: content;
    border-radius: 4px;
    min-width: 8px;
    border: 2px solid var(--primary-color);
    margin-right: 6px;
}

.project-name[b-9fjtv5ddfk] {
    display: flex;
    align-items: center;
    background-color: transparent;
    height: auto;
    text-align: left;
    justify-content: left;
    color: var(--text-color);
    font-size: 12px;
    padding: 6px 6px 6px 0;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid var(--surface-color);
}

    .project-name:hover[b-9fjtv5ddfk] {
        
        border: 2px solid var(--primary-color);
    }

.project-name i[b-9fjtv5ddfk] {
font-size: 16px;
margin-right: 4px;
}

.rename-btn[b-9fjtv5ddfk] {
    display: flex;
    background-color: none;
    width: 16px;
    height: 16px;
    padding: 2px;
    border-radius: 0px;
    align-content: center;
    cursor: pointer;
}

    .rename-btn i[b-9fjtv5ddfk] {
        font-size: 100%;
    }
/* /Layout/TopBarPowerPoint.razor.rz.scp.css */
.top-bar[b-g1ixm3vvfp] {
    display: flex;
    padding: 0px 0px;
    height: 30px;
}

.project-control[b-g1ixm3vvfp] {
    display: flex;
    width: 100%;
    align-items: center;
    height: 100%;
    gap: 2px;
    justify-content: right;
}

.project-control label[b-g1ixm3vvfp] {
    font-size: 12px;
    color: var(--text-color);
}

.project-filename-container[b-g1ixm3vvfp] {
    display: flex;
    justify-content: center;
    align-content: center;
}

.project-filename-pill[b-g1ixm3vvfp] {
    align-self: center;
    min-width: 100px;
    max-width: 320px;
    height: 16px;
    background-color: var(--surface-color);
    box-shadow: 0 2px 4px var(--border-color);
    text-align: center;
    border-radius: 28px;
    margin: 8px 0;
    padding: 4px 6px;
}

.project-selector[b-g1ixm3vvfp] {
    display: flex;
    align-items: center;
    min-width: 50px;
    background-color: transparent;
    height: 100%;
    text-align: center;
    justify-content: center;
}

.project-name[b-g1ixm3vvfp] {
    color: var(--text-color);
    font-size: 12px;
    text-align: center;
}

.project-name-edit[b-g1ixm3vvfp] {
    all: unset;
    color: var(--secondary-text-color);
    font-size: 12px;
    border: none !important;
}

.project-selector select[b-g1ixm3vvfp] {
    height: 100%;
    width: 100%;
    padding: 0 4px;
    border: 0px solid var(--border-secondary-color);
    background-color: transparent;
    font-size: 12px;
    color: var(--secondary-text-color);
    cursor: pointer;
    min-width: 120px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    
}

    .project-selector select:hover[b-g1ixm3vvfp] {
        background-color: var(--toolbar-secondary-hover-color);
        border: 0px solid var(--border-secondary-color);
    }

    .project-selector select:focus[b-g1ixm3vvfp] {
        outline: none;
    }

    .project-selector select option[b-g1ixm3vvfp] {
        padding: 8px;
        color: var(--text-color);
        background-color: var( --bg-color);
    }

.input-flex[b-g1ixm3vvfp] {
    display: flex;
    height: 16px;
    background-color: var(--surface-color) !important;
    border: none;
    border-radius: 0px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.rename-btn[b-g1ixm3vvfp] {
    display: flex;
    background-color: var(--surface-color) !important;
    width: 30px;
    height: 30px;
    padding: 2px;
    border-radius: 0px;
}

        .rename-btn i[b-g1ixm3vvfp] {
            font-size: 16px;
        }

.rename-btn[b-g1ixm3vvfp] {
    padding: 2px;
    background-color: var( --tertiary-color);
    height: 20px;
    border: solid 1px rgba(255,255,255,0.1);
    border-radius: 4px;
}


.project-control .btn[b-g1ixm3vvfp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    padding: 2px;
    border-radius: 0px;
}

.project-control .btn i[b-g1ixm3vvfp] {
    font-size: 16px;
}


.more-panel[b-g1ixm3vvfp] {
    position: absolute;
    top: 30px;
    right: 8px;
    width: 200px;
    height: auto;
    padding: 10px 0px;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    z-index: 1003;
    border: solid 1px rgba(255,255,255,0.1);
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--border-color);
}

.user-info[b-g1ixm3vvfp] {
    display: flex;
    padding: 4px 16px;
    background-color: var(--bg-color);
    justify-content: center;
    align-content: center;
    width: 80%;
    font-size: 11px;
    align-self: center;
    border-radius: 24px;
    margin-bottom: 10px;
}
/* /Pages/LogoArchitectAdvanced.razor.rz.scp.css */
.app-body[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbar-pane[b-tbg6dzm3yc] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: var(--toolbar-bg-color);
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
    gap: 8px;
}

.toolbar-btn[b-tbg6dzm3yc] {
    padding: 6px;
    border-radius: 6px;
}

    .toolbar-btn i[b-tbg6dzm3yc] {
        font-size: 16px;
    }

.work-pane[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    background-color: var(--bg-color);
}

.details-subpane[b-tbg6dzm3yc] {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
    background-color: var(--surface-color);
    border-left: 1px solid var(--border-color);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

    .details-subpane.withbrandbar[b-tbg6dzm3yc] {
        height: calc(100vh - 134px);
    }


.canvas-control[b-tbg6dzm3yc] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

.canvas-selector[b-tbg6dzm3yc] {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0px;
    border-radius: 8px;
    font-size: 12px;
    width: 125px;
    cursor: pointer;
    box-sizing:border-box;
}

.canvas-selector label[b-tbg6dzm3yc] {
    cursor: pointer;
}

.canvas-dropdown[b-tbg6dzm3yc] {
    position: relative;
}

.canvas-dropdown-toggle[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5px;
}

    .canvas-dropdown-toggle:hover[b-tbg6dzm3yc] {
        background-color: var(--toolbar-hover-color);
    }

.canvas-dropdown-menu[b-tbg6dzm3yc] {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 2px 4px var(--border-color);
    border: solid 1px var(--border-color);
    font-size: 12px;
    padding: 2px 0;
    z-index: 25000;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    width: 160px;
}

.canvas-dropdown-item[b-tbg6dzm3yc] {
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 4px;
    gap:12px
}


    .canvas-dropdown-item:hover[b-tbg6dzm3yc] {
        background-color: var(--toolbar-hover-color);
        border-radius: 4px;
    }

    .canvas-dropdown-item i[b-tbg6dzm3yc] {
        font-size: 14px;
    }


.tab-set[b-tbg6dzm3yc] {
    display: flex;
    margin-top: 8px;
    justify-content: left;
}

.tab[b-tbg6dzm3yc] {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-color);
    display: flex;
    gap: 6px;
    cursor: pointer;
}

.tab i[b-tbg6dzm3yc] {
    font-size: 14px;
}

.selected[b-tbg6dzm3yc] {
    background-color: var(--subpane-bg-color);
}

.tab-body[b-tbg6dzm3yc] {
    height: 100%;
    background-color: var(--subpane-bg-color);
    padding: 16px 8px;
    overflow-x: hidden;
}

.tab-tools[b-tbg6dzm3yc] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    row-gap: 20px;
}

.tab-tool-group[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: left;
    flex-wrap: nowrap;
}

    .tab-tool-group label[b-tbg6dzm3yc] {
        font-size: 11px;
        color: var(--text-color);
    }

.tab-tool[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

    .tab-tool i[b-tbg6dzm3yc] {
        font-size: 16px;
    }

    .tab-tool label[b-tbg6dzm3yc] {
        font-size: 11px;
        color: var(--text-color);
    }

    .tab-tool input[b-tbg6dzm3yc] {
        width: 40px;
        height: 25px;
        padding: 2px;
        font-size: 12px;
        border-radius: 4px;
        border: 1px solid var(--input-border-color);
    }

        .tab-tool input:focus[b-tbg6dzm3yc] {
            outline: 0px solid var(--border-focused-color);
            border-color: var(--border-focused-color);
        }

        .tab-tool input:disabled[b-tbg6dzm3yc] {
            background-color: var(--input-disabled-color);
        }

        .tab-tool-btn[b-tbg6dzm3yc] {
            padding: 4px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            cursor: pointer;
        }

            .tab-tool-btn:hover[b-tbg6dzm3yc] {
                background-color: var(--toolbar-hover-color);
            }

.range-container[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    justify-content: left;
}

    .range-container input[b-tbg6dzm3yc] {
        width: 75px;
    }

/* Base slider */
input[type=range].styled-slider[b-tbg6dzm3yc] {
    height: 24px;
    -webkit-appearance: none;
    background: none;
}

    /* Progress calculation */
    input[type=range].styled-slider.slider-progress[b-tbg6dzm3yc] {
        --range: calc(var(--max) - var(--min));
        --ratio: calc((var(--value) - var(--min)) / var(--range));
        --sx: calc(0.5 * 16px + var(--ratio) * (100% - 16px));
    }

    /* ----------------------------- */
    /* WEBKIT (Chrome, Edge, Safari) */
    /* ----------------------------- */

    input[type=range].styled-slider[b-tbg6dzm3yc]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 20px;
        border-radius: 1em;
        background: #0061C3;
        border: none;
        margin-top: calc(max((8px - 1px - 1px) * 0.5,0px) - 20px * 0.5);
    }

    input[type=range].styled-slider:disabled[b-tbg6dzm3yc]::-webkit-slider-thumb {
        background: #bfbfbf;
    }

    input[type=range].styled-slider[b-tbg6dzm3yc]::-webkit-slider-runnable-track {
        height: 8px;
        border: 1px solid #b2b2b2;
        border-radius: 0.5em;
        background: #EFEFEF;
    }

    input[type=range].styled-slider.slider-progress[b-tbg6dzm3yc]::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #59C3F9, #255BF6) 0/var(--sx) 100% no-repeat, #EFEFEF;
    }

    input[type=range].styled-slider:hover[b-tbg6dzm3yc]::-webkit-slider-runnable-track {
        background: #E5E5E5;
    }

    input[type=range].styled-slider.slider-progress:hover[b-tbg6dzm3yc]::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #59C3F9, #255BF6) 0/var(--sx) 100% no-repeat, #E5E5E5;
    }

    /* Disabled track */
    input[type=range].styled-slider:disabled[b-tbg6dzm3yc]::-webkit-slider-runnable-track {
        background: #EFEFEF !important;
        border-color: #d0d0d0;
    }

    /* ----------------------------- */
    /* FIREFOX                       */
    /* ----------------------------- */

    input[type=range].styled-slider[b-tbg6dzm3yc]::-moz-range-thumb {
        width: 16px;
        height: 20px;
        border-radius: 1em;
        background: #0061C3;
        border: none;
    }

    input[type=range].styled-slider:disabled[b-tbg6dzm3yc]::-moz-range-thumb {
        background: #bfbfbf;
    }

    input[type=range].styled-slider[b-tbg6dzm3yc]::-moz-range-track {
        height: 8px;
        border: 1px solid #b2b2b2;
        border-radius: 0.5em;
        background: #EFEFEF;
    }

    input[type=range].styled-slider.slider-progress[b-tbg6dzm3yc]::-moz-range-track {
        background: linear-gradient(to right, #59C3F9, #255BF6) 0/var(--sx) 100% no-repeat, #EFEFEF;
    }

    /* ----------------------------- */
    /* LEGACY MS (IE11)              */
    /* ----------------------------- */

    input[type=range].styled-slider[b-tbg6dzm3yc]::-ms-track {
        height: 8px;
        border-radius: 0.5em;
        background: #EFEFEF;
        border: 1px solid #b2b2b2;
        color: transparent;
    }

    input[type=range].styled-slider[b-tbg6dzm3yc]::-ms-thumb {
        width: 16px;
        height: 20px;
        border-radius: 1em;
        background: #0061C3;
        border: none;
    }

    input[type=range].styled-slider:disabled[b-tbg6dzm3yc]::-ms-thumb {
        background: #bfbfbf;
    }

    input[type=range].styled-slider.slider-progress[b-tbg6dzm3yc]::-ms-fill-lower {
        background: linear-gradient(to right, #59C3F9, #255BF6);
        border: 1px solid #b2b2b2;
        border-right-width: 0;
    }




.slide-container[b-tbg6dzm3yc] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.selection-panel-container[b-tbg6dzm3yc] {
    display: flex;
    max-width: 100%;
}

.main-content[b-tbg6dzm3yc] { /* <- Main Content Area Wrapper */
    height: 100%;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding-top: 150px; /* <- ADJUST THIS WHEN CHANGING PANEL HEIGHTSr */
}

.main-canvas-area[b-tbg6dzm3yc] {
    display: flex;
    justify-content: center; /* horizontal centering */
    align-content: center;
    height: calc(100vh - 150px); /* Adjust height to account for top bar */
    width: 100%;
    transition: margin-left 0.3s ease;
    background-color: var(--bg-color);
    overflow: hidden;
}

.work-area[b-tbg6dzm3yc] {
    display: flex;
}

    .work-area.with-selection-panel[b-tbg6dzm3yc] {
        padding-right: 300px;
    }

.canvas-shape[b-tbg6dzm3yc] {
    font-size: 10px;
}

@media (min-width: 1034px) { /* <- Larger Window Sizes */

    .app-body[b-tbg6dzm3yc] {
        gap: 0px;
    }

    .work-pane[b-tbg6dzm3yc] {
        flex-direction: row;
        gap: 6px;
    }

    .selection-panel-container[b-tbg6dzm3yc] {
        margin-left: auto;
        width: 250px;
    }

    .details-subpane[b-tbg6dzm3yc] {
        margin-left: auto;
        width: 250px;
    }
}

























/* Ribbon Style Toolbar Styles */

.ribbon-container[b-tbg6dzm3yc] { 
    position: fixed;
    top: 50px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 25px;
    width: 98%;
    height: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--toolbar-bg-color);
    border: var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 4px var(--border-color);
    padding: 2px 20px;
    z-index: 1002;
}

.family-container[b-tbg6dzm3yc] { 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}

.family-name[b-tbg6dzm3yc] { 
    width: 100%;
    text-align: center;
    font-size: 10px;
    height: 20px;
    overflow: hidden;
}

.family-set[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    height: 80px;
}

/* Ribbon toolbar tool layout types */

/* Button Type = Large */
.btn-lg[b-tbg6dzm3yc] { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 2px;
    width: 60px;
    height: 75px;
    align-items: center;
    padding-bottom: 5px;
}

    .btn-lg:hover[b-tbg6dzm3yc] {
        background-color: var(--toolbar-hover-color);
        border-radius: 12px;
    }

    .btn-lg:active[b-tbg6dzm3yc] {
        background-color: var(--toolbar-hover-color);
        border-radius: 12px;
    }

    .btn-lg .icn[b-tbg6dzm3yc] {
        display: block;
        margin: auto;
    }

    .btn-lg i[b-tbg6dzm3yc] {
        display: block;
        margin: auto;
        margin-bottom: 5px;
        font-size: 28px;
    }

    .btn-lg label[b-tbg6dzm3yc] {
        font-size: 11px;
        color: var(--text-color);
        text-align: center;
    }

.stacked[b-tbg6dzm3yc] { /* <- Used for stacking tools on top of each-other */
    display: flex;
    flex-direction: column;
    flex: 1;
    grid-column-gap: 0;
    justify-content: center;
    gap: 5px;
}

/* Button Type = Select */

.btn-select[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

    .btn-select i[b-tbg6dzm3yc] {
        font-size: 16px;
    }

    .btn-select label[b-tbg6dzm3yc] {
        font-size: 11px;
        color: var(--text-color);
        text-align: left;
        white-space: nowrap;
    }

    .btn-select select[b-tbg6dzm3yc] {
        min-width: 50px;
        height: 25px;
        padding: 2px;
        font-size: 12px ;
        border-radius: 4px;
        border: 1px solid var(--input-border-color);
    }

        .btn-select select:focus[b-tbg6dzm3yc] {
            outline: 0px solid var(--border-focused-color);
            border-color: var(--border-focused-color);
        }

        .btn-select select:disabled[b-tbg6dzm3yc] {
        
        }







.margin-14[b-tbg6dzm3yc] { /* <-- Used to space out certain stacked tools */
    margin-left: 7px;
    margin-right: 7px;
}

.min-width-35[b-tbg6dzm3yc] { /* <-- Used to align stacked input fields with varying text lenghts spanning up to 35px */
    min-width: 35px;
}

.min-width-20[b-tbg6dzm3yc] { /* <-- Used to align stacked input fields with varying text lenghts spanning up to 35px */
    min-width: 20px;
}

.width-35[b-tbg6dzm3yc] { /* <-- Used to shorten input fields where needed */
    width: 35px !important;
}

.color-swatch-container[b-tbg6dzm3yc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.color-swatch[b-tbg6dzm3yc] {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: inline-block;
}

.color-swatch-sm[b-tbg6dzm3yc] {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    display: inline-block;
}

.color-swatch-none-sm[b-tbg6dzm3yc] {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    display: inline-block;
    background-color: #fff;
    border: 1px dotted red;
}

.color-swatch-none[b-tbg6dzm3yc] {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: inline-block;
    background-color: #fff;
    border: 1px dotted red;
}

.btn-range[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .btn-range label[b-tbg6dzm3yc] {
        font-size: 11px;
        color: var(--text-color);
        min-width: 35px;
        text-align: left;
    }



.separator[b-tbg6dzm3yc] {
    width: 1px;
    background-color: #ccc; 
    height: 90%; 
    
}




.h-align-set[b-tbg6dzm3yc] {
    display: flex;
    gap: 5px;
}

.v-align-set[b-tbg6dzm3yc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Upload Modal Styles */

.upload-window-size[b-tbg6dzm3yc] {
    width: 350px;
}

.upload-content[b-tbg6dzm3yc] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.company-name-section[b-tbg6dzm3yc] {
    margin-bottom: 10px;
    padding: 5px;
    background: var(--surface-color);
    border: 0px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
}

    .company-name-section label[b-tbg6dzm3yc] {
        display: block;
        margin-bottom: 8px;
        color: var(--text-color);
        font-size: 12px;
        font-weight: 300;
    }

.company-name-input[b-tbg6dzm3yc] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

    .company-name-input:focus[b-tbg6dzm3yc] {
        outline: none !important;
    }

    .company-name-input.invalid[b-tbg6dzm3yc] {
        border-color: #dc3545;
    }

    .company-name-input.valid[b-tbg6dzm3yc] {
        border-color: #28a745;
    }

.input-hint[b-tbg6dzm3yc] {
    margin: 5px 0 0 0;
    font-size: 10px;
    color: var(--text-color);
    font-style: italic;
}

.upload-method-tabs[b-tbg6dzm3yc] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    
}

.tab-btn[b-tbg6dzm3yc] {
    background: none;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 0px solid transparent;
    transition: all 0.2s ease;
    border-radius: 4px;
    box-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tab-btn i[b-tbg6dzm3yc] {
    margin-right: 4px;
}

    .tab-btn:hover[b-tbg6dzm3yc] {
        background: var(--toolbar-hover-color);
        box-shadow: none;
    }

    .tab-btn.active[b-tbg6dzm3yc] {
        background: var(--toolbar-hover-color);
        box-shadow: none;
    }

.upload-method-section[b-tbg6dzm3yc] {
    min-height: 200px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.file-drop-area[b-tbg6dzm3yc] {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px 20px;
    text-align: center;
    background: var(--toolbar-hover-color);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

    .file-drop-area.drag-over[b-tbg6dzm3yc] {
        border-color: #007bff;
        background: #e3f2fd;
    }

    .file-drop-area.has-file[b-tbg6dzm3yc] {
        border-color: #28a745;
        background: #e8f5e8;
    }

.file-drop-area p[b-tbg6dzm3yc] {
    margin: 8px 0;
    color: var(--text-color);
    font-size: 12px;
}

.upload-progress[b-tbg6dzm3yc] {
    padding: 20px;
    text-align: center;
}

.upload-progress p[b-tbg6dzm3yc] {
    font-size: 12px;
    color: var(--text-color);
}

.progress-bar[b-tbg6dzm3yc] {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill[b-tbg6dzm3yc] {
    height: 100%;
    background: #007bff;
    width: 0%;
    transition: width 0.3s ease;
}


.url-input-area[b-tbg6dzm3yc] {
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 8px;
    background-color: var(--toolbar-hover-color);
    box-sizing: border-box;
}

    .url-input-area label[b-tbg6dzm3yc] {
        display: block;
        margin-bottom: 8px;
        font-weight: 300;
        color: var(--text-color);
        font-size: 12px;
    }

.url-input[b-tbg6dzm3yc] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s;
    margin-bottom: 5px;
    box-sizing: border-box;
}

    .url-input:focus[b-tbg6dzm3yc] {
        outline: none;
    }

    .url-input.valid[b-tbg6dzm3yc] {
        border-color: #28a745;
    }

    .url-input.invalid[b-tbg6dzm3yc] {
        border-color: #dc3545;
    }

.url-preview[b-tbg6dzm3yc] {
    margin-top: 15px;
    padding: 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

    .url-preview img[b-tbg6dzm3yc] {
        display: block;
        margin: 0 auto 10px auto;
    }

    .url-preview p[b-tbg6dzm3yc] {
        margin: 0;
        color: #666;
        font-size: 12px;
    }


/* /Pages/LogoArchitectSimple.razor.rz.scp.css */
.page-container[b-za2wf8nhy7] {
    background-color: var(--surface-color) !important;
}

.top-bar[b-za2wf8nhy7] {
    display: flex;
    justify-content: left;
    padding: 2px 0px;
    height: 30px;
    background-color: var(--foreground-color);
    
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
}

    .top-bar btn i[b-za2wf8nhy7] {
        font-size: 16px;
    }

.menu-toggle[b-za2wf8nhy7] {
    padding: 8px;
    cursor: pointer;
    position: relative;
}

.file-menu[b-za2wf8nhy7] {
    position: absolute;
    top: 30px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    z-index: 1003;
    border: solid 1px var(--border-color);
    border-radius: 4px;
    box-shadow: 0 2px 4px var(--shadow-color);
    row-gap: 0px;
}

    .file-menu a[b-za2wf8nhy7] {
        text-decoration: none;
    }

        .file-menu a:hover[b-za2wf8nhy7] {
            color: inherit;
        }

        .file-menu a:visited[b-za2wf8nhy7] {
            color: inherit;
        }

.filemenu-btn[b-za2wf8nhy7] {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    padding: 8px 8px;
    border-radius: 8px;
}

    .filemenu-btn:hover[b-za2wf8nhy7] {
        background-color: var(--toolbar-hover-color);
    }

.file-menu i[b-za2wf8nhy7] {
    font-size: 16px;
}

.file-menu label[b-za2wf8nhy7] {
    color: var(--text-color);
    font-size: 11px;
    cursor: pointer;
}

.user-info[b-za2wf8nhy7] {
    display: flex;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    justify-content: center;
    align-content: center;
    width: 80%;
    font-size: 11px;
    align-self: center;
    border-radius: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.architect-mode-container[b-za2wf8nhy7] {
    display: flex;
    padding: 0 12px;
    justify-content: right;
    margin-bottom: 48px;
}

.banner-container[b-za2wf8nhy7] {
    display: flex;
    justify-content: center;
    width: 100%;
  
}

.title[b-za2wf8nhy7] {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    color: var(--text-color);
    margin-bottom: 16px;
    letter-spacing: -2px;
    background: linear-gradient(to right, #1269C7, #5D3FD3);
    /* 2. Clip the background to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    /* 3. Make the actual text color transparent to show the background */
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* 4. Display inline-block to ensure background wraps text correctly */
    display: inline-block;
}



.sub-title[b-za2wf8nhy7] {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0px;
}

.search-glow[b-za2wf8nhy7] {
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 300px 3px rgba(71,71,71,1);
    -moz-box-shadow: 0px 0px 300px 3px rgba(71,71,71,1);
    box-shadow: 0px 0px 300px 3px rgba(71,71,71,1);
}

.search-container[b-za2wf8nhy7] {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 100px;
}

.made-by[b-za2wf8nhy7] {
    display: flex;
    justify-content: center;
    gap: 8px;
    align-items: center;
}

.made-by span[b-za2wf8nhy7] {
    font-size: 12px;
}

.made-by i[b-za2wf8nhy7] {
    font-size: 12px;
}

.made-by a[b-za2wf8nhy7] {
    text-decoration: none;
    color: var(--text-color);

}
    .made-by a:hover[b-za2wf8nhy7] {
        text-decoration: underline;
        
    }

    .made-by a:visited[b-za2wf8nhy7] {
       
        color: var(--text-color);
    }
/* /Pages/VaultPlusAdvanced.razor.rz.scp.css */
.app-body[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.toolbar-pane[b-n9eqfbxjn1] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: var(--toolbar-bg-color);
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
    gap: 8px;
}

.toolbar-btn[b-n9eqfbxjn1] {
    padding: 6px;
    border-radius: 6px;
}

    .toolbar-btn i[b-n9eqfbxjn1] {
        font-size: 16px;
    }

.work-pane[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 8px;
    background-color: var(--bg-color);
}

.details-subpane[b-n9eqfbxjn1] {
    position: relative;
    width: 100%;
    height: calc(100vh - 84px);
    background-color: var(--surface-color);
    border-left: 1px solid var(--border-color);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

    .details-subpane.withbrandbar[b-n9eqfbxjn1] {
        height: calc(100vh - 134px);
    }


.canvas-control[b-n9eqfbxjn1] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
}

.canvas-selector[b-n9eqfbxjn1] {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 0px;
    border-radius: 8px;
    font-size: 12px;
    width: 125px;
    cursor: pointer;
    box-sizing:border-box;
}

.canvas-selector label[b-n9eqfbxjn1] {
    cursor: pointer;
}

.canvas-dropdown[b-n9eqfbxjn1] {
    position: relative;
}

.canvas-dropdown-toggle[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 5px;
}

    .canvas-dropdown-toggle:hover[b-n9eqfbxjn1] {
        background-color: var(--toolbar-hover-color);
    }

.canvas-dropdown-menu[b-n9eqfbxjn1] {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    background: var(--surface-color);
    box-shadow: 0 2px 4px var(--border-color);
    border: solid 1px var(--border-color);
    font-size: 12px;
    padding: 2px 0;
    z-index: 25000;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    width: 160px;
}

.canvas-dropdown-item[b-n9eqfbxjn1] {
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: left;
    border-radius: 4px;
    gap:12px
}


    .canvas-dropdown-item:hover[b-n9eqfbxjn1] {
        background-color: var(--toolbar-hover-color);
        border-radius: 4px;
    }

    .canvas-dropdown-item i[b-n9eqfbxjn1] {
        font-size: 14px;
    }


.tab-set[b-n9eqfbxjn1] {
    display: flex;
    margin-top: 8px;
    justify-content: left;
}

.tab[b-n9eqfbxjn1] {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--text-color);
    display: flex;
    gap: 6px;
    cursor: pointer;
}

.tab i[b-n9eqfbxjn1] {
    font-size: 14px;
}

.selected[b-n9eqfbxjn1] {
    background-color: var(--subpane-bg-color);
}

.tab-body[b-n9eqfbxjn1] {
    height: 100%;
    background-color: var(--subpane-bg-color);
    padding: 16px 8px;
    overflow-x: hidden;
}

.tab-tools[b-n9eqfbxjn1] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    row-gap: 20px;
}

.tab-tool-group[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: left;
    flex-wrap: nowrap;
}

    .tab-tool-group label[b-n9eqfbxjn1] {
        font-size: 11px;
        color: var(--text-color);
    }

.tab-tool[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

    .tab-tool i[b-n9eqfbxjn1] {
        font-size: 16px;
    }

    .tab-tool label[b-n9eqfbxjn1] {
        font-size: 11px;
        color: var(--text-color);
    }

    .tab-tool input[b-n9eqfbxjn1] {
        width: 40px;
        height: 25px;
        padding: 2px;
        font-size: 12px;
        border-radius: 4px;
        border: 1px solid var(--input-border-color);
    }

        .tab-tool input:focus[b-n9eqfbxjn1] {
            outline: 0px solid var(--border-focused-color);
            border-color: var(--border-focused-color);
        }

        .tab-tool input:disabled[b-n9eqfbxjn1] {
            background-color: var(--input-disabled-color);
        }

        .tab-tool-btn[b-n9eqfbxjn1] {
            padding: 4px;
            border-radius: 4px;
            border: 1px solid var(--border-color);
            cursor: pointer;
        }

            .tab-tool-btn:hover[b-n9eqfbxjn1] {
                background-color: var(--toolbar-hover-color);
            }

.range-container[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    justify-content: left;
}

    .range-container input[b-n9eqfbxjn1] {
        width: 75px;
    }

/* Base slider */
input[type=range].styled-slider[b-n9eqfbxjn1] {
    height: 24px;
    -webkit-appearance: none;
    background: none;
}

    /* Progress calculation */
    input[type=range].styled-slider.slider-progress[b-n9eqfbxjn1] {
        --range: calc(var(--max) - var(--min));
        --ratio: calc((var(--value) - var(--min)) / var(--range));
        --sx: calc(0.5 * 16px + var(--ratio) * (100% - 16px));
    }

    /* ----------------------------- */
    /* WEBKIT (Chrome, Edge, Safari) */
    /* ----------------------------- */

    input[type=range].styled-slider[b-n9eqfbxjn1]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 16px;
        height: 20px;
        border-radius: 1em;
        background: #0061C3;
        border: none;
        margin-top: calc(max((8px - 1px - 1px) * 0.5,0px) - 20px * 0.5);
    }

    input[type=range].styled-slider:disabled[b-n9eqfbxjn1]::-webkit-slider-thumb {
        background: #bfbfbf;
    }

    input[type=range].styled-slider[b-n9eqfbxjn1]::-webkit-slider-runnable-track {
        height: 8px;
        border: 1px solid #b2b2b2;
        border-radius: 0.5em;
        background: #EFEFEF;
    }

    input[type=range].styled-slider.slider-progress[b-n9eqfbxjn1]::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #59C3F9, #255BF6) 0/var(--sx) 100% no-repeat, #EFEFEF;
    }

    input[type=range].styled-slider:hover[b-n9eqfbxjn1]::-webkit-slider-runnable-track {
        background: #E5E5E5;
    }

    input[type=range].styled-slider.slider-progress:hover[b-n9eqfbxjn1]::-webkit-slider-runnable-track {
        background: linear-gradient(to right, #59C3F9, #255BF6) 0/var(--sx) 100% no-repeat, #E5E5E5;
    }

    /* Disabled track */
    input[type=range].styled-slider:disabled[b-n9eqfbxjn1]::-webkit-slider-runnable-track {
        background: #EFEFEF !important;
        border-color: #d0d0d0;
    }

    /* ----------------------------- */
    /* FIREFOX                       */
    /* ----------------------------- */

    input[type=range].styled-slider[b-n9eqfbxjn1]::-moz-range-thumb {
        width: 16px;
        height: 20px;
        border-radius: 1em;
        background: #0061C3;
        border: none;
    }

    input[type=range].styled-slider:disabled[b-n9eqfbxjn1]::-moz-range-thumb {
        background: #bfbfbf;
    }

    input[type=range].styled-slider[b-n9eqfbxjn1]::-moz-range-track {
        height: 8px;
        border: 1px solid #b2b2b2;
        border-radius: 0.5em;
        background: #EFEFEF;
    }

    input[type=range].styled-slider.slider-progress[b-n9eqfbxjn1]::-moz-range-track {
        background: linear-gradient(to right, #59C3F9, #255BF6) 0/var(--sx) 100% no-repeat, #EFEFEF;
    }

    /* ----------------------------- */
    /* LEGACY MS (IE11)              */
    /* ----------------------------- */

    input[type=range].styled-slider[b-n9eqfbxjn1]::-ms-track {
        height: 8px;
        border-radius: 0.5em;
        background: #EFEFEF;
        border: 1px solid #b2b2b2;
        color: transparent;
    }

    input[type=range].styled-slider[b-n9eqfbxjn1]::-ms-thumb {
        width: 16px;
        height: 20px;
        border-radius: 1em;
        background: #0061C3;
        border: none;
    }

    input[type=range].styled-slider:disabled[b-n9eqfbxjn1]::-ms-thumb {
        background: #bfbfbf;
    }

    input[type=range].styled-slider.slider-progress[b-n9eqfbxjn1]::-ms-fill-lower {
        background: linear-gradient(to right, #59C3F9, #255BF6);
        border: 1px solid #b2b2b2;
        border-right-width: 0;
    }




.slide-container[b-n9eqfbxjn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.selection-panel-container[b-n9eqfbxjn1] {
    display: flex;
    max-width: 100%;
}

.main-content[b-n9eqfbxjn1] { /* <- Main Content Area Wrapper */
    height: 100%;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    padding-top: 150px; /* <- ADJUST THIS WHEN CHANGING PANEL HEIGHTSr */
}

.main-canvas-area[b-n9eqfbxjn1] {
    display: flex;
    justify-content: center; /* horizontal centering */
    align-content: center;
    height: calc(100vh - 150px); /* Adjust height to account for top bar */
    width: 100%;
    transition: margin-left 0.3s ease;
    background-color: var(--bg-color);
    overflow: hidden;
}

.work-area[b-n9eqfbxjn1] {
    display: flex;
}

    .work-area.with-selection-panel[b-n9eqfbxjn1] {
        padding-right: 300px;
    }

.canvas-shape[b-n9eqfbxjn1] {
    font-size: 10px;
}

@media (min-width: 1034px) { /* <- Larger Window Sizes */

    .app-body[b-n9eqfbxjn1] {
        gap: 0px;
    }

    .work-pane[b-n9eqfbxjn1] {
        flex-direction: row;
        gap: 6px;
    }

    .selection-panel-container[b-n9eqfbxjn1] {
        margin-left: auto;
        width: 250px;
    }

    .details-subpane[b-n9eqfbxjn1] {
        margin-left: auto;
        width: 250px;
    }
}

























/* Ribbon Style Toolbar Styles */

.ribbon-container[b-n9eqfbxjn1] { 
    position: fixed;
    top: 50px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 25px;
    width: 98%;
    height: 100px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--toolbar-bg-color);
    border: var(--border-color);
    border-radius: 6px;
    box-shadow: 0 2px 4px var(--border-color);
    padding: 2px 20px;
    z-index: 1002;
}

.family-container[b-n9eqfbxjn1] { 
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: flex-end;
}

.family-name[b-n9eqfbxjn1] { 
    width: 100%;
    text-align: center;
    font-size: 10px;
    height: 20px;
    overflow: hidden;
}

.family-set[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: row;
    gap: 4px;
    height: 80px;
}

/* Ribbon toolbar tool layout types */

/* Button Type = Large */
.btn-lg[b-n9eqfbxjn1] { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
    padding: 2px;
    width: 60px;
    height: 75px;
    align-items: center;
    padding-bottom: 5px;
}

    .btn-lg:hover[b-n9eqfbxjn1] {
        background-color: var(--toolbar-hover-color);
        border-radius: 12px;
    }

    .btn-lg:active[b-n9eqfbxjn1] {
        background-color: var(--toolbar-hover-color);
        border-radius: 12px;
    }

    .btn-lg .icn[b-n9eqfbxjn1] {
        display: block;
        margin: auto;
    }

    .btn-lg i[b-n9eqfbxjn1] {
        display: block;
        margin: auto;
        margin-bottom: 5px;
        font-size: 28px;
    }

    .btn-lg label[b-n9eqfbxjn1] {
        font-size: 11px;
        color: var(--text-color);
        text-align: center;
    }

.stacked[b-n9eqfbxjn1] { /* <- Used for stacking tools on top of each-other */
    display: flex;
    flex-direction: column;
    flex: 1;
    grid-column-gap: 0;
    justify-content: center;
    gap: 5px;
}

/* Button Type = Select */

.btn-select[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
}

    .btn-select i[b-n9eqfbxjn1] {
        font-size: 16px;
    }

    .btn-select label[b-n9eqfbxjn1] {
        font-size: 11px;
        color: var(--text-color);
        text-align: left;
        white-space: nowrap;
    }

    .btn-select select[b-n9eqfbxjn1] {
        min-width: 50px;
        height: 25px;
        padding: 2px;
        font-size: 12px ;
        border-radius: 4px;
        border: 1px solid var(--input-border-color);
    }

        .btn-select select:focus[b-n9eqfbxjn1] {
            outline: 0px solid var(--border-focused-color);
            border-color: var(--border-focused-color);
        }

        .btn-select select:disabled[b-n9eqfbxjn1] {
        
        }







.margin-14[b-n9eqfbxjn1] { /* <-- Used to space out certain stacked tools */
    margin-left: 7px;
    margin-right: 7px;
}

.min-width-35[b-n9eqfbxjn1] { /* <-- Used to align stacked input fields with varying text lenghts spanning up to 35px */
    min-width: 35px;
}

.min-width-20[b-n9eqfbxjn1] { /* <-- Used to align stacked input fields with varying text lenghts spanning up to 35px */
    min-width: 20px;
}

.width-35[b-n9eqfbxjn1] { /* <-- Used to shorten input fields where needed */
    width: 35px !important;
}

.color-swatch-container[b-n9eqfbxjn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.color-swatch[b-n9eqfbxjn1] {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: inline-block;
}

.color-swatch-sm[b-n9eqfbxjn1] {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    display: inline-block;
}

.color-swatch-none-sm[b-n9eqfbxjn1] {
    width: 16px;
    height: 16px;
    border-radius: 50px;
    display: inline-block;
    background-color: #fff;
    border: 1px dotted red;
}

.color-swatch-none[b-n9eqfbxjn1] {
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: inline-block;
    background-color: #fff;
    border: 1px dotted red;
}

.btn-range[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .btn-range label[b-n9eqfbxjn1] {
        font-size: 11px;
        color: var(--text-color);
        min-width: 35px;
        text-align: left;
    }



.separator[b-n9eqfbxjn1] {
    width: 1px;
    background-color: #ccc; 
    height: 90%; 
    
}




.h-align-set[b-n9eqfbxjn1] {
    display: flex;
    gap: 5px;
}

.v-align-set[b-n9eqfbxjn1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Upload Modal Styles */

.upload-window-size[b-n9eqfbxjn1] {
    width: 350px;
}

.upload-content[b-n9eqfbxjn1] {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.company-name-section[b-n9eqfbxjn1] {
    margin-bottom: 10px;
    padding: 5px;
    background: var(--surface-color);
    border: 0px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
}

    .company-name-section label[b-n9eqfbxjn1] {
        display: block;
        margin-bottom: 8px;
        color: var(--text-color);
        font-size: 12px;
        font-weight: 300;
    }

.company-name-input[b-n9eqfbxjn1] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

    .company-name-input:focus[b-n9eqfbxjn1] {
        outline: none !important;
    }

    .company-name-input.invalid[b-n9eqfbxjn1] {
        border-color: #dc3545;
    }

    .company-name-input.valid[b-n9eqfbxjn1] {
        border-color: #28a745;
    }

.input-hint[b-n9eqfbxjn1] {
    margin: 5px 0 0 0;
    font-size: 10px;
    color: var(--text-color);
    font-style: italic;
}

.upload-method-tabs[b-n9eqfbxjn1] {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    
}

.tab-btn[b-n9eqfbxjn1] {
    background: none;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 0px solid transparent;
    transition: all 0.2s ease;
    border-radius: 4px;
    box-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.tab-btn i[b-n9eqfbxjn1] {
    margin-right: 4px;
}

    .tab-btn:hover[b-n9eqfbxjn1] {
        background: var(--toolbar-hover-color);
        box-shadow: none;
    }

    .tab-btn.active[b-n9eqfbxjn1] {
        background: var(--toolbar-hover-color);
        box-shadow: none;
    }

.upload-method-section[b-n9eqfbxjn1] {
    min-height: 200px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.file-drop-area[b-n9eqfbxjn1] {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px 20px;
    text-align: center;
    background: var(--toolbar-hover-color);
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

    .file-drop-area.drag-over[b-n9eqfbxjn1] {
        border-color: #007bff;
        background: #e3f2fd;
    }

    .file-drop-area.has-file[b-n9eqfbxjn1] {
        border-color: #28a745;
        background: #e8f5e8;
    }

.file-drop-area p[b-n9eqfbxjn1] {
    margin: 8px 0;
    color: var(--text-color);
    font-size: 12px;
}

.upload-progress[b-n9eqfbxjn1] {
    padding: 20px;
    text-align: center;
}

.upload-progress p[b-n9eqfbxjn1] {
    font-size: 12px;
    color: var(--text-color);
}

.progress-bar[b-n9eqfbxjn1] {
    width: 100%;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-fill[b-n9eqfbxjn1] {
    height: 100%;
    background: #007bff;
    width: 0%;
    transition: width 0.3s ease;
}


.url-input-area[b-n9eqfbxjn1] {
    padding: 20px;
    border: 0px solid #ddd;
    border-radius: 8px;
    background-color: var(--toolbar-hover-color);
    box-sizing: border-box;
}

    .url-input-area label[b-n9eqfbxjn1] {
        display: block;
        margin-bottom: 8px;
        font-weight: 300;
        color: var(--text-color);
        font-size: 12px;
    }

.url-input[b-n9eqfbxjn1] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 12px;
    transition: border-color 0.2s;
    margin-bottom: 5px;
    box-sizing: border-box;
}

    .url-input:focus[b-n9eqfbxjn1] {
        outline: none;
    }

    .url-input.valid[b-n9eqfbxjn1] {
        border-color: #28a745;
    }

    .url-input.invalid[b-n9eqfbxjn1] {
        border-color: #dc3545;
    }

.url-preview[b-n9eqfbxjn1] {
    margin-top: 15px;
    padding: 15px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
}

    .url-preview img[b-n9eqfbxjn1] {
        display: block;
        margin: 0 auto 10px auto;
    }

    .url-preview p[b-n9eqfbxjn1] {
        margin: 0;
        color: #666;
        font-size: 12px;
    }


/* /Pages/VaultPlusSimple.razor.rz.scp.css */
.ppt-page-wrapper[b-zpec6lfut3] {
    box-sizing: border-box;
    padding:16px;
    overflow: hidden;
}

.ppt-top-bar[b-zpec6lfut3] {

}

.ppt-single-search-toolbar[b-zpec6lfut3] {
    display: flex;
    justify-content: right;
    
}

.architect-mode-btn[b-zpec6lfut3] {
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    margin: 8px 0;
    padding: 8px;
    border-radius: 8px;
    border: none;
    box-shadow: 0 4px 16px rgba(0,32,128,0.13), 0 1.5px 6px rgba(0,0,0,0.08);
    font-size: 12px;
}

.ppt-single-search-container[b-zpec6lfut3] {
 
    position: relative;
    box-sizing: border-box;
}

.recent-items-container[b-zpec6lfut3] {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
    overflow-y: auto;
}

.recent-item-container[b-zpec6lfut3] {
    background-color: var(--bg-color-darker);
    display: flex;
    justify-content: center;
    width: 25%;
    cursor: pointer;
    /* Add this for a smooth animation */
    transition: transform 0.3s ease;
    border-radius: 8px;
}

    .recent-item-container:hover[b-zpec6lfut3] {
        background-color: var(--bg-color-more-darker);
        /* 1.05 makes it 5% larger; 1.1 makes it 10% larger */
        transform: scale(1.05);
    }


@media (min-width: 520px) {
    /* Styles for 428px to 527px */
    .recent-item-container[b-zpec6lfut3] {
        width: 20%;
    }
}

@media (min-width: 620px) {
    /* Styles for 428px to 527px */
    .recent-item-container[b-zpec6lfut3] {
        width: 16.66%;
    }
}

@media (min-width: 820px) {
    /* Styles for 428px to 527px */
    .recent-item-container[b-zpec6lfut3] {
        width: 12.5%;
    }


}

@media (min-width: 920px) {
    /* Styles for 428px to 527px */
    .recent-item-container[b-zpec6lfut3] {
        width: 10%;
    }
}



            .recent-item-container img[b-zpec6lfut3] {
                width: 100%;
                height: auto;
                object-fit: contain;
            }
/* /Popups/BasePopup.razor.rz.scp.css */
/* Modal styles */

.modal-overlay[b-tz0flndbdy] {
    display: flex;
    position: fixed;
    z-index: 30000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--modal-overlay-color);
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

[b-tz0flndbdy] .modal-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--surface-color);
    border-radius: 8px;
    animation: modal-slide-in-b-tz0flndbdy 0.2s ease-out forwards;
}

    .modal-container:focus[b-tz0flndbdy] {
        outline: none;
    }

/* Specific width overrides for different modal types */
[b-tz0flndbdy] .modal-bulk-add {
    max-width: 600px;
    height: auto; /* uses modal specific width defined in scoped css for modals */
}

[b-tz0flndbdy] .modal-save-project {
    max-width: 300px;
    height: auto;
}

[b-tz0flndbdy] .modal-open-project {
    max-width: 300px;
    height: auto;
}

[b-tz0flndbdy] .modal-unsaved-changes {
    max-width: 250px;
    height: auto;
}

[b-tz0flndbdy] .modal-slide-size {
    max-width: 250px;
    height: auto;
}

[b-tz0flndbdy] .modal-whats-new {
    max-width: 600px;
    height: auto;
}

[b-tz0flndbdy] .modal-upload {
    max-width: 300px;
    height: auto;
}

[b-tz0flndbdy] .modal-loading-project {
    max-width: 250px;
    height: auto;
}

[b-tz0flndbdy] .modal-bulk-inserting {
    max-width: 250px;
    height: auto;
}

[b-tz0flndbdy] .modal-bulk-add-variant {
    max-width: 275px;
    height: auto;
}

[b-tz0flndbdy] .modal-message { /* All Generic Modal Messages */
    max-width: 250px;
    height: auto;
}


@keyframes modal-slide-in-b-tz0flndbdy {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header[b-tz0flndbdy] {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 2px 8px;
    background-color: var(--primary-color);
    gap: 10px;
    height: 30px;
    box-sizing: border-box;
}

    .modal-title[b-tz0flndbdy] {
        margin: 0;
        font-size: 12px !important;
        font-weight: 300;
        color: var(--primary-text-color);
    }

.modal-close[b-tz0flndbdy] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
    margin-left: auto;
    cursor: pointer;
}

    .modal-close i[b-tz0flndbdy] {
        font-size: 12px;
        color: var(--surface-color);
    }

.modal-body[b-tz0flndbdy] {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
    height: auto;
    background: var(--foreground-color);
}


.modal-footing[b-tz0flndbdy] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    padding: 16px;
    height: 64px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--foreground-color);
}
/* /Popups/BulkAddPopup.razor.rz.scp.css */
.bulk-add-content[b-5xr1c3z31f] {
    display: flex;
    flex-direction: column;
    height: 350px;
}

.bulk-add-input-section[b-5xr1c3z31f], .bulk-add-results-section[b-5xr1c3z31f] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

    .bulk-add-results-section h2[b-5xr1c3z31f], .bulk-add-input-section h2[b-5xr1c3z31f] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
        font-weight: 600;
    }

    .bulk-add-results-section span[b-5xr1c3z31f], .bulk-add-input-section span[b-5xr1c3z31f] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
    }

    .bulk-add-input-section textarea[b-5xr1c3z31f] {
        padding: 12px 12px;
        border: 2px solid var(--border-color);
        border-radius: 8px;
        font-family: inherit;
        font-size: 12px;
        resize: none;
        height: 100%;
        color: var(--text-color);
        transition: all 0.2s ease;
        
    }

        .bulk-add-input-section textarea:focus[b-5xr1c3z31f] {
            outline: none;
            border-color: var(--border-color);
            
        }

        .bulk-add-input-section textarea[b-5xr1c3z31f]::placeholder {
            color: #9ca3af;
        }

.error-message[b-5xr1c3z31f] {
    font-size: 11px;
    color: var(--error-text-color) !important;
}

.loading-brands[b-5xr1c3z31f] {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-content: center;
    gap: 12px;
    color: var(--text-color);
    font-size: 16px;
}

.loading-brands .icon[b-5xr1c3z31f] {
    font-size: 16px;
}

.bulk-add-results-list[b-5xr1c3z31f] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px;
    background: var(--surface-color);
    margin-bottom: 8px;
    min-height: 80px;
    max-height: none;
    height: 100%;
    box-sizing: border-box;
}

.bulk-add-item-controls[b-5xr1c3z31f] {
    display: flex;
    gap: 6px;
}

.bulk-add-logo-section[b-5xr1c3z31f] {
    display: flex;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 5px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 16px;
    margin-bottom: 2px;
    box-sizing: border-box;
    margin-bottom: 32px;
}

    /* If only one preview, stretch to left and hide scrollbar */
    .bulk-add-logo-section.single-item[b-5xr1c3z31f] {
        overflow-x: hidden;
        justify-content: flex-start;
    }



    /* Remove .single-item special case so all logo sections scroll horizontally if needed */

    .bulk-add-logo-section[b-5xr1c3z31f]::-webkit-scrollbar {
        height: 6px;
    }

    .bulk-add-logo-section[b-5xr1c3z31f]::-webkit-scrollbar-track {
        background: var(--bg-color);
        border-radius: 3px;
    }

    .bulk-add-logo-section[b-5xr1c3z31f]::-webkit-scrollbar-thumb {
        background: var(--bg-color-darker);
        border-radius: 3px;
    }

        .bulk-add-logo-section[b-5xr1c3z31f]::-webkit-scrollbar-thumb:hover {
            background: var(--bg-color-darkest);
        }


.bulk-add-logo-preview[b-5xr1c3z31f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 6px 6px 6px;
    background: var(--bg-color-darker);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 64px;
    max-width: 90px;
    flex-shrink: 0;
    position: relative;
    gap: 8px;
}

    .bulk-add-logo-preview:not(.disabled):hover[b-5xr1c3z31f] {
        background: var(--bg-color-more-darker);
        border: 1px solid var(--border-color);
        
    }

    .bulk-add-logo-preview.selected[b-5xr1c3z31f] {
        background: var(--bg-color-darker);
        border-color: var(--primary-color);
        box-shadow: 0 2px 8px rgba(0, 122, 204, 0.2);
    }

        .bulk-add-logo-preview.selected[b-5xr1c3z31f]::after {
            content: '✓';
            position: absolute;
            top: -10px;
            right: -10px;
            background: var(--primary-color);
            color: var(--primary-text-color);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: bold;
            border: 2.5px solid var(--primary-text-color);
            z-index: 200;
        }

    .bulk-add-logo-preview.disabled[b-5xr1c3z31f] {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--disabled-color);
    }

    .bulk-add-logo-preview img[b-5xr1c3z31f] {
        width: 64px;
        height: 64px;
        object-fit: contain;
       
    }

.input-result-label[b-5xr1c3z31f] {
    font-size: 12px;
}

.clear-selections-label[b-5xr1c3z31f] {
    font-size: 12px;
    cursor: pointer;
}

    .clear-selections-label:hover[b-5xr1c3z31f] {
        text-decoration: underline;
    }

.brand-name[b-5xr1c3z31f] {
    font-size: 10px;
    width: 100px;
    height: 30px;
    overflow: hidden;
    padding: 2px;
    box-sizing: border-box;
    color: var(--text-color);
    flex: 1;
    white-space: nowrap; /* Prevents text from wrapping to a new line */
    overflow: hidden; /* Hides the content that goes outside */
    text-overflow: ellipsis; /* Adds '...' when text is cut off */
    min-width: 0; /* IMPORTANT: Allows flex item to shrink below content size */
}

.variant-format[b-5xr1c3z31f] {
    font-size: 11px;
    padding: 4px 12px;
    background-color: var(--primary-color);
    color: var(--primary-text-color);
    border-radius: 12px;
}

.variant-results-back[b-5xr1c3z31f] {
    margin: 8px 0;
    font-size: 12px;
}

    .variant-results-back:hover[b-5xr1c3z31f] {
        text-decoration: underline;
        cursor: pointer;
    }

.variant-results[b-5xr1c3z31f] {
    width: 99%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.variant-item[b-5xr1c3z31f] {
    display: flex;
    height: 25px;
    padding: 16px;
    background: var(--bg-color-darker);
    background: linear-gradient(132deg, rgba(232, 234, 237, 1) 100%, rgba(206, 211, 215, 1) 0%);
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
}

    .variant-item:hover[b-5xr1c3z31f] {
        background-color: white;
    }

    .variant-item img[b-5xr1c3z31f] {
        width: 75px;
        height: 40px;
        object-fit: contain;
    }

    .variant-item div[b-5xr1c3z31f] {
        width: 35px;
        padding: 6px;
        border-radius: 25px;
        background-color: #FFD782;
        font-size: 11px;
        text-align: center;
        margin-left: auto;
        text-transform: uppercase;
    }

.loading-content[b-5xr1c3z31f] {
    display: flex;
    justify-content: center;
    margin: 32px;
    gap: 12px;
}

.match-badge[b-5xr1c3z31f] {
    width: 30px;
    height: 10px;
    border-radius: 8px;
}
/* /Popups/BulkInsertingPopup.razor.rz.scp.css */
.bulk-inserting-content[b-9sqyske3zz] {
    display: flex;
    height: auto;
    gap: 12px;
    flex-direction: column;
    justify-content: center;
}

    .bulk-inserting-content h2[b-9sqyske3zz] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
    }

    .bulk-inserting-content span[b-9sqyske3zz] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 11px;
    }

    .loading-message[b-9sqyske3zz] {
        display: flex;
        gap: 8px;
        justify-content: left;
        align-content: center;
    }
/* /Popups/DeleteCanvasPopup.razor.rz.scp.css */
.delete-canvas-content[b-amyaxsr0vv] {
    display: flex;
    flex-direction: column;
    height: 35px;
}

    .delete-canvas-content h2[b-amyaxsr0vv] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
    }
/* /Popups/LoadingProjectPopup.razor.rz.scp.css */
.load-project-content[b-c24uerh74k] {
    display: flex;
    height: auto;
    gap: 12px;
    flex-direction: column;
    justify-content: center;

}

    .load-project-content h2[b-c24uerh74k] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
    }

    .load-project-content span[b-c24uerh74k] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 11px;
    }

    .loading-message[b-c24uerh74k] {
        display: flex;
        gap: 8px;
        justify-content: left;
        align-content: center;
    }
/* /Popups/MessagePopup.razor.rz.scp.css */
.message-content[b-73a2qm3pno] {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 10px;
}

.message-content span[b-73a2qm3pno] {
font-size: 12px;
}
/* /Popups/ProjectManagerPopup.razor.rz.scp.css */
.open-project-content[b-evri9nyllm] {
    display: flex;
    flex-direction: column;
    height: 350px;
    gap: 10px;
}

.empty-state[b-evri9nyllm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    gap: 12px;
}

.open-project-content img[b-evri9nyllm] {
    width: 150px;
    margin: auto;
}

.open-project-content h2[b-evri9nyllm] {
    margin: 0 0 8px 0;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 600;
    margin: auto;
}

.project-list-container[b-evri9nyllm] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    overflow: auto;
    background: var(--foreground-color);
    /* Ensure smooth scrolling and visible scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5;
    gap: 0px;
}

    .project-list-container[b-evri9nyllm]::-webkit-scrollbar {
        width: 6px;
    }

    .project-list-container[b-evri9nyllm]::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 3px;
    }

    .project-list-container[b-evri9nyllm]::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }

        .project-list-container[b-evri9nyllm]::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

    .project-list-container button[b-evri9nyllm] {
        margin-left: auto
    }
.project-container[b-evri9nyllm] {
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 6px 6px;
    transition: background-color 0.2s;
    font-size: 12px;
    width: 100%;
    height: 25px;
    cursor: pointer;
    box-sizing: border-box;
    gap: 4px;
    border-radius: 8px;
    padding: 16px 4px;
    background-color: hsl(var(--fg-h), var(--fg-s), var(--fg-l));
}

    .project-container h3[b-evri9nyllm] {
        color: var(--text-color);
        font-size: 11px;
    }

    .project-container .delete-project[b-evri9nyllm] {
        display: none; /* Hidden by default */
        padding: 4px;
        border-radius: 4px;
    }

        .project-container .delete-project:hover[b-evri9nyllm] {
            color: var(--error-text-color);
        }

    /* Show button on hover, but ONLY if it's NOT disabled */
    .project-container:not(.is-disabled):hover .delete-project[b-evri9nyllm] {
        display: block;
    }

    /* Hover background for the container */
    .project-container:not(.is-disabled):hover[b-evri9nyllm] {
        background-color: hsl( var(--fg-h), var(--fg-s), calc(var(--fg-l) + var(--color-offset-1)) );
    }

    /* Logic for the current/disabled project */
    .project-container.is-disabled[b-evri9nyllm] {
        pointer-events: none; /* Prevents clicking/loading again */
        cursor: default;
        opacity: 0.7; /* Optional: Makes it look 'active but locked' */
    }

        /* Ensure delete button NEVER shows on the active project */
        .project-container.is-disabled .delete-project[b-evri9nyllm] {
            display: none !important;
        }

.currently-open[b-evri9nyllm] {
    font-size: 11px;
    font-style: italic;
    color: var(--primary-color);
}
/* /Popups/SaveChangesPopup.razor.rz.scp.css */
.unsaved-changes-content[b-n2n1jkpst9] {
    display: flex;
    flex-direction: column;
    height: 35px;
}

    .unsaved-changes-content h2[b-n2n1jkpst9] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
        
    }
/* /Popups/SaveProjectPopup.razor.rz.scp.css */
.save-project-content[b-x86kgqqs8v] {
    display: flex;
    flex-direction: column;
    height: 124px;
    gap: 10px;
}

.error-messaging-container[b-x86kgqqs8v] {
    padding: 0px 8px;
    width: 100%;
}

.error-message[b-x86kgqqs8v] {
    font-size: 11px;
    color: var(--error-text-color) !important;
}
/* /Popups/SlideSizePopup.razor.rz.scp.css */
.modal-slide-size[b-efv8q23k6n] {
    display: flex;
    flex-direction: column;
    height: 100px;
    gap: 10px;
}

    .modal-slide-size h2[b-efv8q23k6n] {
        margin: 0 0 8px 0;
        color: var(--text-color);
        flex-shrink: 0;
        font-size: 12px;
    }

.btn-select select[b-efv8q23k6n] {
    min-width: 50px;
    height: 25px;
    padding: 2px;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid var(--input-border-color);
}

    .btn-select select:focus[b-efv8q23k6n] {
        outline: 0px solid var(--border-focused-color);
        border-color: var(--border-focused-color);
    }
/* /Popups/WhatsNewPopup.razor.rz.scp.css */
.whats-new-content[b-ww045hx2qy] {
    display: flex;
    flex-direction: column;
    height: 350px;
    overflow: auto;
}

.prs-disclaimer[b-ww045hx2qy] {
    font-size: 11px;
    margin: 6px 0px;
}

.prs-disclaimer span[b-ww045hx2qy] {
    margin-right: 6px;
}