.app {
      min-height: calc(100vh - 103px);
      background: #E5E5E5;
      font-family: Lato;
      font-style: normal;
      font-weight: normal;
    }
    @media (min-width: 600px) {
      .header-fixed .app-body {
        margin-top: 0;
      }
    }
    #permissions .form-check {
      clear: both;
    }
    /* .app-header .nav-item .nav-link .img-avatar {
      height: auto;
    } */
    .project-card {
      width: calc(100% / 5 - 3rem);
      max-width: 290px;
    }
    @media (max-width: 1500px) {
      .project-card {
        width: calc(100% / 4 - 3rem);
      }
    }
    @media (max-width: 1200px) {
    #projects .flex {
        justify-content: space-between;

    }
      .project-card {
        width: calc(100% / 2 - 2rem);
        margin-right: 0 !important;
      }
    }
    @media (min-width: 992px) {
      .header-fixed .app-body {
        height: calc(100vh - 72px);
      }
      .navbar-toggler {
        display: none;
      }
    }

    @media (max-width: 992px) {

      .app-header .navbar-brand {
        position: relative;
        margin-left: 0;
        left: 0;
      }
      
      .sidebar {
        width: 200px;
      }
    }

    .sidebar .nav {
      background: #fafafa;
    }
    .sidebar .nav-link {
      color: #38455D;
    }
    .sidebar .nav-link.active {
      color: #64728C;
      background: #E5E5E5;
    }
    .sidebar .nav-link:hover {
      color: #64728C;
      background: #E5E5E5;
    }
    .user-img {
      width: 80px;
      max-height: 80px;
      border-radius: 50%;
      margin-right: 10px;
    }

    p.small,
    .user-info .desc p {
      font-size: 10px;
      margin: 0;
      line-height: 16px;
    }

    .action-btns {
      float: right;
    }

    .action-btns .btn {
      padding: 0;
    }

    .add-new {
      padding: 18px 20px;
      border-radius: 50%;
    }

    .stage-info {
      display: inline-block;
      color: white;
      line-height: 17px;
    }

    .stage-info span {
      padding: 4px 12px;
      color: #000;
      min-width: 80px;
      display: inline-block;
      text-align: center;
    }

    .card-add {
      font-size: 72px;
      display: block;
      text-align: center;
      transition: all .3s ease-in;
    }

    .card-add:hover {
      text-decoration: none;
    }

    .card-add span {
      box-shadow: 0px 0px 15px 0px #ccc;
      padding: 10px 30px;
      display: flex;
      margin-top: 66px;
      border-radius: 50%;
      width: 150px;
      height: 150px;
      flex: 0 1;
      justify-content: center;
      align-items: center;
      margin: 20px auto;
    }

    .project-thumb {
      display: block;
      transition: all .3s ease-in;
      color: #676767;
    }

    .project-thumb h4 {
      font-size: 16px;
      margin-bottom: 5px;
      font-weight: bold;
      text-align: left;
      color: #4d4f5c;
    }

    .project-thumb p {
      font-size: 80%;
      margin-bottom: 5px;
      color: #9d9d9d;
    }

    .project-thumb:hover {
      text-decoration: none;
    }

    .project-thumb .img-fluid {
      border: 1px solid #707070;
      padding: 2px;
      display: block;
      width: 150px;
      height: 150px;
      margin: 0px 15px 10px;
      border-radius: 50%;
    }

    .modal-body {
      padding: 1rem 1rem 2rem;
    }
    .modal-body .app {
      min-height: 50vh;
    }

    #projects .flex {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-start;
    }
    .top-row {
      display: flex;
      margin: 0 -15px;
    }
    #projects .card {
      border-radius: 10px;
      background: #fff;
      border: none;
      box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.16);
    }
    #projects .card-img-top {
      border-radius: 10px 10px 0 0;
    }

    #projects .dropdown.open>.dropdown-menu,
    #projects .dropdown:hover>.dropdown-menu {
      display: block;
      right: 0;
      margin: 0;
      min-width: 100px;
    }

    #projects .progress-group {
      margin-bottom: 2px;
    }

    #projects .progress-group-header {
      margin-bottom: 0;
      color: #757575;
      font-size: 11px;
      font-weight: 700;
    }

    .project-more-button {
      position: absolute;
      right: 13px;
      top: 12px;
    }
    .project-more-button > button {
      width: 24px;
      height: 24px;
      background: rgba(255, 255, 255, 0.5);
    }

    .project-more-button i {
      color: #929BAA;
      text-align: right;
    }


    #projects .card-body {
      padding-bottom: calc(1.25rem - 5px);
    }
    .project-add-button {
      padding-bottom: 5px;
    }
    .project-add-button button {
      background: #20a8d8;
      border-radius: 50%;
      width: 35px;
      margin-top: 10px;
      box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.16);
    }

    .project-add-button i {
      padding: 10px;
      font-size: 14px;
    }

    .project-add-button .dropdown-menu {
      margin-top: 5px;
    }
    .project-add-button .dropdown-item {
      padding: 2px 15px;
    }

    .project-add-button .dropdown-toggle::after,
    .project-more-button .dropdown-toggle::after {
      display: none;
    }
    .project-btns {
      display: block;
      margin-top: 24px;
      float: left;
      font-size: 18px;
    }
    .project-btns .projectDetails {
      margin-right: 5px;
    }
    .project-btns .projectDetails:hover {
      text-decoration: none;
    }

    .lds-ring {
      display: inline-block;
      position: relative;
      width: 32px;
      height: 32px;
      margin-top: 10px;
    }

    .lds-ring div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 25px;
      height: 25px;
      margin: 3px;
      border: 3px solid #888;
      border-radius: 50%;
      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #888 transparent transparent transparent;
    }

    .lds-ring div:nth-child(1) {
      animation-delay: -0.45s;
    }

    .lds-ring div:nth-child(2) {
      animation-delay: -0.3s;
    }

    .lds-ring div:nth-child(3) {
      animation-delay: -0.15s;
    }

    @keyframes lds-ring {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
    .modal.show .modal-dialog {
      min-height: 96%;
      margin-top: 0;
      display: flex;
      align-items: center;
    }
    .user-avatar img {
      width: 100%;
      border-radius: 50%;
    }

    
    @media (max-width: 768px) {
      #projects .list {
        padding: 0;
      }
    }
    @media (max-width: 600px) {
        #projects .flex {
            justify-content: center;
        }
        .top-row {
          width: 90%;
          margin: 0 auto;
          max-width: 320px;
          flex-direction: column;
        }
        .project-card {
          width: 90%;
        }
        .app-header .navbar-nav .dropdown-menu-right,
        .dropdown-menu.show {
          left: auto !important;
          right: 0;
        }
    }
    @media (max-width: 400px) {
      .top-row {
        width: 100%;
      }
    }