.coc-danger {
  color: var(--danger);
}

.coc-success {
  color: var(--success);
}

.coc-pending {
  color: var(--pending);
}

.light-text {
  color: #fff !important;
}

.bg-gradient-primary {
  background-image: none;
  background-color: var(--coc-primary);
}

.bg-primary {
  background-color: var(--coc-accent) !important;
}

.bg-info {
  background-color: var(--coc-accent2) !important;
}

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

tbody tr:hover {
  background-color: var(--coc-accent-light) !important;
}

.login-header-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 550px;
  width: 100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.jn-section {
  height: 100%;
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- Universal Rules & Utilities-----------------------------*/
/*--------------------------------------------------------------------------------------*/

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#body {
  height: 100%;
  background-color: #e0e0e0;
  /*--iphone scroll fix--*/
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch;
}

.card,
.card-header,
.card-body {
  position: relative;
}

.applicationHome #page-content {
  height: 100%;
  height: calc(100vh - 70px);
}

ul {
  list-style-type: none;
}

table {
  width: 100% !important;
}

.table thead th {
  vertical-align: middle;
}

thead {
  background: rgb(244, 244, 244);
  background: linear-gradient(
    95deg,
    rgba(244, 244, 244, 1) 0%,
    rgba(231, 231, 231, 1) 100%
  );
}

tfoot.billFoot {
  background-color: var(--coc-accent);
  color: #fff !important;
  font-size: 1.3em;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(224, 228, 230, 0.2);
}

.container,
.container-fluid {
  padding: 0;
  height: calc(100% - 74px);
  width: 100%;
}

.panelGrid {
  display: grid;
  grid-template-columns: 30% calc(70% - 20px);
}

.maxCard {
  max-width: 1155px;
  margin: 0 auto;
}

.maxCard2 {
  max-width: 2255px;
  margin: 0 auto;
}

span.dateFormat::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  margin-right: 5px;
}

span.dateFormat::after {
  color: white;
  font-size: 75%;
  padding: 0.5%;
  margin-left: 0.25em;
  border-radius: 2px;
}

span.dateFormat.invalidDate {
  color: var(--danger);
}
span.dateFormat.invalidDate::before {
  content: "\f273";
}

span.dateFormat.validDate::before {
  content: "\f274";
}
span.dateFormat.validDate::after {
  content: "Valid";
  background-color: var(--success);
}

span.dateFormat.expDate {
  color: var(--danger);
}

span.dateFormat.expDate::before {
  content: "\f334";
}

span.dateFormat.expDate::after {
  content: "Expired";
  background-color: var(--danger);
}

span.dateFormat.gracePeriod::after {
  content: "Expired within Grace Period";
  background-color: var(--pending);
}

/*----------Utilities----------------------*/

.flexCenter {
  align-items: center;
  justify-content: center;
}

.vc {
  display: flex;
  align-items: center;
}

.vcxy {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vcs {
  display: flex;
  align-self: center;
}

.rotate90 {
  transform: rotate(90deg);
}

.rotateN90 {
  transform: rotate(-90deg);
}
.fade50 {
  opacity: 0.5;
}

.fade75 {
  opacity: 0.25;
}

.softbox {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
}

.smaller {
  font-size: 75% !important;
}

.cap {
  text-transform: capitalize;
}
.allCap {
  text-transform: uppercase;
}

[data-callback],
[data-track],
li.application {
  cursor: pointer;
}

li.nav-item a {
  transition: all 0.2s ease-out;
}

li.nav-item a:hover,
li.nav-item a:active,
li.nav-item a:focus {
  color: var(--coc-accent);
}

.grid-v-center {
  align-self: center;
}

.grid-center {
  justify-self: center;
  align-self: center;
}

/*-----------------------------Fonts ---------------------------------------------------*/
/*--------------------------------------------------------------------------------------*/

body {
  font-family: "Roboto", sans-serif;
}

.elipsis {
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a,
[data-track] {
  color: var(--coc-accent) !important;
  transition: all 0.3s ease-in;
}

a:hover,
a:active,
a:focus,
[data-track]:hover,
a:active,
a:focus {
  color: var(--coc-accent-light) !important;
  text-decoration: none;
}

#trackingList li:first-child {
  background-color: var(--coc-accent);
  color: #fff;
  font-weight: 900;
  transform: scale(1.05);
}

#trackingList li:first-child:before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f3c5";
  margin-right: 10px;
  font-size: 20px;
}

/*------SideNav----------*/

.sidebar-dark .nav-item .nav-link i {
  transition: all 0.3s ease-out;
}

.sidebar-dark .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease-out;
}

.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:active,
.sidebar-dark .nav-item .nav-link:focus {
  color: rgba(255, 255, 255, 1) !important;
}

.sidebar-dark .nav-item .nav-link i {
  color: rgba(255, 255, 255, 0.5);
}

