/* 

0 - Imports & root
1 - Estruturais
2 - Blocos
3 - Botão / Button
4 - Forms & Inputs
5 - Carousel, Table & Tooltip
6 - Textos
7 - Imagem
8 - @media

*/

/* 0 - Imports & root */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css");
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/bold/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/duotone/style.css');

:root {
   /* Cores: */
   --cor-azul: rgba(18, 131, 179, 1);
   --cor-cinza: rgba(204, 206, 206, 1);
   --cor-Laranja: rgba(245, 135, 42, 1);
   --cor-verde: rgba(76, 189, 145, 1);
   --cor-vermelho: rgba(248, 69, 69, 1);
}

:root,
:root.light {
   --color-bg: #f5f5f5;
   --color-mg: rgba(254, 254, 254, 1);
   --color-fg: #1f1f1f;
}

:root.dark {
   --color-bg: #343434;
   --color-mg: #404040;
   --color-fg: #ffffff;

   --cor-azul: rgb(102, 208, 253);
   --cor-cinza: rgb(49, 49, 49);
}

/* 1 - Estruturais */
body {
   width: 100vw;
   height: 100vh;
   overflow-x: hidden;
   overflow-y: hidden;
   position: relative;
   top: 0;
   left: 0;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 19.36px;
   color: var(--color-fg);
}

/* 2 - Blocos */

.backgroundHome {
   width: 120vw;
   height: 120vh;
   position: fixed;
   top: 0;
   right: 14px;
   background-image: url(/assets/images/backgroundMain.svg);
   background-image: url(../../assets/images/backgroundMain.svg);
   background-repeat: no-repeat;
   background-position: left, top;
   background-size: cover;
   filter: blur(25px);
   z-index: 0;
}

.backgroundLogin {
   width: 110vw;
   height: 110vh;
   position: fixed;
   top: 0;
   left: 0;
   background-image: url(/assets/images/backgroundMain.svg);
   background-image: url(../../assets/images/backgroundMain.svg);
   background-repeat: no-repeat;
   background-position: right, top;
   background-size: cover;
   filter: blur(5px);
   z-index: 0;
}

