@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;
	--primary: #4868F4;
	--primary-hover: #4879F4;
	--black: #434343;
	--white: white;
	--dark-grey: #6F6F6F;
	--grey: #A0A0A0;
	--light-grey: #dee2e6;
	--transition-speed: 600ms; /* velocidade de transição das animações */
	--text-color: var(--dark-grey);
	/* 
		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: var(--light-grey); /* cor de fundo do menu */
	--header-bg-color: var(--primary); /* cor do fundo da header bar e cor principal da aplicação */
	/*
		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: var(--black);
	--button-bg-color: var(--primary);
	--button-hover-color: var(--primary-hover);
	--tab-color: var(--primary);
	--link-hover-color: var(--primary);
	--header-text-color: var(--white); /* cor do texto da header bar */
	--pageTitle-bg-color: var(--light-grey); /* cor do fundo da pageTitleBar*/
	--pageTitle-text-color: var(--black); /* cor do texto da pageTitleBar */
	--svg-fill-color: var(--white); /* cor dos icons svg */
	--svg-bg-color: var(--primary); /* cor de fundo dos icons svg */

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

	--secondary-text-color: var(--grey);
	/*
		subtitulo da pageTitleBar
		cor dos cabeçalhos das grids
	*/

	--form-label-text-color: var(--black);
	--form-input-border-color: #e6e6e6;
	--form-input-focus-border-color: #8c8c8c;
	--disabled-bg-color: var(--grey);
	/*cor dos textos nas disabled*/
	--tabDisabled-text-color: var(--grey);
}

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 ***************************/

/*Packagelist*/
.row-namari {
	padding: 75px 0;
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	align-items: center;
	justify-content: center;
}

.section-heading {
	padding: 0 0 15px 0;
	width: 100%;
}

.section-title {
	font-size: 34px;
	font-weight: 700;
	color: var(--black);
}

.secondary-color {
	background-color: #f5f5f5;
}

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

.pricing-block-content {
	background: #fff;
	padding: 25px 0 25px 0;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
	transition: all 0.2s ease-in-out 0s;
	position: relative;
	border: 10px solid #fff;
}

.pricing-block-col {
	flex: 0 0 auto;
	width: 30%;
}

.pricing-block ul {
	list-style: none;
	margin: 25px 0 25px 0;
}

.pricing-block li {
	padding: 14px 0;
	border-bottom: 1px dotted #e1e1e1;
}

	.pricing-block li:last-of-type {
		border: none;
	}

.pricing-block h3 {
	font-size: 17px;
	text-transform: uppercase;
	padding-bottom: 0;
}

.pricing-sub {
	font-style: italic;
	color: #ccc;
	margin: 0 0 25px 0;
}

/*Price*/

.pricing {
	background: #f5f5f5;
	padding: 25px;
	position: relative;
}

.price {
	display: inline-block;
	font-size: 62px;
	font-weight: 700;
	position: relative;
	color: var(--black);
}

	.price span {
		position: absolute;
		top: 0;
		left: -20px;
		font-size: 22px;
	}

.pricing p {
	font-style: italic;
	color: #b4b4b4;
	line-height: auto;
	margin: 0;
}

#pricing > .row-namari > span {
	color: var(--primary);
}

	#pricing > .row-namari > span:hover {
		text-decoration: underline;
	}

/**/

input[readonly]:not(.account-input) {
	pointer-events: none; /* disables mouse clicks */
	color: var(--disabled-bg-color);
}
.form-label:has(+ input[readonly]) {
	color: var(--disabled-bg-color);
}

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);
	}

.showCookiePreferences {
	display: none;
}

.width70px {
	width: 70px;
}


.top25px {
	margin-top: 25px;
}

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


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

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

.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
}


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


.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:not(.searchForDropDownEnabled) {
		color: var(--disabled-bg-color);
	}

