body {
    font-family: "Blinker", Sans-serif, serif;
    position: relative;
    min-height: 100vh;
}

header {
    color: #283583;
}

button {
    transition: opacity .3s, background-color .3s;
}

button:hover {
    opacity: 0.75;
}

#logo {
    position: absolute;
    top: 2rem;
    left: 1rem;
    margin-bottom: 0.5rem;
}

#logo svg {
    width: 20rem;
    height: 100%;
}

#logo div {
    width: 20rem;
    height: 2rem;
    display: flex;
}

#logo div a {
    width: 100%;
    height: 100%;
    margin: 0.5rem 1rem;
}

#header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.6rem 0.6rem 0.6rem;
    padding-top: 0.6rem;
}

.header-title {
    width: 100%;
    text-align: center;
}

.header-title h1 {
    font-size: 2.5rem;
    font-weight: bold;
}

.header-title h2 {
    font-size: 2rem;
    font-weight: bold;
}

.progress-container {
    width: 100%;
    padding: 0.6rem 1.5rem;
}

.progress-circles-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.progress-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.progress-circle {
    background-color: #283583;
    color: white;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-line {
    background-color: #283583;
    height: 0.25rem;
    max-width: 10rem;
    flex-grow: 1;
}

.progress-text {
    width: 5rem;
    height: 2rem;
    overflow: visible;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-text h3 {
    position: absolute;
    font-size: 1rem;
    font-weight: bold;
}

.progress-text-gap {
    max-width: 10rem;
    flex-grow: 1;
}

.progress-circle span, .progress-circle-completed span, .progress-circle-error span, .progress-circle-active span {
    width: 4rem;
    height: 4rem;
    font-size: 2.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle-completed {
    background-color: #01a881;
    color: white;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle-completed span {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%23ffffff" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>');
}

.progress-circle-error {
    background-color: #790000;
    color: white;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-circle-error span {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="%23ffffff" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>');
}

.progress-circle-active {
    background-color: #fc561f;
    color: white;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-line-completed {
    background-color: #01a881;
    height: 0.25rem;
    max-width: 10rem;
    flex-grow: 1;
}

.progress-line-error {
    background-color: #790000;
    height: 0.25rem;
    max-width: 10rem;
    flex-grow: 1;
}

#content {
    color: #283583;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0.6rem;
}

#error {
    max-width: 50rem;
    width: 100%;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

#error h2 {
    text-align: center;
    font-size: 2.5rem;
}

#error b {
    color: #790000;
}

#error p {
    text-align: center;
    margin: 0 5rem;
    font-size: 1.75rem;
}

#subscription {
    max-width: 50rem;
    width: 100%;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.ins-extra {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 1.5rem;
}

.ins-extra p {
    text-align: center;
    margin: 0;
}

.collapse-subscription {
    background-color: white;
    border: none;
    padding: 0;
    color: #283583;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.collapse-subscription:hover {
    opacity: 100%;
}

.collapse-circle {
    border: 0.15rem solid #283583;
    border-radius: 50%;
    max-width: 2.3rem;
    width: 2.3rem;
    min-width: 2.3rem;
    max-height: 2.3rem;
    height: 2.3rem;
    min-height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collapse-circle svg {
    width: 1.4rem;
    rotate: -90deg;
}


.collapse-subscription h2 {
    display: inline-block;
    margin: 0;
    font-weight: bold;
    font-size: 2rem;
}

.collapse-container {
    padding: 0.5rem 3.3rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 50rem;
    width: 100%;
}

.collapse-container h3 {
    font-weight: bold;
    font-size: 1.75rem;
}

.bandwidth-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    color: white;
}

.bandwidth-buttons input {
    display: none;
}

.bandwidth-buttons label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 5rem;
    background-color: #283583;
    border: none;
    font-size: 3rem;
    transition: opacity .3s, background-color .3s;
    overflow: hidden;
    cursor: pointer;
}

.bandwidth-buttons label:hover {
    opacity: 0.75 !important;
}

.bandwidth-buttons input:checked + label {
    background-color: #01a881;
}

.resident-extras {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.resident-extras h2 {
    font-weight: bold;
    font-size: 2rem;
    color: #283583;
}

#home-service {
    display: none;
}

#vlan {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#resident-add-on {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.extra-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

#installation-address .extra-check {
    margin-top: 0.25rem;
}

