.page-registration .registration-title {
    display               : grid;
    grid-template-columns : auto auto;
    grid-column-gap       : 0.5rem;
    margin-top            : 1rem;
}

.page-registration .require-fields {
    font-style    : italic;
    margin-bottom : 50px;
}

.page-registration h2 {
    border-bottom  : 0;
    color          : var(--body-text-color);
    font-size      : 1rem;
    font-weight    : 600;
    margin         : 2rem 0 1rem 0;
    padding-bottom : 0;
    text-transform : none;
}

.page-registration .registration-title span:last-child {
    font-style     : italic;
    text-align     : right;
    text-transform : none;
}

.page-registration .boxesContainer {
    margin-bottom : 1rem;
}

.page-registration .boxHeader {
    display               : grid;
    grid-template-columns : auto auto;
    align-items           : center;
    justify-content       : space-between;
    position              : relative;
    padding-right         : 2rem;
}

.page-registration .boxHeader.clickable {
    cursor : pointer;
}

.page-registration .boxHeader.selected::after {
    z-index            : 1;
    display            : inline-block;
    top                : 50%;
    transform          : translateY(-50%);
    right              : 1rem;
    position           : absolute;
    background-color   : var(--body-text-color);
    width              : 10px;
    height             : 10px;
    mask-image         : url('../../../images/layout_v4/arrow.svg');
    -webkit-mask-image : url('../../../images/layout_v4/arrow.svg');
    mask-size          : 10px 10px;
    -webkit-mask-size  : 10px 10px;
    content            : '';
    transition         : transform 300ms ease;
}

.page-registration .boxHeader.selected.open::after {
    transform : translateY(-50%) rotate(-0.5turn);
}

.page-registration .toggleBox.boxContainer .box:not(.normalbox) {
    align-items           : center;
    display               : grid;
    gap                   : 0 20px;
    grid-template-columns : 2.81rem auto;
    margin-bottom         : 0;
}

.layout_v4 .page-registration input.gray,
.layout_v4 .page-registration input.gray {
    background-color : transparent;
    box-shadow       : none;
    color            : var(--body-text-color);
    text-transform   : none;
}


.page-registration .toggleBox .js-storagePlaceDiv,
.page-registration .toggleBox .js-deliveryAddressDiv {
    margin-bottom : var(--default-box-gap);
}

.page-registration .boxContainer .box:not(.centered):not(.normalbox) > div:nth-child(2) {
    height  : 100%;
    display : grid;
}

.page-registration .boxContainer .box h3 {
    justify-content : left;
}

.page-registration .boxContainer .box h3 + span {
    display    : block;
    margin-top : 10px;
}

.page-registration .boxContainer .box.normalbox h3 svg {
    margin-left : 0;
    
}

.page-registration .boxContainer h3 .mask,
.page-registration .boxContainer h3 .icoInfo,
.page-registration .boxContainer h3 .icon {
    margin-left : 10px;
    margin-top  : 1px;
}

.page-registration .loginDataContainer {
    max-width : 56rem;
    margin    : 0 auto 1.5rem auto;
}

.page-registration .loginData {
    display               : grid;
    gap                   : 10px 20px;
    grid-template-columns : auto auto;
}

.page-registration .loginDataContainer .box.error {
    margin-top            : 1rem;
    display               : grid;
    align-items           : center;
    grid-template-columns : auto 200px;
}

.page-registration-personaldata .signData {
    margin-top            : 0.5rem;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    align-items           : center;
}

.page-registration-personaldata .signData .identified {
    text-align : right;
}

.page-registration-personaldata .signData .identified strong {
    color : var(--main-gold-color);
}

.page-registration-personaldata .signData .identified svg {
    margin-top : -2px;
}

.page-registration .yourLoginDataInfo {
    display : grid;
    height  : 100%;
}

.page-registration .yourLoginDataInfo .box {
    height        : 100%;
    display       : grid;
    justify-items : center;
    text-align    : center;
    align-items   : center;
}

.page-registration .yourLoginDataInfo b {
    display : block;
}

.page-registration .signResult .box {
    align-items     : center;
    font-size       : 1.5rem;
    height          : 12rem;
    margin          : 2rem 0;
    display         : grid;
    text-align      : center;
    align-content   : center;
    justify-content : center;
}

.page-registration .signResult .box.infobox {
    grid-template-columns : 50px auto;
}

.page-registration .signResult .box.error {
    grid-template-columns : auto 300px;
    text-align            : left;
}


.signiframe {
    width  : 100%;
    height : 1320px;
}

.page-registration .boxContainer label.modernRadio {
    --size : 40px;
}

.page-registration .boxContainer label.modernRadio input[type='radio'] + span:before,
.page-registration .boxContainer label.modernRadio input[type='checkbox'] + span:before {
    font-size : 2rem;
}

.page-registration .boxContainer .box.soleTraderAcceptText label.modernRadio input[type='radio'] + span:before,
.page-registration .boxContainer .box.soleTraderAcceptText label.modernRadio input[type='checkbox'] + span:before {
    font-size : unset;
}


