.customColor #app .topBar .navbar {
  background-color: #c9c9c7 !important;
  background-size: contain;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5);
}
.customColor #app .footer {
  background-color: gray;
  background: url("footerGradient.jpg");
  background-size: contain;
}
.customColor
  #app
  .topBar
  .navbar
  .navbar-collapse
  .navbar-nav
  .nav-item
  .nav-link {
  color: #005aa0;
}
.customColor #app .footer {
  color: #636363;
}
.customColor #app .footer .wrapper p a {
  color: #636363;
}
.customColor #app .footer .chevron svg.icon {
  stroke: #636363;
}
.customColor
  #app
  .topBar
  .navbar
  .navbar-collapse
  .navbar-nav
  .nav-item
  .nav-link.router-link-exact-active,
.customColor
  #app
  .topBar
  .navbar
  .navbar-collapse
  .navbar-nav
  .nav-item.hasSubNav
  .nav-link.router-link-active,
.customColor
  #app
  .topBar
  .navbar
  .navbar-collapse
  .navbar-nav
  .nav-item.hasSubNav.active
  .nav-link,
.customColor
  #app
  .topBar
  .navbar
  .navbar-collapse
  .navbar-nav
  .nav-item.dropdown.mainNavBtn.active {
  color: #f37b21;
  border-color: #f37b21;
}
.customColor #app .formStyleWrapper {
  background-color: #a96123;
}
.customColor #app .subTopBar .rightSideContainer > div {
  color: #fff;
}
.customColor #app .navbar-dark .navbar-toggler {
  color: #fff;
  border-color: #fff;
}
.customColor #app .topBar .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(256, 256, 256, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.customColor #app .topBar .navTitle {
  color: #005aa0;
}
.customColor #app .welcome {
  color: #005aa0;
}
.customColor #app .topBar .navbar .navbar-collapse .dropdown-menu {
  background-color: #f37b21;
}
.customColor
  #app
  .topBar
  .navbar
  .navbar-collapse
  .navbar-nav
  .nav-item
  ul.dropdown-menu
  li:not(.disabled):hover {
  background-color: #005aa0;
}
@media (max-width: 767px) {
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item
    .nav-link,
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item.hasSubNav
    .nav-link.router-link-active,
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item.hasSubNav
    .dropdown-menu
    .active
    .dropdown-item {
    color: #fff;
  }
  .customColor #app .topBar .navbar .navbar-collapse .navbar-nav {
    background-color: #f37b21;
  }
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item
    .nav-link.router-link-exact-active,
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item.hasSubNav
    .nav-link.router-link-active,
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item.hasSubNav
    .dropdown-menu
    .active {
    background-color: #005aa0;
  }
  .customColor #app .topBar .navbar .navbar-collapse .navbar-nav .nav-item {
    border-bottom: 1px solid #263238;
  }
  .customColor
    #app
    .topBar
    .navbar
    .navbar-collapse
    .navbar-nav
    .nav-item.dropdown {
    background: #f37b21;
  }
}

.customColor #app .SSOIssue {
  color: #636363;
}

/* title box shaolow */
.customColor #app .home .boxContainer .boxContainerWrapper {
  box-shadow: 0 0 3px 1px rgb(0 0 0 / 80%);
}
.customColor #app .mainContainer .row .boxContainer .boxWrapper {
  box-shadow: 0 0 3px 1px rgb(0 0 0 / 80%);
}
.customColor #app .home .boxContainer > div .boxContent .activeCurriculaNum {
  color: #005aa0;
  border: 2px solid #005aa0;
}

.customColor #app .subTopBar,
.customColor #app .mainContainer .titleBar,
.customColor #app .mainContainer .titleBar-sm {
  background-color: #f37b22;
}
.customColor #app .curriculum.mainContainer .container-fluid .curriculumLeftCol,
.customColor
  #app
  .curriculum.mainContainer
  .container-fluid
  .curriculumLeftCol
  .assetBox
  .assetList
  .assetIcon {
  background-color: #005aa0;
}
.customColor
  #app
  .curriculum.mainContainer
  .container-fluid
  .curriculumLeftCol
  .assetBox {
  border-top: 1px solid #4c88b7;
}

/* To Do View */
.customColor #app .todo .row .title,
.customColor #app .todo .row .title.noDueDate {
  color: #005aa0;
}
.customColor #app .todo .row .title.overdue {
  color: #000;
}
.customColor #app .todo .row .title.dueInToday {
  color: #005aa0;
}
.customColor #app .todo .row .title.dueThisWeek {
  color: #005aa0;
}
.customColor #app .todo .row .title.dueThisMonth,
.customColor #app .todo .row .title.dueInFuture {
  color: #005aa0;
}

.customColor #app .progressCircle circle:first-of-type {
  fill: #fff;
}
.customColor #app .progressCircle p {
  color: #aebcc4;
}

/* Events */
.customColor
  #app
  .eventDetails.mainContainer
  .container-fluid
  .eventDetailLeftCol,
.customColor
  #app
  .eventDetails.mainContainer
  .container-fluid
  .eventDetailLeftCol
  .eventBox
  .eventList
  .eventIcon {
  background-color: #005aa0;
}
.customColor
  #app
  .eventDetails.mainContainer
  .container-fluid
  .eventDetailLeftCol
  .eventBox
  .eventList {
  border-top: 1px solid #4c88b7;
}
.customColor
  #app
  .eventDetails.mainContainer
  .container-fluid
  .eventDetailLeftCol
  .eventTimeLocation
  .dates,
.customColor
  #app
  .eventDetails.mainContainer
  .container-fluid
  .eventDetailLeftCol
  .eventBox
  .eventList
  .eventTitle {
  color: #fff;
}

