body > header > nav > div > a:nth-child(1) > img {
  height: 32px;
}

/* ==========================================================================================================================
    Bootstrap v5 
    Main Container Configuration
=============================================================================================================================*/
main > .container {
  padding-top: 60px;
}

main > .container-fluid {
  padding-top: 60px;
}

/* ==========================================================================================================================
    Bootstrap v5 
    Forms
=============================================================================================================================*/
.form-helper {
  font-size: 0.875rem;
  margin-top: 0.25rem;
  width: 100%;
}

/* =========================================================================================================================
	Bootstrap v5 Additional Colour Themes 
	These are based on Bootstrap v5 - http://getbootstrap.com/getting-started/
   =========================================================================================================================
*/
.bg-primary-event {
  background-color: #7413dc !important;
}

.bg-navbar-event {
  background-color: #7413dc !important;
}

.bg-secondary-event {
  background-color: #23a950 !important;
}

.text-bg-primary-event {
  color: #fff !important;
  /*background-color: RGBA(25,135,84,var(--bs-bg-opacity,1)) !important;*/
  background-color: #7413dc !important;
}

.text-bg-secondary-event {
  color: #fff !important;
  /*background-color: RGBA(25,135,84,var(--bs-bg-opacity,1)) !important;*/
  background-color: #23a950 !important;
}

.bg-gradient-login {
  /* fallback for old browsers */
  background: #7413dc;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-120DEG, #360967, #7413dc, #b57bf4);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-120DEG, #360967, #7413dc, #b57bf4);
}

@media (min-width: 768px) {
  .login-form {
    height: 100vh !important;
  }
}
@media (min-width: 769px) {
  .bg-gradient-login {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
  }
}
/* Removed use bg-primary-event and bg-secondary-event instead


    .badge-primary-event {
    color: #fff;
    background-color: $eventsecondary;
}

.badge-secondary-event {
    color: #fff;
    background-color: $eventprimary;
}*/
.btn-primary-event {
  color: #fff;
  background-color: #7413dc;
  border-color: #7413dc;
}

.btn-primary-event:hover {
  color: #fff;
  background-color: #6310bb;
  border-color: #5b0fad;
}

.btn-secondary-event {
  color: #fff;
  background-color: #23a950;
  border-color: #23a950;
}

.btn-secondary-event:hover {
  color: #fff;
  background-color: #1d8b42;
  border-color: #1a7f3c;
}

.btn-outline-primary-event {
  color: #7413dc;
  border-color: #7413dc;
}

.btn-outline-secondary-event {
  color: #23a950;
  border-color: #23a950;
}

.btn-outline-primary-event:hover {
  color: #fff;
  border-color: #7413dc;
  background-color: #7413dc;
}

.btn-outline-secondary-event:hover {
  color: #fff;
  border-color: #23a950;
  background-color: #23a950;
}

.navbar-dark .btn-outline-primary-event {
  color: #f7f0fe;
  border-color: white;
}

.navbar-dark .btn-outline-secondary-event {
  color: #80e5a2;
  border-color: #d5f6e0;
}

.navbar-dark .btn-outline-primary-event:hover {
  color: black;
  border-color: rgba(255, 255, 255, 0.1);
  background-color: #f7f0fe;
}

.navbar-dark .btn-outline-secondary-event:hover {
  color: black;
  border-color: rgba(255, 255, 255, 0.1);
  background-color: #d5f6e0;
}

.card-primary-event {
  background-color: #7413dc;
}

.card-secondary-event {
  background-color: #23a950;
}

.text-primary-event {
  color: #7413dc !important;
}

.text-secondary-event {
  color: #23a950 !important;
}

.link-primary-event {
  color: #7413dc;
}

.link-secondary-event {
  color: #23a950;
}

.link-nounderline-primary-event {
  color: #7413dc;
}

a.link-nounderline-primary-event, a.link-nounderline-secondary-event {
  text-decoration: none;
}

a.link-nounderline-primary-event:hover, a.link-nounderline-secondary-event:hover {
  text-decoration: underline;
}

.list-group-flush-noline > .list-group-item {
  border-width: 0 0 1px;
  border-bottom-color: transparent;
  padding: 0.1rem 1rem;
}

.event-menu-popover {
  --bs-popover-max-width: 1000px;
  --bs-popover-border-color: yellow;
  --bs-popover-header-bg: yellow;
  --bs-popover-header-color: black;
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
  --bs-popover-border-width: 3px;
  --bs-popover-inner-border-radius: 0px;
}

/* ================================================================================================================================
	Bootstrap v5 Configuration for links within navs particularly the footer as these are configured by default in the header
   ================================================================================================================================ */
.link-nav {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease-in-out 0s, background-color 0.15s ease-in-out 0s, border-color 0.15s ease-in-out 0s;
}

