/* 

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

*/

/* 0 - Imports & root */

@import url('https://fonts.cdnfonts.com/css/bahnschrift');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@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, :root.light {

   --cor-Primary: #BB58FF;
   --cor-Secundary: #7F03BB;
   --cor-Terciary: #470069;
   --cor-Quarter: #1733B8;

   /* Cores IDV */
   --Azul-IDV: #29C4F3;
   --Verde-IDV: #4CBD91;
   --Laranja-IDV: #F5872A;
   --CinzaClaro-IDV: #E5E5E5;
   --CinzaEscuro-IDV: #585B5B;

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

   /* Neutras */
   --Falso-Branco: #FEFEFE;
   --Falso-Preto: #242424;
   --Elevacao-1-LM: #F2F3F6;

   /* Eixos */
   --cor-ONIactive: #29ABE2;
   --cor-ONIacademy: #00A99D;
   --cor-ONIbooks: #F6405E;
   --cor-ONIcommerce: #FFC000;
   --cor-ONIcreative: #DB7093;
   --cor-ONIface: #42E707;
   --cor-ONIflix: #C00000;
   --cor-ONIinteligence: #548235;
   --cor-ONIlive: #18235E;
   --cor-ONImine: #F15A24;
   --cor-ONIpublishing: #7030A0;
   --cor-ONIquest: #C55A11;

   /* Cores de fundo */
   --cor-Background: var(--cor-backgroundBody);
   --cor-Middle: var(--Elevacao-1-LM);
   --cor-Foreground: var(--cor-textBody);

   /* Drop Shadow */
   --shadow-01: 0px 0px 16px 0px #00000026;

   /* Cor detalhe */
   --cor-Principal: var(--cor-Primary);
}

:root.dark {
   /* Neutras */
   --Fundo: #141116;
   --Elevacao-1-DM: #343A40;

   /* Outline */
   --outline-ONIactive: #4AC4F8;
   --outline-ONIacademy: #00A99D;
   --outline-ONIbooks: #FF7C91;
   --outline-ONIcommerce: #FFC000;
   --outline-ONIcreative: #E8A2B9;
   --outline-ONIface: #42E707;
   --outline-ONIflix: #F35454;
   --outline-ONIinteligence: #6CAC41;
   --outline-ONIlive: #7B8AF7;
   --outline-ONImine: #FC6D3A;
   --outline-ONIpublishing: #A278C1;
   --outline-ONIquest: #DE8345;

   /* Cores de fundo */
   --cor-Background: var(--Fundo);
   --cor-Middle: var(--Falso-Preto);
   --cor-Foreground: var(--Falso-Branco);

   /* Drop Shadow */
   --shadow-01: 0px 0px 16px 0px #00000066;

}

/* 1 - Estruturais */
body {
   width: 100vw;
   max-width: 100vw !important;
   min-height: 100%;
   background: var(--cor-Background);
   font-family: 'Inter', sans-serif;
   font-size: 16px;
   font-weight: 400;
   line-height: 19.36px;
   color: var(--cor-Foreground);
   overflow-x: hidden;
}

aside.asideMain{
   background: var(--cor-Middle);
   width: calc(300px - 48px);
   height: calc(100vh - 48px);
   display: flex;
   flex-direction: column;
   gap: 36px;
   padding: 24px;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 8;
}

main.mainAdmin{
   display: flex;
   flex-direction: row;
   overflow-y: hidden;
}

header.hdrLoja{
   background: var(--cor-Header);
   color: var(--cor-textHeader);
   padding: 8px 96px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   gap: 64px;
}

footer.fttLoja{
   background: var(--cor-Middle);
   color: var(--cor-Foreground);
   padding: 64px 96px;
   display: flex;
   flex-direction: row;
   gap: 84px;
   position: relative;
}

footer.fttLoja .fttr{
   gap: 32px;
}

footer .fttr_copyright{
   position: absolute;
   left: 0;
   bottom: 16px;
   width: 100vw;
   display: flex;
   justify-content: center;
}

main.mainDSystem, .mainDSystem {
   position: relative;
   
   margin: 0;
   padding: 64px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   width: calc(100vw - 64px - 64px);
   overflow-y: auto;
   overflow-x: hidden;
}

