body {
    font-family: OpenSans, Arial, Helvetica, sans-serif;
}

.container {
    padding: 0;
    width: 100% !important;
    max-width: unset !important;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    align-items: baseline;
}

.row:first-of-type {
    margin-top: 0;
}

.row:last-of-type {
    margin-bottom: 0;
}

.well {
    padding: 0;
}

body, html, .container > .row, .container {
    scroll-behavior: smooth;
}

.container > .row {
    display: flex;
    align-items: center;
}

/* ---------------------------- */

p, h4 {
    margin: 0;
    color: var(--form-text-color-highlight);
}

b, label, span {
    color: var(--form-text-color);
}

button {
    outline: none !important;
}

.form-group input:not(#kenteken),
.form-control,
select.form-control:not([size]):not([multiple]) {
    height: 40px;
    border: 1px solid #545454;
    border-radius: var(--border-radius-inner);
    font-size: 16px;
    padding: 6px 12px;
}

.custom-control {
    padding-left: 0;
}

textarea {
    border: 1px solid #545454;
    border-radius: var(--border-radius-inner);
    font-size: 16px;
}

button.toggle {
    border: none;

    width: 100%;
    background-color: white;
    padding: 0 10px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.part-of-group span:after {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% + 40px);
    left: -10px;
    top: -15px;
    background-color: var(--form-text-color);
}

.service-container:last-of-type .part-of-group span:after {
    height: 30px;
}

input[type=checkbox] + span:not(.subgroup):before, input[type=radio] + span:before,
.group-select h3:before {
    z-index: 1;
    transition: all 0.1s;
    display: block;
    position: absolute;
    left: -20px;
    content: "" !important;
    min-width: 20px;
    min-height: 20px;
    padding: 3px;
    padding-left: 10px;
    border-radius: 2px;
    background-color: white;
    box-shadow: 0 0 1px 1px rgb(51, 51, 51)
}

span.subgroup:before {
    display: none;
}

.group-select h3:before {
    left: 10px;
    top: 18px;
    min-width: 24px;
    min-height: 24px;
}

h3 i {
    top: 22px;
    left: 14px;
}

.group-select h3:after {
    content: "";
    position: absolute;
    width: 1px;
    height: 20px;
    left: 22px;
    top: 40px;
    background-color: var(--form-text-color);
}

input[type=radio] + span:before {
    border-radius: 10px;
    border: 1px solid rgb(51, 51, 51)
}

input[type=radio]:checked + span:before {
    border-color: var(--selected-service-background);
}

i.fa-check {
    z-index: 2;
    position: absolute;
    color: var(--selected-service-background);
    top: 2px;
    font-size: 16px;
    left: -18px;
}

input[type=checkbox]:checked + span:before, input[type=radio]:checked + span:before {
    background-color: var(--selected-service-background);
}

input[type=radio]:checked + span:before {
    box-shadow: inset 0 0 0 3px white;
}


input[type=checkbox]:checked + span:before {
    background-color: white;
}

.service-container span svg {
    position: absolute;
    left: -16px;
    top: 3px;
    z-index: 2;
}

.service-container.selected-service span svg {
    color: var(--selected-service-background);
}

.vehicleInfoStep .stepBody .data-preview-wrapper {
    max-width: 360px;
    margin: 0 auto;
    margin-left: calc(50% - 180px);
}

.form-group input:not(#kenteken):focus,
textarea:focus,
.form-control:not(#kenteken):focus {
    border: 1px solid var(--primary-action);
    box-shadow: 0 0 0 3px rgba(70, 146, 188, 0.3);

    background-color: white;
}

.form-group input:not(#kenteken):invalid,
textarea:invalid {
    border-color: rgba(220, 53, 69, 1);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
}

.mainwindow {
    border-radius: var(--border-radius);
    padding: 0;
    max-width: calc(100% - 20px);
    margin: 10px;
}

.step-wrapper {
    margin: 4px 0;
    background-color: #F7F7F7FF;
    border-radius: var(--border-radius);
    min-height: 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

/* BEGIN STYLING FOR STEP HEADERS */

.step-wrapper .stepHeader {
    position: relative;
    width: 100%;
    min-height: 40px;
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--border-radius);
}

/* IF A BUTTON IS NEEDED TO PROCEED TO NEXT STEPS  */

.step-wrapper button.btn.btn-xl.btn-primary {
    animation: pointDown;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition: all 0.1s;
    font-size: 16px;
    transform: scale(1);
    bottom: 8px;
    padding: 0;
    width: 240px;
    min-width: fit-content;
    z-index: 2000;
    border: none;
    box-shadow: none;
    background-color: var(--primary-action);
    border-radius: var(--border-radius);
    height: 38px;
    color: var(--primary-action-text-color);
    right: calc(50% - 120px);
    box-sizing: content-box;
}

.step-wrapper button.btn.btn-xl.btn-primary.disabled {
    animation: none;
    background-color: rgb(93, 93, 93);
    color: white;
}


.step-wrapper button.btn.btn-xl.btn-primary.disabled.hasNotifcation {
    animation: none;
    width: 240px;
    margin-right: 20px;
    background-color: rgb(93, 93, 93);
    color: white;
}

.step-wrapper button.btn.btn-xl.btn-primary.notification {
    animation: none;
    width: 40px;
    margin-right: -20px;
    background-color: rgb(93, 93, 93);
    opacity: 0.65;
    color: white;
    cursor: default;
}

@keyframes pointDown {
    0% {
        transform: translate(0px, 0px)
    }
    25% {
        transform: translate(0px, 3px)
    }
    40% {
        transform: translate(0px, 0px)
    }
    100% {
        transform: translate(0px, 0px)
    }
}

.form-wrapper button.btn.btn-xl.btn-primary:hover {
    transform: translate(0px, 2px);
}

button.btn.btn-xl.btn-primary {
    position: absolute;
}

button.btn.btn-xl.btn-primary.btn-previous {
    background-color: var(--primary-action);
    color: var(--primary-action-text-color);
    animation: pointUp;
    animation-duration: 3s;
    border-radius: var(--border-radius);
    animation-iteration-count: infinite;
    bottom: unset;
    top: 0;
    left: calc(50% - 120px);
    box-shadow: -1px 2px 1px 0 #00000010;
}

@keyframes pointUp {
    0% {
        transform: translate(0px, 0px)
    }
    25% {
        transform: translate(0px, -3px)
    }
    40% {
        transform: translate(0px, 0px)
    }
    100% {
        transform: translate(0px, 0px)
    }
}

button.btn.btn-xl.btn-primary.btn-previous:hover {
    transform: translate(0px, -2px);
}

button.btn.btn-xl.btn-primary:focus,
button.btn.btn-xl.btn-primary:focus:active,
button.btn.btn-xl.btn-primary:active {

    box-shadow: 0 0 0 0 #00000000;
    border-bottom: 0 solid var(--primary-action);
    border-top: 0 solid var(--primary-action);
}


div.tooltip-holder {
    margin-left: auto;
    margin-right: auto;
}

/* ---------------------------------------------  */
.stepHeader > button {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    line-height: 1;
    padding: 4px 8px;
    background-color: var(--primary-action);
    color: var(--primary-action-text-color);
    z-index: 2;
    border-radius: 0 var(--border-radius);
}

.stepHeader > a:hover {
    text-decoration: none;
    color: inherit;
}

.stepHeader > a {
    margin: 0;
    height: 40px;
    width: 100%;
    padding: 0 20px !important;
    display: flex;
    align-items: center;
}

.stepHeader > a svg:not(.text-success) {
    color: var(--form-text-color);
}

.stepHeader > a > b {
    color: #545454;
}

.stepHeader > a > p {
    color: #828282;
}

.stepHeader > a i.active,
.stepHeader > a i.complete {
    color: #3DB749;
}

.stepHeader > a i, .stepHeader > a b {
    text-align: center;
}

.active-step .stepHeader b, .active-step .stepHeader p,
.open-step .stepHeader b, .open-step .stepHeader p {
    color: var(--active-step-text-color);
}

.stepHeader > a i,
.stepHeader > a b {
    font-size: 18px;
    width: 48px;
}

.stepHeader > a p {
    font-size: 18px;
    flex-grow: 1;
}

.active-step,
.open-step {
    border-radius: var(--border-radius);
    background-color: var(--active-step-background);
}

.stepBody.editing-step,
.active-step .stepHeader,
.open-step .stepHeader {
    background-color: var(--active-step-background);
    border-radius: var(--border-radius);
}

.active-step .stepHeader, .complete-step .stepHeader a {
    cursor: pointer;
}

.customerInfoStep .well.servicesGroup {
    margin-left: -15px;
}

.customerInfoStep div.alert + div.well.servicesGroup {
    margin-top: 0;
}

.complete-step .stepHeader a:hover b {
    transition: all 0.1s;
    transform: scale(1.1);
}

.active-step .stepBody {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

.stepBody.editing-step {
    box-shadow: 0 0 3px var(--primary-action);
    border-radius: var(--border-radius);
    margin: 8px 0;
}

.active-step .stepBody.editing-step {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.active-step .stepBody {
    background-color: var(--active-step-background);
}

.complete-step .stepHeader > a {
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    border-radius: 0;
}

.stepsContainer .step-wrapper .stepHeader > a svg {
    width: 16px;
    height: unset;
}

.complete-step .stepHeader > div {
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    padding: 0;
    flex-grow: 1;
    background-color: var(--form-background);
    display: flex;
    align-items: center;
    height: fit-content;
}

.complete-step .stepHeader > div:not(.services-not-available) {
    border-left: 1px solid #f2f2f2;
}

.complete-step:not(:first-of-type) .stepHeader > div {
    align-items: baseline;
}

.customerInfoStep .stepBody .form-group {
    position: relative;
    margin-top: 8px;
    padding-right: 0;
}

.customerInfoStep .stepBody .form-group:has(input:focus) label,
.customerInfoStep .stepBody .form-group:has(input:not(:placeholder-shown)) label {
    top: -7px !important;
    padding: 0 5px;
    font-size: 12px;
    border-bottom: 6px solid var(--form-background);
}

.customerInfoStep .stepBody .form-group:has(textarea:focus) label,
.customerInfoStep .stepBody .form-group:has(textarea:not(:placeholder-shown)) label {
    top: -7px !important;
    padding: 0 5px;
    font-size: 12px;
    border-bottom: 6px solid var(--form-background);
}

.customerInfoStep .stepBody .form-group:has(input:focus) input::placeholder,
.customerInfoStep .stepBody .form-group:has(input:not(:placeholder-shown)) input::placeholder {
    color: inherit !important;
    filter: opacity(1);
    transition: all 0.4s;
    transition-delay: 200ms;
}

.customerInfoStep .stepBody .form-group:has(textarea:focus) textarea::placeholder,
.customerInfoStep .stepBody .form-group:has(textarea:not(:placeholder-shown)) textarea::placeholder {
    color: inherit !important;
    filter: opacity(1);
    transition: all 0.4s;
    transition-delay: 200ms;
}

.customerInfoStep .stepBody .form-group > textarea::placeholder {
    transition: all 0s;
    color: red;
}

.customerInfoStep .stepBody .form-group.contains-input > label.action,
.customerInfoStep .stepBody .form-group.contains-input > label {
    transition: all 0.2s;
    font-weight: normal;
    font-size: 16px;
    position: absolute !important;
    left: 24px;
    pointer-events: none;
    cursor: unset;
    line-height: 1;
    border-bottom: 2px solid white;
    top: 50%;
    transform: translate(0%, -50%)
}

.customerInfoStep .stepBody .form-group.contains-textarea > label.action,
.customerInfoStep .stepBody .form-group.contains-textarea > label {
    transition: all 0.2s;
    font-weight: normal;
    font-size: 16px;
    position: absolute !important;
    left: 24px;
    pointer-events: none;
    cursor: unset;
    line-height: 1;
    border-bottom: 2px solid white;
    top: 50%;
    transform: translate(0%, -50%)
}

.customerInfoStep .stepBody .form-group.contains-textarea {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.customerInfoStep .stepBody .form-group.contains-textarea textarea {
    width: 100%;
}

.customerInfoStep .stepBody .form-group.contains-textarea textarea:focus {
    outline: none !important;
}

.customerInfoStep .stepBody .form-group > input::placeholder {
    transition: all 0s;
    filter: opacity(0);
}

.customerInfoStep .stepBody .form-group > textarea::placeholder {
    transition: all 0s;
    filter: opacity(0);
}

.customerInfoStep .stepBody .form-group.contains-select > label {
    position: absolute !important;
    top: -7px !important;
    left: 24px;
    border-bottom: 6px solid var(--form-background);
    padding: 0 5px;
    line-height: 1;
    transition: all 0.2s;
    transform: translate(0%, -50%);
    font-weight: normal;
    font-size: 12px;
    pointer-events: none;
    cursor: unset;
}

.customerInfoStep .stepBody .form-group.contains-select {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.customerInfoStep .stepBody .form-group.contains-select select:focus {
    outline: none !important;
}

.complete-step .stepHeader > div .form-group {
    margin-bottom: 0;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.complete-step .stepHeader > div #kentekenview {
    height: 32px;
    width: 140px;
    text-align: center;
    padding-left: 16px;
    border: none;
    box-shadow: 0 0 0 #6B6B6B;
    border-radius: 3px;
}

.complete-step .stepHeader > div > div:nth-of-type(2) {
    padding: 10px;
}

.complete-step .stepHeader > div div:nth-of-type(2),
.complete-step .stepHeader .data-wrapper {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.complete-step .stepHeader .data-wrapper.subtotal {
    width: 160px;
    padding-right: 28px;
    border-top: 1px solid var(--form-text-color);
    margin-left: auto;
}

.complete-step .stepHeader .data-wrapper.group-item {
    position: relative;
    margin-right: 28px;
    margin-left: 10px;
}

.complete-step .stepHeader .data-wrapper.group-item:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 10px;
    right: -20px;
    top: 9px;
    background-color: var(--form-text-color);
}

.complete-step .stepHeader .data-wrapper.group-item:after {
    content: "";
    position: absolute;
    height: 10px;
    width: 1px;
    right: -20px;
    top: 0;
    background-color: var(--form-text-color);
}

.complete-step .stepHeader .data-wrapper span,
.stepBody .data-preview-wrapper span {
    font-weight: normal;
    width: 160px;
    display: block;
    height: 24px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--form-text-color);
}

.stepBody .data-preview-wrapper span {
    width: 50%;
}

.stepBody .data-preview-wrapper p {
    width: 50%;
}

.complete-step .stepHeader .data-wrapper button {
    background-color: transparent;
    border: none;
    box-shadow: none;
    width: 24px;
}

.data-wrapper .text-grey {
    width: 100% !important;
    padding-left: 5px;
    margin-top: -3px;
}

.complete-step .stepHeader .data-wrapper button,
.complete-step .stepHeader .data-wrapper button svg {
    transition: all 0.1s;
    cursor: pointer;
    margin-left: 4px;
    color: var(--form-text-color);
}

.complete-step .stepHeader .data-wrapper button:hover svg.fa-trash,
.servicesGroup .service-info-wrapper:not(.subgroup-wrapper) button i:hover,
.servicesGroup .service-info-wrapper:not(.subgroup-wrapper) button svg:hover {
    transform: scale(1.2);
}

.complete-step .stepHeader .data-wrapper button:hover svg.fa-trash {
    color: var(--primary-action);
}

.complete-step .stepHeader .data-wrapper p,
.stepBody .data-preview-wrapper p {
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.complete-step .stepHeader .data-wrapper p {
    max-width: 137px;
}

.complete-step .stepHeader .data-wrapper b.price-indicator {
    margin-left: auto;
    font-weight: normal;
}

.complete-step .stepHeader .data-wrapper p:only-child,
.complete-step .stepHeader .data-wrapper span:only-child {
    width: 100%;
}

.complete-step .stepHeader > a:not(:first-of-type) {
    border-radius: 0;
}

/* END STYLING FOR STEP HEADERS */

/* BEGIN STYLING FOR STEP BODIES */

.stepBody {
    width: 100%;
    padding: 0 8px 8px;
}

.stepBody > .stepBody {
    padding: 0;
}

.stepBody .form-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--form-background);
    height: 100%;
    padding: 8px 8px 40px;
    border-radius: var(--border-radius-inner);
    border: 1px solid #E2E2E2;
}

.establishmentsStep .stepBody .form-wrapper {
    justify-content: flex-start;
    gap: 0 8px;
}

.stepBody:not(.customer-info) .form-wrapper .form-group {
    padding: 0;
    width: 100%;
}

.stepBody .form-wrapper .form-group.voertuig-inputs {
    text-align: center;
}

.stepBody .form-wrapper .form-group.voertuig-inputs input,
.stepBody .form-wrapper .form-group.voertuig-inputs #kenteken {
    margin: 0 auto;
}

.stepBody .form-wrapper .form-group label.required-field {
    position: relative;
    padding-right: 20px;
}

.stepBody .form-wrapper .form-group label.required-field > svg {
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 12px;
}

.fa-asterisk {
    font-size: 8px;
}

.stepBody .data-preview-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.servicesGroup {
    padding: 10px;
    position: relative;
    width: 100%;
    margin: 8px 0;
    border-radius: var(--border-radius-inner);
}

.servicesGroup.group-select {
    cursor: pointer;
}

.servicesGroup.group-select h3 {
    margin-left: 22px;
    padding-left: 30px;
}

.servicesGroup .service-container {
    padding: 0;
}

.groupslabel {
    padding-left: 12px;
    width: 100%;
    margin-top: 8px;
    font-weight: bold;
    color: var(--form-text-color);
}

.servicesGroup > button,
.servicesGroup > div.btn.btn-default,
.servicesGroup > div.btn.btn-primary {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.transport-needed-container {
    margin-top: 8px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
}

.transport-needed-container h4 {
    margin: 16px 0 12px;
    border-radius: var(--border-radius-inner) var(--border-radius-inner) 0 0;
}

.transport-needed-wrapper,
.service-container:not(.selected-service),
.replacement-transport-remarks {
    background-color: var(--service-background);
    border-radius: var(--border-radius-inner);
    overflow: hidden;
}

.customer-info-option-wrapper {
    padding: 5px;
}

.service-container.subgroup-container .service-info-wrapper > button.toggleServiceDropdown {
    transition: all 0.1s;
    font-weight: normal;
    color: var(--primary-action-text-color);
    background-color: var(--primary-action);
    border: none;
    box-shadow: none;
    position: absolute;
    height: 16px;
    min-width: fit-content;
    width: 16px;
    padding: 0 4px;
    top: 11px;
    right: 12px;
    border-radius: 9px;
}

.service-container.subgroup-container.selected-service .service-info-wrapper > button.toggleServiceDropdown {
    color: var(--primary-action);
    background-color: var(--primary-action-text-color);
}

button.toggleServiceDropdown svg {
    font-size: 20px;
}

.service-container.subgroup-container .service-info-wrapper > button:hover {
    transform: scale(1.02)
}

.service-container.subgroup-container .subgroup-wrapper > span {
    padding: 10px 8px;
    margin-left: 34px;
}

.service-container.subgroup-container .subgroup-wrapper > section {
    padding: 0 10px 10px;
}

.service-container.subgroup-container .subgroup-wrapper.open > section {
    border: 10px solid var(--service-background);
    border-top: none;
    background-color: var(--form-background);
}

.service-container.subgroup-container.selected-service .subgroup-wrapper.open > section {
    border-color: var(--selected-service-background);
    border-radius: 0 0 var(--border-radius-inner) var(--border-radius-inner);
}

.servicesGroup .service-info-wrapper,
.transport-needed-wrapper {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 8px;
    border-radius: var(--border-radius-inner);
    justify-content: space-between;
}

.servicesGroup .subgroup-wrapper > .service-info-wrapper {
    border-radius: var(--border-radius-inner) var(--border-radius-inner) 0 0;
}

.transport-needed-wrapper {
    width: calc(50% - 4px);
}

.servicesGroup .service-container.subgroup-container:not(.open) {
    border-radius: var(--border-radius-inner);
    overflow: hidden;
}

.transport-needed-wrapper span:before {
    display: none !important;
}

.transport-needed-wrapper,
.service-container {
    margin-top: 8px;
}

.transport-needed-wrapper.selected-transport {
    background-color: var(--selected-service-background);
}

.service-container:not(.selected-service) .service-info-wrapper:not(.part-of-group, .subgroup-wrapper):hover,
.transport-needed-wrapper:not(.selected-transport):hover,
.stepBody .servicesGroup.group-select:not(.selected-group):hover,
.replacement-transport-remarks:hover,
.servicesGroup .service-container.subgroup-container:hover {
    background-color: var(--hover-state-background);
}

.service-container:not(.selected-service) .service-info-wrapper:not(.part-of-group, .subgroup-wrapper):hover + section {
    border-color: var(--hover-state-background);
}

.servicesGroup .service-container.subgroup-container:hover,
.servicesGroup .service-container.subgroup-container:hover section {
    border-color: var(--hover-state-background)
}

.service-container.subgroup-container .subgroup-wrapper.open:hover .service-container:hover,
.service-container.subgroup-container .subgroup-wrapper.open:hover .service-container:not(.single) {
    background-color: var(--hover-state-background);
}

.servicesGroup .service-info-wrapper span:not(.subgroup),
.transport-needed-wrapper span {
    padding: 0 8px;
    margin-left: 22px;
    width: calc(100% - 22px);
}

.transport-needed-wrapper span {
    width: calc(100% - 140px);
    margin-left: 0;
    flex-grow: 1;
}

.transport-needed-wrapper span.replacement-transport-price {
    width: 32px;
    min-width: fit-content;
    text-align: center;
    border-radius: var(--border-radius-inner);
    background-color: var(--selected-service-background);
    color: var(--selected-service-text-color);
}

.transport-needed-wrapper:not(.selected-transport) span.replacement-transport-price {
    box-shadow: 0 2px 2px #00000033;
}

.replacement-transport-remarks {
    width: 100%;
}

.replacement-transport-remarks svg {
    transition: all 0.1s;
}

.replacement-transport-remarks button {
    padding: 8px;
    background-color: transparent;
}

.replacement-transport-remarks.open button svg {
    transform: rotate(180deg);
}

.replacement-transport-remarks textarea {
    margin: 0 12px 12px;
    width: calc(100% - 20px);
}

.servicesGroup .service-info-wrapper {
    padding: 0;
}

.servicesGroup .subgroup-wrapper:has(button.toggleServiceDropdown) > .service-info-wrapper {
    padding: 10px 40px 10px 8px;
}

.servicesGroup .service-info-wrapper.single {
    padding: 10px 8px;
}

.servicesGroup .service-info-wrapper section {
    padding: 10px 8px;
    width: calc(100% - 40px);
    flex-grow: 1;
}

.servicesGroup .service-info-wrapper > button {
    position: relative;
    width: 40px;
    z-index: 2;
    height: 40px;
    background-color: transparent;
    border: none;

    border-radius: 0 var(--border-radius-inner) 0 var(--border-radius-inner);
}

.servicesGroup .service-info-wrapper:not(.subgroup-wrapper) button i,
.servicesGroup .service-info-wrapper:not(.subgroup-wrapper) button svg {
    transition: all 0.1s;
    position: absolute;
    top: 10px;
    right: 8px;
    width: 24px;
    height: 22px;
    padding: 3px;
    font-size: 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-inner);
    color: var(--primary-action);
}

.servicesGroup .selected-service .service-info-wrapper:not(.subgroup-wrapper) button i,
.servicesGroup .selected-service .service-info-wrapper:not(.subgroup-wrapper) button svg {
    color: var(--selected-service-text-color);
}

.service-container.selected-service,
.service-container.selected-service .service-info-wrapper {
    background-color: var(--selected-service-background) !important;
    color: var(--selected-service-text-color);
}

.subgroup-wrapper section .service-container.selected-service .service-info-wrapper {
    background-color: var(--service-background);
}

.service-container .service-info-wrapper.subgroup-wrapper button.toggleServiceDropdown {
    --clickable-space-around-button: -15px;
}

.service-container .service-info-wrapper.subgroup-wrapper button.toggleServiceDropdown::after {
    content: "";
    left: var(--clickable-space-around-button);
    right: var(--clickable-space-around-button);
    bottom: var(--clickable-space-around-button);
    top: var(--clickable-space-around-button);
    position: absolute;
}

.service-container .service-info-wrapper.subgroup-wrapper button svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

.service-container .service-info-wrapper.subgroup-wrapper.open button.toggleServiceDropdown svg:not(.fa-question) {
    transform: translate(-50%, -50%) rotate(180deg);


}

.servicesGroup .service-info-wrapper span.service-description {
    display: inline-block;
    font-size: 12px;
    color: var(--form-text-color-highlight);
}

.servicesGroup .service-container span,
.servicesGroup .service-info-wrapper span.service-description {
    width: calc(100% - 20px);
}

.servicesGroup .service-info-wrapper span.service-extra-info {
    position: relative;
    transition: all 0.2s;
    opacity: 0;
    padding: 0;
    line-height: 0;
    font-size: 14px;
    color: var(--primary-action-text-color);
    border-radius: var(--border-radius-inner);
    background-color: var(--primary-action);
}

.service-container .service-info-wrapper.open > span.service-extra-info {
    display: block;
    margin: 0 10px 10px;
    opacity: 1;
    padding: 10px;
    line-height: 1.6;
}

.service-container .service-info-wrapper.open span.service-extra-info:before {
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    top: -5px;
    right: 2px;
    background-color: var(--primary-action)
}

.servicesGroup .service-info-wrapper p {
    width: 64px;
}

.servicesGroup .service-container {
    border-radius: var(--border-radius-inner);
}

.servicesGroup .service-container.selected-service,
.selected-group,
.selected-transport {
    position: relative;
    border-radius: var(--border-radius-inner);
    background-color: var(--selected-service-background);
    box-shadow: 0 2px 2px #00000033;
}

.selected-group span,
.selected-group h3,
.selected-group p {
    color: var(--selected-service-text-color);
}

.selected-servicesubgroup span,
.selected-servicesubgroup h3,
.selected-servicesubgroup p {
}

.servicesGroup .service-container.selected-service span,
.selected-transport span {
    padding-top: 0;
    color: var(--selected-service-text-color);
}

.servicesGroup .service-container.selected-service span:before {
    top: 0;
}

.servicesGroup .service-container p {
    position: absolute;
    width: fit-content;
    min-width: 80px;
    pointer-events: none;
    top: 10px;
    right: 40px;
    padding: 0 8px;
    border-radius: var(--border-radius-inner);
    text-align: center;
    max-height: 28px;
    background-color: var(--selected-service-background);
    color: var(--selected-service-text-color);
}

.action,
.service-customlabel {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    background-color: var(--action-background) !important;
    color: var(--action-color) !important;
}

@keyframes attention {
    0% {
        transform: translate(0px, 0px) scale(1.00, 1.00)
    }
    15% {
        transform: translate(0px, -2px) scale(1.02, 1.02)
    }
    40% {
        transform: translate(0px, 0px) scale(1.00, 1.00)
    }
    100% {
        transform: translate(0px, 0px) scale(1.00, 1.00)
    }
}

.servicesGroup .service-container.selected-service p {
    color: var(--selected-service-text-color);
}

.servicesGroup .service-container.selected-service textarea {
    margin: 4px 10px 10px;
    width: calc(100% - 20px);
}

.establishments-container,
.replacement-transport-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-radius: var(--border-radius-inner);
    background-color: rgba(255, 255, 255, 0.235);
    padding: 10px;
}

.establishments-container > h3 {
    width: 100%;
}

h4 {
    margin-top: 8px;
    padding-left: 12px;
    margin-bottom: 4px;
    width: 100%;
}

.establishment-wrapper,
button.btn-time {
    transition: all 0.1s;
    position: relative;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    border: none;
    width: calc(50% - 4px);
    background-color: var(--service-background);
    justify-content: space-between;
    border-radius: var(--border-radius-inner);
    margin: 4px 0;
    box-shadow: none !important;
    overflow: hidden;
}

button.btn-time {
    width: calc(12.5% - 4px);
}

div:nth-of-type(2) span:not(:first-of-type).first-possible-servicedate {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 12px;
    min-width: fit-content;
    width: 200px;
    max-width: 100%;
    border-radius: 0 var(--border-radius-inner) 0 var(--border-radius-inner);
    padding: 0 10px;
    background-color: var(--primary-action);
    color: var(--primary-action-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: -5px 5px 0 0 var(--service-background);
}

div:nth-of-type(2) span:not(:first-of-type).first-possible-servicedate.loading:before {
    content: "";
    display: block;
    position: absolute;
    right: 35px;
    top: 3px;
    height: 14px;
    width: 14px;
    border-radius: 8px;
    border: 2px solid var(--primary-action);
    border-bottom: 2px solid var(--primary-action-text-color);
    box-sizing: border-box;
    background-color: var(--primary-action);

    animation-name: rotateIcon;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.establishment-wrapper.selected-establishment div:nth-of-type(2) span:not(:first-of-type).first-possible-servicedate {
    box-shadow: -5px 5px 0 0 var(--selected-service-background);
}

button.btn-time,
button.btn-time:hover,
button.btn-time:active,
button.btn-time:focus,
button.btn-time:focus:active {
    display: flex;
    justify-content: center;
    color: var(--form-text-color);
    text-align: center;
    text-decoration: none;
    height: 48px;
    align-items: center;
}

button.btn-time:hover,
button.btn-time:active,
button.btn-time:focus,
button.btn-time:focus:active {
    background-color: white;

}

button.btn-time:hover {
    transform: scale(1.015);
    background-color: var(--hover-state-background);
}

button.btn-time.time-selected {
    background-color: var(--selected-service-background);
    color: var(--selected-service-text-color);
}

.establishment-wrapper > div:nth-of-type(2) span:not(:first-of-type) {
    font-weight: normal;
}

.establishment-wrapper > div {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    border-radius: var(--border-radius);
}

.establishment-wrapper > div:nth-of-type(1) {
    width: 40%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--border-radius-inner) 0 0 var(--border-radius-inner);
    overflow: hidden;
}

.establishment-wrapper > div:nth-of-type(2) {
    padding: 16px 8px;
    width: calc(60% - 5px);
    background-color: transparent;
    border-radius: var(--border-radius-inner);
}

.establishment-wrapper > div:nth-of-type(2) span {
    width: 100%;
    text-align: left;
}

.establishment-wrapper.selected-establishment {
    background-color: var(--selected-service-background);
}

.establishment-wrapper.selected-establishment > div {
    background-color: inherit;
}

.establishment-wrapper.selected-establishment > div span {
    color: var(--selected-service-text-color);
}

.calendar-wrapper {
    border-radius: var(--border-radius-inner);
    box-shadow: none;
}

.calendar-container table {
    width: 50%;
    display: flex;
    border-radius: var(--border-radius-inner);
    overflow: hidden;
}

.calendar-container {
    position: relative;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    border: none;
    justify-content: space-between;
    margin: 5px 0;
    margin-top: 0;
    margin-bottom: 16px;
    border-radius: var(--border-radius-inner);
    background-color: rgba(255, 255, 255, 0.235);
}

.calendar-container:nth-of-type(2) {
    background-color: transparent;
}

.time-selection-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    background-color: rgba(255, 255, 255, 0.235);
    padding: 10px;
    gap: 4px;
}

.calendar {
    padding: 10px;
    flex-wrap: wrap;
    align-items: baseline;
    background-color: rgba(255, 255, 255, 0.235);
}

.calendar thead,
.calendar tbody {
    width: 100%;
    padding: 10px;
}

.calendar-container .calendar,
.calendar thead,
.calendar th {
    border: none !important;
}

.calendar th {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar thead tr:first-of-type,
.calendar thead tr:first-of-type th {
    width: 100%;
}

.calendar thead tr:nth-of-type(2) {
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.calendar tr {
    display: flex;
    flex-wrap: wrap;
}

.calendar tbody {
    border-top: none !important;
    border-radius: var(--border-radius-inner);
}

.calendar tbody tr {
    height: 56px;
}

.table-condensed > tbody > tr > td {
    padding: 2px;
}

.calendar td,
.calendar th {
    width: 14.28%;
    text-align: center;
}

.calendar td {
    transition: all 0.1s;
    padding: 2px;
    border: none !important;
}

.calendar-button-row {
    height: 38px;
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.calendar-button-row div {
    padding-left: 0;
    padding-right: 0
}

.calendar-button-row div > button {
    width: 100%;
    border: none;
    height: 100%;
    border-radius: var(--border-radius);
    box-shadow: none !important;
}

.calendar td button {
    padding: 0;
}

.calendar td button.btn-day.disabled {
    display: none;
}

.calendar td button,
.calendar td button:active,
.calendar td button:focus,
.calendar td button:active:focus {
    text-decoration: none;

    transition: all 0.1s;
    color: #545454;
    font-weight: bold;
    border-radius: var(--border-radius-inner);
}

.calendar td.not-available button,
.calendar td.not-available button:hover {
    background-color: #FFF4F4;
    border: 1px inset #E25252 !important;
    text-decoration: none;
    color: #E25252;
    opacity: 0.7;
}

.calendar td.not-available-weekend button,
.calendar td.not-available-weekend button:hover {
    background-color: #4c4c4c;
    border: 1px inset #4c4c4c !important;
    text-decoration: none;
    color: #FFF4F4;
    opacity: 0.7;
}


.calendar td.not-available-holiday button,
.calendar td.not-available-holiday button:hover {
    background-color: #4c4c4c;
    border: 1px inset #4c4c4c !important;
    text-decoration: none;
    color: #FFF4F4;
    opacity: 0.7;
}

.calendar td.available button,
.calendar td.available button:not(.date-selected):hover {
    background-color: var(--service-background);
    text-decoration: none;
    color: var(--form-text-color);
    box-shadow: 0 2px 2px 1px #0000002e;
}


.calendar td.available-booked button,
.calendar td.available-booked button:hover {
    background-color: #55ad6e79;
    text-decoration: none;
    color: white;
}


.calendar td button.date-selected {
    background-color: var(--selected-service-background);
    color: var(--selected-service-text-color)
}

.calendar td button.date-selected:hover {
    border-bottom: 2px solid rgba(0, 0, 0, 0.127);
    text-decoration: none;
    color: white;
}

.calendar td.limited-available button,
.calendar td.limited-available button:hover {
    background-color: #cf8700;
    border-bottom: 2px solid rgba(0, 0, 0, 0.127);
    text-decoration: none;
    color: white;
}

.calendar td:nth-of-type(6),
.calendar td:nth-of-type(7) {
    background-color: #F7F7F7FF;
}


.calendar td.limited-available:hover button,
.calendar td.available:hover button,
.btn-time.btn-link:hover {
    transform: scale(1.05, 1.1);
}

.calendar td.has-event button {
    position: relative;
}

.calendar td.has-event button:before {
    content: "Test event";
    background-color: inherit;
    padding: 5px;
    width: 30px;
    font-size: 16px;
    line-height: 1;
    height: 30px;
    border: 1px solid white;
    position: absolute;
    top: -9px;
    right: -9px;
    border-radius: 15px;
}

.calendar td.not-available.has-event button:before {
    border-color: #E25252;
}

/* END STYLING FOR STEP BODIES */
.custom-checkbox.vinkje {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
}

.custom-checkbox.vinkje:before {
    border: 1px solid rgba(0, 0, 0, 0.164);
    border-radius: 3px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 24px;
    height: 24px;
    background-color: white;
}

.custom-checkbox.vinkje:after {
    border-radius: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
    width: 16px;
    height: 16px;
    background-color: white;
}


.custom-checkbox.vinkje.checked:after {
    background-color: var(--active-step-background);
}

.serviceItem {
    padding: 5px;
    margin: 5px;
    border: 2px black solid;
}

.serviceItemCheckbox {
    font-max-size: 2pt;
    text-align: center;
    padding: 5px;
    margin: 5px;
    border: 1px black solid;
}

#kenteken, #kentekenview {
    background-image: url(/onlineplannen/images/kentekenbg.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    background-color: #FECD24;
    border: none !important;
    text-transform: uppercase;
    box-shadow: 0 0 0 #6B6B6B;
    border-radius: 6px;
    color: #000;
    font-weight: bold;
    font-family: 'kentekenregular', Arial, monospace;
    font-size: 4em;
    line-height: 100%;
    margin: 0;
    padding: 0;
    padding-left: 35px;
    width: 360px;
    min-width: unset !important;
    max-width: 100% !important;
    height: auto;
    text-align: center;
}

#kentekenview {
    cursor: default;
    font-size: 2em;
    min-width: unset;
}

#kilometerstand {
    width: 360px;
}

.text-black {
    color: black;
}

.services-not-available {
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
    padding: 10px !important;
    background-color: transparent !important;
}

.services-not-available span.error {
    color: #dc3545 !important;
    float: right;
    width: 100%;
    border: 1px solid #dc3545;
    border-radius: 5px;
    background-color: var(--service-background);
    padding: 4px 8px;
    box-shadow: 0 2px 1px #0000001c;
}

.services-not-available span.error p {
    color: #dc3545 !important;
}

/* iPhone 5 */
@media (max-width: 320px) {
    #kenteken, #kentekenview {
        font-size: 2.5em;
    }
}

/* iPhone 6 */
@media (max-width: 375px) {
    #kenteken, #kentekenview {
        font-size: 2.5em;
    }

    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    select:focus,
    textarea {
        font-size: 16px;
    }
}

.loading-state {
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: #00000014;
    cursor: wait;
    overflow: hidden;
}

div.spinner,
.in-button-loader > div {
    display: block;
    background-color: transparent;
    border: 5px solid white;
    border-right-color: var(--primary-action);
    border-radius: 50%;
    animation-name: rotateIcon;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    box-shadow: 0 0 7px #0000004C;
}

div.spinner {
    width: 64px;
    height: 64px;
    position: fixed;
    z-index: 2001;
    /* Truly positioning is done via Javascript */
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

button:not(.disabled) .in-button-loader > div {
    border-color: var(--primary-action);
    border-right-color: white;
    box-shadow: none;
}

.in-button-loader > div {
    width: 20px;
    height: 20px;
    position: absolute;
    top: calc(50% - 10px);
    left: unset;
    right: 10px;
    border-width: 3px;
}

@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateIconTje {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(400px);
    }
}

.stepsContainer .completed-steps-wrapper > .complete-step:not(:nth-of-type(1)):before {
    content: "";
    position: absolute;
    top: -8px;
    left: 27px;
    width: 2px;
    height: 100%;
    background-color: #28a745;
    z-index: -1;
}


.complete-step.replacementTransportStep .form-group .data-wrapper span,
.complete-step.replacementTransportStep .form-group .data-wrapper small {
    width: 100%;
}

@media only screen and (max-width: 1080px) {

    .hide-on-small-screen,
    .completed-steps-wrapper .hide-on-viewport {
        display: none !important;
    }

}

@media only screen and (min-width: 1081px) {

    .container {
        max-width: 1280px !important;
    }

    .finished-step:not(.active),
    .hide-on-viewport:not(.open-step):not(.complete-step) {
        display: none !important;
    }

    .steps-wrapper .complete-step:not(.open-step).hide-on-viewport {
        display: none !important;
    }

    .steps-wrapper .step-wrapper.open-step .stepHeader > a > svg,
    .steps-wrapper .step-wrapper.open-step .stepHeader > a > b {
        opacity: 0;
    }

    .hide-on-small-screen .stepheaderlink {
        background-color: var(--selected-service-background);
    }

    .hide-on-small-screen .stepHeader > a {
        background-color: var(--form-background) !important;
    }

    .hide-on-small-screen .stepHeader > a p {
        color: var(--form-text-color) !important;
    }

    .step-wrapper.active {
        border: 1px solid var(--active-step-background);
        box-shadow: 0 2px 2px 1px #0000000f;
    }

    .stepsContainer {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex-direction: row-reverse;
    }

    .container {
        width: 1280px;
    }

    .complete-step .stepHeader {
        flex-wrap: wrap;
        border-radius: var(--border-radius);
        overflow: hidden;
    }

    .complete-step.vehicleInfoStep .stepheader-right .formgroup #kentekenview {
        margin: 0 auto;
    }

    .complete-step .stepHeader > a {
        height: 40px;
        background-color: var(--active-step-background);
        color: var(--active-step-text-color);
        max-width: unset;
        width: 100%;
    }

    .complete-step .stepHeader > a > b,
    .complete-step .stepHeader > a > p {
        color: var(--active-step-text-color);
    }

    .complete-step .stepHeader .stepheader-right {
        flex-wrap: wrap;
    }

    .complete-step .stepHeader .stepheader-right .form-group {
        width: 100%;
    }

    .stepsContainer .completed-steps-wrapper {
        align-self: flex-start;
        position: sticky;
        top: 10px;
        width: calc(30% - 10px);
        margin-left: 10px;
    }

    .stepsContainer .completed-steps-wrapper > .complete-step {
        position: relative;
    }

    .stepsContainer .completed-steps-wrapper > .complete-step:nth-of-type(1),
    .stepsContainer .steps-wrapper > .step-wrapper:nth-of-type(1) {
        margin-top: 0;
    }

    .stepsContainer .completed-steps-wrapper > .complete-step:not(:nth-of-type(1)):before {
        content: "";
        position: absolute;
        top: -8px;
        left: 27px;
        width: 2px;
        height: 100%;
        background-color: #28a745;
    }

    .stepsContainer .steps-wrapper {
        width: 70%;
    }
}


/* iPhone 6+ */
@media (max-width: 440px) {

    .active-step .stepBody {
        align-self: baseline;
    }

    .customerInfoStep .well.servicesGroup {
        margin-left: 0;
    }

    .customerInfoStep .stepBody .form-group.contains-input > label {
        left: 4px;
    }

    .stepBody .form-wrapper .form-group.voertuig-inputs {
        margin-bottom: 0;
    }

    .form-group {
        width: 100%;
        margin-bottom: 24px;
        padding-right: 0;
        padding-left: 0;
    }

    .stepBody .form-wrapper .form-group label.required-field {
        padding: 0 4px;
    }

    .customerInfoStep .stepBody .form-group > label {
        left: 10px;
        top: -10px !important;
        line-height: 1;
        border-bottom: 6px solid var(--form-background);
    }

    .customerInfoStep .stepBody .form-group:has(input:focus) label, .customerInfoStep .stepBody .form-group:has(input:not(:placeholder-shown)) label {

    }

    .stepBody .form-wrapper .form-group label {
        font-size: 16px;
        margin-bottom: 0;
    }

    #kenteken, #kentekenview {
        font-size: 3em;
    }

    .vehicleInfoStep .stepBody .data-preview-wrapper {
        margin: 0;
    }

    .establishments-container .establishment-wrapper {
        width: calc(100% - 4px);
    }

    button.btn-time {
        width: calc(50% - 4px);
    }

    button.btn.btn-xl.btn-primary.btn-next {
        position: sticky;
        left: calc(50% - 120px);
        bottom: 20px !important;
    }

    .table-condensed > tbody > tr {
        height: 38px;
    }

    .calendar thead, .calendar tbody {
        padding: 0;
    }

    .calendar td button {
        padding: 4px !important;
    }

    /* hover state reset  */
    .service-container:not(.selected-service) .service-info-wrapper:not(.part-of-group, .subgroup-wrapper):hover,
    .transport-needed-wrapper:not(.selected-transport):hover,
    .stepBody .servicesGroup.group-select:not(.selected-group):hover,
    .replacement-transport-remarks:hover,
    .servicesGroup .service-container.subgroup-container:hover {
        background-color: var(--service-background);
    }

    .servicesGroup .service-container.subgroup-container:hover,
    .servicesGroup .service-container.subgroup-container:hover section,
    .service-container:not(.selected-service) .service-info-wrapper:not(.part-of-group, .subgroup-wrapper):hover + section {
        border-color: var(--service-background)
    }

    .service-container.subgroup-container .subgroup-wrapper.open:hover .service-container:hover,
    .service-container.subgroup-container .subgroup-wrapper.open:hover .service-container:not(.single) {
        background-color: var(--service-background);
    }
}

