.modal .modal-header .modal-title {
  font-family: Roboto;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: #212121;
}
.modal .modal-footer .btn-primary {
  border: 1px solid #0277BD;
  padding: 12px 20px;
  color: #fff;
  background: #0277bd;
  font-size: var(--bs-nav-link-font-size);
  border-radius: 4px;
  line-height: 20px;
  display: block;
  width: 100%;
}
.modal .modal-footer {
  border-top: none;
}
.modal .modal-footer .btn-primary:hover {
  background: #fff;
  color: #0277bd;
  -webkit-transition: background-color 400ms linear;
  -ms-transition: background-color 400ms linear;
  transition: background-color 400ms linear;
}

/* Register event modal */
#registerEventModal .modal-body .title-wrapper .title-label {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #616161;
}
#registerEventModal .modal-body .title-wrapper .title-value {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: #212121;
}
#registerEventModal .modal-body .bpr-wrapper .title,
#registerEventModal .modal-body .lecturer-wrapper .title,
#registerEventModal .modal-body .duration-wrapper .title {
  border: none;
  padding: 0;
  color: #212121;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  margin-bottom: .3rem;
  display: flex;
  align-items: center;
}
#registerEventModal .modal-body .event-info .title i {
  font-size: 20px;
  padding-right: 10px;
}
#registerEventModal .modal-body .duration-wrapper .title i {
  color: #0277bd;
}
#registerEventModal .modal-body .bpr-wrapper .title i {
  color: #f4511e;
}
#registerEventModal .modal-body .lecturer-wrapper .title i {
  color: #aa00ff;
}
#registerEventModal .modal-body .bpr-wrapper .description,
#registerEventModal .modal-body .lecturer-wrapper .description,
#registerEventModal .modal-body .duration-wrapper .description {
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: #212121;
  text-align: left;
}
#registerEventModal .modal-body .amount-wrapper .wrapper .amount-wrapper .amount-label {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
#registerEventModal .modal-body .amount-wrapper .wrapper .amount-wrapper .amount {
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
  color: #212121;
  display: flex;
}
#registerEventModal .modal-body .amount-wrapper .wrapper .amount-wrapper .amount .old-price {
  font-size: 16px;
  text-decoration: line-through;
  margin-right: 6px;
}
#registerEventModal .modal-body .amount-wrapper .wrapper .amount-wrapper .amount .new-price {
  color: #f4511d;
}
#registerEventModal .modal-body .amount-wrapper .wrapper .icon {
  display: flex;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  background: #fff;
  margin-right: 16px;
}
#registerEventModal .modal-body .amount-wrapper .wrapper .icon i {
  font-size: 24px;
  color: #33691e;
}
#registerEventModal .modal-body .amount-wrapper .wrapper {
  background: #F5F7F8;
  border-radius: 4px;
  padding: 16px;
}
#registerEventModal .modal-footer .alert.alert-success i,
#registerEventModal .modal-body .alert.alert-primary i {
  width: 1em;
  height: 1em;
  padding: .25em .25em;
  margin-right: 16px;
  color: #1e88e5;
  font-size: 20px;
  position: relative;
  top: -8px;
}
#registerEventModal .modal-footer .alert.alert-success div,
#registerEventModal .modal-body .alert.alert-primary div {
  color: #212121;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
#registerEventModal .modal-footer .alert.alert-success a {
  color: #212121;
  text-decoration: underline;
}
#registerEventModal .modal-body .alert.alert-primary {
  border: 1px solid #1e88e5;;
  background: #E3F2FD;
}
#registerEventModal .modal-body .info-text {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #212121;
}
#registerEventModal .modal-body .info-text i {
  color: #e53935;
  font-size: 16px;
  margin-right: 8px;
}