/* Minification failed. Returning unminified contents.
(33,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(60,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(61,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(62,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(114,20): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(120,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(125,15): run-time error CSS1039: Token not allowed after unary operator: '-link-hover-color'
(141,14): run-time error CSS1039: Token not allowed after unary operator: '-form-label-text-color'
(150,25): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(155,25): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(161,32): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(162,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(169,29): run-time error CSS1039: Token not allowed after unary operator: '-form-input-focus-border-color'
(183,15): run-time error CSS1039: Token not allowed after unary operator: '-disabled-bg-color'
(191,15): run-time error CSS1039: Token not allowed after unary operator: '-disabled-bg-color'
(196,24): run-time error CSS1030: Expected identifier, found '.'
(196,44): run-time error CSS1031: Expected selector, found ')'
(196,44): run-time error CSS1025: Expected comma or open brace, found ')'
(219,19): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(220,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(241,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(246,15): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-text-color'
(258,25): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(276,15): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(280,15): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(321,20): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(322,15): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(326,21): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(341,14): run-time error CSS1039: Token not allowed after unary operator: '-link-hover-color'
(356,15): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(379,25): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(413,20): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(443,33): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(448,14): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(454,14): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(482,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(494,20): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(510,26): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(515,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(524,35): run-time error CSS1039: Token not allowed after unary operator: '-transition-speed'
(550,25): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(554,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(566,14): run-time error CSS1039: Token not allowed after unary operator: '-svg-fill-color'
(571,15): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-text-color'
(600,14): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-text-color'
(649,20): run-time error CSS1039: Token not allowed after unary operator: '-link-hover-color'
(650,15): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(657,25): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-bg-color'
(670,15): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-text-color'
(676,15): run-time error CSS1039: Token not allowed after unary operator: '-secondary-text-color'
(695,20): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(696,15): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(701,21): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(716,14): run-time error CSS1039: Token not allowed after unary operator: '-secondary-text-color'
(726,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(753,13): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(761,14): run-time error CSS1039: Token not allowed after unary operator: '-svg-bg-color'
(775,33): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(780,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(784,15): run-time error CSS1039: Token not allowed after unary operator: '-svg-bg-color'
(811,25): run-time error CSS1039: Token not allowed after unary operator: '-svg-bg-color'
(813,13): run-time error CSS1039: Token not allowed after unary operator: '-svg-fill-color'
(814,19): run-time error CSS1039: Token not allowed after unary operator: '-svg-bg-color'
(822,15): run-time error CSS1039: Token not allowed after unary operator: '-svg-fill-color'
(826,26): run-time error CSS1039: Token not allowed after unary operator: '-svg-fill-color'
(830,15): run-time error CSS1039: Token not allowed after unary operator: '-svg-bg-color'
(852,32): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(860,33): run-time error CSS1039: Token not allowed after unary operator: '-tab-color'
(881,25): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(900,15): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(901,20): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(910,21): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(915,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(963,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(969,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(977,15): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(981,16): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(988,33): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(990,15): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(994,16): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(999,15): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(1003,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(1008,32): run-time error CSS1039: Token not allowed after unary operator: '-tab-color'
(1011,14): run-time error CSS1039: Token not allowed after unary operator: '-link-hover-color'
(1015,15): run-time error CSS1039: Token not allowed after unary operator: '-link-hover-color'
(1047,15): run-time error CSS1039: Token not allowed after unary operator: '-tabDisabled-text-color'
(1051,16): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(1065,33): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(1080,34): run-time error CSS1039: Token not allowed after unary operator: '-tab-color'
(1107,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1108,19): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(1113,20): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(1132,13): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(1136,14): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(1141,26): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(1188,25): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-bg-color'
(1223,20): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(1224,15): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1228,21): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(1233,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(1324,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1338,25): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-bg-color'
(1396,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1420,32): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1422,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1428,14): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1439,13): run-time error CSS1039: Token not allowed after unary operator: '-svg-fill-color'
(1455,25): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(1457,19): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(1458,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1463,26): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1464,15): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1465,20): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1479,15): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1487,15): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1515,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1516,19): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1525,20): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1526,15): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(1532,27): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1533,16): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1534,21): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1623,26): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(1628,23): run-time error CSS1039: Token not allowed after unary operator: '-form-input-focus-border-color'
(1634,14): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-text-color'
(1639,15): run-time error CSS1039: Token not allowed after unary operator: '-pageTitle-text-color'
(1653,25): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1682,12): run-time error CSS1062: Expected semicolon or closing curly-brace, found '%'
(1684,33): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(1685,15): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1693,15): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1698,15): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1703,25): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1724,20): run-time error CSS1039: Token not allowed after unary operator: '-link-hover-color'
(1726,15): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(1753,32): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(1764,15): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1772,32): run-time error CSS1039: Token not allowed after unary operator: '-form-input-border-color'
(1773,28): run-time error CSS1039: Token not allowed after unary operator: '-form-input-focus-border-color'
(1884,15): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(1889,16): run-time error CSS1039: Token not allowed after unary operator: '-menu-width-expanded'
(1894,27): run-time error CSS1039: Token not allowed after unary operator: '-menu-width'
(1926,27): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(1943,16): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1947,17): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(1952,20): run-time error CSS1039: Token not allowed after unary operator: '-header-bg-color'
(1961,16): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(1965,16): run-time error CSS1039: Token not allowed after unary operator: '-text-color'
(2016,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(2059,34): run-time error CSS1039: Token not allowed after unary operator: '-menu-bg-color'
(2131,13): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(2146,13): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(2161,13): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(2176,13): run-time error CSS1039: Token not allowed after unary operator: '-primary-text-color'
(2471,20): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(2472,15): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(2478,21): run-time error CSS1039: Token not allowed after unary operator: '-button-hover-color'
(2509,19): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(2510,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(2651,19): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(2652,14): run-time error CSS1039: Token not allowed after unary operator: '-header-text-color'
(2778,26): run-time error CSS1039: Token not allowed after unary operator: '-primary'
(2803,21): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
(2826,22): run-time error CSS1039: Token not allowed after unary operator: '-button-bg-color'
 */
@font-face {
	font-family: "Poppins-Regular";
	src: url(Fonts/Poppins-Regular.ttf);
}

@font-face {
	font-family: "Poppins-SemiBold";
	src: url(Fonts/Poppins-SemiBold.ttf);
}

@font-face {
	font-family: "Poppins-Bold";
	src: url(Fonts/Poppins-Bold.ttf);
}

@font-face {
	font-family: "Poppins-Medium";
	src: url(Fonts/Poppins-Medium.ttf);
}

@font-face {
	font-family: "Poppins-Light";
	src: url(Fonts/Poppins-Light.ttf);
}

@font-face {
	font-family: "Poppins-Thin";
	src: url(Fonts/Poppins-Thin.ttf);
}

