/* Defini��o de temas */
@import url("site.css");

@import url("https://fonts.googleapis.com/css2?family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Zilla+Slab:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

body {
    background-color: #FFF !important;   
}

:root {
  --system-purple-800: #22032d;
  --system-purple-700: #380a4a;
  --system-purple-600: #5f1a77;
  --system-purple-500: #62177c;
  --system-purple-400: #814b96;
  --system-purple-300: #a331bc;
  --system-purple-200: #f6dcff;
  --system-purple-100: #f1e6f4;
  --system-common-beige: #fbf4ec;
  --system-common-white: #ffffff;
  --system-common-light-grey: #f1f2f6;
  --system-common-dark-grey: #8c8c8c;
  --system-common-dark-blue: #1e234b;
  --system-features-tomato-500: #ff4f51;
  --system-features-orange-500: #ffb400;
  --system-features-aquamarine-500: #36dcb4;
  --system-status-sucess: #0fc70e;
  --system-status-error: #f20000;
  --system-conhecimento-yellow-green-500: #8aaf00;
  --system-conhecimento-pink-500: #f82c71;
  --system-conhecimento-orange-500: #ff7a01;
  --system-conhecimento-blue-500: #53b5ff;

  --texto-claro: #fff;
  --lvl-tag: #f82c71;
  --subtitulo-cor: #d10000;
  --bg-claro: #fff;
  --bg-claro-texto: #f8f5ff;
  --bg-inventario-conquista: #53b5ff;
  --bg-inventario-personagem: lightgreen;
  --bg-barra-progresso: #5dbd45;
  --bg-inventario-titulos: lightcoral;
  --texto-cinza: #a0a0a0;
  --texto-escuro: #151515;
  --bg-input: #efe7f4;
  --titulo-escuro: #380a4a;
  --bg-botao-claro: #5f1a77;
  --bg-botao-escuro: #8f23b7;
  --bg-botao-escuro-hover: #62177c;
  --bg-card-lvl-media-botao: #ffcc00;
  --bg-card-lvl-media: #fff178;
  --bg-card-lvl-acima: #e5fbe5;
  --bg-card-lvl-acima-botao: #5cd3a5;
  --bg-card-lvl-abaixo: #ffebe5;
  --bg-card-lvl-abaixo-botao: #fb5259;
  --hue: 240;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

h1 {
  position: absolute;
  z-index: -1000;
  top: -100000px;
  left: -1000000px;
}

h1,
h2,
h3 {
  font-family: Zilla Slab, serif;
}

.w-max-content {
    width: max-content;
}

.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* cores para textos */
.cor-branca {
  color: var(--system-common-white);
}

.cor-cinza-dark {
  color: var(--system-common-dark-grey) !important;
}

.cor-vermelha {
  color: var(--system-status-error);
}

.cor-escuro-azul {
  color: var(--system-common-dark-blue);
}

/* cores para botoes */
.cor-botao-principal {
  background-color: var(--system-purple-500) !important;
  color: var(--system-common-white) !important;
}

.cor-botao-secundario:hover {
  background-color: var(--system-purple-700) !important;
  color: var(--system-common-white) !important;
}

.cor-botao-secundario {
  border: solid 1px var(--system-purple-700) !important;
  color: var(--system-purple-700) !important;
}

.cor-botao-principal:hover {
  background-color: var(--system-purple-700) !important;
  color: var(--system-common-white) !important;
}

.cor-botao-cancelar {
  background-color: var(--system-features-tomato-500) !important;
  color: var(--system-common-white) !important;
  border: 1px solid var(--system-purple-300) !important;
}

.cor-botao-cancelar:hover {
  background-color: var(--system-status-error) !important;
}