*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

* {
  -webkit-user-select: none;
  /* Safari */
  /* IE 10 and IE 11 */
  -moz-user-select: none;
       user-select: none;
  /* Standard syntax */
}

:root {
  --largura: 600px;
  --ospontos: 34px;
  --alturaPainel: 600px;
  --larguraSlide: 520px;
  --larguraPainel: 600px;
  --DAS28-CRP: 0px;
  --esr: 0px;
  --atividade_10: 100px;
  --atividade_100: 0px;
  --atividadeMed: 100px;
  --refereciaFontsize: 12px;
  --areferenciaFontsize: 12px;
  --fonttitulo: 25px;
  --fontsubt: 16px;
  --fontmelhor: 14px;
  --fonttitpercebe: 18px;
  --fontjuntas: 18px;
  --fontatividade: 18px;
  --fontotipo: 22px;
  --fontbotao: 16px;
  --fontmeio: 14px;
  --fontdropdown: 16px;
  --fontdropcontent: 14px;
}

.container {
  position: relative;
  max-width: var(--largura);
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto var(--DAS28-CRP) var(--esr) var(--atividade_100) var(--atividade_10) var(--atividadeMed) auto auto auto auto;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  z-index: 0;
}

.item {
  background-color: #9eecef;
  border-bottom: 3px solid rgb(194, 240, 249);
  overflow: hidden;
}

.item:last-child {
  border-bottom: none;
}

.titulo {
  padding: 15px 0px 5px 0px;
  font-size: var(--fonttitulo);
  text-align: center;
}

.subt {
  text-align: center;
  font-size: var(--fontsubt);
}

.rotas {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  justify-content: end;
  margin-bottom: 3px;
  margin-right: 3px;
}

.lang a {
  padding: 3px 12px 3px 12px;
  text-decoration: none;
  background-color: black;
  color: white;
  font-size: 11px;
  border-radius: 5px;
  margin-right: 3px;
}

#uni_pct,
#uni_esr {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 1px;
  text-overflow: "";
  width: 60px;
  height: 22px;
}

#uni_pcr {
  height: 22px;
}

.percebe {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto;
  margin: 5px 0px 10px 0px;
}

.classe {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  margin: 10px 12px 5px 12px;
  padding: 0px 0px 0px 0px;
}

.melhor,
.pior {
  width: 64px;
  font-size: var(--fontmelhor);
}

.pior {
  justify-self: end;
  text-align: right;
}

.melhor {
  justify-self: start;
  text-align: left;
}

.meio {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  justify-content: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
}

.titPercebe {
  text-align: center;
  font-size: var(--fonttitpercebe);
}

.pcbpc {
  display: grid;
  grid-template-columns: repeat(11, auto);
  grid-template-rows: auto;
  -moz-column-gap: 2px;
       column-gap: 2px;
  justify-items: center;
}

.pontos {
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--ospontos);
  height: var(--ospontos);
  background-color: white;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgb(177, 175, 175);
  font-weight: bold;
  cursor: pointer;
}

.dropdown:after {
  position: absolute;
  top: 6px;
  right: 3px;
  content: "";
  border: 6px solid transparent;
  border-top: 7px solid black;
  border-bottom: 0 none;
}

.ometodo {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto;
  -moz-column-gap: 5px;
       column-gap: 5px;
  justify-content: center;
  align-items: center;
  margin: 10px 10px;
}

.dropdown {
  position: relative;
  width: 120px;
  color: black;
  font-size: var(--fontdropdown);
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
}

.indica {
  font-size: var(--fontmeio);
}

.dropdown:hover,
.dropbtn:focus {
  background-color: #2980B9;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 90px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  width: 120px;
  font-size: var(--fontdropcontent);
}

