@font-face {
  font-family: "Feather Bold";
  src: url("../fonts/14936bb7a4b6575fd2eee80a3ab52cc2.eot");
  src: url("../fonts/14936bb7a4b6575fd2eee80a3ab52cc2.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/14936bb7a4b6575fd2eee80a3ab52cc2.woff") format("woff"),
    url("../fonts/14936bb7a4b6575fd2eee80a3ab52cc2.woff2") format("woff2"),
    url("../fonts/14936bb7a4b6575fd2eee80a3ab52cc2.ttf") format("truetype"),
    url("../fonts/14936bb7a4b6575fd2eee80a3ab52cc2.svg#Feather Bold")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* font-family: "Feather Bold"; */
@font-face {
  font-family: "DIN Next Rounded LT W01 Regular";
  src: url("../fonts/ab596f21664c5582567537d241e2a53e.eot");
  src: url("../fonts/ab596f21664c5582567537d241e2a53e.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/ab596f21664c5582567537d241e2a53e.woff") format("woff"),
    url("../fonts/ab596f21664c5582567537d241e2a53e.woff2") format("woff2"),
    url("../fonts/ab596f21664c5582567537d241e2a53e.ttf") format("truetype"),
    url("../fonts/ab596f21664c5582567537d241e2a53e.svg#DIN Next Rounded LT W01 Regular")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* font-family: "DIN Next Rounded LT W01 Regular"; */

@font-face {
  font-family: "DIN Next Rounded LT W01 Bold";
  src: url("../fonts/d778c9af6f0c7bfb6f10d9e34e71a43f.eot");
  src: url("../fonts/d778c9af6f0c7bfb6f10d9e34e71a43f.eot?#iefix")
      format("embedded-opentype"),
    url("../fonts/d778c9af6f0c7bfb6f10d9e34e71a43f.woff") format("woff"),
    url("../fonts/d778c9af6f0c7bfb6f10d9e34e71a43f.woff2") format("woff2"),
    url("../fonts/d778c9af6f0c7bfb6f10d9e34e71a43f.ttf") format("truetype"),
    url("../fonts/d778c9af6f0c7bfb6f10d9e34e71a43f.svg#DIN Next Rounded LT W01 Bold")
      format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* font-family: "DIN Next Rounded LT W01 Bold"; */

:root {
  /* Dashboard */
  --color-none: #ffffff00;
  --color-bg-dashboard-progressbar: #37464f;
  --color-text-gray: #CED5DA;
  --color-danger: #f03c3c;
  --color-dashboard-background: #131f24;

  --color-footer-correct: #202F36;
  --color-footer-text-correct: #78b533;
  --color-footer-text-incorrect: #db4d4d;

  /* Azul Escuros e Médios */
  --color-dark-blue: #131f24;
  --color-blue: #1899d6;
  --color-blue-light: #1cb0f6;

  /* Verde */
  --color-green-dark: #202f36;
  --color-green: #58a700;
  --color-green-light: #58cc02;

  /* Roxo */
  --color-purple: #3f85a7;

  /* Cinzas */
  --color-gray-100: #dce6ec;
  --color-gray-200: #e5e5e5;
  --color-gray-300: #f7f7f7;
  --color-white: #ffffff;

  /* Outros */
  --color-border-01: rgba(202, 202, 202, 0.15);

  /* Fontes */
  --font-feather: "Feather Bold", sans-serif;
  --font-din-regular: "DIN Next Rounded LT W01 Regular", sans-serif;
  --font-din-bold: "DIN Next Rounded LT W01 Bold", sans-serif;

  /* Espaçamento */
  --space-0: 0rem;
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 1rem; /* 16px */
  --space-4: 1.5rem; /* 24px */
  --space-5: 3rem; /* 48px */
}
body {
  box-sizing: border-box;
}
/* Grid Landing Page */
.limit_grid_sm {
  margin: 0 auto;
  max-width: 980px;
  width: 100%;
}

/* Grid do App */
.limit_grid_all {
  margin: 0 auto;
  max-width: calc(100% - 40px);
}

/* Fontes */
.font-din-bold {
  font-family: var(--font-din-bold);
}
.font-feather{
  font-family: var(--font-feather);
}
.font-din-regular {
  font-family: var(--font-din-regular);
}

/* Color */
.color-danger {
  color: var(--color-danger);
}
.bg-dashboard-color {
  background-color: var(--color-dashboard-background);
}
.bg-dashboard-progressbar {
  background-color: var(--color-bg-dashboard-progressbar);
}
.bg-footer-correct-app{
  background-color: var(--color-footer-correct);
}
.bg-success{
  background-color: #58cc02 !important;
}
.text-dark{
  color: var(--color-dark-blue) !important;
}
.text-gray{
  color: var(--color-text-gray);
}
.text-footer-correct{
  color: var(--color-footer-text-correct);
}
.text-footer-incorrect{
  color: var(--color-footer-text-incorrect);
}
/* Larguras */

.max-300 {
  max-width: 300px !important;
}
.max-345 {
  max-width: 345px !important;
}

.max-400 {
  max-width: 400px !important;
}
.max-500 {
  max-width: 500px !important;
}
.max-600 {
  max-width: 600px !important;
}
.max-700 {
  max-width: 700px !important;
}

/* Bordas */
.border-sm {
  border: 2px solid var(--color-border-01);
}
.border-top-sm {
  border-top: 2px solid var(--color-border-01);
}
.border-end-sm {
  border-right: 2px solid var(--color-border-01);
}
.border-bottom-sm {
  border-bottom: 2px solid var(--color-border-01);
}
.border-start-sm {
  border-left: 2px solid var(--color-border-01);
}

.border-md {
  border: 4px solid var(--color-border-01);
}
.border-top-md {
  border-top: 4px solid var(--color-border-01);
}
.border-end-md {
  border-right: 4px solid var(--color-border-01);
}
.border-bottom-md {
  border-bottom: 4px solid var(--color-border-01);
}
.border-start-md {
  border-left: 4px solid var(--color-border-01);
}

.border-0 {
  border: none;
}
.border-top-0 {
  border-top: none;
}
.border-end-0 {
  border-right: none;
}
.border-bottom-0 {
  border-bottom: none;
}
.border-start-0 {
  border-left: none;
}

/* Botões */

.btn-duo {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 3rem;
  font-size: 1.25rem;
  border-radius: 0.75em;
  min-height: 52px;
  transition: all 0.2s ease-in-out;
  font-family: var(--font-din-bold);
  text-transform: uppercase;
  width: fit-content;
  min-width: 281px;
}

.btn-dashboard {
  background-color: var(--color-none);
  border-color: var(--color-green-dark);
  border-width: 2px;
  color: var(--color-white);
}
.btn-dashboard:hover {
  background-color: var(--color-green-dark);
}
.btn-dashboard.active {
  border-color: var(--color-purple);
  color: var(--color-purple);
  background-color: var(--color-green-dark) !important;
}

/* Azul padrão */
.btn-primary {
  background-color: var(--color-blue-light);
  border-color: var(--color-blue-light);
  color: var(--color-white);
  border-bottom: 6px solid var(--color-blue) !important;
}
.btn-primary:hover {
  background-color: var(--color-blue-light);
  border-color: var(--color-blue-light);
}

/* Verde (sucesso) */
.btn-success {
  background-color: var(--color-green-light);
  border-color: var(--color-green-light);
  color: var(--color-white);
  border-bottom: 6px solid var(--color-green) !important;
}
.btn-success:hover {
  background-color: var(--color-green-light);
  border-color: var(--color-green-light);
}

/* Cinza claro (secundário) */
.btn-secondary {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-200);
  color: var(--color-dark-blue);
  border-bottom: 6px solid var(--color-gray-100) !important;
}
.btn-secondary:hover {
  background-color: var(--color-gray-300);
  border-color: var(--color-gray-200);
}

/* Outline (versão com fundo transparente) */
.btn-outline-primary {
  background-color: transparent;
  border: 2px solid var(--color-blue);
  color: var(--color-blue);
}
.btn-outline-primary:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

/* Input duo */
.input-duo:focus {
  outline: none;
}
.input-duo {
  min-height: 52px;
  border-radius: 12px;
  padding: 0 10px;
  border: 4px solid var(--color-border-01);
  background-color: var(--color-gray-300);
  color: var(--color-dark-blue);
  font-size: 1.5em;
  font-family: var(--font-din-bold);
}
/* Landing Page */

.header-site-lp > div + .row {
  height: 100%;
  width: 100%;
}

.header-site-lp {
  min-height: 77px;
  height: 100%;
}
.img-container-header-site-lp {
  position: relative;
  max-width: 262px;
}
.img-container-header-site-lp > img {
  position: relative;
  width: 100%;
}
.main-site-lp > .container > .row {
  min-height: calc(100vh - 77px);
}

.img-container-duo-home {
  position: relative;
  max-width: 311px;
  max-height: 299px;
}
.img-container-duo-home > img {
  width: 100%;
}

/* LP - Cadastro */

.container-choice-avatar-img > img {
  width: 85%;
  height: 85%;
}
.container-choice-avatar-img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 12px;

  cursor: pointer;
}
.container-choice-avatar-img:hover {
  background-color: var(--color-gray-200);
}
.container-choice-avatar-img:focus {
  background-color: var(--color-dark-blue);
}
.container-choice-avatar-img.active{
  background-color: var(--color-gray-200);
}
/*  APP */
.body-dashboard {
  min-height: 100vh;
}
.img-container-sidebar-dashboard-app {
  margin-top: 25px;
  max-width: 262px;
  max-height: 51px;
}
.img-container-sidebar-dashboard-app > img {
  width: 100%;
}
.ul-sidebar-dashboard-app {
  padding: 0;
  margin-top: 52px;
}
.ul-sidebar-dashboard-app > li {
  margin-top: 14px;
}

.main-dashboard-app {
  /* background-color: #1899d6; */
}
.footer-main {
}

.text-content-main-dashboard-app, .answers-content-main-dashboard-app{
  max-width: 729px;
  width: 100%;
}
.li-answer.active{
  background-color: var(--color-green-dark) !important;
}

.answers-content-main-dashboard-app > ul >  li:hover{
  background-color: var(--color-green-dark);
}

/* Ranking */
.personal-scoreboard{
  gap: 20px;
}
.hr-ranking-dashboard{
  border-bottom: 2px solid var(--color-border-01);
}
.container-li-rankinng-profile-img{
  max-width: 54px;
}
.container-li-rankinng-profile-img> img{
  position: relative;
  width: 100%;
}
.ranking-profiles > li{
  max-width: 450px;
  width: 100%;
}
.li-ranking-info {
  position: relative;
  left: 20px;
}
.ranking-profiles{
  max-height: 500px;
  overflow-y: scroll;
}