li.nav-item.activePage {
  background-color: var(--coc-accent);
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
}

li.nav-item.activePage .nav-link i,
li.nav-item.activePage .nav-link span {
  color: rgba(255, 255, 255, 1);
}

nav.shadow {
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -2px rgba(0, 0, 0, 0.12) !important;
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- Profile & Application List-------------------------------*/
/*--------------------------------------------------------------------------------------*/

div#profileList,
div#applicationList,
.card {
  background-color: #fff;
  padding: 5px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}

div#profileList {
  height: 100%;
}

div#applicationList {
  height: 100%;
  display: grid;
  grid-template-rows: auto;
}

/*--Holds Search Bar & Filters---*/
div.listOptionGrid {
  display: grid;
  grid-template-columns: auto 50px;
}

/*--Hide Dropdown Carat--*/
div.listOptionGrid .dropdown-toggle::after {
  display: none;
}

/*--Interior Scrolling Frame for List--*/
div.listBox {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  background-color: rgb(226, 226, 226);
  border-radius: 5px;
  box-shadow: 10px 12px 13px -5px rgba(0, 0, 0, 0.24) inset;
  -webkit-box-shadow: 10px 12px 13px -5px rgba(0, 0, 0, 0.24) inset;
  -moz-box-shadow: 10px 12px 13px -5px rgba(0, 0, 0, 0.24) inset;
}

/*----------------------------------------------------*/
/*-----Status Icons for PROFILE & APPLICATION Lists--*/
/*--------------------------------------------------*/

.status,
.paContent .status {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;

  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.status {
  margin-right: 5px;
  font-size: 20px;
}

.paContent .status {
  margin-right: 0.25em;
  font-size: 30px;
}

.paContent #applicationsTable .status {
  margin-right: 0.25em;
  font-size: 18px;
}

.status.declined::before,
.paContent .status.declined::before {
  content: " \f057";
  color: var(--danger);
}

.status.approved::before,
.paContent .status.approved::before {
  content: " \f058";
  color: var(--success);
}

.status.pending::before,
.paContent .status.pending::before {
  content: " \f252";
  color: var(--pending);
}

.status.draft::before {
  content: " \f31c";
  color: var(--draft);
}

.paList .list-group-item.active {
  background-color: #eeeeee;
  color: #353535 !important;
  border: none;
  margin-top: 4px;
}

/*-----Contex Buttons for APPLICATIONS----*/

#application .btn {
  display: none;
}

#application.pending .btn#viewAttachments,
#application.pending .btn#previewCertificate,
#application.pending .btn#approve,
#application.pending .btn#decline,
#application .btn {
  display: none;
}

#application.approved .btn.certificate,
#application.approved .btn.invoice,
#application.approved .btn.void,
#application.pending .btn.approve,
#application.pending .btn.decline,
#application.pending .btn.preview,
#application .btn.attachments,
#application .btn.notes,
#application .btn.log {
  display: inline-block;
}

#application .billing-info,
#application.pending .btn.viewAttachments,
#application.approved .btn.viewAttachments,
#application.declined .btn.viewAttachments,
#application.pending .btn.approve,
#application.pending .btn.decline,
#application.pending .btn.preview,
#application.approved .btn.viewCertificate,
#application.approved .btn.void {
  display: inline-block !important;
}

.appStatusGrid {
  display: grid;
  grid-template-rows: 30px;
  grid-template-columns: 100%;
}

/*-----Contex Buttons for PROFILES----*/

#profile .btn {
  display: none;
}

/*always show these button */
#profile .btn {
  display: inline-block;
}

/*show button when profile is pending*/
#profile.pending .btn-approve,
#profile.pending .btn-decline {
  display: inline-block;
}

#profile.approved .btn-approve,
#profile.approved .btn-decline,
#profile.declined .btn-approve,
#profile.declined .btn-decline {
  display: none;
}

/*----Profile Badges---*/

p .badge.legalize,
p .badge.scan {
  display: none;
}

p.legalize .badge.legalize,
p.scan .badge.scan {
  display: inline-block;
}

.profileEditTools {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  border-top-left-radius: 10px;
}

/*----Search Icon for Input Field -----*/

span.searchIcon::before {
  position: absolute;
  margin-top: 8px;
  margin-left: 15px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 500;
  content: " \f002";
}

input.searchInput {
  padding-left: 40px;
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- Profiles Tabs--------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
div#profileWrapper {
  background-color: #fff;
  padding: 8px;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 3px 3px -2px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
}

div#profileDetails {
  margin-left: 5px;
  height: 100%;
}

.profileDetailsGrid {
  display: grid;
  grid-template-columns: 250px auto;
}

.profileContactGrid {
  display: grid;
  grid-template-columns: 150px auto;
}

.dropdown-menu {
  -webkit-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
}

#profileDetails .dropdown-item.active,
.dropdown-item:active {
  background-color: var(--coc-accent) !important;
  color: #fff !important;
}