.center-input {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.input-label {
    font-size: 1.25rem;
    width: 100%;
    cursor: pointer;
}

.forenings-extra-label {
    font-size: 1.25rem;
}

.square-checkbox {
    min-width: 1.5rem;
    width: 1.5rem;
    max-width: 1.5rem;
    min-height: 1.5rem;
    height: 1.5rem;
    max-height: 1.5rem;
    background-color: white;
    vertical-align: middle;
    border: 0.15rem solid #283583;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.square-checkbox:focus-visible {
    outline-width: 2px;
    outline-style: auto;
    outline-color: Highlight;
    outline-color: -webkit-focus-ring-color;
}

.square-checkbox:hover {
    border: 0.2rem solid #283583;
}

.square-checkbox svg {
    width: 1rem;
    height: 1rem;
    display: none;
}

.square-checkbox.invalid {
    border: 0.2rem solid #790000;
}

.hidden {
    display: none;
}

.circle-radio-button {
    min-width: 1.5rem;
    width: 1.5rem;
    max-width: 1.5rem;
    min-height: 1.5rem;
    height: 1.5rem;
    max-height: 1.5rem;
    background-color: white;
    vertical-align: middle;
    border: 0.15rem solid #283583;
    border-radius: 50%;
    appearance: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.circle-radio-button:checked {
    background-color: #283583;
}

.info-circle-svg {
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    box-shadow: none;
    outline: none;
    background: none;
    cursor: pointer;
}

.info-circle-svg svg {
    width: 1.75rem;
    height: 1.75rem;
}

.popup {
    position: relative;
    width: 20rem;
    border: 0.15rem solid #283583;
    left: 2rem;
}

#property-disclaimer {
    font-size: 1.5rem;
}

.input-text-field {
    border: none;
    border-radius: 0;
    border-bottom: 0.2rem solid rgba(40, 53, 131, 0.5);
    height: 3.5rem;
    width: 100%;
    background-color: #f2f2f2;
    padding: 1.25rem 1rem 0.3rem;
    font-size: 1.5rem;
    opacity: 1;
    appearance: none;
    transition: opacity .3s, background-color .3s, border-color .3s;
}

.input-text-field:focus {
    outline: none;
    border-bottom: 0.2rem solid rgb(40, 53, 131);
}

.input-text-field.invalid {
    border-bottom: 0.2rem solid #790000;
}

.input-text-field.invalid:focus {
    border-bottom: 0.2rem solid #790000;
}

.input-text-field:disabled {
    background-color: lightgray !important;
    cursor: not-allowed;
    opacity: 1;
}

.input-text-field:disabled ~ .input-span {
    cursor: not-allowed;
}

.input-text-field:focus ~ .input-span,
.input-text-field:not(:focus):valid ~ .input-span,
.input-text-field:not(:focus):not(:placeholder-shown) ~ .input-span {
    left: 1rem;
    top: 0;
    font-size: 1rem;
}

.input-span {
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    opacity: 75%;
    font-size: 1.25rem;
    transition: all ease 0.2s;
    cursor: text;
}

.input-text-support {
    width: 100%;
    opacity: 75%;
    font-size: 0.8rem;
    padding: 0.25rem 1rem 0;
}

#property {
    display: none;
}

#collapse-property .input-text-support {
    margin: 0 2.25rem 0 2rem;
}

.input-text-label {
    width: 100%;
    position: relative;
    gap: 0;
}

.dropdown-input-text {
    position: absolute;
    opacity: 75%;
    transition: all ease 0.2s;
    left: 1rem;
    top: 0;
    font-size: 1rem;
    pointer-events: none;
}

#service-agreement-container {
    display: flex;
    flex-direction: column;
}

#service-agreement {
    font-size: 1.25rem;
}

