.elementor-486 .elementor-element.elementor-element-cd368ce{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.43;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:80px;--padding-bottom:90px;--padding-left:0px;--padding-right:0px;}.elementor-486 .elementor-element.elementor-element-cd368ce:not(.elementor-motion-effects-element-type-background), .elementor-486 .elementor-element.elementor-element-cd368ce > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000D1;}.elementor-486 .elementor-element.elementor-element-cd368ce::before, .elementor-486 .elementor-element.elementor-element-cd368ce > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-cd368ce > .e-con-inner > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-cd368ce > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-cd368ce > .e-con-inner > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-cd368ce > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:radial-gradient(at top center, #0100FF 0%, #000000 54%);}.elementor-486 .elementor-element.elementor-element-6cd36fd{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-486 .elementor-element.elementor-element-0ea7e60{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-486 .elementor-element.elementor-element-fb9c266{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-486 .elementor-element.elementor-element-4ad68fe{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 0px 20px 0px;text-align:start;}.elementor-486 .elementor-element.elementor-element-4ad68fe .elementor-heading-title{font-family:"etnocentric", Sans-serif;font-size:25px;line-height:31px;color:#FFFFFF;}.elementor-486 .elementor-element.elementor-element-18ac929{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 20px 0px;text-align:start;font-family:"Chakra Petch", Sans-serif;color:#EEEEEE;}.elementor-486 .elementor-element.elementor-element-18ac929 a{color:#8A05E0;}.elementor-486 .elementor-element.elementor-element-5bcb7d0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 40px) -20px;padding:0px 0px 0px 0px;text-align:start;font-family:"Chakra Petch", Sans-serif;color:#EEEEEE;}.elementor-486 .elementor-element.elementor-element-5bcb7d0 a{color:#8A05E0;}.elementor-486 .elementor-element.elementor-element-2147438{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 0px 20px 0px;text-align:start;}.elementor-486 .elementor-element.elementor-element-2147438 .elementor-heading-title{font-family:"etnocentric", Sans-serif;font-size:25px;line-height:31px;color:#FFFFFF;}.elementor-486 .elementor-element.elementor-element-baaf6ce{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 20px 0px;text-align:start;font-family:"Chakra Petch", Sans-serif;color:#EEEEEE;}.elementor-486 .elementor-element.elementor-element-baaf6ce a{color:#8A05E0;}.elementor-486 .elementor-element.elementor-element-9d07e89{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:start;font-family:"Chakra Petch", Sans-serif;font-size:22px;color:#EEEEEE;}.elementor-486 .elementor-element.elementor-element-9d07e89 a{color:#8A05E0;}.elementor-486 .elementor-element.elementor-element-fd3e2a3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 40px) -20px;padding:0px 0px 0px 0px;text-align:start;font-family:"Chakra Petch", Sans-serif;color:#EEEEEE;}.elementor-486 .elementor-element.elementor-element-fd3e2a3 a{color:#8A05E0;}.elementor-486 .elementor-element.elementor-element-0f5ba84{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:1;--overlay-mix-blend-mode:overlay;border-style:solid;--border-style:solid;border-width:01px 01px 02px 05px;--border-top-width:01px;--border-right-width:01px;--border-bottom-width:02px;--border-left-width:05px;border-color:#04026C;--border-color:#04026C;box-shadow:-4px -6px 74px 0px rgba(0, 22.269999999999918, 222.7, 0.47);--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-486 .elementor-element.elementor-element-0f5ba84::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .e-con-inner > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .e-con-inner > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://suporte.storymode.com.br/wp-content/uploads/2026/07/cropped-Epic_Digitais_logo.webp");--background-overlay:'';background-position:center center;background-size:20% auto;}.elementor-486 .elementor-element.elementor-element-26181cc{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:20px 20px 20px 20px;}.elementor-486 .elementor-element.elementor-element-26181cc.elementor-element{--flex-grow:0;--flex-shrink:1;}.elementor-486 .elementor-element.elementor-element-34967c4{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:70px;--margin-bottom:70px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-486 .elementor-element.elementor-element-467159b{--display:flex;--overlay-opacity:0.3;--overlay-mix-blend-mode:screen;border-style:solid;--border-style:solid;border-width:04px 0px 0px 06px;--border-top-width:04px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:06px;border-color:#430058;--border-color:#430058;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-486 .elementor-element.elementor-element-467159b:not(.elementor-motion-effects-element-type-background), .elementor-486 .elementor-element.elementor-element-467159b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(311deg, #000000 52%, #1E0A469E 100%);}.elementor-486 .elementor-element.elementor-element-467159b::before, .elementor-486 .elementor-element.elementor-element-467159b > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-467159b > .e-con-inner > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-467159b > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-467159b > .e-con-inner > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-467159b > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;background-image:url("https://suporte.storymode.com.br/wp-content/uploads/2026/07/working-customer-support-service-operator-communication-in-corporate-business-advisor-concept-.jpg");--background-overlay:'';background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-486 .elementor-element.elementor-element-467159b::before{filter:brightness( 118% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-486 .elementor-element.elementor-element-756c696{width:var( --container-widget-width, 50% );max-width:50%;padding:20px 0px 0px 0px;--container-widget-width:50%;--container-widget-flex-grow:0;text-align:start;}.elementor-486 .elementor-element.elementor-element-756c696 .elementor-heading-title{font-family:"etnocentric", Sans-serif;font-size:50px;color:#FFFFFF;}.elementor-486 .elementor-element.elementor-element-f99981f{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;text-align:start;font-family:"Chakra Petch", Sans-serif;color:#FFFFFF;}.elementor-486 .elementor-element.elementor-element-f99981f a{color:#8A05E0;}.elementor-486 .elementor-element.elementor-element-e10e148{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-486 .elementor-element.elementor-element-ef575b2 .elementor-button{background-color:#761BFF;font-family:"Chakra Petch", Sans-serif;font-size:17px;font-weight:600;padding:20px 20px 20px 20px;}.elementor-486 .elementor-element.elementor-element-ef575b2 .elementor-button-content-wrapper{flex-direction:row;}.elementor-486 .elementor-element.elementor-element-ef575b2 .elementor-button .elementor-button-content-wrapper{gap:10px;}body.elementor-page-486:not(.elementor-motion-effects-element-type-background), body.elementor-page-486 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://suporte.storymode.com.br/wp-content/uploads/2026/07/bg-scanlines-1.gif");background-position:center center;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-486 .elementor-element.elementor-element-cd368ce{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-486 .elementor-element.elementor-element-4ad68fe .elementor-heading-title{font-size:30px;}.elementor-486 .elementor-element.elementor-element-2147438 .elementor-heading-title{font-size:30px;}.elementor-486 .elementor-element.elementor-element-756c696 .elementor-heading-title{font-size:35px;}}@media(max-width:767px){.elementor-486 .elementor-element.elementor-element-4ad68fe .elementor-heading-title{font-size:25px;}.elementor-486 .elementor-element.elementor-element-2147438 .elementor-heading-title{font-size:25px;}.elementor-486 .elementor-element.elementor-element-756c696{width:100%;max-width:100%;}.elementor-486 .elementor-element.elementor-element-756c696 .elementor-heading-title{font-size:30px;}.elementor-486 .elementor-element.elementor-element-f99981f{width:100%;max-width:100%;}.elementor-486 .elementor-element.elementor-element-e10e148{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-486 .elementor-element.elementor-element-ef575b2{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}@media(min-width:768px){.elementor-486 .elementor-element.elementor-element-cd368ce{--content-width:1140px;}.elementor-486 .elementor-element.elementor-element-fb9c266{--width:34%;}.elementor-486 .elementor-element.elementor-element-0f5ba84{--width:76%;}}@media(min-width:1025px){.elementor-486 .elementor-element.elementor-element-0f5ba84::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .e-con-inner > .elementor-background-video-container::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .e-con-inner > .elementor-background-slideshow::before, .elementor-486 .elementor-element.elementor-element-0f5ba84 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-attachment:fixed;}body.elementor-page-486:not(.elementor-motion-effects-element-type-background), body.elementor-page-486 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for shortcode, class: .elementor-element-26181cc */.fst_login_wrapper{
    max-width: 7000px!important;
}