/*----History Tab---*/

.page-item.disabled .page-link {
  filter: blur(2px);
}

td.applicationMenu {
  padding: 0;
  min-width: 300px;
}

.sorting_asc,
.sorting_desc {
  cursor: pointer;
}

/*---Profile - Applications Tab ---*/
#applicationsTable .btn {
  display: none;
}

#applicationsTable tr .btn#menuAttachments,
#applicationsTable tr.approved .btn#menuInvoice,
#applicationsTable tr.approved .btn#menuCertificates {
  display: inline-block !important;
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- overrides -Form Controls --------------------------------*/
/*--------------------------------------------------------------------------------------*/

input.form-control,
select.form-control,
textarea {
  border: 0;
  box-shadow: inset 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
    inset 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    inset 0px 3px 3px -2px rgba(0, 0, 0, 0.12);
  background-color: #f2f2f2;
  transition: all 0.5s ease-out;
}

.form-control:focus,
textarea:focus {
  border: 0;
  box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
    inset 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
    inset 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  background-color: #e8e8e8;
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- Flatpickr Calandar -----------------------------------------*/
/*--------------------------------------------------------------------------------------*/

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--coc-accent);
  border-color: var(--coc-accent);
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- Buttons --------------------------------------------------*/
/*--------------------------------------------------------------------------------------*/

.btn {
  transition: all 0.1s ease-in;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
}

.btn.disabled,
.btn:disabled,
.btn.disabled:hover,
.btn:disabled:hover {
  filter: blur(2px);
}

.btn-primary {
  background-color: var(--coc-accent);
  color: #fff !important;
  border: none;
}

.btn-primary:hover,
.btn-success:hover,
.btn-primary:focus,
.btn-success:focus,
.btn-primary:active,
.btn-success:active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--coc-accent);
  filter: brightness(120%);
  color: #fff !important;
  border: none;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--coc-accent);
  color: #fff !important;
  border: none;
}

