/* ==========================================================================================//
// File			: custom.css
// Version 		: 1.0
// Last update 	: 12/02/2024
// This file will be automatically loaded in the HTML render of all N4V elements.
// Feel free to create here your own css customization as needed to enhance the rendering
// of N4V elements. 
// Any css update inserted in this file will be applied on all N4V elements displayed as well 
// in your Webi environment as in HTML exported files.
// Any update of N4V css rendering is of your own responsability and will not be supported
// by Need4Viz.
// This file is created once by N4V installer. If it is manually updated, it will not be changed
// during the next upgrades of N4V.
// If your N4V environment is split on many web application servers (Tomcat...), please make the
// changes in each custom.css file of each webapp server.
// ==========================================================================================*/

/* Global variables definition */

:root {
/* Main background color of buttons & popup
   Fill with RGB values E.g.: 
	petrol blue: 38, 70, 83
	sage green: 156, 170, 167
	sweet orange: 244, 162, 97
*/
  --main-bg-color-base: 244, 162, 97;

/* Buttons text colors*/  
  --main-button-text-color: #ffffff;
  
/* Colors automatically calculated, do not update*/  
  --main-bg-color: rgb(var(--main-bg-color-base));
  --main-bg-color-044: rgb(var(--main-bg-color-base),0.44);
  --main-bg-color-040: rgb(var(--main-bg-color-base),0.40);
  --main-bg-color-013: rgb(var(--main-bg-color-base),0.13);
}

.highcharts-button-box{
	fill: var(--main-bg-color);
}
/*
.highcharts-button-box:hover{
	fill: #ffffff;
}*/
.highcharts-button-box:hover + .highcharts-button-symbol{
	stroke: var(--main-bg-color);	    
}
.highcharts-button-hover .highcharts-button-box{
	fill: var(--main-button-text-color) !important;
}
.highcharts-button text {
    fill: var(--main-button-text-color) !important;
}

.highcharts-button-hover text{
    fill: var(--main-bg-color) !important;
}

.ui-widget-header {
    background: var(--main-bg-color);
}
.ui-widget-content .nav {
    background-color: var(--main-bg-color-013);
}
.ui-widget-content .nav>li>a:focus,.ui-widget-content .nav>li>a:hover {
    background-color: var(--main-button-text-color);
}

.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {
    background-color: var(--main-bg-color) !important;
}
.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background-color: var(--main-bg-color);
	color: var(--main-button-text-color);
}
.tabulator-menu .tabulator-menu-item {
    color: var(--main-bg-color);    
}

.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after {
    border-color: var(--main-bg-color);
}

.tabulator .tabulator-header {
    color: var(--main-bg-color) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button {
    color: var(--main-bg-color);
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid var(--main-bg-color-044);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-top: 6px solid var(--main-bg-color);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid var(--main-bg-color);
}

.tabulator-row.tabulator-group {
    background: var(--main-bg-color-013);
}
.tabulator-row.tabulator-group:hover {
    background: var(--main-bg-color-040);
}
.tabulator .tabulator-calcs, .tabulator-group {
    color: var(--main-bg-color) !important;
}

.tabulator-header-filter input[type=search] {
    border-color: var(--main-bg-color-040);
}
.tabulator-header-filter input[type=search]::placeholder {
	color: var(--main-bg-color-040);
}
.tabulator-header-filter input[type=search]:focus-visible {
    outline-color: var(--main-bg-color-040);
}

.tabulator .tabulator-footer .tabulator-page-size {
	border: 1px solid var(--main-bg-color-040) !important;
}
.tabulator .tabulator-footer .tabulator-page {
	border: 1px solid var(--main-bg-color-040) !important;
}
.tabulator .tabulator-footer .tabulator-paginator {
    color: var(--main-bg-color) !important;
}
.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
    background: var(--main-bg-color);
}

.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {
    border: 2px solid var(--main-bg-color-040) !important;
    color: var(--main-bg-color) !important;
}