: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-background-mobile: white;
	--color-backgorund-lineas-mobile: #b17f0f40;
	--color-backgroundBody-box: #fff;
	--color-loader: #0359a7;
	--color-grafica: #f7f7f7;
	--color-grafica1: #c58841;
	--color-grafica2: #dfa245;
	--color-grafica3: #ffac00;
	--color-grafica4: #f0a21d;
	--color-grafica5: #fec250;
	--color-grafica6: #d8921a;
	--color-grafica7: #c58326;
	--color-grafica8: #d4a252;
	--color-grafica9: #f7d08e;
	--color-grafica10: #b17a3b;
	--color-grafica11: #dfa255;
	--color-grafica12: #e69b00;
	--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;
	--color-border-sync: #bfbfbf;
	--color-background-mobile: white;
	--color-cell-linea-mobile: #555;


	--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;
	--height-pixels-1: 10px;
	--height-pixels-2: 10px;

	--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;
	--color-backgroundProyect: ##adadad1c;
	--color-textProyect: #AEAEAE;

	--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;
	--color-value-green: green;
	--color-value-red: red;
	--color-custome-text: black;
	--color-anchor: #0014ff;
	--color-anchorHover: #006cff21;
	--color-bands-green: #32a32e;
	--color-bands-red: #f04135;

}

: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;
	--color-backgorund-lineas-mobile: #d1a33c7d;
	/* new*/
	--color-suite-tertiary: #484848;
	--color-background-mobile: #353333;
	--color-cell-linea-mobile: #121212;
	--color-custome-text: white;

	/* 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-background-mobile: #3F3F3F;

	--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;
	--color-border-sync: #464646;
	--color-backgroundProyect: #5C5C5C;
	--color-textProyect: #B1B1B1;

	--color-box: #3d3d3d;

	--color-bacckground-linea: #FFF;

	--color-grafica: #585858;
	--color-grafica1: #794b17;
	--color-grafica2: #a57020;
	--color-grafica3: #c08103;
	--color-grafica4: #a57016;
	--color-grafica5: #9c7836;
	--color-grafica6: #9b6913;
	--color-grafica7: #b47721;
	--color-grafica8: #b68b47;
	--color-grafica9: #b1935f;
	--color-grafica10: #885d2d;
	--color-grafica11: #a0743e;
	--color-grafica12: #9b6700;
	--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;
	--color-value-green: #bce786;
	--color-value-red: #FF7575;
	--color-anchor: white;
	--color-anchorHover: #ffffff2e;
	--color-bands-green: #32a32e;
	--color-bands-red: #f04135;

	& .map-image {
		filter: invert(1) brightness(2);
	}

}

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

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

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

/*  ############################ grafica  ############################*/



/*  ############################ button  ############################*/

