@import url('https://fonts.cdnfonts.com/css/inter');

/* Colocando a fonte do tema para "Inter" */
* {
    font-family: 'Inter', sans-serif;
}

#accessibility-bar {
  height: 32px;
  background-color: #043463;

  ul {
    margin: 0;
    padding-left: 0;

    display: flex;
    flex-direction: row;

    li {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
  }
}

.keyboard-options {
  li a {
    padding: 0;
    border: none;
    margin-right: 16px;
  }

  li:last-child a {
    margin-right: 0;
  }

  a,
  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    font-size: 12px;
    line-height: 16px;
    font-weight: 500;

    color: white;
  }

  a:hover,
  button:hover {
    color: #405189;
  }
}

.accessibility-number {
  display: inline-block;
  text-align: center;

  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-left: 4px;

  font-size: 8px;
  font-weight: 700;

  color: #043463;
  background-color: #FFF;
}

.accessibility-options {
  li {
    margin-left: 48px;
  }

  li:first-child {
    margin-left: 0;
  }

  a {
    font-size: 12px;

    font-style: normal;
    font-weight: 500;
    line-height: 15px;
    text-align: left;

    color: white;
  }

  a:hover {
    color: #405189;
  }
}

#page-topbar {
  color: white;
  background-color: #043463;
}

.navbar {
  box-shadow: none;
  padding: 10px 0;
}

.navbar-nav {
  align-items: center;
  justify-content: space-between;
}

div#navbarNav.show>ul.navbar-nav,
div#navbarNav.collapsing>ul.navbar-nav {
  align-items: flex-start;
}

.nav-item {
  color: white;

  margin-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;

  a {
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
  }
}

.nav-item:last-child {
  margin-right: 0;
}

.navbar-brand {
  width: 32px;
  transform: scale(0.8);
  margin-right: 0;
}

.navbar-toggler-icon {
  color: white;
}

.icons-notification {
  display: flex;
  align-items: center;
}

.header-logged-buttons {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  margin-left: 20px;
  background-color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  svg {
    transform: scale(0.9);
  }

  i {
    color: black;
    display: flex;
  }
}

.header-logged-buttons:first-child {
  margin-left: 0;
}

ul {
  list-style: none;
}

.nav-link {
  color: white;
  font-weight: 500;
  white-space: nowrap;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 12px;
  padding-right: 12px;
}

a:hover {
  color: white;
}

.access-button {
  color: #043463;
  border-radius: 60px;
  background-color: white;
  padding: 10px 20px;

  a {
    color: #043463;
  }
}

img.access-button {
  background-color: transparent ;
  padding: 0;
}

.dark-mode {
  #accessibility-bar {
    background-color: var(--background-color-dark);
    color: var(--text-color-dark);

    a,
    a:hover,
    a:active {
      text-decoration: underline !important;
    }

    a:active {
      color: #FFF333;
    }

    .accessibility-number {
      color: #000;
      background-color: #FFF;
    }
  }

  .navbar-nav>.nav-item:hover>.nav-link {
    color: #fff;
  }

  .access-button>a {
    color: #000
  }

  .navbar-nav>.access-button:hover>.nav-link {
    color: #000 !important;
  }

  a:active {
    color: #FFF333;
  }
}