div.mainDSystem{
   left: 300px;
   width: calc(100vw - 300px - 64px - 64px);
}

main.mainLoja {
   position: relative;
   margin: 0;
   padding: 64px;
   display: flex;
   flex-direction: column;
   gap: 32px;
   overflow: hidden;
}

main.mainLogin{
   position: relative;
   margin: 0;
   width: 100vw;
   height: 100vh;
   display: flex;
   flex-direction: row;
   gap: 0;
   overflow: hidden;
}

/* 2 - Blocos */
.divFlexRow{
   display: flex;
   flex-direction: row;
   gap: 16px;
}

.divFlexColumn{
   display: flex;
   flex-direction: column;
   gap: 8px;
}

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

.altmCenter{
   align-items: center;
}

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

.blcCardMinimo{
   background: var(--cor-Card);
   padding: 8px;
   border-radius: 8px;
   width: 100%;
   color: var(--cor-textCard);
}

.blcCardPedido{
   background: var(--cor-Card);
   padding: 16px;
   border-radius: 8px;
   width: calc(100% - 32px);
   color: var(--cor-textCard);
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.blcCardPrecoMain{
   width: 100%;
   max-width: 20vw;
   height: fit-content;
   display: flex;
   flex-direction: column;
   gap: 24px;
}

.blcCardPreco{
   background: var(--cor-Card);
   padding: 16px;
   border-radius: 8px;
   width: calc(100% - 32px);
   color: var(--cor-textCard);
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.blcCardText{
   background: var(--cor-Card);
   border-radius: 16px;
   padding: 16px;
   width: calc((100% - 24px) / 2 - 32px);
   display: flex;
   flex-direction: column;
   gap: 16px;
   color: var(--cor-textCard);
}

/* .blcMetodoPagamento{

} */

.detCurso{
   gap: 64px;
}

.detCursoInfo{
   width: 65vw;
   display: flex;
   flex-direction: column;
   gap: 56px;
   margin-bottom: 32px;
}

/* Alertas */
.alerta, .busy {
   background: var(--Amarelo-Alerta) !important;
}

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

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

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

.divAlerta {
   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: var(--Falso-Branco) !important;
   z-index: 9;
}

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

.separadorVertical{
   content: '';
   border-right: 2px solid var(--cor-textHeader);
   height: 100%;
}

.separadorHorizontal{
   content: '';
   border-bottom: 2px solid var(--CinzaClaro-IDV);
   width: 100%;
}

/* Avatar */
.blcAvatar {
   position: relative;
   width: fit-content;
}

.btnAvatar {
   position: relative;
   height: 32px;
   width: 32px;
   border-radius: 50%;
   border: none;
   background-color: var(--cor-textHeader);
   color: #212529;
   overflow: hidden;
   padding: 0;
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
}

.btnAvatar i.ph-user-circle{
   font-size: 64px;
}

img.imgAvatar {
   position: absolute;
   height: 100%;
   width: 100%;
   object-fit: cover;
   border-radius: 50%;
}

img.imgLogoLoja, .imgLogo{
   max-height: 60px;
   filter: hue-rotate(243deg) !important;
}

.statusAvatar {
   background: var(--Azul-Info);
   position: absolute;
   height: 12px;
   width: 12px;
   border-radius: 50%;
   border: 4px solid var(--cor-Middle);
   top: 0;
   left: 0;
   z-index: 3;
}

/* Status Superior Direito */
.statusAvatar.SD{
   top: 0;
   left: 44px;
}
/* Status Superior Esquerdo */
.statusAvatar.SE{
   top: 0;
   left: 0;
}
/* Status Inferior Direito */
.statusAvatar.ID{
   top: 44px;
   left: 44px;
}
/* Status Inferior Esquerdo */
.statusAvatar.IE{
   top: 44px;
   left: 0;
}


/* Breadcrumbs */
.divBreadcrumbs {
   width: fit-content;
   padding: 8px 16px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}

.divBreadcrumbs.large {
   padding: 16px;
}

.divBreadcrumbs.sub {
   border-bottom: 1px solid var(--CinzaEscuro-IDV);
}

/* Checkbox */
.btnCheckbox{
   height: 16px;
   width: 16px;
   border-radius: 2px;
   border: 1px solid var(--cor-Foreground);
   background: var(--cor-Background);
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--cor-Middle);
}

.btnCheckbox i.ph-check{
   opacity: 0;
}

/* Login */
.blcLoginMain{
   height: calc(100vh - 84px);
   max-height: 100vh;
   padding: 64px;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow-y: auto;
}

.blcLoginContent{
   width: 100%;   
   background: var(--cor-Middle);
   padding: 32px;
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.hdrLogin{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 64px;
}

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

.blcEtapaCadastro{
   width: fit-content;
   position: relative;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
}

.blcEtapaCadastro .divLinha{
   border-bottom: 3px solid var(--CinzaClaro-IDV);
   width: 80%;
   position: absolute;
   z-index: 2;
   left: 50%;
   transform: translateX(-50%);
}

.blcEtapaCadastro .roundText{
   z-index: 3;
   width: 24px;
   height: 24px;
   background: var(--cor-Middle);
   border: 2px solid var(--CinzaClaro-IDV);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--CinzaClaro-IDV);
}

.blcEtapaCadastro .roundText.active{
   border-color: transparent;
   background: var(--cor-Principal);
   color: var(--Falso-Branco);
}

#cadastro1{
   display: flex;
}

