@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic);

@import url(./co-light.css);
@import url(./co-crm-light/co_crm_light.css);


:root {

  /* Main Colors */
  --cocrm-white: #fff;
  --cocrm-black: #000;
  --cocrm-gray: #f9f9f9;
  --cocrm-purple: #675dff;
  --cocrm-purple-gradient: #756ed7ad;
  --cocrm-grape: #cb3e47;
  --cocrm-orange: #ff9e30;
  --cocrm-orange-gradient: #eb691e99;
  --cocrm-yellow: #fbcd31;
  --cocrm-blue: #6d60ea;
  --cocrm-green: #458208;
  --cocrm-medium-orchid: #a155b9;
  --bs-btn-bg: #fff;
  --bs-btn-hover-bg: #fff;
  --cocrm-btn-color: #fff;
  --cocrm-link-color: rgb(78, 78, 202);
  --cocrm-success: #00a65a;

  --co-btn-font-size: 14px;
  --co-border-color: #dee2e6;


  /* Body */
  --co-body-bg: #fff;
  --co-body-color: #000;

  /* Sidebar */
  --co-sidebar-color: var(--bs-body-color);
  --co-sidebar-bg: var(--bs-body-bg);
  --co-accordion-border-width: var(--bs-border-width);
  --co-accordion-border-color: var(--bs-border-color);


  /* Button */
  --co-btn-bg: var(--bs-btn-bg);
  --co-btn-hover-bg: var(--bs-btn-hover-bg);
  --co-btn-border-color: var(--co-border-color);
  --co-btn-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px, rgba(64, 68, 82, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(64, 68, 82, 0.08) 0px 2px 5px 0px;

  /* Width */
  --co-width-1: 1px;

  /* Nav link */
  --co-nav-link-color: var(--bs-link-color);
  --co-nav-link-hover-color: var(--bs-link-hover-color);

  /* pagination styling */
  --co-pagination-color: --bs-pagination-color;

  /* Badge styling */
  --co-badge-color: #e8e8e8;

  /* heading colour */
  --co-heading-color: #535050e5;

  --co-primary: var(--cocrm-black);
  --co-client-initial: var(--cocrm-black);
}

body {
  overflow-y: hidden;
}

#mainContent {
  background: var(--bs-body-bg);
}

#sidebar {
  /* --bs-body-bg: var(--cocrm-gray); */
  --bs-body-color: var(--co-sidebar-color);

  .accordion {
    --bs-accordion-border-width: var(--co-accordion-border-width);
    --bs-accordion-border-color: var(--co-accordion-border-color);
  }
}

.nav-link {
  --bs-nav-link-color: var(--co-nav-link-color);
  --bs-nav-link-hover-color: var(--co-primary)
}

.btn-primary {
  --bs-btn-active-bg: var(--co-btn-hover-bg);
  --bs-btn-active-border-color: var(--cocrm-btn-color);

  --bs-btn-hover-bg: var(--co-primary);
  --bs-btn-hover-border-color: var(--cocrm-btn-color);
  --bs-btn-font-size: var(--co-btn-font-size);
  --bs-btn-bg: var(--co-primary);
  --bs-btn-color: var(--cocrm-btn-color);
  --bs-btn-hover-color: var(--cocrm-btn-color);
  --bs-btn-active-bg: var(--co-primary);
}

.btn {
  --bs-btn-border-color: var(--cocrm-btn-color);
  --bs-btn-font-weight: 600;
}

.btn:disabled {
  pointer-events: visible;
  cursor: not-allowed;
  border-color: var(--co-primary);
  background-color: var(--co-primary) !important;
  color: var(--cocrm-white);
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: var(--co-primary);
}

.btn-outline-primary {
  --bs-btn-border-color: var(--co-primary);
  --bs-btn-hover-border-color: var(--co-primary);
  --bs-btn-hover-bg: var(--co-primary);
  --bs-btn-color: var(--co-primary);
  --bs-btn-active-bg: var(--co-primary);
  --bs-btn-active-border-color: var(--co-primary);
}

.btn-outline-primary:hover {
  color: #fff;
}

.btn-light {
  --bs-btn-bg: var(--co-body-bg);
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.custom-link {
  color: var(--cocrm-black);
}

.bg-light {
  --bs-bg-opacity: 1;
  background-color: #e8e8e8 !important;
}

.btn-outline-warning {
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-hover-bg: #ffc107;
}

.nav-tabs .nav-link {
  border: none;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--co-primary);
  background-color: transparent;
  border-bottom: 2px solid var(--co-primary);
  font-weight: 500;
}

.btn-outline-danger {
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-hover-bg: #dc3545;
}

.btn-outline-success {
  --bs-btn-border-color: #198754 !important;
  --bs-btn-hover-border-color: #146c43 !important;
  --bs-btn-hover-bg: #157347 !important;
}

.active>.page-link,
.page-link.active {
  z-index: 3;
  background-color: #fff;
  border-color: var(--co-primary);
  color: var(--co-primary);
}

.pagination {
  --bs-pagination-color: var(--co-pagination-color);
  margin-bottom: 0;
}

.loader-container svg {
  fill: var(--co-primary);
}

.form-control:focus {
  border-color: var(--co-primary);
  box-shadow: none !important;
}

.form-select:focus {
  border-color: var(--co-primary);
  box-shadow: none !important;
}

.badge-outline {
  background-color: #18a2b8 !important;
  color: white;
}

.accordion {
  --bs-accordion-btn-icon-width: 15px;
}

.text-primary {
  color: var(--co-primary) !important;
}

.fa-circle-info {
  color: rgb(221, 221, 221);
}

/* Scrollbar Styling */

*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  border-radius: 10px;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

*::-webkit-scrollbar-button {
  display: none;
}

*:hover::-webkit-scrollbar-thumb {
  background: #c6c3c3;
}

*:hover::-webkit-scrollbar-track {
  background: #f1f1f1;
}

@media (hover: none) and (pointer: coarse) {
  * {
    scrollbar-color: auto;
  }

  *::-webkit-scrollbar {
    display: none;
  }
}