:root {
	font-size: 14px;
	--transition-speed: 600ms; /* velocidade de transição das animações */
	--text-color: #6F6F6F;
	/* 
		body text color
		.form-input color
		nav-icon color
		fill dos svg dos nav-icon
		grid-table color
	*/

	--menu-width: 5rem; /* tamanha do menu lateral sem estar expandido */
	--menu-width-expanded: 16.5rem; /* tamanho do menu lateral quando expandido */
	--menu-bg-color: #dee2e6; /* cor de fundo do menu */
	--header-bg-color: #DE721E; /* cor do fundo da header bar e cor principal da aplicação */
	/*
		-hover links
		cor da srollbar do side menu
		nav icon hover
		hover dos items da language div
		bg hover dos botoes da pageTitleBar
		selected color e hover dos quickfilters
		hover dos botoes das subgrids
		active e hover dos separadores
		hover dos botoes do form
		border e bg dos botoes das modais e cor do texto quando hover dos botoes das modais
	*/

	--button-text-color: white;
	--button-bg-color: #1899CC;
	--button-hover-color: #30b3e7;
	--tab-color: #1899CC;
	--link-hover-color: #1899CC;
	--header-text-color: white; /* cor do texto da header bar */
	--pageTitle-bg-color: #dee2e6; /* cor do fundo da pageTitleBar*/
	--pageTitle-text-color: #434343; /* cor do texto da pageTitleBar */
	--svg-fill-color: white; /* cor dos icons svg */
	--svg-bg-color: #1899CC; /* cor de fundo dos icons svg */

	--primary-text-color: #434343;
	/*
		links
		track da scrollbar do side menu
		fill dos svg da pesquisa e da paginacao
		close das modais
	*/

	--secondary-text-color: #5a5a5a;
	/*
		subtitulo da pageTitleBar
		cor dos cabeçalhos das grids
	*/

	--form-label-text-color: #434343;
	--form-input-border-color: #e6e6e6;
	--form-input-focus-border-color: #8c8c8c;
	--disabled-bg-color: #A0A0A0;
	/*cor dos textos nas disabled*/
	--tabDisabled-text-color: #A0A0A0;
}

body {
	margin: 0;
	padding: 0;
	color: var(--text-color);
	font-family: 'Poppins-Regular', sans-serif !important;
}

.font-bold {
	font-family: 'Poppins-Bold', sans-serif !important;
}

.font-semibold {
	font-family: 'Poppins-SemiBold', sans-serif !important;
}

.font-medium {
	font-family: 'Poppins-Medium', sans-serif !important;
}
/*********************** GENERAL CLASSES ***************************/

main {
	margin-left: var(--menu-width);
	position: relative;
}

a {
	text-decoration: none;
	color: var(--primary-text-color);
}

	a:hover {
		text-decoration: none;
		color: var(--link-hover-color);
	}



.table-caption {
	color: transparent;
	width: 0px;
	height: 0px;
}

.form-label {
	margin-bottom: 0.3rem;
	margin-top: 0.5rem;
	font-size: 14px;
	display: block;
	color: var(--form-label-text-color);
}

.fieldConversation {
	margin-top: 10px;
	margin-bottom: 10px;
}

.fieldIsMine {
	border: 2px solid var(--form-input-border-color);
	background-color: #B1CEF3
}

.fieldIsNotMine {
	border: 2px solid var(--form-input-border-color);
	background-color: #EFECEC
}

.form-input {
	border: none;
	border-bottom: 2px solid var(--form-input-border-color);
	color: var(--primary-text-color);
	/*line-height: 35px;*/
	/* a width do input pode variar de acordo com o sitio (ex: pesquisa que é fixa e campos do form que é ajustavel). Mas esta classe é usada em ambos os sitios */
}

	.form-input:focus {
		outline: none;
		border-bottom-color: var(--form-input-focus-border-color);
		transition-duration: 0.5s;
	}

	.form-input[type=checkbox] {
		width: auto;
	}

select.form-input {
	height: 24px; /* tem de ter o mesmo valor que o line height */
	width: 100%;
}

	select.form-input:disabled {
		color: var(--disabled-bg-color);
	}

input.form-input, textarea.form-input {
	width: 100%;
}

	input.form-input:disabled, textarea.form-input:disabled {
		color: var(--disabled-bg-color);
		background-color: transparent;
	}


.form-label:has(+ input.form-input:disabled),
.form-label:has(+ textarea.form-input:disabled),
.form-label:has(+ select.form-input:disabled) {
	color: var(--disabled-bg-color);
}

.svg-button {
	background: none;
	border: none;
	padding: 0;
	/* a width do botão pode variar de acordo com o botão. Por exemplo o botão de logout tem uma width diferente dos botões de pesquisa. Mas esta classe é usada em ambos os botões*/
}

.required::after {
	content: '*';
}


.requiredInSubmission::after {
	content: '**';
}

.buttonTicketMessage {
	background: var(--button-bg-color);
	color: var(--header-text-color);
	padding: 0.6rem 0.7rem;
	border: 0;
	border-radius: 20px;
	font-size: 12px;
}

.field-validation-error {
	color: red;
	font-size: 10px;
	font-weight: bold;
	float: left;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 3px;
	margin-top: 2px;
}

.simulate {
	color: var(--header-text-color);
	margin-right: auto;
}

	.simulate:hover {
		color: var(--pageTitle-text-color);
	}


/*********************** ACCOUNT VIEWS ***************************/
.account-container {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--menu-bg-color);
}

.loginContainer {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	overflow-x: hidden;
	min-height: 60vh;
	background-color: white;
	border: 1px solid white;
	border-radius: 20px;
	padding: 30px 30px 30px 30px;
}

	.loginContainer h1 {
		color: var(--header-bg-color);
	}

	.loginContainer h4 {
		color: var(--button-bg-color);
	}

.loginTitle {
	width: 100%;
}

