:root {
  --cor1: #85ce36;
  --cor2: #3a4651;
  --cor3: #a09109;
  --links: #559115;
  --links_hover: #a09109;

  --juris: #4d8215;
  --novidades: #cf4721;
  --opiniao: #4a67cf;
  --bibliografia: #f1b604;
}

* {
  margin: 0;
/*   padding: 0; */
  box-sizing: border-box;
}

@font-face {
  font-family: "ethnocentric";
  src: url("../fonts/ethnocentric.eot"); /* IE9 Compat Modes */
  src: url("../fonts/ethnocentric.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("../fonts/ethnocentric.woff") format("woff"),
    /* Modern Browsers */ url("../fonts/ethnocentric.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("../fonts/ethnocentric.svg#svgFontName")
      format("svg"); /* Legacy iOS */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #373a3c;
  background-color: #fff;
}
a {
  text-decoration: none;
  color: var(--links);
  font-weight: bold;
}
a:hover {
  text-decoration: none;
  color: var(--links_hover);
}
.centro {
  text-align: center;
}
.icon-branco {
  filter: invert(100%) sepia(0%) saturate(5807%) hue-rotate(185deg)
    brightness(107%) contrast(100%);
}

.icon-verde {
  filter: invert(88%) sepia(13%) saturate(6307%) hue-rotate(35deg)
    brightness(106%) contrast(62%);
}
.icon-cinza {
  filter: invert(25%) sepia(9%) saturate(1092%) hue-rotate(167deg)
    brightness(95%) contrast(89%);
}
.icon-amarelo {
  filter: invert(50%) sepia(21%) saturate(5936%) hue-rotate(25deg)
    brightness(97%) contrast(90%);
}
.icon-vermelho {
  filter: invert(21%) sepia(95%) saturate(5473%) hue-rotate(355deg)
    brightness(93%) contrast(119%);
}
.app {
  background-color: var(--cor2);
  display: grid;
  grid-template-columns: 100px 150px 1fr 250px;
  grid-template-rows: 80px auto minmax(auto, 60px);
  /*width: 100vw;*/
  min-height: 100vh;
  height: 100%;
  grid-template-areas:
    "logo logo pesquisa user "
    "menu menu conteudo conteudo"
    "menu menu rodape rodape ";
}

.app-promo {
    width: 900px;
    margin: 0 auto;
}
.logo a {
  color: var(--cor1);
  text-decoration: none;
}
.logo {
  grid-area: logo;
  background-color: var(--cor2);
}
.logo:hover {
  background-color: #58636e;
}
.logo-img {
  margin-left: 15px;
  display: inline-block;
}
.logo-text {
  font-family: "ethnocentric", Fallback, sans-serif;
  font-size: 10px;
  padding-top: 35px;

  display: inline-block;
}
.pesquisa {
  grid-area: pesquisa;
  background-color: #d7dde4;
  padding: 30px;
}

.search-area input {
  background-color: var(--cor2);
  background-image: url("../images/search.png");
  background-size: 13px;
  background-position-x: 10px;
  background-position-y: center;
  background-repeat: no-repeat;
  width: 200px;
  height: 25px;
  border-radius: 15px;
  border: 0;
  outline: 0;
  padding-left: 30px;
  transition: all 0.3s;
}
::placeholder {
  color: #a2b4c9;
}
.search-area input:focus {
  width: 90%;
  background-color: #fff;
}

.user {
  grid-area: user;
  background-color: #d7dde4;
  padding: 25px;
  display: flex;
  justify-content: flex-end;
}
.user-icon {
  width: 30px;
  padding: 5px;
}
.user-icon img {
  width: 20px;
}
.user-text {
  padding: 5px;
}
.login-box {
  width: 100%;
  padding: 10px;
}
.login {
  padding: 20px;
  border: 1px solid #707983;
  margin: auto;
  background-color: #4d5964;
  max-width: 300px;
}
.login-input,
.login-submit input {
  padding: 2px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  color: var(--cor2);
  outline: none;
  width: 100%;
}
.login-input::placeholder {
}
.login-input:focus {
  box-shadow: 0 0 5px rgb(72, 228, 98);
  border: 1px solid rgba(72, 228, 98, 1);
}
.flash {
  text-align: center;
  margin-bottom: 5px;
}
.flash span {
  font-size: 11px;
  color: #fff;
  border: 1px solid #f82c2c;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 10px;
  color: #f82c2c;
}
.signup,
.signup a {
  font-size: 12px;
  color: var(--cor1);
  text-align: center;
}
.recover,
.recover a {
  font-size: 12px;
  color: var(--cor3);
  text-align: center;
}
.menu {
  grid-area: menu;
  background-color: var(--cor2);
  color: #fff;
}

.group-menu {
  margin-top: 20px;
}
.group-menu a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}
.menu-item {
  padding: 15px 30px;
  list-style: none;
  display: flex;
  align-items: center;
  height: 50px;
}

.menu-icon {
  display: none;
}
.menu-item:hover {
  background-color: var(--cor1);
  color: var(--cor2);
  cursor: pointer;
}

.menu-item:hover,
.menu-item.active {
  background-color: var(--cor1);
  color: var(--cor2);
}

.menu-item-icon {
  width: 16px;
  height: 22px;
  margin-right: 10px;
  margin-left: 5px;
}

.menu-item-text {
  flex: 1;
  font-size: 14px;
}

.menu-icon {
  background-color: var(--cor2);
  padding-left: 20px;

  padding-top: 20px;
}

.conteudo {
  grid-area: conteudo;
  background-color: #f0f3f6;
  min-width: 300px;

  padding-right: 30px;
  padding-left: 30px;
  width: 100%;
}

.rodape {
  grid-area: rodape;
  background-color: #d7dde4;
  padding: 10px;
  font-size: 12px;
}
footer a {
  margin: 10px;
}

.intro {
  padding-top: 100px;
  background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)),
    url(../images/bg-header.jpg) no-repeat center bottom;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.animation {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: relative;
  text-align: center;
}

