.btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:8px 12px;

border-radius:var(--radius-8);

cursor:pointer;
font-weight:var(--Font-Weight-type-weight-bold-700);
line-height:  var(--Line-Height-type-lh-label);
font-size:var(--Font-Size-type-size-label);

}

.btn-xl{
padding:12px 16px;
}

/* primary */

.brand-button-primary{

background:var(--button-primary-bg);
color:var(--button-primary-text);

}
a.go-to-top-button.show-top-button:hover{
    color: var(--color-foreground-inverse);
}
.brand-button-primary:hover{
background:var(--button-primary-hover);
color:var(--button-primary-text);

}
button#downloadShareCardBtn img {
    filter: brightness(0) invert(1);
    margin-right: 4px;
}
/* secondary */

.brand-button-secondary{
background:var(--button-secondary-bg);
color:var(--button-secondary-text);
}
.brand-button-secondary:hover{
background:var(--button-secondary-hover);
color:var(--button-secondary-text);
border: 1px solid var(--Primary-Brand-primary);
}

.brand-button-disabled{
background:var(--color-brand-primary-alpha-10);
color:var(--Primary-Brand-primary);
}
.brand-button-disabled:hover{
background:var(--color-brand-primary-alpha-10);
color:var(--Primary-Brand-primary);

}

/* status buttons */

.btn-success{
background:transparent;
color:var(--button-success-text);
border:1px solid var(--button-success-border);
}
.btn-success:hover{
background:var(--button-success-hover);
border-color:var(--button-success-hover-border);
}

.btn-error{
background:transparent;
color:var(--button-error-text);
border:1px solid var(--button-error-border);
}
.btn-error:hover{
background:var(--button-error-hover);
border-color:var(--button-error-hover-border);
}

.btn-loader-host{
position:relative;
vertical-align:middle;
text-decoration:none;
}

.btn-loader-host .loader-overlay{
left:50%;
top:50%;
right:auto;
bottom:auto;
transform:translateX(-50%) translateY(-50%);
}

.btn-loader-host .spinner{
width:3.101em;
}

.btn-loader-host .spinner > div{
width:0.7em;
height:0.7em;
}

.btn-loader-host .spinner-circle{
top:-13px;
left:-13px;
height:26px;
width:26px;
clip:rect(0, 26px, 26px, 13px);
}

.btn-loader-host .spinner-circle:after{
left:0;
top:0;
height:26px;
width:26px;
clip:rect(0, 26px, 26px, 13px);
}

.event-register-btn.event-btn-loading{
pointer-events:none;
}

.event-register-btn.event-btn-loading .event-reg-btn{
opacity:0;
}

.event-register-btn.event-btn-loading .spinner > div{
background-color:var(--color-foreground-inverse);
}


.cp-tab.active {
    background: var(--bg-tab-primary);
    color: var(--text-tab-primary);
    font-weight: 700;
}

.cp-tab {
    padding: 8px 12px;
    background: transparent;
    color: var(--text-tab-secondary);
    font-size: var(--Font-Size-type-size-label);
    font-weight: var(--Font-Weight-type-weight-medium-500);
    line-height: var(--Line-Height-type-lh-label);
}
.cp-tab:hover:not(.active) {
    background: var(--bg-muted-lite);
    color: var(--text-tab-secondary);
}


.secondary-button {
  background-color: var(--cp-legacy-brand-alpha-10);
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--cp-legacy-brand-primary);
  font-weight: 500;
  font-size: 14px;
  margin-right: 10px;
  display: inline-block;
  border: 1px solid transparent;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  line-height: 20px;
}

.secondary-button:hover {
  border-color: var(--cp-legacy-brand-primary);
  color: var(--cp-legacy-brand-primary);
}

.primary-button {
  background-color: var(--cp-legacy-brand-primary);
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--color-foreground-inverse);
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
  transition: background 4s ease-in-out, box-shadow 0.8s ease-in-out, background-position 4s ease-in-out;
}

.primary-button img {
  vertical-align: top;
}

.primary-button:hover {
  color: var(--color-foreground-inverse) !important;
  background: linear-gradient(180deg, var(--cp-legacy-brand-primary) 0%, var(--cp-legacy-brand-ink-1) 116.67%);
  box-shadow: 0px 6px 30px 0px var(--cp-legacy-brand-border-30);
  background-position: 100px;
}



.primary-button img {
  -webkit-animation-name: bellanimate;
  -webkit-animation-duration: 1.8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 0;
  -webkit-animation-timing-function: ease-in-out;
  animation-name: bellanimate;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  transform-origin: 50% 0;
  animation-timing-function: ease-in-out;
}