body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #1E1E1E;
    color: #FFFFFF;
}

/* ── Color Picker Dialog ── */
#color-picker-dialog {
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
}

    #color-picker-dialog::backdrop {
        background: rgba(0, 0, 0, 0.55);
    }

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 14px 14px;
    background: #1e1e1e;
    border-radius: 0 0 12px 12px;
}

    .dialog-actions button {
        padding: 6px 18px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        cursor: pointer;
    }

    .dialog-actions #picker-cancel {
        background: #3a3a3a;
        color: #ccc;
    }

        .dialog-actions #picker-cancel:hover {
            background: #4a4a4a;
        }

    .dialog-actions #picker-confirm {
        background: #0af;
        color: #000;
        font-weight: bold;
    }

        .dialog-actions #picker-confirm:hover {
            background: #0cf;
        }

canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    touch-action: none;
    /* Desabilita o pan e zoom padrão em touch devices */
}

.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.resizer-h {
    height: 4px;
    cursor: row-resize;
    background-color: #292929;
}

.resizer-v {
    width: 8px;
    cursor: col-resize;
    background-color: rgb(44, 44, 44);
    border-left: 1px solid #555;
}

.col1 {
    background-color: #2C2C2C;
    border-right: 1px solid #555;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.col2 {
    background-color: rgb(90, 25, 57);
    flex: 1;
}

.col3 {
    display: flex;
    flex-direction: column;
    background-color: #2C2C2C;
    width: 320px;
    overflow: hidden;
    height: 100%;
}

.container-rows {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.row1 {
    background-color: rgb(255, 255, 255);
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#container-editor {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

#htmlPreview {
    flex: 1;
    min-width: 0;
    overflow: auto;
    border-left: 1px solid #555;
}

.row2 {
    background-color: rgb(27, 27, 27);
    /*flex: 1;*/
    height: 50vh;
}

.add-btns {
    display: flex;
    flex-direction: column;

    button {
        width: 50px;
        height: 50px;
        background: none;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 30px;
        }

        &:hover {
            border: #555 1px solid;
        }
    }
}

.props-header {
    border-bottom: 1px solid #555;
    height: 100px;
    flex: 0 0 auto;
}

.props-container {
    flex: 0 0 auto;
}

.col3-panels {
    flex: 1 1 0%;
    overflow-y: auto;
    /*padding-right: 10px;*/
}

    .col3-panels::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .col3-panels::-webkit-scrollbar-track {
        background: transparent;
    }

    .col3-panels::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
        border: 1px solid transparent;
    }

        .col3-panels::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }




.props-tag {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #555;
}


/* 1. Largura da barra de rolagem (Vertical e Horizontal) */
.box-model-panel::-webkit-scrollbar {
    width: 6px;
    /* Largura do scroll vertical */
    height: 6px;
    /* Altura do scroll horizontal */
}

/* 2. Fundo da barra (Track) */
.box-model-panel::-webkit-scrollbar-track {
    background: transparent;
    /* Mantém flat, sem cor de fundo */
}

/* 3. O "pegador" da barra (Thumb) */
.box-model-panel::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Cor da barra */
    border-radius: 10px;
    /* Deixa as bordas arredondadas */
    border: 1px solid transparent;
    /* Truque para espaçamento se necessário */
}

    /* 4. Efeito ao passar o mouse */
    .box-model-panel::-webkit-scrollbar-thumb:hover {
        background-color: #555;
        /* Escurece ao interagir */
    }

/* Suporte para Firefox (Limitado, mas funcional) */
.box-model-panel {
    scrollbar-width: thin;
    /* Deixa o scroll estreito */
    scrollbar-color: #888 transparent;
    /* Cor do thumb e do track */
}


.box-model-panel {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #555;
    overflow-y: scroll;
    flex-grow: 1;
    overflow-x: hidden;
}


/* O container principal */
.input-group {
    display: flex;
    align-items: center;
    /* Alinha verticalmente ao centro */
    gap: 8px;
    /* Espaçamento entre os elementos */
    /*width: 100%;          Ajuste conforme necessário */
    padding: 5px;
    background-color: #383838;
    border-radius: 6px;
    margin: 5px;
}

    /* 1. Largura fixa para o label */
    .input-group label {
        flex: 0 0 80px;
        /* Não cresce, não encolhe, base de 80px */
        font-size: smaller;
    }

    /* 2. Input ocupa o espaço restante */
    .input-group .txt {
        flex-grow: 1;
        /* Ocupa todo o espaço disponível */
        min-width: 0;
        /* Evita que o input quebre o layout em telas pequenas */
        padding: 4px;
        background: none;
        border: none;
        color: #fff;
        font-size: smaller;
    }