.account-form {
	width: 85%;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.account-input.form-input {
	margin-top: 10px;
}

.account-btn-row {
	margin-top: 20px;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.account-btn {
	padding: 10px 40px;
	border: none !important;
	border-radius: 8px !important;
}

	.account-btn.register {
		margin-top: 12px;
	}

	.account-btn:not(:disabled) {
		background: var(--button-bg-color);
		color: var(--header-text-color);
	}

		.account-btn:not(:disabled):hover {
			background: var(--button-hover-color);
		}

.rememberMe-row {
	display: flex;
	text-align: center;
	justify-content: space-between;
}

.rememberMe {
	margin: 10px 0 10px 3px;
	font-size: 12px;
}

.account-link {
	color: var(--link-hover-color);
	font-size: 10px;
}

	.account-link:last-of-type {
		margin-top: 3px;
		margin-bottom: 20px;
	}

	.account-link:first-of-type {
		margin-top: 10px;
		font-size: 10px;
	}

	.account-link:hover {
		color: var(--button-hover-color);
	}

.loginSKLogo {
	margin-top: auto;
	margin-bottom: 20px;
}

.g-recaptcha {
	display: inline-block;
	margin-top: 20px;
}

.recaptcha-message {
	margin-bottom: 20px;
	font-size: 12px;
	color: red;
}

/*********************** SIDE MENU ***************************/

.sideMenu {
	position: fixed;
	background-color: var(--menu-bg-color);
	transition: width 600ms ease;
	box-shadow: 2px 0 10px grey;
	z-index: 3;
	overflow-y: hidden;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	/* a width está definida nas media queries */
}


.nav {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: calc(100vh - 112px - 1rem);
	overflow-y: auto;
	overflow-x: hidden;
	flex-wrap: nowrap;
}

	.nav::-webkit-scrollbar {
		width: 0.25rem;
	}

	.nav::-webkit-scrollbar-track {
		background: #434343; /* var(--primary-text-color) */
	}

	.nav::-webkit-scrollbar-thumb {
		background: var(--header-bg-color);
	}

.nav-logo {
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 1rem;
	text-align: center;
	font-size: 1.5rem;
	width: 100%;
}

.nav-logo-content {
	width: 2.5rem;
	margin: 0 1rem;
	content: url(img/menu.svg);
}

	.nav-logo-content.expanded {
		content: url(img/close.svg);
	}

.nav-logo-text {
	display: inline;
	position: absolute;
	left: -999px;
	margin-left: 1rem;
}

	.nav-logo-text.expanded {
		-webkit-animation: slide var(--transition-speed) forwards;
	}

@-webkit-keyframes slide {
	100% {
		left: var(--menu-width);
	}
}

@keyframes slide {
	100% {
		left: var(--menu-width);
	}
}

@-webkit-keyframes opacity {
	100% {
		opacity: 1;
	}
}

@keyframes opacity {
	100% {
		opacity: 1;
	}
}

.nav-item, .nav-item-dropdown {
	width: 100%;
}

.helper-icon { /*ultimo botao*/
	margin-top: auto;
}

.nav-icon {
	display: flex;
	align-items: center;
	height: 4rem;
	color: var(--text-color);
	text-decoration: none;
	cursor: pointer;
	justify-content: flex-start;
}

	.nav-icon svg {
		width: 3rem;
		margin: 0 1rem;
	}

	.nav-icon:hover {
		background: var(--header-bg-color);
		color: white;
	}

		.nav-icon:hover svg {
			fill: white;
		}

.nav-icon-text {
	display: flex;
	opacity: 0;
	/*position: absolute;*/ /*estas duas linhas são para quando os menus faziam slide quando se abre o menu */
	/*left: -999px;*/
	font-weight: bold;
	align-items: center;
	justify-content: flex-start;
	width: calc(100% - var(--menu-width));
}

	.nav-icon-text svg {
		width: 1rem;
		fill: var(--text-color);
		margin-left: auto;
	}

		.nav-icon-text svg.expanded {
			transform: rotate(90deg);
		}

	.nav-icon-text.expanded {
		-webkit-animation: opacity var(--transition-speed) forwards;
	}


.nav-dropdown {
	display: none;
	margin-left: 2rem;
	font-size: 14px;
	list-style: none;
}

	.nav-dropdown.expanded {
		display: block;
	}

.nav-dropdown-item {
	padding: 0.25rem 0.5rem;
}

/*********************** MAIN CONTENT ***************************/

/* HEADER */
.headerBar {
	position: fixed;
	width: 100%;
	height: 4rem;
	background-color: var(--header-bg-color);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: var(--header-text-color);
	z-index: 2;
}

	.headerBar h2 {
		margin: 0;
	}



	.headerBar .svg-button, .headerBar .svg-button svg * {
		width: 2.75rem;
		fill: var(--svg-fill-color);
	}

		.headerBar .svg-button:hover {
			width: 2.75rem;
			fill: var(--pageTitle-text-color);
		}

		.headerBar .svg-button#language-button {
			padding-top: 3px;
		}

	.headerBar img {
		border-radius: 50%;
		width: 2.75rem;
		margin-right: 5px;
		cursor: pointer;
	}

#logout-button {
	width: 2.5rem;
}

.appLogo, .logo {
	margin-right: auto;
	margin-left: 3rem;
	color: white;
}

.loginAppLogo {
	width: 300px;
}

.logo:hover {
	color: var(--pageTitle-text-color);
}

.logout-form {
	margin-right: 8rem;
	margin-left: 1rem;
}

.header-logo {
	width: 3rem;
}

.header-text {
	margin-right: 20px;
	font-weight: bold;
	font-size: 10px;
}

.headerMessages {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100%;
	justify-content: center;
	margin-right: 15px;
	margin-left: 60px;
}

.language-select {
	right: 7rem;
	top: 50px;
	position: absolute;
	background: white;
	color: black;
	display: none;
}

	.language-select.show {
		display: block;
		z-index: 4;
	}

.language-item {
	display: block;
	padding: 5px 10px;
	cursor: pointer;
}

	.language-item:hover, .language-item.selected {
		background: var(--link-hover-color);
		color: var(--header-text-color);
	}

/* TITLE */
.pageTitleBar {
	height: 5rem;
	width: 100%;
	background-color: var(--pageTitle-bg-color);
	display: flex;
	position: fixed;
	top: 4rem;
	align-items: center;
	justify-content: flex-end;
	padding-left: 3rem;
	z-index: 2;
}


	.pageTitleBar h3 {
		margin: 0;
		color: var(--pageTitle-text-color);
		font-size: 16px;
	}

	.pageTitleBar h4 {
		margin: 5px 0 0 0;
		color: var(--secondary-text-color);
		font-size: 12px;
		font-weight: normal;
	}

.pageTitle {
	margin-right: auto;
}

.pageTitleButtons button {
	margin-right: 10px;
	padding: .6rem .7rem;
	border: 0;
	border-radius: 20px;
	/*box-shadow: 0px 1px 7px grey;*/
	font-size: 12px;
}

	.pageTitleButtons button:not(:disabled) {
		background: var(--button-bg-color);
		color: var(--header-text-color);
	}

		.pageTitleButtons button:not(:disabled):hover {
			/*box-shadow: 0px 0px 0px grey;*/
			background: var(--button-hover-color);
		}

	.pageTitleButtons button:last-child {
		margin-right: 8rem;
	}

/* MAIN */
.row-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
/*********************** GRID ***************************/
thead tr {
	color: var(--secondary-text-color);
}

.grid-content {
	padding: 3rem;
	padding-top: 10rem;
}

.grid-table, .subgrid-table, .grid-child {
	font-size: 12px;
	color: var(--text-color);
}

	.grid-table td, .grid-table th, .subgrid-table td, .subgrid-table th {
		padding: 0.5rem;
		vertical-align: middle;
	}

.grid-helper-header:hover {
	cursor: url('img/orderCursor.png'), auto;
}

/* PESQUISA */
.grid-helper-search {
	justify-content: flex-end;
	align-items: initial;
	margin-bottom: 10px;
	font-size: 11px;
}

.grid-helper-search-input.form-input {
	height: 75%;
	width: 300px;
}

.grid-helper-search .svg-button {
	width: 2.5rem;
	fill: var(--primary-text-color);
}

	.grid-helper-search .svg-button:disabled, .grid-helper-search .svg-button:disabled:hover {
		fill: #dee2e6; /* var(--pageTitle-bg-color) */
	}

	.grid-helper-search .svg-button:hover {
		fill: var(--svg-bg-color);
	}

/* PAGINACAO */
.grid-helper-pagination {
	justify-content: flex-start;
	font-size: 11px;
}

	.grid-helper-pagination select {
		margin: 0 40px 0 10px;
		height: 22px;
		text-align: center;
		border: none;
		border-bottom: 2px solid var(--form-input-border-color);
	}

	.grid-helper-pagination .svg-button {
		width: 1.4rem;
		fill: var(--primary-text-color);
	}

		.grid-helper-pagination .svg-button:hover {
			fill: var(--svg-bg-color);
		}

.records {
	margin-left: 5px;
	font-size: 8pt;
}

