body {
  background-color: #fff;
  font-size: 13px;
}

body,
p,
.dc-chart,
.AnyTime-win,
.AnyTime-pkr .AnyTime-btn,
.AnyTime-pkr th.AnyTime-dow {
  color: #333;
  font-family: "Helvetica Neue", Arial, "Times New Roman" !important;
}

.admin-side .main-body,
.user-side .dashboard-container {
    background:
      radial-gradient(circle at 15% 15%, rgba(0, 255, 200, 0.09) 0%, transparent 30%),
      radial-gradient(circle at 85% 15%, rgba(255, 20, 147, 0.09) 0%, transparent 30%),
      radial-gradient(circle at 50% 20%, rgba(138, 43, 226, 0.10) 0%, transparent 25%),
      radial-gradient(circle at 70% 40%, rgba(0, 123, 255, 0.08) 0%, transparent 20%),
      radial-gradient(circle at 25% 60%, rgba(255, 140, 0, 0.07) 0%, transparent 20%),
      radial-gradient(circle at 80% 70%, rgba(0, 255, 127, 0.06) 0%, transparent 15%),
      radial-gradient(circle at 40% 80%, rgba(255, 69, 0, 0.06) 0%, transparent 15%),
      radial-gradient(circle at 65% 85%, rgba(255, 20, 147, 0.04) 0%, transparent 20%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(0, 145, 200, 0.1) 200%);
}


.banner-default-height div > a:not(.button),
.main-body div > a:not(.button)
.banner-default-height p > a:not(.button),
.main-body p > a:not(.button) {
  color: #000 !important;
}

.bookmarked.link-circle {
  background: rgb(0, 145, 200);
}

div > a.button,
div > a.tag-link,
div > a.tag,
div > a.milestones-link,
a.editable-checkbox,
a.bookmark-link,
a.more-options,
.nav-links a,
nav a,
#top-nav a,
a[data-open-in="modal-box"] {
  text-decoration: none;
}

p {
  font-size: 1em;
}

.main-body > .row {
  background-color: #fff;
}

.connection-card .button-group-w-arrow.expanded .button.dropdown {
  border-left-color: #fff;
}

h1, h2, h3, h4, h5, h6,
.driver-popover-title {
  font-family: "ingeborg", "Neue Haas Grotesk Text", "Helvetica Neue", Arial, "Times New Roman";
}

.public-page.panel {
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  padding: 0;
}

.ui-widget textarea,
button,
.button,
.label,
.ui-tabs,
ul.menu li > a,
.menu li.active > a:first-child:not(.button),
.menu, body,
.tabs li > a, .tabs .tab-title > a {
  font-family: "Helvetica Neue", Arial, "Times New Roman";
}

.driver-popover-description,
.driver-popover-prev-btn,
.driver-popover-next-btn,
.driver-popover-progress-text {
  font-family: "Helvetica Neue", Arial, "Times New Roman" !important;
}

.vertical-tabs, .tabs-title[data-p-active="true"],
.vertical-tabs, .tabs-title.active,
.responsive-tabs, .tabs-title[data-p-active="true"],
.responsive-tabs, .tabs-title.is-active,
.horizontal-tabs .tabs-title[data-p-active="true"],
.horizontal-tabs .tabs-title.is-active,
.horizontal-tabs-only .tabs-title.active
{
  border-color: rgb(0, 145, 200) !important;
}


/*********************************
 * Links
 *********************************/
.user-side #main-content a:not(.button):not(.tab-link),
.public-side #main-content a:not(.button):not(.tab-link) {
  color: #000;
}


/*********************************
 * Interactive Inputs
 *********************************/
input[type="radio"]:checked,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
  color: rgb(0, 145, 200);
  border-color: rgb(0, 145, 200);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgb(0, 145, 200);
  background-color: rgb(0, 145, 200);
}

input[type="radio"]:checked::before,
input[type="radio"]:focus::before,
input[type="radio"]:focus-visible::before {
  opacity: 1;
}

input:checked + label.selectable-card,
input:checked + label.selectable-card i,
input:checked + label.selectable-card .text {
  color: #000;
}

