@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,600&display=swap");

@font-face {
  font-family: "LEMONMILK-Bold";
  src: url("../fonts/LEMONMILK-Bold.otf");
}

@font-face {
  font-family: "LEMONMILK-Regular";
  src: url("../fonts/LEMONMILK-Regular.otf");
}

:root {
  --dil-cor-fundo: var(--cor-fundo-tab);
  --dil-cor-fundo-resultado: var(--cor-principal);
  /* --dil-cor-primaria: rgb(0, 108, 196); */
  /* --dil-cor-secundaria: rgb(142, 3, 177); */

  --sin-cor-fundo: var(--cor-fundo-tab);
  --sin-cor-fundo-resultado: var(--cor-principal);
  /* --sin-cor-primaria: rgb(72, 172, 48); */
  /* --sin-cor-secundaria: rgb(172, 104, 48); */

  --for-cor-fundo: var(--cor-fundo-tab);
  --for-cor-fundo-resultado: var(--cor-principal);
  /* --for-cor-primaria: rgb(122, 24, 24); */
  /* --for-cor-secundaria: rgb(117, 31, 151); */

  --cor-fundo-pagina: rgba(180, 102, 243, 0.8);
  --cor-fundo-tab: rgba(180, 102, 243, 0.5);
  --cor-principal: rgba(156, 74, 238, 0.5);
  --cor-secundaria: rgba(180, 102, 243, 0.8);
  --cor-secundaria-solida: #b466f3;
  --cor-destaque: rgba(138, 53, 234, 0.8);
  --cor-destaque-solida: #8a35ea;
  --cor-bordas: #c6c6df;
  --cor-fonte: rgb(250, 250, 250);
  --cor-place-holder: rgba(255, 255, 255, 0.4);
  --arrend-borda: 20px;
}

/** Theme variables adjusts **/
:root {
  /* borda botoes */
  --primary-color: var(--cor-principal);
  --primary-color-light: var(--cor-principal);
  /* botoes */
  --lm-button-primary-bg-color: var(--cor-destaque-solida);
  --primary-box-shadow-color-darker: var(--cor-bordas);
  --primary-box-shadow-color: var(--cor-bordas);
  --lm-input-text-color: var(--cor-fonte);
  /* fundo inputs */
  --lm-input-bg-color: var(--cor-destaque);
  /* fundo div % oleo sinergia */
  --lm-input-group-text-bg-color: var(--cor-destaque);
  --lm-input-bg-color-hover: var(--cor-principal);
  --lm-input-placeholder-text-color: var(--cor-place-holder);
  --lm-switch-bg-color: var(--cor-destaque) !important;
  --lm-switch-bg-color-checked: var(--cor-destaque) !important;
  /* bolinha do toogle */
  --lm-switch-slider-bg-color: #a6a6a6;
  /* bolinha do toogle */
  --lm-switch-slider-bg-color-checked: var(--cor-fonte);
  /* borda modo científico */
  --lm-border-color: var(--cor-secundaria);
  /* texto % oleo sinergia */
  --lm-base-text-color: var(--cor-fonte);
  --lm-input-text-color-hover: var(--cor-fonte);
  --lm-base-text-color-light: var(--cor-fonte);
  --lm-alert-text-color: #1a1a1a;
  --content-and-card-spacing: 2rem;
  --lm-modal-content-bg-color: var(--cor-fundo-tab);
  --modal-content-border-radius: var(--arrend-borda);
  color-scheme: only light;
}

/** Padrões **/
body {
  font-family: "Montserrat";
  color: var(--cor-fonte);
  min-width: 360px;
  max-width: 1500px;
}

.bold {
  font-weight: 600;
}

.btn-sm {
  font-weight: 500;
  font-size: 1em;
  height: 2.3em;
  line-height: 1.5em;
}

.bg-color {
  background-color: var(--cor-fundo-pagina);
  height: 100vh;
}

.bg-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("../images/bg-sm.png");
}

.sticky-alerts {
  font-size: 75%;
}

.nome-input {
  padding: 0.5em;
  font-size: 1.1em;
}

.input-campos span {
  font-size: 1.2em;
  padding: 0.3em;
  line-height: 2em;
}

.input-campos input {
  height: 2em;
  margin: auto;
}

.unidade-medida-input {
  width: 35px;
  padding-left: 0.2em;
}

.unidade-medida-input p {
  font-size: 1.2em;
  line-height: 2.5em;
}

.lista-oleos {
  margin-top: 1.3em;
}

.input-gotas-ml {
  margin-top: 0.3em;
  margin-bottom: 0;
  height: 2.2em;
}

#gotas-ml-dil {
  margin-bottom: 1.8em;
}

.input-gotas-ml label {
  font-size: 1.1em;
}

.input-gotas-ml input {
  max-width: 5em;
}

/** Gerais **/
.calc-header {
  padding: 1em 0;
  background-color: var(--cor-secundaria-solida);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 0 15px 0 rgba(0, 0, 0, 0.3);
  font-family: "LEMONMILK-Bold", sans-serif;
  font-size: 110%;
}