/* EXCEL */
.grid-helper-pagination .export-excel {
	margin-left: 5px;
}

.grid-helper-pagination .svg-button.export-excel {
	margin-left: 5px;
	width: 1.8rem;
}

/* GRID ACTIONS */

.grid-action {
	padding: 0;
	width: 25px;
	height: 25px;
	float: left;
	margin-left: 3px;
	cursor: pointer;
	border: 1px solid var(--svg-bg-color);
	border-radius: 50%;
	fill: var(--svg-fill-color);
	background: var(--svg-bg-color);
}

	.grid-action svg {
		vertical-align: inherit;
	}

		.grid-action svg * {
			fill: var(--svg-fill-color);
		}

	.grid-action:hover {
		background-color: var(--svg-fill-color);
	}

		.grid-action:hover svg * {
			fill: var(--svg-bg-color);
		}

/*.svg_edit_pencil {
	fill: #0A1633;
}*/

.grid-image {
	border-radius: 50%;
	max-width: 50px;
	max-height: 50px;
}

.star_outlineFill {
	height: 20px;
}

.starFill {
	height: 20px;
}

.quickfilter {
	border-bottom: 6px solid var(--menu-bg-color);
	margin: 0 5px;
	font-weight: bold;
	cursor: pointer;
	font-size: 12px;
}

	.quickfilter.selected, .quickfilter:hover {
		border-bottom: 6px solid var(--tab-color);
	}

/* SUBGRID */
.subgrid-container {
	margin-top: 2rem;
}

	.subgrid-container.empty {
		margin-top: 0;
	}

.subgrid-content {
	padding: 1rem 2rem;
}

	.subgrid-content.empty {
		padding-top: 0;
	}

.subgrid-header {
	background-color: var(--menu-bg-color);
	width: 100%;
	height: 3rem;
	justify-content: flex-end;
}

	.subgrid-header h5 {
		margin-left: 2rem;
		margin-right: auto;
	}

	.subgrid-header button {
		margin-right: 1rem;
		font-weight: bold;
		padding: .5rem .6rem;
		border: 29px;
		border-radius: 20px;
		/*box-shadow: 0px 1px 7px grey;*/
		font-size: 11px;
		color: var(--header-text-color);
		background: var(--button-bg-color);
	}

		.subgrid-header button:last-child {
			margin-right: 3rem;
		}

		.subgrid-header button:hover {
			/*box-shadow: 0px 0px 0px grey;*/
			background: var(--button-hover-color);
		}

/* GRID CHILD */
.table-hover > tbody > .grid-child-tr:hover > * {
	--bs-table-accent-bg: transparent;
}

/*********************** FORM ***************************/
.ui-widget {
	font-family: inherit;
	font-size: 1rem;
}

	.ui-widget.ui-widget-content {
		border: 0;
	}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
	border: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
	border: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
	border: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
	border: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
	border-top-right-radius: 0;
}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
	border-top-left-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
	border-top-left-radius: 0;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
	border-top-left-radius: 0;
}

.ui-widget-content {
	border: 0;
	background: transparent;
	color: var(--primary-text-color);
}

.ui-widget-header {
	border: 0;
	background: transparent;
	color: var(--primary-text-color);
	font-weight: normal;
}

	.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
		border: 0;
		background: transparent;
		font-weight: normal;
		color: var(--primary-text-color);
	}

		.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
			color: var(--primary-text-color);
			text-decoration: none;
		}

	.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
		border: 0;
		background: transparent;
		border-bottom: 6px solid var(--menu-bg-color); /*é preciso por aqui a cor da border dos tabs do form */
		font-weight: normal;
		color: var(--primary-text-color);
	}

		.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button, .ui-button {
			color: var(--primary-text-color);
			text-decoration: none;
		}

	.ui-widget-header a {
		color: var(--primary-text-color);
	}

.ui-widget-content a {
	color: var(--primary-text-color);
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
	border: 0;
	border-bottom: 6px solid var(--tab-color); /*é preciso por aqui a cor do hover da border dos tabs do form */
	background: transparent;
	font-weight: normal;
	color: var(--link-hover-color);
}

	.ui-state-hover a, .ui-widget-content .ui-state-hover a, .ui-widget-header .ui-state-hover a {
		color: var(--link-hover-color);
	}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
	font-family: inherit;
	font-size: inherit;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: 0;
	padding-bottom: 0;
}

.form-form {
	padding: 1rem 2rem;
	padding-top: 10rem;
}

.ui-tabs .ui-tabs-nav li {
	margin: 0;
	border-bottom-width: 6px;
}

.tabDisabled {
	/*background: rgba(239,239,239,0.7);*/
	opacity: .35;
	-ms-filter: "alpha(opacity=35)";
	pointer-events: none !important;
}

	.tabDisabled a {
		cursor: default;
		color: var(--tabDisabled-text-color);
	}

		.tabDisabled a:hover {
			color: var(--primary-text-color);
		}

.form-tabs {
	display: flex;
	flex-flow: row wrap;
	border-bottom: 0;
	list-style-type: none;
	padding: 0;
}

	.form-tabs li {
		/*margin: 5px 15px 0;
        padding-bottom: 4px;*/
		border-bottom: 6px solid var(--menu-bg-color);
		padding: 5px 15px 4px 15px;
	}

		/* Para que o primeiro se mantenha encostado à margem da linha cinzenta */
		.form-tabs li:first-child {
			margin-left: 0;
		}

		/* Para que o ultimo se mantenha encostado à margem da linha cinzenta */
		.form-tabs li:last-child {
			margin-right: 0;
		}

		.form-tabs li.active, .form-tabs li.ui-state-active {
			border-bottom: 6px solid var(--tab-color);
			margin-bottom: 0;
		}

.form-tab-content {
	padding: 0 .5rem;
	padding-top: 0rem;
	font-size: 13px;
}

.form-row {
	margin: 5px 0;
}

.form-col {
	flex-direction: column;
	justify-content: center;
	display: flex;
}

.form-button {
	margin-left: 1rem;
	padding: .6rem .7rem;
	border: 29px;
	border-radius: 20px;
	box-shadow: 0px 1px 7px grey;
	font-size: 12px;
	color: var(--header-text-color);
	background: var(--button-bg-color);
}

	.form-button:hover {
		box-shadow: 0px 0px 0px grey;
		background: var(--button-hover-color);
	}

	.form-button.remove-image {
		margin-left: 0;
	}

.textAreaNumCharacters {
	float: right;
}

.form-image {
	margin: 20px 10px;
	max-width: 200px;
	max-height: 200px;
}

.remove-image {
	width: 30px;
	fill: var(--button-bg-color);
}

	.remove-image:hover {
		fill: var(--button-hover-color);
	}
/*********************** MODAIS ***************************/

#dialog-modal, #dialog-modalSecondLevel {
	width: calc(100% - var(--menu-width));
	margin-left: 5rem;
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
}

	#dialog-modal.show, #dialog-search-modal.show {
		position: fixed; /* Stay in place */
		z-index: 20; /* Sit on top */
		display: flex;
		flex-direction: column;
	}

	#dialog-modalSecondLevel.show {
		position: fixed; /* Stay in place */
		z-index: 50; /* Sit on top */
		display: flex;
		flex-direction: column;
	}

	#dialog-modal.hide, #dialog-modalSecondLevel.hide, #dialog-search-modal.hide {
		display: none;
	}

