:root {
--primary-background: #F2EDE8;
/* creme background principal*/
--primary-red: #B7312C;
/* Vermelho Fresoft */
--selected-tab-red: #862222;
--secondary-red: #F4E1E0;
/* Vermelho secundario*/
--terciary-red: #CEA3A2;
--primary-gray: #E4E4E4;
/* Cinza para detalhes */
--search-background: #FAF7F4;
/*Search-back*/
--secundary-gray: #80726C;
/*Table text*/
--table-text: #756353;
/*Table icons*/
--table-icons: #80726C;
/*table odd rows*/
--table-odd: #FDFBF8;
/*table hoover*/
--table-hover: #F7F2ED;
/*table-hover-icons*/
--table-hover-icons: #956664;
/*table checkbox border*/
--table-checkbox-border: #CDBDB0;
--table-checkbox-deacticated-background: #f3efeb;
--table-checkbox-deacticated-border: #cdbdb0;
--table-checkbox-deactivated-border-hover: #D1C6BD;
--table-checkbox-deactivated-background-hover: #D1C6BD;
--table-checkbox-deactivated-icon-hover: #A29587;
--table-checkbox-deactivated-selected-background: #d09f9e;
--table-checkbox-deactivated-selected-border: #956664;
--table-checkbox-hallo-effect-icon: #d7cfc6;
}
body {
background-color: var(--primary-background) !important;
/* Usando a variável para o fundo */
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* DevExtreme overrides (must load after theme CSS). */
/* Remove red focus rectangle in DataGrid filter row editors */
.dx-datagrid-filter-row .dx-texteditor.dx-editor-outlined.dx-state-focused {
box-shadow: none !important;
}
.dx-datagrid-filter-row .dx-texteditor.dx-state-focused::before {
border-bottom-color: transparent !important;
}
.dx-datagrid-filter-row .dx-texteditor.dx-state-focused.dx-editor-filled,
.dx-datagrid-filter-row .dx-texteditor.dx-state-focused.dx-editor-outlined,
.dx-datagrid-filter-row .dx-texteditor.dx-state-focused.dx-editor-underlined {
border-color: transparent !important;
}
.dx-datagrid-filter-row .dx-editor-cell.dx-focused .dx-highlight-outline::after {
border-color: transparent !important;
}
.dx-datagrid-filter-row .dx-editor-cell .dx-texteditor-input:focus {
outline: none !important;
box-shadow: none !important;
}
.dx-datagrid-filter-row .dx-editor-cell .dx-texteditor:focus-within {
box-shadow: none !important;
}
.dx-datagrid-filter-row .dx-menu-item.dx-state-focused::after {
border-color: transparent !important;
}
.dx-datagrid-focus-overlay {
border-color: transparent !important;
}
/* Global DevExtreme button radius */
.dx-button {
border-radius: 7px !important;
}
.dx-button.dx-button-mode-outlined {
background-color: #ffffff !important;
}
.banner {
background-image: url(../images/banner.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100% !important;
display: flex;
justify-content: center;
height: 150px !important;
}
#login-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #F2EDE8;
overflow: hidden;
position: relative;
}
#login-form-container {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 28.75rem;
border-radius: 15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 2.37rem 0px 1.5rem 0px;
background-color: #F8F9FA;
position: relative;
z-index: 10;
}
#login-header {
display: flex;
flex-direction: column;
font-weight: 500;
font-style: medium;
line-height: 100%;
width: 22.31344rem;
padding-left: 33px;
}
#login-logo,
.login-logo-desktop {
width: 11.25rem;
height: 6.16056rem;
position: absolute;
top: 3.2rem;
right: 2.77rem;
z-index: 10;
}
/* Logo inside form on small screens */
.login-logo-mobile {
display: none;
width: 10rem;
object-fit: contain;
margin-bottom: 1rem;
}
@media (max-width: 919px) {
.login-logo-desktop {
display: none !important;
}
.login-logo-mobile {
display: block;
}
}
#login-welcome {
font-size: 1.54813rem;
font-style: normal;
font-weight: 700;
line-height: normal;
color: #333333;
margin-bottom: 12px;
}
#login-subtitle {
color: #333;
font-size: 1.11806rem;
font-style: normal;
font-weight: 500;
line-height: normal;
}
#login-form {
width: 22.31344rem;
border-radius: 15px;
margin-top: 0.57rem;
}
#login-form .dx-form {
width: 100%;
padding: 0 !important;
}
#login-form .login-button .dx-button {
width: 100%;
background-color: #B7312c;
color: #FFFFFF;
border-radius: 15px;
margin-top: 2rem;
margin-bottom: 1rem;
}
#login-form .dx-field-item-label {
font-size: 1.11806rem;
font-weight: 500;
font-style: normal;
line-height: normal;
color: #333333;
margin-bottom: 0.56rem;
margin-top: 1rem;
}
#login-form .dx-field-item-label-location-top {
padding: 0px 0 3px;
padding-inline-start: 16px;
padding-inline-end: 16px;
}
#login-form .dx-texteditor-container {
background-color: transparent;
border: 2px solid #AFAFAF;
border-radius: 15px;
}
#login-form .dx-texteditor.dx-editor-filled {
background-color: transparent;
}
#login-form .dx-texteditor-input {
font-size: 1.11806rem;
font-weight: 500;
font-style: normal;
line-height: normal;
color: #333333;
border-radius: 15px;
}
#login-form .dx-texteditor-input-container .dx-placeholder::before {
font-size: 1.11806rem !important;
font-weight: 500 !important;
font-style: normal !important;
line-height: normal !important;
color: #AFAFAF !important;
padding-bottom: 0px;
padding-top: 0px;
}
#login-form .dx-texteditor::before {
border-radius: 15px;
left: 12px;
right: 12px;
position: relative;
width: auto;
display: inline-block;
position: absolute;
}
#login-form .dx-texteditor::after {
border-radius: 15px;
left: 12px;
right: 12px;
position: relative;
width: auto;
display: inline-block;
position: absolute
}
#login-form .login-button .dx-button .dx-button-text {
display: flex;
justify-content: center;
align-items: center;
font-size: 1.37606rem;
font-weight: 500;
font-size: normal;
line-height: 24px;
text-transform: none;
height: 100%;
height: 100%;
text-align: center;
padding: 10px 30px 10px 30px;
}
/* Password field: trailing visibility toggle — circular hit area */
#login-form .password-item .dx-texteditor-buttons-container .dx-button {
width: 2.25rem;
height: 2.25rem;
min-width: 2.25rem;
padding: 0;
border-radius: 50%;
}
#login-form .password-item .dx-texteditor-buttons-container .dx-button .dx-button-content {
padding: 0;
justify-content: center;
}
#login-footer {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
min-width: 100%;
width: auto;
height: auto;
z-index: 1;
pointer-events: none;
}
.dx-field-label {
padding: 0;
width: 300px;
}
.dx-field-item-label {
width: 300px;
color: black;
}
.dx-texteditor-input {
background-color: unset !important;
}
.dx-form {
/* padding: 15px !important; */
}
/*O PAI (Layout Lado a Lado) */
.app-container {
display: flex;
width: 100%;
min-height: 100vh;
}
/*SIDEBAR*/
.app-container:has(.menu-closed) .app-sidebar {
width: 120px;
}
/*Posição initial*/
.app-sidebar {
width: 250px;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: 100;
display: flex;
flex-direction: column;
overflow-y: hidden;
align-items: center;
transition: width 0.4s cubic-bezier(0.05, 0.7, 0.1, 1);
overflow-x: hidden !important;
}
/* ADICIONAR ESTAS DUAS NOVAS CLASSES NO FIM DO FICHEIRO: */
.app-sidebar.footer-is-hidden {
height: 100vh;
/* Ocupa 100% da altura da janela quando o footer não está */
}
.app-sidebar.footer-is-visible {
/* Ajusta os "150px" para a altura aproximada que o teu footer tem no ecrã */
height: calc(100vh - 75px);
}
.sidebar-top-section {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
/* padding-bottom: ; */
flex-direction: column;
}
.sidebar-logo {
width: 100%;
height: 100px;
display: flex;
justify-content: center;
margin-bottom: 20px;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-logo .logo {
display: inline-flex;
text-decoration: none;
}
.sidebar-logo .logo img {
border-radius: 50px;
width: 90px;
height: 90px;
transition: width 0.4s ease, height 0.4s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.sidebar-content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
transition: opacity 0.2s ease, transform 0.2s ease;
width: 100%;
overflow: hidden;
position: relative;
}
.sidebar-content,
.sidebar-actions {
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
width: 100%;
}
.sidebar-content.hidden,
.sidebar-actions.hidden {
opacity: 0;
transform: translateX(-20px);
/* Dá um efeito de deslize para a esquerda */
pointer-events: none;
visibility: hidden;
overflow: hidden;
}
.sidebar-content.visible,
.sidebar-actions.visible {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.app-container:has(.menu-closed) .sidebar-actions {
display: none;
/* Ou mantém visível apenas os ícones se preferires um modo mini */
}
.sidebar-content.hidden {
opacity: 0;
transform: translateX(-15px);
pointer-events: none;
max-height: 0;
overflow: hidden;
}
.sidebar-content.visible {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
/* Scroll hints on sidebar menu tree */
.sidebar-scroll-indicator {
position: absolute;
left: 15px;
right: 0;
height: 1px;
background-color: #bdbdbd;
opacity: 0;
pointer-events: none;
z-index: 10;
transition: opacity 0.2s ease;
}
.sidebar-scroll-indicator.visible {
opacity: 1;
}
/*Menu TreeView*/
/*scrollbar a esquerda e conteuso normal(direita)*/
/*O teu contentor principal */
.sidebar-content {
direction: rtl !important;
/* Move a barra de scroll para a esquerda */
overflow-y: auto !important;
/* Ativa o scroll aqui */
overflow-x: hidden;
}
/*Garante que o conteúdo dentro da sidebar volta ao normal */
.sidebar-content>* {
direction: ltr !important;
/* Texto e TreeView voltam a ler-se da esquerda para a direita */
}
/*Repõe a direção do texto nos nós para não ficarem invertidos */
.sidebar-content .dx-scrollable-content {
direction: ltr !important;
/* Texto e setas voltam a ler da esquerda para a direita */
height: auto !important;
}
.sidebar-content .dx-scrollable,
.sidebar-content .dx-scrollable-wrapper,
.sidebar-content .dx-scrollable-container {
display: block !important;
width: 100% !important;
}
.sidebar-content .dx-scrollbar {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
/*Move a barra de rolagem para a esquerda usando a classe pai existente */
.sidebar-content .dx-scrollbar-vertical {
left: 0 !important;
right: auto !important;
}
/*Afasta o conteúdo do menu para a direita para não ficar colado na barra */
.sidebar-content .dx-scrollable-content {
padding-left: 15px !important;
padding-right: 0 !important;
}
/*Mantém o input de pesquisa ("Pesquisar no menu...") alinhado corretamente */
.sidebar-content .dx-visibility-change-handler {
padding-left: 0 !important;
}
.sidebar-content .dx-treeview .dx-scrollable-content {
padding: 0 !important;
}
/* 4. Esconde as barras de design do DevExtreme que sobraram */
.sidebar-content .dx-scrollbar {
/*display: none !important;*/
}
/*Ajuste fino das setas da TreeView */
/*Como o pai está em RTL, as setas podem alinhar-se à direita por herança.
Isto força-as de volta à esquerda do texto. */
.sidebar-content .dx-treeview-toggle-item-container {
float: left !important;
}
/* Expand/collapse arrow: keep default dark color when row is focused (theme sets row to #fff and toggle to unset → inherits white) */
.sidebar-content .dx-treeview .dx-treeview-item-without-checkbox.dx-state-focused>.dx-treeview-item .dx-treeview-toggle-item-visibility {
color: #333333 !important;
}
.sidebar-content .dx-treeview .dx-treeview-item-without-checkbox.dx-state-focused>.dx-treeview-item .dx-treeview-toggle-item-visibility::before {
color: #333333 !important;
}
/*Aspecto da scroll bar*/
/*Define a largura da barra */
.sidebar-content::-webkit-scrollbar {
width: 6px;
/* Barra bem fininha e discreta */
}
/*O fundo da barra (a calha) */
.sidebar-content::-webkit-scrollbar-track {
background: transparent;
/* Fundo invisível para ser mais moderno */
}
/*O "polegar" (a parte que arrastas) */
.sidebar-content::-webkit-scrollbar-thumb {
background-color: #d1d1d1;
/* Cor cinza clara */
border-radius: 10px;
/* Bordas arredondadas */
border: 1px solid transparent;
}
/*Quando passas o rato na barra ela fica um pouco mais escura */
.sidebar-content::-webkit-scrollbar-thumb:hover {
background-color: #a8a8a8;
}
/*Para Firefox (usa propriedades diferentes) */
.sidebar-content {
scrollbar-width: thin;
scrollbar-color: #d1d1d1 transparent;
}
/*Procura da ttree view*/
.sidebar-content .dx-treeview-search {
position: relative !important;
/* Já não precisa de fixed/absolute */
flex-shrink: 0;
/* Impede que a pesquisa encolha ou suma */
margin-bottom: 10px;
width: 100% !important;
box-sizing: border-box !important;
}
/*Onde o scroll real vai acontecer (a lista de nós nativa do DevExtreme) */
.sidebar-content .dx-scrollable-container {
flex: 1;
min-height: 0;
}
/*O item da tree continua a ser a base */
.sidebar-content .dx-treeview-item {
position: relative;
z-index: 1;
overflow: visible !important;
background-color: transparent !important;
}
/*Pseudo-elemento O fundo do Hover */
.sidebar-content .dx-treeview-item::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -200px;
/* Mantém o fundo a cobrir a extrema esquerda */
right: 5px;
/* Pequeno recuo à direita para o arredondamento ser visível */
z-index: -1;
background-color: transparent;
transition: background-color 0.15s ease-in-out;
pointer-events: none;
/* Sintaxe: superior-esquerdo superior-direito inferior-direito inferior-esquerdo */
border-radius: 0 10px 10px 0 !important;
/* Ajuste o '10px' para o raio desejado */
}
/*Cor do Hover */
.sidebar-content .dx-treeview-item.dx-state-hover::before {
background-color: var(--search-background) !important;
/* Sua cor de hover (ex: azul claro) */
}
/*Cor do Item Selecionado - Forçando a aplicação */
.sidebar-content .dx-treeview-node.dx-state-selected>.dx-treeview-item::before {
background-color: var(--secondary-red) !important;
border-radius: 0 10px 10px 0 !important;
display: block !important;
}
.sidebar-content .dx-treeview-item::after {
content: none !important;
}
.sidebar-content .dx-treeview-node.dx-state-selected>.dx-treeview-item::after {
content: "" !important;
position: absolute;
top: 0;
bottom: 0;
left: -18px !important;
width: 5px !important;
background-color: var(--primary-red) !important;
z-index: 99;
display: block !important;
pointer-events: none;
border-radius: 0px 10px 10px 0px !important;
}
/*
* Sidebar menu TreeView — typography by depth (root → nested).
* Base path uses .dx-scrollable-content (DevExtreme scroll wrapper); includes a
* fallback for trees without that wrapper.
*/
/* Depth 0 — root items */
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content {
color: #333333 !important;
font-size: 14.552px !important;
font-weight: 700 !important;
}
/* Depth 1 — direct children of root nodes */
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content {
color: #645955 !important;
font-size: 14px !important;
font-weight: 600 !important;
}
/* Depth 2 */
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content {
color: #645955 !important;
font-size: 14px !important;
font-weight: 400 !important;
}
/* Depth 3 — one more nested level than depth 2 (direct item on deepest node) */
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content {
color: #645955 !important;
font-size: 13px !important;
font-weight: 400 !important;
}
/* Depth 4+ (same typography; chain extends one nc>node per level) */
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview .dx-scrollable-content>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content,
.sidebar-content .dx-treeview>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-node-container>.dx-treeview-node>.dx-treeview-item .dx-treeview-item-content {
color: #645955 !important;
font-size: 11px !important;
font-weight: 400 !important;
}
/* Depth 6+ — still 11px; low specificity so depth 0–2 chains above always win */
.sidebar-content .dx-treeview .dx-treeview-item .dx-treeview-item-content {
color: #645955 !important;
font-size: 11px !important;
font-weight: 400 !important;
}
/*******************************Botao de abertura menu********************************/
.menu-control {
background-color: var(--primary-red);
color: white;
width: 120px;
align-self: flex-start;
border-radius: 0 60px 60px 0;
height: 45px;
justify-content: flex-end;
display: flex;
align-items: center;
transition: width 0.3s ease;
/* Animação suave da largura */
transition: width 0.4s ease, transform 0.4s ease, border-radius 0.4s ease;
overflow: hidden;
}
.menu-control.menu-open {
width: 100%;
border-radius: 0;
border-radius: 0 60px 60px 0;
}
.menu-control .dx-button {
color: white;
margin-right: 10px;
width: 100%;
height: 100%;
border-radius: 0px 40px 40px 0px;
margin: 0;
}
.menu-control .dx-button-content {
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: right;
padding: 0;
}
.menu-control .dx-icon {
font-size: 20px;
color: white !important;
/*margin-right: 0 !important;*/
margin-left: 18px !important;
font-size: 18px;
font-weight: 600;
font-style: semi-bold;
margin-right: 21px;
}
.menu-control .dx-button-text {
font-size: 18px;
font-weight: 600;
font-style: semi-bold;
text-transform: none !important;
}
.menu-control .dx-state-selected {
background-color: var(--secundary-gray) !important;
color: white !important;
}
/*ÁREA DA DIREITA*/
.app-body-wrapper {
margin-left: 250px;
flex: 1;
/* Abre espaço para a sidebar fixa */
width: calc(100% - 250px);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/*Quando a classe 'menu-closed' é aplicada ao container, ajusta a margem e largura para o estado fechado do menu */
.app-container:has(.menu-closed) .app-body-wrapper {
margin-left: 120px;
}
/*MENU*/
.menu-section {
padding-top: 10px;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
/*Repor a direção padrão para o interior do componente */
.sidebar-content .dx-treeview {
height: 100% !important;
display: flex;
flex-direction: column;
overflow: hidden !important;
}
.sidebar-content .dx-treeview .menu-search {
border-top-right-radius: 60px !important;
border-bottom-right-radius: 60px !important;
overflow: hidden;
border: solid 1px var(--primary-gray) !important;
background-color: var(--search-background) !important;
height: 45px;
}
/* Same hover tint as dx-button-mode-text.dx-button-default (search icon button) */
.sidebar-content .dx-treeview .menu-search.dx-state-hover,
.sidebar-content .dx-treeview .menu-search.dx-state-hover .dx-texteditor-input,
.sidebar-content .dx-treeview .menu-search.dx-state-hover .dx-texteditor-buttons-container {
/* background-color: rgba(162, 43, 39, 0.1) !important; */
}
.sidebar-content .dx-treeview .menu-search .dx-texteditor-container {
align-items: center;
height: 100%;
}
.sidebar-content .dx-treeview .menu-search .dx-texteditor-input-container {
align-items: center;
}
.sidebar-content .dx-treeview .menu-search .dx-texteditor-input {
background-color: var(--search-background) !important;
color: #333 !important;
min-height: unset !important;
height: 100%;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 45px;
}
/* Placeholder vertically centered in the 45px search field */
.sidebar-content .dx-treeview .menu-search .dx-placeholder {
display: flex;
align-items: center;
height: 100%;
}
.sidebar-content .dx-treeview .menu-search .dx-placeholder::before {
padding-top: 0 !important;
padding-bottom: 0 !important;
vertical-align: unset;
line-height: normal;
}
.sidebar-content .dx-treeview .menu-search .dx-placeholder::after {
display: none;
}
.sidebar-content .dx-treeview .menu-search .dx-texteditor-buttons-container {
background-color: var(--search-background) !important;
padding-right: 18px;
}
/* Search button: no visible chrome — only the custom lupa icon shows */
.sidebar-content .dx-treeview .menu-search .dx-texteditor-buttons-container .dx-button {
background: transparent !important;
border: none !important;
box-shadow: none !important;
opacity: 1;
min-width: unset;
padding: 0;
}
.sidebar-content .dx-treeview .menu-search .dx-texteditor-buttons-container .dx-button .dx-button-content {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
}
.sidebar-content .dx-treeview .menu-search .dx-texteditor-buttons-container .dx-button.dx-state-hover,
.sidebar-content .dx-treeview .menu-search .dx-texteditor-buttons-container .dx-button.dx-state-focused,
.sidebar-content .dx-treeview .menu-search .dx-texteditor-buttons-container .dx-button.dx-state-active {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.sidebar-content .dx-treeview .menu-search .dx-state-focused {
border-color: none !important;
box-shadow: none !important;
}
.sidebar-content .dx-treeview .menu-search .dx-icon-search {
display: none !important;
}
/*Lupa do search — ícone SVG (ICO_MENU_LUPA.svg) em vez do ícone font "find" */
.sidebar-content .dx-treeview .menu-search .dx-icon-find {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
background-image: url("/images/icons/ICO_MENU_LUPA.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-weight: unset !important;
}
.sidebar-content .dx-treeview .menu-search .dx-icon-find::before {
display: none !important;
}
/*HEADER*/
.app-header {
max-height: 180px;
flex-shrink: 0;
margin: 0px;
min-height: 180px;
padding: 15px 15px 0 15px;
position: relative;
}
/*HEADER MENU*/
.app-header-menu {
border-bottom: 1px solid #e0e0e0;
flex-shrink: 0;
margin: 0px;
min-height: 27rem;
padding: 15px 15px 0 15px;
position: relative;
}
.app-header-content {
position: relative;
width: 100%;
height: 180px;
background: url('sua-imagem.jpg') center/cover;
/* Camada 1: Canto Superior Esquerdo (Fixo) */
/* Camada 2: O resto do lado esquerdo (abaixo da curva) */
/* Camada 3: O centro (corpo que estica) */
/* Camada 4: O degrau da direita (Fixo) */
-webkit-mask-image:
url('data:image/svg+xml;utf8,'),
/* Curva */
linear-gradient(black, black),
/* Preenchimento abaixo da curva */
linear-gradient(black, black),
/* Corpo central */
url('data:image/svg+xml;utf8,');
/* Degrau */
-webkit-mask-position:
left top,
/* 1. Curva topo esq */
left 60px,
/* 2. Preenche abaixo da curva (começa aos 60px de topo) */
60px top,
/* 3. Corpo central */
right top;
/* 4. Degrau direita */
-webkit-mask-size:
60px 60px,
/* 1. Curva */
60px calc(100% - 60px),
/* 2. Coluna esquerda abaixo da curva */
calc(100% - 170px) 100%,
/* 3. Centro (100% - 60esq - 110dir) */
110px 100%;
/* 4. Degrau */
-webkit-mask-repeat: no-repeat;
/* Versão Standard (Firefox/Edge) */
mask-image:
url('data:image/svg+xml;utf8,'),
linear-gradient(black, black),
linear-gradient(black, black),
url('data:image/svg+xml;utf8,');
mask-position: left top, left 60px, 60px top, right top;
mask-size: 60px 60px, 60px calc(100% - 60px), calc(100% - 170px) 100%, 110px 100%;
mask-repeat: no-repeat;
}
.app-header-content img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
/* object-fit: cover preenche a div.
object-position: 0 0 garante que o pixel (0,0) da imagem
está no pixel (0,0) do header. */
object-fit: cover;
object-position: 0 -54px;
z-index: 0;
}
.app-header-logo {
position: absolute;
top: 30px;
right: 30px;
}
.app-header-back {
position: absolute;
top: 30px;
left: 30px;
cursor: pointer;
}
.app-header-back:hover {
animation: wiggle 0.5s ease-in-out infinite alternate;
}
@keyframes wiggle {
from {
transform: rotate(-20deg);
}
to {
transform: rotate(20deg);
}
}
/*zona onde estao os botoes de terminar sessão e iniciar sessão*/
.sidebar-actions {
display: flex;
flex-direction: column;
align-items: self-start;
gap: 10px;
margin-bottom: 5px;
width: 100%;
padding-inline-start: 30px;
margin-top: 20px;
}
.sidebar-action-pa {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
justify-content: flex-start;
text-decoration: none;
}
.sidebar-action-pa img {
max-width: 100%;
height: auto;
}
.sidebar-action-pa span {
display: flex;
align-items: center;
height: 40px;
color: var(--secundary-gray);
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.sidebar-action-logout {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
justify-content: flex-start;
text-decoration: none;
}
.sidebar-action-logout img {
max-width: 100%;
height: auto;
}
.sidebar-action-logout span {
display: flex;
align-items: center;
height: 40px;
color: var(--secundary-gray);
font-size: 13;
font-weight: 700;
}
/*informação do site no header*/
.app-header-information {
position: absolute;
bottom: 15px;
left: 65px;
display: flex;
flex-direction: column;
}
.app-header-title {
font-size: 36px;
color: var(--primary-red);
font-weight: 600;
z-index: 1;
position: relative;
bottom: -8px;
}
/*BREADCRUMBS*/
.app-header-breadcrumb {
font-size: 21px;
font-style: semi-bold;
color: black;
z-index: 1;
position: relative;
}
.app-header-title span:first-child {
margin-left: -20px;
}
/*CONTEÚDO (Flexível) */
.app-content {
flex: 1;
padding: 20px;
width: 100%;
min-width: 250px;
min-height: 0;
display: flex;
flex-direction: column;
transition: opacity 0.3s ease, transform 0.3s ease;
box-sizing: border-box;
padding-bottom: 75px;
overflow: hidden;
}
.app-content > .body {
flex: 1;
min-height: 0;
}
/*FOOTER */
.app-footer {
background-color: var(--primary-red);
color: white;
min-height: 60px;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% + 250px);
margin-left: -250px;
box-sizing: border-box;
position: relative;
z-index: 200;
}
.app-container:has(.menu-closed) .app-footer {
width: calc(100% + 120px);
margin-left: -120px;
}
/* Efeito das bordas arredondadas (Curva Côncava) */
.app-footer::before,
.app-footer::after {
content: "";
position: absolute;
top: -30px;
width: 30px;
height: 30px;
background-color: transparent;
}
.app-footer::before {
left: 0;
border-bottom-left-radius: 24px;
box-shadow: -10px 7px 0 0 var(--primary-red);
}
.app-footer::after {
right: 0;
border-bottom-right-radius: 25px;
box-shadow: 10px 7px 0 0 var(--primary-red);
}
.app-footer-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
width: 100%;
padding: 0px 40px;
}
.app-footer-logo {
display: flex;
justify-content: center;
align-items: center;
}
.app-footer-logo img {
height: 35px;
width: auto;
}
.app-footer-address {
font-size: 10px;
color: #FFF !important;
text-decoration: none;
cursor: pointer;
}
.app-footer-phone {
font-size: 12px;
color: #FFF !important;
text-decoration: none;
cursor: pointer;
}
.app-footer-email {
font-size: 12px;
color: #FFF !important;
text-decoration: none;
cursor: pointer;
}
.app-footer-website {
font-size: 12px;
color: #FFF !important;
text-decoration: none;
cursor: pointer;
}
/*DEVEXTREME COMPONENTS*/
/*DATA GRID*/
.dx-datagrid.dx-datagrid-borders {
border: none !important;
}
/*DataGrid header*/
.dx-datagrid-headers {
border-radius: 12px 12px 0 0 !important;
border: 1px solid #ddd !important;
border-bottom: none !important;
}
/*Alinhamento dos ícones de ordenação e visibilidade à esquerda do texto, com espaçamento consistente
/*.dx-datagrid-headers .dx-header-row td .dx-column-indicators {
float: left !important;
/*margin-right: 8px !important; /* Espaço entre o ícone e o texto
/*margin-left: 2px !important;
}
.dx-datagrid-headers .dx-header-row td .dx-column-indicators .dx-sort,
.dx-datagrid-headers .dx-header-row td .dx-column-indicators .dx-sort .dx-sort-none{
width: 14px !important;
/*margin-right: 8px !important; /* Espaço entre o ícone e o texto */
/*margin-left: 2px !important;
}
.dx-datagrid-headers .dx-header-row td .dx-column-indicators.dx-visibility-hidden {
/*float: right !important;*/
/*display: none !important;*/
/*margin-right: 8px !important; /* Espaço entre o ícone e o texto */
/*margin-left: 2px !important;
}
/*Ajusta o container do texto para ocupar o espaço restante sem quebrar
.dx-datagrid-headers .dx-header-row td .dx-datagrid-text-content {
float: none !important;
/*display: block !important; /* Cria um Contexto de Formatação em Bloco (BFC)
overflow: hidden !important;
text-overflow: ellipsis !important;
/* Garante o '...' se a coluna encolher
white-space: nowrap !important;
padding-left: 5px !important;
}
*/
/* ========================================= */
/* Separador de resize do cabeçalho */
/* ========================================= */
/*COMPORTAMENTO PADRÃO: Sem pager */
.dx-datagrid-columns-separator.dx-datagrid-columns-separator-transparent:hover {
opacity: 1 !important;
background-color: transparent !important;
/* Esconde o bloco largo nativo */
z-index: 2000 !important;
height: auto !important;
bottom: 0 !important;
/* Estica até ao fundo da grelha */
}
/*COMPORTAMENTO COM PAGER: Se existir pager, trava a linha antes dele */
.dx-datagrid:has(.dx-pager) .dx-datagrid-columns-separator.dx-datagrid-columns-separator-transparent:hover {
bottom: 54px !important;
/* Altura padrão do pager */
}
/*A LINHA VISUAL: Desenha a linha fina de 1px */
.dx-datagrid-columns-separator.dx-datagrid-columns-separator-transparent:hover::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
/* A sua linha cinzenta */
height: 100%;
/* Preenche o espaço gerado pelo height: auto + bottom */
background-color: #bdbdbd;
}
/*testar para saver se não ha peger*/
.dx-datagrid:not(:has(.dx-datagrid-pager:not(.dx-hidden))) .dx-datagrid-rowsview {
/*border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
/* Força o arredondamento na base das linhas */
border-radius: 0 0 12px 12px !important;
overflow: hidden !important;
transform: translateZ(0) !important;
isolation: isolate !important;
}
.dx-datagrid:not(:has(.dx-datagrid-pager:not(.dx-hidden))) .dx-datagrid-rowsview .dx-datagrid-table .dx-row:last-of-type td:first-child {
border-bottom-left-radius: 12px !important;
}
.dx-datagrid:not(:has(.dx-datagrid-pager:not(.dx-hidden))) .dx-datagrid-rowsview .dx-datagrid-table .dx-row:last-of-type td:last-child {
border-bottom-right-radius: 12px !important;
}
/*Aqui e onde se esoclhe o pager se esta visivel ou nao para poder ser arrendondado*/
/* As linhas ficam quadradas em baixo e perdem a borda inferior para colar no Pager */
.dx-datagrid:has(.dx-datagrid-pager:not(.dx-hidden)) .dx-datagrid-rowsview {
/*border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
border-bottom: none !important;*/
border-radius: 0 !important;
}
/* O Pager assume todo o arredondamento da base */
.dx-datagrid:has(.dx-datagrid-pager:not(.dx-hidden)) .dx-datagrid-pager {
border-left: 1px solid #ddd !important;
border-right: 1px solid #ddd !important;
border-bottom: 1px solid #ddd !important;
border-top: 1px solid #ddd !important;
border-radius: 0 0 12px 12px !important;
overflow: hidden !important;
background-clip: padding-box !important;
}
.dx-datagrid-pager {
background-color: white !important;
}
/*cores da alternação da linhas da grid*/
.dx-datagrid-rowsview .dx-row {
background-color: var(--table-odd) !important;
/* Fundo branco */
}
.dx-datagrid-rowsview .dx-row-alt>td {
background-color: #FFFFFF !important;
}
/*modo de hoover da tabela*/
.dx-datagrid-rowsview .dx-data-row.dx-state-hover>td {
background-color: var(--table-hover) !important;
cursor: pointer;
}
/*mudar a cor dos grid buttons quando se passa por cima da linha*/
.dx-datagrid-rowsview .dx-data-row.dx-state-hover .dx-command-edit .dx-link,
.dx-datagrid-rowsview .dx-data-row.dx-state-hover .dx-command-edit .dx-button .dx-icon {
color: var(--table-hover-icons) !important;
}
/*******CheckBoxes da Grid********/
/* LARGURA E ESTILO DA BORDA */
.dx-datagrid .dx-checkbox .dx-checkbox-icon {
border-color: var(--table-checkbox-deacticated-border) !important;
border-width: 1px !important;
border-radius: 5px !important;
background-color: transparent !important;
}
.dx-datagrid .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
border-width: 1px !important;
border-style: solid !important;
border-color: var(--table-checkbox-deacticated-border) !important;
}
.dx-datagrid .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon::before {
color: var(--table-checkbox-deacticated-border) !important;
}
.dx-datagrid .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
background-color: transparent !important;
border-color: var(--table-checkbox-deacticated-border) !important;
border-radius: 5px !important;
border-style: solid !important;
}
.dx-datagrid .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon::before {
color: var(--table-checkbox-deacticated-border) !important;
background-color: var(--table-checkbox-deacticated-border) !important;
}
/*Tabela Desactivada*/
.dx-datagrid .dx-checkbox.dx-state-readonly .dx-checkbox-icon {
background-color: var(--table-checkbox-deacticated-background) !important;
border-color: #ccc;
}
.dx-datagrid .dx-checkbox.dx-state-readonly.dx-checkbox-checked .dx-checkbox-icon {
background-color: var(--table-checkbox-deacticated-background) !important;
border-color: #bbb;
}
/*Tabela desactivada hover por cima da row*/
/*cor da borda e do fundo*/
.dx-datagrid .dx-row.dx-state-hover .dx-checkbox.dx-state-readonly .dx-checkbox-icon {
border-color: var(--table-checkbox-deactivated-border-hover) !important;
background-color: var(--table-checkbox-deactivated-background-hover) !important;
}
/*cor do pisco*/
.dx-datagrid .dx-row.dx-state-hover .dx-checkbox.dx-state-readonly .dx-checkbox-icon:before {
color: var(--table-checkbox-deactivated-icon-hover) !important;
}
/*cor do traço de indeterminado*/
.dx-datagrid .dx-row.dx-state-hover .dx-checkbox.dx-state-readonly.dx-checkbox-indeterminate .dx-checkbox-icon::before {
background-color: var(--table-checkbox-deactivated-icon-hover) !important;
}
/*Tabela desactivada e linha clicada*/
/*boras e bfundo da checkbox*/
.dx-datagrid .dx-row.dx-selection .dx-checkbox.dx-state-readonly .dx-checkbox-icon {
background-color: var(--table-checkbox-deactivated-selected-background) !important;
border-color: var(--table-checkbox-deactivated-selected-border) !important;
}
/*cor do pisco*/
.dx-datagrid .dx-row.dx-selection .dx-checkbox.dx-state-readonly.dx-checkbox-checked .dx-checkbox-icon::before {
color: var(--table-checkbox-deactivated-selected-border) !important;
}
/*cor do - quando esta indeterminado*/
.dx-datagrid .dx-row.dx-selection .dx-checkbox.dx-state-readonly.dx-checkbox-indeterminate .dx-checkbox-icon {
background-color: var(--table-checkbox-deactivated-selected-border) !important;
}
/*checkboxes da coluna de comando (checkboxes de seleção)*/
/*alinhamento da checkbox de seleccionar todos*/
.dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-select{
text-align: center !important;
}
/*quando esta com hover*/
.dx-datagrid .dx-row.dx-state-hover .dx-command-select .dx-checkbox .dx-checkbox-icon {
border-color: var(--table-icons) !important;
background-color: transparent !important;
border-width: 2px !important;
}
/*cor de fundo e borda quando a linha está selecionada*/
.dx-datagrid .dx-row.dx-selection .dx-command-select .dx-checkbox .dx-checkbox-icon {
background-color: transparent !important;
border-color: var(--table-icons) !important;
border-width: 2px !important;
}
/**/
.dx-datagrid .dx-row.dx-selection .dx-command-select .dx-checkbox .dx-checkbox-icon::before {
color: var(--table-icons) !important;
}
/*cor do - quando esta indeterminado*/
.dx-datagrid .dx-row.dx-selection .dx-command-select .dx-checkbox .dx-checkbox-indeterminate .dx-checkbox-icon {
background-color: var(--table-icons) !important;
}
/*checkboxes da coluna de comando do header (checkboxes de seleção)*/
.dx-datagrid-headers .dx-header-row .dx-command-select .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
background-color: transparent !important;
border-color: var(--table-icons) !important;
border-width: 2px !important;
}
.dx-datagrid-headers .dx-header-row .dx-command-select .dx-checkbox.dx-checkbox-checked .dx-checkbox-icon::before {
color: var(--table-icons) !important;
}
/*checkboxes da coluna de comando do header mode ideterminado (checkboxes de seleção)*/
.dx-datagrid-headers .dx-header-row .dx-command-select .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon {
background-color: transparent !important;
border-color: var(--table-icons) !important;
border-width: 2px !important;
}
.dx-datagrid-headers .dx-header-row .dx-command-select .dx-checkbox.dx-checkbox-indeterminate .dx-checkbox-icon::before {
color: var(--table-icons) !important;
background-color: var(--table-icons) !important;
}
/*cor das checkboxes quando a linha esta editavel ou a tabela*/
.dx-datagrid .dx-edit-row td:not(.dx-command-select) .dx-checkbox .dx-checkbox-icon {
border: 2px solid var(--table-text) !important;
background-color: #ffffff !important;
border-radius: 5px !important;
opacity: unset !important;
}
/*cor do check*/
.dx-datagrid .dx-edit-row .dx-checkbox-checked .dx-checkbox-icon::before {
color: var(--table-text) !important;
}
/*cor do traço quando indetrminado*/
.dx-datagrid .dx-edit-row td:not(.dx-command-select) .dx-checkbox-indeterminate .dx-checkbox-icon::before {
background-color: var(--table-text) !important;
}
/*criação do circulo a volta das chebox em modo editavel quando se passa por cima*/
.dx-datagrid .dx-checkbox {
overflow: visible !important;
position: relative;
}
.dx-datagrid .dx-checkbox::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 35px;
/* Tamanho do círculo cinzento */
height: 35px;
background-color: rgba(0, 0, 0, 0.1);
/* Cinzento suave e transparente */
border-radius: 50% !important;
transform: translate(-50%, -50%) scale(0);
/* Começa com tamanho zero */
transition: transform 0.2s ease-in-out, background-color 0.2s;
pointer-events: none;
/* Garante que o círculo não bloqueia o clique */
z-index: 0;
}
.dx-datagrid .dx-checkbox.dx-state-hover::before,
.dx-datagrid .dx-checkbox.dx-state-focused::before {
transform: translate(-50%, -50%) scale(1);
/* Expande o círculo */
}
/*efeito do circulo sombra nas checkboxes command*/
.dx-datagrid .dx-command-select .dx-checkbox::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 32px;
/* Tamanho ligeiramente menor para caber bem na coluna */
height: 32px;
background-color: var(--table-checkbox-hallo-effect-icon);
/* Cinza bem suave */
border-radius: 50% !important;
/* animação de expansão */
transform: translate(-50%, -50%) scale(0);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 0;
}
/*ativar o círculo no Hover da Checkbox */
.dx-datagrid .dx-command-select .dx-checkbox.dx-state-hover::before {
transform: translate(-50%, -50%) scale(1);
}
/*garantir que a Checkbox de comando mantém o fundo branco e borda arredondada */
.dx-datagrid .dx-command-select .dx-checkbox-icon {
position: relative !important;
z-index: 1 !important;
background-color: #ffffff !important;
}
/*Ajuste para o estado Selecionado na coluna de comando */
.dx-datagrid .dx-command-select .dx-checkbox-checked .dx-checkbox-icon {
border-color: var(--table-checkbox-hallo-effect-icon) !important;
/* Cor de destaque quando selecionada */
background-color: #ffffff !important;
/* Mantém o fundo branco */
}
/*cor das rowns quando seleccionadas*/
/* Todas as linhas selecionadas */
.dx-datagrid .dx-row.dx-selection>td {
background-color: var(--secondary-red) !important;
}
/*****************************************************************************************************/
/*Header*/
.dx-datagrid-headers {
background-color: #ffffff !important;
}
.dx-datagrid-headers .dx-header-row>td {
border-bottom: none !important;
padding-top: 20px !important;
padding-bottom: 0px !important;
height: auto !important;
vertical-align: middle !important;
}
.dx-datagrid-headers .dx-datagrid-filter-row>td {
border-top: 0px !important;
padding-top: 4px !important;
}
/*Filter row*/
.dx-datagrid-filter-row {
background-color: white !important;
}
.dx-datagrid-filter-row .dx-editor-cell {
padding: 5px !important;
}
.dx-datagrid-filter-row .dx-texteditor-container {
border-radius: 8px;
background: var(--primary-background) !important;
}
.dx-datagrid-filter-row .dx-texteditor-input-container {
border-radius: 10px;
background: var(--primary-background) !important;
}
.dx-datagrid-filter-row .dx-texteditor {
/*height: 40px !important;*/
}
.dx-datagrid-filter-row .dx-texteditor-input {
height: 32px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
font-size: 12px !important;
}
/*Ajustar o placeholder das caixas de texto dos fitlros*/
.dx-datagrid-filter-row .dx-placeholder {
line-height: 0 !important;
}
/*Ajsutar a lupa de cada coluna do filter row*/
.dx-datagrid-filter-row .dx-dropdowneditor {
border-radius: 8px 0 0 8px !important;
overflow: hidden !important;
}
.dx-datagrid-filter-row .dx-dropdowneditor-button {
background-color: var(--primary-background) !important;
/*border-radius: 0 20px 20px 0 !important; */
}
.dx-datagrid-filter-row .dx-dropdowneditor-button {
border-left: none !important;
}
/*mudar as cores as setas e icons da filter row*/
.dx-datagrid-filter-row .dx-icon-filter-operation-default {
color: var(--table-icons) !important;
}
/*Mudar a cor da SETA (nas dropdowns ou selectboxes) */
.dx-datagrid-filter-row .dx-dropdowneditor-icon::before {
color: var(--table-icons) !important;
}
.dx-datagrid-filter-row .dx-clear-button-area .dx-icon-clear {
color: var(--table-icons) !important;
}
/* Estilo quando a linha ESTÁ selecionada */
.dx-command-select .dx-checkbox-checked .dx-checkbox-icon {
background-color: transparent !important;
/* Mantém o fundo transparente */
}
/* Quando NÃO há multiseleção, dá espaço ao texto da primeira coluna do cabeçalho */
.dx-datagrid-headers:not(:has(.dx-command-select)) .dx-header-row>td:first-child {
/*padding-left: 24px !important;*/
}
/* Quando NÃO há multiseleção, dá espaço ao texto da primeira coluna dos dados */
.dx-datagrid-rowsview:not(:has(.dx-command-select)) .dx-data-row>td:first-child {
/*padding-left: 24px !important;*/
}
/* Se usares a linha de filtros, ajusta também a primeira célula do filtro */
.dx-datagrid-filter-row:not(:has(.dx-command-select))>td:first-child {
/*padding-left: 24px !important;*/
}
/*estilo do pager para acrecentar texto*/
/*O Pager (Pai) - Garante a linha única */
.dx-datagrid-pager.dx-pager {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: flex-start !important;
white-space: nowrap !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
/* Seleção de Itens (Combo Box) */
.dx-pager .dx-page-sizes {
display: flex !important;
align-items: center !important;
margin-right: 5px !important;
/* Pequeno espaço antes do "de" */
}
/* Texto "Itens por página: " antes da combo box */
.dx-pager .dx-page-sizes::before {
content: "Itens por página: " !important;
display: inline-block !important;
margin-right: 5px !important;
}
/* a div .dx-pages - Ocupa o resto do espaço */
.dx-pager .dx-pages {
display: flex !important;
flex: 1 !important;
align-items: center !important;
justify-content: flex-start !important;
/* CORREÇÃO: Mantém o "de" colado à esquerda */
visibility: visible !important;
}
/* o texto "de " - Fica imediatamente a seguir à combo box */
.dx-pager .dx-pages>.dx-info {
display: inline-block !important;
visibility: visible !important;
position: static !important;
margin: 0 !important;
/* Sem margens para não afastar da combo box */
}
.dx-pager .dx-pages>.dx-info::before {
content: "de " !important;
display: inline-block !important;
}
/* O NAVEGADOR - Totalmente encostado à direita */
.dx-pager .dx-pages .dx-page-indexes {
display: flex !important;
align-items: center !important;
margin-left: auto !important;
/* CORREÇÃO: Empurra o navegador para o fundo direito */
}
/* Proteção contra o "de" duplicado */
.dx-page-indexes .dx-info::before {
content: none !important;
}
/*A TUA LÓGICA DA BARRA "/" NO NAVEGADOR */
.dx-light-pages {
display: flex !important;
align-items: center !important;
flex-direction: row !important;
}
.dx-light-pages .dx-info-text {
font-size: 0 !important;
margin: 0 5px !important;
}
.dx-light-pages .dx-info-text::before {
content: " / " !important;
font-size: 13px !important;
color: inherit !important;
display: inline-block !important;
}
/* Correção do alinhamento das setas duplas customizadas */
.custom-first-page,
.custom-last-page {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
}
/* Retira qualquer margem extra ou line-height que o ícone possa estar a injetar */
.custom-first-page .dx-icon,
.custom-last-page .dx-icon {
display: flex !important;
align-items: center !important;
line-height: normal !important;
margin-top: 0px !important;
}
/* Pequeno ajuste de margens para não colarem às setas simples */
.custom-first-page {
margin-right: 0px !important;
}
.custom-last-page {
margin-left: 0px !important;
}
/* Seleciona as tuas setas e as nativas para uniformizar */
.dx-pager .dx-navigate-button.custom-first-page,
.dx-pager .dx-navigate-button.custom-last-page,
.dx-pager .dx-prev-button,
.dx-pager .dx-next-button {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 32px !important;
/* Largura igual para todas */
height: 32px !important;
/* Altura igual para todas */
padding: 0 !important;
margin: 0 2px !important;
vertical-align: middle !important;
background: transparent !important;
/* Remove a "caixa" sólida */
border: none !important;
cursor: pointer;
font-size: 12px !important;
font-weight: 500 !important;
}
.dx-navigate-button.custom-first-page,
.dx-navigate-button.custom-last-page {
width: 15px !important;
/* Largura menor para as setas duplas */
}
/*dropdown do numero de items por pagina*/
.dx-pager .dx-page-sizes .dx-texteditor {
height: 24px !important;
/* Define a altura desejada */
min-height: 24px !important;
border-radius: 4px !important;
/* Ajusta os cantos se necessário */
display: flex !important;
align-items: center !important;
background-color: var(--table-checkbox-deacticated-background) !important;
}
/*Ajustar o input (o número selecionado) */
.dx-pager .dx-page-sizes .dx-texteditor-input {
height: 100% !important;
min-height: 100% !important;
line-height: 24px !important;
/* Mesma altura para centrar o texto */
padding-top: 0 !important;
padding-bottom: 0 !important;
font-weight: bold !important;
/* Se quiseres o número em destaque */
font-size: 14px !important;
}
/* caixa de texto de inseção de índice da pagina*/
/*Altera o aspeto exterior da caixa (Bordas, Fundo, Arredondamento) */
.dx-pager .dx-pages .dx-texteditor {
height: 24px !important;
min-height: 24px !important;
display: flex !important;
align-items: center !important;
}
/*Altera o número/texto que é digitado lá dentro */
.dx-pager .dx-pages .dx-texteditor-input {
height: 100% !important;
min-height: 100% !important;
background-color: var(--table-checkbox-deacticated-background) !important;
text-align: center !important;
font-size: 14px !important;
font-weight: bold !important;
}
.dx-pager .dx-light-pages .dx-page-index {
flex-shrink: 0 !important;
min-width: 40px !important;
}
/*Altera o comportamento de "hover" e "focus" quando clicas na caixa */
.dx-pager .dx-pages .dx-texteditor.dx-state-hover,
.dx-pager .dx-pages .dx-texteditor.dx-state-focused {
border-color: var(--primary-red) !important;
/* Exemplo: borda azul ao clicar ou passar o rato */
}
/*TAGBOX*/
.dx-tagbox .dx-tag {
background-color: var(--primary-red) !important;
/* Cor de fundo da tag */
color: #ffffff !important;
/* Cor do texto */
border-radius: 40px !important;
/* Arredondamento da tag */
border: none !important;
margin: 4px !important;
/* Espaçamento entre tags */
}
.dx-tagbox .dx-tag-content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
background-color: transparent !important;
gap: 8px;
margin-top: 0px !important;
padding: 3px 4px 4px 6px;
}
/* O contentor do ícone "X" */
.dx-tagbox .dx-tag-remove-button {
color: white !important;
/* Cor do X */
opacity: 0.8;
}
.dx-tagbox .dx-tag-remove-button:hover {
opacity: 1;
background-color: rgba(255, 255, 255, 0.2) !important;
}
/* Altera o estilo do texto dentro de cada tag */
.dx-tagbox .dx-tag-content>span {
color: #ffffff !important;
/* Cor do texto */
letter-spacing: 0.5px;
/* Espaçamento entre letras */
}
.dx-tagbox .dx-tag-remove-button {
background-color: #ffffff !important;
border-radius: 50% !important;
width: 20px !important;
height: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
margin-left: 8px !important;
position: relative !important;
/* Para controlo absoluto do que está lá dentro */
}
/* O "X" (conteúdo interno do botão) */
.dx-tagbox .dx-tag-remove-button::before,
.dx-tagbox .dx-tag-remove-button::after,
.dx-tagbox .dx-tag-remove-button .dx-tag-remove-button-internal {
content: "" !important;
/* Garante que os pseudo-elementos existem */
background-color: var(--primary-red) !important;
/* Cor dos traços: BRANCO */
/* AQUI CONTROLAS A ESPESSURA DO X */
width: 2px !important;
/* Aumenta este valor para traços mais grossos (ex: 3px) */
height: 12px !important;
/* Altura do traço dentro do círculo */
position: absolute !important;
border-radius: 1px !important;
/* Suaviza as pontas dos traços */
}
.dx-tagbox .dx-tag-remove-button::before {
transform: rotate(45deg) !important;
margin-top: -6px !important;
}
.dx-tagbox .dx-tag-remove-button::after {
transform: rotate(-45deg) !important;
inset-inline-end: unset !important;
margin-top: -6px !important;
}
/* Lista do dropdown em um container flexível (todos seguidos) */
.pill-dropdown .dx-scrollview-content {
display: flex !important;
flex-wrap: wrap !important;
/* Permite quebrar linha se o dropdown for pequeno */
padding: 10px !important;
gap: 8px;
/* Espaço entre os pills */
}
/* Estiliza cada item da lista como um Pill */
.pill-dropdown .dx-list-item {
display: inline-flex !important;
border-radius: 20px !important;
background-color: var(--table-hover) !important;
color: var(--secundary-gray) !important;
cursor: pointer;
transition: all 0.2s;
width: auto !important;
padding-left: 6px !important;
margin: 2px !important;
}
/* Remove a linha de separação padrão */
.pill-dropdown .dx-list-item:not(:last-child) {}
/*conteudo do items*/
.pill-dropdown .dx-list-item-content {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 6px !important;
}
/*Injeta o símbolo de + antes do texto */
.pill-dropdown .dx-list-item-content::after {
content: "+" !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-right: 0px;
margin-left: 10px;
font-weight: bold;
border-radius: 50%;
color: var(--secundary-gray) !important;
background-color: var(--table-checkbox-deacticated-background) !important;
}
/* 4. Ajustes de hover e seleção */
.pill-dropdown .dx-list-item.dx-state-hover {
background-color: var(--secondary-red) !important;
}
/* Esconde o checkbox padrão se estiver ativado, para manter o visual limpo */
.pill-dropdown .dx-list-select-checkbox-container {
display: none !important;
}
/*modificar o texto*/
.pill-dropdown .dx-list-select-all {
display: flex;
justify-content: center;
width: 100%;
border-bottom: none !important;
border-radius: 50px;
background-color: var(--table-hover) !important;
color: var(--secundary-gray);
padding: 6px !important;
}
/*Modificar o seleccionar todos*/
.pill-dropdown .dx-list-select-all .dx-checkbox {
display: none !important;
}
.pill-dropdown .dx-list-select-all:hover {
background-color: var(--secondary-red) !important;
}
.pill-dropdown .dx-list-select-all::after {
content: "+" !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background-color: var(--table-checkbox-deacticated-background) !important;
border-radius: 50%;
color: var(--secundary-gray) !important;
font-size: 14px;
font-weight: bold;
margin-right: 8px;
padding-bottom: 3px;
}
/*Botão de Ajuda*/
/* Container que fixa o menu no canto do ecrã */
.menu-flutuante-container {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
}
/*O WRAPPER QUE POSICIONA O CONJUNTO NO ECRÃ */
.menu-flutuante-wrapper {
position: fixed !important;
bottom: 140px !important;
/* Ajusta para bater com o offset do teu JS */
right: 10px !important;
/* Ajusta para bater com o offset do teu JS */
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
pointer-events: none;
/* Permite clicar no que está atrás quando o menu está fechado */
}
/*O PAINEL (O conjunto das 3 fatias) */
.menu-painel {
width: 300px;
/* IMPORTANTE: Mantém a largura igual ao SVG original */
display: flex;
flex-direction: column;
transform-origin: bottom right;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
margin-bottom: -45px;
/* Encaixe no arco do botão */
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
pointer-events: auto;
/* Permite clicar nos itens do menu */
}
/* ESTADOS DA ANIMAÇÃO */
.menu-painel.hidden {
opacity: 0;
transform: scale(0) translate(40px, 40px);
}
.menu-painel.visible {
opacity: 1;
transform: scale(1) translate(0, 0);
}
/*AS PEÇAS DO SVG (Topo e Base) */
.painel-topo,
.painel-base {
width: 300px;
line-height: 0;
font-size: 0;
}
.painel-topo svg,
.painel-base svg {
width: 100%;
height: auto;
display: block;
fill: var(--primary-red);
}
/*O MEIO (Onde o conteúdo "estica" o fundo vermelho) */
.menu-content {
background-color: var(--primary-red);
/* Cor exata do teu SVG */
margin: 0;
padding: 10px 30px;
display: flex;
flex-direction: column;
gap: 15px;
}
/*OS ITENS DO MENU */
.menu-item {
display: flex;
align-items: center;
gap: 15px;
color: white;
cursor: pointer;
padding: 8px;
border-radius: 8px;
transition: background 0.2s;
font-size: 20px;
}
.menu-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.menu-item.menu-item-disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.menu-item.menu-item-disabled:hover {
background: transparent;
}
.menu-item img {
width: 32px;
height: 32px;
/* Se os teus ícones forem pretos, isto torna-os brancos: */
filter: brightness(0) invert(1);
}
/*SLIDER*/
/* Arredonda o trilho principal (a barra cinza de fundo) */
.dx-slider-track {
border-radius: 10px !important;
height: 8px !important;
}
/* Arredonda a parte preenchida (a barra colorida) */
.dx-rangeslider-track,
.dx-rangeslider-range {
border-radius: 10px !important;
}
/* Garante que o container de feedback visual também seja arredondado */
.dx-slider-wrapper {
border-radius: 10px;
}
/*arredondar também o "botão" de arrastar para ser um círculo perfeito */
.dx-slider-handle {
border-radius: 50% !important;
width: 15px !important;
height: 15px !important;
/* Ajuste para centralizar o botão na barra se mudar a altura */
margin-top: -7px !important;
}
.dx-slider-handle:hover,
.dx-slider-handle.dx-state-active,
.dx-slider-handle.dx-state-focused {
width: 20px !important;
height: 20px !important;
margin-top: -10px;
}
/*Quando o rato está por cima do botão (Hover)*/
/*Enquanto o botão está a ser arrastado (Active / Dragging) */
.dx-slider:has(.dx-slider-handle:hover) .dx-slider-range,
.dx-slider:has(.dx-slider-handle.dx-state-active) .dx-slider-range,
.dx-slider:has(.dx-slider-handle.dx-state-focused) .dx-slider-range {
background-color: var(--primary-red) !important;
/* A cor que tu queres aplicar */
transition: background-color 0.2s ease;
}
/*slider tool tip*/
/* O contentor principal da bubble */
.dx-tooltip-wrapper .dx-overlay-content {
background-color: var(--secundary-gray) !important;
/* Cor de fundo */
color: white !important;
/* Cor do texto */
border-radius: 4px !important;
box-shadow: none !important;
}
/* O triângulo (setinha) */
.dx-tooltip-wrapper .dx-popover-arrow::after {
background-color: var(--secundary-gray) !important;
/* Mesma cor de fundo */
}
/* O texto lá dentro */
.dx-tooltip-wrapper .dx-overlay-content .dx-tooltip-content {
color: white !important;
padding: 5px 10px !important;
}
/*SWITCH ON/OFF*/
.dx-switch {
width: 40px !important;
}
.dx-switch .dx-switch-handle {
margin-left: -3px !important;
}
.dx-switch.dx-switch-on-value .dx-switch-handle {
margin-left: 3px !important;
}
/*Esconder o texto ON/OFF de todos os switches */
.dx-switch-on,
.dx-switch-off {
opacity: 0 !important;
visibility: hidden !important;
}
/*formatação do handle*/
.dx-switch-handle {
width: 20px !important;
height: 20px !important;
flex-basis: 20px !important;
z-index: 10;
}
.dx-switch-handle,
.dx-switch-handle::before,
.dx-switch-handle::after {
background-color: var(--table-text) !important;
/* Cinza escuro */
border-radius: 50% !important;
}
/* Cor quando está LIGADO (ON) */
.dx-switch.dx-switch-on-value .dx-switch-handle,
.dx-switch.dx-switch-on-value .dx-switch-handle::before,
.dx-switch.dx-switch-on-value .dx-switch-handle::after {
background-color: var(--primary-red) !important;
/* Vermelho escuro */
}
/* Cor da BARRA quando ON */
.dx-switch.dx-switch-on-value .dx-switch-wrapper::before {
background-color: var(--terciary-red) !important;
/* Um vermelho mais claro para a barra (opcional) ou #A43731 */
}
.dx-switch-wrapper {
position: relative !important;
width: 100% !important;
height: 100% !important;
display: block !important;
}
/*Forçar a visibilidade de todas as camadas internas */
.dx-switch,
.dx-switch-wrapper,
.dx-switch-container,
.dx-switch-inner {
overflow: visible !important;
background: transparent !important;
/* Remove qualquer fundo que esteja a tapar */
border: none !important;
}
.dx-switch-wrapper::before {
content: "";
position: absolute;
left: 3px;
right: 3px;
height: 15px !important;
border-radius: 10px;
background-color: var(--secundary-gray) !important;
/* Cor da barra de fundo */
transition: background-color 0.3s;
top: 50%;
margin-top: -8px;
}
/*Cor da sombra quando se faz hoover sobre o handler desligado e forma*/
.dx-switch-handle:hover {
/* Cria um círculo de 10px à volta do handle com 20% de opacidade */
box-shadow: 0 0 0 5px rgba(97, 94, 81, 0.2) !important;
transition: box-shadow 0.2s ease-in-out;
cursor: pointer;
}
/*Cor da sombra quando se faz hoover sobre o handler ligado*/
.dx-switch.dx-switch-on-value .dx-switch-handle:hover {
/* Usa a mesma cor do estado ON (#A43731) mas com transparência */
box-shadow: 0 0 0 5px rgba(164, 55, 49, 0.2) !important;
}
/*CHECKBOX*/
.dx-checkbox-icon {
width: 20px !important;
height: 20px !important;
border-radius: 4px !important;
border: 2px solid var(--table-text) !important;
background-color: #fff !important;
position: relative !important;
overflow: visible !important;
z-index: 1;
}
.dx-checkbox.dx-checkbox-checked .dx-checkbox-icon {
background-color: var(--primary-red) !important;
border-color: var(--primary-red) !important;
color: #fff !important;
/* Cor do check interno */
}
.dx-checkbox-checked .dx-checkbox-icon::before {
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff !important;
}
.dx-checkbox-icon::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 28px;
height: 28px;
background-color: transparent;
border-radius: 50% !important;
/* Força a forma circular */
opacity: 0;
pointer-events: none;
/* Evita que a sombra interfira no clique */
transition: opacity 0.2s ease, background-color 0.2s;
z-index: -1 !important;
margin-top: -14px !important;
margin-left: -14px !important;
}
.dx-checkbox:hover .dx-checkbox-icon::after {
opacity: 0.5;
background-color: var(--secondary-red) !important;
}
.dx-checkbox-container,
.dx-checkbox-wrapper,
.dx-checkbox {
overflow: visible !important;
}
/*RADIO GROUP BUTTONS*/
/*O círculo exterior quando nao esta seleccionado (NÃO tem a classe .dx-radiobutton-checked) */
.dx-radiobutton:not(.dx-radiobutton-checked) .dx-radiobutton-icon {
border: 2px solid var(--secundary-gray) !important;
background-color: transparent !important;
border-radius: 50% !important;
}
/*O círculo exterior quando está seleccionado (tem a classe .dx-radiobutton-checked) */
.dx-radiobutton.dx-radiobutton-checked .dx-radiobutton-icon {
/* Muda a cor da borda para o teu vermelho principal */
border: 2px solid var(--primary-red) !important;
/* Mantém o fundo transparente ou uma cor muito suave */
background-color: transparent !important;
/* Garante que o círculo continua redondo */
border-radius: 50% !important;
}
/* O círculo interno (o "ponto" que aparece quando selecionado) */
.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
border-width: 2px !important;
}
/*halo ao fazer hoover*/
.dx-radiobutton:hover .dx-radiobutton-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
background-color: var(--secondary-red) !important;
border-radius: 50% !important;
z-index: 20 !important;
display: block !important;
pointer-events: none;
opacity: 0.5;
}
/* TODOS OS CAPO QUE CONTENHAM UMA TEXTBOX BORDER */
.dx-texteditor.dx-editor-outlined {
border-radius: 10px !important;
/* Ajuste o valor conforme desejar */
}
/* Garante que o elemento interno que contém o input também respeite o arredondamento */
.dx-texteditor-container {
border-radius: 10px !important;
}
/* Caso use campos com botões dentro (como a sua lupa de pesquisa) */
.dx-texteditor.dx-editor-outlined .dx-texteditor-buttons-container {
border-radius: 0 10px 10px 0;
}
/*hoover das textboxes alike*/
/* Seleciona o editor quando o rato está por cima */
.dx-texteditor.dx-editor-outlined:hover {
/* Usando a tua variável de cinza ou uma cor fixa */
background-color: #f2f2f2 !important;
/* Se tiveres uma variável para o cinza, usa:
background-color: var(--seu-cinza-light) !important;
*/
transition: background-color 0.2s ease;
/* Suaviza a transição */
}
/* Garante que o container interno herde a transparência para mostrar o fundo do pai */
.dx-texteditor.dx-editor-outlined:hover .dx-texteditor-container {
background-color: transparent !important;
}
/* Garante que o input real não tenha fundo próprio que tape o cinzento */
.dx-texteditor.dx-editor-outlined:hover input.dx-texteditor-input {
background-color: transparent !important;
}
/*remove o hoover dos botoes com setas dos controlos*/
.dx-texteditor.dx-editor-outlined:hover .dx-texteditor-buttons-container .dx-dropdowneditor-button {
background-color: transparent !important;
}
/*tirar o hover do botao quanod esta activo*/
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: inherit !important;
}
.dx-dropdowneditor:hover .dx-dropdowneditor-icon {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.dx-selectbox .dx-dropdowneditor-icon::before,
.dx-tagbox .dx-dropdowneditor-icon::before,
.dx-lookup .dx-lookup-arrow::before {
content: "\2335" !important;
margin-top: -12px;
}
/*DX NUMBERBOX*/
/*O container principal precisa ocupar 100% da altura e centralizar tudo */
.dx-numberbox-spin-container {
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
/* Centraliza o bloco das setas verticalmente */
align-items: center !important;
padding: 0 !important;
}
/*Mudança das setas do numberbox spinner*/
/*Os botões individuais (up/down) não podem ter alturas fixas que empurrem o ícone */
.dx-numberbox-spin-container .dx-numberbox-spin-up,
.dx-numberbox-spin-container .dx-numberbox-spin-down {
display: flex !important;
align-items: center !important;
justify-content: center !important;
/*height: 10px !important;*/
width: 100% !important;
padding: 0 !important;
}
/*Seta para CIMA */
.dx-numberbox-spin-up-icon::before {
content: "\2335" !important;
display: inline-block !important;
transform: rotate(180deg) !important;
font-size: 13px !important;
font-weight: bold !important;
color: #7d7771 !important;
line-height: 1 !important;
margin-top: -3px !important;
}
/*Seta para BAIXO */
.dx-numberbox-spin-down-icon::before {
content: "\2335" !important;
display: inline-block !important;
font-size: 13px !important;
font-weight: bold !important;
color: #7d7771 !important;
line-height: 1 !important;
margin-bottom: -1px !important;
}
/*DXLOOKUP*/
/* remover o inset do do topo do dropdown para que fique alinhado com o input */
.dx-popover-arrow {
display: none !important;
}
.lookup-row {
display: flex;
align-items: center;
width: 100%;
}
/* Força a lista interna do Lookup a ter espaço */
.dx-lookup-popup-wrapper .dx-list {
min-height: 60px !important;
height: auto !important;
}
/* Garante que o único item não seja esmagado */
.dx-lookup-popup-wrapper .dx-list-item {
height: 40px !important;
/* Altura fixa para o item respirar */
line-height: 40px !important;
display: flex !important;
align-items: center;
}
/* texto primeiro */
.lookup-text {
order: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* botão depois */
.lookup-clear {
order: 2;
margin-left: 8px;
cursor: pointer;
color: #999;
font-size: 18px !important;
}
/*DXDATEBOX*/
.dx-calendar-navigator {
border-bottom: none !important;
border: none !important;
}
.dx-calendar-navigator .dx-button {
border: none !important;
box-shadow: none !important;
}
/*cores do texto mes e ano e dos botoes*/
/*Altera a cor do texto central (Mês e Ano) */
.dx-calendar-caption-button {
color: var(--primary-red) !important;
/* Substitua pela sua cor (Ex: Azul) */
}
/*Altera a cor das setas (ícones anterior e próximo) */
.dx-calendar-navigator .dx-icon {
color: var(--primary-red) !important;
}
/*Altera a cor quando o utilizador passa o rato por cima (Hover) */
.dx-calendar-navigator .dx-button-hovered .dx-icon,
.dx-calendar-caption.dx-button-hovered {
color: var(--selected-tab-red) !important;
/* Cor mais escura para o efeito hover */
}
.dx-calendar-cell span {
border-radius: 40px !important;
}
/*Remove as bordas, fundos e sombras de TODOS os botões do popup */
.dx-datebox-wrapper .dx-popup-bottom .dx-button,
.dx-daterangebox-wrapper .dx-popup-bottom .dx-button {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/*Força o texto dos botões (OK e Cancelar) a ficar vermelho */
.dx-datebox-wrapper .dx-popup-bottom .dx-button .dx-button-text,
.dx-daterangebox-wrapper .dx-popup-bottom .dx-button .dx-button-text {
color: var(--primary-red) !important;
/* Vermelho moderno (podes usar #ff0000 se quiseres puro) */
font-weight: 600 !important;
text-transform: uppercase;
/* Opcional: deixa o texto em maiúsculas se desejares */
}
/*Feedback visual quando o utilizador passa o rato por cima (Hover) */
.dx-datebox-wrapper .dx-popup-bottom .dx-button.dx-state-hover .dx-button-text,
.dx-daterangebox-wrapper .dx-popup-bottom .dx-button.dx-state-hover .dx-button-text {
color: var(--selected-tab-red) !important;
/* Vermelho um pouco mais escuro no hover */
text-decoration: underline;
/* Opcional: sublinha para dar pista de clique */
}
/**************************************************************************************/
/* Para SelectBox e DropDownBox */
/* Se estiveres a usar Lookup com a opção usePopover: true */
.dx-lookup-popover .dx-overlay-content {
margin-top: 20px !important;
}
/*POPUPS FRESOFT*/
/* Configuração Geral do Overlay do DevExtreme */
@keyframes slideOutLeft {
from {
transform: translate(0);
opacity: 1;
}
to {
transform: translate(-40vw);
opacity: 0.2;
}
}
.app-popup-hiding {
animation: slideOutLeft 350ms ease-in-out forwards;
}
@keyframes slideToInactive {
from {
transform: translate(175px);
}
to {
transform: translate(350px);
}
}
.app-popup-inactive {
animation: slideToInactive 2s linear forwards;
}
.dx-overlay-wrapper.popup-fresoft>.dx-overlay-content {
background-color: transparent !important;
box-shadow: none !important;
border: none !important;
}
.popup-fresoft .dx-popup-content {
padding: 0 !important;
background-color: transparent !important;
overflow: visible !important;
}
/* TabPanel - Posicionamento à Esquerda */
.popup-fresoft .dx-tabpanel.dx-tabs-left .dx-tabpanel-tabs {
background: transparent !important;
border-right: none !important;
margin-top: 10px !important;
border: none !important;
}
.popup-fresoft .dx-tabpanel .dx-multiview-wrapper {
background-color: #ffffff !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Tabs Customizadas */
.popup-fresoft .dx-tab {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
height: auto !important;
display: block !important;
}
.popup-fresoft .dx-tabs {
border: none !important;
}
.popup-fresoft .dx-tabs-wrapper {
background-color: transparent !important;
padding-bottom: 5px !important;
padding-top: 5px !important;
border: none !important;
//*width: 22px !important;*/
}
.popup-fresoft .dx-tabs-wrapper::after {
border: none !important;
}
.popup-fresoft .dx-tab .dx-tab-content {
display: block !important;
padding: 0 !important;
}
.popup-fresoft .dx-tab.dx-tab-selected::after {
display: none !important;
}
/* Remove deslocamento da tab selecionada */
.popup-fresoft .dx-tabpanel-tabs .dx-tab.dx-tab-selected {
margin-right: 0 !important;
padding-right: 0 !important;
border-right: none !important;
transform: none !important;
z-index: 1 !important;
}
/* Estrutura Visual da Aba */
.popup-fresoft .tab-custom-frame {
display: block !important;
justify-items: center;
width: 22px !important;
}
.popup-fresoft .tab-custom-body-frame {
background-color: var(--primary-red);
width: 22px !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* opcional mas ajuda */
transition: background-color 0.3s ease;
color: white;
}
.popup-fresoft .svg-edge-element {
width: 23px;
vertical-align: bottom;
color: var(--primary-red);
transition: color 0.3s ease;
margin-right: -1px !important;
}
/* Estados de Seleção */
.popup-fresoft .dx-tab.dx-tab-selected .tab-custom-body-frame {
background-color: var(--selected-tab-red) !important;
}
.popup-fresoft .dx-tab.dx-tab-selected .svg-edge-element {
color: var(--selected-tab-red) !important;
}
.popup-fresoft .tab-icon {
font-size: 15px !important;
margin: 0 !important;
color: white !important;
}
/* Texto Vertical */
.popup-fresoft .tab-text-animated {
font-size: 11px;
writing-mode: vertical-rl;
transform: rotate(180deg);
max-height: 0;
opacity: 0;
transition: all 0.3s ease-in-out;
margin-top: 0;
}
.popup-fresoft .dx-tab:hover .tab-text-animated,
.popup-fresoft .dx-tab-selected .tab-text-animated {
max-height: 200px;
opacity: 1;
margin-top: 8px;
}
/* Estados do Popup */
.popup-fresoft.app-popup-inactive {
filter: brightness(0.6) grayscale(0.5);
pointer-events: none;
transition: all 0.4s ease;
}
.popup-fresoft.app-popup,
.popup-fresoft.app-popup-active {
transition: all 0.4s ease;
}
/* Bloqueio do site */
.site-blocked {
filter: grayscale(1) brightness(0.7);
pointer-events: none;
user-select: none;
transition: all 0.3s ease;
}
/* Shader */
.popup-fresoft .dx-overlay-shader {
pointer-events: auto;
}
/* Container principal */
.popup-fresoft .popup-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: hidden;
}
/* Header */
.popup-fresoft .popup-header {
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.popup-fresoft .popup-title-group {
display: flex;
flex-direction: column;
}
/* Botão fechar */
.popup-fresoft .popup-close-icon {
cursor: pointer;
font-size: 14px;
color: var(--primary-red);
transition: color 0.2s ease;
border: 1px solid var(--primary-red) !important;
border-radius: 50% !important;
padding: 5px !important;
}
.popup-fresoft .popup-close-icon::before {
cursor: pointer;
font-size: 14px;
color: var(--primary-red);
transition: color 0.2s ease;
}
/* Body */
.popup-fresoft .popup-body {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: 16px;
box-sizing: border-box;
}
/* Header wrapper */
.popup-fresoft .popup-header-wrapper {
display: flex;
flex-direction: row;
align-items: flex-start;
}
/* TabPanel container */
.popup-fresoft .dx-tabpanel-container {
display: flex !important;
width: 100% !important;
}
.popup-fresoft .dx-tabpanel-item-container {
flex: 1 1 0% !important;
width: 0 !important;
}
/* Title stack */
.popup-fresoft .popup-title-stack {
display: flex;
flex-direction: column;
}
.popup-fresoft .popup-title {
margin: 0;
padding: 0;
font-size: 18px !important;
font-weight: 600 !important;
line-height: 1.2;
color: var(--primary-red) !important;
}
.popup-fresoft .tabnameslash {
font-size: 18px;
font-weight: 300;
line-height: 1.2;
user-select: none;
color: var(--primary-red) !important;
}
.popup-fresoft .popup-subtitle {
margin: 0;
padding: 0;
font-size: 12px;
color: var(--table-text);
}
/* Remover bordas de hover */
.popup-fresoft .dx-tabs-vertical .dx-tab.dx-state-hover::after,
.popup-fresoft .dx-tabs-vertical .dx-tab.dx-state-active::after {
border: none !important;
}
/* TabPanel inativo */
.popup-fresoft .tab-panel-inactive {
filter: grayscale(20%) brightness(0.75);
transition: filter 0.3s ease, opacity 0.3s ease;
}
/*FRESOFT POPUP*/
/*form labels*/
.forms-popup .dx-field-item-label {
width: 150px !important;
}
.forms-popup .dx-field-item-label-content {
white-space: normal !important;
}
/*form group*/
.forms-popup.form-item-custom-container {
padding: 10px 0;
}
/* Wrapper que alinha a imagem e o texto */
.forms-popup .item-render-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
/* Estilo da Imagem */
.forms-popup .item-render-image {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
/* Garante que a imagem não distorça no círculo */
}
/* Estilo do Texto */
.forms-popup .item-render-text {
font-size: 14px;
font-weight: 500;
color: var(--primary-red) !important;
}
/*SPINNER ANIMATION*/
/*GRID*/
.dx-loadindicator-icon {
width: 40px;
height: 40px;
border: 4px solid var(--primary-red);
border-top: 4px solid #FFFFFF;
border-radius: 50%;
animation: dx-spinner 0.8s linear infinite;
box-sizing: border-box;
}
.dx-loadindicator-segment {
display: none !important;
}
@keyframes dx-spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*COLUNA DA GRID*/
.dx-header-row .dx-sort-indicator {
max-width: 100% !important;
padding-right: 0 !important;
}
/* Remove qualquer seta que seja gerada como texto/pseudo-elemento (::before ou ::after) */
.dx-header-row .dx-sort-indicator::before,
.dx-header-row .dx-sort-indicator::after {
content: none !important;
display: none !important;
background-image: none !important;
}
/* A CARTADA FINAL: Procura qualquer elemento dentro dos indicadores
que tenha "sort" no nome da classe (ícones, SVGs, spans) e esconde-o */
.dx-datagrid-headers .dx-column-indicators [class*="dx-sort"] {
display: none !important;
width: 0 !important;
visibility: hidden !important;
}
.dx-datagrid-headers .dx-datagrid-table .dx-row>td {
text-align: left !important;
}
/* SelectBox */
.dx-selectbox-popup-wrapper.dx-overlay-wrapper.dx-dropdowneditor-overlay .dx-overlay-content,
/* DateBox (Calendário) */
.dx-datebox-wrapper.dx-overlay-wrapper.dx-dropdowneditor-overlay .dx-overlay-content,
/* TagBox (Seleção múltipla) */
.dx-tagbox-popup-wrapper.dx-overlay-wrapper.dx-dropdowneditor-overlay .dx-overlay-content {
transform: translate(0px, 45px) !important;
}