:root {
    --global-primario: #121212;
    --global-secundario: #191919;
    --global-primario-transparente: #121212eb;
    --global-texto-900: #E0E0E0;
    --global-alert-error: #CF6679;
    --global-alert-disable-button: #C1232F;
    --cancel-color: #E0E0E0;
    --global-destaque: #BB86FC;
    --global-destaque-hover: #6835a7;
    --global-button-border-radius: 14px;
    --global-borders-color: #333333;
    --global-tooltip: #65289eaf;
}


.meta-field {
    flex-shrink: 0;
    /* Impede que os campos sejam redimensionados para caber no contêiner */
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid var(--global-secundario);
    max-height: 60px;
    overflow-y: hidden;
    overflow-x: hidden;
    align-content: center;
}

.jet-listing-grid__items {
    max-width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    padding-bottom: 30px;
    border: 1px solid var(--global-borders-color);
}

/*///////// SCROLLBAR DA TABELA DE ITENS - INÍCIO /////////*/
.jet-listing-grid__items::-webkit-scrollbar {
    width: 12px;
    /* Largura da barra de rolagem */
    height: 12px;
    /* Altura da barra de rolagem (para rolagem horizontal) */
}

.jet-listing-grid__items::-webkit-scrollbar-track {
    background: var(--global-secundario);
    /* Cor do fundo da track */
    border-radius: 10px;
    /* Bordas arredondadas da track */
}

.jet-listing-grid__items::-webkit-scrollbar-thumb {
    background-color: var(--global-destaque);
    /* Cor do polegar (parte móvel) */
    border-radius: 10px;
    /* Bordas arredondadas do polegar */
    border: 3px solid var(--global-secundario);
    /* Espaço ao redor do polegar */
}

.jet-listing-grid__items::-webkit-scrollbar-thumb:hover {
    background-color: var(--global-destaque-hover);
    /* Cor ao passar o mouse no polegar */
}

.jet-listing-grid__items {
    scrollbar-width: thin;
    /* Define a largura da scrollbar */
    scrollbar-color: var(--global-destaque) var(--global-secundario);
    /* Cor do polegar e da track */
}

.jet-listing-grid__items:hover {
    scrollbar-color: var(--global-destaque-hover) var(--global-secundario);
    /* Cor ao passar o mouse na scrollbar */
}

/*///////// SCROLLBAR DA TABELA DE ITENS - FIM /////////*/

/* Garante que os campos se alinhem corretamente dentro do contêiner */
.meta-fields-row {
    display: inline-flex;
    flex-wrap: nowrap;
}

/*///////// TOOLTIP - INÍCIO /////////*/
/* Container do tooltip oculto por padrão */
.meta-field:hover::after {
    content: attr(field-label);
    /* O conteúdo do tooltip será o valor do atributo field-label */
    position: absolute;
    background-color: var(--global-tooltip);
    /* Fundo do tooltip */
    color: var(--global-texto-900);
    /* Cor do texto */
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    z-index: 10;
    left: 10px;
    top: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Impede que o tooltip interfira na interação com o mouse */
}

/*///////// TOOLTIP - FIM /////////*/

/* Mostrar o tooltip ao passar o mouse */
.meta-field:hover::after {
    opacity: 1;
}

.meta-field.media {
    min-width: 60px;
}

.meta-field.number {
    min-width: 60px;
}

.meta-field.text {
    min-width: 200px;
}

.meta-field.posts {
    min-width: 200px;
}

.meta-field.meta-field.wysiwyg {
    min-width: 300px;
    max-width: 300px;
}

.meta-field.meta-field.repeater {
    min-width: 300px;
    max-width: 300px;
}

.meta-field.meta-field.gallery {
    min-width: 300px;
    max-height: 60px;
    overflow-y: hidden;
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-wrap: nowrap;
}

/*///////// SWITCHER - INÍCIO /////////*/
.meta-field.switcher {
    min-width: 80px;
    align-content: center;
    text-align: center;
}

/* CSS para o switcher */
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #16cc25;
}

input:checked+.slider:before {
    transform: translateX(14px);
}

/*///////// SWITCHER - FIM /////////*/

.meta-field.media img {
    max-width: 40px;
    width: 40px;
    height: 40px;
    background-size: cover;
    border: 4px;
}

.meta-field.gallery img {
    max-width: 40px;
    width: 40px;
    height: 40px;
    background-size: cover;
    border: 4px;
}

.item_par .meta-fields-row {
    background-color: #1e1e1e;
}

.item .meta-fields-row:hover {
    background-color: #7c0ee241;
}