.form-modal-container { /* form de cada modal */
	position: relative;
	background-color: #fefefe;
	padding: 0;
	border-radius: 1rem;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	/* Para centrar */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: auto;
}

.notOverFlow { /* form de cada modal */
	overflow: hidden !important;
}

.form-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2px 16px;
	background-color: var(--pageTitle-bg-color);
	color: black;
	height: 4rem;
	/* arredondar os cantos de acordo com a box container */
	border-top-left-radius: calc(1rem - 1px);
	border-top-right-radius: calc(1rem - 1px);
}

	.form-modal-header h4 {
		margin: 0;
		font-size: 1.1rem;
	}

.form-modal-body {
	padding: 16px;
}

.form-modal-footer {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	padding: 12px 16px;
	/* arredondar os cantos de acordo com a box container */
	border-bottom-left-radius: calc(1rem - 1px);
	border-bottom-right-radius: calc(1rem - 1px);
}

.form-modal-btn {
	padding: .375rem .75rem;
	border: 0;
	border-radius: 10px;
	margin-left: 10px;
}

	.form-modal-btn:not(:disabled) {
		background: var(--button-bg-color);
		color: var(--header-text-color);
	}

		.form-modal-btn:not(:disabled):hover {
			background: var(--button-hover-color);
		}

/* The Close Button */
.form-modal-close {
	color: var(--primary-text-color);
	font-size: 28px;
	font-weight: bolder;
	cursor: pointer;
}

	.form-modal-close:hover,
	.form-modal-close:focus {
		color: #000;
		text-decoration: none;
	}

/* HELPER */
.modal-helper {
	overflow-y: overlay;
	overflow-x: overlay;
}

/*********************** REPORTS ***************************/
.collapsedDataInterval {
	margin-bottom: -50px !important;
}

.reports-content {
	display: flex;
	padding-top: 9rem;
}

.report-menu-container {
	display: flex;
	flex-direction: column;
	padding: 0 2rem 2rem 2rem;
}

	.report-menu-container.expanded {
		width: 25%;
	}

		.report-menu-container.expanded + .report-graphs-container {
			width: 75%;
		}

.report-menu-container {
	width: auto;
}

	.report-menu-container + .report-graphs-container {
		width: 100%;
	}

.report-graphs-container {
	padding: 1rem;
}


/*********************** new all ***************************/

.report-menu-All {
	margin-bottom: 2rem;
	padding: 1rem 2rem;
}

	.report-menu-All:last-of-type {
		margin-bottom: 0;
	}

	.report-menu-All.expanded .report-filters-accordion-All {
		display: flex;
	}

	.report-menu-All .report-menu-title-All svg {
		transform: rotate(0deg);
	}

	.report-menu-All.expanded .report-menu-title-All svg {
		transform: rotate(180deg);
	}

.report-filters-accordion-All {
	display: none;
	flex-direction: column;
}

.report-menu-title-All {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

	.report-menu-title-All svg {
		width: 25px;
		fill: var(--text-color);
		cursor: pointer;
	}

.form-inputinCyan {
	background: transparent;
	border-bottom: 1px solid #6F6F6F;
	margin-bottom: 1rem;
}

/*********************** new all ***************************/


.report-menu {
	background-color: var(--pageTitle-bg-color);
	margin-bottom: 2rem;
	padding: 1rem 2rem;
}


.report-menu-colorLeft {
	background-color: transparent;
	margin-bottom: 0;
	padding: 0;
}

.report-menu .report-btn {
	margin-top: 1rem;
	align-self: flex-end;
	float: right;
}

.report-menu:last-of-type {
	margin-bottom: 0;
}

.report-menu.expanded .report-filters-accordion {
	display: flex;
}

.report-menu.expanded .report-menu-title svg {
	transform: rotate(-90deg);
}


.report-menu .report-menu-title svg {
	transform: rotate(90deg);
}

.report-menu-title-label {
	font-size: 1.15rem;
	font-weight: bold;
}

	.report-menu-title-label.date-navigation-title {
		margin-bottom: 0.5rem;
	}

.report-filters-accordion {
	display: none;
	flex-direction: column;
}


.report-menu-title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

	.report-menu-title svg {
		width: 25px;
		fill: var(--text-color);
		cursor: pointer;
	}

.label-report-filter {
	display: block;
	font-size: 13px;
	margin-bottom: 0.25rem;
}

.multiselect-group {
	padding: 0 1rem;
	margin-bottom: 1rem;
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	cursor: pointer;
}

.report-multiselect-btn {
	display: flex;
	justify-content: space-between;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--text-color);
	border-radius: 0;
	color: var(--text-color);
	padding: 0.2rem 0.5rem;
}

	.report-multiselect-btn svg {
		width: 12px;
		fill: var(--text-color);
	}

	.report-multiselect-btn.show svg {
		transform: rotate(90deg);
	}



.report-title-bar .svg-button {
	width: 1.4rem;
	fill: var(--svg-fill-color);
}


.multiselect-selected-text {
	width: 90%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-size: 13px;
	text-align: left;
}

.report-btn {
	margin-right: 10px;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--button-hover-color);
	border-radius: 20px;
	background: var(--button-hover-color);
	color: var(--header-text-color);
	font-size: 12px;
}

	.report-btn:hover {
		border: 1px solid var(--header-bg-color);
		color: var(--header-bg-color);
		background: var(--header-text-color);
	}

.report-time-navigation {
	display: flex;
	align-items: center;
}

	.report-time-navigation span {
		width: 25px;
		cursor: pointer;
	}

		.report-time-navigation span svg {
			fill: var(--text-color);
		}

		.report-time-navigation span:last-of-type {
			margin-right: 1.5rem;
		}

		.report-time-navigation span:hover svg {
			fill: var(--header-bg-color);
		}

	.report-time-navigation .form-input {
		width: 15%;
		margin: 0 0.5rem;
		text-align: center;
	}

	.report-time-navigation .report-group-label span {
		width: auto;
		cursor: pointer;
	}

	.report-time-navigation .report-group-label input {
		width: 100%;
		margin: 0;
	}

	.report-time-navigation .report-group-label {
		margin: 0 10px;
	}


.report-title-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--header-text-color);
	background: var(--header-bg-color);
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding: 0.15rem 1.5rem;
	font-size: 13px;
}

	.report-title-bar .report-btn {
		margin-right: 0;
		background: var(--header-text-color);
		color: var(--button-hover-color);
		padding: 0.4rem 0.5rem;
		visibility: hidden;
	}

		.report-title-bar .report-btn:hover {
			border: 1px solid var(--header-text-color);
			color: var(--header-text-color);
			background: var(--header-bg-color);
		}

		.report-title-bar .report-btn.show {
			visibility: visible;
		}

/*********************** GRITTER ***************************/
#gritter-wrapper {
	z-index: 2;
	position: fixed;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	margin-top: 10px;
}

	#gritter-wrapper .alert {
		width: 60%;
	}

.account-gritter {
	top: 10%;
}

.alert p {
	margin-bottom: 0;
}

/*********************** SPECIFIC ***************************/
.message-grid {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1rem;
	height: calc(100vh - 27rem);
}

