:root {
    --theme-default: var(--bs-primary);
}

body{
    font-size: .85rem;
}

.page-body{
    /* display: flex;
    justify-content: center; */
}
.page-body-inner{
    /* max-width: 2560px; */
}
.login-card .login-main .theme-form .is-invalid{border:1px dashed 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)}
.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:min(2560px,96vw)!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:min(500px,96vw)!important;height:unset!important}
.area-md{max-width:min(800px,96vw)!important;height:unset!important}
.area-lg{max-width:min(1000px,96vw)!important;height:unset!important}
.area-xl{max-width:min(1310px,96vw)!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}
.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 dashed;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}
.text-icon-menu{color: var(--bs-primary)}
.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:#171a21!important}
.dark-only .text-white{color:#171a21!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:#23272f;color:#fff!important;background-color:#23272f!important}
.drop-selected{height:37px!important;border-radius:var(--bs-border-radius);border:1px dashed #7A70BA !important}
.dark-only .box-select li{border-color:#23272f!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, #23272f, #23272f);
    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:#545b64;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: #7A70BA !important;
    border-radius: 6px !important;
    /* 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;
}

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

.btn-dropdown:focus{
    /* color: var(--bs-body-color) !important; */
    background-color: var(--bs-body-bg) !important;
    border: 1px dashed #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;
}


.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 dashed;
    margin: 0;
}

.card{
    border-radius: 6px;
}

.btn {
    border-radius: 6px;
}

.ql-toolbar.ql-snow{
    border: 1px dashed #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 dashed #7A70BA;
    border-top: 0;
    border-radius: 0px 0px 6px 6px !important
}

.ql-editor {
    max-height: 1000px; /* 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 dashed #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: #171a21;
}

.dark-only .calendar-table{
    background-color: #171a21;
}

.dark-only .btn-dropdown:focus {
    background-color: #1a1d23 !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: #171a21;
    color: var(--bs-heading-color);
}


.dark-only .filter-action{
    background-color: #262b33;
}

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

.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: #0f1216 !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: 145px;
    min-height: calc(100vh - 145px);
}



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

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

.dark-only .footer {
    background-color: #171a21;
}

/*
 * Modal de tarefa/chamado — TELA CHEIA de verdade.
 *
 * Havia uma margem de 0.1rem em volta e o arredondamento padrão do
 * `.modal-content` do Bootstrap. Numa janela que ocupa quase tudo, essa moldura
 * de 1px não lê como "modal": lê como página desalinhada, com uma faixa do
 * conteúdo de trás vazando pelas bordas.
 *
 * Os 61px do `.modal-header` deixaram de ser descontados porque o cabeçalho
 * deixou de existir: o código da tarefa, as abas e o × dividem uma linha só
 * DENTRO deste corpo (`.tk-task-topbar`). Descontá-los agora deixaria uma
 * faixa morta de 61px no pé da modal.
 */
.body-internal-modal{
    height: 100vh;
    background-color: #F4F7F9 !important;
    overflow: auto;
}

.dark-only .body-internal-modal{
    background-color: #23272f !important;
}

.fullscreen-internal-modal{
    height: 100vh;
    width: 100vw;
    max-width: none;
    margin: 0;
    overflow: auto;
}

/* Sem cantos nem borda: encostado na janela, o raio deixaria aparecer o que
   está atrás nos quatro cantos. */
.fullscreen-internal-modal .modal-content{
    height: 100vh;
    border: 0;
    border-radius: 0;
}

.tagify {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  .tagify:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
  }
  .tagify__tag {
    background: #0d6efd;
    color: white;
    border-radius: 0.25rem;
    margin: 2px;
  }
  .tagify__tag__removeBtn {
    color: white;
    opacity: 0.8;
  }
  .tagify__tag__removeBtn:hover {
    opacity: 1;
  }
  .tagify__dropdown {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background: white;
  }
  .tagify__dropdown__item {
    padding: 0.5rem 1rem;
    cursor: pointer;
  }
  .tagify__dropdown__item--active {
    background: #e9ecef;
  }

.internal-comment {
    background-color: #fff5f54d;
    border: #ffadad 1px dashed !important;
    border-radius: 12px;
}
.box-comment {
    padding: 10px;
}

.no-wrap {
    white-space: nowrap;
}

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

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

.page-wrapper .page-header .breadcrumb .breadcrumb-item.active{
    color: var(--bs-primary) !important;
}

.css-ticket .card-body {
    border-top: var(--bs-primary) 5px solid !important;
    border-radius: 0px 0px 6px 6px;
}

.dark-only .css-ticket .card-body {
    border-top: var(--bs-primary) 5px solid !important;
    border-radius: 0px 0px 6px 6px;
}

.css-task .card-body {
    border-top: #0DA759 5px solid !important;
    border-radius: 0px 0px 6px 6px;
}

.dark-only .css-task .card-body {
    border-top: #0DA759 5px solid !important;
    border-radius: 0px 0px 6px 6px;
}

.task-list-header {
    background-color: #0DA759;
}

.task-list-header th {
    color: #FFF !important;
}

.ticket-list-header {
    background-color: var(--bs-primary);
}

.ticket-list-header th {
    color: #FFF !important;
}

.dark-only .bg-task, .bg-task{
    border: #0DA759 1px solid !important;
  background-color: #0DA759 !important;
  color: #FFF !important;
}

.dark-only .bg-ticket, .bg-ticket{
    border: var(--bs-primary) 1px solid !important;
    background-color: var(--bs-primary) !important;
    color: #FFF !important;
}

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

.btn-check:checked + .btn-outline-primary{
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #FFF !important;
}

.btn-check + .btn-outline-primary:hover, .btn-check + .btn-outline-primary:focus, .btn-check + .btn-outline-primary:active, .btn-check + .btn-outline-primary:focus-visible, .btn-check + .btn-outline-primary.active{
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

#globalSearch #search {
    border: 0;
    background: #f5f5f5;
}


.dark-only #globalSearch #search {
    border: 0;
    background: #23272f;
}

.dark-only .apexcharts-legend-text {
    color: #FFF !important;
}

@media screen and (max-width: 768px) {
.b-menu {
    width: 92%;
    margin: 7px 4% !important;
}

.f-menu {
    width: 92%;
    margin: 7px 4% !important;
}
}

#projectSearchIdBtnSearch{
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-radius: 0 !important;
    border-bottom: #7A70BA 4px solid;
}