/*********************************
 * Admin Ui Preview
 *********************************/
#main-content #ui-preview-public #top-nav a:not(.button),
#main-content #ui-preview-public #public-nav a:not(.button),
#main-content #ui-preview-public #header a:not(.button) {
  color: #383838;
}

/*********************************
 * Top nav
 *********************************/

.dropdown.menu > li.opens-right > .is-dropdown-submenu {
  // since there is a 4px bottom border on the active li, this fixes the dropdown menu overlapping the border bottom bug
  top: calc(100% - -4px);
}

#top-nav {
  background-color: rgb(255, 255, 255);
}

/* need important to override css that removes border-bottom inside js file */
#top-nav .notification-button {
  color: #383838;
}

/* top-level submenu parent */
;
} %>

/* nested submenu parent */
#admin-nav-bar .is-dropdown-submenu-parent > ul > li > a:hover,
#admin-nav-bar .is-dropdown-submenu-parent > ul > li.is-active {
  border-bottom: none !important;
}

#header .nav-links a,
#header .top-nav-links a,
#header #public-nav div.active a,
#top-nav a.my-home-nav:hover,
.top-nav-button {
  color: #383838;
}

/* Reverse the colors */
#header #public-nav .nav-links.active a {
  color: rgb(255, 255, 255) !important;
  background-color: #383838;
}

#admin-nav-bar ul.icon-bar.menu > li > a.parent:hover {
  color: #383838;
}

/*********************************
 * Footer
 *********************************/
#footer, #admin-footer {
  background-color: #333;
}

#footer a,
#admin-footer a,
#footer span.divider {
  color: #fff;
}

/*********************************
 * Elements that use primary color
 *********************************/
.user-side #main-content .tabs .ui-state-hover-receiver {
  background: rgb(0, 145, 200);
}

/*********************************
 * User side program selector
 *********************************/

#top-nav button.program-selector-dropdown {
  border: 1px solid rgba(56, 56, 56, 0.25);
}

#top-nav button.program-selector-dropdown .selected,
#top-nav button.program-selector-dropdown .caret {
  background-color: transparent;
  color: #383838;
}

#top-nav button.program-selector-dropdown:hover {
  background-color: rgb(255, 255, 255);
}

.mobile-side-nav button.program-selector-dropdown {
  border: 1px solid var(--color-gray-200);
}


/*********************************
 * Admin forms
 *********************************/

.admin-side .admin-actions .toggle-button,
.admin-side .admin-actions .toggle-button-large,
.admin-side .label.profile-link.primary {
  background-color: rgb(0, 145, 200);
  color: white;
}

.admin-side .admin-actions .secondary.toggle-button,
.admin-side .admin-actions .secondary.toggle-button-large {
  background-color: transparent;
  border: 1px solid rgb(0, 145, 200);
  color: rgb(0, 145, 200);
}

/*********************************
 * Menu
 *********************************/

ul.menu li {
  background-color: transparent;
}

.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a::after,
#public-nav ul.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-top-style: none;
}

/*
ul.dropdown.menu li ul.submenu button:hover,
ul.dropdown.menu li ul.submenu a:hover,
ul.dropdown.menu li ul.submenu a:hover p {
  background-color: rgb(255, 255, 255);
  color: #383838;
}

.items-toolbar ul.dropdown.menu li ul.submenu button:hover,
.items-toolbar ul.dropdown.menu li ul.submenu a:hover,
.items-toolbar ul.dropdown.menu li ul.submenu li a:hover {
  background-color: rgb(0, 145, 200);
  color: white;
}

.items-toolbar .actions .submenu .fa,
.items-toolbar .actions .submenu .far,
.items-toolbar .actions .submenu .fas,
.items-toolbar .actions .submenu .fal,
.items-toolbar .actions .submenu .fab {
  color: rgb(0, 145, 200);
}

.items-toolbar ul.dropdown.menu li ul.submenu button:hover i,
.items-toolbar ul.dropdown.menu li ul.submenu a:hover i {
  color: white;
}
*/

/*********************************
 * Communities
 *********************************/