input.form-input, textarea.form-input {
	width: 100%;
	background-color: transparent;
}
	/* campos .searchForDropDownEnabled aparecem enabled, apenas estão disabled para não se editar texto na TextBox */
	input.form-input:disabled:not(.searchForDropDownEnabled), textarea.form-input:disabled,
	div.trumbowyg-disabled .trumbowyg-editor /*TEMP porque as trumbowyg não são input mas uma div com esta classe*/ {
		color: var(--disabled-bg-color);
	}

.form-label:has(+ input.form-input:disabled:not(.searchForDropDownEnabled)),
.form-label:has(~ textarea.form-input:disabled), /*os labels dos textareas têm ainda a div de contagem de caracteres antes do campo disabled*/
.form-label:has(+ select.form-input:disabled:not(.searchForDropDownEnabled)),
.form-label:has(~ div.trumbowyg-disabled) /*TEMP porque as trumbowyg não são input mas uma div com esta classe*/ {
	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: '*';
}

.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);
	}

.encriptKeyLabel {
	text-align: left;
	width: 100%;
}

.encriptKeyContainer {
	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;
	width: 90%;
	padding: 30px 30px 30px 30px;
}

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

	.encriptKeyContainer h4 {
		color: var(--secondary-text-color);
	}

.encriptKeyTitle {
	width: 100%;
}

.encriptKeyButtons {
	width: 300px !important;
	margin-top: 20px;
}

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

/*********************** 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: var(--white);
	border: 1px solid var(--white);
	border-radius: 20px;
	padding: 30px 30px 30px 30px;
}

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

	.loginContainer h4 {
		color: var(--secondary-text-color);
	}

/*.loginAppLogo {
    margin-bottom: auto;
    margin-top: 20px;
}*/

.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;
	flex-direction: column;
	align-items: center;
	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 {
	max-width: 8rem;
	margin-bottom: 20px;
}

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

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

.passwordText {
	text-security: disc;
	-webkit-text-security: disc;
	-moz-text-security: disc;
}

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

.sideMenu {
	position: fixed;
	background-color: var(--menu-bg-color);
	transition: width 600ms ease;
	box-shadow: 2px 0 10px grey;
	z-index: 4;
	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: var(--black); /* 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(../images/menu.svg);
}

	.nav-logo-content.expanded {
		content: url(../images/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: var(--white);
	}

		.nav-icon:hover svg {
			fill: var(--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 {
		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;
		height: 2.75rem;
		margin-right: 5px;
		cursor: pointer;
	}

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

	.logo h1 {
		font-size: 2rem;
	}

	.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;
	align-items: center;
}

	.headerMessages span {
		font-size: 13px;
	}

.language-select {
	right: 7rem;
	top: 50px;
	position: absolute;
	background: var(--white);
	color: var(--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);
	}

.dinamicSearchButton {
	background-color: white;
	color: black;
	padding: 0.1rem 0.7rem;
	border: black;
	border-radius: 20px;
	font-size: 12px;
	border-style: solid;
	border-width: 1px;
}


.dinamicSearchButtonSelect {
	border: var(--button-bg-color);
	color: var(--button-bg-color);
	background-color: white;
	padding: 0.1rem 0.7rem;
	border-radius: 20px;
	font-size: 12px;
	border-style: solid;
	border-width: 1px;
}

.gridDinamicSearchRow {
	margin-top: 10px;
}


.breadCrum {
	height: 1rem;
	width: 100%;
	background-color: var(--pageTitle-bg-color);
	display: flex;
	position: fixed;
	top: 4rem;
	align-items: center;
	padding-left: 3rem;
	z-index: 3;
}

.breadcrumTxt {
	font-size: 10px;
	margin: 0;
	color: var(--pageTitle-text-color);
	position: relative;
	top: 5px;
}

/* 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-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		margin-top: 0;
		/*margin-top: 20px;*/
		color: var(--pageTitle-text-color);
		font-size: 16px;
	}


	.pageTitleBar h4 {
		margin: 5px 0 0 0;
		color: var(--dark-grey);
		font-size: 12px;
		font-weight: normal;
		display: flex;
		column-gap: 2rem;
	}