button#projectSearchIdBtnSearch:focus {
    border-left: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    border-bottom: #7A70BA 4px solid !important;
}

  a {
    color: var(--bs-primary);
  }
  a:hover {
    color: var(--bs-primary-dark);
  }




  /* 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: #3a444d !important;
    border-color: #3a444d !important;
  }  

/*
 * Área de trabalho expandida — o botão ⤢ do Quadro e do Calendário
 * (`utility.showOver` / `hideOver`, em `utility.js`).
 *
 * A promessa é simples: a área de trabalho fica POR CIMA DE TUDO. No tema
 * antigo funcionava; sob o shell v2 ela sumia atrás da interface. Três defeitos
 * distintos, todos medidos no navegador:
 *
 *  1. `z-index: 9`. O shell v2 empilha em 1033 (`.tk-subnav`), 1034
 *     (`.tk-sidebar`) e 1035 (`.tk-topbar`) — todos `position: sticky`, todos
 *     acima. `elementFromPoint(60, 300)` devolvia `tk-sec` (item da barra
 *     lateral) com o cartão supostamente expandido: a barra pintava por cima.
 *     1040 fica acima do shell e ABAIXO do modal do Bootstrap (backdrop 1050,
 *     conteúdo 1055) — de propósito, porque a tarefa aberta a partir do quadro
 *     expandido precisa continuar aparecendo na frente.
 *
 *  2. Fundo transparente. `getComputedStyle(#cardFrame).backgroundColor` era
 *     `rgba(0,0,0,0)`: o `.card` não pinta fundo próprio neste tema. Só o
 *     z-index deixaria a tela de trás aparecendo através da área "expandida".
 *     `--tk-surface` existe nos dois temas (claro `#ffffff`, escuro `#151c26`).
 *
 *  3. `overflow: visible` com `body { overflow: hidden }` (que o `showOver`
 *     define). Conteúdo mais alto que 100vh transbordava um cartão de altura
 *     fixa sem barra de rolagem em lugar nenhum — ficava inalcançável. Era o
 *     que cortava o cabeçalho do calendário.
 *
 * `inset: 0` substitui top/left/width/height: com `100vw` a barra de rolagem
 * vertical do próprio cartão empurrava 15px para fora da tela.
 *
 * `margin: 0` não é zelo: o `.card` do tema traz `margin-bottom: 30px`, e um
 * elemento esticado entre `top: 0` e `bottom: 0` desconta as margens — a área
 * "de tela cheia" media 915px numa janela de 945px (medido). O `height: 100vh`
 * antigo escondia isso porque forçava a altura e deixava a margem transbordar.
 */