.btn-secondary {
  color: rgba(107, 107, 107, 1) !important;
  border: none;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
  background: rgb(255, 255, 255); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(229, 229, 229, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(229, 229, 229, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(229, 229, 229, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cecece+2,b2b2b2+100 */
  background: rgb(206, 206, 206); /* Old browsers */
  background: -moz-linear-gradient(
    top,
    rgba(206, 206, 206, 1) 2%,
    rgba(178, 178, 178, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(206, 206, 206, 1) 2%,
    rgba(178, 178, 178, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(206, 206, 206, 1) 2%,
    rgba(178, 178, 178, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cecece', endColorstr='#b2b2b2',GradientType=0 ); /* IE6-9 */
  color: #fff !important;
}

.btn-info {
  background-color: var(--coc-accent2);
  border: none;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: var(--coc-accent2);
  filter: brightness(120%);
  border: none;
}

.btn-approved {
  background-color: var(--success) !important;
  color: #fff !important;
}

.btn-pending {
  background-color: var(--pending) !important;
  color: #fff !important;
}

.btn-declined {
  background-color: var(--danger) !important;
  color: #fff !important;
}

.btn-approved:hover,
.btn-approved:focus.btn-approved:active {
  background-color: var(--success) !important;
  color: #fff !important;
  filter: brightness(120%);
}

.btn-pending:hover,
.btn-pending:focus,
.btn-pending:active {
  background-color: var(--pending) !important;
  color: #fff !important;
  filter: brightness(120%);
}

.btn-declined:hover,
.btn-declined:focus,
.btn-declined:active {
  background-color: var(--danger) !important;
  color: #fff !important;
  filter: brightness(120%);
}

.btn-activate {
  min-width: 123px;
}

.btn-link {
  color: var(--coc-accent);
}

/*----Badges----*/
.badge-success {
  background-color: var(--success);
  color: #fff;
}

/*--------------------------------------------------------------------------------------*/
/*----------------------------Cards ----------------------------------------------------*/
/*--------------------------------------------------------------------------------------*/

.card {
  padding: 0;
}

.card.jn-accent {
  background-color: #dbdbdb;
  box-shadow: 10px 12px 13px -5px rgba(0, 0, 0, 0.24) inset;
  -webkit-box-shadow: 10px 12px 13px -5px rgba(0, 0, 0, 0.24) inset;
  -moz-box-shadow: 10px 12px 13px -5px rgba(0, 0, 0, 0.24) inset;
  box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.4);
  border-radius: 1px;
}

.card-header {
  background-color: #f0f0f0;
  color: rgb(58, 58, 58);
}

.card-header.jn-rh {
  background-color: #ad4040;

  color: #fff !important;
}

.card-header.jn-oh {
  background-color: #f0de79;
  color: #404040;
}

.card-header.jn-accent {
  background-color: #f0f0f0;
  color: rgb(58, 58, 58);
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- COC - LOGIN PAGE ----------------------------------------*/
/*--------------------------------------------------------------------------------------*/

.coc-login-header {
  position: relative;
  top: 20px;
  height: 200px;
  width: 100%;
  margin: 0 auto;
  background-size: contain !important;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+20,ffffff+100&1+32,0+100 */
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 20%,
    rgba(255, 255, 255, 1) 32%,
    rgba(255, 255, 255, 0) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 20%,
    rgba(255, 255, 255, 1) 32%,
    rgba(255, 255, 255, 0) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 20%,
    rgba(255, 255, 255, 1) 32%,
    rgba(255, 255, 255, 0) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

body.login-page {
  background-size: cover;
  background-position: center 0;
  background-repeat: no-repeat;
  background-image: var(--landing-background);
}

.coc-login-card {
  max-width: 400px;
  margin: 0 auto;
}

body.login-page {
  background-size: cover;
  background-position: center 0;
}

.coc-login-panel {
  height: 100%;
  margin-top: -200px;
  margin-left: 0;
  margin-right: 0;
}

div.loginHeader {
  display: grid;
  grid-template-columns: 75px auto;
}

img.ftgsIcon {
  display: inline-block;
  max-width: 75px;
}

/*--------------------------------------------------------------------------------------*/
/*---------------------------- Applications---------------------------------------------*/
/*--------------------------------------------------------------------------------------*/
.coc-page-wrapper {
  padding: 10px 20px 0px 20px;
  background-color: #fff;
}

.coc-page-wrapper-clear {
  padding: 10px 20px 0px 20px;
  background-color: transparent;
}

.coc-searchbar {
  background-color: #fff;
}

.coc-applist {
  min-width: 300px;
  height: 100vh;
}

.coc-applications-pending-card {
  max-width: 30%;
}

.list-group-item {
  margin: 5px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}

div#application,
div#profile-details {
  min-width: 505px;
}

div#application,
div#application-list,
div#attachments,
#profiles-col,
#profile-details {
  -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  height: 100%;
  overflow: auto;
}

.panel-1 .card-body {
  height: calc(100vh - 140px);
  overflow: scroll;
}

div#attachments-card {
  height: calc(100vh - 220px);
  border-radius: 5px;
}

.coGrid1 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  height: 100%;
  width: 100%;
}

.coGrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}

.coGrid2 .remarks {
  grid-column: 1/3;
}

/*------------Application Product Checkmarks----------*/

div.product-wrap {
  border-bottom: 1px solid #e0e0e0;
}

span.product {
  cursor: pointer;
  transition: all 0.2s ease-out;
}

span.product:before {
  font-family: "Font Awesome 5 Pro";
  content: " \f00c";
  color: rgba(255, 255, 255, 0);
  transition: all 0.2s ease-out;
}

span.product.checked {
  color: var(--prime-green);
}

span.product.checked:before {
  font-family: "Font Awesome 5 Pro";
  content: " \f00c";
  color: var(--prime-green);
}

/*---Search Bars----------------------------------------*/
input.input-wrapper {
  font-family: "Font Awesome 5 Pro";
}

input.search-placeholder::before {
  font-family: "Font Awesome 5 Pro";
  content: " \f002";
}

/*--------------------------------------------------------------------------------------*/
/*--------------product display columns for applications----------------*/
/*--------------------------------------------------------------------------------------*/
#products {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  -webkit-column-rule: 1px dotted #ddd;
  -moz-column-rule: 1px dotted #ddd;
  column-rule: 1px dotted #ddd;
}

/* google autocomplete box */
.pac-container {
  z-index: 1051 !important;
}

/* callouts */
.callout.success {
  border-left: 10px solid green;
  padding-left: 10px;
}

.callout.warning {
  border-left: 10px solid #b20000;
  padding-left: 10px;
}

tr {
  transition: all 3s ease-out;
}

tr.activeRow {
  background-color: rgba(186, 218, 85, 1) !important;
}

/* three panel layout grid*/
.three-panel-layout {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: max-content 1fr 1fr;
  grid-column-gap: 6px;
  min-height: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

/*----Template Overrides---------*/

tbody tr {
  transition: none;
}

tbody tr:hover {
  transition: none !important;
  background-color: #dbdbdb !important;
}

li.application.active {
  border: 0.25rem solid #4e73df !important;
}

#profiles .profile.active {
  border: 0.25rem solid #4e73df !important;
}

table#applications tr td:first-child span::before {
  margin-right: 0.5em;
}

table#applications tr.approved td:first-child span::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f2f7";
  color: green;
}

table#applications tr.declined td:first-child span::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f05e";
  color: black;
}

table#applications tr.pending td:first-child span::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f254";
  color: red;
}

#insight-chart {
  width: 100%;
  height: calc(100vh - 200px);
  max-height: 600px;
}

.chart {
  height: 400px;
}

/*------Toggle Menu-----*/
/*--
*::before{
    font-family: "Font Awesome 5 Pro";
} --*/

