/*
 * #########################################################
 * CORREÇÃO GLOBAL DOS CONTEÚDOS DENTRO DO PANEL_GRAFICOS
 * #########################################################
 */

.panel-graficos,
.panel-graficos *,
.panel-body-custom,
.panel-body-custom *,
.config-validacao-conteudo,
.config-validacao-conteudo * {
    box-sizing: border-box !important;
}


/*
 * #########################################################
 * BODY PRINCIPAL DO PANEL
 * #########################################################
 */

.panel-graficos .panel-body-custom,
.panel-graficos .body_body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
}


/*
 * #########################################################
 * CONTEÚDO DAS VIEWS
 *
 * O BOOTSTRAP .row TEM:
 *
 * margin-left: -15px;
 * margin-right: -15px;
 *
 * ISSO FAZ O CONTEÚDO SAIR DO PADDING DO PANEL.
 * #########################################################
 */

.panel-graficos .config-validacao-conteudo.row,
.panel-body-custom .config-validacao-conteudo.row {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*
 * #########################################################
 * CONTAINER DAS VIEWS
 * #########################################################
 */

.panel-graficos .config-validacao-conteudo,
.panel-body-custom .config-validacao-conteudo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
}


/*
 * #########################################################
 * COLUNAS BOOTSTRAP DENTRO DAS VIEWS
 *
 * NÃO ALTERA O LAYOUT DELAS.
 * APENAS IMPEDE QUE FIQUEM MAIORES QUE O PAI.
 * #########################################################
 */

.panel-graficos .config-validacao-conteudo [class*="col-sm-"],
.panel-graficos .config-validacao-conteudo [class*="col-md-"],
.panel-graficos .config-validacao-conteudo [class*="col-lg-"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/*
 * #########################################################
 * INPUTS / SELECTS / TEXTAREAS
 * #########################################################
 */

.panel-graficos .config-validacao-conteudo .form-control,
.panel-graficos .config-validacao-conteudo .input-group,
.panel-graficos .config-validacao-conteudo .coluna_html_base,
.panel-graficos .config-validacao-conteudo .form-group {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}


/*
 * #########################################################
 * ALERTAS / AJUDAS
 *
 * EVITA TEXTO FORÇAR A LARGURA DO CONTAINER.
 * #########################################################
 */

.panel-graficos .config-validacao-conteudo .alert,
.panel-graficos .config-validacao-conteudo .help-block,
.panel-graficos .config-validacao-conteudo .invalid-feedback {
    max-width: 100% !important;
    min-width: 0 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;

    box-sizing: border-box !important;
}

/* ######################################################### */
/* PANEL GRAFICOS - HEADER */
/* STATUS SEMPRE NO TOPO DIREITO */
/* ######################################################### */

.panel-graficos-header{
    position: relative !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-height: 58px;
    padding-right: 165px !important;
}


/* ######################################################### */
/* ESQUERDA */
/* ######################################################### */

.panel-graficos-header .panel-title-left{
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.panel-graficos-header .panel-title-icon{
    flex: 0 0 auto !important;
}

.panel-graficos-header .panel-title-text{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}


/* ######################################################### */
/* TITULO */
/* ######################################################### */

.panel-graficos-header .panel-title-main{
    width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}


/* ######################################################### */
/* DESCRICAO */
/*
 * É ESTE TEXTO QUE DEVE QUEBRAR LINHA.
 * O ESPAÇO DA DIREITA FICA RESERVADO PARA STATUS + SETA.
 * ######################################################### */

.panel-graficos-header .panel-title-description{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
}


/* ######################################################### */
/* DIREITA */
/*
 * SEMPRE FIXO NO CANTO SUPERIOR DIREITO DO HEADER.
 * NÃO PARTICIPA MAIS DA QUEBRA DO TEXTO.
 * ######################################################### */

.panel-graficos-header .panel-header-right{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 5 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 8px !important;

    white-space: nowrap !important;
}


/* ######################################################### */
/* STATUS */
/* ######################################################### */

.panel-graficos-header .panel-graficos-status{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    margin: 0 !important;

    white-space: nowrap !important;
}

.panel-graficos-header .panel-graficos-status-texto{
    white-space: nowrap !important;
}


/* ######################################################### */
/* ICONE ABRIR / FECHAR */
/* ######################################################### */

.panel-graficos-header .panel-graficos-collapse-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 auto !important;

    width: auto !important;
    margin: 0 !important;

    white-space: nowrap !important;
}


/* ######################################################### */
/* MOBILE */
/* ######################################################### */

@media(max-width: 600px){

    .panel-graficos-header{
        padding-right: 130px !important;
    }

    .panel-graficos-header .panel-header-right{
        top: 8px !important;
        right: 8px !important;
        gap: 5px !important;
    }

}

/*
 * #########################################################
 * CONFIGURAÇÕES DINÂMICAS - GLOBAL
 * #########################################################
 */

.config-validacao-global {
    width: 100%;
    box-sizing: border-box;
}

.config-validacao-global *,
.config-validacao-global *:before,
.config-validacao-global *:after {
    box-sizing: border-box;
}


/*
 * #########################################################
 * CABEÇALHO
 * #########################################################
 */

.config-validacao-global .config-validacao-cabecalho {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 14px;
    background: #FFF;
    border: 1px solid #dfe5ea;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.config-validacao-global .config-validacao-cabecalho-icone {
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2ecf8;
    border-radius: 10px;
    color: #7026aa;
    font-size: 20px;
}

.config-validacao-global .config-validacao-cabecalho-icone svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
}

.config-validacao-global .config-validacao-cabecalho-texto {
    flex: 1 1 auto;
    min-width: 0;
}

.config-validacao-global .config-validacao-cabecalho-texto strong {
    display: block;
    color: #343a40;
    font-size: 13px;
}

.config-validacao-global .config-validacao-cabecalho-texto span {
    display: block;
    margin-top: 4px;
    color: #777f86;
    font-size: 11px;
    line-height: 16px;
}


/*
 * #########################################################
 * RESUMO
 * #########################################################
 */

.config-validacao-global .config-validacao-resumo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e0e5ea;
    border-radius: 8px;
}

.config-validacao-global .config-validacao-resumo-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-validacao-global .config-validacao-resumo-icone {
    width: 34px;
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf8ef;
    border-radius: 7px;
    color: #299657;
}

.config-validacao-global .config-validacao-resumo-info strong {
    color: #343a40;
    font-size: 16px;
}

.config-validacao-global .config-validacao-resumo-info span {
    color: #7b8288;
    font-size: 10px;
}


/*
 * #########################################################
 * PROGRESSO
 * #########################################################
 */

.config-validacao-global .config-validacao-progresso {
    width: 280px;
    max-width: 45%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.config-validacao-global .config-validacao-progresso-barra {
    flex: 1 1 auto;
    height: 8px;
    background: #e6e9ec;
    border-radius: 20px;
    overflow: hidden;
}

.config-validacao-global .config-validacao-progresso-valor {
    width: 0;
    height: 100%;
    background: #7026aa;
    border-radius: 20px;
    transition: width .25s ease;
}

.config-validacao-global .config-validacao-progresso-texto {
    min-width: 35px;
    color: #555;
    font-size: 10px;
    font-weight: bold;
    text-align: right;
}


/*
 * #########################################################
 * BLOCO
 * #########################################################
 */

.config-validacao-global .config-validacao-bloco {
    width: 100%;
    margin-bottom: 9px;
}

.config-validacao-global .config-validacao-bloco .panel-graficos-header {
    min-height: 58px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    border-radius: 8px;
}

.config-validacao-global .config-validacao-bloco .panel-title-left {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.config-validacao-global .config-validacao-bloco .panel-title-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    background: #f2ecf8;
    border-radius: 8px;
    color: #7026aa;
    font-size: 16px;
}

.config-validacao-global .config-validacao-bloco .panel-title-icon svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
}

.config-validacao-global .config-validacao-bloco .panel-title-text {
    min-width: 0;
}

.config-validacao-global .config-validacao-bloco .panel-title-main {
    color: #333;
    font-size: 11px;
    font-weight: 600;
}

.config-validacao-global .config-validacao-bloco .panel-title-description {
    margin-top: 3px;
    color: #969ca1;
    font-size: 10px;
    line-height: 13px;
    font-weight: normal;
}

.config-validacao-global .config-validacao-bloco .panel-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}


/*
 * #########################################################
 * STATUS
 * #########################################################
 */

.config-validacao-global .config-validacao-bloco .panel-graficos-status {
    min-width: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: bold;
    white-space: nowrap;
}

.config-validacao-global .config-validacao-bloco .panel-status-completo {
    background: #eaf8ef;
    color: #24884d;
}

.config-validacao-global .config-validacao-bloco .panel-status-pendente {
    background: #fff4e5;
    color: #ae6b00;
}

.config-validacao-global .config-validacao-bloco .panel-status-opcional {
    background: #eef5fb;
    color: #557c9c;
}


/*
 * #########################################################
 * COR LATERAL POR STATUS
 * #########################################################
 */

.config-validacao-global .config-validacao-bloco.config-validacao-completo .panel-graficos-header {
    border-left: 4px solid #36a264;
}

.config-validacao-global .config-validacao-bloco.config-validacao-pendente .panel-graficos-header {
    border-left: 4px solid #e2a127;
}

.config-validacao-global .config-validacao-bloco.config-validacao-opcional .panel-graficos-header {
    border-left: 4px solid #8eafca;
}


/*
 * #########################################################
 * COLLAPSE
 * #########################################################
 */

.config-validacao-global .config-validacao-bloco .panel-graficos-collapse-icon {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f5f8;
    border-radius: 8px;
    color: #637b91;
}

.config-validacao-global .config-validacao-bloco .panel-graficos-collapse-icon i {
    transition: transform .2s ease;
}

.config-validacao-global .config-validacao-bloco .panel-graficos-header[aria-expanded="true"] .panel-graficos-collapse-icon i {
    transform: rotate(180deg);
}


/*
 * #########################################################
 * ROWS
 * #########################################################
 */