.page-registration .box.productTypes.clickable {
    background-image : none;
    padding          : 0;
}

.page-registration .box.productTypes {
    align-items           : unset !important;
    grid-template-columns : none !important;
    height                : 100%;
    grid-gap              : 0 !important;
    display               : flex !important;
    flex-direction        : column;
    transition            : transform 0.2s ease-in;
}


.page-registration .box.productTypes h3 {
    border-top-left-radius  : var(--default-border-radius);
    border-top-right-radius : var(--default-border-radius);
    padding                 : var(--default-box-padding);
    grid-area               : header;
    color                   : var(--accent-text-color);
    
    
    font-weight             : 600;
    text-align              : center;
    height                  : 4rem;
    display                 : block;
    position                : relative;
}

.page-registration .box.productTypes h3::after {
    --row-color  : var(--orange-color);
    position     : absolute;
    content      : '';
    width        : 0;
    height       : 0;
    border-left  : 20px solid transparent;
    border-right : 20px solid transparent;
    border-top   : 15px solid var(--row-color);
    bottom       : 0;
    left         : 50%;
    transform    : translate(-50%, calc(100% - 1px));
}

.page-registration .box.productTypes > div.content {
    flex-grow  : 1;
    padding    : var(--default-box-padding);
    margin-top : 1rem;
    display    : grid;
}

.page-registration .box.productTypes > div.hr,
.page-registration .box.productTypes > button {
    margin-top   : 0;
    margin-left  : var(--default-box-padding);
    margin-right : var(--default-box-padding);
}

.page-registration .box.productTypes > button {
    margin-bottom : var(--default-box-padding);
}

.page-registration .box.productTypes label {
    display : none;
}

.page-registration .box.productTypes.f h3 {
    background-color : var(--orange-color);
}

.page-registration .box.productTypes.f h3::after {
    --row-color : var(--orange-color);
}

.page-registration .box.productTypes.e h3 {
    background-color : var(--red-color);
}

.page-registration .box.productTypes.e h3::after {
    --row-color : var(--red-color);
}

.page-registration .box.productTypes.m h3 {
    background-color : var(--blue-color);
}

.page-registration .box.productTypes.m h3::after {
    --row-color : var(--blue-color);
}

.formContainer.box.infobox .row.bigger {
    font-size   : 1rem;
    font-weight : 600;
}

.formContainer.box.infobox .row.muchbigger {
    font-size   : 1.1rem;
    font-weight : 600;
}

.autoDeliveryGramms {
    padding-left : 40px;
}

.safari a[href^=tel] {
    color           : unset;
    text-decoration : unset;
    font-weight     : unset;
}

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

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

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

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

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

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

@media only screen and (max-width : 1100px) {
    .page-registration .sponsorCheck {
        grid-template-columns : 2fr 1fr;
    }
    
}

@media only screen and (max-width : 1000px) {
    .page-registration .gridContainer {
        grid-template-columns : 1fr;
    }
    
    .page-registration .clipart {
        display : none;
    }
}

@media only screen and (max-width : 900px) {
    .page-registration .sponsorCheck {
        grid-template-columns : 1fr;
    }
    
    .signiframe {
        height : 141vw;
    }
    
}

@media only screen and (max-width : 800px) {
    .page-registration .sparplanOrder {
        grid-template-columns : 1fr;
    }
    
    .formContainer .row.bigger, .formContainer .row.muchbigger {
        gap : 0;
    }
}

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

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

}


@media only screen and (max-width : 500px) {
    
    .page-registration .registration-title {
        font-size       : 1.2rem;
        hyphens         : auto;
        word-break      : break-word;
        -webkit-hyphens : auto;
    }
    
    .page-registration .loginData {
        word-break            : break-word;
        grid-template-columns : 1fr;
    }
    
    .page-registration .spareplanSteps .subSteps {
        grid-template-columns : 1fr 0.5fr;
    }
    
    .spareplanSummary > div.split4:not(.hr):not(.center):not(.notGrid):not(.spareplanSummaryContainer) {
        grid-template-columns : 0.75fr 0.3fr 0.5fr 0.5fr;
    }
    
    .spareplanSummary div.split4 *:nth-child(2),
    .spareplanSummary div.split4 *:nth-child(3) {
        text-align    : right;
        padding-right : 1rem;
        white-space   : nowrap;
    }
}

@media only screen and (max-width : 450px) {
    
    
    .page-registration select[name^='birth_'] {
        font-size    : 0.8rem;
        padding-left : 0.5rem;
    }
    
    .safari.touch-device .page-registration select[name^='birth_'] {
        background-position : calc(100% - 18px) center,
        calc(100% - 14px) center,
        calc(100% - 11px) center;
    }
    
    .page-registration .registration-title {
        font-size : 1.1rem;
    }
    
    .page-registration .spareplanSteps .subSteps {
        font-size : 0.8rem;
    }
}

@media only screen and (max-width : 400px) {
    .page-registration .spareplanSteps .subSteps {
        grid-template-columns : 1fr 1fr;
    }
}