@import url('https://fonts.googleapis.com/css2?family=Lato&family=Poppins&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box
}

body {
  background-image: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
 
  font-family: 'Poppins', sans-serif
}

.wrapper {
  background-color: azure;
  color: black;
  /*min-height: 100px;
  max-width: 100%;*/
  min-height: 100px;
  max-width: 800px;
  margin: 10px auto;
  padding: 10px 30px
 
}

.dark,
.input:focus {
  background-color: azure;
  color: black;
}

.navbar {
  padding: 0.5rem 0rem
}

.navbar .navbar-brand {
  font-size: 30px;
  color: black;
}

#income {
  border-right: 1px solid black
}

.notify {
  display: none
}

.nav-item .nav-link .fa-bell-o,
.fa-long-arrow-down,
.fa-long-arrow-up {
  padding: 10px 10px;
  background-color: #222;
  border-radius: 50%;
  position: relative;
  font-size: 18px
}

.nav-item .nav-link .fa-bell-o::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #ffc0cb;
  right: 10px;
  top: 10px
}

.nav-item input {
  border: none;
  outline: none;
  box-shadow: none;
  padding: 3px 8px;
  width: 75%;
  color: black
}

.nav-item .fa-search {
  font-size: 18px;
  color: black;
  cursor: pointer
}

.navbar-nav:last-child {
  display: flex;
  align-items: center;
  width: 40%
}

.navbar-nav .nav-item {
  padding: 0px 0px 0px 10px
}

.navbar-brand p {
  display: block;
  font-size: 14px;
  margin-bottom: 3px
}

.text {
  color: black
}

.money {
  font-family: 'Lato', sans-serif
}

.fa-long-arrow-down,
.fa-long-arrow-up {
  padding-left: 12px;
  padding-top: 8px;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 100;
  color: #28df99
}

.fa-long-arrow-up {
  /*background-color: #7fad39;*/
  color: #ffa500
}

.nav.nav-tabs {
  border: none
}

.nav.nav-tabs .nav-item .nav-link {
  color: black;
  border: none
}

.nav.nav-tabs .nav-link.active {
  /*background-color: #7fad39;*/
  border: none;
  color: black;
  border-bottom: 4px solid #7fad39
}

.nav.nav-tabs .nav-item .nav-link:hover {
  border: none;
  color: black
}

.nav.nav-tabs .nav-item .nav-link.active:hover {
  border-bottom: 4px solid #7fad39
}

.nav.nav-tabs .nav-item .nav-link:focus {
  border-bottom: 4px solid #7fad39;
  color: black
}

.table-dark {
  background-color: azure;
  color: black;
}

.table thead th {
  text-transform: uppercase;
  color: black;
  font-size: 12px
}

.table thead th,
.table td,
.table th {
  border: none;
  overflow: auto auto
}

td .fa-briefcase,
td .fa-bed,
td .fa-exchange,
td .fa-cutlery {
  color: #ff6347;
  background-color: #444;
  padding: 5px;
  border-radius: 50%
}

td .fa-bed,
td .fa-cutlery {
  color: #40a8c4
}

td .fa-exchange {
  color: #b15ac7
}

tbody tr td .fa-cc-mastercard,
tbody tr td .fa-cc-visa {
  color: #7fad39;
}

tbody tr td.text-muted {
  font-family: 'Lato', sans-serif
}

tbody tr td .fa-long-arrow-up,
tbody tr td .fa-long-arrow-down {
  font-size: 15px;
  padding-left: 7px;
  padding-top: 3px;
  height: 20px;
  width: 20px
}

.results span {
  color: black;
  font-size: 12px
}

.results span b {
  font-family: 'Lato', sans-serif
}

.pagination .page-item .page-link {
  background-color: lightgray;
  color: black;
  padding: 0.3rem .75rem;
  border: none;
  border-radius: 0
}

.pagination .page-item .page-link span {
  font-size: 16px
}

.pagination .page-item.disabled .page-link {
  background-color: lightgray;
  color: black;
  cursor: crosshair
}

@media(min-width:768px) and (max-width: 991px) {
  .wrapper {
    margin: auto
  }

  .navbar-nav:last-child {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%
  }

  .notify {
    display: inline
  }

  .nav-item .fa-search {
    padding-left: 10px
  }

  .navbar-nav .nav-item {
    padding: 0px
  }
}

@media(min-width: 300px) and (max-width: 767px) {
  .wrapper {
    margin: auto
  }

  .navbar-nav:last-child {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%
  }

  .notify {
    display: inline
  }

  .nav-item .fa-search {
    padding-left: 10px
  }

  .navbar-nav .nav-item {
    padding: 0px
  }

  #income {
    border: none
  }
}

@media(max-width: 400px) {
  .wrapper {
    padding: 10px 15px;
    margin: auto
  }

  .btn {
    font-size: 12px;
    padding: 10px
  }

  .nav.nav-tabs .nav-link {
    padding: 10px
  }
}