body {
    --wizard-c-text: #7A7A7A;
    --wizard-c-dark-text: #54595F;
    --wizard-step-active: #4cff4a;
    --wizard-c-info-blue: #d9edf7;
    --wizard-c-highlight-blue: #41BEE3;
    --wizard-c-dark-blue: #4197E3;
    --wizard-c-ok: #61CE70;
    --wizard-c-summary-ok: #dff0d8;
    --wizard-c-danger: #FF0000;
    --wizard-c-danger-highlight: #e34141;
    --wizard-list-background: #f9f9f9;
    --wizard-list-border: #ddd;
}

.checkout .tab-content > .active {
    overflow: initial;
}

.full-container.checkout .content {
    display: flex;
    padding-top: 2em;
    flex-direction: row;
}

.checkout .content,
.checkout #order .order-start,
.checkout #order .order-start .edit-wrapper,
.checkout .shipping-start,
.checkout .shipping-start #shipping-address,
.checkout #shipping-service {
    gap: 2em;
}

.checkout .highlight {
    box-shadow: inset var(--wizard-c-danger) 0px 0px 4px 1px;
}

.checkout .form-control.interacted:invalid {
    /* box-shadow: inset var(--wizard-c-danger) 0px 0px 4px 1px; */
}

.checkout .progress {
    max-width: 1200px;
    margin: auto;
    height: auto;
    background-color: white;
    box-shadow: none;
}

.checkout .btn {
    font-weight: 600;
}

.checkout .btn.continue {
    font-size: var(--f-b);
    font-weight: 600;
    transition: color .2s;
    border-radius: 0.5em;
    margin-top: 30px;
    height: 50px;
}
.checkout .btn.continue:hover,
.checkout .btn.continue:focus {
    /*color: #3c763d; */
    /*color: #5cb85c; */
    color: #e0f4fa;
}

.checkout #add-insurance {
    font-size: 1rem;
    border-radius: 0.5em;
}

.checkout-step-wrapper {
    flex-grow: 1;
}

.checkout-step-wrapper .tab-pane {
    display: flex;
}
.checkout-step-wrapper .tab-pane > form {
    flex-grow: 1;
}
.checkout-step-wrapper .right {
    display: flex;
    flex-direction: column;
}

.checkout .shipping-start #shipping-address {
    display: flex;
    flex-direction: column;
}

.checkout #shipping #shipping-service,
.checkout #summary {
    height: auto;
    align-self: start;
}
.checkout #shipping-service,
.checkout #order-insurance .edit-shipping {
    white-space: nowrap;
}

.checkout #shipping-service .notice {
    white-space: normal;
}

.checkout .payment-wrapper .payment-line {
    grid-template-columns: 1fr 2fr 1fr;
    position: relative;
}

.checkout .shipping-form-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.checkout .shipping-form-wrapper > div {
    flex-grow: 1;
}
.checkout #order #order-shop.quick .shop-wrapper {
    padding: 1em;
}

.checkout #order #order-shop.quick .shop-wrapper .form ul > li {
    margin-bottom: 5px !important;
}

.checkout #order #order-shop.quick .shop-wrapper input,
.checkout #order #order-shop.quick .shop-wrapper select,
.checkout #order #order-shop.quick .shop-wrapper textarea {
    margin-bottom: .5em;
}

.checkout #order #order-shop .title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.checkout #order #order-shop .title .shop-link > img {
    height: 40px;
}

.checkout div.shipping-form-wrapper > div.price-box:nth-child(odd),
.checkout-summary-wrapper .summary > div:nth-child(2n),
#order .order-start .edit-wrapper .payment .payment-wrapper > div:nth-child(2n),
#order .order-start .edit-wrapper .address > div:nth-child(2n) {
    background-color: var(--wizard-list-background);
}

.checkout-container {
    border: 1px solid var(--wizard-c-highlight-blue);
    border-radius: 1em;
    overflow: hidden;
    height: 100%;
}