@media (max-width: 500px) {
    .complete-step .stepHeader .data-wrapper span {
        width: 100px;
        font-size: 12px;
    }

    .complete-step .stepHeader .form-group:not(:first-of-type) .data-wrapper p {
        font-size: 12px;
        width: calc(100% - 100px)
    }

    .complete-step .stepHeader .form-group:first-of-type .data-wrapper p {
        font-size: 12px;
        width: calc(100% - 54px)
    }

    .complete-step .stepHeader > div > div:nth-of-type(2),
    .complete-step .stepHeader > div .form-group {
        padding: 8px;
    }

    .establishment-wrapper > div:nth-of-type(1) {
        display: none;
    }

}

@media (max-width: 768px) {

    .vehicleInfoStep .stepheader-right > div:nth-of-type(1) #kentekenview {
        margin: 0 auto;
    }

    .service-container.subgroup-container .service-info-wrapper > button {
        position: relative;
        right: 0;
        left: 0;
        bottom: 0;
        top: 0;
        margin: 0 0 10px auto;
    }

    .form-wrapper button.btn.btn-xl.btn-primary {
        right: calc(50% - 80px);
    }

    .servicesGroup,
    .calendar-container,
    .transport-needed-container,
    .establishments-container,
    .replacement-transport-wrapper {
        padding: 0;
        background-color: transparent;
    }

    .stepHeader {
        flex-direction: column;
    }

    .establishment-wrapper {
        width: calc(50% - 4px);
    }

    .stepBody .form-wrapper {
        padding: 10px 8px 44px;
        border: none;
    }

    button.btn-time {
        width: calc(25% - 4px);
    }

    .servicesGroup .service-info-wrapper p {
        position: initial;
        margin: 0 10px 10px;
    }

    .subgroup-wrapper .service-info-wrapper p {
        margin: 10px 0 0;
    }

    .service-container.single {
        width: 100%;
    }

    .establishment-wrapper > div span:nth-of-type(3),
    .establishment-wrapper > div span:nth-of-type(4) {
        display: none;
    }

    .replacement-transport-remarks {
        width: 100%;
    }

    .transport-needed-container h4 {
        font-size: 16px;
    }

    .complete-step .stepHeader > div {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
    }

    .complete-step:not(.open-step) .stepHeader > a {
        max-width: unset;
        width: 100%;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    .stepHeader .stepheaderlink {
        height: 40px;
        padding-top: 5px;
    }

    .stepHeader .stepheader-right {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        min-height: fit-content;
        width: 100%;
        border: none;
        background-color: #ebebeb;
    }

    .stepBody .data-preview-wrapper span {
        width: 50%;
    }

    .stepBody .data-preview-wrapper p {
        width: 50%;
    }

    .stepheader-right > .form-group {
        width: 100%;
    }

    .complete-step .stepHeader > div .form-group,
    .complete-step .stepHeader > div > div:nth-of-type(2) {
        padding: 10px;
    }

    .stepBody .form-group {
        width: 100%;
    }

    .establishment-container {
        width: calc(100% - 4px);
    }

    .establishment-wrapper > div:nth-of-type(2) {
        padding: 16px 10px;
        width: 100%;
    }

    div:nth-of-type(2) span:not(:first-of-type).first-possible-servicedate {
        width: 100%;
        border-radius: var(--border-radius-inner) 0 0 var(--border-radius-inner);
        text-align: center;
        box-shadow: none;
    }

    .calendar-button-row h5 {
        font-size: 14px;
    }

    .table-condensed > tbody > tr,
    .table-condensed > tbody > tr td {
        height: 48px;
    }

    .table-condensed > tbody > tr > td {
        padding: 2px;
    }

    .transport-needed-wrapper {
        width: 100%;
    }

    .calendar thead tr:nth-of-type(2) th {
        max-width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 1081px) {

    .container {
        max-width: unset;
        width: 100% !important;
    }


    .complete-step .stepHeader .data-wrapper.subtotal {
        padding: 0;
        width: 120px;
        margin-top: 8px;
    }

    .calendar-container .calendar:nth-of-type(1) {
        flex-grow: 1;
    }

    .calendar-container .calendar:nth-of-type(1) .calendar-button-row > div:nth-of-type(3) button {
        display: block !important;
        visibility: visible !important;
    }

    .calendar-container .calendar:nth-of-type(2) {
        display: none !important;
    }

    .vehicleInfoStep .stepheader-right {
        display: flex;
        flex-wrap: wrap;
    }

    .vehicleInfoStep .stepheader-right > div:nth-of-type(1) {
        padding-bottom: 5px;
    }

    .vehicleInfoStep .stepheader-right > div:nth-of-type(2) {
        padding-top: 5px;
    }

    .vehicleInfoStep .stepheader-right > div {
        width: 100%;
    }

    #kentekenview {
        max-width: 240px !important;
    }
}