@-webkit-keyframes fadeIn {
  0% {
    top: -50px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    top: -50px;
    opacity: 0;
  }
  100% {
    top: 0px;
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.animation h1 {
  color: #fff;
}
.animation img {
  width: 70%;
  max-width: 600px;
}

.texto-inicio {
  margin-top: 50px;
  color: white;
  text-shadow: 1px 1px #000;
  text-align: justify;
}

.texto-inicio a {
  color: var(--cor1);
  text-decoration: none;
}

.titulos {
  font-family: "ethnocentric", Fallback, sans-serif;
  padding: 20px;
}

.verde {
  color: var(--cor1);
}
.branco {
  color: #fff;
}
hr.branco {
  border-top: 1px dashed white;
}
.centrado {
  text-align: center;
}

.planos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 40px;
  width: 98%;
  margin-top: 70px;
}
.planos .plano {
  flex: 1;
  min-width: 250px;
  max-width: 250px;
  background-color: #fff;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 5px 5px 10px #000;
  border: 5px solid #fff;
  cursor: pointer;
}
.planos .plano.active {
  border: 5px solid rgb(239, 243, 10);
  background-color: #e4f8bf;
  font-weight: bold;
}
.plano-header {
  background-color: var(--cor1);
  border-top-left-radius: 20px;
  height: 40px;
  padding: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
.plano-item ul li {
  height: auto;
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ccc;
  margin-right: 20px;
  margin-left: 20px;
  list-style: none;
}
.plano-botao {
  background-color: #fff;
  height: 40px;
  text-align: center;
  margin-right: 20px;
  margin-left: 20px;
}

.plano-footer {
  background-color: #ccc;
  border-bottom-right-radius: 20px;
  height: 40px;
  padding: 10px;
  text-align: center;
}
.plano-botao a {
  padding: 7px 20px;
  border: 1px solid rgba(112, 112, 112, 0.699);
  color: #fff;
  border-radius: 20px;
}
.modopagamento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 20px;
}
.bt-pagar {
  padding: 5px 10px 5px 10px;
}
.modopagamento div {
  margin-right: 30px;
  margin-top: 10px;
}

.pagamento_logo {
  width: 60px;
  margin-top: 20px;
}
.icon_pagamento {
  width: 60px;
  float: left;
  margin-right: 30px;
}

.success {
  background-color: #af840d;
}

.primary {
  background-color: var(--cor1);
}
.info {
  background-color: #3673ce;
}

.body-cinza {
  background-color: #4d5964;
}
.texto-modal {
  font-size: 12px;
  text-align: center;
}
.minuta-fav {
  margin-right: 10px;
  margin-bottom: 20px;
}
.fundo-escuro {
  background-color: var(--cor1);
  color: #fff;
}
.fundo-escuro span {
  color: var(--cor2);
  font-weight: bold;
}

.termos {
  text-decoration: underline;
  cursor: pointer;
}
.termos-box {
  margin-top: 20px;
  margin-left: 50px;
}
.termos_txt {
  font-size: 11px;
}
.termos_txt h4 {
  font-size: 15px;
}
.expirado {
  padding: 10px;
  background-color: red;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  text-align: center;
  max-width: 900px;
}
.card-body {
  text-align: justify;
}

.width120 {
  width: 120px !important;
}
.width150 {
  width: 150px !important;
}
.width200 {
  width: 200px !important;
}
.width300 {
  width: 300px !important;
}
.width00 {
  width: 400px !important;
}
.width-full {
  width: 100% !important;
}
.notas {
  font-size: 0.8rem;
}
.simples-area {
  cursor: pointer;
}
.simples-card {
  border: 1px solid #bbb !important;
  border-radius: 10px !important;
}
.fav_tit {
  display: flex;
  align-items: center;
}
.fav_tit img {
  margin-right: 10px;
  cursor: pointer;
}
.hide {
  display: none;
}
.fav_simples {
  margin: -15px 0px 10px -12px;
}
.card.novidades,
.card.opiniao,
.card.jurisprudencia,
.card.bibliografia {
  border-top-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.card-footer.novidades,
.card-footer.opiniao,
.card-footer.jurisprudencia,
.card-footer.bibliografia {
  border-bottom-right-radius: 30px;
}
.novidades a {
  color: var(--novidades);
}
.novidades .tipo,
.card-header.novidades,
.footer_novidades {
  background-color: var(--novidades);
  color: #fff;
  font-weight: bold;
}
.card-footer.novidades {
  background-color: var(--novidades);
  color: #fff;
  font-size: 0.8em;
  padding: 5px 30px 5px 20px;
  text-align: right;
}
.opiniao a {
  color: var(--opiniao);
}
.opiniao .tipo,
.card-header.opiniao,
.footer_opiniao {
  background-color: var(--opiniao);
  color: #fff;
  font-weight: bold;
}
.card-footer.opiniao {
  background-color: var(--opiniao);
  color: #fff;
  font-size: 0.8em;
  padding: 5px 30px 5px 20px;
  text-align: right;
}
.jurisprudencia a {
  color: var(--juris);
}
.jurisprudencia .tipo,
.card-header.jurisprudencia,
.footer_jurisprudencia {
  background-color: var(--juris);
  color: #fff;
  font-weight: bold;
}
.card-footer.jurisprudencia {
  background-color: var(--juris);
  color: #fff;
  font-size: 0.8em;
  padding: 5px 30px 5px 20px;
  text-align: right;
}

.bibliografia a {
  color: var(--bibliografia);
}
.bibliografia .tipo,
.card-header.bibliografia,
.footer_bibliografia {
  background-color: var(--bibliografia);
  color: #fff;
  font-weight: bold;
}
.card-footer.bibliografia {
  background-color: var(--bibliografia);
  color: #fff;
  font-size: 0.8em;
  padding: 5px 30px 5px 20px;
  text-align: right;
}

.tipo {
  padding: 5px 5px 5px 20px;
  font-family: "ethnocentric", Fallback, sans-serif;
  color: #fff;
  font-size: 0.7em;
  border-top-left-radius: 30px;
}

.calculos {
  max-width: 700px;
}

.card {
  max-width: 900px;
}
.thumb {
  width: 100%;
  border: 1px solid #cf4721;
  margin: 10px;
}
.carousel.slide.noticias {
  margin-top: 30px;
  margin-bottom: 30px;
}
.destaques {
  margin: auto;
  padding: 30px;
  max-width: 1000px;
  min-height: 300px;
}
.carousel-indicators {
  position: auto;
}
.card.novidades {
}
.card-verde {
  background-color: var(--cor1);
}

.btn-verde {
  color: #fff;
  background-color: var(--cor1);
  border-color: var(--cor1);
  margin: 3px;
}

.bt_renovar {
  padding: 5px 10px;
  margin: 10px;
  background-color: var(--cor1);
  color: fff;
  font-size: 0.9em;
  font-weight: bold;
  float: right;

  cursor: pointer;
  border-radius: 10px;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  max-width: 900px;
}
.pagination a {
  display: inline-block;
  padding: 0px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #eee;
  color: #000;
  margin-bottom: 10px;
}
.pagination a:hover {
  background-color: #85ce36;
}

.pagination .active {
  color: #aaa;
}
.suporte ul {
  padding-left: 30px !important;
}
.icon_suporte {
  width: 150px;
}

.ajuda {
  border: 1px solid #bbb;
  padding: 5px;
  margin: 10px;
}

.email-alert {
  font-size: 12px;
  background-color: #f0a22d;
  padding: 5px;
  margin: 5px;
  display: none;
}
/* ----------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) and (min-height: 768px) {
  .app {
    /* width: 100vw;*/
    height: 100vh;
    grid-template-columns: 100px 150px 1fr 100px;
    grid-template-rows: 80px auto minmax(auto, 80px);
    grid-template-areas:
      "logo logo pesquisa menu"
      "conteudo conteudo conteudo conteudo"
      "rodape rodape rodape rodape ";
  }

  .user,
  .menu-items {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    top: 85px;
    right: 0;
    width: 300px;
    z-index: 100;
    padding-top: 20px;
    padding-bottom: 50px;
    display: none;
  }
  .menu-item {
    border-bottom: 1px solid #ccc;
  }
  .menu-icon {
    display: block;
  }
}