.checkout .checkout-container > .title,
.checkout .checkout-container .address-wrapper > .title,
.checkout .checkout-container .payment > .title{
    font-size: var(--f-b);
    color: var(--wizard-c-dark-text);
    font-weight: bold;
    padding: .5em;
    border-bottom: 1px solid var(--wizard-list-border);
}
.checkout .checkout-container > .title {
    display: flex;
    justify-content: space-between;
}

.checkout .address-wrapper .form,
.checkout .checkout-container .shipping-form-wrapper,
.checkout .edit-wrapper .address,
.checkout .shop-wrapper,
.checkout .voucher-wrapper .voucher-inputs {
    padding-top: 10px;
    padding-bottom: 1em;
}

.checkout .checkout-container .step-start {
    padding: 1em;
}
.checkout #shipping #shipping-address .checkout-container {
    height: initial;
}

#order .order-start .edit-wrapper .address-wrapper .address {
    display: flex;
    text-align: left;
    font-size: 15px;
}

.checkout .address,
.checkout .payment-line,
.checkout .price-box,
.checkout #order-insurance .insurance-item .text,
.checkout #order-insurance .insurance-item .price-wrapper{
    padding: 0.4em 30px;
}

.checkout #order-insurance .insurance-item > div {
    flex-grow: 1;
}

.checkout-step-wrapper .right .price-box,
.checkout-step-wrapper .right .header-box,
.checkout .payment-wrapper .payment-line{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    font-size: 15px;
    align-items: baseline;
    text-align: left;
}
.checkout-step-wrapper .right .header-box {
    font-weight: bold;
}
.checkout-step-wrapper.Start {
    width: 100%;
}
.checkout-summary-wrapper.Start {
    min-width: initial;
}

#start form .input-wrapper .note.alternative {
    display: none;
}

#start form .input-wrapper .note.alternative.visible {
    display: inline-block;
}

#start form .input-wrapper.name-country {
    height: initial;
}

#start form .input-wrapper .bootstrap-select {
    margin-bottom: 0;
}

#start form .input-wrapper .dropdown-menu.open {
    position: initial;
    border-bottom: 2px solid var(--wizard-c-highlight-blue);
    box-shadow: 0px 0px 10px 10px var(--wizard-list-border);
}

#start form .input-wrapper .dropdown-menu.inner > li > a {
    font-size: 16px;
}

#start form .input-wrapper .shop-url-question-wrapper {
    display: inline-block;
    padding: 0 .2em;
}

.checkout-summary-wrapper {
    min-width: 33%;
}

.checkout-summary-wrapper .summary {
    display: flex;
    flex-direction: column;
}

.checkout-summary-wrapper .summary .summary-line {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}
.checkout-summary-wrapper .summary .summary-line.info {
    background-color: var(--wizard-c-info-blue);
}
.checkout-summary-wrapper .summary .summary-line.success {
    background-color: var(--wizard-c-summary-ok);
}

#summary .agreements .list-group-item {
    display: flex;
    gap: 1em;
    align-items: center;
}

#shipping .shipping-start {
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.checkout #summary .voucher-wrapper {
    margin-top: 2em;
}

.checkout .address-wrapper .form,
.checkout .voucher-wrapper .voucher-inputs {
    padding-left: 1em;
    padding-right: 1em;
}

.checkout .voucher-wrapper .voucher-inputs {
    position: relative;
}

.checkout .voucher-wrapper .voucher-inputs .decoration-wrapper {
    position: absolute;
    top: 15px;
    right: 24px;
}

.checkout .voucher-wrapper .voucher-inputs .decoration-wrapper.check {
    color: lime;
}

.checkout .voucher-wrapper .voucher-inputs .decoration-wrapper.xmark {
    color: red;
}

.checkout form .input-wrapper {
    position: relative;
}

.checkout form .input-wrapper .loading-decoration {
    position: absolute;
}

.checkout #start form .input-wrapper .loading-decoration {
    top: 40px;
    right: 24px;
}