#service-agreement-extras {
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.price {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.signup {
    display: flex;
    justify-content: space-between;
}

.signup h3 {
    font-size: 1.75rem;
    font-weight: normal;
}

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

.total-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.total-price h3 {
    font-size: 1.75rem;
    font-weight: normal;
}

.total-text {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
}

.cost-amount {
    text-decoration: underline;
    text-decoration-color: #283583;
    text-decoration-thickness: 0.1rem;
    min-width: 5rem;
    text-align: right;
}

.total-price .cost-amount {
    text-decoration-thickness: 0.2rem;
}

#static-ip-modal-body div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#static-ip-modal-close {
    max-width: 1.5rem;
    width: 1.5rem;
    min-width: 1.5rem;
    max-height: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    border: none;
    background-color: white;
    padding: 0;
}

#static-ip-modal-close svg {
    width: 100%;
    height: 100%;
}

#static-ip-modal-cancel {
    border: none;
    background-color: #fc561f;
    color: white;
    width: 10rem;
    height: 2.5rem;
    font-size: 1.25rem;
    padding: 0;
}

#static-ip-modal-confirm {
    border: none;
    background-color: #283583;
    color: white;
    width: 10rem;
    height: 2.5rem;
    font-size: 1.25rem;
    padding: 0;
}

#information {
    display: none;
    flex-direction: column;
    max-width: 50rem;
    width: 100%;
    gap: 0.5rem;
}

#information .input-text-field {
    max-width: 50rem;
    width: 100%;
}

#installation-address {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.address-label {
    font-size: 1.75rem;
}

#phone-number {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

#phone-number-input {
    width: 60%;
}

.dropdown {
    cursor: pointer;
    width: 100%;
    border: none;
    border-bottom: 0.2rem solid rgba(40, 53, 131, 1);
    background-color: #f2f2f2;
    color: black;
    height: 3.5rem;
    appearance: none;
    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22%3E%3Cpath fill=%22%23000000%22 d=%22M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5rem;
    padding: 0.5rem 0.75rem 0.3rem 1rem;
    font-size: 1.25rem;
}

#phone-number-custom-dropdown {
    position: relative;
    width: 40%;
}

#phone-number-custom-dropdown .dropdown {
    background-image: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.125rem;
}

#dropdown-text {
    width: 100%;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 1;
}

#country-code {
    position: absolute;
    width: 100%;
    height: 3.5rem;
    cursor: pointer;
}

#country-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bandwidth-warning {
    display: none;
    color: #790000;
    font-size: 1.5rem;
    font-weight: bold;
}

#dropdown-arrow {
    flex-shrink: 0;
    min-height: 1.5rem;
    height: 1.5rem;
    max-height: 1.5rem;
    min-width: 1.5rem;
    width: 1.5rem;
    max-width: 1.5rem;
}

.toggle-address {
    display: none;
    flex-direction: column;
}

.address-inputs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#address-recommend {
    position: relative;
    top: -1.9rem;
    height: 0;
    width: 100%;
    z-index: 100;
}

#custom-address-recommend-popup {
    display: none;
    flex-direction: column;
    background-color: #f2f2f2;
    padding: 0 0.5rem 0.5rem 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem 0.2rem rgba(40, 53, 131, 0.5);
    font-size: 1.5rem;
    max-width: 48rem;
    width: 100%;
    margin: 0 1rem;
}

#custom-address-recommend-popup-title {
    display: flex;
    font-size: 1.25rem;
    font-weight: bold;
    height: 2rem;
    justify-content: space-between;
}

#custom-address-recommend-popup-dismiss {
    max-width: 1.5rem;
    width: 1.5rem;
    min-width: 1.5rem;
    max-height: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    border: none;
    background-color: #f2f2f2;
    padding: 0;
}

#custom-address-recommend-popup-dismiss svg {
    width: 100%;
    height: 100%;
}

#custom-address-recommend-popup-addresses {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.address-recommend-button {
    height: 2.5rem;
    border: none;
    background-color: #f2f2f2;
    text-align: left;
    padding: 0.1rem 0.5rem;
}

.address-recommend-button:hover {
    opacity: 1;
    background-color: #dddddd;
}