.dropdown-content a {
  color: black;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid black;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {
  display: block;
  z-index: 1;
}

.asjuntas {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto auto;
  justify-content: space-around;
  align-items: center;
  row-gap: 8px;
  margin: 5px 10px;
  background-color: rgb(223, 244, 245);
  padding: 5px 5px;
  border-radius: 5px;
}

.esquerda,
.direita {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
}

.juntas {
  grid-area: 1/1/1/3;
  text-align: center;
  font-size: var(--fontjuntas);
}

.indiceAtivid {
  font-size: var(--fontatividade);
}

.zera {
  position: relative;
  width: 22px;
  height: 22px;
  background-color: rgb(255, 38, 0);
  border-radius: 50%;
  margin-left: 5px;
  cursor: pointer;
  border: 1px solid black;
}

.zera:hover {
  background-color: white;
  border: 1px solid black;
}

.zera:hover.zera::after {
  background-color: red;
}

.zera:hover.zera::before {
  background-color: red;
}

.zera::after,
.zera::before {
  position: absolute;
  height: 2px;
  width: 12px;
  background-color: white;
  content: "";
  top: 9px;
  left: 4px;
}

.zera::after {
  transform: rotate(45deg);
}

.zera::before {
  transform: rotate(-45deg);
}

.botao {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: var(--fontbotao);
  padding: 2px 8px;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 4px;
  color: black;
  background-color: white;
  border: 1px solid black;
}

.botao:hover {
  color: white;
  background: black;
}

.oinput {
  width: 36px;
  text-align: right;
  border-radius: 5px;
  cursor: pointer;
}

.painelE,
.painelD {
  position: absolute;
  width: 100%;
  height: 100%;
  left: calc(var(--largura) * -1);
  top: 0px;
  background: rgba(235, 233, 233, 0.8);
  z-index: 1;
}

.painelD {
  left: var(--largura);
}

.molduraPainel {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2px solid black;
}

.ladoE {
  position: relative;
  width: 310px;
  height: 360px;
  margin-left: auto;
  margin-right: auto;
}

.esconde {
  display: none;
}

.docanvas {
  width: var(--largura);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dofecha {
  padding-bottom: 5px;
}

.fecha {
  justify-self: end;
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: 4px;
}

.fecha::after,
.fecha::before {
  position: absolute;
  content: "";
  width: 17px;
  height: 3px;
  background-color: black;
  left: 3px;
  top: 10px;
}

.fecha::after {
  transform: rotate(-45deg);
}

.fecha::before {
  transform: rotate(45deg);
}

.fecha:hover {
  background-color: red;
  border: 1px solid black;
}

.fecha:hover.fecha::after {
  background-color: white;
}

.fecha:hover.fecha::before {
  background-color: white;
}

.asimg {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.otipo {
  text-align: center;
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: var(--fontotipo);
}

.sobreM {
  position: absolute;
  border: 1px solid black;
  z-index: 2;
}

.sobre {
  position: absolute;
  z-index: 1;
}

.reseta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.btonReset {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 11px;
}

.getdata {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 30px 20px auto;
  justify-items: center;
  align-items: center;
}

.ovisor {
  width: 67px;
  text-align: center;
}

.slide {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  height: 36px;
}

.oslide {
  width: var(--larguraSlide);
  height: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: linear-gradient(to right, #afa84c, #f44336);
  border-radius: 5px;
  outline: none;
  transition: background 0.3s ease;
}

.oslide:hover {
  background: linear-gradient(to right, #66bb6a, #ef5350);
}

.oslide::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ffeb3b, #f44336);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -webkit-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}

.oslide::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.oslide::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #ffeb3b, #f44336);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  -moz-transition: transform 0.2s ease;
  transition: transform 0.2s ease;
}

.oslide::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.bolinha {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid black;
  cursor: pointer;
}

.maismenos {
  position: relative;
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  border: 1px solid blue;
  cursor: pointer;
}

.maismenos:hover {
  background-color: blue;
  border-color: white;
}

.maismenos:hover.maismenos::after {
  background-color: white;
}

.maismenos:hover.bolamais::before {
  background-color: white;
}

.maismenos::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 4px;
  background-color: black;
  top: 12px;
  left: 4px;
}

.bolamais::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 4px;
  background-color: black;
  top: 12px;
  left: 4px;
  transform: rotate(90deg);
}

.asunidades {
  text-align: center;
}

.atividade {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}

.janela {
  position: relative;
  width: 260px;
  height: 100px;
  margin: 10px auto;
  perspective: 1000px;
  overflow: hidden;
}

.roda {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(-80px);
  transform-style: preserve-3d;
  transition: 2s;
}

.vitrine {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  align-items: center;
  position: absolute;
  width: 250px;
  height: 100%;
  background-color: white;
  border: 2px solid rgb(54, 188, 233);
}

.vitrine:nth-child(1) {
  transform: rotateX(0deg) translateZ(80px);
}

.vitrine:nth-child(2) {
  transform: rotateX(90deg) translateZ(80px);
}

.vitrine:nth-child(3) {
  transform: rotateX(180deg) translateZ(80px);
}

.vitrine:nth-child(4) {
  transform: rotateX(270deg) translateZ(80px);
}

.qmetodo,
.resultado,
.faixa,
.extenso {
  width: 100%;
}

.resultado {
  font-size: 18px;
}

.referencia,
.areferencia {
  padding: 2px 5px 4px 20px;
  text-indent: -15px;
  font-size: var(--referenciaFontsize);
  font-weight: bold;
}

.referencia {
  font-style: italic;
  text-decoration: underline;
}

.areferencia {
  font-size: var(--areferenciaFontsize);
  font-weight: normal;
}

@media screen and (max-width: 480px) {
  :root {
    --largura: 400px;
    --ospontos: 32px;
    --larguraSlide: 320px;
    --fonttitulo: 19px;
    --fontsubt: 12px;
    --fonttitpercebe: 16px;
    --fontjuntas: 16px;
    --fontbotao: 12px;
    --fontmelhor: 12px;
    --fontmeio: 12px;
    --fontatividade: 16px;
    --fontotipo: 16px;
    --referenciaFontsize: 12px;
    --areferenciaFontsize: 11px;
    --fontdropdown: 16px;
  }
}
@media screen and (max-width: 420px) {
  :root {
    --largura: 400px;
    --ospontos: 32px;
    --larguraSlide: 310px;
  }
}
@media screen and (max-width: 393px) {
  :root {
    --largura: 370px;
    --ospontos: 24px;
    --larguraSlide: 290px;
  }
}
@media screen and (max-width: 375px) {
  :root {
    --largura: 380px;
    --ospontos: 24px;
    --larguraSlide: 250px;
  }
}
@media screen and (max-width: 360px) {
  :root {
    --largura: 346px;
    --ospontos: 22px;
    --larguraSlide: 260px;
  }
}
@media screen and (max-width: 320px) {
  :root {
    --largura: 310px;
    --ospontos: 24px;
    --larguraSlide: 240px;
    --fonttitulo: 16px;
    --fontsubt: 11px;
    --fontdropdown: 14px;
    --fontatividade: 14px;
    --fonttitpercebe: 14px;
    --fontjuntas: 14px;
    --fontbotao: 10px;
    --fontotipo: 14px;
    --fontdropcontent: 13px;
  }
  .fecha {
    margin-left: 5px;
  }
}