/* 3. Botão ajustável ao conteúdo */
.mnu-context {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* Impede que o texto quebre linha */
    padding: 4px 8px;
    flex-shrink: 0;
    /* Garante que o botão não seja esmagado */
    cursor: pointer;
    background: none;
    border: none;
    color: #fff;
    font-size: smaller;
    gap: 5px;

    &:hover {
        background-color: #555;
        border-radius: 5px;
    }
}



/* CSS Unit picker menu */
#css-unit-menu {
    position: fixed;
    z-index: 9999;
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 4px 0;
    min-width: 80px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: none;
}

    #css-unit-menu.open {
        display: block;
    }

    #css-unit-menu .unit-group-label {
        font-size: 10px;
        color: #888;
        padding: 4px 10px 2px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        user-select: none;
    }

    #css-unit-menu button {
        display: block;
        width: 100%;
        background: none;
        border: none;
        color: #e0e0e0;
        font-size: 12px;
        text-align: left;
        padding: 5px 14px;
        cursor: pointer;
        border-radius: 0;
    }

        #css-unit-menu button:hover {
            background-color: #3c3c3c;
            color: #fff;
        }

    #css-unit-menu hr {
        border: none;
        border-top: 1px solid #444;
        margin: 3px 0;
    }

.color-sample {
    width: 16px;
    height: 16px;
    border: 1px solid #555;
    border-radius: 3px;
    margin-left: 5px;
    background-color: yellowgreen;
}

.props-tab {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    overflow-x: scroll;
    overflow-y: hidden;

    button {
        background: none;
        border: none;
        color: #fff;
        font-size: smaller;
        padding: 4px 8px;
        cursor: pointer;
        white-space: nowrap;
        margin-bottom: 5px;

        &:hover {
            background-color: #555;
            border-radius: 5px;
        }
    }
}

    .props-tab::-webkit-scrollbar {
        width: 6px;
        /* Largura do scroll vertical */
        height: 6px;
        /* Altura do scroll horizontal */
    }

    /* 2. Fundo da barra (Track) */
    .props-tab::-webkit-scrollbar-track {
        background: transparent;
        /* Mantém flat, sem cor de fundo */
    }

    /* 3. O "pegador" da barra (Thumb) */
    .props-tab::-webkit-scrollbar-thumb {
        background-color: #888;
        /* Cor da barra */
        border-radius: 10px;
        /* Deixa as bordas arredondadas */
        border: 1px solid transparent;
        /* Truque para espaçamento se necessário */
    }

        /* 4. Efeito ao passar o mouse */
        .props-tab::-webkit-scrollbar-thumb:hover {
            background-color: #555;
            /* Escurece ao interagir */
        }

/* Suporte para Firefox (Limitado, mas funcional) */
.props-tab {
    scrollbar-width: thin;
    /* Deixa o scroll estreito */
    scrollbar-color: #888 transparent;
    /* Cor do thumb e do track */
}



/*html {*/
/* Altera a largura do scroll: 'auto' (padrão) ou 'thin' (fino) */
/*scrollbar-width: thin;*/
/* Define as cores: [cor-do-polegar] [cor-da-trilha/fundo] */
/*scrollbar-color: #555 #f1f1f1;
}*/

.flexbox-panel {
    display: flex;
    flex-direction: column;

    button {
        background: none;
        border: none;
        width: 27px;
        padding: 0px;
        height: 21px;

        &:hover {
            background-color: #555;
            border-radius: 5px;
        }
    }
}


#btnApplyFbDir:disabled svg path {
    fill: #cccccc;
    /* Changes icon color to gray */
    opacity: 0.5;
    /* Makes the icon semi-transparent */
}


/* scroll for tags dialog */

.row::-webkit-scrollbar {
    width: 6px;
    /* Largura do scroll vertical */
    height: 6px;
    /* Altura do scroll horizontal */
}

