*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%;
  box-sizing: border-box; }

body {
  font-family: 'Roboto', sans-serif;
  background-color: #142240;
  color: #fff; }

/* ===========
===== Navbar =====
===============*/
.navbar-wrapper {
  background-color: #000; }

.navbar-brand {
  font-size: 3rem;
  margin-left: 2rem; }

.nav-item {
  margin-left: 1rem; }

.nav-link {
  font-size: 2rem;
  text-transform: capitalize;
  color: #fff !important;
  padding: 1rem 2rem !important; }
  .nav-link:hover {
    text-decoration: underline; }
  .nav-link i {
    font-size: 2.4rem;
    margin-left: 1rem; }

/* ===========
===== Action Headings =====
===============*/
.action {
  padding: 4rem 0; }
  .action__heading {
    font-size: 4rem;
    font-weight: 600;
    text-transform: capitalize; }
  .action__update {
    font-size: 2rem;
    line-height: 1.3; }
    .action__update span {
      font-size: 1.6rem; }

/* ===========
===== Search =====
===============*/
.search {
  margin-bottom: 3rem;
  margin-top: 2rem; }
  .search .form-control {
    font-size: 2rem;
    padding: 2rem 1rem; }

.table {
  font-size: 14px; }
  .table-wrapper {
    background-color: #06779B;
    padding: 3rem 2rem; }
  .table tbody {
    background-color: #A9E7BA; }
  .table td {
    text-align: center;
    min-width: 140px !important;
    vertical-align: middle;
    line-height: 1.3; }
  .table thead {
    background-color: #142240; }
  .table th {
    position: relative;
    color: #fff; }
    .table th::after {
      position: absolute;
      right: 15px;
      top: 50%;
      font-family: "Font Awesome 5 Free";
      content: "\f0dc";
      transform: translateY(-50%);
      cursor: pointer;
      color: #169BD5;
      font-weight: 900; }
  .table tbody tr td:first-child,
  .table tbody tr td:nth-child(5),
  .table tbody tr td:nth-child(6) {
    position: relative; }
    .table tbody tr td:first-child::after,
    .table tbody tr td:nth-child(5)::after,
    .table tbody tr td:nth-child(6)::after {
      position: absolute;
      right: 5px;
      top: 12px;
      font-family: "Font Awesome 5 Free";
      content: "\f0b0";
      transform: translateY(-50%);
      cursor: pointer;
      color: #99B19F;
      font-weight: 900;
      font-size: 9px; }
  .table tbody tr td:nth-child(9) {
    font-size: 12px; }
  .table tbody tr td:nth-child(5) {
    font-size: 14px; }
  .table__btn ul {
    display: flex;
    margin-bottom: 0; }
    .table__btn ul li {
      list-style: none; }
      .table__btn ul li a {
        color: #fff;
        font-size: 17px;
        background-color: #142240;
        border: 1px solid #fff;
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px 10px 0 0;
        width: 150px; }
        .table__btn ul li a:hover {
          text-decoration: none; }
  .table__wrapper {
    overflow-x: scroll; }

/* ===========
===== Responsive =====
===============*/
@media (max-width: 991.98px) {
  .table-wrapper {
    padding: 2rem 0rem; } }

@media (max-width: 767.98px) {
  .table__btn ul {
    justify-content: center; }
  .table__btn ul li a {
    padding: 8px 15px;
    font-size: 12px;
    width: 100px; } }

@media (max-width: 575.98px) {
  .table__btn ul li a {
    padding: 8px 10px;
    font-size: 10px;
    width: 70px; } }