.checkout #shipping form .input-wrapper .loading-decoration {
    top: 2em;
    right: 1.5em;
}


.address-wrapper .use_as_billing {
    padding: 10px 1em;
}

#shipping #shipping-address-form li label,
#shipping #shipping-address-form li input,
#shipping #shipping-address-form li .note,
#order .shop-wrapper .form li label,
#order .shop-wrapper .form li input {
    font-size: 15px;
}
.address-wrapper .note.help-block,
.shop-wrapper .note.help-block{
    font-size: 13px;
    color: var(--wizard-c-text);
}

#insurance .insurance-start {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#insurance .insurance-start .insurance-info,
#insurance .insurance-start .insurance-price {
    padding: 0 1em;
}

#insurance .insurance-price {
    margin-top: auto;
}

#insurance .insurance-decision {
    width: 100%;
}

#insurance .insurance-decision .btn {
    width: 100%;
}

#order .order-start {
    display: flex;
    flex-direction: column;
}

#order .order-start .edit-wrapper {
    display: grid;
    grid-template-columns: 2fr 2fr;
    /* gap: 10px; */
}
#order .order-start .edit-wrapper .insurance-wrapper, #order .order-start .edit-wrapper .shipping-additional{
    grid-column-start: 1;
    grid-column-end: 3;

    display: flex;
    justify-content: space-around;
    flex-direction: column;
}
#order .order-start .edit-wrapper .shipping-additional{
    padding: 0.5em;
}
#order .order-start .edit-wrapper .shipping-additional > .input-group {
    display: flex;
    flex-direction: column;
}

#order .order-start .edit-wrapper .shipping-additional > .input-group .input-group-addon {
    width: 45px;
    height: 45px;
    padding: 0.1em;
}

.checkout #order .shipping-additional > .input-sm {
    height: auto;
}

#order .order-start .edit-wrapper .insurance-wrapper .insurance-item > .text {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 1em;
}

#order .order-start .edit-wrapper .insurance-wrapper .info {
    display: flex;
    flex-direction: column;
    align-items: start;
}

#order .order-start .edit-wrapper .insurance-wrapper .insurance-item {
    display: flex;
    flex-wrap: wrap;
}

#order .order-start .edit-wrapper .insurance-wrapper .insurance-item .edit-shipping {
    display: block;
    width: 100%;
    padding: 0.5em 1em;
}

#order .order-start .edit-wrapper .payment .cargo-order-place-payment {
    width: initial;
}
#order .order-start .edit-wrapper .payment .payment-wrapper .payment-line .cnrflash{
    position: absolute;
    top: -2px;
    right: 4px;
    z-index: 1;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 3px 5px 3px 0;
}
#order .order-start .edit-wrapper .payment .payment-wrapper .payment-line .cnrflash .cnrflash-inner {
    position: absolute;
    bottom: 32px;
    right: -17px;
    width: 119px;
    height: 145px;
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    background-image: linear-gradient(90deg, transparent 50%, rgba(525,255,255,.1) 50%), linear-gradient(0deg, transparent 0%, rgba(1,1,1,.2) 50%);
    background-size: 4px,auto, auto,auto;
    background-color: green;
    box-shadow: 0 3px 3px 0 rgb(1 1 1 / 50%), 0 1px 0 0 rgb(1 1 1 / 50%), inset 0 -1px 8px 0 rgb(255 255 255 / 30%), inset 0 -1px 0 0 rgb(255 255 255 / 20%);
}
#order .order-start .edit-wrapper .payment .payment-wrapper .payment-line .cnrflash-label {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    padding-bottom: 2px;
    color: #fff;
    text-shadow: 0 1px 1px rgb(1 1 1 / 80%);
    font-size: 10px;
    font-weight: bold;
    text-align: center;
}

#order .order-start .package .quantity-display {
    display: flex;
    flex-direction: column;
}

#order .order-start .package .quantity-display > div {
    font-size: 15px;
    padding: 10px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    text-align: left;
    border-bottom: 1px solid var(--wizard-list-border);
}