.config-validacao-global .config-validacao-conteudo,
.config-validacao-global .config-validacao-conteudo.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.config-validacao-global .config-validacao-conteudo > [class*="col-sm-"],
.config-validacao-global .config-validacao-conteudo > [class*="col-md-"],
.config-validacao-global .config-validacao-conteudo > [class*="col-lg-"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/*
 * #########################################################
 * CAMPOS GERADOS PELOS HELPERS
 * #########################################################
 */

.config-validacao-global .oculta_bloco,
.config-validacao-global .form-group,
.config-validacao-global .box-body-tr {
    width: 100%;
}

.config-validacao-global input.form-control,
.config-validacao-global select.form-control {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    line-height: 24px !important;
}

.config-validacao-global textarea.form-control {
    width: 100% !important;
    min-height: 120px !important;
    resize: vertical;
}

.config-validacao-global label {
    line-height: 16px;
}

.config-validacao-global .config-validacao-conteudo > [class*="col-sm-"] > div,
.config-validacao-global .config-validacao-conteudo > [class*="col-md-"] > div,
.config-validacao-global .config-validacao-conteudo > [class*="col-lg-"] > div {
    flex: 1 1 auto;
}


/*
 * #########################################################
 * ALERTAS
 * #########################################################
 */

.config-validacao-global .get_html_alert_global_get_html_alert_global_,
.config-validacao-global .get_html_alert_global_ {
    width: 100%;
}

.config-validacao-global .get_html_alert_global_ .alert {
    width: 100%;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.config-validacao-global .help-block {
    width: 100%;
    min-height: 18px;
}


/*
 * #########################################################
 * INPUT GROUP
 * #########################################################
 */

.config-validacao-global .input-group {
    width: 100%;
}

.config-validacao-global .input-group .form-control {
    height: 42px !important;
}


/*
 * #########################################################
 * CHOSEN
 * #########################################################
 */

.config-validacao-global .chosen-container {
    width: 100% !important;
}

.config-validacao-global .chosen-container-single .chosen-single {
    height: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 42px !important;
}

.config-validacao-global .chosen-container-single .chosen-single span {
    line-height: 42px !important;
}

.config-validacao-global .chosen-container-single .chosen-single div {
    height: 42px !important;
}


/*
 * #########################################################
 * MOBILE
 * #########################################################
 */

@media(max-width: 767px){

    .config-validacao-global .config-validacao-conteudo,
    .config-validacao-global .config-validacao-conteudo.row {
        display: block;
    }

    .config-validacao-global .config-validacao-conteudo > [class*="col-sm-"],
    .config-validacao-global .config-validacao-conteudo > [class*="col-md-"],
    .config-validacao-global .config-validacao-conteudo > [class*="col-lg-"] {
        display: block;
        width: 100%;
    }

    .config-validacao-global .get_html_alert_global_ .alert {
        min-height: 0;
    }

    .config-validacao-global .config-validacao-resumo {
        display: block;
    }

    .config-validacao-global .config-validacao-progresso {
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }

    .config-validacao-global .config-validacao-bloco .panel-graficos-header {
        flex-wrap: wrap;
    }

    .config-validacao-global .config-validacao-bloco .panel-header-right {
        margin-top: 7px;
        margin-left: 48px;
    }

}

/*
 * ============================================================
 * WRAPPER
 * ============================================================
 */
.alerts-imagem-global {
    width: 100%;
    margin-top: 8px !important;
}

.alerts-imagem-global *,
.alerts-imagem-global *:before,
.alerts-imagem-global *:after {
    box-sizing: border-box;
}


/*
 * ============================================================
 * BLOCO
 * ============================================================
 */
.alerts-imagem-global .alerts-imagem-item {
    width: 100%;
    margin-top: 7px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    overflow: hidden;
}

/*
 * REMOVE ALTURAS EXAGERADAS HERDADAS.
 */
.alerts-imagem-global .alert,
.alerts-imagem-global .panel,
.alerts-imagem-global .card {
    min-height: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}


/*
 * ============================================================
 * CABEÇALHO DO COLLAPSE
 * ============================================================
 */
.alerts-imagem-global .alerts-imagem-item h5,
.alerts-imagem-global .alerts-imagem-item .alert-heading,
.alerts-imagem-global .alerts-imagem-item .panel-heading,
.alerts-imagem-global .alerts-imagem-item [data-toggle="collapse"] {
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 8px 11px !important;
    font-size: 11px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
}


/*
 * ============================================================
 * ÍCONES
 * ============================================================
 */
.alerts-imagem-global .alerts-imagem-item h5 > i,
.alerts-imagem-global .alerts-imagem-item .alert-heading > i,
.alerts-imagem-global .alerts-imagem-item .panel-heading > i,
.alerts-imagem-global .alerts-imagem-item [data-toggle="collapse"] > i {
    font-size: 13px !important;
}

/*
 * SETA DO COLLAPSE
 */
.alerts-imagem-global .alerts-imagem-item .fa-arrow-up,
.alerts-imagem-global .alerts-imagem-item .fa-arrow-down,
.alerts-imagem-global .alerts-imagem-item .fa-chevron-up,
.alerts-imagem-global .alerts-imagem-item .fa-chevron-down {
    font-size: 12px !important;
    margin-left: auto !important;
}


/*
 * ============================================================
 * CONTEÚDO ABERTO
 * ============================================================
 */
.alerts-imagem-global .alerts-imagem-item .collapse > div,
.alerts-imagem-global .alerts-imagem-item .panel-collapse > div,
.alerts-imagem-global .alerts-imagem-item .card-body,
.alerts-imagem-global .alerts-imagem-item .panel-body {
    padding: 10px 12px !important;
    font-size: 10px !important;
    line-height: 17px !important;
}

.alerts-imagem-global .alerts-imagem-item p {
    margin-bottom: 6px !important;
    font-size: 10px !important;
    line-height: 17px !important;
}

.alerts-imagem-global .alerts-imagem-item hr {
    margin: 8px 0 !important;
    border-color: rgba(0,0,0,.08) !important;
}

.alerts-imagem-global .alerts-imagem-item a {
    font-weight: 600;
    text-decoration: underline;
}


/*
 * ============================================================
 * INFO
 * ============================================================
 */
.alerts-imagem-global .alerts-imagem-info {
    border-color: #9fc5ff !important;
    background: #f4f8ff !important;
}


/*
 * ============================================================
 * DANGER
 * ============================================================
 */
.alerts-imagem-global .alerts-imagem-danger {
    background: #fff8f8 !important;
}


/*
 * ============================================================
 * DIMENSÕES
 * ============================================================
 */
.alerts-imagem-dimensoes {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 7px;
}

.alerts-imagem-dimensoes > div {
    flex: 1 1 33%;
    min-width: 0;
    padding: 8px 10px;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 6px;
    text-align: center;
}

.alerts-imagem-dimensoes strong {
    display: block;
    margin-bottom: 3px;
    font-size: 8px;
    line-height: 11px;
    opacity: .7;
}

.alerts-imagem-dimensoes span {
    display: block;
    font-size: 11px;
    line-height: 15px;
    font-weight: 700;
}

.alerts-imagem-pixel {
    width: 100%;
    margin-top: 7px;
    font-size: 12px;
}

.alerts-imagem-pixel i {
    margin-right: 3px;
}


/*
 * ============================================================
 * MOBILE
 * ============================================================
 */
@media(max-width: 767px){

    .alerts-imagem-dimensoes {
        display: block;
    }

    .alerts-imagem-dimensoes > div {
        width: 100%;
        margin-bottom: 5px;
    }

}

.html-imagem-global .html-imagem-upload-preview-global {
    width: 100%;
    display: none;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0;
    background: #f8fafc;
    border: 1px solid #dfe5ea;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}

.html-imagem-global .html-imagem-upload-preview-global *,
.html-imagem-global .html-imagem-upload-preview-global *:before,
.html-imagem-global .html-imagem-upload-preview-global *:after {
    box-sizing: border-box;
}

.html-imagem-global .html-imagem-upload-preview-global.ativo {
    display: block;
}

.html-imagem-global .html-imagem-upload-preview-cabecalho {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: #FFF;
    border-bottom: 1px solid #e2e6ea;
}

.html-imagem-global .html-imagem-upload-preview-cabecalho-esquerda {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.html-imagem-global .html-imagem-upload-preview-cabecalho-icone {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    border-radius: 7px;
    color: #337ab7;
    font-size: 15px;
}

.html-imagem-global .html-imagem-upload-preview-cabecalho strong {
    display: block;
    color: #444;
    font-size: 12px;
}

.html-imagem-global .html-imagem-upload-preview-cabecalho span {
    display: block;
    margin-top: 2px;
    color: #999;
    font-size: 12px;
    line-height: 12px;
}

.html-imagem-global .html-imagem-upload-preview-badge {
    min-width: 42px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    background: #eef4ff;
    border: 1px solid #cbdcf6;
    border-radius: 20px;
    color: #337ab7;
    font-size: 12px;
    font-weight: bold;
}

.html-imagem-global .html-imagem-upload-preview-badge span {
    margin: 0;
    color: #337ab7;
    font-size: 10px;
    font-weight: bold;
}

.html-imagem-global .html-imagem-upload-preview-lista {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
}

.html-imagem-global .html-imagem-upload-preview-item {
    min-width: 0;
    background: #FFF;
    border: 1px solid #e0e4e8;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    overflow: hidden;
    transition: all .15s ease;
}

.html-imagem-global .html-imagem-upload-preview-item:hover {
    border-color: #bdd2e5;
    box-shadow: 0 3px 10px rgba(0,0,0,.07);
}

.html-imagem-global .html-imagem-upload-preview-imagem {
    width: 100%;
    height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
    overflow: hidden;
}

.html-imagem-global .html-imagem-upload-preview-imagem img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
    background: #FFF;
    border: 0 !important;
    box-shadow: none !important;
}

.html-imagem-global .html-imagem-upload-preview-numero {
    position: absolute;
    top: 7px;
    left: 7px;
    min-width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    background: rgba(255,255,255,.96);
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #555;
    font-size: 9px;
    font-weight: bold;
    box-shadow: 0 1px 5px rgba(0,0,0,.10);
}

.html-imagem-global .html-imagem-upload-preview-nova {
    position: absolute;
    right: 7px;
    bottom: 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    background: rgba(238,244,255,.96);
    border: 1px solid #cbdcf6;
    border-radius: 20px;
    color: #337ab7;
    font-size: 10px;
    font-weight: bold;
}

.html-imagem-global .html-imagem-upload-preview-dados {
    width: 100%;
    padding: 9px;
}

.html-imagem-global .html-imagem-upload-preview-nome {
    width: 100%;
    color: #444;
    font-size: 9px;
    line-height: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.html-imagem-global .html-imagem-upload-preview-informacoes {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.html-imagem-global .html-imagem-upload-preview-informacoes span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: #888;
    font-size: 8px;
}

.html-imagem-global .html-imagem-upload-preview-informacoes i {
    color: #337ab7;
}

.html-imagem-global .html-imagem-upload-preview-status {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 7px;
    background: #f5f9ff;
    border: 1px solid #d8e7f5;
    border-radius: 6px;
}

.html-imagem-global .html-imagem-upload-preview-status > i {
    width: 25px;
    min-width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFF;
    border-radius: 50%;
    color: #337ab7;
}

.html-imagem-global .html-imagem-upload-preview-status span {
    min-width: 0;
    margin: 0;
}

.html-imagem-global .html-imagem-upload-preview-status strong {
    display: block;
    color: #337ab7;
    font-size: 12px;
}

.html-imagem-global .html-imagem-upload-preview-status small {
    display: block;
    margin-top: 1px;
    color: #8a949c;
    font-size: 10px;
    line-height: 10px;
    font-weight: normal;
}

@media(max-width: 767px){

    .html-imagem-global .html-imagem-upload-preview-lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .html-imagem-global .html-imagem-upload-preview-imagem {
        height: 140px;
    }

}

@media(max-width: 480px){

    .html-imagem-global .html-imagem-upload-preview-cabecalho {
        align-items: flex-start;
    }

    .html-imagem-global .html-imagem-upload-preview-lista {
        grid-template-columns: 1fr;
    }

    .html-imagem-global .html-imagem-upload-preview-imagem {
        height: 220px;
    }

}

/*
 * ============================================================
 * WRAPPER
 * ============================================================
 */
.html-imagem-global {
    box-sizing: border-box;
}

.html-imagem-global *,
.html-imagem-global *:before,
.html-imagem-global *:after {
    box-sizing: border-box;
}

.html-imagem-global .html-imagem-panel > .content_planos {
    border: 1px solid #e2e7ed;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 3px 12px rgba(0,0,0,.05);
    overflow: hidden;
}

.html-imagem-global .html-imagem-panel .card-box {
    border: 0 !important;
    box-shadow: none !important;
}


/*
 * ============================================================
 * HEADER DO PANEL
 * ============================================================
 */
.html-imagem-global .html-imagem-panel .page-header-card {
    min-height: 58px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
    padding: 11px 16px !important;
    background: #FFF !important;
    border: 0 !important;
    border-bottom: 1px solid #e9edf2 !important;
}

.html-imagem-global .html-imagem-panel .panel-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.html-imagem-global .html-imagem-panel .panel-title-icon {
    width: 38px;
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1ecff;
    border-radius: 9px;
    color: #7929b1;
    font-size: 15px;
}

.html-imagem-global .html-imagem-panel .panel-title-main {
    color: #303742;
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
}


/*
 * ============================================================
 * BODY
 * ============================================================
 */
.html-imagem-global .html-imagem-panel .panel-body-custom {
    display: block !important;
    padding: 14px !important;
    background: #FFF;
}

.html-imagem-global-conteudo {
    width: 100%;
}


/*
 * ============================================================
 * UPLOAD
 * ============================================================
 */
.html-imagem-upload-area {
    width: 100%;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #dfe5eb;
    border-radius: 8px;
}

.html-imagem-upload-main {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.html-imagem-upload-icone {
    width: 46px;
    min-width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef4ff;
    border: 1px solid #d9e6fb;
    border-radius: 10px;
    color: #337ab7;
    font-size: 20px;
}

.html-imagem-upload-textos {
    width: 190px;
    min-width: 190px;
}

.html-imagem-upload-textos strong {
    display: block;
    color: #303742;
    font-size: 12px;
    line-height: 17px;
}

.html-imagem-upload-textos span {
    display: block;
    margin-top: 3px;
    color: #8b929a;
    font-size: 11px;
    line-height: 11px;
}


/*
 * INPUT
 * ============================================================
 */
.html-imagem-upload-input {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.html-imagem-upload-input .classe_imagem_global_destino {
    height: 42px !important;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #d9dee5 !important;
    border-right: 0 !important;
    border-radius: 6px 0 0 6px !important;
    background: #FFF !important;
    box-shadow: none !important;
    color: #666;
    font-size: 12px;
}

.html-imagem-btn-selecionar {
    min-width: 165px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 12px !important;
    border-radius: 0 6px 6px 0 !important;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.html-imagem-btn-selecionar i {
    font-size: 13px;
}

.html-imagem-btn-selecionar span {
    font-size: 10px;
    font-weight: bold;
}

.html-imagem-btn-selecionar .input_remove_ {
    position: absolute;
    inset: 0;
}

.html-imagem-btn-selecionar input[type='file'] {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}


/*
 * ============================================================
 * REGRAS RÁPIDAS
 * ============================================================
 */
.html-imagem-regras {
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.html-imagem-regra {
    flex: 1 1 33%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 50px;
    padding: 8px 10px;
    background: #FFF;
    border: 1px solid #e1e6eb;
    border-radius: 7px;
}

.html-imagem-regra-icone {
    width: 30px;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f1fb;
    border-radius: 6px;
    color: #7929b1;
    font-size: 12px;
}

.html-imagem-regra small {
    display: block;
    color: #9ba1a7;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
}

.html-imagem-regra strong {
    display: block;
    margin-top: 2px;
    color: #4c5258;
    font-size: 10px;
    line-height: 10px;
    word-break: break-word;
}


/*
 * ============================================================
 * IA
 * ============================================================
 */
.html-imagem-ia-botao {
    width: 100%;
    min-height: 55px;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px !important;
    border-radius: 7px;
}

.html-imagem-ia-botao img {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.html-imagem-ia-botao span {
    min-width: 0;
}

.html-imagem-ia-botao strong {
    display: block;
    font-size: 10px;
    line-height: 14px;
}

.html-imagem-ia-botao small {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    line-height: 12px;
    font-weight: normal;
}


/*
 * ============================================================
 * ALERTAS
 * ============================================================
 */
.html-imagem-alertas {
    width: 100%;
    margin-top: 12px;
}

.html-imagem-alertas .alert {
    margin-bottom: 7px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

.html-imagem-alertas .panel,
.html-imagem-alertas .card {
    margin-bottom: 7px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    overflow: hidden;
}


/*
 * ============================================================
 * PREVIEW ATUAL
 * ============================================================
 */
.html-imagem-preview-atual {
    width: 100%;
    margin-top: 12px;
}

.html-imagem-preview-titulo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.html-imagem-preview-titulo > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

.html-imagem-preview-titulo i {
    color: #337ab7;
}

.html-imagem-preview-titulo strong {
    color: #555;
    font-size: 11px;
}

.html-imagem-preview-box {
    width: 100%;
    padding: 10px;
}

.html-imagem-preview-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.html-imagem-preview-img {
    max-width: 100% !important;
    height: auto;
    border-radius: 5px;
}

.html-imagem-preview-acoes {
    margin-top: 9px;
}

.html-imagem-remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 5px !important;
}

.html-imagem-sem-imagem {
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-top: 10px !important;
    padding: 9px 10px !important;
    background: #fff8f8;
    border: 1px solid #f0d4d4;
    border-radius: 6px;
}

.html-imagem-sem-imagem input {
    margin: 0 !important;
}

.html-imagem-sem-imagem strong {
    display: block;
    color: #a94442;
    font-size: 10px;
}

.html-imagem-sem-imagem small {
    display: block;
    margin-top: 2px;
    color: #999;
    font-size: 8px;
    font-weight: normal;
}


/*
 * ============================================================
 * RESPONSIVO
 * ============================================================
 */
@media(max-width: 767px){

    .html-imagem-upload-main {
        display: block;
    }

    .html-imagem-upload-icone {
        margin-bottom: 8px;
    }

    .html-imagem-upload-textos {
        width: 100%;
        min-width: 100%;
        margin-bottom: 9px;
    }

    .html-imagem-upload-input {
        width: 100%;
    }

    .html-imagem-btn-selecionar {
        min-width: 130px;
    }

    .html-imagem-regras {
        display: block;
    }

    .html-imagem-regra {
        width: 100%;
        margin-bottom: 6px;
    }

}

/*
 * #########################################################
 * ICONE PICKER GLOBAL
 *
 * IMPORTANTE:
 * TODAS AS REGRAS ESTÃO PRESAS A .icone-picker-global
 * PARA NÃO INTERFERIR NAS LISTAGENS DO PAINEL.
 * #########################################################
 */

.icone-picker-global .icone-picker-item.icone-picker-item-filtrado {
    display: none !important;
}

.icone-picker-global {
    width: 100% !important;
    position: relative !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.icone-picker-global *,
.icone-picker-global *:before,
.icone-picker-global *:after {
    box-sizing: border-box !important;
}

.icone-picker-global .icone-picker-select-real {
    display: none !important;
}


/*
 * #########################################################
 * BOTÃO PRINCIPAL
 * #########################################################
 */

.icone-picker-global .icone-picker-botao {
    width: 100% !important;
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #FFF !important;
    border: 1px solid #dce2e7 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.04) !important;
    color: #333 !important;
    text-align: left !important;
    cursor: pointer !important;
    outline: none !important;
    overflow: hidden !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}

.icone-picker-global .icone-picker-botao:hover,
.icone-picker-global.icone-picker-aberto .icone-picker-botao {
    background: #fdfbff !important;
    border-color: #9465bd !important;
    box-shadow: 0 4px 12px rgba(112,38,170,.10) !important;
}

.icone-picker-global .icone-picker-botao-preview {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 7px !important;
    background: #f5effa !important;
    border: 1px solid #e9dcf3 !important;
    border-radius: 8px !important;
    color: #7026aa !important;
    overflow: hidden !important;
}

.icone-picker-global .icone-picker-botao-preview svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    margin: 0 !important;
}

.icone-picker-global .icone-picker-botao-preview > i {
    font-size: 21px !important;
    line-height: 1 !important;
}

.icone-picker-global .icone-picker-botao-preview-vazio {
    color: #999 !important;
    background: #f7f7f7 !important;
    border-color: #e5e5e5 !important;
}

.icone-picker-global .icone-picker-botao-conteudo {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
}

.icone-picker-global .icone-picker-botao-conteudo strong {
    display: block !important;
    margin: 0 !important;
    color: #3e454b !important;
    font-size: 10px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.icone-picker-global .icone-picker-botao-conteudo small {
    display: block !important;
    margin-top: 2px !important;
    color: #92999f !important;
    font-size: 8px !important;
    line-height: 12px !important;
    font-weight: normal !important;
}

.icone-picker-global .icone-picker-botao-seta {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    background: #f5f5f5 !important;
    border-radius: 50% !important;
    color: #777 !important;
}

.icone-picker-global .icone-picker-botao-seta i {
    transition: transform .15s ease !important;
}

.icone-picker-global.icone-picker-aberto .icone-picker-botao-seta i {
    transform: rotate(180deg) !important;
}


/*
 * #########################################################
 * PAINEL FLUTUANTE
 * #########################################################
 */

.icone-picker-global .icone-picker-painel {
    width: 460px !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
    display: none !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFF !important;
    border: 1px solid #dce1e6 !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28) !important;
    overflow: hidden !important;
}

.icone-picker-global .icone-picker-painel.icone-picker-painel-aberto {
    display: block !important;
}


/*
 * #########################################################
 * CABEÇALHO
 * #########################################################
 */

.icone-picker-global .icone-picker-painel-header {
    width: 100% !important;
    min-height: 57px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 9px 10px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e4e8ec !important;
}

.icone-picker-global .icone-picker-painel-header-icone {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1e9f8 !important;
    border-radius: 7px !important;
    color: #7026aa !important;
}

.icone-picker-global .icone-picker-painel-header-texto {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.icone-picker-global .icone-picker-painel-header-texto strong {
    display: block !important;
    color: #3f454b !important;
    font-size: 10px !important;
    line-height: 14px !important;
}

.icone-picker-global .icone-picker-painel-header-texto span {
    display: block !important;
    margin-top: 2px !important;
    color: #92999f !important;
    font-size: 8px !important;
    line-height: 11px !important;
}

.icone-picker-global .icone-picker-fechar {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #FFF !important;
    border: 1px solid #e1e4e7 !important;
    border-radius: 7px !important;
    color: #777 !important;
    cursor: pointer !important;
}

.icone-picker-global .icone-picker-fechar:hover {
    background: #f8eded !important;
    border-color: #efd0d0 !important;
    color: #c9302c !important;
}


/*
 * #########################################################
 * BUSCA
 * #########################################################
 */

.icone-picker-global .icone-picker-busca {
    width: calc(100% - 20px) !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 10px !important;
    padding: 0 !important;
    background: #FFF !important;
    border: 1px solid #dce1e5 !important;
    border-radius: 7px !important;
    overflow: hidden !important;
}

.icone-picker-global .icone-picker-busca:focus-within {
    border-color: #9465bd !important;
    box-shadow: 0 0 0 2px rgba(112,38,170,.07) !important;
}

.icone-picker-global .icone-picker-busca > i {
    width: 37px !important;
    min-width: 37px !important;
    flex: 0 0 37px !important;
    text-align: center !important;
    color: #888 !important;
}

.icone-picker-global .icone-picker-busca-input {
    width: auto !important;
    height: 38px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 8px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #444 !important;
    font-size: 10px !important;
}

.icone-picker-global .icone-picker-busca-input:focus {
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}


/*
 * #########################################################
 * LIMPAR
 * #########################################################
 */

.icone-picker-global .icone-picker-limpar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 10px 8px 10px !important;
}


/*
 * #########################################################
 * GRID
 * #########################################################
 */

.icone-picker-global .icone-picker-grid {
    width: 100% !important;
    max-height: min(350px, calc(100vh - 190px)) !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 8px 10px 12px 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

.icone-picker-global .icone-picker-grid::-webkit-scrollbar {
    width: 7px !important;
}

.icone-picker-global .icone-picker-grid::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
}

.icone-picker-global .icone-picker-grid::-webkit-scrollbar-thumb {
    background: #c9c9c9 !important;
    border-radius: 10px !important;
}


/*
 * #########################################################
 * ITEM
 * #########################################################
 */

.icone-picker-global .icone-picker-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 88px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 8px 5px !important;
    background: #FFF !important;
    border: 1px solid #e1e5e9 !important;
    border-radius: 8px !important;
    color: #555 !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

.icone-picker-global .icone-picker-item:hover {
    background: #faf7fc !important;
    border-color: #ba96d6 !important;
    box-shadow: 0 3px 9px rgba(112,38,170,.08) !important;
    transform: translateY(-1px) !important;
}

.icone-picker-global .icone-picker-item-preview {
    width: 37px !important;
    min-width: 37px !important;
    max-width: 37px !important;
    height: 37px !important;
    min-height: 37px !important;
    max-height: 37px !important;
    flex: 0 0 37px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    color: #7026aa !important;
    overflow: hidden !important;
}

.icone-picker-global .icone-picker-item-preview svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

.icone-picker-global .icone-picker-item-preview > i {
    font-size: 25px !important;
    line-height: 1 !important;
}

.icone-picker-global .icone-picker-item-titulo {
    width: 100% !important;
    display: block !important;
    color: #555 !important;
    font-size: 8px !important;
    line-height: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.icone-picker-global .icone-picker-item-check {
    width: 20px !important;
    height: 20px !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    background: #7026aa !important;
    border-radius: 50% !important;
    color: #FFF !important;
    font-size: 8px !important;
}

.icone-picker-global .icone-picker-item-ativo {
    background: #f7f1fb !important;
    border-color: #7026aa !important;
    box-shadow: inset 0 0 0 1px #7026aa !important;
}

.icone-picker-global .icone-picker-item-ativo .icone-picker-item-check {
    display: flex !important;
}


/*
 * #########################################################
 * SEM ICONE
 * #########################################################
 */

.icone-picker-global .icone-picker-item-sem-icone {
    min-height: 42px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px 9px !important;
}

.icone-picker-global .icone-picker-item-sem-icone .icone-picker-item-preview {
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;
    flex: 0 0 27px !important;
    margin: 0 !important;
    color: #999 !important;
}

.icone-picker-global .icone-picker-item-sem-icone .icone-picker-item-titulo {
    width: auto !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}


/*
 * #########################################################
 * SEM RESULTADOS
 * #########################################################
 */

.icone-picker-global .icone-picker-vazio {
    display: none;
    width: 100% !important;
    padding: 30px 10px !important;
    color: #999 !important;
    text-align: center !important;
}

.icone-picker-global .icone-picker-vazio i {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 25px !important;
}

.icone-picker-global .icone-picker-vazio strong {
    display: block !important;
    color: #777 !important;
    font-size: 10px !important;
}

.icone-picker-global .icone-picker-vazio span {
    display: block !important;
    margin-top: 3px !important;
    font-size: 8px !important;
}


/*
 * #########################################################
 * RESPONSIVO
 * #########################################################
 */

@media(max-width: 767px){

    .icone-picker-global .icone-picker-painel {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }

    .icone-picker-global .icone-picker-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        max-height: calc(100vh - 190px) !important;
    }

    .icone-picker-global .icone-picker-item {
        min-height: 82px !important;
    }

}

@media(max-width: 420px){

    .icone-picker-global .icone-picker-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}

/* BOOTSTRAP 5 INLINE HELPERS */

.d-flex{
    display:flex!important;
}

.d-block{
    display:block!important;
}

.justify-content-between{
    justify-content:space-between!important;
}

.justify-content-center{
    justify-content:center!important;
}

.align-items-center{
    align-items:center!important;
}

.align-items-start{
    align-items:flex-start!important;
}

.align-items-end{
    align-items:flex-end!important;
}

.flex-column{
    flex-direction:column!important;
}

.text-right{
    text-align:right!important;
}

.position-relative{
    position:relative!important;
}

.overflow-hidden{
    overflow:hidden!important;
}

.w-100{
    width:100%!important;
}

.h-100{
    height:100%!important;
}


.bloco_html_personalizado {
    display: grid;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
}

.bloco_html_personalizado_1 {
    display: flex;
    flex-grow: 1;
    float: left;
    text-indent: 0 !important;
    gap: 5px;

    padding-bottom: 0;
    padding-top: 0px;
    margin-top: 0;
    margin-bottom: 0px;
    border-bottom: none;
    align-items: center;
}

.icones_mp_personalizado {
    width: 32px;
    height: 32px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: all .15s ease;
    flex-shrink: 0;
    overflow: hidden;
}

.icones_mp_personalizado i, 
.icones_mp_personalizado img, 
.icones_mp_personalizado svg {
    max-width: 85%;
    max-height: 85%;
    color: #495057;
    fill: #495057;
    font-size: 18px;
}

.span_class_personalizado i, 
.span_class_personalizado img, 
.span_class_personalizado svg {
    max-width: 85%;
    max-height: 85%;
    color: #495057;
    fill: #495057;
    font-size: 18px;
}

.span_class_personalizado .fa {
    font-size: 12px;
    border-radius: 100px;
    color: #FFF;
    height: 20px;
    float: left;
    width: 20px;
    display: flex !important;
    align-items: center;
    text-align: center;
    justify-content: center;
    line-height: 20px;
    background: #22c55e;
}

.span_class_personalizado {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    background: #FFF;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 20px;
    text-indent: 0 !important;
    transition: all .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
    cursor: pointer;
    position: relative;
    width: 100%;
}

code,
pre {
    overflow: auto;
    max-height: 500px;
    text-align: left !important;
    padding: 10px;
    margin: 0 0 0px !important;
}

.swal2-html-container .tamanho_arquivos span {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 10px !important;
}

/* hover leve */
.alert:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}

/* SUCCESS */
.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #34d399;
}

/* DANGER */
.alert-danger {
    background: #fef2f2;
    color: #7f1d1d;
    border: 1px solid #f87171;
}

/* WARNING */
.alert-warning {
    background: #fffbeb;
    color: #78350f;
    border: 1px solid #fbbf24;
}

/* INFO */
.alert-info {
    background: #eff6ff;
    color: #1e3a8a;
    border: 1px solid #93c5fd;
}

/* PRIMARY */
.alert-primary {
    background: #eef2ff;
    color: #312e81;
    border: 1px solid #a5b4fc;
}

/* SECONDARY */
.alert-secondary {
    background: #f9fafb;
    color: #374151;
    border: 1px solid #d1d5db;
}

/* opcional: barra lateral */
.alert-left {
    border-left: 4px solid currentColor;
}

.btn3d i{
    font-size: 18px;
}

.btn3d {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;

    border: none;
    border-radius: 10px;

    cursor: pointer;
    overflow: hidden;

    transition: all 0.2s ease;

    /* visual moderno */
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);

    /* sombra suave */
    box-shadow: 
    0 6px 20px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
}

/* hover */
.btn3d:hover {
    transform: translateY(-2px);
    box-shadow: 
    0 10px 25px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* clique */
.btn3d:active {
    transform: translateY(1px);
    box-shadow: 
    0 3px 10px rgba(0,0,0,0.2),
    inset 0 2px 4px rgba(0,0,0,0.2);
}

/* ripple fake (só CSS) */
.btn3d::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.btn3d:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.6s ease;
}

/* focus clean */
.btn3d:focus {
    outline: none;
}

/* ================= CORES ================= */

.btn3d.btn-primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
}

.btn3d.btn-success {
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff;
}

.btn3d.btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
}

.btn3d.btn-warning {
    background: linear-gradient(135deg, #facc15, #eab308);
    color: #000;
}

.btn3d.btn-info {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    color: #fff;
}

.btn3d.btn-default {
    background: #f3f4f6;
    color: #333;
}

.btn3d.btn-white {
    background: #ffffff;
    color: #333;
    border: 1px solid rgba(0,0,0,0.05);
}

.btn3d.btn-magick {
    background: linear-gradient(135deg, #a855f7, #6d28d9);
    color: #fff;
}
.painel .swal2-popup pre,
.painel .swal2-popup code {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.painel .swal2-popup {
    width: 50% !important   
}

.swal2-html-container b{
    text-transform: uppercase;

}

.ms-drop ul > li:hover{
    background-color: #efefef !important;  
}
.ms-drop ul > li label{
    position: relative !important;
    cursor: pointer !important;
}
.ms-drop ul > li label span{
    display: flex !important;
    align-items: center !important;
}

.ms-drop ul > li label span b{
    font-weight: normal !important;
    font-size: 15px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    line-height: 50px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.attributes-material select{
    line-height: 38px !important;
    height: 38px !important;
    border: 1px solid #a1a0a0 !important;
    border-radius: 0;
    font-size: 13px;
}

div.ms-parent{
    padding:0px !important;
    z-index: 10 !important;
    flex-direction: column !important;
}
div.ms-parent.open_select{
    z-index: 11 !important;
}
div.ms-parent div.ms-drop ul > li label input[type=radio]{
    display:inline-block !important;
    vertical-align:middle !important;
    margin-right: 5px !important;
    margin-top:0px !important;
    position: absolute !important;
    opacity: 0 !important;
}
div.ms-parent button.ms-choice{
    line-height: 38px !important;
    height: 38px !important;
    border: 1px solid #a1a0a0 !important;
    border-radius: 0;
    font-size: 13px;
}
div.ms-parent button.ms-choice > div{
    top:4px !important;
}
div.ms-parent div.ms-drop.bottom{
    top:1px !important;
    border-radius:0px !important;
    z-index: 999 !important;
}

.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>h4, 
.navbar-nav>.messages-menu>.dropdown-menu>li .menu>li>a>p {
    margin: 0px !important;
    overflow: hidden !important;
}

div.ms-parent div.ms-drop ul > li{
    margin: 10px 0 !important;
}

.icon_textura_select {
    width: 50px !important;
    height: 50px !important;
    display: inline-block !important;
    background-position: center !important;
    background-size: 50px 50px !important;
    border: solid 1px #DFDFDF !important;
}
.ms-drop ul {
    overflow: auto !important;
    margin: 0 !important;
    padding: 0px 0px !important;
}

div.ms-parent div.ms-drop ul > li {
    margin: 0px 0 0px 0px !important;
}

div.ms-parent div.ms-drop ul > li {
    margin: 0px 0 0px 0px !important;
    padding: 10px 10px 10px 10px !important;
    border-bottom: 1px #dfdfdf solid !important;
}

.ms-drop ul > li label {
    font-weight: normal !important;
    display: block !important;
    white-space: nowrap !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.icon_textura_select {
    width: 50px !important;
    height: 50px !important;
    display: inline-block !important;
    background-position: center !important;
    background-size: 50px 50px !important;
    margin-right: 10px !important;
}

.multipleSelect_cor- li svg,
.multipleSelect_cor li svg{
    width: 30px !important;
    height: 30px !important;
    margin-right: 5px !important;
}

.box_shadow {
    border: none;
    background: #FFF;
    color: #000;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    position: relative;
}

.infoColorTable {
    display: flex;
    align-content: center;
    align-items: center;
}

.infoColorTable i {
    width: 25px;
    height: 25px;
    border: 1px solid #dddddd;
    margin-right: 5px;
}

html .tag-discount {
    margin: 2px 5px 5px 5px;
    align-items: anchor-center;
    padding: 5px 10px;
    font-size: 11px;
    background: #FFF;
    color: #000;
    position: relative;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    display: flex;
    align-items: center;
}

.col_12_botoes_configuracoes_input{
    float: left;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
    position: relative;
    display: flex !important;
    align-items: stretch !important; 
}

.col_12_botoes_configuracoes{
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
    position: relative;
    display: flex !important;
    align-items: stretch !important; 
}

.card-box.box-to-animate {
    float: left !important;
    border: none;
    background: #FFF;
    color: #000;
    text-indent: 0 !important;
    align-items: center;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow .2s ease-out 0s,border .2s ease-out,border-radius .2s ease-out,background-color .1s ease-out,color .1s ease-out,transform .1s ease-out;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    margin-bottom: 10px;
    text-align: left;
    flex-direction: column;
}

html body .content_planos h3{
    margin: 0px 0px 0px 0px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: left;
    width: 100%;
    background: #efefef69;
}

html body .page-header {
    border-bottom: none !important;
    border-top: none !important;
}

html body .content_planos h3 .btn3d{
    margin-bottom: 0 !important;
}

.tags_painel_iguais {
    display: flex;
    align-items: stretch; /* ou use 'center' se quiser alinhamento centralizado */
    gap: 8px; /* opcional: espaçamento entre os elementos */
}

.tags_padrao_v2 {
    color: #000;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    background: #FFF;
    float: left;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    touch-action: manipulation;
    transition: box-shadow .2s ease-out 0s, border .2s ease-out, border-radius .2s ease-out, background-color .1s ease-out, color .1s ease-out, transform .1s ease-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    text-transform: uppercase;
}

.topo-sidebar-novo-h3{
    background-color: #efefef;
    border-color: #DFDFDF;
    color: #000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 15px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) !important;
}

.classe_striped_impar {
    background-color: #efefef !important;
}

.classe_striped_par {
    background-color: #ffffff !important;
}

.panel-graficos label,
.panel-graficos select,
.panel-graficos input,
.panel-graficos textarea {
    width: 100%;
}

.panel-graficos label {
    text-transform: uppercase;
    display: flex;
    align-items: center;
}

html .swal2-modal .swal2-header {
    padding: 0 !important;
}

html .hr_alertas {
    border-top: 1px solid #eee !important;
    padding: 15px 0px 0px 0px;
    margin: 10px 0;
    float: left;
    width: 100%;
}

html .swal2-modal .swal2-content {
    font-size: 15px !important;
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
}

html .swal2-modal .swal2-title {
    font-size: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #eee !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
}

html .swal2-modal .swal2-icon {
    margin: 0.25em auto 0.875em !important;
}

.remover_item_kit {
    position: absolute;
    right: 5px;
    top: 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 1111;
}

html .bootstrap-select .dropdown-menu > li > a {
    line-height: 1.42857143 !important;
    width: 100% !important;
    clear: both !important;
    font-weight: 600 !important;
    color: #212529 !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    border: 1px solid #e9ecef !important;
    float: left !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    position: relative !important;
}


.table .thead-dark th {
    color: #fff;
    background-color: #212529;
    border-color: #32383e;
}

.accordion_na_table {
    display: flex;
    align-items: center;
}

.table-container-scroll input{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.swal2-actions button{
    margin-left: 10px;
}

.view_banners_globais_templates a,
.view_banners_globais_templates .item_banner_img a,
.view_banners_globais_templates .item_banner_img picture{
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
}

.item_banner_img {
    position: relative;
    overflow: hidden;
}

.item_banner_img_painel {
    background: #FFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

.item_banner_img img,
.item_banner_img a img {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.item_banner_img:hover img,
.item_banner_img:hover a img{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.item_banner_img a,
.item_banner_img picture{
    display: flex;
    align-items: center;
    justify-content: center;
}

.constructMenu_drop .elementos-menu-departamentos {
    align-items: initial !important
}

.card-box.box-to-animate .div_datas{
    justify-content: center;
}

input[type=checkbox],
input[type=radio] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
}

div.dataTables_filter {
    position: relative;
}

input[id^="search_table"] {
    float: left !important;
    background: #FFF;
    color: #000;
    text-indent: 0 !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    touch-action: manipulation;
    transition: box-shadow .2s ease-out 0s,border .2s ease-out,border-radius .2s ease-out,background-color .1s ease-out,color .1s ease-out,transform .1s ease-out;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    text-align: left;
    height: 45px;
    width: 100%;
}

.tree_arvore input[type=checkbox], 
.tree_arvore input[type=radio]{
    width: 20px;
    height: 20px;
}

.map_destacado {
    opacity: 1 !important;
    border-bottom: 5px dashed red !important;
    border-top: 5px dashed red !important;
    border-left: 5px dashed red !important;
    border-right: 5px dashed red !important;
}

@keyframes serrilhar {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

@keyframes pulso {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.copy-btn-absolute {
    right: 0;
    position: absolute;
}

.table-container-not-scroll table,
.table-container-scroll,
.table-container-scroll-hide {
    width: 100%;
    float: left;
    background: #FFF;
    color: #000;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    border-radius: 0px;
    touch-action: manipulation;
    transition: box-shadow .2s ease-out 0s, border .2s ease-out, border-radius .2s ease-out, background-color .1s ease-out, color .1s ease-out, transform .1s ease-out;
    position: relative;
}

.table-container-scroll table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.table-container-scroll thead {
    position: sticky;
    top: 0;
    background: #FFF;
    z-index: 1;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    display: table;
    width: 100%;
    table-layout: fixed;
    text-transform: uppercase;
}

.table-container-scroll tbody {
    display: block;
    max-height: 500px;
    overflow-y: auto;
    width: 100%;
}

.table-container-scroll tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.table-container-scroll th,
.table-container-scroll td {
    padding: 8px;
    text-align: left;
}

.table-container-scroll thead th {
    display: table-cell;
}

.table-container-scroll tbody td {
    display: table-cell;
}

.table-container-scroll img {
    width: 70px;
}

.tamanho_arquivos .fa{
    font-size: 12px;
    border-radius: 100px;
    color: #FFF;
    height: 20px;
    float: left;
    width: 20px;
    display: flex !important;
    align-items: center;
    text-align: center;
    justify-content: center;
    line-height: 20px;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    
}

.tamanho_arquivos .check{
    background: green;
}

.tamanho_arquivos .fa-close{
    background: red;
}

.tamanho_arquivos span b{

    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    font-size:12px;
    font-weight:600;

    border-radius:20px;

    background:#f8f9fa;

    color:#495057;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:
    0 1px 2px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.6);

    transition:all .15s ease;
}

/* hover */

.tamanho_arquivos span b:hover{

    background:#ffffff;

    transform:translateY(-1px);

    box-shadow:
    0 4px 10px rgba(0,0,0,.08);
}

.data_programada{
    background: #e7f1ff !important;
    color: #1c4ed8 !important;
    border: 1px solid #c7dbff !important;
}

.tamanho_arquivos span b svg{
    width: 30px;
    height: 30px;
}

table th div,
table td div {
    word-wrap: break-word;;
}

.tamanho_arquivos strong {
    margin-right: 5px;
    white-space: pre-line;
    text-align: left;
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right 12px center;
    background-size: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select:focus {
    border-color: #8c8c8c;
    outline: 0;
    box-shadow: none;
}

.custom-select option {
    font-weight: normal;
}

.custom-select::placeholder {
    color: #6c757d;
}

.hidden {
    display: none;
}

#carrinho-frete-opcao td,
#carrinho-frete-opcao th{
    position: relative !important;
}

#carrinho-frete-opcao .tag-discount{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: max-content !important;
    left: auto !important;
    margin: 0 !important;
}

#carrinho-frete-opcao .tag-discount{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: max-content !important;
    left: auto !important;
    margin: 0 !important;
    font-size: 10px !important;
}

#carrinho-frete-opcao .tag-discount.chegara{
    position: relative !important;
    margin-top: 10px !important;
}

pre {
    white-space: break-spaces !important;
}

.botoes_topo_3d .btn3d {
    margin-bottom: 0px !important;
    border-bottom: 3px solid rgba(0,0,0,0.2) !important;
    border-radius: 3px !important;
}

.painel .botoes_topo_3d .btn3d {
    margin-bottom: 0px !important;
    border-bottom: 3px solid rgba(0,0,0,0.2) !important;
    border-radius: 3px !important;
    margin-left: 10px !important;
}

.float_100_flex_top {
    display: flex;
    float: left;
    width: 100%;
}


.float_100_flex {
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
}

.float_100_flex_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    float: left;
    width: 100%;
}

html .tag-discount b{
    margin-right: 5px;
}


html .flex {
    display: flex !important;
    align-items: center !important;
}

html .tag-discount.b {
    font-weight: bold;
}

html .selos-flutuantes .tag-discount b {
    border: none !important;
}

.tag-discount.center{
    display: block !important;
    text-align: center !important;
    float: inherit !important;
}

.painel .infoColorTable {
    display: block !important;
    align-content: center;
    align-items: center;
    float: left !important;
}

.painel .infoColorTable i {
    width: 25px;
    height: 25px;
    border: 1px solid #dddddd;
    margin-right: 5px;
    float: left !important;
}

.bloco_html_1 input,
.bloco_html_1 span {

    display:inline-flex;
    align-items:center;

    padding:6px 12px;

    font-size:12px;
    font-weight:500;

    color:#495057;

    background:#f8f9fa;

    border:1px solid rgba(0,0,0,.08);

    border-radius:20px;

    text-indent:0 !important;

    transition:all .15s ease;

    box-shadow:
    0 1px 2px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.6);

    cursor:pointer;

    position:relative;
}

/* hover */

.bloco_html_1 input:hover,
.bloco_html_1 span:hover {

    background:#ffffff;

    transform:translateY(-1px);

    box-shadow:
    0 4px 10px rgba(0,0,0,.08);

}

.dropdown-menu-listagem-geral li {
    position: relative;
}

.box-authentication h3 {
    border-bottom: 1px solid #dfdfdf !important;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
}

.view_bloco_buscar_cliente_afiliado {
    border: solid 1px #DFDFDF;
    border-radius: 10px;
    color: #000;
}

.view_bloco_buscar_cliente_afiliado h2{
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
}

.view_bloco_buscar_cliente_afiliado svg{
    width: 35px;
    height: 35px;
    fill: #000;
    margin-right: 10px;
    color: #000;
}

.view_bloco_buscar_cliente_afiliado button{
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    color: #FFF;
    background: #000;
}

.view_bloco_buscar_cliente_afiliado button svg{
    width: 20px;
    height: 20px;
    fill: #FFF;
    margin-right: 10px;
    color: #FFF;
}

.view_bloco_buscar_cliente_afiliado .view_bloco_buscar_cliente_afiliado_bloco{
    color: #000;
}

.view_bloco_buscar_cliente_afiliado .view_bloco_buscar_cliente_afiliado_titulo_1 {
    font-size: 18px;
}

.input-group {
    width: 100%;
}

html body .panel.panel-primary {
    border-color: #6D29A4;
    margin-top: 0px;
    border-radius: 5px;
    border: solid 1px;
    float: left;
    width: 100%;
}

.borda-row {
    padding: 0 0px;
    float: left;
    width: 100%;
    cursor: pointer;
    position: relative;
    height: 100%;
    background: #FFF;
    color: #000;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px;
}

html .topo-sidebar-novo-painel,
html .topo-sidebar-novo {
    float: left;
    width: 100%;
    padding: 15px;
    text-align: left;
}

.div-info {
    padding: 15px;
    float: left;
    width: 100%;
    border: none;
    background: #FFF;
    color: #000;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px;
}

.div_span_validacoes {
    display: flex;
    align-items: center;
    float: left;
    width: 100%;
}

.swal2-content b {
    font-weight: bold;
    color: red;
}

.table-bordered>tbody>tr>td, 
.table-bordered>tbody>tr>th, 
.table-bordered>tfoot>tr>td, 
.table-bordered>tfoot>tr>th, 
.table-bordered>thead>tr>td, 
.table-bordered>thead>tr>th {
    vertical-align: middle;
}

.get_html_alert_global_ .panel-title {
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-between;
}

pre {
    width: 100%;
    float: left;
}

.red_color {
    color: red !important;
}


.titulo_do_produto {
    color: black;
    float: left;
    width: 100%;
    font-weight: bold;
    font-size: 13px !important;
}

.titulo_do_produto span:not(.tag_),
.tamanho_arquivos span{
    float: left;
    width: 100%;
    display: flex;
    align-items: center;
    flex-flow: wrap;
}

.titulo_do_produto span:not(.tag_) small,
.tamanho_arquivos span  small{
    color: red;
    font-size: 12px;
}


.titulo_do_produto span.label,
.tamanho_arquivos span.label{
    border-bottom: 1px solid #eee;
    float: left;
    width: 100%;
    display: block;
    align-items: center;
    flex-flow: wrap;
}

.titulo_do_produto span.label small,
.tamanho_arquivos span.label  small{
    color: red;
    font-size: 12px;
}

html .botoes_configuracoes_modulos_span{
    float: left !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    margin-bottom: 10px;
    white-space: pre-line;
    text-align: center;
}

html .botoes_configuracoes_modulos_span figure{
    width: 70px;
    height: 70px;
    overflow: hidden;
    position: relative;
    border: solid 1px #DFDFDF;
    background: #FFF;
    border-radius: 100px;
}

html figure.botoes_configuracoes_modulos_span{
    width: 70px !important;
    height: 70px !important;
    overflow: hidden !important;
    position: relative !important;
    border: solid 1px #DFDFDF !important;
    background: #FFF !important;
    border-radius: 100px !important;
}

html .botoes_configuracoes_modulos_span figure img{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
}

.bloco_html {
    display: grid;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
}

.bloco_html_1 {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
    margin-bottom: 0px;
    border-bottom: solid 1px #DFDFDF;
    padding-bottom: 5px;
    float: left;
    padding-top: 0px;
    margin-top: 5px;
    text-indent: 0 !important;
    gap: 5px;
    z-index: 1;
}

.icones_mp {

    width:32px;
    height:32px;

    background:#f8f9fa;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 1px 2px rgba(0,0,0,.05);

    transition:all .15s ease;

    flex-shrink:0;

    overflow:hidden;
}

/* hover ícone */

.icones_mp:hover{

    background:#ffffff;

    transform:translateY(-1px);

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.icones_mp i,
.icones_mp img,
.icones_mp svg {

    max-width:85%;
    max-height:85%;

    color:#495057;
    fill:#495057;

    font-size:18px;

}

.float_100_alert {
    justify-content: center;
}

.float_100_alert b{
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.get_html_alert_global_[class*="alert-"] strong {
    color: black !important;
    font-weight: bold !important;
}

.get_html_alert_global_[class*="alert-"] a,
.get_html_alert_global_[class*="alert-"] b {
    color: red !important;
    font-weight: bold !important;
}


.get_html_alert_global_[class*="alert-"] .panel-title a,
.get_html_alert_global_[class*="alert-"] .panel-title b {
    color: #FFF !important;
}

.panel-group-painel .panel-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 16px !important;
    color: inherit !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}

.content-preview-div{
    width: 100%;
    font-size: 12px;
    overflow: hidden;
}

.content-preview-div .content-preview {
    float: left;
    width: 100%;
}

.content-preview-div .content-full {
    display: none;
    float: left;
    width: 100%;
}

.expand_button__global {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  padding: 0px 12px;
  transition: all 0.3s ease-in-out;
  font-size: 20px;
  font-weight: 600;
}

.expand_button__global.expanded {
  transform: rotate(180deg);
}

.input_not_formatacao,
.input_not_formatacao .coluna_html_base{
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.input_not_formatacao label,
.input_not_formatacao .input-group-addon{
    display:none !important;
}

.required_required {
    border-color: red;
}

.valida_geral i {
    font-size: 13px;
    border-radius: 100px;
    color: #D73814;
    height: 15px;
    float: left;
    width: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background: #FFF;
    margin-right: 5px !important;
}

.valida_geral {
    background: #D73814 !important;
}


html .font_size_12{
    font-size:12px !important;
}

html .font_size_13{
    font-size:13px !important;
}

html .font_size_14{
    font-size:14px !important;
}

html .font_size_15{
    font-size:15px !important;
}

html .font_size_16{
    font-size:16px !important;
}

html .font_size_17{
    font-size:17px !important;
}

html .font_size_18{
    font-size:18px !important;
}

html .font_size_19{
    font-size:19px !important;
}

html .font_size_20{
    font-size:20px !important;
}

html .font_size_21{
    font-size:21px !important;
}

html .font_size_22{
    font-size:22px !important;
}

html .panel-heading .panel-title .bloco_html .bloco_html_1 span{
    color: green !important;
}

html .panel-primary-variacoes .panel-heading .panel-title .bloco_html .bloco_html_1 span{
    color: #FFF !important;
}

html .ol-menu-canais-venda .li_buton_a{
    background-color: #fff !important;
    border-color: #ebebeb !important;
    border-radius: 5px !important;
    color: #000 !important;
    font-weight: bold !important;
}

html .ol-menu-canais-venda .li_buton_a:hover{
    border-color: transparent;
    box-shadow: 0 0 0 2px rgb(70 0 140 / 58%);
    outline: none;
    transition: box-shadow .2s ease-out .1s,border .2s ease-out,border-radius .2s ease-out,background-color .1s ease-out,color .1s ease-out,transform .1s ease-out;
}

html .ol-menu-canais-venda .li_buton_a i{
    font-size: 15px;
    margin-right: 10px;
}

.topo-sidebar-novo-painel h2,
.topo-sidebar-novo h2{
    justify-content: space-between;
    text-transform: uppercase;
    color: #000;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.topo-sidebar-novo-painel h2 .bloco_html_11,
.topo-sidebar-novo h2 .bloco_html_11{
    display: flex;
    align-items: center;
    color: #000;
}

.ol-menu-canais-venda {
    float: left !important;
    width: 100% !important;
    list-style: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding: 15px !important;
}

.ol-menu-canais-venda li {
    float: left;
    list-style: none;
    width: 100%;
}

.ol-menu-canais-venda>li>a {
    margin: 0 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    text-align: left !important;
    cursor: pointer;
    font-weight: 600 !important;
    color: #212529 !important;
}

.ol-menu-canais-venda>li>a i {
    margin-right: 5px;
    font-size: 15px;
    color: #000;
}

.box_que_abre {
    display:none;
}

.coluna_html_base{
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.float_100_100{
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
}

.float_100_center{
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    position: relative;
    align-items: center;
    justify-content: center;
}

.float_100{
    float: left;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: stretch;
    position: relative;
}

.agrupar_botao_copiar_com_input {
    display: flex !important;
    align-items: stretch !important; 
}


.agrupar_botao_copiar_com_input a,
.agrupar_botao_copiar_com_input button{
    margin-left: 10px !important;
}


.float_100_top{
    float: left;
    width: 100%;
    position: relative;
}

/* Flex */
.flex {
    display: flex;
}

.flex-item-1 {
    flex: 1;
}

.box_table_div {
    float: left !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    padding: 0px !important;
}

.box_table_div div {
    border: solid 1px #DFDFDF !important;
    padding: 8px 5px !important;
    width: inherit;
}

.box_table_div_header {
    background-color: #EFEFEF !important;
    font-weight: bold !important;
    font-size: 13px !important;
}


.alert_carrinho_global_erros{
    margin-bottom: 0;
    text-align: left;
    text-transform: uppercase;
    font-size: 12px;
    margin-top: 0;
    word-break: break-all;
    float: left;
    width: 100%;
    display: block;
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.42857143;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    border-radius: 4px;
}

.alert_carrinho_global_erros div{
    float: left;
    width: 100%;
}

.link_edolls  {
    display: block;
    font-size: 16px;
    text-transform: uppercase;
    color: #FFF;
    background: green;
    padding: 15px;
}

.link_edolls:hover  {
    color: #FFF !important;
    background: #333 !important;
}

.linha_digital div {
    word-wrap: break-word;;
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.green-frete {
    background-color: #18bf93 !important;
    color: #FFF !important;
}

.acessar_liksn {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    margin: auto;
    border: solid 1px #DFDFDF;
    border-radius: 100px;
    width: 20px;
    height: 20px;
    background: #FFF;
    color: #333;
    text-align: center;
    font-size: 12px;
}

hr {
    float: left !important;
    width: 100% !important;
}

.summary.entry-summary,
.body {
    float: left !important;
    width: 100% !important;
    position: relative !important;

}

html #listagem-pipeline>caption+thead>tr:first-child>td, 
html #listagem-pipeline>caption+thead>tr:first-child>th, 
html #listagem-pipeline>colgroup+thead>tr:first-child>td, 
html #listagem-pipeline>colgroup+thead>tr:first-child>th, 
html #listagem-pipeline>thead:first-child>tr:first-child>td, 
html #listagem-pipeline>thead:first-child>tr:first-child>th {
    vertical-align: middle !important;
    font-size: 13px !important;
}


.alert_display_flex {
    width: 100% !important;
    float: left !important;
    display: flex;
    align-items: center;
}

html .btn-ver-loja {
    color: #007bff !important;
}

.panel-body {
    position: relative;
    padding: 15px;
    float: left;
    width: 100%;
}
.panel {
    background-color: transparent !important;
    border-radius: 4px !important;
}

.panel.panel-primary .panel-heading {
    text-transform: uppercase !important;
}

.panel-title a,
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-weight: bold;
}

.table>caption+thead>tr:first-child>td, 
.table>caption+thead>tr:first-child>th, 
.table>colgroup+thead>tr:first-child>td, 
.table>colgroup+thead>tr:first-child>th, 
.table>thead:first-child>tr:first-child>td, 
.table>thead:first-child>tr:first-child>th 
{
    vertical-align: middle !important;
}

html .text-center {
    text-align: center !important;
}

#listagem-pipeline .preco_produto{
    width: 170px !important
}

.painel .botoes_topo_3d {
    justify-content: right;
    justify-items: right;
    text-align: right;
}

.botoes_topo_3d {
    margin-bottom: 20px !important;
    float: left;
    width: 100%
}

html .colorpicker {
    z-index: 250000;
}

html .modal {
    z-index: 105099;
}
#accordion {
    float: left;
    width: 100%
}

.product-details .name-kit[data-v-e5c5a73c],
.name-kit[data-v-e5c5a73c] {
    float: left;
    width: 100%;
    border: solid 1px #DFDFDF;
    padding: 10px;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    line-height: 1.45;
}
.product-details .kit__name[data-v-e5c5a73c],
.kit__name[data-v-e5c5a73c] {
    float: left;
    width: 100%;
    color: #333;
    padding: 10px 0px;
    border-bottom: 1px #DFDFDF solid;
}

.form-cadastro .card-body {
    padding: 15px 15px 0px 10px !important;
    float: left !important;
    width: 100% !important;
}

html body .form-cadastro .box-body {
    position: relative !important;
    float: left;
    width: 100%;
}

.btn-danger-remover-geral-absolute {
    position: absolute;
    right: 0;
    z-index: 11;
}

.btn-danger-remover-geral {
    width: 30px !important;
    margin-bottom: 0 !important;
    height: 30px !important;
    background: red;
    color: #FFF;
}

/* Bootstrap 4 Display Utils */

.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}

.d-table {
    display: table !important;
}

.d-table-row {
    display: table-row !important;
}

.d-table-cell {
    display: table-cell !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.d-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
}

@media (min-width: 576px) {
    .d-sm-none {
      display: none !important;
  }
  .d-sm-inline {
      display: inline !important;
  }
  .d-sm-inline-block {
      display: inline-block !important;
  }
  .d-sm-block {
      display: block !important;
  }
  .d-sm-table {
      display: table !important;
  }
  .d-sm-table-row {
      display: table-row !important;
  }
  .d-sm-table-cell {
      display: table-cell !important;
  }
  .d-sm-flex {
      display: -ms-flexbox !important;
      display: flex !important;
  }
  .d-sm-inline-flex {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
  }
}

@media (min-width: 768px) {
    .d-md-none {
      display: none !important;
  }
  .d-md-inline {
      display: inline !important;
  }
  .d-md-inline-block {
      display: inline-block !important;
  }
  .d-md-block {
      display: block !important;
  }
  .d-md-table {
      display: table !important;
  }
  .d-md-table-row {
      display: table-row !important;
  }
  .d-md-table-cell {
      display: table-cell !important;
  }
  .d-md-flex {
      display: -ms-flexbox !important;
      display: flex !important;
  }
  .d-md-inline-flex {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
  }
}

@media (min-width: 992px) {
    .d-lg-none {
      display: none !important;
  }
  .d-lg-inline {
      display: inline !important;
  }
  .d-lg-inline-block {
      display: inline-block !important;
  }
  .d-lg-block {
      display: block !important;
  }
  .d-lg-table {
      display: table !important;
  }
  .d-lg-table-row {
      display: table-row !important;
  }
  .d-lg-table-cell {
      display: table-cell !important;
  }
  .d-lg-flex {
      display: -ms-flexbox !important;
      display: flex !important;
  }
  .d-lg-inline-flex {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
  }
}

@media (min-width: 1200px) {
    .d-xl-none {
      display: none !important;
  }
  .d-xl-inline {
      display: inline !important;
  }
  .d-xl-inline-block {
      display: inline-block !important;
  }
  .d-xl-block {
      display: block !important;
  }
  .d-xl-table {
      display: table !important;
  }
  .d-xl-table-row {
      display: table-row !important;
  }
  .d-xl-table-cell {
      display: table-cell !important;
  }
  .d-xl-flex {
      display: -ms-flexbox !important;
      display: flex !important;
  }
  .d-xl-inline-flex {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
  }
}

@media print {
    .d-print-none {
      display: none !important;
  }
  .d-print-inline {
      display: inline !important;
  }
  .d-print-inline-block {
      display: inline-block !important;
  }
  .d-print-block {
      display: block !important;
  }
  .d-print-table {
      display: table !important;
  }
  .d-print-table-row {
      display: table-row !important;
  }
  .d-print-table-cell {
      display: table-cell !important;
  }
  .d-print-flex {
      display: -ms-flexbox !important;
      display: flex !important;
  }
  .d-print-inline-flex {
      display: -ms-inline-flexbox !important;
      display: inline-flex !important;
  }
}

/*Ending Bootstrap Display Utils*/
/*Bootstrap Margin and Padding Utils*/

.line-15 {
    line-height: 1.5;
}

.m-05 {
    margin: 5px !important;
}

.mt-05,
.my-05 {
    margin-top: 5px !important;
}

.mr-05,
.mx-05 {
    margin-right: 5px !important;
}

.mb-05,
.my-05 {
    margin-bottom: 5px !important;
}

.ml-05,
.mx-05 {
    margin-left: 5px !important;
}

body .mt-15,
body .my-15 {
    margin-top: 15px !important;
}

body .mr-15,
body .mx-15 {
    margin-right: 15px !important;
}

body .mb-15,
body .my-15 {
    margin-bottom: 15px !important;
}

body .ml-15,
body .mx-15 {
    margin-left: 15px !important;
}

body .p-05 {
    padding: 5px !important;
}

body .pt-05,
body .py-05 {
    padding-top: 5px !important;
}

body .pr-05,
body .px-05 {
    padding-right: 5px !important;
}

body .pb-05,
body .py-05 {
    padding-bottom: 5px !important;
}

body .pl-05,
body .px-05 {
    padding-left: 5px !important;
}

body .p-15 {
    padding: 15px !important;
}

body .pt-15,
body .py-15 {
    padding-top: 15px !important;
}

body .pr-15,
body .px-15 {
    padding-right: 15px !important;
}

body .pb-15,
body .py-15 {
    padding-bottom: 15px !important;
}

body .pl-15,
body .px-15 {
    padding-left: 15px !important;
}

body .m-n1 {
    margin: -10px !important;
}

body .mt-n1,
body .my-n1 {
    margin-top: -10px !important;
}

body .mr-n1,
body .mx-n1 {
    margin-right: -10px !important;
}

body .mb-n1,
body .my-n1 {
    margin-bottom: -10px !important;
}

body .ml-n1,
body .mx-n1 {
    margin-left: -10px !important;
}

body .m-n2 {
    margin: -20px !important;
}

body .mt-n2,
body .my-n2 {
    margin-top: -20px !important;
}

body .mr-n2,
body .mx-n2 {
    margin-right: -20px !important;
}

body .mb-n2,
body .my-n2 {
    margin-bottom: -20px !important;
}

body .ml-n2,
body .mx-n2 {
    margin-left: -20px !important;
}

body .m-n3 {
    margin: -30px !important;
}

body .mt-n3,
body .my-n3 {
    margin-top: -30px !important;
}

body .mr-n3,
body .mx-n3 {
    margin-right: -30px !important;
}

body .mb-n3,
body .my-n3 {
    margin-bottom: -30px !important;
}

body .ml-n3,
body .mx-n3 {
    margin-left: -30px !important;
}

body .m-n4 {
    margin: -40px !important;
}

body .mt-n4,
body .my-n4 {
    margin-top: -40px !important;
}

body .mr-n4,
body .mx-n4 {
    margin-right: -40px !important;
}

body .mb-n4,
body .my-n4 {
    margin-bottom: -40px !important;
}

body .ml-n4,
body .mx-n4 {
    margin-left: -40px !important;
}

body .m-n5 {
    margin: -50px !important;
}

body .mt-n5,
body .my-n5 {
    margin-top: -50px !important;
}

body .mr-n5,
body .mx-n5 {
    margin-right: -50px !important;
}

body .mb-n5,
body .my-n5 {
    margin-bottom: -50px !important;
}

body .ml-n5,
body .mx-n5 {
    margin-left: -50px !important;
}

body .m-auto {
    margin: auto !important;
}

body .mt-auto,
body .my-auto {
    margin-top: auto !important;
}

body .mr-auto,
body .mx-auto {
    margin-right: auto !important;
}

body .mb-auto,
body .my-auto {
    margin-bottom: auto !important;
}

body .ml-auto,
body .mx-auto {
    margin-left: auto !important;
}

html .so_input{
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html .so_input .invalid-feedback,
html .so_input label{
    display: none !important;

    margin: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;

    padding: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

html .so_input .coluna_html_base{
    background: #FFF !important;

    margin: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;

    padding: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.gravar_ajax_padrao {
    font-size: 20px !important;
    font-weight: 600 !important;
}

.postition_right {
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
}

.copy-btn-individual {
    position: absolute !important;
    right: 15px !important;
    top: 0px !important;
    height: inherit !important;
    width: initial !important;
    z-index: 1 !important;
    padding: 5px 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    cursor: pointer;
}

.label-warning,
.label-success,
.label-danger {
    padding: 10px !important;
    float: left !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    font-weight: 500 !important;
    text-indent: 0 !important;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    transition: box-shadow .2s ease-out 0s,border .2s ease-out,border-radius .2s ease-out,background-color .1s ease-out,color .1s ease-out,transform .1s ease-out !important;
    font-size: 12px !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: left !important;
    justify-items: left !important;
    text-align: left !important;
}

.label-success {
    color: #166534 !important;
    background-color: #f0fdf4 !important;
    border: solid 1px #22c55e !important;
}

.label-success span,
.label-success small {
    color: #166534 !important;
}

.label-danger {
    color: #991b1b !important;
    background-color: #fef2f2 !important;
    border: solid 1px #ef4444 !important;
}

.label-danger span,
.label-danger small {
    color: #991b1b !important;
}

.label-warning {
    color: #92400e !important;
    background-color: #fffbeb !important;
    border-color: #f59e0b !important;
}

.label-warning span,
.label-warning small {
    color: #92400e !important;
}


.topo-sidebar-novo-ids-externos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.topo-sidebar-novo-ids-externos .borda-row{
    display:flex;
    flex-direction:column;
    height:100%;
}

.topo-sidebar-novo-ids-externos .float_100_top,
.topo-sidebar-novo-ids-externos .p-1{
    flex:1;
}

html .topo-sidebar-novo-ids-externos h2 {
    text-transform: uppercase;
    color: #000;
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

html .topo-sidebar-novo-painel,
html .topo-sidebar-novo {
    float: left;
    width: 100%;
    padding: 0px 15px;
}

html .painel .topo-sidebar-novo-painel .topo-sidebar-header,
html .painel .topo-sidebar-novo .topo-sidebar-header {
    display: flex;
    align-items: center;
    color: #000;
    text-align: left;
    padding: 10px 10px 10px 10px;
    background: #EFEFEF;
    border: solid 1px #DFDFDF;
    text-transform: uppercase;
    border-radius: 5px;
}


html .topo-sidebar-novo-painel .topo-sidebar-header,
html .topo-sidebar-novo .topo-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    float: left;
    width: 100%;
}


html .topo-sidebar-novo-painel .topo-sidebar-header h4,
html .topo-sidebar-novo .topo-sidebar-header h4 {
    font-size: 15px;
}

html .topo-sidebar-novo-painel .fecha_side svg,
html .topo-sidebar-novo .fecha_side svg {
    width: 25px;
    height: 25px;
    fill: #555555;
    cursor: pointer;
}

html .topo-sidebar-novo-painel h4,
html .topo-sidebar-novo h4{
    color: #555555;
    font-weight: 500;
}

html .topo-sidebar-novo-painel .qtd-itens-total,
html .topo-sidebar-novo .qtd-itens-total{
    color: #555555;
    font-size: 15px
}

html .sidebars {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(33, 37, 41, 0.5);
    opacity: 1;
    visibility: visible;
    z-index: 9998;
    -webkit-transition: ease opacity 300ms;
    transition: ease opacity 300ms;
    z-index: 11111111111111;
}

html .topo-sidebar-novo .finaliza-sidebar,
html .topo-sidebar-novo .finaliza-sidebar li {
    float: left;
    width: 100%;
}

html .topo-sidebar-novo .product-details .name[data-v-e5c5a73c] {
    font-size: 13px;
    max-width: 100%;
    color: #333;
    margin: 0;
    margin-right: 0px;
    margin-bottom: 0.5rem;
    line-height: 18px;
    text-align: left;
}

html .topo-sidebar-novo .product-item[data-v-24493086] {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 2px;
    padding: 15px 15px;
    background: #ffffff;
    float: left;
    width: 100%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #DEDEDE;
}

html .topo-sidebar-novo{
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
    overflow:hidden;
}

html .topo-sidebar-header{
    flex-shrink:0;
}

html .finaliza-sidebar{
    flex-shrink:0;
}

html .carrinho-sidebar{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    min-height:0;
    float:left;
    width:100%;
}

html .desktop .topo-sidebar-novo .product-item[data-v-24493086] {
    position: relative;
    margin-bottom: 1rem;
    border-radius: 2px;
    padding: 15px 15px;
    background: #ffffff;
    float: left;
    width: 97%;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #DEDEDE;
}

html .topo-sidebar-novo .product-item__controller[data-v-24493086] {
    border-top: 2px solid #eeeeee;
    padding-top: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    float: left;
    width: 100%;
}

html [id*="body"] .product-qtd__btn[data-v-2155902e] {
    display: flex  !important;
}

html .topo-sidebar-novo .product-item__details[data-v-24493086] {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

html .topo-sidebar-novo .btn-continua-inserindo-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: #535151;
    background: #fff;
    color: #535151;
    padding: 10px 15px !important;
    font-size: 13px;
    border-radius: 5px !important;
    cursor: pointer;
    float: left;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

html .topo-sidebar-novo .btn-continua-inserindo-sidebar svg {
    width: 25px;
    height: 25px;
    fill: #535151;
    cursor: pointer;
    margin-right: 7px;
}

html .topo-sidebar-novo .btn-3d {
    border-radius: 3px !important;
}

html .topo-sidebar-novo .btn-add-lista {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00B285;
    color: #fff;
    padding: 10px 15px !important;
    font-size: 13px;
    font-weight: normal;
    border-radius: 5px !important;
    margin-bottom: 1rem!important;
    cursor: pointer;
    float: left;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
}

html .topo-sidebar-novo .btn-continua-inserindo-sidebar:hover,
html .topo-sidebar-novo .btn-add-lista:hover {
    opacity: 0.7;
}

html .topo-sidebar-novo .compartilhar_carrinho {
    margin-bottom: 0 !important;
    font-size: 14px !important;
    font-weight: normal;
}

html .swal2-modal .swal2-container {
    z-index: 9999999999 !important;
}

html .sidebar .remove-icon {
    display: block !important
}

html .sidebar .info {
    display: flex;
    align-items: center;
    color: #000;
    text-align: left;
    justify-content: space-between;
}



html .topo-sidebar-novo .product-details__image[data-v-e5c5a73c] {
    min-width: 70px;
    width: 70px;
    padding-right: 10px;
    height: 70px;
    float: left;
    position: relative;
}


/* update panel */
.panel-default{
    background:#fff!important;
    border:1px solid #e9eef5!important;
    border-radius:14px!important;
    box-shadow:
    0 1px 3px rgba(15,23,42,.03),
    0 8px 24px rgba(15,23,42,.03)!important;
    overflow:hidden!important;
    margin-bottom:0!important;
    transition:.18s ease!important;

    width:100%!important;

    display:flex!important;
    flex-direction:column!important;
    
    overflow: visible !important;
}

.panel-default:hover{
    box-shadow:
    0 2px 6px rgba(15,23,42,.04),
    0 12px 28px rgba(15,23,42,.05)!important;
}

.panel-graficos{
    flex:1!important;
    display:flex!important;
    flex-direction:column!important;
}

.card-box.box-to-animate{
    background:transparent!important;
    border:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    height:100%!important;
    display:flex!important;
    flex-direction:column!important;
}

.page-header.page-header-card{
    min-height:58px!important;
    padding:14px 18px!important;
    margin:0!important;
    border:none!important;
    border-bottom:1px solid #eef2f7!important;
    background:#ffffff!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    flex-wrap:wrap!important;
    gap:12px!important;
    font-size:14px!important;
    font-weight:700!important;
    color:#0f172a!important;
    line-height:1.2!important;
    text-transform:uppercase!important;
    letter-spacing:.3px!important;
}

.panel-title-left{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    min-width:0!important;
}

.panel-title-icon{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:10px!important;
    background:linear-gradient(135deg,#ede9fe,#ddd6fe)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#7c3aed!important;
    font-size:13px!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}

.panel-title-text{
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
}

.panel-title-main{
    font-size:14px!important;
    font-weight:700!important;
    color:#0f172a!important;
    line-height:1.1!important;
}

.panel-title-sub{
    font-size:11px!important;
    color:#64748b!important;
    margin-top:2px!important;
    font-weight:500!important;
    text-transform:none!important;
    letter-spacing:0!important;
}

.panel-header-right{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:wrap!important;
}

.page-header.page-header-card .fa-arrow-down{
    width:30px!important;
    height:30px!important;
    border-radius:10px!important;
    background:#f1f5f9!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#64748b!important;
    font-size:11px!important;
    transition:.15s ease!important;
}

.page-header.page-header-card:hover .fa-arrow-down{
    background:#ede9fe!important;
    color:#7c3aed!important;
}

.page-header.page-header-card select{
    height:34px!important;
    min-width:90px!important;
    border-radius:10px!important;
    border:1px solid #dbe2ea!important;
    background:#fff!important;
    box-shadow:none!important;
    font-size:12px!important;
    font-weight:600!important;
    color:#334155!important;
    padding:0 10px!important;
}

.page-header.page-header-card select:focus{
    border-color:#c4b5fd!important;
    box-shadow:0 0 0 3px rgba(124,58,237,.08)!important;
}

.panel-collapse{
    border:none!important;
}