/* 2. Fundo da barra (Track) */
.row::-webkit-scrollbar-track {
    background: transparent;
    /* Mantém flat, sem cor de fundo */
}

/* 3. O "pegador" da barra (Thumb) */
.row::-webkit-scrollbar-thumb {
    background-color: #888;
    /* Cor da barra */
    border-radius: 10px;
    /* Deixa as bordas arredondadas */
    border: 1px solid transparent;
    /* Truque para espaçamento se necessário */
}

    /* 4. Efeito ao passar o mouse */
    .row::-webkit-scrollbar-thumb:hover {
        background-color: #555;
        /* Escurece ao interagir */
    }

/* Suporte para Firefox (Limitado, mas funcional) */
.row {
    scrollbar-width: thin;
    /* Deixa o scroll estreito */
    scrollbar-color: #888 transparent;
    /* Cor do thumb e do track */
}

.dialog-results {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #555;
    background: #2f2f2f;
    overflow-y: scroll;
    flex-grow: 1;
    overflow-x: hidden;
    min-width: 900px;
    display: none;
}

.dialog-abas {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;

    button {
        border: none;
        background: none;
        color: #fff;
        padding: 10px;
        font-size: 1.2rem;

        &:hover {
            background-color: #555;
            border-radius: 5px;
        }
    }
}

.canvas-header {
    background-color: #2f2f2f;
    height: 30px;
    border-bottom: 1px solid #474747;
    padding-left: 10px;
    user-select: none;
}

    .canvas-header button {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;

        &:hover {
            background-color: #555;
            border-radius: 5px;
        }

        svg:hover {
            fill: #2f2f2f;
        }
    }

/*CSS Unit  View Component*/

.unit-control {
    display: flex;
    align-items: center;
    background: #383838;
    justify-content: space-between;
    padding: 4px;
    margin: 2px;
    border-radius: 4px;
}

.txt {
    background: #535353;
    border: none;
    color: #fff;
    font-size: smaller;
    flex-shrink: 0;
    width: 50px;
    text-align: right;
    outline: none;
    border-radius: 4px;
}

.unit-control select {
    background: #535353;
    border-radius: 4px;
    color: #fff;
    border: none;
}

.unit-control label {
    font-size: smaller;
    color: #fff;
}

.unit-control select::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.unit-control select::-webkit-scrollbar-track {
    background: transparent;
}

.unit-control select::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
    border: 1px solid transparent;
}

    .unit-control select::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

/*CSS Unit  View Component*/

.style-collapse {
    display: flex;
    justify-content: space-between;
    padding-right: 9px;
    margin-top: 12px;
}

    .style-collapse button {
        background: none;
        border: none;
        width: 20px;
        height: 20px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
    }


/*background gradient editor*/

.marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    top: -4px;
    transform: translateX(-50%);
    cursor: grab;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

    .marker.active {
        border-color: #00adb5;
        transform: translateX(-50%) scale(1.1);
        z-index: 10;
    }

/*background gradient editor*/

/* SLIDER WEB_VIEW_COMPONENT*/

/* Container Spacing */
.custom-slider-container {
    width: 100%;
    margin: 15px 0;
    font-family: sans-serif;
}

.slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap:6px;
}

/* Reset baseline styling */
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px; /* Thickness of the bar */
    border-radius: 999px; /* Fully rounded bar */
    background: #545454; /* Default background track gray */
    outline: none;
    transition: background 0.3s ease;
}

    /* Chrome, Safari, Opera, and Edge (Webkit) Handle */
    .custom-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%; /* Perfect circle */
        background: #258bc9; /*var(--track-color, );  Custom dynamic color */
        cursor: pointer;
        border: 1px solid #393939;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s ease, background-color 0.2s;
    }

        .custom-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15); /* Slight grow on hover */
        }

        .custom-slider::-webkit-slider-thumb:active {
            transform: scale(0.95); /* Slight shrink when clicked */
        }

    /* Firefox Handle */
    .custom-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--track-color, #007bff);
        cursor: pointer;
        border: 2px solid #ffffff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s ease;
    }

        .custom-slider::-moz-range-thumb:hover {
            transform: scale(1.15);
        }

        .custom-slider::-moz-range-thumb:active {
            transform: scale(0.95);
        }


/* SLIDER WEB_VIEW_COMPONENT*/