#cadastro2, #cadastro3{
   display: none;
}

.loadingMain{
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw !important;
   height: 100vh !important;
   overflow: hidden;
   background: var(--cor-Middle);
   opacity: 0.9;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
}

.loadingContent{
   opacity: 1;
   content: "";
   width: 80px;
   height: 80px;
   border-radius: 80px;
   border: 10px solid var(--cor-Principal);
   border-top-color: transparent; /* Deixa 25% do círculo transparente */
  animation: rotate 2s linear infinite;
}

/* Animação de rotação */
@keyframes rotate {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

/* 3 - Botão / Button */
button {
   width: fit-content;
}

button.w100p {
   width: 100%;
}

button span {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

button.btnAlertaClose {
   color: var(--Falso-Branco);
   font-size: 16px;
   align-self: flex-start;
}

button.btnPrimary, button.btnSecundary, button.btnTerciary{
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}

button.btnPrimary {
   background: var(--cor-Principal);
   padding: 8px 16px;
   border: 1px solid transparent;
   border-radius: 8px;
   color: var(--Falso-Branco);
   font-size: 16px;
   font-weight: 600;
}

button.btnPrimary:hover {
   filter: brightness(90%);
}

button.btnPrimary.comprar::before, button.btnSecundary.comprar::before{
   content: var(--text-btnComprar);
   font-size: 16px;
   font-weight: 600;
}

button.btnSecundary {
   background: transparent;
   padding: 8px 16px;
   border: 1px solid var(--cor-btnSecundary);
   border-radius: 8px;
   color: var(--cor-btnSecundary);
   font-size: 16px;
   font-weight: 600;
}

button.btnSecundary:hover {
   background: var(--CinzaClaro-IDV);
}

button.btnTerciary {
   background: var(--cor-Middle);
   padding: 8px 16px;
   border: 1px solid transparent;
   border-radius: 8px;
   color: var(--cor-Principal);
   font-size: 16px;
   font-weight: 600;
}

button.btnTerciary:hover {
   background: var(--CinzaClaro-IDV);
}

button.btnPrimary:disabled{
   background: var(--CinzaClaro-IDV);
   cursor: not-allowed;
}

:root.dark button.btnTerciary{
   color: var(--cor-Foreground);
}

:root.dark button.btnSecundary:hover, :root.dark button.btnTerciary:hover {
   color: var(--cor-Principal) !important;
}

button.small {
   padding: 4px 16px;
}

button.btnInvisible{
   background: transparent;
   color: var(--cor-textHeader);
   font-size: 20px;
}

button.btnItemAcordeon {
   width: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
}

button.btnItemAcordeon i[class*="ph-caret"] {
   font-size: 20px;
}

button.btnItemAcordeon span{
   color: var(--cor-Foreground);
}

button#btnList{
   position: fixed;
   left: 316px;
   z-index: 9999;
   cursor: pointer;
}

a, a:link, a:active, a:visited {
   color: var(--cor-Foreground);
   font-weight: 400;
   cursor: pointer;
}

a:hover {
   color: var(--cor-Principal);
}

a.btnSocial{
   height: 32px;
   width: 32px;
   border: none;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: transparent;
   color: var(--cor-textFooter);
   
}

a.btnSocial i{
   font-size: 36px;
}

a.btnSocial.white i{
   font-size: 22px !important;
}

a.btnSocial.white{
   background: var(--cor-textFooter);
   color: var(--cor-Footer);   
}

a#btnTopo{
   position: fixed !important;
   right: 16px !important;
   bottom: 16px !important;
   padding: 16px;
   background: var(--cor-Background);
   color: var(--cor-Principal);
   font-size: 18px;
   border: none;
   border-radius: 50px;
   z-index: 9;
}