.blcBtnNav {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.blcAppPrincipal {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 16px;
}

.blcButtonBtw {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   gap: 8px;
   position: relative;
}

.blcCardAppMain{
   min-width: 330px;
   padding: 16px;
   border-radius: 8px;
   background: var(--color-mg);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
}

.blcCardAppMain.extern {
   box-shadow: 0px 0px 8.4px 0px rgba(0, 0, 0, 0.05);
   width: calc((100% / 3) - 48px);
}

.blcCardAppContent{
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   margin-left: -20px;
}

.blcExplorarMain {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   gap: 16px;
   width: 280px;
}

.blcExplorarPrincipal {
   display: flex;
   flex-direction: row;
   gap: 24px;
}

.blcExplorarVideo {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.blcExplorarText {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.blcHome, .pagNovidades {
   position: relative;
   padding: 32px 64px;
   display: flex;
   flex-direction: column;
   gap: 32px;
   z-index: 3;
   overflow-x: hidden;
}

.blcHomeContent {
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.blcLoginContainer, .blcRecuperaContainer {
   width: 500px;
   height: auto;
   max-height: 90vh;
   background: var(--color-mg);
   padding: 32px;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.blcPesquisaMain {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.blcPesquisaMain .blcTituloMain {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}

.blcTituloMain .blcPesquisaIcon {
   font-size: 24px;
   margin: 4px;
}

.blcTituloMain .blcPesquisaText {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.blcRecuperacao {
   width: 600px;
   max-width: 90vw;
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: var(--color-mg);
}

.blcRecuperacaoText {
   padding: 48px 32px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.blcTagsVideo{
   display: flex;
   flex-direction: row;
   gap: 16px;
}

button.tagVideo{
   background: transparent;
   color: var(--color-fg);
   font-size: 16px;
   font-weight: 600;
   line-height: 19.36px;
   padding: 8px 16px;
   border-radius: 40px;
   border: 2px solid var(--color-fg);
}

button.tagVideo.tudo{
   background: var(--color-fg);
   color: var(--color-bg);
}

.citacaoLogin {
   max-width: 490px;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.divColorDet {
   background: var(--cor-Laranja);
   padding: 16px;
}

.divFlexRow {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 8px;
   position: relative;
}

header.oniHeader {
   position: fixed;
   top: 0;
   left: 0;
   width: calc(100vw - 24px - 24px);
   height: calc(51px - 8px - 8px);
   background: var(--color-mg);
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--cor-cinza);
   z-index: 6;
}

.inputSubButton {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   position: relative;
}

.listaHomeContent {
   display: flex;
   flex-direction: row;
   gap: 16px;
   position: relative;
   overflow: hidden;
}

.listaInstituicao, .listaDetalhes {
   width: max-content;
   max-width: 250px;
   max-height: 80vh;
   overflow-y: auto;
   position: absolute;
   top: 36px;
   right: 8px;
   background: var(--color-mg);
   border-radius: 8px;
   padding: 8px 16px;
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
   flex-direction: column;
   gap: 8px;
   z-index: 1;
}

.listaInstituicao button {
   text-align: left;
}

.botaoSair{
   width: max-content;
   position: absolute;
   top: 36px;
   background: var(--color-mg);
   border-radius: 8px;
   padding: 8px 16px;
   box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.15);
   flex-direction: column;
   gap: 8px;
   right: 4px;
   min-width: 100px;
   z-index: 1;
}

.listaInstituicao button:hover, .botaoSair:hover {
   background: var(--color-bg);
}

main.mainLogin {
   z-index: 2;
   top: 50%;
   transform: translateY(-50%);
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 124px;
}

main.mainRecuperacao {
   width: 100vw;
   height: 100vh;
   background: rgba(242, 243, 246, 1);
}

main.mainRecuperacao .blcLoginContainer {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

main#ONIindex {
   margin-left: 64px;
   margin-top: 51px;
   width: calc(100vw - 64px);
   height: calc(100vh - 51px);
   overflow-x: hidden;
   overflow-y: auto;
}

nav.oniNav {
   position: fixed;
   top: 51px;
   left: 0;
   width: calc(64px - 8px - 8px);
   height: calc(100vh - 51px - 32px - 32px);
   background: var(--color-mg);
   padding: 32px 8px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
   border-right: 1px solid var(--cor-cinza);
   z-index: 5;
}

.loadingMain{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   z-index: 7;
}

.imgLoadLamp{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9;
   filter: blur(0.7px);
}

.indicadores {
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
   margin-top: -8px;
}

.overlayWhite {
   position: fixed;
   top: 0;
   right: 14px;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background: rgba(254, 254, 254, 0.6);
   z-index: 1;
}

.oniMain{
   font-family: 'Inter', sans-serif !important;
   position: relative;
   width: calc(100vw - 65px);
   overflow-x: hidden;
   /* padding: 32px 56px; */
}

.dark .overlayWhite {
   background: rgba(34, 33, 33, 0.75);
}

.tagApp {
   position: absolute;
   top: 4px;
   left: 4px;
   padding: 8px 12px;
   border-radius: 35px;
   width: fit-content;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.tagAppMain {
   position: relative;
   max-width: 182px;
}

/* Modal */
.modalMain{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 7;
}

.overlayBlack{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   z-index: 7;
   background: rgba(52, 52, 52, 0.6);
}

.modalContent{
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 32px;
   width: 780px;
   max-width: calc(90vw - 64px);
   height: calc(80vh - 64px);
   border-radius: 32px;
   background: var(--color-mg);
   z-index: 8;
   display: flex;
   flex-direction: column;
   gap: 24px;
   overflow-y: hidden;
}

.modalContent.fitDimension{
   width: fit-content;
   height: fit-content;
   max-width: 30vw;
   border-radius: 16px;
   justify-content: center;
   align-items: center;
}

.modalHeaderApp{
   display: flex;
   flex-direction: row;
   gap: 24px;
}

.modalHeaderAppText{
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.modalMainApp{
   display: flex;
   flex-direction: column;
   gap: 24px;
   overflow-y: auto;
}

/* Modal Youtube */
.video-card {
   position: relative;
   cursor: pointer;
   width: calc((100% / 4) - 24px);
   min-width: 260px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.video-thumbnail {
   width: 100%;
   max-height: 180px;
   object-fit: cover;
   border-radius: 8px;
}

.modalVideoYT{
   position: fixed;
   right: 24px;
   top: 30%;
   width: 600px;
   height: 360px;
   display: flex;
   flex-direction: column;
   background: var(--color-bg);
   border-radius: 8px;
   z-index: 4;
}

.modalVideoYTHeader{
   z-index: 3;
   position: relative;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background: rgba(88, 91, 91, 1);
   color: var(--color-bg);
   border-radius: 8px 8px 0 0; 
   padding: 4px 16px;
}

.modalVideoYTHeader button{
   color: #f5f5f5;
}

.modalVideoYT iframe{
   width: 100%;
   height: 100%;
   z-index: 1;
   border-radius: 0 0 8px 8px;
}

/* 3 - Botão / Button */
button {
   background: transparent;
   border: none;
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 19.36px;
   color: var(--color-fg);
   cursor: pointer;
}

button.btnDefault {
   width: 100%;
   background: var(--cor-Laranja);
   border: 1px solid var(--cor-Laranja);
   border-radius: 8px;
   padding: 8px 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 8px;
   color: rgba(254, 254, 254, 1);
}

button.btnDefault:hover, button.btnDefault.secundary:hover {
   background: rgba(197, 90, 17, 1);
   border-color: rgba(197, 90, 17, 1);
   color: rgba(254, 254, 254, 1);
}

button.btnDefault.secundary {
   background: transparent;
   color: var(--cor-Laranja);
}

button.btnGreen{
   width: fit-content;
   background: var(--cor-verde);
   padding: 8px 16px;
   border-radius: 8px;
   color: rgba(254, 254, 254, 1);
   font-size: 16px;
   font-weight: 600;
   line-height: 19.36px;
}

button.btnIconNav {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--color-fg);
   font-size: 10px;
   line-height: 10px;
   background: var(--color-mg);
   padding: 4px;
   border-radius: 4px;
   height: 48px;
   width: 48px;
}

button.btnIconNav:hover {
   background: var(--color-bg);
   color: var(--cor-Laranja);
}

button.btnIconNav i, button.btnIconServ img {
   font-size: 24px;
   height: 24px;
}

button.btnIconNav.Serv {
   color: rgba(242, 243, 246, 1);
}

button.btnIconServ {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: var(--color-fg);
   font-size: 10px;
   line-height: 10px;
   padding: 0;
}

button.btnPerfilHeader {
   font-size: 24px;
   color: var(--color-fg);
}

button.btnPerfilHeader:hover {
   color: var(--cor-Laranja);
}

button.btnServApp {
   flex: 0 1 auto;
   /* Ajusta a flexibilidade dos botões */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 16px;
}

figure.BtnIconServApp {
   padding: 20px;
   margin: 0 20px;
   height: calc(64px - 20px - 20px);
   width: calc(64px - 20px - 20px);
   border-radius: 8px;
   background: var(#343434);
   position: relative;
}

.modalHeaderApp figure.BtnIconServApp {
   padding: 20px;
   margin: 0;
   height: calc(80px - 20px - 20px);
   width: calc(80px - 20px - 20px);
   border-radius: 8px;
   background: var(#343434);
   position: relative;
}

button.btnSwitch {
   background: transparent;
   padding: 4px 16px;
   border: 1px solid var(--color-fg);
   border-radius: 40px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
   color: var(--color-fg);
   font-size: 14px;
   font-weight: 400;
   line-height: 16.94px;
   position: relative;
}

button.btnSwitch i {
   font-size: 20px;
}

.iconInput {
   position: absolute;
   right: 8px;
}

.iconInput:hover {
   color: rgba(197, 90, 17, 1);
}

/* 4 - Forms & Inputs */
.blcFormContent {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

form.formDefault {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 32px;
}

form.loginForm {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

input.inputDeafult {
   width: auto;
   background: var(--color-bg);
   padding: 8px 16px;
   border-radius: 8px;
   border: none;
   font-size: 16px;
   font-weight: 500;
   line-height: 19.36px;
   text-align: left;
   color: var(--color-fg);
}

input.inputDeafult[type="password"i] {
   padding-right: 32px;
}

input.inputDeafult::placeholder {
   color: rgba(204, 206, 206, 1);
}

.dark input.inputDeafult::placeholder {
   color: rgba(204, 206, 206, 1);
}

input.inputDeafult:active, input.inputDeafult:focus-visible {
   outline: 1px solid var(--color-fg);
}

/* 5 - Carousel, Table & Tooltip */
.listaDetalhes{
   position: absolute;
   top: 40px;
   left: -16px;
   z-index: 3;
   overflow: visible;
}

.listaDetalhes .tooltipArrowTop{
   z-index: 3;   
   background: var(--color-mg);
   height: 20px;
   width: 20px;
   position: absolute;
   top: -10px;
   left: 20px;
   transform: rotate(45deg);
   content: " ";
}

/* 6 - Textos */
a, a:active {
   color: var(--color-fg);
   text-decoration: none;
   cursor: pointer;
}

a.aLink {
   cursor: pointer;
   text-decoration: underline;
}

a.blueLink {
   cursor: pointer;
   color: var(--cor-azul);
   font-size: 14px;
   font-weight: 400;
   line-height: 16.94px;
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
}

a.blueLink:hover {
   font-weight: 500;
   text-decoration: underline;
}

.blcLoginContainer a.aLink {
   text-align: right;
}

.blcHome h1 {
   font-family: 'Inter';
   font-size: 24px;
   font-weight: 700;
   line-height: 29.05px;
   text-align: left;
   text-transform: capitalize;
}

.blcExplorarText h1 {
   color: var(--color-fg);
   font-size: 16px;
   font-weight: 600;
   line-height: 19.36px;
   text-align: left;
}

.blcLoginContainer h1, .blcRecuperaContainer h1 {
   font-size: 32px;
   font-weight: 600;
   line-height: 38.73px;
   text-align: center;
}

.blcIframePrincipal h1 {
   color: var(--color-fg);
   font-size: 32px;
   font-weight: 600;
   line-height: 38.73px;
   text-align: left;
}

h1.tituloModal{
   font-size: 24px;
   font-weight: 700;
   line-height: 29.05px;
   color: var(--color-fg);
}

.blcHome h2 {
   color: var(--color-fg);
   font-size: 18px;
   font-weight: 500;
   line-height: 21.78px;
   text-align: left;
}

.blcCardAppMain h2.btnText{
   font-size: 16px;
   font-weight: 600;
   line-height: 19.36px;
}

.blcPesquisaText h1 {
   color: rgba(76, 189, 145, 1);
   font-size: 18px;
   font-weight: 500;
   line-height: 21.78px;
   text-align: left;
}

.blcPesquisaText h2 {
   color: var(--color-fg);
   font-size: 12px;
   font-weight: 700;
   line-height: 14.52px;
   text-align: left;
}

h2#subtitle, h2.resourcesTitle{
   font-size: 18px;
   font-weight: 700;
   line-height: 21.78px;
   text-align: left;
}

#resources h3{
   font-size: 16px;
   font-weight: 600;
   line-height: 19.36px;
   text-align: left;
}

.btnRecente h3, .blcPesquisaText h3 {
   color: var(--color-fg);
   font-size: 10px;
   font-weight: 700;
   line-height: 12.1px;
   text-align: center;
}

.citacaoLogin h1 {
   font-size: 32px;
   font-weight: 500;
   line-height: 38.73px;
}

.citacaoLogin p, #resources p {
   font-size: 16px;
   font-weight: 400;
   line-height: 19.36px;
}

#resources p{
   margin-bottom: 24px;
} 

span.boldHome {
   color: var(--color-fg);
   font-size: 20px;
   font-weight: 700;
   line-height: 24.2px;
   text-align: center;
}

span.erroMessage {
   color: var(--cor-vermelho);
   font-size: 12px;
   font-weight: 500;
   line-height: 14.52px;
   text-align: left;
   display: none;
}

span.videoKeyword{
   font-family: 'Inter';
   font-size: 14px;
   font-weight: 700;
   line-height: 16.94px;
   text-transform: uppercase;
}

span.tagTitulo {
   color: rgba(254, 254, 254, 1);
   font-size: 12px;
   font-weight: 700;
   line-height: 14.52px;
   text-align: center;
}

.blcExplorarText span {
   color: var(--color-fg);
   font-size: 14px;
   font-weight: 400;
   line-height: 16.94px;
   text-align: left;
}

#items-list {
   list-style: none;
   padding: 0;
}
#items-list li {
   position: relative;
   padding-left: 25px;
   margin-bottom: 10px;
}
#items-list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background-color: var(--color-fg);
}

/* 7 - Imagem e Vídeo */
.dark img.imglogoLight, .dark img.imgLogo.Light, img.imglogoDark, img.imgLogo.Dark, .light img.imglogoDark, .light img.imgLogo.Dark{
   display: none;
}

img.imglogoLight, .light img.imglogoLight, img.imgLogo.Light, .light img.imgLogo.Light, .dark img.imglogoDark, .dark img.imgLogo.Dark{
   display: block;
}

.divColorDet img.imgLogo {
   height: 50px;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
}

figure.imgLogoWhite {
   height: 48px;
   width: 48px;
   padding: 4px;
   border-radius: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
}

figure.imgScreenshotMain{
   width: calc(100% - 32px);
   background: var(--color-bg);
   border-radius: 16px;
   padding: 16px;
   margin: 0;
}

img.imgScreenshot{
   width: 100%;
   border-radius: 8px;
}

iframe.blcIframePrincipal {
   width: 50%;
   height: 412px;
   border-radius: 8px;
}

iframe.blcIframeInterno {
   width: 280px;
   height: 158px;
   border-radius: 8px;
}

img.imgLamp {
   height: 32px;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

img.imgLampHome {
   height: 32px;
   position: relative;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.modalHeaderApp img.imgLamp {
   height: 48px;
}

img.logoLogin {
   width: 150px;
   height: auto;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   margin-bottom: 32px;
}

img.logoONIblack {
   width: 246px;
   height: auto;
}

.oniNav img.imgLogo {
   width: 100%;
}

.tagApp img {
   height: 16px;
}


.blcNovidades{
    width: calc(100% - 32px);
    padding: 16px;
    border: 1px solid #CCCECE;
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    overflow: hidden;
}

/* Flexbox */
div.flexColumn {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

div.flexRow, .flexRow {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.flexRow.jcBtw {
    justify-content: space-between;
}

button.btn_primary {
    width: fit-content;
    background: var(--var-corPrincipal);
    border: 1px solid transparent;
    padding: 8px 16px;
    border-radius: 8px;
    color: var(--var-corBranco);
    font-size: 14px;
}

button.btn_secundary, .btn_secundary {
    width: fit-content;
    background: transparent;
    border: 1px solid var(--color-det);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.36px;
    color: var(--color-det);
}

button.btn_terciary {
    width: fit-content;
    background: var(--color-mg);
    border: none;
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.36px;
    color: var(--var-corPrincipal);
}

button.btn_secundary.gray{
    border: 1px solid var(--var-corCinza);
    color: var(--var-corCinza);
}

button.btn_terciary.gray{
    text-align: center;
    justify-content: center;
    background: var(--color-bg);
}

button.btn_primary:hover {
    background: var(--var-gradientePrincipal);
}

button.btn_primary:disabled {
    background: rgba(204, 206, 206, 1);
    cursor: not-allowed;
}

button.btn_secundary:hover {
    border: 1px solid var(--var-gradientePrincipal);
    color: var(--var-gradientePrincipal);
}

button.btn_terciary:hover {
    background: var(--var-corPrincipal);
    color: var(--var-corBranco);
}

/* divAlerta */
:root {
      /* Cores IDV */

      /* Semântica */
      --Vermelho-Erro: #F84545;
      --Verde-Acerto: #55B938;
      --Amarelo-Alerta: #EC9C00;
      --Azul-Info: #00A7D2;
   }

   /* Alertas */
 .divAlerta {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.36px;
  background: var(--Azul-Info);
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px;
  border-radius: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  color: #fff !important;
  z-index: 999999;
  pointer-events: auto;
}

   .divAlerta .blxtxt {
      display: flex;
      flex-direction: column;
      gap: 4px;
   }

   .alerta,
   .busy {
      background: var(--Amarelo-Alerta);
   }

   .erro,
   .offline {
      background: var(--Vermelho-Erro);
   }

   .info {
      background: var(--Azul-Info);
   }

   .sucesso,
   .online {
      background: var(--Verde-Acerto);
   }

   /* Ícones */
   .divAlerta i.ph-check-circle, .divAlerta i.ph-warning-circle {
      font-size: 24px;
   }

   button.btnAlertaClose {
      color: #fff;
      font-size: 16px;
      align-self: flex-start;
   }