:host {
    --loader-color               : var(--iq-foreground-color, #353535);

    display: flex;
}

:host > titled-container,
:host > wizard-page {
    flex: 1;
}

:host > wizard-page.hidden {
    display: none;
}

:host(.embedded) .hide-on-embedded,
:host(:not(.embedded)) .show-on-embedded {
    display: none;
}

content-wrapper {
    width          : max-content;
    height         : 100%;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    align-items    : center;
}

.page-buttons {
    margin-top: auto;
    text-align: right;
}

.license-code-box {
    display: flex;
    align-items: center;
}

.license-key-input {
    flex          : 0 1 29.375rem;
    text-transform: uppercase;
    margin-right  : calc(30em / 18);
}

.code-status-box {
    color     : var(--iq-error-color);
    margin-top: calc(12em / 14);
}

.no-license-key-message {
    font-size: calc(22em / 14);
    font-style: italic;
    text-align: center;
    margin: 9.8125rem 0;
}

#pickup-table {
    width: 84%;
}

:not(.checking) > .show-if-checking,
:not(.error) > .show-if-error,
:not(.ok) > .show-if-ok {
    display: none;
}

button.cancel {
    margin-right: auto;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

#summary {
    max-height: 4em;
    overflow-y: auto;
}

.install-results .key {
    font-family: monospace;
}

.install-results .error {
    color: var(--iq-error-color);
}

.limited-width-textbox {
    width: 60%;
    text-align: justify;
}

.limited-width-textbox h2 {
    font-weight: normal;
    margin-block-start: 3em;
}

ul.optionlist {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.optionlist > li {
    display: flex;

    border-top: 0.125rem solid var(--iq-border-color-variant);
    border-bottom: 0.125rem solid var(--iq-border-color-variant);
    margin: calc(-0.125rem) 0;
    padding: 1.5em calc(10em / 14);

    align-items: center;
    justify-content: space-between;
}

ul.optionlist > li h4 {
    margin-top: 0;
}

ol.step-list {
    --internal-horizontal-padding: 1.5em;
    font-size: calc(1em * 18 / 14);

    counter-reset: item;
    list-style-type: none;
    padding-inline-start: 0;
}

ol.step-list > li {
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0 var(--internal-horizontal-padding);
}

ol.step-list > li::before {
    display          : block;
    background-color : rgba(var(--iq-palette-color-1-variant-rgb), 0.15);
    text-transform   : uppercase;
    font-weight      : 900;
    content          : "Step "counter(item, decimal);
    counter-increment: item;
    padding          : 0.5em;
    margin           : 0 calc(0px - var(--internal-horizontal-padding)) 0.25em calc(0px - var(--internal-horizontal-padding));
}

ol.step-list > li::after {
    display                : block;
    font-family            : slm-icons !important;
    font-size              : calc(14em / 18);
    font-style             : normal;
    font-weight            : normal !important;
    font-variant           : normal;
    text-transform         : none;
    line-height            : 1;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    content                : "\f101";
    align-self             : center;
    padding                : 0.75em;
    color                  : var(--iq-palette-color-1-variant);
}

ol.step-list > li:last-child::after {
    display: none;
}

ol.step-list.horizontal {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
}

ol.step-list.horizontal > li:first-child {
    padding-left: 0;
}

ol.step-list.horizontal > li:last-child {
    padding-right: 0;
}

ol.step-list.horizontal > li::before {
    margin: 0;
}

ol.step-list.horizontal > li::after {
    display: none;
}

ol.step-list.horizontal.evenly-sized {
    flex: 1 0 0%;
}

.offline-activation-instructions {
    display: grid;
    grid:
        "step1-head    step2-head    step3-head"    min-content
        "step1-subhead step2-subhead step3-subhead" min-content
        "step1-content step2-content step3-content" min-content
        ".             .             activate-area" min-content
        / minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1em 3em;
}

.offline-activation-instructions > .step {
    display: contents;
}

.offline-activation-instructions > .step > .step-head {
    background-color : rgba(var(--iq-palette-color-1-variant-rgb), 0.15);
    text-transform   : uppercase;
    font-weight      : 900;
    padding          : 0.5em;
}

.offline-activation-instructions > .step > .step-head,
.offline-activation-instructions > .step > .step-subhead {
    font-size: calc(18em / 14);
    text-align: center;
}

.offline-activation-instructions > .step.step-1 > .step-head {
    grid-area: step1-head;
}

.offline-activation-instructions > .step.step-2 > .step-head {
    grid-area: step2-head;
}

.offline-activation-instructions > .step.step-3 > .step-head {
    grid-area: step3-head;
}

.offline-activation-instructions > .step.step-1 > .step-subhead {
    grid-area: step1-subhead;
}

.offline-activation-instructions > .step.step-2 > .step-subhead {
    grid-area: step2-subhead;
}

.offline-activation-instructions > .step.step-3 > .step-subhead {
    grid-area: step3-subhead;
}

.offline-activation-instructions > .step.step-1 > .step-content {
    grid-area: step1-content;
}

.offline-activation-instructions > .step.step-2 > .step-content {
    grid-area: step2-content;
}

.offline-activation-instructions > .step.step-3 > .step-content {
    grid-area: step3-content;
}

.offline-activation-instructions > button {
    grid-area: activate-area;
}

.offline-activation-instructions .with-border {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    width          : auto;
}

.offline-activation-instructions img.with-margin {
    margin: 2.5em 3em;
}

button[slot="navigation"] {
    margin-left: 0.625rem;
}

button[slot="navigation"]:first-of-type {
    margin-left: 2rem;
}

.activation-button-box {
    display: flex;
    gap: var(--padding-step);
    margin-top: var(--padding-step);
}

.activation-button-box div {
    display: flex;
    justify-content: center;
    align-items: center;
}