/* Merits */
.customColor #app .mertis .container .mertisBox {
  background-color: #005aa0;
}
.customColor #app .mertis .container .mertisBox.disabled {
  background-color: #3a5c76;
  color: #10171c;
}

/* Notification View */
.customColor #app .nottifications .NotificationSC .notificationConainer h3,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-NEW-EVENT,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-NEW-ASSIGNMENTS,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-NEW-EVENTS-UPDATED,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-NEW-BADGES,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-NEW-LEADERBOARD {
  color: #005aa0;
  border-bottom: solid 1px #005aa0;
}
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-DUE-THIS-WEEK,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-DUE-FOUR-DAY {
  color: #005aa0;
  border-bottom: solid 1px #005aa0;
}
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-DUE-ONE-DAY,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-DUE-TODAY {
  color: #005aa0;
  border-bottom: solid 1px #005aa0;
}
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-OVERDUE-ONE-DAY,
.customColor
  #app
  .nottifications
  .NotificationSC
  .notificationConainer
  h3.Noti-OVERDUE-SEVEN-DAY {
  color: #000;
  border-bottom: solid 1px #000;
}
.customColor #app .nottifications .NotificationSC .notificationTitle,
.customColor #app .nottifications .NotificationSC .notificationConainer {
  color: #636363;
}
.customColor #app .nottifications .NotificationSC .notificationConainer li {
  border-color: #636363;
}

/* profile */
.customColor #app .myProfile.mainContainer > .container {
  background-color: #005aa0;
}
.customColor #app .myProfile.mainContainer .titleBar {
  background-color: #f37b21;
}

.customColor #app .todo h2.noItemFound,
.customColor #app h2.noItemFound,
.customColor
  #app
  .nottifications
  .NotificationSC
  .noNotificationContainer
  .container
  h2 {
  color: #636363;
}

/* login footer */
.customColor #app .login .footer,
.customColor #app .resetPassword .footer,
.customColor #app .forgotPassword .footer {
  background: none;
}
.customColor #app .login .footer,
.customColor #app .footer .wrapper p a,
.customColor #app .login .footer p a,
.customColor #app .login .footer p .externalLinks,
.customColor #app .resetPassword .footer,
.customColor #app .resetPassword .footer p a,
.customColor #app .resetPassword .footer p .externalLinks,
.customColor #app .forgotPassword .footer,
.customColor #app .forgotPassword .footer p a,
.customColor #app .forgotPassword .footer p .externalLinks {
  color: #fff;
}
.customColor #app .login .footer .poweredBy,
.customColor #app .resetPassword .footer .poweredBy,
.customColor #app .forgotPassword .footer .poweredBy {
  background-image: url("powered-by-white.png");
}
/* login BG */
body.customColor .login,
body.customColor .resetPassword,
body.customColor .forgotPassword {
  background-image: url("bg_light-Login.jpg");
}

.customColor #app .login .wrapper form .form-group,
.customColor #app .login .form-control,
body.customColor .resetPassword .wrapper form .form-group,
body.customColor .resetPassword .wrapper .form-control,
body.customColor .forgotPassword .wrapper form .form-group,
body.customColor .forgotPassword .wrapper .form-control {
  color: #005aa0;
  border-color: #005aa0;
}
.customColor .btn.btn-danger {
  background-color: #00467c;
  border-color: #00467c;
}
.customColor .btn.btn-danger:focus,
.customColor .btn-danger:not(:disabled):not(.disabled).active:focus,
.customColor .btn-danger:not(:disabled):not(.disabled):active:focus,
.customColor .show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgb(0 90 160 / 50%);
}
.customColor .btn-danger:not(:disabled):not(.disabled).active,
.customColor .btn-danger:not(:disabled):not(.disabled):active,
.customColor .show > .btn-danger.dropdown-toggle {
  background-color: #012846;
  border-color: #012846;
}
.customColor a.btn {
  color: #005aa0;
  background-color: #ffffff;
  border-color: #005aa0;
}

/* reports */
.customColor #app .report .topBar {
  background-color: #f37b21;
}
.customColor #app .report .sectionTitleBar,
.customColor #app .report .downloadBtn,
.customColor #app .report .btn.launchBtn,
.customColor #app .report .userTypeViewButton.active,
.customColor #app .report #overdueTable .tableTitle,
.customColor #app .report #failedTable .tableTitle,
.customColor #reportModal .modal-header {
  background-color: #44c7f2 !important;
}
.customColor #app .report .progressCircle p.percentage,
.customColor #app .report #topTenTable .cellRow > .wrapper > .cell:last-child,
.customColor
  #app
  .report
  #topTenTableManager
  .cellRow
  > .wrapper
  > .cell:last-child,
.customColor #app .report #overdueTable .cellRow > .wrapper > .cell:last-child,
.customColor #app .report #failedTable .cellRow > .wrapper > .cell:last-child {
  color: #44c7f2;
}
.customColor #app .report .progressCircle circle:last-of-type {
  stroke: #44c7f2;
}
.customColor #app .report .learnerData .dataBox-curriculaCompleted {
  background-color: #005aa0;
}
.customColor #app .report .learnerData .dataBox-curriculaStarted,
.customColor #app .report .learnerData .dataBox-curriculaCompleted {
  border-color: #005aa0;
}
.customColor #app .report .learnerData .dataBox-curriculaStarted {
  color: #005aa0;
}
.customColor #app .report .learnerData .dataBox-assetsCompleted {
  background-color: #00809e;
}
.customColor #app .report .learnerData .dataBox-assetsStarted,
.customColor #app .report .learnerData .dataBox-assetsCompleted {
  border-color: #00809e;
}
.customColor #app .report .learnerData .dataBox-assetsStarted {
  color: #00809e;
}