:root {
  font-size: 16px;
  --container-height: 0px;

  --primary-color: #235b84;
  --primary-color-light: #2c72a5;
  --white: #FFF;

  --black2: #151515;
  --black: #24292E;
  --blacklight: #353535;

  --graydark2: #555555;
  --graydark: #9B9B9B;
  --gray: #B6B6B6;
  --graylight: #D1D1D1;
  --graylight2: #E7E7E7;
  --graylight3: #f5f5f5;
  --graylight4: #f9f9f9;

  --reddark: #b60000;
  --red: #c43232;
  --redlight: #d36666;
  --redlight2: #e9b2b2;

  --warning: #ff7306;
  --info: #4fb9e5;
  --success: #198754;
  --successlight: #d9f8ea;
  --error: #DC3545;
  --errorlight: #f2b7bd;

  --greendark: #198754;
  --green: #469f76;
  --greenlight: #75b798;
  --greenlight2: #97c8b1;
  --greenlight3: #daebe3;
  --greenlight4: #f7fbf9;

  --purpledark: #866794;
  --purple: #A881BA;
  --purplelight: #c2a6ce;

  --bluedark: #1e97ca;
  --blue: #4fb9e5;
  --bluelight: #72c7ea;
  --bluelight2: #c6e8f6;
  --bluelight3: #e8f6fb;
  --bluelight4: #f9fdfe;

  --orangedark: #bf5a0b;
  --orange: #ff7306;
  --alert: #ff7306;

  --orangelight: #ffad6c;
  --orangelight2: #ffdfc6;
  --orangelight4: #fff2e8;

  --beigedark: #9e8568;
  --beige: #b29e87;
  --beigelight: #d0c4b6;

  --table-columns: '1fr 1fr';
  --table-header-color: var(--graydark2);
  --toggleColor: var(--primary-color);

  --modal-side-width: 0px;

  --highLevel: 99999;
  /* navbar, header */
  --midLevel: 9999;
  /* modal */
  --lowLevel: 999;
  /* tooltip, autocompleta */
  --autocompletaColor: var(--primary-color);
  --radioColor: var(--primary-color);

  --index-menuMobile: 9999;
  --index-expanded-card: 9999999; /* 7 */
  --index-modal: 99999999; /* 8 */
  --index-popup: 999999999; /* 9 */

  --cor-risco-fisico: #299E8C;
  --cor-risco-fisico-dark: #248a7a;

  --cor-risco-quimico: #FF5E55;
  --cor-risco-quimico-dark: #ff463c;

  --cor-risco-biologico: #80171B;
  --cor-risco-biologico-dark: #6a1316;

  --cor-risco-ergonomico: #F5AE52;
  --cor-risco-ergonomico-dark: #f4a33a;

  --cor-risco-acidentes: #30A6D4;
  --cor-risco-acidentes-dark: #2897c2;
}

@font-face {
  font-family: Montserrat;
  src: url(../../../include/estilos/fontes/Montserrat-Regular.ttf);
}

@font-face {
  font-family: Montserrat-Bold;
  src: url(../../../include/estilos/fontes/Montserrat-Bold.ttf);
}

@font-face {
  font-family: Montserrat-Italic;
  src: url(../../../include/estilos/fontes/Montserrat-Italic.ttf);
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes slide-from-right {
  0% { 
      width: 0px;
      opacity: 0;
  }
  100% { 
      width: var(--modal-side-width);
      max-width: 90vw;
      opacity: 1;
  }
}

@keyframes slide-from-right {
  0% { 
      width: 0px;
      opacity: 0;
  }
  100% { 
      width: var(--modal-side-width);
      max-width: 90vw;
      opacity: 1;
  }
}


* {
  box-sizing: border-box !important;
  font-family: Montserrat;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  outline: 1px solid var(--primary-color);
  background-color: var(--primary-color);
  background: var(--primary-color);
}

*::-webkit-scrollbar {
  background-color: transparent;
}

*::-webkit-scrollbar-thumb {
  min-height: 30%;
}

*::-webkit-scrollbar {
  width: 4px;
}

*::-webkit-scrollbar-thumb:horizontal {
  min-width: 30%;
}

*::-webkit-scrollbar:horizontal {
  height: 6px;
}

a {
  	text-decoration: none;
	color: unset;
}

a:active {
	color: unset;
}

body {
	overflow-y: hidden !important;
	margin: 0px;
	padding: 0px;
	border: 0px;
}
body > #container {
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	padding-inline: 20px;
	margin-top: 10px;
}