.edt-login-form .elementor-shortcode{
    background-color: red!important;
}

#fs_show_signup{
    display: none!important; 
}

#fst_login_form > p:nth-child(2){
    display: none!important;
}

#fst_login_form > p:nth-child(3){
    display: none!important;
}

/*Estilos do form vão aqui*/

/* ===========================
   LOGIN - SUPORTE EPIC DIGITAIS
=========================== */

.fst_login_wrapper{
    max-width:460px;
    margin:40px auto;
    padding:35px;
    background:#111;
    border:2px solid #ff2d8d;
    border-radius:3px 1px 8px 2px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

/* Labels */

.fst_login_wrapper label{
    display:block;
    margin-bottom:8px;
    color:#fff;
    font-size:14px;
    font-weight:600;
}

/* Campos */

.fst_login_wrapper input[type="text"],
.fst_login_wrapper input[type="email"],
.fst_login_wrapper input[type="password"]{

    width:100%;
    height:48px;
    padding:0 16px;

    background:#1b1b1b;
    color:#fff;

    border:2px solid #2b2b2b;
    border-radius:2px 5px 1px 6px;

    transition:.25s;
    box-sizing:border-box;
}

.fst_login_wrapper input:focus{

    outline:none;
    border-color:#ff2d8d;

    box-shadow:
    0 0 0 3px rgba(255,45,141,.18);
}

/* Espaçamento */

.login-username,
.login-password{

    margin-bottom:18px;
}

/* Lembrar-me */

.login-remember{

    display:flex;
    align-items:center;
    gap:10px;

    margin:20px 0;
    color:#d9d9d9;
    font-size:14px;
}

.login-remember input{

    accent-color:#ff2d8d;
}

/* Botão */

.fst_login_wrapper input#wp-submit{

    width:100%!important;
    height:50px!important;
    
    font-family: "Chakra Petch", Sans-serif!important;
    font-size: 30px!important;
    text-transform: uppercase!important;

    background:#ff2d8d!important;
    color:#fff!important;

    border:none!important;

    border-radius:2px 8px 1px 6px!important;

    font-size:16px!important;
    font-weight:700!important;

    cursor:pointer!important;

    transition:.25s!important;
}