#toggle {
  display: none;
}

#toggle ~ label::before {
  background-color: var(--coc-accent);
  color: #fff !important;
  content: "\f055";
  padding: 0.5em;
  cursor: pointer;
  border-radius: 50%;
}

#toggle:checked ~ label::before {
  content: "\f056";
}

#toggle ~ #menu {
  overflow: hidden;
  transform: scaleX(0);
  transition: transform 0.3s ease-out;
  transform-origin: center left;
}
#toggle:checked ~ #menu {
  width: auto;
  transform: scaleX(1);
}

.listSpace {
  padding-bottom: 13px;
}
.listSpaceCheck {
  padding-bottom: 13px;
  margin-left: 27px;
}

/*----Table Pagination---*/

.page-item.active .page-link {
  color: #fff !important;
  background-color: var(--coc-accent);
  filter: brightness(120%);
  border: 0;
}

/*---Certificate Badges---*/

.badge {
  padding: 6px;
  margin-right: 3px;
  font-size: 12px;
}

.badge-primary {
  background-color: var(--coc-accent);
}

.badge.cfs,
.badge.gmp,
.badge.coo,
.badge.cgs {
  text-transform: uppercase;
}

/*-----------------------------------------------------------------------*/
/*------------------------------CUSTOM INPUTS---------------------------*/
/*---------------------------------------------------------------------*/

/*--Hide Defaults---*/
label.ft input[type="radio"],
label.ft input[type="checkbox"],
label.ft-view input[type="checkbox"] {
  display: none;
}

label.ft input[type="checkbox"] ~ span,
label.ft input[type="radio"] ~ span {
  transition: all 0.1s ease-out;
  cursor: pointer;
}
/*--Custom Input Before ICONS---*/
label.ft input[type="radio"] ~ span::before,
label.ft input[type="radio"] ~ span:hover::before,
label.ft input[type="checkbox"] ~ span::before,
label.ft input[type="checkbox"] ~ span:hover::before {
  font-family: "Font Awesome 5 Pro";
  position: relative;
  font-size: 2em;
  top: 5px;
  left: 0px;
  margin-right: 5px;
}

/*--Custom Input HOVER Color---*/
label.ft input[type="radio"] ~ span:hover::before,
label.ft input[type="radio"] ~ span:hover,
label.ft input[type="checkbox"] ~ span:hover::before,
label.ft input[type="checkbox"] ~ span:hover {
  color: #b0b0b0;
}

/*--Custom Input SELECTED Color---*/
label.ft input[type="radio"]:checked ~ span,
label.ft input[type="radio"]:checked ~ span::before,
label.ft input[type="checkbox"]:checked ~ span,
label.ft input[type="checkbox"]:checked ~ span::before {
  color: var(--coc-accent);
}

label.ft.small span::before {
  top: 0 !important;
  font-size: 1em !important;
}

/*-----------------------------------------------------------------------*/
/*------------------------------RADIOS----------------------------------*/
/*---------------------------------------------------------------------*/

/*---Unselected Radio---*/
label.ft input[type="radio"] ~ span::before {
  content: "\f111 ";
}

/*----Radio Hover / Selected----*/
label.ft input[type="radio"] ~ span:hover::before,
label.ft input[type="radio"]:checked ~ span::before {
  content: "\f058 ";
}

/*---Unselected Checkbox ---*/

label.ft input[type="checkbox"] ~ span::before {
  content: "\f0c8 ";
}

/*---Checkbox Hover / Selected ---*/
label.ft input[type="checkbox"] ~ span:hover::before,
label.ft input[type="checkbox"]:checked ~ span::before {
  content: "\f14a ";
}

/*-------------------------------------------------*/
/*---------------Certificate Filters---------------*/
/*-------------------------------------------------*/

.certShow {
  padding-top: 5px;
}

label.ft-view {
  margin-bottom: 0;
  padding-left: 10px;
}

label.ft-view input[type="checkbox"] ~ span,
label.ft-view input[type="checkbox"] ~ span::before {
  cursor: pointer;
}

label.ft-view input[type="checkbox"] ~ span::before,
label.ft-view input[type="checkbox"] ~ span:hover::before {
  font-family: "Font Awesome 5 Pro";
  position: relative;
  top: 0px;
  left: 0px;
  margin-right: 5px;
}

label.ft-view input[type="checkbox"] ~ span::before,
label.ft-view input[type="checkbox"] ~ span:hover::before {
  content: "\f070 ";
  font-size: 1em;
}

label.ft-view input[type="checkbox"]:checked ~ span::before {
  content: "\f06e";
  font-size: 1.1em;
}

label.ft-view.c-cfs input[type="checkbox"]:checked ~ span,
label.ft-view.c-cfs input[type="checkbox"]:checked ~ span::before {
  color: #ff2b84;
}