.content-button {
	width: 100%;


	&.expand_button {
		& button {
			background-color: #17a2b8 !important;
		}
	}

	& .button-opc {
		height: 100%;
		gap: 6px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: white;
		text-align: center;
		line-height: 1.5;
		border: 1px solid transparent;
		border-radius: var(--border-radius);
		user-select: none;
		cursor: pointer;
		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .15s ease-in-out;
		padding: 0px 5px;

		&.consult {
			background-color: var(--color-active-view);

			&:hover {
				background-color: var(--color-bnt-consult-hover);
			}

			&:active {
				background-color: var(--color-bnt-consult-active);
			}
		}

		&.dateRange {
			background-color: var(--color-active-view);

			& span {
				color: #FFF;
			}

			&:hover {
				background-color: var(--color-btn-dateRange-hover);
			}

			&:active {
				background-color: var(--color-btn-dateRange);
			}
		}

		&.back {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30px;
			height: 30px;
			gap: unset;
			border-radius: 50%;
			transition: background-color 0.3s, transform 0.3s;
			background-color: var(--color-btn-back);

			&:hover {
				background-color: var(--color-btn-back-hover);
			}

			&:active {
				background-color: var(--color-btn-back);
			}

			& span {
				color: var(--color-primary)
			}
		}

		&.filter {
			background-color: var(--color-btn-back);
			display: flex;
			align-items: center;
			justify-content: center;
			gap: unset;
			transition: background-color 0.3s, transform 0.3s;

			&:hover {
				background-color: var(--color-btn-back-hover);
			}

			&:active {
				background-color: var(--color-btn-back);
			}

			& span {
				color: var(--color-primary);
				font-size: 13px !important;
			}

		}

		&.hideMap {
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #9b9b9b;

			& span {
				color: #7d7d7d;
				font-size: 14px !important;
				height: unset !important;
			}

			&.show {
				& span {
					color: #7d7d7d;
					font-size: 20px !important;
					height: unset !important;
				}

				:nth-child(2) {
					display: none;
				}


			}
		}

		&.suscess {
			background-color: var(--color-bnt-suscess);

			&:hover {
				background-color: var(--color-bnt-suscess-hover);
			}

			&:active {
				background-color: var(--color-bnt-suscess-active);
			}
		}

		& .icon-button {
			cursor: pointer;
			font-size: 16px;
			color: white;
		}

		& .text-button {
			cursor: pointer;
			font-weight: 500;
			color: white;
			font-size: 14px;
			height: 19px;
		}
	}

	& .linea {
		background-color: transparent !important;
		border: 1px solid var(--color-border) !important;

		& span {
			color: var(--color-text) !important
		}
	}

	& .linea_active {
		background-color: var(--color-bnt-consult) !important;

		& span {
			color: #FFF !important
		}
	}


	& .button-opc.disabled {
		cursor: not-allowed;

		& span {
			cursor: inherit;
		}
	}
}


& .sync {
	background-color: #17a2b8;
	padding: 5px;
}


.highcharts-background {
	fill: var(--color-suite-background)
}

.action-buttons {
	margin-top: unset !important;
	justify-content: unset !important;
	gap: unset;

	& div {
		padding: unset;
	}
}

/* Styles view */
.container-buttons {
	display: flex;
	justify-content: center;
	width: 100%
}

/*  ############################ INPUT  ############################*/
.basic-input {
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	width: 30%;
	display: flex;
	align-items: center;
	user-select: none;
	cursor: pointer;
	position: relative;

	.cuerpo {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		cursor: inherit;

		& input {
			border: none;
			outline: none;
			width: 100%;
			height: fit-content;
			background-color: var(--color-primary) !important;
			font-size: 12px;
			color: var(--color-text);
			padding: 10px 5px 0px 8px;
			cursor: inherit;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				-webkit-appearance: none;
				margin: 0;
				/* opcional */
			}
		}

		& label {
			width: 100%;
			font-size: var(--font-size-normal);
			background-color: transparent;
			white-space: nowrap;
			overflow: hidden;
			color: var(--color-text);
			padding-left: 8px;
			text-overflow: ellipsis;
			cursor: inherit;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			transition: 0.08s ease all;
		}
	}
}

.basic-input--focus {
	border: 1px solid var(--color-suite-primary);
}

.basic-input--filled {
	& .cuerpo {
		& input {
			display: block;
		}

		& label {
			color: var(--color-text-secundary);
			font-size: 11px;
			font-weight: var(--font-weight-small);
			top: 0%;
			left: 50%;
			transform: translate(-50%, 0%);
		}
	}
}

.basic-input--disabled {
	border: 1px solid var(--color-border);
	border-color: var(--color-border);
	background-color: var(--color-disabled-secundary);
	cursor: not-allowed;

	& .cuerpo {
		cursor: inherit;

		& input {
			cursor: inherit;
			color: var(--color-disabled);
			background-color: var(--color-disabled-secundary) !important;
		}

		& label {
			cursor: inherit;
			color: var(--color-disabled);
		}
	}

	& .block-icon {
		font-size: small;
		color: var(--color-disabled);
		padding: 0 5px 0 5px;
	}
}

.basic-input--error {
	border-color: var(--color-error);

	& .error-icon {
		color: var(--color-error);
		padding-right: 10px;
		font-size: small;
	}

	& label {
		color: var(--color-error) !important;
	}
}