.overCard {
    position: fixed;
    inset: 0;
    margin: 0;
    z-index: 1040;
    overflow: auto;
    background: var(--tk-surface, #fff);
}

/*
 * O quadro é o único cartão que o tema v2 força a transparente
 * (`body.tk-ui #cardFrame { background: transparent }`, em `tasskee.ui.css`).
 * Faz sentido embutido na página, onde quem pinta o fundo são as colunas; não
 * faz nenhum quando o cartão VIRA a tela inteira e o resto da interface fica
 * atrás dele.
 *
 * O `!important` aqui NÃO é preguiça de especificidade: a regra do tema é
 * `background: transparent !important`, e contra `!important` a especificidade
 * não decide nada — só outro `!important` de peso igual ou maior. Medido:
 * `getPropertyPriority('background')` devolve `important` naquela regra.
 *
 * O `.overCard` é aditivo e temporário (entra no clique, sai no clique), então
 * o override some junto com ele. O calendário não precisa desta regra: ele já
 * computa fundo branco.
 */
body.tk-ui #cardFrame.overCard {
    background: var(--tk-surface, #fff) !important;
}

.overCard #frameBoard {
    height: calc(100vh);
}


.overCard .task-stage-pool {
    height: calc(100vh - 68px);
}

.changeOver{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 6px;
    background-color: #ffffffc7;
    margin: 5px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.changeOver:hover{
    background-color: #d1d1d1c7;
}

.overCard .project-stage-pool {
    height: calc(100vh - 69px);
}

/* Força tooltip do ApexCharts com fundo escuro e texto claro */
.apexcharts-tooltip {
    background: rgba(30, 30, 30, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px);
}

.apexcharts-tooltip-title {
    background: #1a1a1a !important;
    color: #fff !important;
    border-bottom: 1px solid #444 !important;
}

.apexcharts-tooltip-series-group {
    color: #fff !important;
}

.apexcharts-tooltip-y-group {
    color: #fff !important;
}

.user-select-field {
    border: 0;
    border-bottom: #298EF3 4px solid !important;
    border-radius: 0 !important;
    padding: 10px !important;
    height: 55px;
}

.label-admin-user{
    z-index: 1;
    right: 23px;
    padding: 1px 0.7rem;
    border-radius: 10px;
    top: -8px;
    background-color: #298ef3;
    color: #FFF;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;    
}

.fc .fc-button-group {
    margin-right: 32px;
}

/*
 * Estado de carregamento das colunas do quadro.
 *
 * O que havia aqui era `background-color: #ffffff99` mais a palavra
 * "Carregando ..." centralizada. Dois defeitos, os dois visíveis no tema
 * escuro:
 *
 *  1. Branco fixo. Um véu branco a 60% sobre a coluna escura vira uma tarja
 *     cinza com texto lavado — o contraste some justamente no tema em que o
 *     usuário mais precisa dele. Agora o véu sai de `--tk-surface`, que os dois
 *     temas já redeclaram.
 *
 *  2. Altura zero. Na v2 o pool é `height: auto`
 *     (`body.tk-ui .tk-column .task-stage-pool`, em tasskee.ui.css), então uma
 *     coluna SEM cartões tem corpo de altura ~0 — e um overlay `height: 100%`
 *     de um pai de altura zero é uma faixa de alguns pixels colada no
 *     cabeçalho. Era exatamente o que aparecia: a tarja fina, não uma coluna
 *     carregando. `min-height` dá a ela o tamanho de uma coluna de verdade.
 *
 * E o texto virou ESQUELETO. Três retângulos no lugar dos cartões que estão
 * chegando dizem o que vai aparecer e onde — "Carregando ..." só diz que algo
 * está acontecendo. A animação é a `dashPulse` do dashboard
 * (`tasskee.ui.css`), com os mesmos tokens: um só vocabulário de carregamento
 * no produto inteiro, em vez de dois parecidos.
 */
.task-stage-pool-load {
    position: absolute;
    inset: 0;
    min-height: 168px;
    border: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px;
    /* Quase opaco: esconde o cartão antigo enquanto o novo não chega, sem
       fazer a coluna piscar de branco. */
    background: color-mix(in srgb, var(--tk-surface, #fff) 92%, transparent);
    border-radius: inherit;
}

/*
 * A coluna reserva altura enquanto carrega.
 *
 * Sem isto o `min-height` do esqueleto não adianta: ele é `position: absolute`
 * dentro de um corpo que, numa coluna vazia, mede 12px — e a `.tk-column` tem
 * `overflow: hidden`, então os 168px eram recortados para 12px. Medido.
 *
 * A classe entra e sai no `tasskee.task.js`, junto do `.show()`/`.hide()` do
 * esqueleto. É o pai genérico (`.position-relative`), e não `.tk-col-body`,
 * para valer também no quadro de sprint e na lista do calendário, que usam
 * marcações diferentes.
 */
.tk-pool-loading {
    min-height: 168px;
}

/*
 * A v2 declara `body.tk-ui .tk-column .tk-col-body { min-height: 0 }` — (0,3,0)
 * contra os (0,1,0) da regra acima, e por isso ela sozinha não mudava nada
 * (medido: a coluna vazia continuava com 61px). Este seletor é (0,4,0) e vence
 * sem `!important`. O `min-height: 0` original existe para o corpo poder
 * encolher no flex; aqui ele é suspenso só enquanto o esqueleto está na tela.
 */
body.tk-ui .tk-column .tk-col-body.tk-pool-loading {
    min-height: 168px;
}

/* O texto continua no HTML para leitor de tela — some só visualmente. */
.task-stage-pool-load .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.task-stage-pool-load .tk-load-card {
    height: 42px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--tk-surface-2), var(--tk-border), var(--tk-surface-2));
    animation: dashPulse 1.2s ease-in-out infinite;
}

/* O atraso escalonado é o que faz parecer uma lista carregando, e não um
   bloco só piscando. */
.task-stage-pool-load .tk-load-card:nth-child(3) { animation-delay: .15s; }
.task-stage-pool-load .tk-load-card:nth-child(4) { animation-delay: .30s; opacity: .6; }

/* No escuro o degradê precisa de mais contraste — mesma correção que o
   `.dash-skeleton` já faz. */
body.dark-only .task-stage-pool-load .tk-load-card,
.dark-only .task-stage-pool-load .tk-load-card {
    background: linear-gradient(90deg, var(--tk-surface-2), var(--tk-border-strong), var(--tk-surface-2));
}

@media (prefers-reduced-motion: reduce) {
    .task-stage-pool-load .tk-load-card { animation: none; }
}


.page-wrapper.horizontal-wrapper .page-body-wrapper .sidebar-wrapper {
    height: auto;
}

.task-nav-link{
    font-size: .8rem !important;
}




.css-ticket .task-nav-link {
    margin-left: .5rem;
    padding: 10px 10px 10px 10px !important;
    background-color: #ffffff;
    color: #24282f !important;
    border-radius: 12px !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.dark-only .css-ticket .task-nav-link {
    background-color: #171a21;
    color: #FFF !important;
}

.css-ticket .task-nav-link.active {
    background-color: #1d74cc !important;
    color: #FFF !important;
    border: 0 !important;
}

.css-task .task-nav-link {
    margin-left: .5rem;
    padding: 10px 10px 10px 10px !important;
    background-color: #ffffff;
    color: #24282f !important;
    border-radius: 12px !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.dark-only .css-task .task-nav-link {
    background-color: #171a21;
    color: #FFF !important;
}

.css-task .task-nav-link.active {
    background-color: #0da759 !important;
    color: #FFF !important;
    border: 0 !important;
}

.dark-only .dropzone{
    border: 2px dashed #000;
    background-color: #23272f;
}

.dark-only .dropzone .dz-message{
    color: #FFF !important;
}



#title {
    font-size: 1rem;
    font-weight: 500;
}

.loader-wrapper {
    background-color: #00000099;
}

.loader-wrapper .loader {
    background-color: #00000017 !important;
}

 @media (max-width: 480px) {	
    #planListBox {
        flex-direction: column;
    }
}