body > #container > iframe {
	width: 100%;
	height: calc(100% - 10px);
}

iframe {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

.body-blocked {
  opacity: 0.2;
  filter: grayscale(1);
  pointer-events: none !important;
  transition: all 1.2s;
}

.no-overflow {
  overflow: hidden !important;
}

.d-grid {
	display: grid !important;
	gap: 10px;
	align-items: center;
}
.d-grid.center{
	justify-content: center;
}

.d-grid.right{
	justify-content: right;
}

.d-flex {
	display: flex !important;
	gap: 10px;
	align-items: center;
}
.d-flex.center{
	justify-content: center;
}

.d-flex.right{
	justify-content: right;
}

.d-flex.space-between{
	justify-content: space-between;
}
.d-none {
  display: none !important;
}

.d-unset {
  display: unset !important;
}

.d-compress {
    min-height: 0px !important;
    max-height: 0px !important;
    height: 0px !important;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 0px !important;
    box-shadow: unset !important;
    border: 0px !important;
    transition: all 0.15s !important;
}

.d-compress * {
    min-height: 0px !important;
    max-height: 0px !important;
    height: 0px !important;
}

.glass-effect {
	backdrop-filter: blur(6px) !important;
	-webkit-backdrop-filter: blur(6px) !important;
	background-color: rgba(235, 235, 235, 0.6) !important;
	border: 1px solid rgba(210, 210, 210, 0.3)
}

#company-badge {
	margin-inline: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid var(--graylight3);
	transition: all 0.5s;
}

#company-badge > div {
	border: 1px solid var(--white);
	border-radius: 10px;
	transition: all 0.5s;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-weight: bold;
	font-size: 0.8rem;
	color: var(--graydark2);
	padding-inline: 5px;
}

/* media control */

@media screen and (min-width: 1081px) {
	#company-badge:has(div:hover) {
		border-bottom: 1px solid var(--white);
		transition: all 0.5s;
	}

	#company-badge > div:hover {
		border: 1px solid var(--graylight2);
		background-color: var(--graylight3);
		font-size: 0.9rem;
		color: var(--primary-color);
		transition: all 0.5s ease-in-out;
		padding-inline: 30px;
	}

	#company-badge > div:active {
		background-color: var(--graylight2);
		transition: all 0.25s;
	}

	#container {
		--container-height: calc(100dvh - 160px);
		height: var(--container-height) !important;  /* OK - cuidado */
	}

	body:has(#company-badge) #container {
		--container-height: calc(100dvh - 220px);
		height: var(--container-height) !important;  /* OK - cuidado */
	}
	
	.desktop-hide {
		display: none !important;
	}
}

@media screen and (max-width: 1080px) {
	#container {
		--container-height: calc(100dvh - 90px) ;
		height: var(--container-height) !important;  /* OK - cuidado */
		padding-bottom: 50px;
	}
	
	#container:has(> iframe) {
		padding-bottom: unset;
		padding-inline: unset;
	}

	body:has(#company-badge) #container {
		--container-height: calc(100dvh - 151px);
		height: var(--container-height) !important;  /* OK - cuidado */
	}

	.mobile-hide {
		display: none !important;
	}
}