.stepHeader > a > b {
    opacity: 0;
    width: 24px !important;
}

.afspraak-wijzigen .mainwindow {
    margin-bottom: 40px;
    background-color: var(--active-step-background);
}

.afspraak-wijzigen .stepsContainer .row {
    align-items: flex-end;
}

.afspraak-wijzigen .heading-wrapper {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    background-color: var(--form-background);
}

.afspraak-wijzigen .heading-wrapper h2,
.afspraak-wijzigen .heading-wrapper h2 b {
    color: var(--form-text-color);
    font-size: 20px;
}

.time-selection-container h2 {
    font-size: 20px;
}

.afpsraak-wijzigen section.row::before,
.afpsraak-wijzigen section.row::after {
    content: none !important;
}

.afspraak-wijzigen .mainwindow {
    padding: 8px;
    border-radius: var(--border-radius);
}

.afspraak-wijzigen .mainwindow .stepsContainer > div.row {
    background-color: var(--form-background);
    border-radius: var(--border-radius);
    margin: 0;
    box-shadow: 0 2px 1px #0000001c;
}

.afspraak-wijzigen .mainwindow .stepsContainer > div.row:nth-of-type(1) {
    padding-bottom: 0;
}

.afspraak-wijzigen .mainwindow .stepsContainer > div.row:nth-of-type(1) .heading-wrapper {
    background-color: var(--active-step-background);
}