.fst_login_wrapper input#wp-submit:hover{

    background:#ff5ca9!important;

    transform:translateY(-2px)!important;

    box-shadow:0 10px 25px rgba(255,45,141,.35)!important;
}

/* Links */

.fst_login_wrapper a{

    color:#ff2d8d;
    text-decoration:none;
    transition:.2s;
}

.fst_login_wrapper a:hover{

    color:#fff;
}

/* Mensagens */

.fst_login_wrapper .message,
.fst_login_wrapper .error,
.fst_login_wrapper .success{

    margin-bottom:20px;
    padding:15px;

    background:#1c1c1c;

    border-left:4px solid #ff2d8d;

    color:#fff;

    border-radius:1px 6px 2px 4px;
}

/* Placeholder */

.fst_login_wrapper ::placeholder{

    color:#777;
}

/* Responsivo */

@media (max-width:600px){

    .fst_login_wrapper{

        margin:20px;
        padding:25px;
    }

}


/* ==========================================================================
   epic-fluent-support-theme.css
   Tema Customizado para Fluent Support Portal - Epic Digitais
   ========================================================================== */




/* ==========================================================
   01 - Variáveis Globais
   ========================================================== */
:root {
  --epic-primary: #ff2d8d;
  --epic-dark: #111111;
  --epic-light: #f9f9f9;
  --epic-white: #ffffff;
  --epic-border: #e2e8f0;
  
  /* Bordas desconexas */
  --epic-border-radius: 3px 1px 6px 2px; 
  
  /* Transições e Sombras */
  --epic-transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  --epic-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05);
  --epic-shadow-hover: 0 8px 24px rgba(255, 45, 141, 0.15);
}

