body {
  margin: 0;
  background-color: var(--branded-theme-colours-background-default-primary);
}

img {
  pointer-events: none;
}

.section {
  width: calc(100% - (var(--constant-padding-large) * 2));
  padding-left: var(--constant-padding-large);
  padding-right: var(--constant-padding-large);
}

/*.section.padding {*/
/*  padding-top: var(--constant-padding);*/
/*  padding-bottom: var(--constant-padding-large);*/
/*}*/

/*.section.padding-large {*/
/*  padding-top: var(--constant-padding-large);*/
/*  padding-bottom: var(--constant-padding-large);*/
/*}*/

/*.section.padding-extra-large {*/
/*  padding-top: var(--constant-padding-extra-large);*/
/*  padding-bottom: var(--constant-padding-extra-large);*/
/*}*/

.content {
  width: 100%;
  max-width: 1440px;
  margin: auto;
}

.content-small {
  width: 100%;
  max-width: 720px;
  margin: auto;
}

.card {
  background-color: var(--branded-theme-colours-background-default-secondary);
  border-radius: var(--constant-padding-small);
  padding: var(--constant-padding);
}

.card-no-padding {
  background-color: var(--branded-theme-colours-background-default-secondary);
  border-radius: var(--constant-padding-small);
}

.dark-mode .card {
  background-color: var(--dark-secondary-background);
}

.padded-label {
  padding: 6px 20px;
  border-radius: 100px;
}

.padded-label-large {
  padding: 6px 20px;
  border-radius: 16px;
}

.padded-label-small {
  padding: 2px 12px 3px 12px;
  border-radius: 100px;
}

.keyboard-label {
  padding: 6px 12px;
  border-radius: 8px;
}

.dash-view {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%237676801E' stroke-width='4' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
  border-radius: 16px;
  overflow: hidden;
}

.loader {
  width: 24px;
  height: 24px;
  
  border: 4px solid var(--branded-theme-colours-fill-quaternary); 
  border-top: 4px solid var(--branded-theme-colours-brand-primary); 
  border-radius: 50%;
  
  animation: spin 750ms linear infinite;
}

.loader.small {
  width: 16px;
  height: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.border-radius {
  border-radius: var(--constant-padding);
}

.border-radius-small {
  border-radius: var(--constant-padding-small);
}

.border-radius-extra-small {
  border-radius: var(--constant-padding-extra-small);
}



.pop-over {
  position: fixed;
  left: 50%;
  top: 50%;
  max-height: 90vh;
  transform: translate(-50%, -50%);
  width: 720px;
  overflow: scroll;
  background-color: var(--light-background);
  border-radius: var(--constant-padding-small);
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.33);
}

.mode-toggle {
    padding: 4px var(--constant-padding-small);
    color: var(--branded-theme-colours-footer-foreground-secondary);
}

.mode-toggle.active {
    background-color: var(--branded-theme-colours-footer-foreground-secondary);
    border-radius: 100px;
    color: var(--branded-theme-colours-footer-background);
}


@media screen and (max-width: 720px) {
  .section {
    width: calc(100% - (var(--constant-padding) * 2));
    padding-left: var(--constant-padding);
    padding-right: var(--constant-padding);
  }
}