.afspraak-wijzigen .mainwindow .stepsContainer > div.row:nth-of-type(1) .heading-wrapper h2,
.afspraak-wijzigen .mainwindow .stepsContainer > div.row:nth-of-type(1) .heading-wrapper b {
    color: var(--active-step-text-color);
}

.afspraak-wijzigen .mainwindow .stepsContainer > div.row:nth-of-type(2) {
    margin-top: 8px;
}

.afspraak-wijzigen .mainwindow .stepsContainer > div.row:nth-of-type(2):before {
    content: none;
}

.afspraak-wijzigen .btn-primary {
    font-size: 16px;
    transform: scale(1);
    padding: 0;
    width: 240px;
    min-width: fit-content;
    border: none;
    box-shadow: none !important;
    background-color: var(--primary-action);
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    height: 38px;
    color: var(--primary-action-text-color);
    box-sizing: content-box;
    float: right;
}

.afspraak-wijzigen .kenteken-wrapper {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
    flex-wrap: wrap;
    align-items: center;
}

.afspraak-wijzigen .kenteken-wrapper #kentekenview {
    margin: 0 auto;
    width: 100%;
    padding-left: 20px;
    font-size: 2.5em;
    height: auto;
}

.afspraak-wijzigen .kenteken-wrapper > div {
    text-align: center;
    font-size: 14px;
    width: 100%;
    background-color: var(--service-background);
    padding: 0;
}