.basic-input--focus.basic-input--error {
	& label {
		color: var(--color-error);
	}
}

/*  ############################ datepicker  ############################*/

.daterangepicker {
	background-color: var(--color-primary);
	color: var(--color-text);
	border: 0.5px solid var(--color-border-secundary);
	border-radius: var(--border-radius);

	&::before {
		border-bottom: 7px solid var(--color-border-secundary);
	}

	& .drp-calendar {
		background-color: var(--color-primary);
		border-left: none !important;


		& .calendar-table {
			border: none;
			background-color: var(--color-primary);

			& .table-condensed {

				& .prev,
				.next {
					&:hover {
						background-color: var(--item-hover);
					}

					& span {
						border: solid var(--color-text);
						border-width: 0 2px 2px 0;
					}
				}

				& td {

					&.off,
					&.off.start-date,
					&.off.end-date {
						background-color: var(--color-disabled-secundary);
					}

					&.off.disabled {
						background-color: var(--color-primary);
					}


					&.available:hover {
						background-color: var(--color-date-hover);
					}

					&.in-range {
						background-color: var(--color-date-in-range);
						color: var(--color-text);
					}

					&.end-date,
					&.start-date {
						background-color: var(--color-suite-primary);
						color: var(--color-text-contraste);
					}

					&.off.in-range {
						background-color: var(--color-date-in-range);
					}

					&.off.available {
						background-color: var(--color-primary);

						&:hover {
							background-color: var(--color-date-hover);
						}
					}

					&.active {
						background-color: var(--color-suite-primary);

						&:hover {
							background-color: var(--color-suite-primary);
						}
					}
				}

			}
		}
	}

	& .ranges {
		border-right: 0.5px solid var(--color-border-secundary);
		margin: 0px !important;
		padding-top: 8px;
		padding-bottom: 4px;

		& ul {
			& li {
				margin-right: 3px;
				margin-left: 3px;
				border-radius: var(--border-radius);

				&:hover {
					background-color: var(--item-hover);
				}
			}

			& .active {
				background-color: var(--opc-color-item-select);
				color: var(--color-text);
			}

			& li:hover.active {
				background-color: var(--opc-color-item-select);
			}
		}
	}


	& select {

		background-color: var(--color-primary) !important;
		border-radius: var(--border-radius) !important;
		border-color: var(--color-border) !important;
		color: var(--color-text) !important;

		&:focus>option:checked {
			background: var(--opc-color-item-select) !important;
			color: var(--color-text) !important;
		}

		&::-webkit-scrollbar-track {
			background-color: transparent;
		}

		&::-webkit-scrollbar {
			height: 6px;
			width: 6px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 300px;
			background-color: #999;
		}
	}

	& .drp-buttons {
		border-top: 1px solid var(--color-border-secundary);

		& .drp-selected {
			font-size: var(--font-size-large);
			font-weight: var(--font-weight-large);
		}

		& button {
			border: none;
			border-radius: var(--border-radius);
			font-weight: var(--font-size-normal) !important;

			&.btn-default {
				background-color: var(--color-error);
				color: white;

				&:hover {
					background-color: var(--color-error-hover);
				}

				&:active {
					background-color: var(--color-error-active);
				}
			}

			&.btn-primary {
				background-color: var(--color-bnt-suscess);
				color: white;

				&:hover {
					background-color: var(--color-bnt-suscess-hover);
				}

				&:active {
					background-color: var(--color-bnt-suscess-active);
				}
			}
		}

	}
}

.section {
	margin: 0;
	padding: 0;
	font-size: small;
	font-weight: 500;
	color: var(--color-text);
	border-bottom: 1px solid var(--color-border);
}

.boxBlock-title.changing {
	opacity: 0;
	transform: translateX(-20px);
}

.boxBlock-title {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#graphTitle.changing {
	opacity: 0;
	transform: translateX(-20px);
}

i.changing {
	opacity: 0;
	transform: translateX(-20px);
}

.highcharts-mappoint-series {
	opacity: 1 !important;
}

#main-container {
	height: 100%;
	width: 100%;
}