#order .order-start .package .form > ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#order .order-start .package .form > ul .element-shop,
#order .order-start .package .form > ul .element-shop_order{
    grid-column-start: 1;
    grid-column-end: 3;
}
#order .order-start .cargo-order-place-payment .row {
    display: flex;
    flex-direction: column;
}
#order .order-start .cargo-order-place-payment .row > div {
    width: 100%;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #41bee31A;
}

.table-hover > tbody > tr:hover {
    background-color: #41bee32A;
}

#address-overview {
    display: flex;
    max-width: 1200px;
    margin: auto;
    column-gap: 1vw;
}

#address-overview .address-wrapper {
    flex-grow: 1;
    padding: 1vw;
    max-width: 50%;
}

#address-overview .address-wrapper .submit {
    position: relative;
    width: auto;
    flex-grow: 1;
}

#address-overview .address-wrapper .button-wrapper {
    display: flex;
    align-items: baseline;
}

#address-overview .address-wrapper .preview-wrapper {
    display: flex;
    column-gap: 1vw;
    min-height: 150px;
    overflow-x: auto;
}
#address-overview .address-wrapper .preview-wrapper .mini-address > a.address {
    min-height: 80px;
    white-space: nowrap;
    border: 1px solid var(--wizard-c-highlight-blue);
    padding: 0.5em;
}
#address-overview .address-wrapper .preview-wrapper .mini-address > a.selected {
    border-color: var(--wizard-c-danger-highlight);
}

#address-overview .address-wrapper .action-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
#address-overview .address-wrapper .action-wrapper h5 {
    margin: 0;
}

#address-overview .address-wrapper .preview-wrapper .mini-address{
    display: flex;
    flex-direction: column;
}

#address-overview .address-wrapper .preview-wrapper .address-display{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#address-overview .address-wrapper .preview-wrapper .address-display .btn {
    padding: 0 0.5em;
    margin-top: auto;
}

#address-overview .address-wrapper .preview-wrapper .btn {
    padding: 3px 6px;
    width: 100%;
    margin-top: 4px;
}

.checkout-step-wrapper .order-link {
    display: block;
    text-align: left;
}

.checkout .lightbox .address-start,
.checkout .lightbox .address-start > div {
    width: 100%;
}

.checkout .lightbox #address .form input,
.checkout .lightbox #address .form select,
.checkout .lightbox #address .form textarea {
    margin-bottom: .2em;
}
.checkout .lightbox #address .address-wrapper .form {
    padding-top: 0.5em;
    padding-bottom: 0;
}

.checkout .lightbox #address .form .note {
    margin-top: 1em;
}

.lightbox #address .use_as_billing {
    padding: 4px 1em;
}

.checkout .lightbox #address .title {
    padding: .2em .5em;
}
.checkout .lightbox #address .help-block.note {
    margin-bottom: 0;
}
.checkout .lightbox #address .form-group {
    margin-bottom: .5em !important;
}

.checkout .lightbox #address .address-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.checkout .lightbox #address .address-wrapper .form,
.checkout .lightbox #address .address-wrapper .form > ul > li{
    flex-grow: 1;
}

.checkout .lightbox #address .address-wrapper .form > ul {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.linkbutton {
    color: var(--color-primary);
}

.wizard .form .note {
    font-size: 1em;
    position: relative;
}

.checkout .btn.smallsubmit {
    width: 50%;
    margin-bottom: 1.5em;
}

.checkout #summary .list-group {
    margin-bottom: 0;
}

.checkout #summary #checkout-agreements input[type=checkbox],
.checkout #summary #checkout-agreements input[type=radio] {
    min-width: 16px;
}

.cms-page #finnland-mapwrapper, .cms-page #rates-container {
    flex-basis: 500px;
    flex-grow: 1;
}

.cms-page #rates-container #rates-panels {
    display: flex;
    gap: 1em;
}

.cms-page .finland-map-grouped-wrapper center > h3 {
    font-size: 1.2em;
}

.cms-page #rates-container {
    width: 50%
}

