/* Student-PC | Base: CSS variables, resets, utilities, shared UI (alerts, tabs chrome, modal close, IE11 notice). */

:root {
  /* 10 Shades of Gray */
  --white: #ffffff;
  --off-white: #dddddd;
  --super-lightgray: #d3d3d3;
  --white-text-color: #ffffff;
  --background-color: #f5f5f5;
  --lightgray: #888888;
  --gray: #636363;
  --text-color: #222222;
  --dark-background-color: #333333;
  --black-transparent: #00000066;

  /* Colors */
  --error-container-color: #ffdedd;
  --insurance-background-color: #dff7df;
  --link-color: #017ab4;
  --light-blue: #46c6d9;
  --komplett-yellow: #f8b912;
  --error-color: #d0021b;

  /* Global */
  word-wrap: break-word;
}

/* Project specific */
body div {
  font-size: 13px;
}

.spc-ie11-alert {
  display: none;
  font-size: 14px;
  background-color: #fffbde;
  padding: 12px 24px;
  align-items: center;
}

.spc-ie11-alert__icon {
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8b912;
  font-size: 22px;
  border-radius: 50%;
  margin-right: 16px;
  color: white;
}

@media all and (-ms-high-contrast: active), all and (-ms-high-contrast: none) {
  .spc-ie11-alert {
    display: flex;
  }
}

/* UTILITY CLASSES */
.hidden {
  display: none;
}

/* Locks page scroll while a modal is open (toggled by the modal JS). */
.spc-no-scroll {
  overflow: hidden;
}

/* SPC GENERAL UI */
@media screen and (max-width: 599px) {
  .caas .container {
    /* The mobile is its own container */
    padding: 0;
  }
}

.spc-alert-message {
  font-size: 14px;
  background-color: #fffbde;
  padding: 12px 24px;
  align-items: center;
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
}

.spc-modal__close {
  margin-left: auto;
  order: 2;
}

.spc-register__form .spc-alert-message {
  margin: auto -25px;
}

.spc-alert-message__icon {
  height: 32px;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8b912;
  font-size: 22px;
  border-radius: 50%;
  margin-right: 16px;
  color: white;
  float: right;
}

.spc-alert-message p {
  margin: 0;
}

.spc-buy-button {
  max-width: 200px;
}

.spc-tabs ul {
  padding-inline-start: 16px;
}

.spc-tabs h3 {
  margin-top: 0;
  font-size: 18px;
  font-weight: 700;
}

.spc-tabs span {
  font-weight: bold;
  font-size: 16px;
}

.spc-tabs .btn-large {
  min-width: 250px;
  width: auto;
  flex: 1 1 auto;
}

.spc-tabs .hidden-alternative:disabled {
  background-color: var(--background-color);
  border: none;
  cursor: not-allowed;
}

.spc-tabs .hidden-alternative:disabled:hover {
  background-color: var(background-color);
}