#main-container .main-graphs {
	overflow-y: auto;

	&::-webkit-scrollbar {
		height: 6px;
		width: 6px;
	}

	&::-webkit-scrollbar-thumb {
		border-radius: 300px;
		background-color: #999;
	}

	& .card {
		display: none;
	}

	& .nav,
	.highcharts-exporting-group {
		display: none;
	}

	& .highcharts-contextbutton {
		display: none;
	}
}

.graphOPC {
	background-color: var(--color-suite-background);
	color: var(--color-text);
	height: 100%;
	border-radius: var(--border-radius);

	& .accordionGraph {
		display: none !important;
	}

	& .scroller {
		display: none !important;
	}

	& .wrapper {
		display: none !important;
	}

	& .graphic {
		z-index: 0;
		height: 100%;
		width: 85%;

		& .highcharts-background {
			fill: var(--color-suite-background) !important;
		}

		& .highcharts-axis-labels {
			& text {
				fill: var(--color-text) !important;
			}

		}

		& .highcharts-container {
			& text {
				fill: var(--color-text) !important;
			}

			& .highcharts-legend {
				& .highcharts-legend-item {
					& path {
						filter: brightness(var(--brightness-filter)) !important;
					}

					& text {
						fill: var(--color-text) !important;
					}
				}
			}

			& .highcharts-contextmenu {
				& .highcharts-menu {
					background-color: var(--color-primary) !important;
					border: 0.5px solid var(--color-border-secundary) !important;
					border-radius: var(--border-radius) !important;
					box-shadow: var(--color-suite-tertiary) 1px 1px 5px !important;

					& .highcharts-menu-item {
						color: var(--color-text) !important;
						background-color: transparent !important;
						margin: 2px 4px 2px 4px;
						border-radius: var(--border-radius);

						&:hover {
							background-color: var(--color-suite-tertiary) !important;
						}
					}

					& hr {
						border: 0.1em solid var(--color-border-secundary) !important;
					}
				}
			}

			& .highcharts-yaxis-grid {
				& path {
					stroke: var(--color-border-secundary);
				}
			}

			/* & .highcharts-xaxis-grid{
		  & path{
			stroke: var(--color-border-secundary);
		  }
		} */

			& .highcharts-tooltip {
				& .highcharts-tooltip-box {
					fill: var(--color-primary) !important;
					stroke: var(--color-border-secundary);

				}
			}

			& .highcharts-series-group {
				& .highcharts-series {
					filter: brightness(var(--brightness-filter)) !important;

					& rect {
						stroke: none;
					}
				}

				& .highcharts-markers {
					filter: brightness(var(--brightness-filter)) !important;

				}
			}

			& .highcharts-data-labels {
				& .highcharts-label {
					& text {
						fill: black !important;

						& tspan {
							stroke-width: 1px;
						}
					}
				}
			}

			& .highcharts-title {
				font-size: var(--font-size-large) !important;
			}

			& .highcharts-button {
				& rect {
					fill: var(--color-primary);
					stroke: var(--color-border-secundary);
				}
			}
		}

	}
}

.graphCenter {
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	& .loader {
		width: 8px;
		height: 40px;
		border-radius: 4px;
		display: block;
		margin: 20px auto;
		position: relative;
		background: currentColor;
		color: var(--color-suite-primary);
		box-sizing: border-box;
		animation: animloader 0.3s 0.3s linear infinite alternate;
	}

	& .loader::after,
	.loader::before {
		content: '';
		width: 8px;
		height: 40px;
		border-radius: 4px;
		background: currentColor;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 20px;
		box-sizing: border-box;
		animation: animloader 0.3s 0.45s linear infinite alternate;
	}

	& .loader::before {
		left: -20px;
		animation-delay: 0s;
	}

}

@keyframes animloader {
	0% {
		height: 48px
	}

	100% {
		height: 4px
	}
}

.selectGraph {
	position: absolute !important;
	top: 7px;
	left: 100%;
	width: unset;
	transform: translate(calc(-100% + -5px), 0%);
}