/* Base de escopo do portal */
.fluent_support_portal, 
#fluent_support_portal {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  background-color: var(--epic-white) !important;
  color: var(--epic-dark) !important;
}

/* ==========================================================
   02 - Layout Geral & Estrutura
   ========================================================== */
.fs_tickets_table {
  background-color: var(--epic-white) !important;
  padding: 10px 0 !important;
}

/* Forçar reset de algumas tabelas nativas do Element Plus */
.fs_tickets_table .el-table {
  background-color: transparent !important;
  --el-table-border-color: transparent !important;
}

.fs_tickets_table .el-table__inner-wrapper::before {
  display: none !important;
}

/* ==========================================================
   03 - Cabeçalho & Botão Criar Ticket
   ========================================================== */
.fs_tickets_actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--epic-border) !important;
}

/* Botão Criar Ticket (Preto -> Rosa no Hover) */
.fs_create_ticket_btn.el-button {
  background-color: var(--epic-dark) !important;
  border: 2px solid var(--epic-dark) !important;
  color: var(--epic-white) !important;
  border-radius: var(--epic-border-radius) !important;
  padding: 12px 24px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: var(--epic-transition) !important;
  box-shadow: var(--epic-shadow-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fs_create_ticket_btn.el-button:hover,
.fs_create_ticket_btn.el-button:focus {
  background-color: var(--epic-primary) !important;
  border-color: var(--epic-primary) !important;
  color: var(--epic-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--epic-shadow-hover) !important;
}

.fs_create_ticket_btn.el-button span {
  color: inherit !important;
}

/* ==========================================================
   04 - Inputs, Busca e Dropdowns (Selects)
   ========================================================== */
.fluent_support_portal input[type="text"],
.fluent_support_portal input[type="search"],
.fluent_support_portal textarea,
.fs_per_page_select .el-select__wrapper,
.el-select .el-select__wrapper {
  border: 1px solid var(--epic-border) !important;
  border-radius: var(--epic-border-radius) !important;
  padding: 10px 16px !important;
  background-color: var(--epic-white) !important;
  color: var(--epic-dark) !important;
  box-shadow: none !important;
  transition: var(--epic-transition) !important;
}

/* Foco nos Inputs / Selects com borda rosa */
.fluent_support_portal input[type="text"]:focus,
.fluent_support_portal input[type="search"]:focus,
.fluent_support_portal textarea:focus,
.fs_per_page_select .el-select__wrapper.is-focus,
.el-select .el-select__wrapper.is-focus {
  border-color: var(--epic-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 45, 141, 0.15) !important;
  outline: none !important;
}

/* ==========================================================
   05 - Filtros (Estilo Pills)
   ========================================================== */
.fs_filters_section .el-radio-button__inner,
.fs_filters_section .filter-pill,
.fs_filters_section .el-tabs__item {
  background-color: var(--epic-white) !important;
  color: var(--epic-dark) !important;
  border: 1px solid var(--epic-border) !important;
  border-radius: 50px !important;
  padding: 8px 20px !important;
  margin-right: 8px !important;
  transition: var(--epic-transition) !important;
  font-weight: 500 !important;
}

/* Hover: Fundo Branco com borda/texto Rosa */
.fs_filters_section .el-radio-button__inner:hover,
.fs_filters_section .el-tabs__item:hover {
  color: var(--epic-primary) !important;
  border-color: var(--epic-primary) !important;
  background-color: var(--epic-white) !important;
}

/* Selecionado (Ativo): Fundo Preto com texto Branco */
.fs_filters_section .is-active .el-radio-button__inner,
.fs_filters_section .el-radio-button__original-radio:checked + .el-radio-button__inner,
.fs_filters_section .el-tabs__item.is-active {
  background-color: var(--epic-dark) !important;
  color: var(--epic-white) !important;
  border-color: var(--epic-dark) !important;
}

/* ==========================================================
   06 - Tabela de Tickets
   ========================================================== */
/* Linhas da Tabela */
.fs_tickets_table tr.fs_ticket_row {
  background-color: var(--epic-white) !important;
  border-bottom: 1px solid var(--epic-border) !important;
  transition: var(--epic-transition) !important;
}

/* Espaçamento interno das células */
.fs_tickets_table td.el-table__cell {
  padding: 22px 16px !important;
  border-bottom: 1px solid var(--epic-border) !important;
}

/* Efeito Hover nas Linhas */
.fs_tickets_table tr.fs_ticket_row:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--epic-shadow-hover) !important;
  position: relative !important;
  z-index: 2 !important;
}