.link-nav:hover, .link-nav:focus {
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================================================================================================
	General Cross Site Styles
	SyncFusion EJ2 Bootstrap v4 and v5 Controls overrides
   =========================================================================================================================
*/
.e-listview .e-list-item.e-active {
  background-color: #23a950;
  color: #fff;
}

/* =========================================================================================================================
	Stripe Elements 
	Formatting for Payment Processing via Stripe.com see - https://stripe.dev/elements-examples/
   =========================================================================================================================
*/
.payment-form * {
  font-size: 16px;
  font-weight: 500;
}

.payment-form form {
  max-width: 600px !important;
  padding: 0 15px;
  margin: auto auto 20px auto;
}

.payment-form form > * + * {
  margin-top: 20px;
}

.payment-form .container {
  background-color: #fff;
  /*border-color: black;
  border:solid;*/
  border-radius: 4px;
  padding: 3px;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  width: 100%;
}

.payment-form .card-only {
  display: block;
}

.payment-form .payment-request-available {
  display: none;
}

.payment-form input, .payment-form button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border-style: none;
  color: #fff;
}

.payment-form input:-webkit-autofill {
  transition: background-color 100000000s;
  -webkit-animation: 1ms void-animation-out;
}

.payment-form #card-element {
  padding: 10px;
  margin-bottom: 2px;
}

.payment-form input {
  -webkit-animation: 1ms void-animation-out;
}

.payment-form input::-webkit-input-placeholder {
  color: #9bacc8;
}

.payment-form input::-moz-placeholder {
  color: #9bacc8;
}

.payment-form input:-ms-input-placeholder {
  color: #9bacc8;
}

.payment-form button {
  display: block;
  width: 100%;
  height: 37px;
  background-color: #7413dc;
  border-radius: 2px;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
}

.payment-form button:active {
  color: #fff !important;
  background-color: #7413dc;
  border-color: #7413dc;
}

.payment-form button:hover {
  background-color: #6310bb;
  border-color: #5b0fad;
}

.payment-form #error .message {
  font-size: 15px;
}

.payment-form #success .icon .border {
  stroke: #ffc7ee;
}

.payment-form #success .icon .checkmark {
  stroke: #d782d9;
}

.payment-form #success .title {
  color: #212529;
}

.payment-form #success .message {
  color: #212529;
}

.payment-form #success {
  opacity: 0;
}

.payment-form #success {
  transition-property: opacity, transform;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;
  transform: translateY(50px);
}

.payment-form #error {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  left: 0;
  font-size: 13px !important;
  opacity: 0;
  transform: translateY(10px);
  transition-property: opacity, transform;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.payment-form #error.visible {
  opacity: 1;
  transform: none;
}

.payment-form #success {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 20px;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}

@media (min-width: 670px) {
  .payment-form .success {
    padding: 40px;
  }
}
.payment-form #success .icon {
  margin: 15px 0 30px;
  transform: translateY(70px) scale(0.75);
}

.payment-form #success .icon svg {
  will-change: transform;
}

.payment-form #success .icon .border {
  stroke-dasharray: 251;
  stroke-dashoffset: 62.75;
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: spin 1s linear infinite;
}

.payment-form #success .icon .checkmark {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s;
}

.payment-form #success .title {
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 30px;
}

.payment-form #success .message {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.6em;
}

.payment-form #success .message span {
  font-size: inherit;
}

.payment-form.submitted #success,
.payment-form.submitting #success {
  background: white;
  pointer-events: all;
  opacity: 1;
  transform: none !important;
}

.payment-form.submitting #success .icon {
  opacity: 1;
}

.payment-form.submitted #success > :nth-child(2) {
  transition-delay: 0.1s;
}

.payment-form.submitted #success > :nth-child(3) {
  transition-delay: 0.2s;
}

.payment-form.submitted #success > :nth-child(4) {
  transition-delay: 0.3s;
}

.payment-form.submitted #success .icon .border,
.payment-form.submitted #success .icon .checkmark {
  opacity: 1;
  stroke-dashoffset: 0 !important;
}

/* =========================================================================================================================
	Callouts as described here - https://getbootstrap.com/docs/5.0/customize/components/
    These put a coloured line on the left hand side and are bootstrap themed
    These are used to highlight important information
   =========================================================================================================================
*/
.bs-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 1px;
  border-left-color: rgb(233, 236, 239);
  border-left-width: 0.25rem;
  border-radius: 0.25rem;
}

.bs-callout-info {
  border-left-color: #0dcaf0;
}

.bs-callout-warning {
  border-left-color: #ffc107;
}

.bs-callout-danger {
  border-left-color: #dc3545;
}

.bs-callout-success {
  border-left-color: #198754;
}

.bs-callout-light {
  border-left-color: #f8f9fa;
}

.bs-callout-dark {
  border-left-color: #212529;
}

.bs-callout-primary {
  border-left-color: #0d6efd;
}

.bs-callout-secondary {
  border-left-color: #6c757d;
}

.bs-callout-primary-event {
  border-left-color: #7413dc;
}

.bs-callout-secondary-event {
  border-left-color: #23a950;
}