a#btnTopo:hover{
   background: var(--cor-Principal);
   color: var(--cor-Foreground);
}

/* 4 - Forms & Inputs */
form.formMain{
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 100%;
}

input.inputDS, select.inputDS, textarea.inputDS{
   /* width: calc(100% - 32px); */
   /* width: 100%; */
   padding: 8px 16px;
   border: 1px solid transparent;
   border-radius: 8px;
   background: var(--cor-Middle);
   color: var(--cor-Foreground);
}

input.inputDS.invert, select.inputDS.invert, .invert{
   background: var(--cor-Background);
}

input.inputDS:focus-visible{
   outline-color: var(--CinzaClaro-IDV);
}

input.inputDS[type="date" i]{
   font-family: 'Inter', sans-serif;
   accent-color: var(--cor-Foreground);
}

.dark .inputDS::-webkit-calendar-picker-indicator{
   filter: invert(100%);
}

input.inputErro{
   border-color: var(--Vermelho-Erro);
}

.previewInputFileMain {
   position: relative;
   height: 160px;
   width: 160px;
   background: var(--cor-Middle);
   border: 1px solid var(--CinzaClaro-IDV);
   border-radius: 4px;
   object-fit: cover;
   cursor: pointer;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   overflow: hidden;
}

.previewInputFile {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.previewTextInputFile {
   width: calc(100% - 16px);
   position: absolute;
   bottom: 0;
   padding: 4px 8px;
   background: var(--cor-Background);
   color: var(--cor-Foreground);
   border-radius: 0 0 4px 4px;
   text-align: center;
}

.previewTextInputFile span {
   font-size: 10px !important;
   word-break: break-word;
}

.previewInputFileMain:hover {
   box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.previewInputFile img {
   display: block;
   max-width: 100%;
   max-height: 100%;
   border-radius: 4px;
}

.ph.ph-file {
   font-size: 48px;
   color: var(--cor-Foreground);
}


/* 5 - Carousel, Listas, Table & Tooltip */
/* Carousel */
/* banner */
.carouselBanner {
   position: relative;
   width: 100vw;
   max-width: 100vw;
   height: 384px;
   overflow: visible;
   margin: auto;
   padding: 0;
   z-index: 1;
}

.carouselBanner .carouselContainer {
   display: flex;
   transition: transform 0.5s ease-in-out;
}

.imgBanner {
   min-width: 100%;
   height: 384px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 24px;
   color: var(--Falso-Branco);
   object-fit: contain;
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: 2;
   position: relative;
}

.imgBanner .overlayBlack{
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 384px;
   background: rgba(0, 0, 0, 0.5);
   z-index: 3;
}

.imgBanner .divFlexColumn{
   position: relative;
   z-index: 999;
}

.btn-left, .btn-right {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   /* background-color: rgba(0, 0, 0, 0.5); */
   color: var(--Falso-Branco);
   border: none;
   padding: 10px 15px;
   cursor: pointer;
   z-index: 10;
   font-size: 48px;
   height: calc(100%);
}

.btn-left {
   left: 0;
   padding-left: 16px;
}

.btn-right {
   right: 0;
   padding-right: 16px;
}

.btn-left:hover, .btn-right:hover {
   background-color: rgba(0, 0, 0, 0.1);
}

.indicadorCarousel {
   display: flex;
   justify-content: center;
   gap: 8px;
   position: absolute;
   bottom: 16px;
   width: 100%;
}

.indicator {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: var(--cor-Background);
   cursor: pointer;
}

.indicator.active {
   background-color: var(--cor-Principal);
}

/* Cards */
.carouselCard {
   position: relative;
   left: -64px;
   width: calc(100vw - 12px);
   max-width: 100vw;
   overflow: visible;
   margin: 0 auto;
}

.carouselCard .carouselContainer {
   display: flex;
   align-items: stretch;
   gap: 16px;
   transition: transform 0.5s ease-in-out;
   padding: 0 64px;
}

.card {
   width: calc(25% - 12px);
   min-width: 200px;
   height: 150px;
   border-radius: 8px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: white;
   font-size: 18px;
   font-weight: bold;
   flex-shrink: 0;
   /* overflow: hidden; */
   display: flex;
   flex-direction: column;
}

.card.thumbSimples {
   height: auto;
   max-height: 100%;
   justify-content: flex-start;
   align-items: stretch;
}

.card.thumbMargem {
   width: calc(25% - 12px - 32px);
   height: 100%;
   align-items: stretch;
   padding: 16px;
   border-radius: 8px;
   background: var(--cor-Middle);
   gap: 16px;
   height: auto;
}

.card.duplo {
   width: calc(50% - 8px);
}

.cardThumb {
   width: 100%;
   height: 180px;
   min-height: 180px;
   border-radius: 8px 8px 0 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.card.thumbMargem .cardThumb {
   border-radius: 8px;
}

.cardContainer {
   background: var(--cor-Middle);
   border-radius: 0 0 8px 8px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 24px;
   height: 100%;
   color: var(--cor-Foreground);
}

.card.thumbMargem .cardContainer {
   padding: 0;
}

.carouselCard .btn-left, .carouselCard .btn-right {
   position: absolute;
   top: calc(50% - 12px);
   transform: translateY(-50%);
   background-color: var(--cor-Background);
   height: calc(100% - 16px);
   border: none;
   padding: 0 15px;
   cursor: pointer;
   z-index: 10;
   font-size: 16px;
}

.carouselCard button i[class*="ph-caret"] {
   background: var(--cor-Middle);
   padding: 8px;
   border-radius: 50px;
   color: var(--cor-Foreground);
}

.carouselCard button:hover i[class*="ph-caret"] {
   background: var(--CinzaClaro-IDV);
   color: var(--cor-Principal);
}

.carouselCard .btn-left {
   left: 0;
}

.carouselCard .btn-right {
   right: 0;
   /* padding-right: 16px; */
}

.indicadorCarouselCard {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 24px;
}

.carouselCard .indicator {
   width: 16px;
   height: 8px;
   background-color: var(--CinzaEscuro-IDV);
   border-radius: 8px;
   cursor: pointer;
}

.carouselCard .indicator.active {
   width: 32px;
   background-color: var(--cor-Principal);
}

/* Listas */
/* Acordeon */
ul.divAcordeon {
   background: var(--cor-Middle);
   padding: 16px 0;
   border-radius: 16px;
   width: auto;
   display: flex;
   flex-direction: column;
   gap: 16px;

}

ul.divAcordeon.backInvert{
   background: transparent;
   padding: 16px 0;
   border-radius: 0;
}

li.listAcordeon {
   border-bottom: 1px solid var(--cor-Background);
   padding-bottom: 16px;
}

li.listAcordeon:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

ul.divAcordeonInterno {
   display: none;
   flex-direction: column;
   gap: 8px;
   margin-top: 8px;
   padding-top: 16px;
   border-top: 1px solid var(--cor-Background);
}

ul.divAcordeonInterno li {
   padding-left: 16px;
}

.backInvert ul.divAcordeonInterno li{
   margin-left: 16px;
   padding-left: 0;
   list-style-type: disc;
}

ul.gridCursos{
   display: flex;
   justify-items: start;
   flex-direction: column;
   flex-wrap: wrap;
   max-height: 210px;
   gap: 8px 32px;
}

/* Table */
table.oniTable{
   border-collapse: separate;
   border-spacing: 0 8px;
   width: 100%;
   
}
table.oniTable th{
   padding: 8px 16px;
   cursor: pointer;
   background: var(--cor-Middle);
   text-align: left;
   color: var(--cor-Foreground);
}

table.oniTable th:first-child, table.oniTable tr td:first-child{
   border-radius: 8px 0 0 8px;
}

table.oniTable th:last-child, table.oniTable tr td:last-child{
   border-radius: 0 8px 8px 0;
}

table.oniTable th i{
   margin-left: 8px;
   color: var(--cor-Foreground);
}

table.oniTable td{
   padding: 16px;
   background: var(--cor-Middle);
}

table.oniTable tbody{
   overflow-y: auto;
}

table.oniTable td button{
   width: 100%;
   justify-content: center;
}

.paginationNav {
   margin-top: 10px;
   text-align: center;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
}

.paginationBtn {
   margin: 0;
   padding: 8px;
   width: 32px;
   border-radius: 4px;
   background: transparent;
   border: none;
   cursor: pointer;
   color: var(--cor-Principal);
   font-weight: 500;
   display: flex;
   justify-content: center;
   align-items: center;
}

.dark .paginationBtn, button.btnItemAcordeon i{
   color: var(--cor-Foreground);
}

.paginationBtnDots{
   padding: 8px;
   width: 32px;
   color: var(--cor-Foreground);
}

.paginationBtn:hover{
   background: var(--cor-Principal);
   color: var(--Falso-Branco);
}

.paginationBtn.active, .paginationBtn.active:hover{
   background: var(--cor-Middle);
   color: var(--cor-Foreground);
}

/* Tooltip */
.tooltip{
   position: absolute;   
   left: -25%;
   z-index: 2;
   box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
   display: none;
}

.tooltip.top{
   top: calc(100% + 8px);
}

.tooltip.back{
   bottom: calc(100% + 8px);
}

.arrowTooltip{
   z-index: 2;
   height: 12px;
   width: 12px;
   transform: rotate(45deg) translateX(-50%);
   background: var(--cor-Middle);
   position: absolute;   
   left: 50%;
}

.tooltip.top .arrowTooltip{
   top: 0;
}

.tooltip.back .arrowTooltip{
   bottom: -8px;
}

.textTooltip{
   padding: 8px 16px;
   border-radius: 8px;
   background: var(--cor-Middle);
   z-index: 3;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   gap: 8px;
}

.btnTooltip:hover .tooltip{
   display: block;
}

/* 6 - Textos */
.bahns {
   font-family: 'Bahnschrift', sans-serif;
}

p, span {
   font-size: 16px;
   font-weight: 400;
   line-height: 19.36px;
}

h1 {
   font-size: 32px;
   font-weight: 700;
   line-height: 38.73px;
   text-align: left;
}

h1.displayLarge {
   font-size: 48px;
   font-weight: 700;
   line-height: 58.09px;
   text-align: left;
}

h1.titleLogo{
   font-size: 28px;
   text-align: center;
   color: var(--cor-Primary);
}

h1.displaySmall {
   font-size: 48px;
   font-weight: 400;
   line-height: 58.09px;
   text-align: left;
}

h2, span.h2 {
   font-size: 24px;
   font-weight: 700;
   line-height: 29.05px;
   text-align: left;
}

h3, span.h3 {
   font-size: 18px;
   font-weight: 700;
   line-height: 21.78px;
   text-align: left;
}

h4, span.h4 {
   font-size: 16px;
   font-weight: 600;
   line-height: 19.36px;
   text-align: left;
}

h5, span.h5 {
   font-size: 14px;
   font-weight: 700;
   line-height: 16.94px;
   text-align: left;
}

p.large, span.large, a.large {
   font-size: 20px;
   font-weight: 400;
   line-height: 24.2px;
   text-align: left;
}

p.small, span.small, a.small {
   font-size: 14px;
   font-weight: 400;
   line-height: 16.94px;
   text-align: left;
}

p.x-small, span.x-small, a.x-small {
   font-size: 12px;
   font-weight: 400;
   line-height: 14.52px;
   text-align: left;
}

p.textErro{
   color: var(--Vermelho-Erro);
   font-size: 12px;
   font-weight: 500;
   line-height: 14.52px;
   display: none;
}

p.caps, span.caps{
   text-transform: uppercase;
}

a.hidden {
   display: none;
}

a.aLink.color{
   color: var(--cor-Principal);
}

a.aLink.sub{
   text-decoration: underline;
}

a.aLinkWhite{
   color: var(--cor-textHeader);
}

a.aLinkWhite:hover, a.btnSocial:hover, a.btnSocial.white:hover{
   color: var(--cor-Principal) !important;
   transition: color 0.3s ease-in-out;
}

span.avatar{
   font-size: 12px;
   line-height: 0;
}

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

button span.h3 i, button span.h4 i {
   font-size: 20px;
}

button span.h5 i {
   font-size: 16px;
}

/* 7 - Imagem */
.figureLogo{
   display: flex;
   flex-direction: column;
   gap: 16px;
   justify-content: center;
   align-items: center;
   width: 100%;
   color: var(--cor-textHeader);
}
.imgLogo{
   height: auto;
   width: 60px;
}
img.imgLogoLogin{
   max-height: 80px;
   width: auto;
   filter: hue-rotate(240deg);
}

.backgroundLogin{
   background: var(--cor-Middle);
   height: 100vh !important;
   max-height: 100vh !important;
}

img.imgBackgroundLogin{   
   min-height: 100vh;
   min-width: 100%;
}

img.imgBannerB{
   position: relative;
   margin-top: -64px;
   left: 50%;
   transform: translateX(-50%);
   width: 100vw;
}

img.imgCursoCarrinho{
   width: 100%;
   max-width: 230px;
   height: 100%;
}

img.imgDetCurso{
   width: 100%;
}

img.imgThumb {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px 8px 0 0;
}

.bannerC {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 24px; /* Espaço entre as imagens */
   overflow: hidden; /* Evita que algo vaze */
}

img.imgBannerC {
   flex: 1; /* Distribui o espaço igualmente entre as imagens */
   max-width: calc(100% / var(--img-count) - 24px); /* Divide o espaço igualmente */
   height: 100%; /* Mantém todas com a mesma altura */
   object-fit: contain; /* Garante que a imagem inteira fique visível sem cortes */
}

/* Tradutor */
.blcTranslate{
   position: fixed;
   top: 20%;
   right: 0;
   /* margin-right: 8px; */
   z-index: 999;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}

.blcTranslateContent{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   position: relative;
   right: -120%;
   transition: right 0.3s ease-in-out;
}

.btnTranslate{
   background: var(--cor-Middle);
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 8px;
   border: none;
   border-radius: 8px 1px 1px 8px;
   width: fit-content;
   position: relative;
   right: 0;
   transition: right 0.3s ease-in-out;
}

.btnLanguage{
   padding: 8px 10px;
   border: none;
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--cor-Middle);
   width: 100%;
   z-index: 999999;
   position: relative;
   
}

.btnLanguage.active{
   background: var(--cor-Background);
}

.btnLanguage span{
   font-size: 18px;
   font-weight: 700;
   color: var(--cor-Foreground);
}

.btnLanguage:first-of-type{
   border-radius: 14px 1px 1px 1px;
}

.btnLanguage:last-of-type{
   border-radius: 1px 1px 1px 14px;
}

.imgLanguage{
   width: 30px;
   height: auto;
}


/* Larguras Percentuais */
.w15p{
   width: 15% !important;
}

.w25p{
   width: 25% !important;
}

.w30p{
   width: 30% !important;
}

.w50p{
   width: 50% !important;
}

.w60p{
   width: 60% !important;
}

.w75p{
   width: 75% !important;
}

.w100p{
   width: 100% !important;
}

/* 8 - @media */
@media(max-width: 1400px) {
   /* Estruturais */
}


@media(max-width: 900px) {

   /* Estruturais */
   body {
      width: 100%;
      min-height: 100%;
   }

   main.mainDSystem {
      padding: 36px 16px;
      overflow-x: hidden;
   }

   .carouselBanner {
      width: calc(100% + 32px);
      max-width: none;
      left: -16px;
   }

   .carouselCard {
      width: calc(100% + 33px);
      max-width: none;
      left: -16px;
   }

   .card, .card.duplo {
      width: calc(100% + 2px);
   }

   .card.thumbMargem {
      width: calc(100% - 32px);
   }

   .w15p, .w25p, .w30p, .w50p, .w60p, .w75p, .w100p{
      width: 100% !important;
   } 
}