body {
  --font-size:                 1rem;
  --night:                     #282850;
  --primary-color:             #5f6fff;
  --color-disabled:            #afbdc6;
  --white:                     #fdfcfc;
  --dark-grey:                 #5c5b63;
  --medium-grey:               #989599;
  --error-color:               #ff0043;
  --button-prev-background:    #f9f7f6;
  --space:                     20px;
  --grid-gap:                  16px;
  --blue-border:               3px solid var(--primary-color);
  --group-border-radius-small: 8px;
  --group-border-radius-big:   24px;
  --box-shadow:                0 6px 12px -2px rgba(199, 194, 195, 0.2),
                               0 2px 8px -2px rgba(199, 194, 195, 0.5);
  --drop-shadow:               0 0 10px rgba(0, 0, 0, 0.15);
  --error-dialog-shadow:       0 20px 20px rgba(0, 0, 0, 0.5);
  --small-font:                0.8rem;
  background-color:            var(--button-prev-background);
  padding:                     0;
  display:                     flex;
  flex-direction:              column;
  min-height:                  100vh;
}

footer {
  margin-top: auto;
}

.hidden {
  display: none;
}


div.sui-header-nav {
  flex-grow: 0;
}

.message {
  color: var(--sui-color-success);
}

.error {
  color: var(--sui-color-error);
}

h1 {
  font-size:     2rem;
  margin-bottom: 0.3rem;
  font-weight:   650;
}

h2 {
  font-size:     1.5rem;
  margin-bottom: 0.3rem;
  font-weight:   650;
}

/* region recommendation stuff */

#recommendations h3 {
  margin-bottom: 0;
}

@media (max-width: 548px) {
  #recommendations button {
    width: 100%;
  }
}

#recommendations p.open {
  color:         #5656A2;
  font-weight:   650;
  margin-bottom: 0;
}

#recommendations p.success {
  color:         var(--sui-color-success);
  font-weight:   650;
  margin-bottom: 0;
}

/* endregion */

/* region choose gift */

.divider-bottom {
  border-bottom: 1px solid rgba(from var(--sui-color-night-750) r g b/10%);
  margin-bottom: var(--space);
}

@media (max-width: 548px) {
  #choose-gift button {
    width: 100%;
  }

  #redeem-code a {
    width: 100%;
  }
}

/* endregion */

strong {
  font-weight: 650;
}

input.link {
  border-radius:    var(--group-border-radius-small);
  border:           2px solid #C7C6ED;
  width:            100%;
  padding:          calc(var(--space) / 2) calc(var(--space) / 10 * 7);
  background-color: var(--sui-color-bright-50);
}

#input-button-group > input {
  border-right:               none;
  border-top-right-radius:    0;
  border-bottom-right-radius: 0;
  color:                      var(--sui-color-electric-900) !important;
}

#input-button-group > button.copy-button {
  border:           2px solid #C7C6ED;
  border-left:      none;
  border-radius:    0 var(--group-border-radius-small) var(--group-border-radius-small) 0;
  background-color: var(--sui-color-bright-50);
  padding:          2px 10px;
  font-size:        1.5rem;
}

#input-button-group > button.copy-button > i {
  color: var(--sui-color-electric-900) !important;
}

.electric {
  color: var(--sui-color-electric);
}

.shadowed {
  box-shadow: var(--box-shadow);
}

.centered {
  text-align: center;
}

.flex-column {
  display:        flex;
  flex-direction: column;
}

.centered-on-large {
  align-self: center;
}

@media (max-width: 548px) {
  .centered-on-large {
    align-self: start;
  }
}

.step {
  display:         flex;
  flex-direction:  row;
  flex-wrap:       nowrap;
  justify-content: flex-start;
  align-items:     center;
  align-content:   center;
}

@media (max-width: 548px) {
  .step:not(:last-child) {
    border-bottom: 1px solid rgba(from var(--sui-color-night-750) r g b/10%);
    margin-bottom: var(--space);
  }
}

@media (min-width: 549px) and (max-width: 992px) {
  .step:nth-child(1), .step:nth-child(2) {
    border-bottom: 1px solid rgba(from var(--sui-color-night-750) r g b/10%);
    margin-bottom: var(--space);
  }

  .sui-col-quarter.step:nth-child(1), .sui-col-quarter.step:nth-child(3) {
    border-right: 1px solid rgba(from var(--sui-color-night-750) r g b/10%);
  }

  .sui-col-quarter.step > i {
    margin-left: calc(var(--space) / 2);
  }

  .sui-col-third.step:nth-child(1) {
    border-right: 1px solid rgba(from var(--sui-color-night-750) r g b/10%);
  }

  .sui-col-third.step:nth-child(3) {
    border-right: none;
  }

  .sui-col-third.step > i {
    margin-left: calc(var(--space) / 2);
  }
}

@media (min-width: 993px) {
  .step:not(:last-child) {
    border-right: 1px solid rgba(from var(--sui-color-night-750) r g b/10%);
  }

  .step > i {
    margin-left: calc(var(--space) / 2);
  }
}

.last-part {
  padding-top: var(--space);
  margin-top:  var(--space);
}

.stretched {
  display:     flex;
  justify-content: center;
}

.stretched a {
  min-width: 300px;
}

.step > i {
  flex-grow:    0;
  flex-shrink:  0;
  flex-basis:   auto;
  margin-right: var(--space);
  margin-top:   var(--space);
  color:        var(--sui-color-electric-dark);
  align-self:   baseline;
}

.step > p {
  flex-grow:   1;
  flex-shrink: 1;
  flex-basis:  auto;
  align-self:  flex-start;
}