label.ft-view.c-gmp input[type="checkbox"]:checked ~ span,
label.ft-view.c-gmp input[type="checkbox"]:checked ~ span::before {
  color: #f29e00;
}

label.ft-view.c-coo input[type="checkbox"]:checked ~ span,
label.ft-view.c-coo input[type="checkbox"]:checked ~ span::before {
  color: #5eb1cc;
}

label.ft-view.c-cfs input[type="checkbox"] ~ span,
label.ft-view.c-cfs input[type="checkbox"] ~ span::before,
label.ft-view.c-gmp input[type="checkbox"] ~ span,
label.ft-view.c-gmp input[type="checkbox"] ~ span::before,
label.ft-view.c-coo input[type="checkbox"] ~ span,
label.ft-view.c-coo input[type="checkbox"] ~ span::before {
  color: #b0b0b0;
}

/*---Certificate Billing Grid---*/
.certBillingGrid {
  max-width: 350px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/*---------Dashboard----------*/
div.dashTop {
  display: flex;
  margin: 0 auto;
  min-height: 200px;
  width: 100%;
  background-color: var(--coc-accent);
  color: #fff;
  text-align: center;
}

.dashTopDisplay {
  display: grid;
  grid-template-rows: auto auto;
}
.dashTopLabel {
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-top: 3px solid rgba(255, 255, 255, 0.25);
}

.dashTopNumbers {
  font-size: 40px;
}

.dashTopDisplay a,
.dashTopDisplay i {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease-out;
}

.dashTopDisplay a:hover,
.dashTopDisplay a:active,
.dashTopDisplay a:focus,
.dashTopDisplay a i:hover,
.dashTopDisplay a i:active,
.dashTopDisplay a i:focus {
  color: rgba(255, 255, 255, 1) !important;
}

/*---Dashboard Graphs----*/

.chartTitle {
  padding: 10px;
  width: 100%;
  border-bottom: 3px solid var(--coc-accent);
}
.chartTitle h2 {
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-top: 3px solid rgba(255, 255, 255, 0.25);
}

.chart {
  height: 400px;
}

.chartWrap {
  padding: 30px;
}

div#graph4 {
  background-color: #c3ff5c;
  color: #5284ff;
}

.canvasjs-chart-toolbar button {
  background-color: transparent !important;
  color: #fff;
}

.canvasjs-chart-toolbar button::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: " \f019";
  color: var(--coc-accent);
  font-size: 20px;
}
.canvasjs-chart-toolbar button:hover {
  cursor: pointer;
  animation: jelly 0.5s;
}

@keyframes jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

/*---Email Templates---*/

.list-group-item.active {
  background-color: #f2f2f2;
  color: #353535 !important;
  border: none;
}

/*--SummerNote---*/
.elistGrid,
.appListGrid {
  display: grid;
  grid-template-columns: auto 60px;
}

.elistBtn {
  height: 45px;
}

.note-editor.note-frame .note-editing-area .note-editable {
  min-height: 500px;
}

div.copyright {
  color: #fff !important;
  position: fixed;
  bottom: 0px;
}

#profile .card,
#notes-content .card,
#users-content .card {
  margin: 0;
}

#users-content .coc-page-wrapper-clear {
  padding: 0;
}

/*---Application List---*/

.appInfoGrid {
  display: grid;
  grid-template-columns: 110px auto;
}
#applicationDetails {
  height: 100%;
  padding: 10px;
}

/*--- Profile - Edit ---*/

.coInfoGrid {
  display: grid;
  grid-template-columns: 110px auto;
}

/*--Profile - Users--*/

#users-content .maxCard {
  max-width: 100% !important;
}

div.canvasjs-chart-container button img {
  display: none;
}

/*---main structure---*/

div.mainGrid {
  display: grid;
  grid-template-columns: 25% 75%;
  height: 100%;
  width: 100%;
  padding: 0;
}

div.leftPanel {
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

div.rightPanel {
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
}

/*----Messaging----*/

#application #messages,
#application #notes {
  width: 500px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.card#messages .messageContainer {
  max-height: 100%;
  overflow-y: auto;
}

/*-----Message Timeline----*/

li.msg-list {
  position: relative;
}

.msg-timeline {
  margin: 10px 0 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

/*---vertical line--*/
.msg-timeline:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--coc-accent);
  left: 20%;
  margin-left: -11px;
  border-radius: 5px;
}

.messageStatus {
  display: flex;
  align-items: center;
  min-height: 28px;
}

span.messageStatus {
  letter-spacing: 0.05rem;
  font-weight: 900;
}

.msg-content {
  margin: 0 0 15px 25%;
  background: var(--coc-accent);
  color: #fff;
  padding: 10px;
  font-weight: 300;
  line-height: 1.4;
  position: relative;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.75);
}