/*  
----------------------------------- cabeçalho e rodapé
*/
#header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	margin: 10px;
	border-radius: 10px;
	padding: 10px;
	max-height: 100px;	
}

#header > * {
	min-width: 125px !important;
}

#header > .right {
	display: flex;
	justify-content: right;
}

#header .logo {
	min-height:  70px;
	width: 125px !important;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% auto;
}

#header .title{
	color: var(--primary-color); 
	font-size: 2.5rem;
	font-weight: bold;
}

#header .subtitle{
	color: var(--primary-color); 
	font-size: 1.3rem; 
}

#header .main {
	display: flex;
	gap: 20px;
	align-items: center;
}

#header .main a:last-child {
	display: grid;
	gap: 10px;
	justify-content: center;
	text-align: center;
}

#header .button {
	width: 50px;
	height: 50px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 30px;
}

#footer {
	height: 40px;
	display: flex;
	justify-content: center;
	gap: 5px;
	align-items: center;
	font-size: 0.8rem;
	border-top: 1px solid var(--graylight2);
	text-align: center;
	color: var(--graydark);
	cursor: default;
}

#footer * {
	color: var(--graydark);
}

#footer a:hover {
	color: var(--primary-color);
}

@media only screen and (max-width: 1080px) {
	#header {
		height: 70px !important;
		padding: 5px !important;

	
  	}
	#header > * {
		min-width: 100px !important;
	}

	#header .button {
		width: 40px;
		height: 40px;
		background-size: 25px;
	}

	#header .title {
		font-size: 1.2rem !important;
	}

	#header .subtitle {
		font-size: 0.8rem !important;
	}

	#header .main a:last-child {
		gap: 5px !important;
	}

	#header .logo {
		height: 50px !important;
		width: 100px !important;
	}

	#footer {
		display: none;
	}
}

/* 
------------------ tooltip
*/

.tooltip {
	position: relative;
}

.tooltip:hover  > .legend {
	display: block;
	position: absolute;
	background-color: var(--black);
	color: var(--white) !important;
	padding: 10px !important;
	width: max-content;
	border-radius: 2.5px;
	z-index: var(--midLevel);
	font-size: 0.7rem;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	top: -13px;
	right: 33px;
}

.tooltip:hover  > .legend::before {
	content: '';
	width: 13px;
	height: 13px;
	background-color: var(--black);
	position: absolute;
	rotate: 45deg;
	z-index: var(--lowLevel);
	border-radius: 0 2.5px 0 0;
	right: -6.5px;
}

.tooltip.right:hover > .legend {
	left: 33px;
}

.tooltip.right:hover > .legend::before {
	left: -6.5px;
}

.tooltip > .legend {
	display: none;
}

/* 
------------------------------ MENU LATERAL
*/

.modal-menu-container .section {
	padding: 10px;
	display: grid;
	gap: 10px;
}

.modal-menu-container .section.list {
	gap: 0px;
}

.modal-menu-container .section.list .button {
	margin: 5px 10px;
}

.modal-menu-container .section.list .button[disabled] {
	filter: grayscale(1) !important;
	color: var(--white);
	background-color: var(--graylight);
	border: var(--graylight);
	cursor: default;
	pointer-events: none;
}

.modal-menu-container .section .row {
	display: grid;
	grid-template-columns: 80px auto;
	align-items: center;
	gap: 10px;
}

.modal-menu-container .section .row * {
	font-size: 0.9rem;
}

.modal-menu-container .section .row label {
	font-weight: bold;
	text-align: right;
}

.modal-menu-container .section .row label::after{
	content: ":";
}

/* 
-------------------- PASSWORD
*/

#popup-password {
	.criteria-warnings {
		color: var(--gray);
  		font-size: 0.8rem;
	}

	.criteria-warnings * {
		color: var(--gray);
		  font-size: 0.8rem;
	}

	.criteria-warnings li {
		color: var(--red);
		transition: all 0.5s;
	}

	.criteria-warnings li.success {
		color: var(--green);
		transition: all 0.5s;
	}
}

