/* **************** */
/* BELOW 1312PX (smaller desktop) */
/* **************** */
@media (max-width: 82em) {
  .sidebar {
    width: 19rem;
  }

  /* .container {
    grid-template-columns: 1fr 6fr;
  } */

  .sidebar-logo {
    padding: 2.6rem 7.4rem;
  }

  .name {
    display: none;
  }

  .btn--,
  .list {
    border-radius: inherit;
  }

  .btn:link,
  .btn:visited {
    display: none;
  }

  .main-menu-link_:link,
  .main-menu-link_:visited {
    display: none;
  }

  .main-menu-link:link,
  .main-menu-link:visited {
    display: none;
  }
}

/* **************** */
/* BELOW 1152PX (Landscape Tablets) */
/* **************** */

@media (max-width: 72em) {
  html {
    font-size: 56.25%;
  }

  .container {
    grid-template-columns: 1fr 10fr;
  }

  .sidebar-logo {
    padding: 2.6rem 3.5rem;
  }

  .sidebar {
    padding: 3.5rem 3rem 2.8rem 1.5rem;
    width: 11rem;
  }
  .help {
    width: 2rem;
    height: 2rem;
    padding: 0.6rem;
    left: 2rem;
  }
}

/* **************** */
/* BELOW 992PX (Tablets) */
/* **************** */

@media (max-width: 62em) {
  /* html {
    font-size: 50%;
  } */
  /* 
  .container {
    grid-template-columns: 1fr 9fr;
  } */

  .view_container {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary {
    grid-template-columns: 1fr;
  }

  .sidebar {
    width: 23rem;
    border-radius: 0 7rem 0 0;
  }

  .logo {
    width: 3rem;
    height: 3rem;
  }

  .sidebar-logo {
    padding: 1rem 2rem;
  }

  .dashboard-name {
    font-size: 3rem;
    padding-top: 1rem;
  }

  .back-icon {
    display: inline;
  }

  .btn-- {
    margin-top: 2rem;
  }

  .btn--,
  .list {
    border-radius: 2.4rem;
  }

  .btn:link,
  .btn:visited {
    display: inline;
  }

  .main-menu-link_:link,
  .main-menu-link_:visited {
    display: inline;
  }

  .main-menu-link:link,
  .main-menu-link:visited {
    display: inline;
  }
  .help {
    width: 4.5rem;
    height: 4.5rem;
    left: 4rem;
  }
  .bell-icon {
    padding: 1rem;
  }

  .search {
    display: none;
  }

  .maneager-n {
    display: none;
  }

  .search-out {
    display: inline;
    width: 3rem;
    height: 3rem;
  }

  .manager-img-- {
    display: inline;
  }
}

/* **************** */
/* BELOW 752PX (Smaller Tablets) */
/* **************** */

@media (max-width: 47em) {
  .view_container {
    grid-template-columns: 1fr;
  }

  .container {
    grid-template-columns: 1fr;
  }

  .dashboard-name {
    display: none;
  }

  .help-icon {
    display: none;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
  }

  .main-nav {
    background-color: #000;
    position: absolute;
    top: 9.5rem;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translatex(-100%);
    z-index: 99;

    display: flex;
    justify-content: flex-start;
    transition: all 0.5s;

    /* Hide navigation */
    opacity: 0;

    pointer-events: none;

    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    top: 8rem;
  }

  .openclose {
    transform: translatex(-0);
  }

  .header.icon-switched .icon-mobile-nav[name="chevron-forward-outline"] {
    display: none;
  }

  .header.icon-switched .icon-mobile-nav[name="chevron-back-outline"] {
    display: block;
  }

  .logo-he {
    gap: 1rem;
  }
}

/* **************** */
/* BELOW 528PX (Phones) */
/* **************** */

@media (max-width: 33em) {
  .header {
    padding: 0 1.5rem 0 0;
  }

  .overview {
    padding: 1.8rem 1.5rem 2rem 2rem;
  }

  .logo-he {
    gap: 0.1rem;
  }

  .summary-bar {
    max-width: 60rem;
    overflow-x: auto;
  }

  .table-project-summary tr {
    font-size: 1.8rem;
  }

  .table-project-summary {
    width: 70rem;
  }

  .table-project-summary th {
    font-size: 1.8rem;
  }
  .pro-summary {
    width: 70rem;
  }
  .header-sum {
    font-size: 2rem;
  }
  .table-project-summary td span.s1 {
    font-size: 1.4rem;
  }

  .table-project-summary td span.p1 {
    font-size: 1rem;
    padding: 0.8rem 0.4rem;
  }
  .table-project-summary td span.p2 {
    font-size: 1rem;
    padding: 0.8rem 0.5rem;
  }
  .list-task {
    width: 70rem;
  }
  .table-links {
    width: 40rem;
  }
  .border {
    width: 69rem;
  }
}