.city-inputs {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

.input-information-postal {
    width: 40%;
}

.input-information-city {
    width: 60%;
}

.input-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
}

#information-invoice-address-street-label {
    width: 40%
}

#invoice-address-input-row-numbers {
    width: 60%;
}

#information-invoice-address-number-label {
    width: 34%
}

#invoice-address-input-row-unit-info {
    width: 66%;
}

#information-invoice-address-floor-label {
    width: 50%
}

#information-invoice-address-side-label {
    width: 50%
}

#terms h2 {
    font-size: 2rem;
}

#terms p {
    font-size: 1rem;
}

#marketing-email {
    margin-top: 0.3rem;
}

#container-marketing-email {
    align-items: normal;
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#button-row {
    display: grid;
    justify-content: space-between;
    max-width: 50rem;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 4rem;
}

#button-row div {
    max-width: 8rem;
    width: 100%;
    height: 3rem;
}

#button-row div button {
    width: 100%;
    height: 3rem;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
}

.alternate-button-row {
    display: flex;
    justify-content: space-evenly;
    max-width: 50rem;
    width: 100%;
    margin-bottom: 0.5rem;
}

#alternate-button-row-normal {
    display: none;
}

.alternate-button-row a {
    max-width: 8rem;
    width: 100%;
    height: 3rem;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    line-height: 3rem;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: opacity .3s, background-color .3s;
}

.alternate-button-row a:hover {
    opacity: 0.75;
}

#button-row-center a {
    width: 100%;
    height: 3rem;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    line-height: 3rem;
    cursor: pointer;
    user-select: none;
    transition: opacity .3s, background-color .3s;
}

.popover a {
    color: white;
}

#button-row-center a:hover {
    opacity: 0.75;
}

#button-row-left {
    justify-self: left;
}

#button-row-center {
    justify-self: center;
    height: 6.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#button-row-right {
    justify-self: right;
}

#back-button {
    background-color: #283583;
    display: none;
}

#help-button {
    background-color: #fc561f;
    display: inline-block;
}

.custom-popover {
    --bs-popover-bg: #fc561f;
}

.custom-popover .popover-body {
    color: white;
}

.custom-popover .popover-header {
    background-color: #fc561f;
    color: white;
}

.website-button {
    background-color: #283583;
    display: inline-block;
}

.language-button {
    background-color: #283583;
    display: inline-block;
}

#next-button {
    background-color: #283583;
    display: inline-block;
}

#tilmeld-button {
    background-color: #283583;
    display: none;
}

.price-disclaimer {
    font-size: 1rem;
    margin: 0;
}

#post-error {
    display: none;
    flex-direction: column;
    max-width: 50rem;
    width: 100%;
    align-items: center;
    text-align: center;
}

#post-error h2 {
    font-weight: bold;
    font-size: 2rem;
}

#post-error p {
    font-size: 1.5rem;
}

#signedup {
    display: none;
    flex-direction: column;
    max-width: 50rem;
    width: 100%;
    align-items: center;
    text-align: center;
}

#signedup h2 {
    font-weight: bold;
    font-size: 2rem;
}

#signedup p {
    font-size: 1.5rem;
}

#buildings {
    position: absolute;
    bottom: 0;
    right: 0;
    display: none;
    z-index: -1;
}

#extended-road, #building-row {
    width: 75rem;
    height: auto;
}

@media only screen and (max-width: 82rem) {
    .bandwidth-buttons label {
        font-size: 1.75rem;
    }

    .collapse-subscription h2 {
        font-size: 1.5rem;
    }

    #logo {
        position: static;
    }

    .collapse-container {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }

    #extended-road, #building-row {
        width: 0;
        height: 0;
    }
}

@media only screen and (max-width: 52rem) {
    #custom-address-recommend-popup {
        max-width: 50rem;
        margin: 0;
    }

    #invoice-address-input-row {
        flex-direction: column;
    }

    #information-invoice-address-street-label {
        width: 100%
    }

    #invoice-address-input-row-numbers {
        width: 100%;
    }

    #information-invoice-address-number-label {
        width: 40%
    }

    #invoice-address-input-row-unit-info {
        width: 60%;
    }
}