:root {
    --global-primario: #0C0C0C;
    --global-secundario: #191919;
    --global-primario-transparente: #121212eb;
    --global-texto-900: #F0F0F0;
    --global-alert-error: #CF6679;
    --global-alert-disable-button: #C1232F;
    --cancel-color: #E0E0E0;
    --global-destaque: #4B4EFF;
    --global-destaque-hover: #3336eb;
    --global-button-border-radius: 14px;
}

.cursor_pointer {
    cursor: pointer;
}

/*////////// ESTILIZAR AS MENSAGENS DO SEEWT ALERT - INÍCIO //////////*/
.swal2-popup {
    background: var(--global-secundario) !important;
}

.swal2-container {
    background: var(--global-primario-transparente) !important;
    color: var(--global-texto-900) !important;
}

.swal2-html-container {
    color: var(--global-texto-900) !important;
}

.swal2-cancel {
    border-radius: var(--global-button-border-radius) !important;
    background: var(--global-alert-error) !important;
    color: var(--cancel-color) !important;
    transition: all 0.3s;
    border: none !important;
}

.swal2-cancel:hover {
    background: var(--global-alert-disable-button) !important;
}

.swal2-confirm {
    border-radius: var(--global-button-border-radius) !important;
    background: var(--global-destaque) !important;
    color: var(--global-texto-900) !important;
    transition: all 0.3s;
    border: none !important;
}

.swal2-confirm:hover {
    background: var(--global-destaque-hover) !important;
}

/*////////// ESTILIZAR AS MENSAGENS DO SEEWT ALERT - INÍCIO //////////*/


/* Estiliza o contêiner do Spectrum */
.custom-spectrum-container .sp-container {
    background-color: #333;
    /* Fundo escuro */
    border-radius: 8px;
    /* Cantos arredondados */
    color: #fff;
    /* Texto claro para contraste */
}

/* Estiliza os elementos internos do Spectrum */
.custom-spectrum-container .sp-input,
.custom-spectrum-container .sp-picker-container {
    background-color: #444;
    /* Fundo escuro para elementos internos */
    border-radius: 8px;
    /* Cantos arredondados */
    color: #fff;
    /* Texto claro para contraste */
}

/* Estiliza o botão */
.custom-spectrum-container .sp-button {
    background-color: #555;
    /* Cor do botão */
    color: #fff;
    /* Texto do botão */
    border-radius: 8px;
    /* Cantos arredondados */
}

/* Estiliza a paleta */
.custom-spectrum-container .sp-palette {
    background-color: #333;
    /* Fundo da paleta */
}

/* Estiliza a paleta individual */
.custom-spectrum-container .sp-thumb-el {
    border-radius: 6px;
    /* Cantos arredondados para as cores na paleta */
}

/* Estiliza o input do color picker */
#colorpicker.custom-spectrum {
    background-color: #333;
    /* Fundo escuro */
    border-radius: 8px;
    /* Cantos arredondados */
    color: #fff;
    /* Texto claro */
    border: 1px solid #555;
    /* Borda */
    padding: 5px 10px;
    /* Espaçamento interno */
    outline: none;
    /* Remove o contorno padrão */
}

/* Estilo adicional para o input ao focar */
#colorpicker.custom-spectrum:focus {
    border-color: #777;
    /* Cor da borda ao focar */
}

.sp-replacer {
    background: #eee0 !important;
    color: #ababab !important;
    border-radius: 5px !important;
    width: 90%;
}

.sp-container {
    background-color: #eee0 !important;
    border-radius: 6px !important;
    border: none !important;
}

.sp-container button{
    background-color: var(--global-destaque)!important;
    color: var(--global-texto-900)!important;
    border-radius: 6px !important;
    background-image: none!important;
    border: none !important;
}

.sp-preview {
    width: 70% !important;
}

.sp-dd {
    width: 20% !important;
}

/*////////// ESTILIZAR O GRID COM AS IMAGENS DO SISTEMA - INÍCIO //////////*/
.container_system_images {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Espaçamento de 20px entre as imagens */
}

.container_system_images .image_in_media_listing {
    width: 80px;
    height: 80px;
    overflow: hidden;
}

.container_system_images .image_in_media_listing img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garante que a imagem preencha o container */
    border-radius: 4px;
    /* Arredondamento das bordas */
    cursor: pointer;
}

/*////////// ESTILIZAR O GRID COM AS IMAGENS DO SISTEMA - FIM //////////*/

/*////////// ESTILIZAR O EDITOR DOS ENCONTROS - INÍCIO //////////*/
.field_edit_description {
    border-radius: 6px!important;
    border: 1px solid rgb(207, 207, 207)!important;
    margin-bottom: 10px!important;
    font-size: 13px!important;
    font-family: 'Atyp BL';
}

.field_edit {
    border-radius: 6px !important;
    border: 1px solid rgb(207, 207, 207) !important;
    font-size: 13px !important;
    font-family: 'Atyp BL' !important;
    margin-bottom: 10px !important;
}

.field_edit_label {
    font-family: 'Atyp BL' !important;
    font-size: 14px !important;
    font-weight: bold;
}

.password-wrapper {
    position: relative;
    display: inline-block;
}

.toggle-password {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.elementor-field-type-password {
    display: grid !important;
}

/*////////// ESTILIZAR O EDITOR DOS ENCONTROS - FIM //////////*/

/*////////// ESTILIZAR A BARRA DE ROLAGEM - INÍCIO //////////*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

body::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: #000;
}

body::-webkit-scrollbar-track:hover {
    background-color: #000000;
}

body::-webkit-scrollbar-track:active {
    background-color: #000000;
}

body::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #4A4A4A;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #4A4A4A;
}

body::-webkit-scrollbar-thumb:active {
    background-color: #4A4A4A;
}

/*////////// ESTILIZAR A BARRA DE ROLAGEM - FIM //////////*/