.msg-content-message {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f6f6f6+47,f2f2f2+100 */
  background: rgb(255, 255, 255); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(246, 246, 246, 1) 47%,
    rgba(242, 242, 242, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(246, 246, 246, 1) 47%,
    rgba(242, 242, 242, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(246, 246, 246, 1) 47%,
    rgba(242, 242, 242, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  border-radius: 5px;
  color: #505050;
  padding: 10px;
  margin-top: 5px;
}

.msg-content::after {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-right-color: var(--coc-accent);
  border-width: 10px;
  top: 10px;
}

.msg-timestamp {
  display: block;
  width: 70px;
  top: -10px;
  position: absolute;
}

.msg-day,
.msg-month,
.msg-time {
  display: block;
}

.msg-day {
  font-size: 35px;
  font-weight: 900;
  margin-bottom: -5px;
  margin-left: -5px;
  color: var(--coc-accent);
}
.msg-month {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--coc-accent);
}
.msg-time {
  font-size: 11px;
  letter-spacing: -0.5px;
  color: var(--coc-accent);
}

.msg-timeline > li .msg-icon {
  width: 45px;
  height: 45px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  text-transform: none;
  font-size: 18px;
  line-height: 33px;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  color: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  border: 5px solid var(--coc-accent);
  -webkit-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
  text-align: center;
  left: 18.8%;
  top: 0;
  margin: 0 0 0 -25px;
}

.msg-icon::before {
  position: absolute;
}

.msg-icon.submitted::before {
  content: "\f1d8";
  left: 7px;
  top: 1px;
}

.msg-icon.approved::before {
  content: "\f2f7";
  left: 8px;
  top: 3px;
}

.msg-icon.declined::before {
  content: "\f057";
  left: 9px;
  top: 2px;
}

.msg-icon.withdrawn::before {
  content: "\f2ea";
  left: 9px;
  top: 3px;
}

.msg-icon.voided::before {
  content: "\f252";
  left: 10.5px;
  top: 2px;
}

.msg-icon.void_payment::before {
  content: "\f4c0";
  left: 8.5px;
  top: 0px;
}

.msg-icon.payment_charged::before {
  content: "\f2e8";
  left: 9px;
  top: 2px;
}

.msg-icon.submitted {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#499bea+0,207ce5+100;Blue+3d+%237 */
  background: rgb(73, 155, 234); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(32, 124, 229, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(32, 124, 229, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(73, 155, 234, 1) 0%,
    rgba(32, 124, 229, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
}

.msg-icon.approved {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4e391+0,61c419+50,b4e391+100;Green+3D */
  background: rgb(180, 227, 145); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(180, 227, 145, 1) 0%,
    rgba(97, 196, 25, 1) 50%,
    rgba(180, 227, 145, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(180, 227, 145, 1) 0%,
    rgba(97, 196, 25, 1) 50%,
    rgba(180, 227, 145, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(180, 227, 145, 1) 0%,
    rgba(97, 196, 25, 1) 50%,
    rgba(180, 227, 145, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
}

.msg-icon.declined {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff5d00+0,cc0000+100 */
  background: rgb(255, 93, 0); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(255, 93, 0, 1) 0%,
    rgba(204, 0, 0, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(255, 93, 0, 1) 0%,
    rgba(204, 0, 0, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(255, 93, 0, 1) 0%,
    rgba(204, 0, 0, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5d00', endColorstr='#cc0000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
}

.msg-icon.withdrawn {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0e0e0e+-1,0e0e0e+0,7d7e7d+100 */
  background: rgb(14, 14, 14); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(14, 14, 14, 1) -1%,
    rgba(14, 14, 14, 1) 0%,
    rgba(125, 126, 125, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(14, 14, 14, 1) -1%,
    rgba(14, 14, 14, 1) 0%,
    rgba(125, 126, 125, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(14, 14, 14, 1) -1%,
    rgba(14, 14, 14, 1) 0%,
    rgba(125, 126, 125, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
}

.msg-icon.voided {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,000000+100 */
  background: rgb(169, 3, 41); /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgba(169, 3, 41, 1) 0%,
    rgba(143, 2, 34, 1) 44%,
    rgba(0, 0, 0, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgba(169, 3, 41, 1) 0%,
    rgba(143, 2, 34, 1) 44%,
    rgba(0, 0, 0, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgba(169, 3, 41, 1) 0%,
    rgba(143, 2, 34, 1) 44%,
    rgba(0, 0, 0, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  color: #fff;
}

.msg-icon.void_payment {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
  background: #7d7e7d; /* Old browsers */
  background: -moz-linear-gradient(
    top,
    #7d7e7d 0%,
    #0e0e0e 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    #7d7e7d 0%,
    #0e0e0e 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    #7d7e7d 0%,
    #0e0e0e 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
  color: #fff;
}

.msg-icon.payment_charged {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8fc400+0,cfdd00+100 */
  background: #8fc400; /* Old browsers */
  background: -moz-linear-gradient(
    top,
    #8fc400 0%,
    #cfdd00 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    #8fc400 0%,
    #cfdd00 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    #8fc400 0%,
    #cfdd00 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#cfdd00',GradientType=0 ); /* IE6-9 */
  color: #3b3b3b;
}

.fa-layers-counter {
  background-color: var(--coc-accent);
  position: absolute;
  left: 20px;
  top: -8px;
  font-size: 12px;
  padding: 1px 10px;
  border-radius: 13px;
  color: #fff;
  -webkit-box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.75);
}

/*----Notes---*/

.note {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: auto;
  margin: 5px;
}

.note.active .note-col-2 {
  border: 2px solid var(--coc-accent);
}

.note-col-1 {
  color: #fff;
  background-color: var(--coc-accent);
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.note-col-2 {
  padding: 0px;
  border-bottom: 2px solid var(--coc-accent);
}

.note-date {
  line-height: 1;
  padding: 5px;
}

.note-day,
.note-month,
.note-year {
  display: block;
}

.note-day {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: -5px;
}
.note-month {
  font-size: 20px;
  text-transform: uppercase;
}
.note-year {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, 0.5);
}

.note-content {
  height: 100%;
  padding: 10px 20px;
  -webkit-box-shadow: inset 0px 5px 5px 4px rgba(0, 0, 0, 0),
    0px 0px 10px 3px rgba(199, 229, 255, 0);
  -moz-box-shadow: inset 0px 5px 5px 4px rgba(0, 0, 0, 0),
    0px 0px 10px 3px rgba(199, 229, 255, 0);
  box-shadow: inset 0px 5px 5px 4px rgba(0, 0, 0, 0),
    0px 0px 10px 3px rgba(199, 229, 255, 0);
  background-color: #fff;
}

.note-content[contenteditable="true"] {
  -webkit-box-shadow: inset 0px 5px 5px 4px rgba(0, 0, 0, 0.1),
    0px 0px 10px 3px rgba(199, 229, 255, 0);
  -moz-box-shadow: inset 0px 5px 5px 4px rgba(0, 0, 0, 0.1),
    0px 0px 10px 3px rgba(199, 229, 255, 0);
  box-shadow: inset 0px 5px 5px 4px rgba(0, 0, 0, 0.1),
    0px 0px 10px 3px rgba(199, 229, 255, 0);
  background-color: #f2f2f2;
}

/*-----Billing-Report----*/

.billingTypeGrid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr 1fr;
}

.billingTypeHeader {
  grid-column: 1/3;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.3em;
  letter-spacing: 1.5px;
}

.dash2Header {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.3em;
  letter-spacing: 1.5px;
  padding: 8px;
  margin: 5px;
}

.dash2Header.d2Profile {
  background-color: #7258cc;
}

.dash2Grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
  padding: 5px;
}

.dash2Wrap {
  max-width: 1920px;
  margin: 0 auto;
  padding-top: 5px;
}

span.d2Value {
  font-size: 3em;
}

.d2link {
  color: rgba(255, 255, 255, 0.8) !important;
}

.d2link:hover,
.d2link:focus,
.d2link:active {
  color: rgba(255, 255, 255, 1) !important;
}

.d2p-1 {
  margin-bottom: -25px;
}

caption {
  caption-side: top !important;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}

.dot {
  height: 0.75em;
  width: 0.75em;
  border-radius: 50%;
  display: inline-block;
}

/*-----Reporting ------*/
#report-options {
  padding: 10px;
}

/*-----------Ben ---------------*/
span.profile::before {
  margin-right: 5px;
}

span.profile::after {
  margin-left: 5px;
}

span.profile.approved::after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  color: var(--success);
  content: "\f058";
}

span.profile.pending::after {
  background-color: var(--pending);
  color: white;
  padding: 2px 5px;
  margin: 3px;
  font-size: 75%;
  border-radius: 3px;
  content: "Company profile is pending approval";
}

.date::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  margin-right: 0.25em;
  content: "\f274";
}

.date::after {
  font-size: 75%;
  margin-left: 0.25em;
  color: white;
  padding: 0.25em 0.5em;
  border-radius: 3px;
}

.date.expDate::before {
  content: "\f273";
  color: var(--danger);
}

.date.expDate::after {
  content: "Expired";
  background-color: var(--danger);
}

.date.expDate.gracePeriod::before {
  color: var(--pending);
  content: "\f334";
}

.date.expDate.gracePeriod::after {
  background-color: var(--pending);
  content: "Expired :: Within grace period";
}

#products .card-body {
  max-height: 400px;
  overflow: auto;
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid lightgrey;
}

/* rules for billing -info on applications */
.card {
  position: relative;
}

#billing-info {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 400px;
  max-width: 400px;
  transform: scale(0);
  transform-origin: top;
  z-index: 9999;
  transition: transform 0.3s ease-out;
}

#billing-info.visible {
  transform: scale(1);
}