.pageTitle {
	margin-right: auto;
}

.pageTitleButtons {
	display: flex;
	margin-left: auto;
	align-items: center;
}

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

		.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-of-type, .pageTitleButtons a:last-child {
		margin-right: 8rem;
	}

.subtitle {
	line-height: normal;
	font-size: 1rem;
	margin: 0;
}

/* MAIN */
.row-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
/*********************** GRID ***************************/
.table > :not(caption) > * > *, 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('../images/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: var(--light-grey); /* 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 {
	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);
	padding: 0;
}

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

	.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;
}

.grid-imagePreview {
	max-width: 100px;
	max-height: 100px;
}

.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);
	}

.table-legend {
	font-size: 12px;
	font-weight: normal;
	/*color: #5d5d5d;*/
	margin-top: 5px;
	display: flex;
	flex-flow: row;
	gap: 15px;
}

.table-legend-text {
	/*float: left;*/
	margin-top: 2px;
}

.table-legend-color {
	width: 20px;
	height: 20px;
	/*float: left;
    margin-left: 7px;
    margin-right: 5px; */
}

/* 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;
}

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

.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: 5; /* Sit on top */
		display: flex;
		flex-direction: column;
	}

	#dialog-modalSecondLevel.show {
		position: fixed; /* Stay in place */
		z-index: 6; /* 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%);
	max-width: 100%;
}

.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: var(--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);
		}

.form-modal-dropdown-btn {
	padding: .375rem .75rem;
	border-radius: 10px;
	margin-left: 10px;
	background-color: transparent;
	color: var(--primary);
	border: 1px solid var(--primary);
}

	.form-modal-dropdown-btn svg {
		width: 1rem;
		fill: var(--primary);
	}

	.form-modal-dropdown-btn:hover {
		background-color: var(--primary);
		color: var(--white);
	}

		.form-modal-dropdown-btn:hover svg {
			fill: var(--white);
		}

/* 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: var(--black);
		text-decoration: none;
	}

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

/*********************** ALERTAS ***************************/
.alertIncoherenceNotification {
	display: none;
	right: 11rem;
	top: 4rem;
	position: fixed;
	width: 250px;
	max-height: 400px;
	border: 1px solid var(--primary);
	border-top: 0;
	z-index: 3;
	overflow-y: auto;
	background-color: var(--white);
}

	.alertIncoherenceNotification.show {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
	}

.notification-title {
	color: var(--primary);
	cursor: pointer;
	flex: 1;
	padding: 5px 0;
}

	.notification-title.active, .notification-title:hover {
		color: var(--white);
		background-color: var(--primary)
	}

.notification-container {
	width: 100%;
	text-align: start;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
}

.notification-container-row {
	padding-left: 10px;
	padding-top: 5px;
	display: flex;
	flex-direction: column;
}

	.notification-container-row:hover {
		background-color: var(--light-grey);
	}

	.notification-container-row:not(:last-child) {
		border-bottom: 1px solid var(--light-grey);
	}

.notification-container-title {
	font-family: "Poppins-SemiBold";
}

.notification-container-body {
	font-size: 13px;
	margin-bottom: 5px;
}

.form-modal-container.sk-alert {
	position: fixed;
	z-index: 3;
	top: auto;
	left: auto;
	right: 1rem;
	bottom: 1rem;
	transform: none;
}

	.form-modal-container.sk-alert.anim {
		animation-name: alert-anim;
		animation-duration: 0.5s;
	}

	.form-modal-container.sk-alert .form-modal-footer {
		justify-content: center;
	}

.remind-minutes {
	display: none;
	position: absolute;
	flex-direction: column;
	margin-left: 24rem;
	margin-top: -15.9rem;
}

	.remind-minutes.show {
		display: flex;
		background-color: var(--white);
		border: 1px solid var(--primary);
	}

