:root {
  --coc-primary: #000;
  --coc-secondary:#7fc342;
  --coc-accent: #009ac9;
  --coc-accent-light: #32c5f1;
  --coc-accent2: #97e057;
  --coc-accent2-light: #97e057;
  --icon-logo: url("images/logoIcon.png");
  --login-logo: url("images/logo.png");
  --landing-background: url(images/loginBground.jpg);

  --success: #55a719;
  --danger: #cc0000;
  --pending: #ff9933;

  --chart-color-1: #a2db4d;
  --chart-color-2: #39cccc;
  --chart-color-3: #ec1378;
  --chart-color-4: #f2a200;
  --chart-color-5: #7d11d4;
  --chart-color-6: #00a7fa;
}

.sidebar-dark .nav-item .nav-link,
.sidebar-dark .nav-item .nav-link i {
  color: #fff !important;
}

li.nav-item.activePage .nav-link i,
li.nav-item.activePage .nav-link span {
  color: #fff !important;
}

.coc-login-header {
  background-image: var(--login-logo);
  background-repeat: no-repeat;
  background-position: center center;
  max-width: 300px;
  max-height: 100px;
}

body.login-page {
  background-image: var(--landing-background);
  background-repeat: no-repeat;
  transition:all 0.3s ease-out;
}

@media screen and (min-width: 1198px) {
  body.login-page {
    background-position: left center !important;
  }
}

@media screen and (max-width: 1198px) {
  body.login-page {
    background-position: left -200px center !important;
  }
}

.sidebar-brand-icon {
  background-image: var(--icon-logo);
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
  background-size: contain;
}

.badge.cfs {
  background: transparent;
  border: 2px solid #ff2b84;
  color: #ff2b84;
  min-width: 36px;
}

.badge.gmp {
  background-color: transparent;
  border: 2px solid #f29e00;
  color: #f29e00;
  min-width: 36px;
}

.badge.coo {
  background-color: transparent;
  border: 2px solid #5eb1cc;
  color: #5eb1cc;
  min-width: 36px;
}

.billingTypeHeader.cfs,
.dash2Header.cfs,
.certificate.cfs {
  background: #ff2b84;
}

.billingTypeHeader.gmp,
.dash2Header.gmp,
.certificate.gmp {
  background-color: #f29e00;
}

.billingTypeHeader.coo,
.dash2Header.coo,
.certificate.coo {
  background-color: #5eb1cc;
}

.billingTypeContent.gmp,
.dash2Content.gmp {
  background-color: #ffeac2;
}

.billingTypeContent.cfs,
.dash2Content.cfs {
  background: #ffe5f0;
}
.billingTypeContent.coo,
.dash2Content.coo {
  background-color: #c9e5ee;
}