.lazy_loader {
	width: 50px;
	height: 50px;
	border: 3px solid var(--color-text);
	border-bottom-color: transparent;
	border-radius: 119%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
	margin-right: 7px;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


#graphTitle {
	color: var(--color-text);
	margin-left: 30px;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

path:not([id=""]) {
	cursor: pointer;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.fa-spinner {
	animation: spin 2s linear infinite;
	font-size: 35px;
}

#root__view {
	background-color: var(--color-suite-background) !important;
}

.reporte-container {
	display: flex;
}

#contenedorPrincipal {
	height: 100%;
	width: 100%;
}

#containerGraph1 {
	height: 100%;
}

label {
	margin-bottom: unset !important;
}

.mainContainer {
	height: 97vh;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.important-height {
	& div {
		height: 33px !important;
	}
}



.boxBlock {
	& .boxBlock-header {
		font-style: unset !important;
	}

	& .boxBlock-body {
		padding: 1px !important;
	}
}

.loading {
	width: 100%;
	padding: var(--suite-padding);
	padding-top: 20px;
	position: relative;

	& .loadingCenter {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: 1;
		transition: opacity 0.2s ease-in-out;

		& .loader {
			width: 8px;
			height: 40px;
			border-radius: 4px;
			display: block;
			margin: 20px auto;
			position: relative;
			background: currentColor;
			color: var(--suite-primary-S360);
			box-sizing: border-box;
			animation: animloader 0.3s 0s linear infinite alternate;
		}

		& .loader::after,
		.loader::before {
			content: '';
			width: 8px;
			height: 40px;
			border-radius: 4px;
			background: currentColor;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 20px;
			box-sizing: border-box;
			animation: animloader 0.3s 0s linear infinite alternate;
			animation-delay: 0.2s;
		}

		& .loader::before {
			left: -20px
		}
	}
}

.no-data {
	color: #A5A5A5 !important;
}

.swal2-popup {
	background-color: var(--color-primary) !important;

	& .swal2-contentwrapper {
		& h2 {
			color: var(--color-text);
		}

		& div {
			color: var(--color-text);
		}
	}

	& .swal2-success-circular-line-left,
	.swal2-success-fix,
	.swal2-success-circular-line-right {
		background-color: var(--color-primary) !important;
	}
}

.graphexpand i:first-child {
	display: inline-block;
}

.graphexpand i:last-child {
	position: absolute;
	display: flex;
	bottom: 2px;
	transform: scale(0.01);
	justify-content: center;
	align-items: center;
}

.boxBlock-header {
	position: relative !important;
}

.graphexpand {
	& i {
		color: var(--color-text);
		transition: transform 0.2s ease-out;
	}
}

.graphexpand:hover i:first-child {
	transform: scale(0.01)
}

.graphexpand:hover i:last-child {
	transform: none;
}

.B_reducir_Grafica,
.B_Full_Grafica {
	cursor: pointer;
}

/* .fullGraph {
	height: calc(96vh - 24px);
	 
	& :first-child {
		height: 100%;

		& .boxBlock {
			height: 100%;

			& .boxBlock-body {
				height: 100%
			}
		}
	}
} */

.tooltip {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.75);
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 12px !important;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 10;
}

.tooltip::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.tooltip-top {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.tooltip-top::after {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px 6px 0 6px;
	border-color: rgba(0, 0, 0, 0.75) transparent transparent transparent;
}

.tooltip-bottom {
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.tooltip-bottom::after {
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 0 6px 6px 6px;
	border-color: transparent transparent rgba(0, 0, 0, 0.75) transparent;
}

.reports.full {
	grid-template-rows: unset !important;
	height: 100%;
}


.cicle-loader-container {
	display: flex;
	gap: 9px;
	align-items: center;

	& .circle-loader {
		border: 5px solid #034785;
		border-bottom-color: transparent;
		border-radius: 50%;
		display: inline-block;
		box-sizing: border-box;
		animation: rotation 1s linear infinite;
	}

	& .loadingMessage {
		color: var(--color-text);
		font-weight: bold;
	}
}


@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.container_check_Grafica {
	cursor: pointer
}