.remind-btn {
	background: var(--header-text-color);
	color: var(--primary);
	padding: .375rem .75rem;
	border: 0;
}

	.remind-btn:hover {
		cursor: pointer;
		background: var(--button-bg-color);
		color: var(--header-text-color);
	}

@keyframes alert-anim {
	0% {
		display: none;
		right: -50rem;
	}

	100% {
		display: block;
		right: 1rem;
	}
}
/*********************** 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 var(--dark-grey);
	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(--header-bg-color);
	border-radius: 20px;
	background: var(--button-hover-color);
	color: var(--header-text-color);
	font-size: 12px;
}

	.report-btn:hover {
		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: 7;
	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 ***************************/
.container-scroll.page-scroll {
	margin-top: 5rem; /* height da headerBar + padding do form */
}

.trumbowyg-button-pane {
	z-index: 1 !important;
}

#calender2 {
	width: 220px;
	margin: 0 auto;
	font-size: 10px;
	height: 200px;
}

/* SPINNER LOADING */
.loading-spinner {
	/* change color here */
	color: var(--primary);
}

	.loading-spinner,
	.loading-spinner div {
		box-sizing: border-box;
	}

.loading-spinner {
	width: 40px;
	height: 40px;
	margin: auto;
}

	.loading-spinner div {
		box-sizing: border-box;
		display: block;
		position: absolute;
		width: 32px;
		height: 32px;
		margin: 4px;
		border: 4px solid var(--primary);
		border-radius: 50%;
		animation: loading-spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
		border-color: var(--primary) transparent transparent transparent;
	}

		.loading-spinner div:nth-child(1) {
			animation-delay: -0.45s;
		}

		.loading-spinner div:nth-child(2) {
			animation-delay: -0.3s;
		}

		.loading-spinner div:nth-child(3) {
			animation-delay: -0.15s;
		}

@keyframes loading-spinner {
	0% {
		transform: rotate(0deg);
	}

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

/* DATEPICKER */
.ui-datepicker {
	background: var(--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 var(--grey);
	background: var(--light-grey);
	font-weight: normal;
	color: var(--black);
}

	.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 var(--light-grey);
		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;
}

/* PREVIEW DAS IMAGENS DOS FORMS */
/* The Modal (background) */
#modal-image {
	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: auto; /* 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 {
		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: var(--grey);
	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: var(--light-grey);
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

	.close-image-modal:hover,
	.close-image-modal:focus {
		color: var(--grey);
		text-decoration: none;
		cursor: pointer;
	}

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

/* Organograma */
.orgChart {
	/*height: 100%;*/
	display: grid;
	grid-row-gap: 2rem;
	grid-column-gap: 1rem;
	justify-items: center;
	justify-content: center;
	position: relative;
	width: 50%;
}

.node-connector {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	/*pointer-events: none;*/
}

	.node-connector line {
		stroke-width: 2px;
		stroke: var(--grey);
		opacity: 0.5;
	}

		.node-connector line.faded {
			opacity: 0.2;
		}

		.node-connector line.highlighted {
			stroke: var(--black);
			opacity: 1;
		}

	.node-connector marker path {
		fill: var(--black);
	}

.graph-node-content {
	z-index: 2;
	display: flex;
	flex-direction: column;
	border: 3px solid var(--primary);
	border-radius: 15px;
	margin: 0 0 20px 0;
	padding: 10px;
	font-size: 13px;
	justify-content: center;
	background: var(--primary);
	color: var(--white);
}

	.graph-node-content.active, .graph-node-content:hover {
		background-color: var(--white);
		cursor: pointer;
	}

		.graph-node-content.active .graph-node-title, .graph-node-content:hover .graph-node-title {
			color: var(--primary);
		}

.graph-node-title {
	font-weight: bold;
}

.graph-node-text {
	font-size: 12px;
	color: var(--grey);
	align-self: start;
}

/*********************** 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;
		width: 100%;
	}

	.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 */
	#dialog-modal, #dialog-modalSecondLevel {
		margin: 0;
		width: 100%;
	}

	.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%;
	}

	/* PLANOS */
	.row-namari {
		flex-direction: column;
	}

	.pricing-block-col {
		width: 90%;
	}
}

