:host {
  display: block;
  box-sizing: border-box;
}

.container {
  box-sizing: border-box;
}

.full {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.hidden {
  display: none;
}

.max1080 {
  max-width: 1080px;
}

.responsive {
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

.primary {
  background-color: var(--primary-color); 
  --default-dark-text: var(--primary-text-color); 
}

.secondary {
  background-color: var(--secondary-color);
  --default-dark-text: var(--secondary-text-color);
}

.warning {
  background-color: var(--warning-color);
  --default-dark-text: var(--warning-text-color);
}

.light {
  background-color: var(--light-color);  
  --default-dark-text: var(--dark-text-color);
}

.dark {
  background-color: var(--dark-color);
  --default-dark-text: var(--light-text-color);
}

.scrollable {
  overflow-y: scroll;
}

@media (min-width: 1128px) {
  .responsive {
    padding-left: 80px;
    padding-right: 80px;
  }
}