/*Shop Cart 1/2*/

.layerShopCart .layerMemberLogin.formTemplate form {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
}

.layerShopCart .layerMemberLogin.formTemplate form .item.user,
.layerShopCart .layerMemberLogin.formTemplate form .item.password {
    width: 47.5%;
}

.layerShopCart .layerMemberLogin.formTemplate form .action.password {
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 20px;
}

#formMemberLoginField {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}


/* Warenkorb */

.layerShopCart {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.layerShopCartNavigation {
    margin: 2rem 2.5% 2rem 2.5%;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    align-content: stretch;
    justify-content: space-between;
}

.layerShopCartNavigation .item {
    color: #000;
    font: var(--fa-font-light);
    display: block;
    width: 50%;
    text-align: center;
    padding: 15px 0;
    font-size: 150%;
    border: 1px solid var(--main-lightgrey-color);
}

.layerShopCartNavigation .item.open {
    color: #000;
    background-color: var(--main-lightgrey-color);
    border: 1px solid var(--main-lightgrey-color);
}

.layerShopCart .head {
    margin-bottom: 20px;
    width: 100%;
}

.layerShopCart .head.set {
    margin-bottom: 0;
    width: 55%;
    min-height: 130px;
}

.layerShopCart .layerCart.right {
    width: 40%;
}

.layerShopCart .layerCart .shopcart-payment {
    margin-top: 1.5rem;
}

.layerShopCart .layerCart .shopcart-login {
    width: 100%;
}

.layerShopCart .layerCart.left {
    width: 55%;
}

.layerShopCart .layerCart.full {
    width: 100%;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.layerShopCart .layerCart.full .content-item.box-2-col-item {
    margin: 0 0 4rem 0;
    padding: 2.5%;
    border: 1px solid #eee;
}

.layerShopCart .head .document {
    font-size: 1.5rem;
    float: right;
    color: white;
    text-decoration: none;
    background: var(--main-color);
    border-radius: 5px;
    padding: 5px 10px;
}

.layerShopCart .head .document:hover {
    opacity: 0.5;
    transition: all 0.5s ease-out;
}

.layerShopCart .head .document:before {
    content: '\f1c1';
    font: var(--fa-font-light);
    font-weight: 100;
    padding-right: 10px;
}

.layerShopCart .list {
    margin-bottom: 20px;
    line-height: 1.25rem;
}

.layerShopCart .list>.title,
.layerShopCart .list.address .title {
    font-size: 110%;
    margin-bottom: 10px;
    color: #000;
}

.layerShopCart .list.cart {
    width: 100%;
    border-bottom: 1px solid #CCCCCC;
}

.layerShopCart .list.cart .item {
    overflow: hidden;
    border-top: 1px solid #CCCCCC;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    position: relative;
}

.layerShopCart .list.cart .item .title {
    font-size: 1.1rem;
    font-family: var(--main-font);
    font-weight: 100;
    margin-bottom: 0.5rem;
}

.layerShopCart .list.cart .item .voucher {
    font-weight: 700;
    color: var(--main-color);
}

.layerShopCart .list.cart .item .content {
    min-width: 65%;
}

.layerShopCart .list.cart .item .title.small {
    font-size: 1.1rem;
    font-family: var(--main-font);
    font-weight: 100;
    margin-bottom: 0.5rem;
    width: 85%;
}

.layerShopCart .list.cart .item .subtitle {
    font-size: 1.4rem;
    font-family: var(--main-font);
    font-weight: 100;
    margin-bottom: 0.5rem;
}

.layerShopCart .list.cart .item .list {
    margin-bottom: 0;
}

.layerShopCart .list.cart .item .image {
    width: 15%;
    line-height: 0;
    margin: 0 5% 0 0;
}

.layerShopCart .list.cart .item .image img {
    max-width: 100%;
    max-height: 200px;
    height: auto;
    width: auto;
    margin: 0 auto;
}

.layerShopCart .list.cart .item .article {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-end;
    width: 100%;
}

.layerShopCart .list.cart .item .article.set {
    flex-wrap: wrap;
}

.layerShopCart .list.cart .item .delete {
    position: absolute;
    top: 1rem;
    right: 0;
}

.layerMemberWatchlist .list .item .delete {
    position: absolute;
    top: 0;
    right: 0;
}

.layerShopCart .list.cart .item .delete .button,
.layerMemberWatchlist .list .item .delete {
    margin: 0;
    background: none;
    border: none;
    font: var(--fa-font-light);
    cursor: pointer;
    font-size: 1.2rem;
    background-color: var(--main-lightgrey-color);
    padding: 5px;
    border-radius: 3px;
    color: #333;
}

.itemCart .delete {
    display: none;
}

.layerShopCart .list.cart .item .setlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.layerShopCart .list.cart .item .setlist .item.set {
    border: none;
    padding: 0 0 1rem 0;
}

.layerShopCart .list.cart .item .setlist .subtitle {
    font-family: var(--main-font);
    font-weight: 300;
    font-size: 0.8rem;
}

.layerShopCart .list.cart .item .setlist .article .title {
    font-family: var(--main-font);
    font-size: 1rem;
    margin: 0;
}

.layerShopCart .list.cart .item .setlist .article .subtitle {
    font-family: var(--main-font);
    font-size: 1rem;
    font-weight: 100;
}

.layerShopCart .list.cart .item .setlist .article .number {
    margin: 0;
    font-size: 0.8rem;
}

.layerShopCart .list.cart .item .number {
    margin-bottom: 1.5rem;
}

.layerShopCart .list.cart .item.set .number {
    margin-bottom: 0;
}

.layerShopCart .list.cart .item .count {
    text-align: right;
}

.layerShopCart .list.cart .item .dispo {
    padding-left: 20px;
    font-size: 0.8rem;
}

.layerShopCart .list.cart .item .dispo:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: -20px;
    margin-right: 10px;
}

.dispo.green:before {
    background-color: green;
}

.dispo.orange:before {
    background-color: orange;
}

.dispo.red:before {
    background-color: red;
}

.layerShopCart .list.cart .item.price {
    border: none;
    text-align: right;
    justify-content: flex-end;
    flex-wrap: wrap;
    width: 280px;
    align-items: flex-end;
    padding: 0;
}

.layerShopCart .list.cart .item .price.count .count {
    margin-right: 40px;
    width: 30px;
}

.layerShopCart .list.cart .item.price .count,
.layerShopCart .list.cart .item.price .price {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.layerShopCart .list.cart .item.price .price .currency {
    width: 25px;
    text-align: left;
}

.layerShopCart .list.cart .item.price .price .label {
    width: 85px;
}

.layerShopCart .list.cart .item.price .price .value {
    width: 100px;
    text-align: left;
    margin-left: 0.5rem;
}

.layerShopCart .list.cart .item .price .right {
    float: right;
    padding: 0;
    min-width: 80px;
    text-align: right;
}

.layerShopCart .list.cart .item .price .left {
    float: left;
}

.layerShopCart .list.cart .item .form {
    width: 100%;
    padding-right: 30px;
    position: relative;
    margin-bottom: 20px;
    margin-top: 0;
}

.layerShopCart .list.cart .item .form .input {
    box-sizing: border-box;
    height: 30px;
    width: 100px;
    border: 1px solid #ccc;
    background: none;
    color: #000;
    border-radius: 3px 0 0 3px;
    padding: 0 5px;
}

.layerShopCart .list.cart .item .form .button {
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    background: #333333;
    color: #FFFFFF;
    cursor: pointer;
    font: var(--fa-font-thin);
    border-radius: 0 3px 3px 0;
    font-size: 95%;
}

.layerShopCart .list.link {
    text-align: right;
}

.layerShopCart .list.link a {
    display: inline-block;
    background-color: #f2f2f2;
    color: #333333;
    text-decoration: none;
    padding: 5px 10px;
    font-size: 90%;
    border-radius: 3px;
}

.layerShopCart .list.link a:hover {
    color: #f2f2f2;
    background-color: #333333;
}

.layerShopCart .list.link a:before {
    content: '\f08e\00A0';
    font: var(--fa-font-light);
}

.layerShopCart>.form {
    width: 100%;
    margin-bottom: 20px;
}

.layerShopCart form {
    width: 100%;
}

.layerShopCart .form .voucher form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-family: var(--main-font);
}

.layerShopCart .form .voucher form .form-code {
    display: flex;
}

.layerShopCart .form .voucher .input {
    box-sizing: border-box;
    height: 35px;
    border: 1px solid var(--main-lightgrey-color);
    background: none;
    color: #333333;
    border-radius: 3px 0 0 3px;
    padding: 0 5px;
    font-family: var(--main-font);
    min-width: 25%;
}

.layerShopCart .form .voucher .button {
    box-sizing: border-box;
    height: 35px;
    border: none;
    background: var(--main-lightgrey-color);
    color: #333;
    cursor: pointer;
    border-radius: 0 3px 3px 0;
    font-size: 90%;
    padding: 0 10px;
    font-family: var(--main-font);
}

.layerShopCart .form .voucher .button:hover {
    background: var(--main-color);
    color: white;
    transition: all 0.5s ease-out;
}

.layerShopCart .list.voucherGroup {
    padding: 10px;
    width: 100%;
    margin-top: 30px;
}

.layerShopCart .list.voucherGroup .item {
    display: flex;
    justify-content: space-between;
}

.layerShopCart .list.summary {
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    width: 100%;
    margin-top: 30px;
}

.layerShopCart .list.summary .item {
    overflow: hidden;
}

.layerShopCart .list.summary .item .line {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.layerShopCart .list.summary .item .label {
    float: left;
}

.layerShopCart .list.summary .item .value {
    float: right;
    min-width: 130px;
}

.layerShopCart .list.summary .item .value .left {
    float: left;
}

.layerShopCart .list.summary .item .value .right {
    float: right;
}

.layerShopCart .list.summary .voucher {
    padding: 3px 10px;
    background: var(--main-color);
    color: #FFF;
    font-weight: 700;
    margin: 6px -10px;
}

.layerShopCart .list.summary .total {
    border-top: 1px solid #333;
    padding-top: 5px;
    margin-top: 5px;
}

.layerShopCart .action {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.layerShopCart .action .check {
    text-align: right;
    font-size: 90%;
    margin: 20px 0;
}

.layerShopCart .action .check a {
    color: #333333;
    text-decoration: none;
}

.layerShopCart .action .left {
    float: left;
}

.layerShopCart .action .right {
    float: right;
}

.layerShopCart .action .button,
.layerShopCart .action .link {
    line-height: 20px;
    margin: 0;
    padding: 5px 10px;
    background: var(--main-color);
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.layerShopCart .action .button:hover,
.layerShopCart .action .link:hover {
    background: var(--main-lightgrey-color);
    transition: all 0.5s ease-out;
}

.layerShopCartAddress>.form {
    background-color: #eeeeee;
    padding: 10px;
    margin-bottom: 20px;
}

.layerShopCartAddress {
    width: 100%;
}

.layerShopCartAddressForm {
    margin-bottom: 20px;
    font-size: 90%;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
}

.layerShopCartAddressForm .address {
    width: 100%;
}

.layerShopCartAddressForm .address .containerAddress form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px;
}

.layerShopCartAddressForm .address .containerAddress .item {
    display: flex;
    width: 100%;
}

.layerShopCartAddressForm .address .containerAddress .item.billing {
    display: block;
    width: 100%;
}

.layerShopCartAddressForm .address .containerAddress .item.flex50 {
    width: 49%;
}

.layerShopCartAddressForm .address .containerAddress .item .label {
    width: 110px;
    float: none;
    min-width: 110px;
}

.layerShopCartAddressForm .containerAddress .item .value {
    padding: 0;
    width: 100%;
}

.containerAddress .formular {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.containerAddress .value {
    flex-wrap: nowrap;
    display: flex;
}

.containerAddress select {
    border-bottom: 1px solid #ccc;
    padding: 0 0 5px 0;
    min-width: 100px;
}

.containerAddress .input-inline {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    padding: 0 0 5px 0 !important;
    height: unset !important;
}

.containerAddress .input-inline.small.right {
    margin-right: 10px;
}

.containerAddress .input-inline.small.left {
    margin-left: 10px;
}

.containerAddress .input-inline.small {
    width: 70px !important;
}

.layerShopCartAddressForm .detailAddressLabel,
.layerShopCartAddressForm .label {
    width: 100px;
    float: left;
    margin-bottom: 5px;
}

.layerShopCartAddressForm .detailAddressValue,
.layerShopCartAddressForm .value {
    padding-left: 120px;
    margin-bottom: 5px;
}

.formTemplate form .item.billing {
    flex-wrap: wrap;
    margin-top: 1rem;
}

.detailAddressCheck {
    width: 100%;
    margin-bottom: 15px;
}

.detailAddressCheck input {
    margin-right: 1rem;
}

.layerShopCartAddressForm .value input,
.layerShopCartAddressForm .inputAddress,
.layerShopCartAddressForm .select,
.layerShopCartAddressForm .textarea,
.layerShopCartAddressForm .selectAddress {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    height: 40px;
    padding: 0 10px;
    background: none;
}

.layerShopCartAddressForm .input.zip {
    width: 20%!important;
}

.layerShopCartAddressForm .input.place {
    width: 78%;
    margin-left: 2%;
}

.layerShopCartAddressForm .input.street {
    width: 78%;
    margin-right: 2%;
}

.layerShopCartAddressForm .input.streetNumber {
    width: 20%;
}

.layerShopCartAddressForm .textarea {
    padding: 5px;
    min-height: 100px;
    resize: vertical;
}

.layerShopCartPayment .item {
    background-color: #f2f2f2;
    color: #000;
    padding: 10px;
    font-size: 90%;
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
}

.payment-cards {
    width: 100%;
    text-align: left;
    display: flex;
    margin: 3px 0 0 0;
    padding: 0;
}

.payment-cards img {
    margin-right: 3px;
}

.layerShopCartPayment .item .radio {
    float: left;
}

.layerShopCartPayment .item .label {
    padding-left: 25px;
}

.layerShopCartPayment .item .address {
    border-top: 1px dotted #999999;
    margin-top: 10px;
    padding-top: 10px;
}

.layerShopCartPayment .item .address a {
    color: inherit;
    text-decoration: none;
}

.layerShopCartPayment .item textarea {
    margin: 10px 0 0 25px;
    width: 95%;
    min-height: 100px;
    border: none;
    padding: 10px;
}

.layerShopCart .list.address {
    overflow: hidden;
}

.layerShopCart .list.address .left {
    margin-right: 5rem;
}

.layerShopCart .list.address {
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
}

.layerShopCart .payment {
    border-bottom: none;
    padding-bottom: 20px;
    width: 100%;
    margin-bottom: 2rem;
}

.layerShopCart .payment p {
    padding: 8px 0;
    line-height: 1.75rem;
}

.layerShopCart .payment .address,
.layerShopCart .list.payment .address {
    margin-top: 10px;
}

.layerShopCart .list.payment .address a {
    color: inherit;
    text-decoration: none;
}

.layerShopCart .success a {
    color: #FFFFFF;
    text-decoration: none;
}

.layerShopCart .success a:before {
    content: '\f1c1\00A0\00A0';
    font: var(--fa-font-light);
}

.cart-action-withdrawal {
    display: none;
}

.layerVoucher .list.voucher {
    width: unset;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    margin: 1.5rem -1%;
}

.layerVoucher .item.voucher {
    margin: 0.5rem 1%;
    width: 31.333%;
    background: #eee;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}

.layerVoucher .item.voucher .title {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0.5rem 0;
    color: var(--main-color);
}

.layerVoucher .item.voucher .content,
.layerVoucher .item.voucher .date,
.layerVoucher .item.voucher .code {
    display: flex;
    margin: 0.25rem 0;
    max-height: unset;
    justify-content: center;
    background: none;
}

.layerVoucher .item.voucher .content {
    font-size: 1.1rem;
}

.layerVoucher .item.voucher .content.value {
    font-size: 1.1rem;
}

.layerVoucher .item.voucher .label {
    width: 45px;
    text-align: left;
}

.layerVoucher .item.voucher .code .value {
    padding: 0.5rem 1rem;
    background: white;
    font-weight: 700;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.layerVoucher .item.voucher .code .value .button {
    border: none;
    padding: 5px 16px;
    background: green;
    color: white;
}

@media only screen and (max-width: 1200px) {
    .layerShopCart .layerCart.left {
        width: 100%;
    }
    .layerShopCart .layerCart.right {
        width: 100%;
        margin-top: 1.5rem;
    }
    .layerMemberAddressRegister.formTemplate form .item {
        flex-wrap: wrap;
    }
    .layerMemberAddressRegister.formTemplate form .item.customer {
        flex-wrap: nowrap;
    }
    .layerMemberAddressRegister.formTemplate form .label {
        width: 100%;
    }
    .layerMemberAddressRegister.formTemplate form .item.customer .label {
        width: unset;
    }
}

@media only screen and (max-width: 950px) {
    .layerCart.full .box-2-col-item {
        width: 100%;
    }
    .layerShopCartAddressForm .address.left,
    .layerShopCartAddressForm .address.right {
        width: 100%;
    }
}

@media only screen and (max-width: 600px) {
    .layerShopCartAddressForm .address .containerAddress .item.flex50 {
        width: 100%;
    }
    .layerShopCartAddressForm .address.left .containerAddress {
        columns: 1;
        column-gap: 0;
    }
    .layerShopCart .head {
        margin-bottom: 0;
        width: 100%;
    }
    .layerShopCart .head.set {
        margin-bottom: 0;
        width: 87%;
        min-height: unset;
        padding: 0;
    }
    .layerShopCart .list.cart .item.price {
        width: 100%;
    }
    .layerShopCart .list.cart .item .number {
        margin-bottom: 0.25rem;
    }
    .layerShopCart .list.cart .item .title {
        font-size: 1rem;
        font-family: var(--main-font);
        font-weight: 100;
        margin-bottom: 0.5rem;
    }
    .layerShopCart .list.cart .item .setlist .article .title {
        font-family: var(--main-font);
        font-size: 0.8rem;
        margin: 0;
    }
    .layerShopCart .list.cart .item .setlist .article .number {
        display: none;
    }
    .layerShopCart .form .voucher .input {
        box-sizing: border-box;
        height: 35px;
        border: 1px solid var(--main-lightgrey-color);
        background: none;
        color: #333333;
        border-radius: 3px 0 0 3px;
        padding: 0 5px;
        font-family: var(--main-font);
        min-width: 92%;
    }
    .layerShopCart .form .voucher form .label {
        margin-bottom: 0.25rem;
    }
    .layerVoucher .item.voucher {
        margin: 0.5rem 0;
        width: 100%;
        background: #eee;
        padding: 0.5rem 1rem;
        text-align: center;
        font-size: 0.9rem;
    }
    .layerShopCartAddressForm .address .containerAddress .item {
        width: 100%;
    }
    .layerShopCart .subtitle h2 {
        font-size: 1.2rem;
        font-weight: 300;
        margin-bottom: 0.5rem;
    }
    .layerShopCartNavigation {
        margin: 1rem 2.5% 0 2.5%;
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        align-content: stretch;
        justify-content: space-between;
    }
    .layerShopCart .layerMemberLogin {
        float: none;
        width: 100%;
        padding-bottom: 0.5rem;
        border-bottom: none;
        margin-bottom: 0;
    }
    .layerShopCart .layerMemberLogin.formTemplate form .action.password {
        justify-content: flex-end;
    }
}

@media only screen and (max-width: 430px) {
    .layerShopCartAddressForm .address .containerAddress .item .label {
        width: 90px !important;
        min-width: 90px;
    }
    .layerShopCartAddressForm .address .containerAddress .item .label,
    .layerShopCartAddressForm .address .containerAddress .item .value {
        width: 100%;
    }
}