@media only screen and (max-width: 768px) {
  .app {
    min-width: 450;
    /*width: 100vw;*/
    height: 100vh;
    grid-template-columns: auto 60px;
    grid-template-rows: 80px 40px auto 80px;
    grid-template-areas:
      "logo menu"
      "pesquisa  pesquisa"
      "conteudo  conteudo"
      "rodape  rodape";
  }
  .logo {
    min-width: 250px;
    width: 100%;
  }
  .menu {
    display: block;
  }
  .user,
  .menu-items {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.9);
    top: 85px;
    right: 0;
    width: 300px;
    z-index: 100;
    padding-top: 20px;
    padding-bottom: 50px;
    display: none;
  }
  .menu-item {
    border-bottom: 1px solid #ccc;
  }
  .menu-icon {
    padding-left: 0px;
    display: inline-block;
  }
  .menu-svg {
    width: 40px;
  }

  .pesquisa {
    grid-area: pesquisa;
    background-color: #d7dde4;
    padding: 10px;
  }

  .planos .plano {
    min-width: 100%;
    max-width: 100%;
  }
  .width120,
  .width200,
  .width300,
  .width00,
  .width-full {
    width: 100% !important;
  }
}
@media print {
  .app {
    width: 100vw;
    height: 100vh;
    grid-template-columns: 100px 150px 1fr 100px;
    grid-template-rows: 80px auto minmax(auto, 80px);
    grid-template-areas:
      "logo logo logo logo"
      "conteudo conteudo conteudo conteudo"
      "rodape rodape pesquisa menu ";
  }
  .rodape,
  .pesquisa,
  .menu {
    display: none !important;
  }
}

