/********************************************************/
/* Initial settings                                     */
/********************************************************/
/********************************************************/
/* CleverLearning styles for buttons, backgrounds etc   */
/********************************************************/
.bg-cleverlms-primary {
  background-color: #191B48;
  color: #ffffff;
}
.bg-cleverlms-dark {
  background-color: #191B48;
  color: #ffffff;
}
.bg-cleverlms-secondary {
  background-color: #191B48;
  color: #ffffff;
}
.cleverlms-star {
  background-repeat: no-repeat;
  background-position: top -50px right 50px;
}
.btn {
  color: #ffffff;
  background-color: #191B48;
  border-color: #ffffff;
}
.btn:hover {
  color: #ffffff;
  background-color: #0044af;
  border-color: #0044af;
}
.btn-cleverlms {
  color: #302d2d;
  background-color: #E5E059;
  border-color: #efefef;
}
.btn-cleverlms:hover {
  color: #302d2d;
  border-color: #ffffff;
  background-color: #ece885;
}
.btn-cleverlms {
  color: #302d2d;
  background-color: #E5E059;
  border-color: #efefef;
}
.btn-cleverlms:hover {
  color: #302d2d;
  border-color: #ffffff;
  background-color: #ece885;
}
.btn-cleverlms-buy {
  color: #ffffff;
  background-color: #f30013;
  border-color: #efefef;
}
.btn-cleverlms-buy:hover {
  color: #ffffff;
  border-color: #ffffff;
  background-color: #ff2738;
}
.buttonList {
  background-color: #efefef;
  color: #302d2d;
  height: 50px;
}
.buttonList .btn-sm {
  height: 80%;
  border: none;
}
.breadcrumb {
  background-color: #191B48;
  color: #ffffff;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a,
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #ffffff;
}
/********************************************************/
/* Change header                                        */
/********************************************************/
.navbar-top-cleverlms {
  min-height: 80px;
}
.logotype {
  height: 100%;
  width: 700px;
}
.navbar-brand {
  height: 80px;
  line-height: 80px;
}
.cleverlms-toggler.navbar-toggler {
  border-color: #ffffff;
}
/* Setting the stroke to white using rgb values (255, 255, 255,1.0) */
.cleverlms-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
.navbar-toggle {
  /* Use this formula if height is changed, replace 80px with actual value */
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}
@media (min-width: 768px) {
  .navbar-nav > li > a {
    /* Use this formula if height is changed, replace 80px with actual value */
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}
/********************************************************/
/* Styling for modals (popups)                           */
/********************************************************/
.modal-backdrop {
  opacity: 0.8 !important;
}
.modal-header {
  background-color: #191B48;
  color: #ffffff;
}
.modal-header .close {
  color: #ffffff;
  opacity: 1 !important;
}
.modal-header .close:hover {
  color: #ffffff;
  opacity: 0.8 !important;
}
.modal-dialog {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
}
.modal-content {
  margin: 0 auto;
}
/********************************************************/
/* Add icon to search field                             */
/********************************************************/
.has-search .form-control {
  padding-left: 2.375rem;
}
.has-search .form-control-feedback {
  position: absolute;
  z-index: 2;
  display: block;
  width: 2.375rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  pointer-events: none;
  color: #aaaaaa;
}