.message-day-group {
	text-align: end;
}

.row-message {
	padding: 5px 0;
}

	.row-message.right {
		justify-content: end;
	}

		.row-message.right .message-container {
			background-color: #B1CEF3
		}

	.row-message.left .message-container {
		background-color: #EFECEC
	}

.message-container {
	width: 90%;
	display: flex;
	flex-direction: column;
	padding: 5px 20px;
	border: 1px solid #807A7A;
}

.message-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 12px;
}

.message-body {
	text-justify: auto;
}

.message-text-input {
	margin-top: 1rem
}

	.message-text-input .editor-field {
		display: flex;
		align-items: end;
	}

	.message-text-input textarea {
		border: 2px solid var(--form-input-border-color);
	}

		.message-text-input textarea:focus {
			outline: none;
			border-color: var(--form-input-focus-border-color);
			transition-duration: 0.5s;
		}

	.message-text-input .svg-button {
		width: 2.75rem;
		fill: var(--pageTitle-text-color);
	}

		.message-text-input .svg-button:hover {
			width: 2.75rem;
			fill: var(--pageTitle-text-color);
		}

.container-scroll.page-scroll {
	margin-top: 5rem; /* height da headerBar + padding do form */
}

.trumbowyg-box {
	z-index: 0;
}

/* DATEPICKER */
.ui-datepicker {
	background: white;
	border: 1px solid var(--header-bg-color) !important; /*porque em cima eu fiz override a border do jquery-ui*/
	border-radius: 10px;
	padding: 5px 10px;
	display: none;
}

.ui-datepicker-header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	text-align: center;
}

	.ui-datepicker-header a {
		flex: 50%;
		cursor: pointer;
	}

		.ui-datepicker-header a:hover {
			border: 0;
		}

.ui-datepicker-title {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

	.ui-datepicker-title select {
		flex: 50 %;
		border: none;
		border-bottom: 2px solid var(--form-input-border-color);
		color: var(--text-color);
	}

.ui-datepicker-calendar {
	border-collapse: inherit;
}

	.ui-datepicker-calendar thead tr {
		color: var(--header-bg-color);
		text-align: center;
	}

	.ui-datepicker-calendar tbody tr {
		color: var(--header-bg-color);
		text-align: center;
	}

.ui-timepicker-div .ui-widget.ui-widget-content {
	border: 1px solid var(--header-bg-color);
	background: transparent;
}

.ui-timepicker-div .ui-state-default,
.ui-timepicker-div .ui-widget-content .ui-state-default,
.ui-timepicker-div .ui-widget-header .ui-state-default,
.ui-timepicker-div .ui-button,
.ui-timepicker-div html .ui-button.ui-state-disabled:hover,
.ui-timepicker-div html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}

	.ui-timepicker-div .ui-state-hover,
	.ui-timepicker-div .ui-widget-content .ui-state-hover,
	.ui-timepicker-div .ui-widget-header .ui-state-hover,
	.ui-timepicker-div .ui-button:hover {
		border: 1px solid #cccccc;
		background: var(--link-hover-color);
		font-weight: normal;
		color: var(--primary-text-color);
	}

.ui-timepicker-div .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
	border-bottom-right-radius: 3px;
}

.ui-timepicker-div .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
	border-bottom-left-radius: 3px;
}

.ui-timepicker-div .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
	border-top-right-radius: 3px;
}

.ui-timepicker-div .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
	border-top-left-radius: 3px;
}

.form-image:hover {
	cursor: pointer;
	opacity: 0.7;
}

/* TAGS INPUT */
.bootstrap-tagsinput {
	border: none;
	border-bottom: 2px solid var(--form-input-border-color);
	width: 100%;
	box-shadow: none;
	line-height: inherit;
	border-radius: 0;
	padding: 0;
}

	.bootstrap-tagsinput input {
		border: none;
		/*border-bottom: 2px solid var(--form-input-border-color);*/
		color: var(--text-color);
		margin: 0;
		padding: 0;
		/*width: 100%;*/
	}

.bootstrap-tagsinput-focus {
	outline: none;
	border-bottom: 2px solid var(--form-input-border-color);
	border-bottom-color: var(--form-input-focus-border-color);
	transition-duration: 0.5s;
}

/* The Modal (background) */
#modal-image, #modal-video {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 4; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: hidden; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

	#modal-image.show, #modal-video.show {
		display: block;
	}

/* Modal Content (image) */
.modal-image-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

/* Caption of Modal Image */
.modal-image-caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation */
.modal-image-content, .modal-image-caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(0)
	}

	to {
		-webkit-transform: scale(1)
	}
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

/* The Close Button */
.close-image-modal {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

	.close-image-modal:hover,
	.close-image-modal:focus {
		color: #bbb;
		text-decoration: none;
		cursor: pointer;
	}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
	.modal-image-content {
		width: 100%;
	}
}

/*********************** MEDIA QUERIES ***************************/
/* Large screens */
@media only screen and (min-width: 750px) {
	/* ACCOUNT VIEWS */
	.loginContainer {
		width: 40%;
	}

	.account-form span {
		font-size: 13px;
	}

	/* SIDE MENU */
	.sideMenu {
		top: 0;
		width: var(--menu-width);
		height: 100vh;
	}

		.sideMenu.expanded {
			width: var(--menu-width-expanded);
		}

	/* PAGE TITLE BAR */
	.pageTitleBar.page-scroll {
		width: calc(100% - var(--menu-width));
	}
}

/* Small screens */
@media only screen and (max-width: 750px) {
	main {
		margin: 0;
	}

	/* ACCOUNT VIEWS */
	.loginContainer {
		width: 90%;
	}

	.account-form span {
		font-size: 11px;
	}

	/* SIDE MENU */
	.sideMenu {
		/*bottom: 0;*/
		width: 50px;
		height: 4rem;
		box-shadow: 0 0 0;
		background: transparent;
		
	}

		.sideMenu.expanded {
			width: 100vw;
			height: 100%;
			background-color: var(--menu-bg-color);
		}

	.logo {
		display: none;
	}

	.nav {
		flex-direction: column;
	}

	.nav-logo {
		width: 50px;
		margin-bottom: 0px;
	}

		.nav-logo .nav-icon {
			color: var(--header-text-color);
		}

			.nav-logo .nav-icon:hover {
				color: var(--header-text-color);
			}

	.sideMenu.expanded .nav-logo {
		width: 100%;
		background: var(--header-bg-color);
	}

	.nav-icon {
		background: transparent;
	}

		.nav-icon:hover {
			background: transparent;
			color: var(--text-color);
		}

			.nav-icon:hover svg {
				fill: var(--text-color);
			}

	.nav-link {
		justify-content: center;
	}

	/* HEADER BAR */
	.header-text {
		display: none;
	}

	.headerBar img {
		margin-right: 10px;
	}

	.simulate {
		margin-right: 20px;
	}

	.logout-form {
		margin-right: 8rem;
		margin-left: 0;
	}

	/* PAGETITLE BAR*/
	.pageTitleBar {
		padding-left: 1rem;
	}

	.pageTitleButtons button {
		margin-right: 0;
	}

		.pageTitleButtons button:last-child {
			margin-right: 8rem;
		}

	/* GRID */
	.grid-content {
		overflow-x: auto;
		padding: 1rem;
		padding-top: 10rem;
	}

	.grid-helper-search-input.form-input {
		width: 200px;
	}

	.grid-helper-search .svg-button {
		width: 2rem;
		fill: var(--primary-text-color);
	}

	.grid-action {
		width: 20px;
		height: 20px;
	}

	.grid-helper-rowsPerPage {
		display: none;
	}

	/* SUBGRID */
	.subgrid-header h5 {
		margin-left: 1rem;
	}

	.subgrid-header button {
		margin-right: 5px;
		font-weight: normal;
		padding: 0.5rem 0.6rem;
		font-size: 11px;
	}

		.subgrid-header button:last-child {
			margin-right: 1rem;
		}

	/* FORM */
	.form-form {
		padding: 1rem;
		padding-top: 10rem;
	}

	.form-tabs {
		border-bottom: 0;
	}

		.form-tabs li.active, .form-tabs li.ui-state-active {
			margin-bottom: 0;
		}

		.form-tabs li {
			border-bottom: 6px solid var(--menu-bg-color);
		}

	/* FORM MODAL */
	.form-modal-container {
		width: auto !important;
		height: auto !important;
	}

	/* REPORTS */
	.reports-content {
		flex-direction: column;
		padding-top: 9rem;
	}

	.report-menu-container {
		width: 100%;
	}

	.report-graphs-container {
		width: 100%;
	}
}