.thredded--post .thredded--post--content a,
.thredded--preview-area--post.thredded--post--content a {
  color: rgb(0, 145, 200);
}

.thredded--user-navigation--unread-topics #thredded--icon {
  fill: rgb(0, 145, 200);
}

.thredded--pending-moderation .thredded--moderation-navigation--pending a,
.thredded--moderation-history .thredded--moderation-navigation--history a,
.thredded--moderation-users .thredded--moderation-navigation--users a,
.thredded--moderation-user .thredded--moderation-navigation--users a,
.thredded--moderation-activity .thredded--moderation-navigation--activity a,
.thredded--moderation-navigation--item a:active,
.thredded--navigation-breadcrumbs a:active,
.thredded--user-navigation--item a,
.thredded--user-navigation--item a:focus,
.thredded--user-navigation--item a:hover,
.thredded--user-navigation--item.thredded--is-current a,
.thredded--user-navigation--item.thredded--is-current a,
.thredded--moderation-navigation--item a:focus,
.thredded--navigation-breadcrumbs a:focus,
.thredded--moderation-navigation--item a:hover,
.thredded--topics--updated-by a,
.thredded--navigation-breadcrumbs a,
.thredded--post--user a,
.thredded--topic-header--started-by a {
  color: rgb(0, 145, 200) ;
}

header.thredded--messageboard--header .thredded--messageboard--title-no-image,
.community-topic-header-no-image {
  background-color: rgb(0, 145, 200);
  color: #fff;
}

.thredded--topics--title a,
.thredded--navigation-breadcrumbs .active a {
  color: inherit;
}

.thredded--topics--title a:hover,
.thredded--topics--updated-by a:hover, .thredded--navigation-breadcrumbs a:hover, .thredded--user-navigation--item a:hover, .thredded--post--user a:hover, .thredded--topic-header--started-by a:hover {
  color: inherit;
}

#thredded--container a.button:not([role="tab"]):hover {
  color: rgb(0, 145, 200);
}

/*********************************
 * Buttons
 *********************************/

/* most buttons will have the same button color on hover except for these */

.button:not([role="tab"]),
button:not([role="tab"]),
.toggle-button {
  background-color: rgb(0, 145, 200);
}

a.button.disabled {
  color: black;
}

.toggle-button {
  border: 1px solid rgb(0, 145, 200);
}

#skip-links a,
.AnyTime-pkr .AnyTime-cur-btn,
.pagination-container .current,
.thredded--button, .thredded--form--submit {
  color: white;
  background-color: rgb(0, 145, 200);
}

.ui-widget-content a.button:hover,
.AnyTime-pkr .AnyTime-cur-btn.ui-state-focus,
.sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a {
  color: white;
  background-color: rgb(0, 145, 200);
}

.slick-dots .button:not(.hollow):not(.transparent):hover,
.slick-dots button:not(.hollow):not(.transparent):hover,
.slick-dots .button:not(.hollow):not(.transparent):focus,
.slick-dots button:not(.hollow):not(.transparent):focus {
  background-color: transparent;
}

.date-badge,
a.remove_fields,
a.delete-row,
.sp-cancel {
  color: rgb(0, 145, 200);
}

/*********************************
 * Icons
 *********************************/

.actions-container a:focus,
.actions-container a:focus i,
input[type="file"]:hover + i,
input[type="file"]:focus + i {
  opacity: 0.8;
  cursor: pointer;
}

.criterion-data .read-more,
.criterion-data .read-less {
  color: white;
  background-color: rgb(0, 145, 200);
}

.admin-side i.fa-arrows {
  //color: rgb(0, 145, 200);

}


/*********************************
 * Post-Tailwind
 *********************************/
.circular-progress-bar .progress {
  stroke: rgb(0, 145, 200);
}

#thredded--container p,
#thredded--container a,
#thredded--container label,
#thredded--container time,
#thredded--container input,
#thredded--container {
  font-family: "Helvetica Neue", Arial, "Times New Roman" !important;
}

/*********************************
 * Elements that use custom css
 *********************************/
.custom-link-color {
   color: #383838;
}