.inscrever {
  text-align: right;
  width: 100%;
  font-size: 20px;
}

.data_evento {
  font-size: 20px;
}

.inscrever a{
 color: rgb(169, 11, 11);
}

.titulo-evento {
  background-color: var(--cor1);
  font-weight: bold;
  font-size: 18px;
  text-align: center !important;
}

.imagem-evento {
  max-width: 850px;
  padding: 20px;
}

.creditos-disponiveis {
    max-width: 850px;
    margin-top: -50px;
    margin-bottom: 20px;
    text-align: right;
    font-weight: bold;
}

.perfil-collapse {
  cursor: pointer;
}

.imagem-evento {
  max-width: 100%;
}

.eventos-preco {
  font-weight: bold;
}
.bt-inscrever {
  text-align: center;
  padding: 20px;

}
.inscrito {
  text-align: center;
  padding: 20px;

}

.user_inscrito {
  background-color: #caf0cb;
}

.video {
  margin-top: -8px;
  width: 20px;
}

.margin-10 {
  margin: 10px;
}

.social-icons {
  width: 50px;
  margin: 20px;
}

.tabela-afiliados {
  display: grid;
  grid-template-columns: 150px 150px 100px 150px;
}

.tabela-afiliados div {
  padding-left: 10px;
}

.plano-item ul {
  padding: 0px !important;
}