.floatRight {
	float: right;
}


/*******Reports*******/


.logo_topo {
	height: 50px;
	margin-top: 10px;
	text-align: center;
}

.logo_topo_center {
	width: 100%;
	height: 50px;
	margin-top: 10px;
	text-align: center;
}

	.logo_topo_center .logo_topo img {
		height: 50px;
	}

.filtrosAno {
	float: left;
	text-align: center;
}

.navegacao {
	margin-top: 30px;
}

.navegacao_title {
	color: #19669e;
	font-size: 15pt;
}

.principal {
	float: left;
	width: 290px;
}

.subprincipal {
}

.svg_left2_arrow {
	fill: var(--primary-text-color);
}

.navegacao_anoanterior {
	float: left;
	width: 38px;
	margin-top: 2px;
	background-color: #155078;
}

	.navegacao_anoanterior:hover {
		background-color: #258ecb;
	}

.svg_right2_arrow {
	fill: var(--primary-text-color);
}

.navegacao_anoproximo {
	float: right;
	width: 38px;
	margin-top: 2px;
	background-color: #155078;
}

	.navegacao_anoproximo:hover {
		background-color: #258ecb;
	}

.svg_left_arrow {
	fill: var(--primary-text-color);
}

.navegacao_mesanterior {
	float: left;
	width: 38px;
	margin-top: 2px;
	background-color: #155078;
}

	.navegacao_mesanterior:hover {
		background-color: #258ecb;
	}

.svg_right_arrow {
	fill: var(--primary-text-color);
}

.navegacao_mesproximo {
	float: right;
	width: 38px;
	margin-top: 2px;
	background-color: #155078;
}

	.navegacao_mesproximo:hover {
		background-color: #258ecb;
	}

.filtros {
	float: right;
}

	.filtros ul {
		list-style: none;
	}


.estado {
	width: 251px;
	cursor: pointer;
	background-color: #19669e;
	text-indent: 0;
	display: inline-block;
	color: #fff;
	font-size: 15pt;
	font-style: normal;
	height: 40px;
	line-height: 40px;
	padding: 0 15px 0 15px;
	text-decoration: none;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 2px;
}

	.estado:hover {
		background-color: #237bb7;
	}

.estado2 {
	cursor: pointer;
	background-color: #19669e;
	text-indent: 0;
	display: inline-block;
	color: #fff;
	font-size: 12pt;
	font-style: normal;
	height: 25px;
	width: 215px;
	line-height: 25px;
	padding: 0 10px 0 10px;
	text-decoration: none;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 2px;
}

	.estado2:hover {
		background-color: #237bb7;
	}

.estado3 {
	cursor: pointer;
	background-color: #19669e;
	text-indent: 0;
	display: inline-block;
	color: #fff;
	font-size: 12pt;
	font-style: normal;
	line-height: 38px;
	padding: 0 20px 0 20px;
	text-decoration: none;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 2px;
}

	.estado3:hover {
		background-color: #237bb7;
	}

/*TODO confirmar png*/
.reportHelpButton {
	width: 30px;
	height: 25px;
	background: url('img/info.png') no-repeat;
	cursor: pointer;
	float: left;
}

.reportHelpButtonDisable {
	width: 30px;
	height: 25px;
	float: left;
}

.reportHelpButtonDisable {
	width: 200px;
	height: 25px;
	float: left;
}

.informacao {
	margin-top: 15px;
	margin-bottom: 5px;
	text-align: center;
	background-color: #71a1c3;
	color: white;
	font-size: 13pt;
	padding: 3px 0;
}

.graficos {
	width: 100%;
}

.categorias {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

/*******End Reports*******/


/********************************* MENU VERTICAL ****************************************/

.exportToPDF {
	background-color: #075488;
	color: #fff;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	line-height: 32px;
	padding-left: 6px;
	padding-right: 6px;
	border: none;
}

	.exportToPDF:hover {
		background-color: #62839e;
	}

.top-menu {
}


.menuvertical {
}

#menubody_vertical {
	position: relative;
	height: 40px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	text-align: left;
	font-size: 13px;
	list-style: none;
	z-index: 50;
	cursor: pointer;
}

	#menubody_vertical li, #menubody li ul li {
		height: 40px;
	}

	#menubody_vertical > li {
		width: 300px;
		margin-bottom: 5px;
		padding: 0px 15px;
		display: inline-block;
		position: relative;
		line-height: 40px;
		color: white;
		font-size: 12pt;
		font-style: normal;
		text-decoration: none;
		text-align: center;
		background-color: #19669e;
	}
		/*TODO confirmar png*/
		#menubody_vertical > li:hover {
			background-color: #237bb7;
			/*background-image: url(img/menu_hover.png);*/
			/*height:45px;*/
		}

	#menubody_vertical .menuoption {
		display: block;
		text-decoration: none;
		padding: 0px;
		color: #053253;
		text-align: left;
		max-width: 400px;
	}

		#menubody_vertical .menuoption:hover {
			background-color: transparent;
		}

	#menubody_vertical li ul {
		position: absolute;
		margin: 0px;
		padding: 0px;
		/*top: 45px;*/
		left: 0;
		min-width: 150px;
		background-color: #f0f0f0;
		list-style: none;
	}

		#menubody_vertical li ul li {
			padding: 0px;
			text-indent: 10px;
		}

	#menubody_vertical li .menuoption {
		width: 300px;
		text-decoration: none;
		text-align: center;
		color: white;
	}

	#menubody_vertical li ul li .menuoption {
		padding: 0px 15px;
		text-decoration: none;
		text-align: center;
		background-color: #19669e;
		color: white;
	}

	#menubody_vertical ul ul {
		position: relative;
		top: -40px;
		left: 150px;
		margin: 0px;
		padding: 0px;
		text-align: left;
		z-index: 200;
	}

	#menubody_vertical li li .menuoption:hover {
		background-color: #237bb7;
	}

	#menubody_vertical li li:hover {
		background: #bebebe;
	}

	#menubody_vertical li ul {
		display: none;
	}

	#menubody_vertical li:hover > ul {
		display: block;
	}