#popup-password  .main {
	margin-top: 10px;
}

#popup-password .row {
	margin-bottom: 5px;
	display: grid;
	gap: 3px;
}

#popup-password  .row label {
	font-size: 0.9rem !important;
}

#popup-password  input {
	text-security: disc; 
	-webkit-text-security:disc;
}

#popup-password #password-strength .response {
	display: flex;
	gap: 10px;
	align-items: center;
}

#popup-password #password-strength .response .bar {
	background-color: var(--graylight2);
	width: 100%;
	height: 5px;
	border-radius: 3px;
}

#popup-password #password-strength .response .bar > div {
	height: 100%;
	border-radius: 3px;
	min-width: 5px;
	width: 0%;
	background-color: var(--red);
	transition: all 1s;
}

#popup-password #password-strength .response .bar > div[data-status='green'] {
	background-color: var(--green);
}

#popup-password #password-strength .response .bar > div[data-status='red'] {
	background-color: var(--red);
}

#popup-password #password-strength .response .bar > div[data-status='orange'] {
	background-color: var(--orange);
}

#popup-password #password-strength .response .percent {
	font-weight: bold;
	font-size: 0.8rem;
}

#popup-password #password-strength .response .percent::after {
	content: "%";
}

/* 
  -------------------------- toast
*/

.content-toast {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 9999999999 !important;
}

.toast-hyb {
	width: 450px;
	border-radius: 10px;
	margin-bottom: 10px;
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.43);
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid var(--gray);
	background-color: var(--white);
}

.toast-hyb > .header {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-radius: 8px 8px 0 0;
	background: var(--gray);
	color: var(--white) !important;
	font-weight: bold;
	cursor: default;
}

.toast-hyb > .header * {
	font-size: 1rem !important;
}

.toast-hyb > .header path {
	fill: var(--white) !important;
}

.toast-hyb > .header div, 
.toast-hyb > .header span {
	color: var(--white) !important;
}

.toast-hyb > .header > div:nth-child(2) {
	cursor: pointer;
}

.toast-hyb > .body {
	padding: 15px 10px;
	background-color: var(--white);
	border-radius: 0px 0px 10px 10px;
	max-height: 60dvh;
	overflow-y: overlay;
	font-size: 0.9rem !important;
}

.toast-hyb > .body * {
	font-size: 0.9rem !important;
}

.toast-hyb.danger {
	border-color: var(--error);
}

.toast-hyb.danger > .header {
	background: var(--error);
}

.toast-hyb.danger > .body::-webkit-scrollbar-thumb {
	outline: 1px solid var(--error);
	background-color: var(--error);
}

.toast-hyb.success {
	border-color: var(--success);
}

.toast-hyb.success > .header {
	background: var(--success);
}

.toast-hyb.success > .body::-webkit-scrollbar-thumb {
	outline: 1px solid var(--success);
	background-color: var(--success);
}

.toast-hyb.warning {
	border-color: var(--warning);
}

.toast-hyb.warning > .header {
	background: var(--warning);
}

.toast-hyb.warning > .body::-webkit-scrollbar-thumb {
	outline: 1px solid var(--warning);
	background-color: var(--warning);
}

.toast-hyb.info {
	border-color: var(--info);
}

.toast-hyb.info > .header {
	background: var(--info);
}

.toast-hyb.info > .body::-webkit-scrollbar-thumb {
	outline: 1px solid var(--info);
	background-color: var(--info);
}

@media screen and (max-width: 1080px) {
	.content-toast {
		top: 10px;
		right: 10px;
		left: 10px;
		width: calc(100vw - 20px);
	}

	.toast-hyb {
		width: 100%;
		background: none;
	}

	.toast-hyb > .header {
		padding: 15px;
	}

	.toast-hyb > .header  * {
		font-size: 1.2rem;
	}
}