.calc-header h1 {
  line-height: 0.7em;
  margin: 0.4em;
  font-weight: 600;
  font-size: 1.5em;
}

.calc-header p {
  font-family: "LEMONMILK-Regular", sans-serif;
  font-size: 60%;
}

main {
  min-height: 75vh;
  
}

.content {
  margin: 0.8em;
}

.calc-footer {
  padding: 16px 0;
  background-color: var(--cor-destaque-solida);
  font-weight: 200;
  letter-spacing: 0.025em;
  line-height: 1.1;
}

.calc-footer .social-links a {
  color: var(--cor-fonte);
  text-decoration: none;
}

.modal .board {
  backdrop-filter: brightness(1.1);
}

/* Diluição */
.tab-dil {
  background-color: var(--dil-cor-fundo);
}

.bg-color-result-dil {
  background-color: var(--dil-cor-fundo-resultado);
}

/*Sinergia*/
.tab-sin {
  background-color: var(--sin-cor-fundo);
}

.bg-color-result-sin {
  background-color: var(--sin-cor-fundo-resultado);
}

/*Fórmula*/

.tab-for {
  background-color: var(--for-cor-fundo);
}

.bg-color-result-for {
  background-color: var(--for-cor-fundo-resultado);
}

.bg-color-result-dil,
.bg-color-result-sin,
.bg-color-result-for {
  min-height: 350px;
  border-radius: var(--arrend-borda);
  background-image: url("../images/gota_gc.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-blend-mode: soft-light;
}

/* TABS */

.tablink {
  background-color: var(--cor-destaque);
  color: var(--cor-fonte);
  cursor: pointer;
  outline: none;
  height: 2.8em;
  font-size: 1.1em;
  line-height: 1.1em;
  font-weight: 600;
  width: calc(100% / 3);
  border: solid var(--cor-principal);
}

.tablink-dil {
  border-radius: var(--arrend-borda) 0px 0px 0px;
  border-width: 0px 2px 2px 0px;
}

.tablink-sin {
  border-width: 0px 0px 2px 0px;
}

.tablink-for {
  border-radius: 0px var(--arrend-borda) 0px 0px;
  border-width: 0px 0px 2px 2px;
}

.tablink:hover {
  filter: brightness(1.025);
}

.tabcontent {
  color: var(--cor-fonte);
  display: none;
  padding: 1em 1em;
  text-align: center;
  border-radius: 0 0 var(--arrend-borda) var(--arrend-borda);
}

/* Oils section */

.oleo,
.modo-cientifico {
  background-color: var(--cor-secundaria);
}

/** Resultado **/

.result-title {
  background-color: var(--cor-secundaria);
  border-radius: var(--arrend-borda);
  display: inline;
  padding: 0.5em;
  font-size: 1.5em;
}

.result-dados {
  font-size: 1.3em;
  padding: 2.5em 0;
}

.result-gotas {
  font-size: 1.2em;
  line-height: 1.2em;
  padding: 10px 0;
}

.result-credit {
  line-height: 1.2em;
  font-weight: 400;
  font-size: 0.8em;
  padding-top: 12em;
}

.img-info {
  height: 3.2em;
  width: auto;
}

.info-texto h3 {
  font-size: 1.2em;
  margin-bottom: 1em;
}

.info-texto p {
  font-size: 1em;
  line-height: 1.1em;
  margin-bottom: 1em;
}

.frase-info {
  font-style: oblique;
}

.info-autor p {
  font-size: 1em;
  margin-bottom: 0;
  line-height: 1em;
}

/* VIDEO Section */
.video-body {
  min-width: 250px !important;
  background-color: var(--cor-fundo-tab);
  border-radius: var(--arrend-borda);
  font-weight: 500;
  opacity: 0.85;
}
.text-tutorial {
  padding-bottom: 15px;
}

.iframe-tutorial iframe {
  min-height: 315px;
  width: 100%;
  border-radius: var(--arrend-borda);
}

/** Scroll bar **/
body::-webkit-scrollbar {
  width: 16px !important; /* width of the entire scrollbar */
}
body::-webkit-scrollbar-track {
  background: var(--cor-secundaria); /* color of the tracking area */
}
body::-webkit-scrollbar-thumb {
  background-color: var(--cor-destaque); /* color of the scroll thumb */
  border-radius: 20px; /* roundness of the scroll thumb */
  border: 4px solid var(--cor-secundaria); /* creates padding around scroll thumb */
}
body::-webkit-scrollbar-thumb:hover {
  background: var(--cor-principal); /* Handle on hover */
}

@media (min-width: 768px) {
  .bg-image {
    background-image: url("../images/bg-md.png");
  }

  .nome-input {
    margin: auto;
  }
}

@media (min-width: 993px) {
  .tabcontent {
    min-height: 364px;
  }
}