.fs_tickets_table tr.fs_ticket_row:hover td {
  border-bottom-color: var(--epic-primary) !important;
  background-color: var(--epic-white) !important;
}

/* Links e textos dentro do container do ticket */
.fs_ticket_conversation {
  text-decoration: none !important;
  display: block !important;
}

.fs_ticket_title {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 6px !important;
}

.fs_ticket_title strong {
  font-size: 16px !important;
  color: var(--epic-dark) !important;
  font-weight: 700 !important;
  transition: var(--epic-transition) !important;
}

.fs_ticket_conversation:hover .fs_ticket_title strong {
  color: var(--epic-primary) !important;
}

.fs_ticket_preview {
  font-size: 14px !important;
  color: #666666 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Balão indicador de contagem de respostas */
.fs_response_count {
  background-color: var(--epic-primary) !important;
  color: var(--epic-white) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
  font-weight: bold !important;
}

/* ==========================================================
   07 - Badges de Status Customizadas
   ========================================================== */
.fs_status_cell {
  text-align: right !important;
}

.fluent_support_portal .el-tag,
.fluent_support_portal .fs_status_badge,
.fs_status_cell span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 30px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  border: none !important;
}

/* Status: Aberto / Novo (Verde) */
.fluent_support_portal [class*="status-"][class*="new"],
.fluent_support_portal [class*="status-"][class*="open"] {
  background-color: rgba(46, 204, 113, 0.12) !important;
  color: #2ecc71 !important;
}
.fluent_support_portal [class*="status-"][class*="new"]::before,
.fluent_support_portal [class*="status-"][class*="open"]::before {
  content: "🟢" !important;
  font-size: 10px !important;
}

/* Status: Fechado / Resolvido (Vermelho) */
.fluent_support_portal [class*="status-"][class*="closed"],
.fluent_support_portal [class*="status-"][class*="resolved"] {
  background-color: rgba(231, 76, 60, 0.12) !important;
  color: #e74c3c !important;
}
.fluent_support_portal [class*="status-"][class*="closed"]::before,
.fluent_support_portal [class*="status-"][class*="resolved"]::before {
  content: "🔴" !important;
  font-size: 10px !important;
}

/* Status: Respondido / Pendente (Amarelo) */
.fluent_support_portal [class*="status-"][class*="replied"],
.fluent_support_portal [class*="status-"][class*="pending"] {
  background-color: rgba(241, 196, 15, 0.12) !important;
  color: #f1c40f !important;
}
.fluent_support_portal [class*="status-"][class*="replied"]::before,
.fluent_support_portal [class*="status-"][class*="pending"]::before {
  content: "🟡" !important;
  font-size: 10px !important;
}

/* ==========================================================
   08 - Paginação
   ========================================================== */
.fs_pagination_section {
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--epic-border) !important;
}

.fs_pagination_container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.fs_page_text {
  font-weight: 500 !important;
  color: #666666 !important;
}

/* Botões da Paginação Element Plus */
.el-pagination button,
.el-pagination .el-pager li {
  background-color: var(--epic-white) !important;
  color: var(--epic-dark) !important;
  border: 1px solid var(--epic-border) !important;
  border-radius: var(--epic-border-radius) !important;
  margin: 0 4px !important;
  font-weight: 600 !important;
  transition: var(--epic-transition) !important;
  min-width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
}

