:root {
	--font-family: 'Libre Franklin', 'Arial', sans-serif;
	--color-suite-primary: #d1a33c;
	--color-suite-secundary: #eddab1;
	--color-suite-tertiary: #c7b693;
	--color-border: #A4A4A4;
	--color-text: #464040;
	--color-text-Alt: #FFFFFF;
	--color-text-secundary: #A6A6A6;
	--color-error: rgb(202, 45, 45);
	--color-error-hover: rgb(179, 41, 41);
	--color-error-active: rgb(209, 69, 69);
	--color-bnt-suscess: #28A745;
	--color-bnt-suscess-active: #2aac48;
	--color-bnt-suscess-hover: #27a144;
	--color-bnt-consult: var(--color-suite-primary);
	--color-bnt-consult-hover: #9b7627;
	--color-bnt-consult-active: var(--color-suite-primary);
	--color-th-dark: #000000;
	--color-background-box: #D7D7D7;
	--color-title-box: #4d4d4d;
	--color-border-sync: #bfbfbf;

	--color-backgroundBody-box: #fff;
	--color-hoverbox: #eddab1;
	--color-value: #6b007b;
	--color-loader: #0359a7;
	--color-link: #D0D0D0;
	--color-porcentaje: #f7f7f7;
	--color-nivel-1: #D6A920;
	--color-nivel-5: #ffac00;
	--color-nivel-2: #f0a21d;
	--color-nivel-4: #d8921a;
	--color-nivel-3: #c58326;
	--color-nivel-7: #d4a252;
	--color-nivel-6: #e69b00;
	--color-nivel-8: #C0751E;
	--color-celda-roja: #FFD7D7;
	--color-celda-verde: #e8f0dc;
	--color-celda-naranja: #fbdaaa;
	--color-active-date: #C8C8C8;
	--color-active-view: #7C7C7C;
	--color-title-linea: #F4F4F4;
	--color-plantaHeader: #CECECE;
	--color-name-linea: #FFF;
	--color-separator: #EBEBEB;
	--color-worstData: #FFF;
	--color-text-planta: #383737;
	--color-strokeText-Impact: unset;
	--background-level: #ededed;

	--color-btn-dateRange: #e6e6e6;
	--color-btn-dateRange-border: #cecece;
	--color-btn-dateRange-hover: #c0bdbd;

	--color-bacckground-linea: #737373;

	--color-icono-location: #361c09;
	--color-box: #ececec;
	--color-box-text: #5d5d5d;
	--color-btn-back: var(--color-text);
	--color-btn-back-hover: var(--color-text-secundary);
	--color-graph-border: #45444473;
	--color-graph-border-Alt: #525151;

	--color-stroke-text: unset;

	--color-btn-filter: #6c757d;
	--color-btn-filter-hover: #545b62;
	--color-btn-filter-active: #4e555b;

	--color-btn-borrar-filter: #dc3545;
	--color-btn-borrar-filter-hover: #dc3545;
	--color-btn-borrar-filter-active: #dc3545;

	--border-radius: 4px;
	--font-size-normal: 0.8125rem;
	--font-weight-small: 600;
	--font-weight-large: 400;
	--font-size-small: 0.6875rem;
	--font-size-large: 0.85rem;
	--brightness-filter: 1;
	--color-table-odd-rows: #f2f2f2;
	--color-table-even-rows: white
}

:root[data-theme="light"] {
	--color-suite-background: #FFFFFF;
	--color-primary: #FFFFFF;
	--color-disabled: #6d6868;
	/*original:#E6E6E6 new:#6d6868*/
	--color-disabled-secundary: #dcdce2;
	--color-suite-tertiary: #E0E0E0;
	--color-suite-tertiary-hover: #dadada;
	--color-page-button: #f1f3f4;
	--color-switch: #6c757d;

	--opc-color-item-select: rgba(209, 162, 61, 0.4);
	--item-hover: rgba(128, 128, 128, 0.102);
	--color-date-in-range: rgba(209, 163, 60, 0.2);
	--color-date-hover: rgba(209, 163, 60, 0.4);
	--color-text-contraste: white;
	--color-border-secundary: #A4A4A4;

	--color-title-icon: #1c1b1f;

}

:root[data-theme="dark"] {
	--color-suite-background: #282828;
	--color-primary: #1F1F1F;
	--color-disabled: #ebe3e3;
	/*original:#545454 new: #ebe3e3*/
	--color-disabled-secundary: #2d2d2d;
	/*original:#FFFFFF new: #75757a*/
	--color-text: #FFFFFF;
	--color-text-Alt: #464040;
	--color-suite-secundary: #5A5A5A;
	/* new*/
	--color-suite-tertiary: #484848;
	/* new*/
	--color-suite-tertiary-hover: #525252;
	--color-table-odd-rows: #616060;
	--color-table-even-rows: #8d8b8b;
	--color-page-button: #484848;
	--color-switch: var(--color-disabled-secundary);
	--color-box-text: #ffffff;
	--opc-color-item-select: #dddddd50;
	--item-hover: rgba(128, 128, 128, 0.1);
	--color-stroke-text: #000000;
	--color-icono-location: #ffffff;
	--color-loader: #034785;
	--color-border-sync:#464646;

	--color-date-in-range: rgba(209, 162, 60, 0.4);
	--color-date-hover: rgba(209, 162, 60, 0.5);
	--color-text-contraste: white;
	--color-border-secundary: rgba(107, 107, 107, 0.527);
	--brightness-filter: 1.5;
	--color-btn-dateRange-hover: #3c3b3b;
	--color-th-dark: #1f1f1f;
	--background-level: #424242;

	--color-box: #3d3d3d;

	--color-bacckground-linea: #FFF;

	--color-value: #ED76FF;
	--color-hoverbox: #c7b693;
	--color-porcentaje: #4D4D4D;
	--color-link: #515050;
	--color-nivel-2: #a57016;
	--color-nivel-3: #b47721;
	--color-nivel-4: #9b6913;
	--color-nivel-5: #c08103;
	--color-nivel-6: #9b6700;
	--color-nivel-7: #b68b47;
	--color-title-linea: #5F5F5F;
	--color-plantaHeader: #989898;
	--color-name-linea: #373737;
	--color-separator: #565656;
	--color-worstData: #373737;
	--color-text-planta: #FFF;
	--color-title-box: #FFF;
	--color-celda-roja: #f3bdbd;
	--color-celda-verde: #A8BF8B;
	--color-backgroundBody-box: #353535;
	--color-background-box: #737373;
	--color-celda-naranja: #edb664;
	--color-btn-dateRange: #616161;
	--color-btn-dateRange-border: #939393;

	--color-title-icon: #ffffff;

	--color-graph-border: #cdcccc71;

	--color-graph-border-Alt: #ffffff;

}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--font-family);
}

#root{
	display: flex;
	height: 100%;
}

html {
	width: 100%;
	height: 100%;
	padding: 10px;
	scroll-behavior: smooth;
	background-color: var(--color-primary);
	transition: background-color var(---animation-delay);
}

body {
	overflow: hidden;
	height: 100%;
}

.mainContainer {
    display: flex;
    flex-direction: column;
    height: 98vh; /* Ocupa toda la altura de la pantalla */
	width: 100%;
}