.menubody_vertical_active {
	background-color: #14cbff !important;
	color: #000 !important;
}

#menubody_vertical li .menubody_vertical_active2 {
	margin-left: -15px;
	padding: 0px 15px;
	background-color: #14cbff !important;
	color: #000 !important;
}



.liFirstSecondLevel {
	display: inline-block;
}

.divliFirstLevel {
	max-height: 100px;
}

.buttonReport {
	margin-right: 10px;
	padding: 0.6rem 0.7rem;
	border: 0;
	border-radius: 20px;
	/* box-shadow: 0px 1px 7px grey; */
	font-size: 12px;
}

	.buttonReport:not(:disabled) {
		background: var(--button-bg-color);
		color: var(--header-text-color);
	}

		.buttonReport:not(:disabled):hover {
			/*box-shadow: 0px 0px 0px grey;*/
			border: 0;
			background: var(--button-hover-color);
		}
/*************************************************************************************** FIM MENU ****************************************************************/


/*************************************************************************************** botao google ****************************************************************/
.g_id_signin iframe {
	display: initial !important;
	margin: 12px 0px 0px 0px !important;
}


.advancedLoginButtons {
	width: 300px !important;
}

.fb-login-button {
	display: initial !important;
	margin: 12px 0px 0px 0px !important;
}

.lefText {
	text-align: left !important;
}

.subtitleSubGrid {
	margin-left: 2rem;
	margin-top: -10px;
}

.managePass {
	background: var(--button-bg-color);
	color: var(--header-text-color);
	/* margin-right: 3rem; */
	padding: 0.6rem 0.7rem;
	border: 0;
	border-radius: 20px;
	box-shadow: 0px 1px 7px grey;
	font-size: 12px;
	margin-top: 5px;
}


.submitTranparent {
	width: 0px;
	height: 0px;
	background-color: transparent !important;
	color: transparent !important;
	border-color: transparent !important;
	cursor: default !important;
}

select:disabled {
	appearance: none;
}


/*********************** SLIDER ***************************/
.slide-image-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 6rem 0rem;
	padding-bottom: 5rem;
}

.image-slides {
	display: none;
	width: 80%;
	margin-left: 10%;
	text-align: center;
}

.slide-prev svg, .slide-next svg {
	fill: black;
	width: 3rem;
}

.slide-prev,
.slide-next {
	cursor: pointer;
	position: absolute;
	border-radius: 0 3px 3px 0;
}

.slide-prev {
	margin-left: 10px;
}

.slide-next {
	right: 2rem;
	border-radius: 3px 0 0 3px;
}

.slide-count {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	font-weight: bold;
}

.caption-container {
	text-align: center;
	padding: 2px 16px;
}

	.caption-container p {
		margin: 5px 0;
	}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.column {
	padding: 0;
}

	.column img {
		height: 90px;
	}

.video-frame {
	height: 550px;
}

.slide-thumbnail-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 0;
}

.slide-thumbnail-img {
	opacity: 0.6;
	cursor: pointer;
}

	.active,
	.slide-thumbnail-img:hover {
		opacity: 1;
	}

.carousel-title {
	text-align: center;
}

.carousel-body {
	color: black;
}

.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: white;
	border-style: solid;
	border-color: black;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

	.active, .dot:hover {
		background-color: black;
	}

.btnPop {
	background: var(--button-bg-color);
	color: var(--header-text-color);
	margin-top: 4%;
	margin-right: 10px;
	padding: 0.6rem 0.7rem;
	border: 0;
	border-radius: 20px;
	font-size: 12px;
}


*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

button {
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
}

body, .cd__main {
	font: normal 16px/1.5 "Inter", sans-serif;
	background: white !important;
	color: black;
	margin-bottom: 50px;
}

/* .section SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
	padding: 50px 0;
}

	.section .container {
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
		text-align: center;
	}

	.section h1 {
		font-size: 2.5rem;
		line-height: 1.25;
	}

	.section h2 {
		font-size: 1.3rem;
	}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
	position: relative;
	white-space: nowrap;
	padding: 0 10px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 320px auto;
	grid-gap: 20px;
}

	.timeline::before,
	.timeline::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 30px;
		width: 80px;
		z-index: 2;
	}

	.timeline::after {
		right: 0;
	}

	.timeline::before {
		left: 340px;
	}

	.timeline .info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20px 40px;
		color: black;
		background: black;
		white-space: normal;
		border-radius: 10px;
	}

		.timeline .info img {
			margin-bottom: 20px;
		}

		.timeline .info p {
			margin-top: 10px;
			color: #a8dadd;
		}

		.timeline .info a {
			text-decoration: none;
		}

	.timeline ol::-webkit-scrollbar {
		height: 12px;
	}

	.timeline ol::-webkit-scrollbar-thumb {
		border-radius: 92px;
		background-color: var(--primary);
	}

	.timeline ol::-webkit-scrollbar-track {
		border-radius: 92px;
		/*background-color: var(--disabled-bg-color); se quiser cor na barra onde faz o scrool*/
	}


	.timeline ol {
		font-size: 0;
		padding: 200px 0;
		width: 1500px;
		transition: all 1s;
		overflow-x: scroll;
		-ms-scroll-snap-type: x mandatory;
		scroll-snap-type: x mandatory;
	}

		.timeline ol li {
			position: relative;
			display: inline-block;
			list-style-type: none;
			width: 160px;
			height: 5px;
			background: var(--button-bg-color);
			scroll-snap-align: start;
		}

			.timeline ol li:last-child {
				width: 340px;
			}

			.timeline ol li:not(:first-child) {
				margin-left: 14px;
			}

			.timeline ol li:not(:last-child)::after {
				content: "";
				position: absolute;
				top: 50%;
				left: calc(100% + 1px);
				bottom: 0;
				width: 16px;
				height: 16px;
				transform: translateY(-50%);
				border-radius: 50%;
				z-index: 1;
				background: var(--button-bg-color);
			}

			.timeline ol li div {
				position: absolute;
				left: calc(100% + 7px);
				width: 200px;
				padding: 15px;
				font-size: 1rem;
				white-space: normal;
				color: black;
				background: lightgrey;
				border-radius: 0 10px 10px 10px;
			}

				.timeline ol li div::before {
					content: "";
					position: absolute;
					top: 100%;
					left: 0;
					width: 0;
					height: 0;
					border-style: solid;
				}

			.timeline ol li:nth-child(odd) div {
				top: -16px;
				transform: translateY(-100%);
				border-radius: 10px 10px 10px 0;
			}

				.timeline ol li:nth-child(odd) div::before {
					top: 100%;
					border-width: 8px 8px 0 0;
					border-color: lightgrey transparent transparent transparent;
				}

			.timeline ol li:nth-child(even) div {
				top: calc(100% + 16px);
			}

				.timeline ol li:nth-child(even) div::before {
					top: -8px;
					border-width: 8px 0 0 8px;
					border-color: transparent transparent transparent lightgrey;
				}

	.timeline time {
		display: block;
		font-size: 1.4rem;
		font-weight: bold;
		margin-bottom: 8px;
	}