/* Página Ativa: Preto */
.el-pagination .el-pager li.is-active {
  background-color: var(--epic-dark) !important;
  color: var(--epic-white) !important;
  border-color: var(--epic-dark) !important;
}

/* Hover nos itens da paginação: Rosa */
.el-pagination button:hover:not([disabled]),
.el-pagination .el-pager li:hover:not(.is-active) {
  color: var(--epic-primary) !important;
  border-color: var(--epic-primary) !important;
}

/* Elementos Desabilitados */
.el-pagination button:disabled {
  background-color: #f5f5f5 !important;
  color: #cccccc !important;
  border-color: #eeeeee !important;
  cursor: not-allowed !important;
}

/* ==========================================================
   09 - Modais, Formulários & Timeline (Elementos Extras)
   ========================================================== */
/* Caixas de resposta e inputs no modal de abertura */
.el-dialog, 
.fs_ticket_modal {
  border-radius: var(--epic-border-radius) !important;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--epic-border) !important;
}

.el-dialog__header {
  border-bottom: 1px solid var(--epic-border) !important;
  padding: 20px !important;
}

/* Timeline / Histórico de Interações */
.fs_reply_form_wrapper, 
.fluent_support_portal .fs_ticket_reply_box {
  background: var(--epic-white) !important;
  border: 1px solid var(--epic-border) !important;
  border-radius: var(--epic-border-radius) !important;
  padding: 24px !important;
  margin-top: 24px !important;
  box-shadow: var(--epic-shadow-soft) !important;
}

.fs_activity_timeline .fs_activity_item {
  border-left: 2px solid var(--epic-border) !important;
  padding-bottom: 24px !important;
  padding-left: 20px !important;
  position: relative !important;
}

.fs_activity_timeline .fs_activity_item::before {
  content: "" !important;
  position: absolute !important;
  left: -6px !important;
  top: 4px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: var(--epic-primary) !important;
  border: 2px solid var(--epic-white) !important;
}

/* ==========================================================
   10 - Responsivo (Tabela convertida em Cards)
   ========================================================== */
@media (max-width: 768px) {
  /* Ocultar o cabeçalho original da tabela no celular */
  .fs_tickets_table .el-table__header-wrapper {
    display: none !important;
  }

  /* Forçar que as linhas se comportem como blocos individuais (Cards) */
  .fs_tickets_table table,
  .fs_tickets_table tbody,
  .fs_tickets_table tr.fs_ticket_row,
  .fs_tickets_table td.el-table__cell {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Customização de cada Card */
  .fs_tickets_table tr.fs_ticket_row {
    background-color: var(--epic-white) !important;
    border: 1px solid var(--epic-border) !important;
    border-radius: var(--epic-border-radius) !important;
    margin-bottom: 16px !important;
    padding: 16px !important;
    box-shadow: var(--epic-shadow-soft) !important;
    transition: var(--epic-transition) !important;
  }

  .fs_tickets_table tr.fs_ticket_row:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--epic-shadow-hover) !important;
    border-color: var(--epic-primary) !important;
  }

  /* Ajuste das células internas */
  .fs_tickets_table td.el-table__cell {
    padding: 8px 0 !important;
    border-bottom: none !important;
    background-color: transparent !important;
  }

  /* Reordenamento visual e alinhamentos para mobile */
  .fs_status_cell {
    text-align: left !important;
    margin-top: 10px !important;
  }

  .date-cell {
    color: #888888 !important;
    font-size: 13px !important;
    margin-top: 4px !important;
  }
}




/*___________________________________________*/


.fluent_support_portal .el-tag, .fluent_support_portal .fs_status_badge, .fs_status_cell span
 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 0px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    border: none !important;
    width: 100% !important;
}

.fs_client_portal .fs_svg_back {
    color: #ff006e!important;
}

.fs_client_portal .fs_back_btn {
    font-size: 30px;
    color: #ff006e!important;
}/* End custom CSS */