//
// Apps Style
//

.mh-n100 {
  max-height: calc(100vh - 100px);
}

.h-n150 {
  height: calc(100vh - 150px);
}

.h-n280 {
  height: calc(100vh - 280px);
}

.h-n80 {
  height: calc(100vh - 80px);
}

.action-btn.show-btn {
  display: none;
}

.parent-chat-box {
  &.app-chat-right {
    .chat-box {
      width: 100%;
    }

    .app-chat-offcanvas {
      width: 0;
    }
  }
}

@include media-breakpoint-down(lg) {
  .parent-chat-box .app-chat-offcanvas {
    width: 0;
  }

  .parent-chat-box.app-chat-right .app-chat-offcanvas {
    width: 300px;
    position: absolute;
    z-index: 9;
  }
}

@include media-breakpoint-down(sm) {
  .parent-chat-box.app-chat-right .app-chat-offcanvas {
    left: 0;
    position: absolute;
    z-index: 9;
  }
}

.email-box {
  width: 100% !important;
}

.chat-box {
  width: calc(100% - 300px);

  .chat-box-inner {
    height: 650px;
    max-height: 800px;
  }

  .chat {
    display: none;

    &.active-chat {
      display: block;
    }
  }
}

.app-chat-offcanvas {
  flex-shrink: 0;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  z-index: 2;
  background-color: var(--bs-card-bg);

  visibility: visible;
}

.file-chat-hover {
  &:hover .download-file {
    display: block;
  }

  .download-file {
    display: none;
  }
}

@include media-breakpoint-down(lg) {
  .app-chat {
    .chat-users {
      height: calc(100vh - 295px) !important;
    }
  }
}

//
// Email Application
//

.min-width-340 {
  min-width: 340px;
}

@include media-breakpoint-down(lg) {
  .app-email-chatting-box {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-card-bg);
  }

  .min-width-340 {
    min-width: 100%;
  }
}

//
// Notes
//
.note-has-grid {
  .nav-link {
    padding: 0.5rem;
  }

  .single-note-item {
    .favourite-note {
      cursor: pointer;
    }

    .side-stick {
      position: absolute;
      width: 3px;
      height: 35px;
      left: 0;
      background-color: var(--bs-gray-700);
    }

    .category-dropdown.dropdown-toggle:after {
      display: none;
    }

    .category {
      [class*="category-"] {
        height: 15px;
        width: 15px;
        display: none;
      }

      .category-business {
        background-color: var(--bs-success-bg-subtle);
        border: 2px solid var(--bs-success);
      }

      .category-social {
        background-color: var(--bs-info-bg-subtle);
        border: 2px solid var(--bs-info);
      }

      .category-important {
        background-color: var(--bs-danger-bg-subtle);
        border: 2px solid var(--bs-danger);
      }
    }
  }

  .single-note-item.all-category {
    .point {
      color: rgba(var(--bs-gray-700), 0.5);
    }
  }

  .single-note-item.note-business {
    .point {
      color: var(--bs-success-bg-subtle);
    }

    .side-stick {
      background-color: var(--bs-success);
    }

    .category {
      .category-business {
        display: inline-block;
      }
    }
  }

  .single-note-item.note-favourite {
    .favourite-note {
      color: var(--bs-warning);
    }
  }

  .single-note-item.note-social {
    .point {
      color: var(--bs-info-bg-subtle);
    }

    .side-stick {
      background-color: var(--bs-info);
    }

    .category {
      .category-social {
        display: inline-block;
      }
    }
  }

  .single-note-item.note-important {
    .point {
      color: var(--bs-danger-bg-subtle);
    }

    .side-stick {
      background-color: var(--bs-danger);
    }

    .category {
      .category-important {
        display: inline-block;
      }
    }
  }

  .single-note-item.all-category,
  .single-note-item.all-category.note-favourite {
    .more-options {
      display: block;
    }

    &.note-important,
    &.note-business,
    &.note-social {
      .more-options {
        display: none;
      }
    }
  }
}

// invoice
.app-invoice {
  .invoice-users {
    height: calc(100vh - 262px);
  }
}

.invoice-inner-part {
  .invoiceing-box {
    #custom-invoice {
      #printableArea {
        display: none;
      }
    }
  }
}

// ecommerce

.hover-img {
  img {
    transition: transform 0.2s;
  }
  &:hover img {
    transform: scale(1.09);
  }
}

.btn-custom-fill {
  .form-check-input {
    position: absolute;
    top: 30px;
    z-index: 99;
  }
  .btn-outline-primary:hover {
    background-color: var(--bs-primary-bg-subtle);
  }
}


// contact

.search-table {
  tr > td:first-child,
  tr > th:first-child {
    padding-left: 0;
  }
  tr > td:last-child,
  tr > th:last-child {
    padding-right: 0;
  }
}