@media screen and (max-width: 1200px) {
	h5.subtitle {
		display: none;
	}

	.pageTitleButtons > button {
		padding: .5rem .6rem;
		font-size: 10px;
	}

	.pageTitleButtons button:first-child {
		margin-left: 20px;
	}

	.pageTitleBar {
		height: 5rem;
	}
}


@media screen and (max-width: 768px) {

	.pageTitleBar {
		height: 5rem;
	}

	.pageTitleButtons {
		display: flex !important;
		column-gap: 5px;
	}

	.collapsibleButtons {
		display: none;
	}

	h5.subtitle {
		display: none;
	}

	.hamburger-icon {
		display: block;
		content: url(img/menu.svg);
		width: 2rem;
		margin-right: 1rem;
	}


	.overflow-menu {
		position: absolute;
		top: 100%;
		right: 0;
		width: 170px;
		background: var(--button-bg-color);
		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
		z-index: 1000;
		border: 1px solid var(--light-grey);
	}

		.overflow-menu.active {
			display: block;
		}

		.overflow-menu button {
			width: 100%;
			text-align: left;
			padding: 6px;
			border-radius: 0px;
			border-top: 1px solid var(--light-grey);
			font-size: 10px;
		}

		.overflow-menu a {
			width: 100%;
			text-align: left;
			padding: 6px;
			border-radius: 0px;
			border-top: 1px solid var(--light-grey);
			font-size: 10px;
		}

	.pageTitleButtons button:first-child {
		margin-left: 0px;
	}

	.pageTitleButtons > button:last-of-type {
		margin-right: 1rem;
	}
}

/********************************* CSS DOS REPORTS/GRAFICOS ANTIGOS ****************************************/
.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;
}


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

.subprincipal {
}

.filtros {
	float: right;
}

	.filtros ul {
		list-style: none;
	}


.estado {
	width: 251px;
	cursor: pointer;
	background-color: #19669e;
	text-indent: 0;
	display: inline-block;
	color: var(--white);
	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: var(--white);
	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;
	}

.exportToPDF {
	background-color: #075488;
	color: var(--white);
	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: var(--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(../images/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: var(--light-grey);
		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: var(--white);
	}

	#menubody_vertical li ul li .menuoption {
		padding: 0px 15px;
		text-decoration: none;
		text-align: center;
		background-color: #19669e;
		color: var(--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: var(--black) !important;
}

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



.liFirstSecondLevel {
	display: inline-block;
}

.divliFirstLevel {
	max-height: 100px;
}


/*************************************************************************************** FIM CSS DOS REPORTS/GRAFICOS ANTIGOS ****************************************************************/



/*************************************************************************************** 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;
}


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: var(--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: var(--black);
}

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

	.active, .dot:hover {
		background-color: var(--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;
}


/* 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: var(--black);
		white-space: normal;
		border-radius: 10px;
		width: max-content;
	}

		.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: var(--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;
	}

/*********************** 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;
}

#paymentComprovative {
	visibility: hidden;
}

/*Menu hamburguer (botões de estado)*/
.hasSubtitle {
	height: 6rem;
}

.nav-container {
	display: flex;
	position: relative;
}


.hamburger-icon {
	display: none;
	cursor: pointer;
}

	.hamburger-icon span {
		display: block;
		width: 25px;
		height: 3px;
		background-color: #333;
		margin: 5px 0;
		transition: 0.3s;
	}

.overflow-menu {
	display: none;
}

.collapsibleButtons {
	display: flex;
	align-items: center;
}