body{
    font-size: .85rem;
}
.page-header{
    border-bottom: var(--bs-primary) 1px dotted;
}

.simplebar-content{
    background-image: linear-gradient(0deg, var(--bs-transparent-bg), transparent);
}

.page-body{
    /* display: flex;
    justify-content: center; */
}
.page-body-inner{
    /* max-width: 2560px; */
}
.login-card .login-main .theme-form .is-invalid{border:1px dotted red!important;border-color:red!important;padding-right:calc(1.5em + .75rem);background-repeat:no-repeat;background-position:right calc(.375em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem)}

.login-card .logo{
    width: auto;
    height: auto;
    max-width: 250px;
    margin-bottom: 40px;    
}
.login-card .login-main {
    border-radius: 20px;
}
.login-card {
    background-repeat: repeat;
    background-position: left top;
    background-attachment: scroll;
    background-size: auto;
    background-color: rgba(255, 255, 255, 0.69); 
}

.container-login{
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;    
}

.area{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(255 255 255 / 96%);z-index:50}
.area-full{height:calc(100vh);width:calc(100vw)}
.area-over{height:calc(100vh - 80px);width:calc(100vw - 80px)}
.area-sub-over{height:calc(100vh - 80px);width:calc(100vw - 80px)}
.area-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:5px;box-shadow:0 4px 8px rgba(0,0,0,.2);max-width:2560px!important}
.area-over .modal-body{overflow:auto;height:calc(100vh - 150px)}
.area-sub-over .modal-body{overflow:auto;height:calc(100vh - 150px)}
.area-sm{max-width:500px!important;height:unset!important}
.area-md{max-width:800px!important;height:unset!important}
.area-lg{max-width:1000px!important;height:unset!important}
.area-xl{max-width:1310px!important;height:unset!important}
.area-full .modal-body{overflow:auto;height:calc(100vh - 50px)}
.area-sm .modal-body{height:unset!important;max-height:calc(100vh - 70px)}
.area-md .modal-body{height:unset!important;max-height:calc(100vh - 70px)}
.area-lg .modal-body{height:unset!important;max-height:calc(100vh - 70px)}
.area-xl .modal-body{height:unset!important;max-height:calc(100vh - 70px)}
.area-content .modal-header{padding:6px;background-color:#fff;display:block;border-top-right-radius:0!important;border-top-left-radius:0!important}
.area-content.area-full{border-radius:0!important}
.area-content .modal-header row{padding:.5rem}
.window-title{padding-top:.25rem!important;margin:0!important; color: var(--bs-primary)}
.area-full #gjs{height:calc(100vh - 128px)!important;width:100%}
.area-full #pageForm #gjs{height:calc(100vh - 99px)!important;width:100%}
.area-full .gjs-pn-views-container{height:calc(100% - 90px)!important;top:90px!important}
.area-over #gjs{height:calc(100vh - 152px)!important;width:100%}
.area-over .gjs-pn-views-container{height:calc(100% - 142px)!important;top:90px!important}
.area-sub-over #gjs{height:calc(100vh - 180px)!important;width:100%}
.offcanvas-large{width:600px;max-width:100%!important}
.area-full #campaignForm #gjs{height:calc(100vh - 131px)!important;width:100%}
.area-full #campaignForm .type-ab_test #gjs{height:calc(100vh - 169px)!important;width:100%}
.a-sub-over{background:rgb(0 0 0 / 80%)}
.btn-list:hover{background-color:#d2dcdf}
.btn-list-single{border-radius:4px!important}
.btn-list{background-color:#ebf3f5;border-radius:0;padding-top:5px;padding-bottom:5px;padding-left:7px;padding-right:7px;margin-left:6px;border-radius:7px;box-shadow:rgba(0,0,0,.05) 0 0 0 1px}
.text-disable{color:#d1d1d1ba!important}
.element-disabled{opacity:.4}
.filter-action{background-color:#f2f7f8}
.error{height:auto!important;border:red 1px dotted;padding:.5rem 1rem .5rem 1rem;margin:1rem 0rem 0rem 0rem;display:none;width:100%;background-color:#ffdede69;color:red;border-radius:6px}
.show-hide{right:29px}
.list-actions{display:flex}
.btns-pages{justify-content:right}
@media (max-width:768px){
.list-actions{flex-direction:column-reverse}
.btns-pages{justify-content:left}
#pagination-text{text-align:center!important;margin-bottom:1rem}
}
.list-actions-filters{flex:2}
.list-actions-btn{flex:1}
.pricing-simple li{margin-bottom:9px}
.credit-card{background:linear-gradient(135deg,#f3f3f3,#e0e0e0);color:#333;border-radius:15px;padding:20px;width:400px;height:220px;box-shadow:0 4px 12px rgba(0,0,0,.15);position:relative;font-family:Arial,sans-serif}
.credit-card .brand-logo{width:50px}
.credit-card .card-mask{letter-spacing:3px;font-size:1.3rem;color:#222}
.credit-card .card-holder-name{text-transform:uppercase;font-weight:700;font-size:1.2rem;margin-top:10px}
.credit-card .card-footer{display:flex;justify-content:space-between;font-size:.9rem;margin-top:15px;color:#555}
.credit-card .chip{width:50px;height:35px;background-color:#e5c07b;border-radius:5px;position:absolute;top:20px;left:20px}
.credit-card .brand-logo{position:absolute;top:20px;right:20px}
.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown{width:233px;left:-76px}
.dark-only .bg-white{background-color:#1f2022 !important}
.dark-only .text-white{color:#1f2022 !important}
.dark-only .text-dark{color:#FFF!important}


.text-white-force{color:#fff!important}
@media (max-width:768px){
#navOrganizations{display:none!important}
}
.dropdown-select-start{--bs-position:start}
.dropdown-select{position:absolute;z-index:1094!important;display:none;min-width:10rem;padding:0;margin:0;font-size:.875rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:0 solid #e9ecef;border-radius:4px;top:37px;box-shadow:rgba(0,0,0,.16) 0 1px 4px}
.dark-only .dropdown-select{background-color:#374462;color:#fff!important;background-color:#28334c!important}
.drop-selected{height:37px!important;border-radius:var(--bs-border-radius);border:1px dotted #7A70BA !important}
.dark-only .box-select li{border-color:#28334c!important;color:#fff!important}
.box-select{
    border: #d0d0d063 1px solid;
    margin: 4px;
    border-radius: 6px;
    padding: 2px;
    background-image: linear-gradient(180deg, #ececec, #f9f9f9);
    color: #000;
}

.dark-only .box-select{
    background-image: linear-gradient(180deg, #283249, #374462);
    color: #dddddd;
}
.box-select .btn-close{color:#fff}
.drop-selected .btn-close{font-size:11px;margin-top:2px;margin-right:1px}
ul.list-style-none li a{display:block;padding:8px 0;color:#54667a;text-decoration:none}
.btn-gray{background-color:#e0e0e0;color:#333 !important;border:1px solid #b0b0b0}
.btn-gray:hover{background-color:#d5d5d5;border-color:#999;color:#111}
.bg-gray{background-color:#f2f2f2;color:#333 !important;}
.dark-only .btn-gray{background-color:#555;color:#fff !important;border:1px solid #444}
.dark-only .btn-gray:hover{background-color:#666;border-color:#333;color:#f0f0f0}
.dark-only .bg-gray{background-color:#444;color:#fff !important}

.page-wrapper .page-header .header-wrapper .nav-right .onhover-show-div li a {
    text-transform: none !important;
}

.form-control, .form-select {
    font-size: .85rem;
    border-color: var(--bs-primary) !important;
    border-radius: 6px !important;
    border-style: dotted;
    /* background-color: #f3f3ff; */
    /* font-size: 0.8rem; */
}

.form-control:focus, .form-select:focus {
    /* background-color: #f3f3ff; */
}

.btn-dropdown{
    font-weight: normal !important;
    /* background-color: #f3f3ff !important; */
    height: 34px;
    text-align: left;
}

.dropdown-toggle.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    border-width: 2px;
}

body.dark-only .page-wrapper .page-body-wrapper .page-body .card:not(.email-body) .bg-white{
    /* background-color: #374462 !important; */
}

.btn-dropdown:focus{
    /* color: var(--bs-body-color) !important; */
    background-color: var(--bs-body-bg) !important;
    border: 1px dotted #7A70BA !important;
    box-shadow: 0 0 0 0.25rem rgba(122, 112, 186, 0.3) !important;
}


.new-interaction {
    cursor: pointer;
    font-size: 13px;
    padding: 1.5rem 1rem;
}

.new-interaction:hover {
    background-color: #f9f9f9;
}

input.is-invalid, select.is-invalid, textarea.is-invalid {
    border-color: var(--bs-form-invalid-border-color) !important;
    border-width: 2px;
}


.text-limit {
    width: 300px; /* Defina a largura máxima desejada */
    min-width: 150px; /* Defina a largura mínima desejada */
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Oculta o texto que ultrapassa a largura */
    text-overflow: ellipsis; /* Adiciona "..." ao final do texto que não cabe */
    display: inline-block; /* Permite o uso de largura */
}

.text-limit-task {
    white-space: nowrap; /* Impede a quebra de linha */
    overflow: hidden; /* Oculta o texto que ultrapassa a largura */
    display: inline-block; /* Permite o uso de largura */
}

/* Para limitar a 2 linhas */
.text-two-lines {
    max-width: 300px; /* Defina a largura máxima desejada */
    min-width: 150px; /* Defina a largura mínima desejada */
    display: -webkit-box; /* Para usar flexbox em navegadores WebKit */
    -webkit-box-orient: vertical; /* Define a orientação do box como vertical */
    -webkit-line-clamp: 1; /* Limita a 2 linhas */
    overflow: hidden; /* Oculta o texto que ultrapassa */
}

.two-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita a 2 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5; /* Ajusta a altura da linha */
    max-height: 3em; /* 1.5em (line-height) * 2 linhas */
}


.card-table {
    border-radius: 0;
    padding: 0;
}

.card-table td {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

.footer-card-table {
    padding: 1rem;
    border-top: #d0d0d0 1px dotted;
    margin: 0;
}

.card{
    border-radius: 6px;
}

.btn {
    border-radius: 6px;
}

.ql-toolbar.ql-snow{
    border: 1px dotted #7A70BA;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    padding: 8px;
    border-bottom: 0;
    border-radius: 6px 6px 0px 0px !important
}

.ql-container.ql-snow{
    border: 1px dotted #7A70BA;
    border-top: 0;
    border-radius: 0px 0px 6px 6px !important
}

.ql-editor {
    max-height: 326px; /* Define a altura máxima */
    overflow-y: auto;  /* Adiciona rolagem quando o conteúdo ultrapassar a altura */
}

/* Customiza a barra de rolagem para o editor */
::-webkit-scrollbar {
    width: 6px; /* Largura da barra de rolagem */
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do fundo da barra */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Cor do "polegar" da barra */
    border-radius: 10px; /* Bordas arredondadas para o "polegar" */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Cor do "polegar" ao passar o mouse */
}

.bg-light-blue{
    background-color: #2f92f3;
}

#interactionListRecords li{
    overflow: auto;
    max-width: 100%;
    max-height: 500px;
    word-break: break-all;
    overflow-wrap: break-word;

}

#interactionListRecords ul{
    margin-bottom: 1rem;
}


#subtaskList td , #addsubtask td{
    padding: 2px 0.2rem;
}

#subtaskList button, #subtaskList select, #subtaskList input , #addsubtask button, #addsubtask select,  #addsubtask input {
    padding: 0.3rem 1rem;
    font-size: 13px !important;
}

.title-view{
    cursor: pointer;
}


/* Customizando o estilo da área de drop */
.dropzone {
    border: 1px dotted #268DF3; /* Mudar para qualquer cor desejada */
    background-color: #f7f7f7; /* Cor de fundo personalizada */
    border-radius: 0px; /* Bordas arredondadas */
    padding: 0px; /* Espacamento interno */
    text-align: center; /* Centralizando o texto */
}

/* Customizando o texto de aviso */
.dropzone .dz-message {
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

/* Customizando a pré-visualização das imagens */
.dropzone .dz-preview {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 0px;
    padding: 0px;
    width: 171px;
    margin: 10px !important;
}

.dropzone .dz-preview .dz-image {
    border-radius: 0px;
    overflow: hidden;
    width: 169px;
    height: 125px;
    position: relative;
    display: block;

}

.dropzone .dz-button {
    margin-top: 25px !important;
}

/* Customizando os botões de ação */
.dropzone .dz-remove {
    color: #f44336 !important;
    font-size: 14px !important;
    text-decoration: underline !important;
    text-align: center !important;
}

/* Customizando o botão de upload */
.dropzone .dz-upload {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Estilização inicial do input */
/* .input-custom {
    background-color: #FFF;
    border: 0px;
    padding: 8px;
    transition: background-color 0.3s ease;
    font-weight: 600;
    font-size: 18px !important;
} */

/* textarea.input-custom {
    height: 37.6px;
    overflow: hidden;
} */

/* Muda a cor de fundo ao passar o mouse */
/* .input-custom:hover {
    background-color: #f7f7f7f7;
    cursor: pointer;
} */
/* Foco: remove o background do hover */
/* .input-custom:focus {
    background-color: #ffffff;
    outline: none;
} */

.interact-comment-editor {
    padding: 0 !important;
    border: 0 !important;
}

.interact-comment-editor .readonly-class {
    padding-left: 0;
}

.priority-icon{
    width: 13px;
    height: 13px;
    margin-right: 5px;
}

.title-card-sprint, .title-card-timeline{
    max-width: 217px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    height: 48px;
}


.dark-only .drp-calendar{
    background-color: #1f2022 ;
}

.dark-only .calendar-table{
    background-color: #1f2022 ;
}

.dark-only .btn-dropdown:focus {
    background-color: #202a40 !important;
}

.dark-only .ql-editor.ql-blank::before {
    color: #f0f0f0;
}

.graph-centered{
    min-height: 385px;
    height: 95%;
    align-items: center;
    display: flex
}


.offcanvas, .accordion-button, .accordion-body {
    background-color: #FFFFFF;
}
.dark-only .offcanvas, .dark-only .accordion-button, .dark-only .accordion-body{
    background-color: #1f2022 ;
    color: var(--bs-heading-color);
}


.dark-only .filter-action{
    background-color: #3b4968;
}

.dark-only .accordion-item {
    border-color: #354871;
}

.offcanvas-body{
    padding-bottom: 83px !important;
}

.progress-container {
    width: 100%;
    background-color: #f3f3f3;
    border-radius: 8px;
    position: relative;
    height: 30px;
}

.progress-container .progress-bar {
    height: 100%;
    background-color: #4caf50;
    border-radius: 8px 0 0 8px;
    position: absolute;
    top: 0;
    left: 0;
}

.progress-handle {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: 3px solid #4caf50;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.progress-value {
    font-size: 16px;
}

#columnsList td , #columnsList th{
    color: #3D434A !important;
    padding: 3px 1rem;
}

.dark-only #columnsList td , .dark-only #columnsList th{
    color: rgba(255, 255, 255, 0.7) !important;
}

  #columnsList .dragging {
    background-color: #aaaaaa !important;
    /* opacity: 0.6; */
  }

  
  .dark-only #columnsList .dragging {
    background-color: #0d1527 !important;
    /* opacity: 0.6; */
  }

  #columnsList tr {
    cursor: move;
  }
  #columnsList .drag-handle {
    text-align: center;
    cursor: grab;
    /* color: #6c757d; */
  }
  #columnsList .drag-handle:hover {
    /* color: #495057; */
  }
  #columnsList .drag-preview {
    position: absolute;
    pointer-events: none;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 8px;
    z-index: 1000;
    font-size: 14px;
  }

  .over-plan{
    overflow: auto;    height: 283px;
  }

  #completeRegistrationForm .form-control, #completeRegistrationForm .form-select {
    border: #aba7c1 1px solid;
    border-radius: 6px !important;
    padding: .8rem;
    font-size: 1rem;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}



#completeRegistrationForm button {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.page-wrapper.horizontal-wrapper .page-body-wrapper .page-body {
    margin-top: 130px;
    padding-top: 1rem;
}



.user-role {
    max-height: 85px;
    overflow-y: auto;
}

.project-select{
    max-height: 80px;
    overflow: auto;
}

.dark-only .footer {
    background-color: #1f2022 ;
}

.body-internal-modal{
    height: calc(100vh - 2rem - 61px);
    overflow: auto;
}

.fullscreen-internal-modal{
    height: calc(100vh - 2rem);
    overflow: auto;
    width: calc(100vw - 2rem);
    margin: 1rem;
}

.btn-primary {
    background-color: var(--bs-primary)!important;
    border-color: var(--bs-primary)!important;
}

a{
    color: var(--bs-primary)!important;
}

.login-card .login-main .theme-form input {
    background-color: var(--bs-light);
    border-color: var(--bs-primary)!important;
    border-style: dotted;
}
.page-wrapper.horizontal-wrapper .header-logo-wrapper{
    width: 200px;
    padding: 0;
    padding-right: 10px;
}
.show-hide span {
    color: var(--bs-primary)!important;
}

.text-icon-menu{color:var(--bs-primary)!important}


  /* Estilizando textos e fundos */
  body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
  }
  
  /* Modo escuro */
  body.dark-only {
    background-color: var(--bs-body-bg-dark) !important;
    color: var(--bs-body-color-dark) !important;
  }
  
  /* Garantindo contraste em links */
  a {
    color: var(--bs-primary);
  }
  a:hover {
    color: var(--bs-primary-dark);
  }

  a.sidebar-link{
    color: #3D434A !important;;
  }


  body.dark-only  a.sidebar-link{
    color: rgba(255, 255, 255, 0.7) !important;
  }

  .sidebar-submenu a{
    color: #3D434A !important;;
  }


  body.dark-only  .sidebar-submenu a{
    color: rgba(255, 255, 255, 0.7) !important;
  }

    body.dark-only  ul.sidebar-submenu {
        background: #252525 !important;
    }



  body.dark-only a {
    color: #a6c1c0;
  }
  body.dark-only a:hover {
    color: #c9dad9;
  }
  
  /* Cards e outros elementos */
  .card {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.125) !important;
  }
  body.dark-only .card {
    background-color: #3a3a3a !important;
    border-color: rgba(255, 255, 255, 0.125) !important;
  }

  body.dark-only .page-wrapper .page-body-wrapper .page-body {
    background-color: #292929;
}

body.dark-only .page-wrapper .page-header {
    background-color: #252525;
}

body.dark-only .page-wrapper .page-header .header-wrapper {
    background-color: #252525;
}

body.dark-only .page-wrapper .page-header .header-logo-wrapper {
    background-color: #252525;
}

body.dark-only .page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper .sidebar-main {
    background-color: #252525;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right > ul li {
    background-color: #3a3a3a;
}

body.dark-only .offcanvas-body {
    background-color: #252525;
}

body.dark-only .offcanvas-header {
    background-color: #252525;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right .nav-menus li .onhover-show-div {
    background-color: #252525;
    -webkit-box-shadow: 0 2px 28px #252525;
    box-shadow: 0 2px 28px #252525;
}

body.dark-only .table-striped tbody tr:nth-of-type(odd) {
    background-color: #29292957;
    --bs-table-accent-bg: unset;
}

body.dark-only .page-wrapper .modal-content {
    background-color: #252525;
}

body.dark-only .form-control, body.dark-only .form-select {
    background-color: #1a1b1c !important;
    border-color: #818181 !important;
}

body.dark-only .swal2-modal {
    background-color: #181818;
}

body.dark-only .btn-list {
    background-color: #252525;
}



  /* Estilizando botões */
  .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #ffffff !important;
  }
  .btn-primary:hover {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
  }
  .btn-primary:active {
    background-color: #3b6665 !important;
    border-color: #3b6665 !important;
  }
  .btn-primary:disabled {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }
  
  .btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: #ffffff !important;
  }
  .btn-secondary:hover {
    background-color: #7a4c4c !important;
    border-color: #7a4c4c !important;
  }
  
  .btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #ffffff !important;
  }
  .btn-success:hover {
    background-color: #3f7a4c !important;
    border-color: #3f7a4c !important;
  }
  
  .btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #ffffff !important;
  }
  .btn-danger:hover {
    background-color: #7a3f3f !important;
    border-color: #7a3f3f !important;
  }
  
  .btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #333333 !important;
  }
  .btn-warning:hover {
    background-color: #c0913b !important;
    border-color: #c0913b !important;
  }
  
  .btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #ffffff !important;
  }
  .btn-info:hover {
    background-color: #3f5f7a !important;
    border-color: #3f5f7a !important;
  }
  
  body.dark-only .dropdown-menu.show {
    background-color: #252525;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right .nav-menus li .onhover-show-div li {
    border-color: #252525;
}

body.dark-only .page-wrapper .page-header .header-wrapper .nav-right > ul li {
    background-color: #252525;
}

body.dark-only .page-wrapper .page-body-wrapper .page-body .card:not(.email-body) .bg-white {
    background-color: #3a3a3a !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

.dark-only .offcanvas, .dark-only .accordion-button, .dark-only .accordion-body {
    background-color: #1e1f20;
    color: var(--bs-heading-color);
}

.dark-only .filter-action {
    background-color: #1e1f20;
}

.dark-only .accordion-item {
    border-color: #474747;
}


body.dark-only .modal-content {
    background-color: #1e1f20;
}

.dark-only .footer {
    background-color: #0e1116;
}

ul.sidebar-submenu {
    width: 220px !important;
}


body.dark-only .nav-tabs .nav-link.active {
    background-color: #252525;
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
    border-bottom: #252525 1px solid;
}

.chart-container { height: 400px; }
.kpi-card { text-align: center; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.kpi-value { font-size: 2.5rem; font-weight: bold; }
.kpi-label { font-size: 1rem; color: #FFF !important; }
.metric-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}


.btn-outline-primary.active {
    color: #FFF !important;
    border-color: var(--bs-btn-active-bg) !important;
}

body.dark-only .btn-outline-primary.active {
    color: #FFF !important;
    border-color: var(--bs-btn-active-bg) !important;
}

.active .bi-chat-square-text {
    color: #ffffff;
}

/* Estilizando o span com a animação */
.slide-up {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px); /* Começa 20px abaixo */
    animation: slideUp 1s ease-out forwards; /* Animação de 1 segundo */
}

/* Definindo a animação slide-up */
@keyframes slideUp {
    0% {
    opacity: 0;
    transform: translateY(20px);
    }
    100% {
    opacity: 1;
    transform: translateY(0);
    }
}

        .insula-notification {
            background: linear-gradient(135deg, #7b3fe4, #00c4e6);
            color: white;
            border: none;
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            animation: insulaFadeIn 1s ease-in;
            padding: 15px;
        }
        .insula-notification .insula-btn {
            background-color: #ffffff;
            color: #7b3fe4;
            border: none;
            border-radius: 25px;
            padding: 8px 16px;
            transition: transform 0.2s, background-color 0.3s;
        }
        .insula-notification .insula-btn:hover {
            transform: scale(1.05);
            background-color: #e9ecef;
            color: #7b3fe4;
        }
        .insula-modal-content {
            border-radius: 15px;
            border: none;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        .insula-modal-header {
            background: linear-gradient(135deg, #7b3fe4, #00c4e6);
            color: white;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            padding: 15px;
        }
        .insula-modal-body {
            background-color: #f9f9fb;
            font-size: 1.1rem;
            padding: 20px;
        }
        
        .insula-btn {
            border-radius: 25px;
            background-color: #7b3fe4;
            color: white;
            padding: 8px 20px;
        }
        
        .insula-btn:hover {
            background-color: #6a35c7;
            color: white;
        }
        .insula-list-item {
            border-radius: 10px;
            margin-bottom: 10px;
            transition: background-color 0.3s;
            padding: 12px;
        }
        .insula-list-item:hover {
            background-color: #f1f3f5;
        }
        .loading-spinner {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            vertical-align: middle;
            border: 3px solid #ffffff;
            border-top: 3px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        .modal-loading-spinner {
            display: inline-block;
            width: 3rem;
            height: 3rem;
            border: 4px solid #7b3fe4;
            border-top: 4px solid transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-top: 14px;
        }
        .progress-text {
            font-size:1.1rem;
            color: #6a35c7;
            animation: pulse 2s infinite;
        }

        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        @keyframes insulaFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.6; }
            100% { opacity: 1; }
        }

.extra-info {
    border: #d0d0d0 1px solid;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 11px;
    margin-bottom: 4px;
}    


#paginationActivities .page-link {
    padding: 5px 10px;
    font-size: 12px;
    text-decoration: none;
}


.active>.page-link, .page-link.active {
    color: var(--bs-pagination-active-color) !important;
}


.limited-text{
    display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  
  /* A partir de 2024/2025 a maioria dos navegadores já entende: */
  line-clamp: 2;
  
  overflow: hidden;
  text-overflow: ellipsis;
  
  max-width: 100%;
}

#stageBoard {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
    padding: 10px;
    height: calc(100vh - 54px);
    background-color: #f9f9f952;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-height: thin;
}

.pipeline-stage{ border:0; background-color:#F7F8F9 !important;border-radius:17px; margin:5px; margin-right: 0.5rem; width:340px;
    display:inline-block;vertical-align:top;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.dark-only .pipeline-stage{
    background-color: #252525 !important;
}

.pipeline-crm-column-title{display:flex;justify-content:space-between;align-items:center; padding: 0px 9px 0px 9px;}
.pipeline-column-title{font-size:16px;padding:9px;color:#54667a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipeline-stage-pool{
    padding:9px;
    height:calc(100vh - 254px);
    overflow-y:scroll;
    overflow-x:hidden;
    white-space:normal;
    scrollbar-width:thin;
    scrollbar-color: #888 transparent; /* Para Firefox */
}

  /* Para navegadores baseados no WebKit */
  .pipeline-stage-pool::-webkit-scrollbar {
    width: 8px; /* Define a largura do scrollbar */
  }
  
  .pipeline-stage-pool::-webkit-scrollbar-track {
    background: transparent; /* Fundo do track */
  }
  
  .pipeline-stage-pool::-webkit-scrollbar-thumb {
    background: #888; /* Cor da "bolinha" do scrollbar */
    border-radius: 4px; /* Bordas arredondadas */
  }
  
  .pipeline-stage-pool::-webkit-scrollbar-thumb:hover {
    background: #555; /* Cor ao passar o mouse */
  }

.btn-add-pipeline{
    width: 25px;
    height: 25px;
    font-size: 10px;
    margin-top: 8px;
  }

  .pipeline-contact {
    background-color: #fff !important;
    padding: 9px !important;
    margin: 10px 0 !important;
    border: 0px solid #ccc !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all .2s ease-in-out !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 12px !important;
}

.dark-only  .pipeline-contact {
    background-color:#343434 !important;
}

.pipeline-contact:hover{transform:scale(1.03)}

.dark-only .pipeline-contact{
    background-color:#1f2022 ;
}

.pipeline-card-name{
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
    display: -webkit-box;
    overflow: hidden;
}

.pipeline-card-user{width:100%;box-sizing:border-box;padding:6px 0;display:flex;justify-content:flex-start;align-items:center;z-index:99}

.box-additional {
    min-width: 163px;
    max-width: 164px;
}