.cms-page #finnland-postcode-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap
}

.cms-page .finland-map-grouped-wrapper .postcode-table-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.cms-page .finland-map-grouped-wrapper .postcode-table {
    margin: .25em;
    padding: 0;
    flex-grow: 1;
}

.cms-page label.is-required:after {
    content: '*';
    color: var(--wizard-c-danger);
}

.checkout .saiphe-form input.form-control,
.checkout .saiphe-form select.form-control,
.checkout .saiphe-form textarea.form-control {
    margin-bottom: 0;
}

.checkout .input-wrapper {
    margin-bottom: 1em;
}

#Cms .checkout .Saiphe_Form .input-wrapper.name-weight,
#Cms .checkout .Saiphe_Form .input-wrapper.name-slots,
#Cms .checkout .Saiphe_Form .input-wrapper.name-packages {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#Cms .checkout .Saiphe_Form .input-wrapper.name-weight .alternative-input,
#Cms .checkout .Saiphe_Form .input-wrapper.name-slots .alternative-input,
#Cms .checkout .Saiphe_Form .input-wrapper.name-packages .alternative-input {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.checkout #order #order-shop.quick .Saiphe_Form .input-wrapper .alternative-input {
    position: relative;
}

.checkout #order #order-shop.quick .Saiphe_Form .input-wrapper.name-weight input,
.checkout #order #order-shop.quick .Saiphe_Form .input-wrapper.name-slots input,
.checkout #order #order-shop.quick .Saiphe_Form .input-wrapper.name-packages input {
    margin-bottom: 0;
}

.checkout .required-message {
    font-size: .75em;
    color: var(--wizard-c-danger);
    display: none;
}

#order-shop.quick .required-message {
    position: absolute;
    bottom: -18px;
    left: 1em;
}

.checkout .form-control:invalid.interacted + .required-message {
    display: block;
}

.full-container .content.legend {
    padding: 0;
}

.full-container .content.legend .required-legend {
    color:var(--wizard-c-danger);
}

@media (max-width: 1199px) {
    #address-overview {
        row-gap: 1vw;
        flex-direction: column;
        align-items: center;
    }
    #address-overview .address-wrapper {
        width: 90%;
        max-width: 800px;
    }
    .cms-page #rates-container {
        width: 40%
    }
    .cms-page #rates-container #rates-panels {
        flex-direction: column;
    }
}

@media (max-width: 992px) {
    #shipping .shipping-start {
        display: flex;
        flex-direction: column;
    }

    .checkout-summary-wrapper {
        width: 50%;
    }

    .cms-page #finnland-postcode-wrapper {
        flex-wrap: wrap
    }

    .cms-page #rates-container #rates-panels {
        flex-direction: row;
    }
}

@media (max-width: 768px) {
    .cms-page .checkout .content {
        flex-direction: column;
    }
    .checkout-summary-wrapper {
        width: 100%;
    }

    #insurance .insurance-start {
        padding: 1em;
    }

    .checkout .Insurance .btn,
    .checkout #shipping-service .notice {
        white-space: normal;
    }

    #insurance .insurance-start .insurance-info,
    #insurance .insurance-start .insurance-price {
        padding: initial;
    }
}

@media (max-width: 640px) {
    #order .order-start .edit-wrapper {
        display: flex;
        flex-direction: column;
    }

    #address-overview .address .action-wrapper {
        flex-direction: column;
        align-items: start;
        gap: 0.5em;
    }

    .cms-page #rates-container #rates-panels {
        flex-direction: column;
    }
    .cms-page #rates-container #rates-box {
        align-items: center;
    }

    .checkout .address,
    .checkout .payment-line,
    .checkout .price-box,
    .checkout #order-insurance .insurance-item .text,
    .checkout #order-insurance .insurance-item .price-wrapper {
        padding: 0.4em 10px;
    }

    #order .order-start .edit-wrapper .insurance-wrapper .insurance-item > .text > input {
        align-self: center;
    }
}