.afspraak-wijzigen .kenteken-wrapper > div > span {
    line-height: 1;
    width: 100%;
    padding: 0;
    display: inline-block;
    text-align: left;
}

.afspraak-wijzigen .kenteken-wrapper > div > span p {
    color: var(--form-text-color);
}

.afspraak-wijzigen section.summary-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 8px;
    align-items: stretch;
    padding: 24px 15px;
}

.afspraak-wijzigen section.summary-container > div.col-xs-4 {
    width: calc(33% - 8px)
}

.afspraak-wijzigen section.summary-container > div.form-group {
    padding: 20px;
}

.afspraak-wijzigen section.summary-container .form-group {
    padding: 0;
}

.afspraak-wijzigen section.last-check-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0;
    padding-top: 10px;
    align-items: flex-end;
}

.afspraak-wijzigen .summary-wrapper.col-xs-6 {
    width: calc(50% - 4px);
}

.afspraak-wijzigen .summary-wrapper .summary-heading {
    border-radius: var(--border-radius-inner) var(--border-radius-inner) 0 0;
    padding: 10px 10px;
}

.afspraak-wijzigen .summary-wrapper .summary-heading h3 {
    margin: 0;
    font-size: 18px;
    color: var(--form-text-color);
}

.afspraak-wijzigen .summary-wrapper {
    margin: 0;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.089);
    border-radius: var(--border-radius-inner);
    padding-bottom: 10px;
    background-color: var(--service-background);
}

.afspraak-wijzigen .summary-wrapper .data-wrapper {
    padding-bottom: 10px;
}

.afspraak-wijzigen .summary-wrapper::before {
    display: none !important;
}

.afspraak-wijzigen .summary-wrapper span,
.afspraak-wijzigen .summary-wrapper p,
.afspraak-wijzigen .summary-wrapper ul {
    color: var(--form-text-color-highlight);
    padding: 0 10px;
}

.afspraak-wijzigen .summary-wrapper p {
    position: relative;
}

.afspraak-wijzigen .stepsContainer .row .form-group:last-of-type {
    margin-bottom: 0 !important;
}

@media (max-width: 440px) {

    .afspraak-wijzigen .mainwindow {
        padding: 0;
    }

    .afspraak-wijzigen .button-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .afspraak-wijzigen section.summary-container {
        padding: 10px 10px 0;
    }

    .afspraak-wijzigen section.last-check-container > div:nth-of-type(1) {
        padding: 0 10px;
        margin: 16px 0 8px;
        text-align: center;
    }
}