.orderbox {
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 0 20px #00000036;
    overflow: hidden;
    margin-bottom: 100px;
    padding-bottom: 50px;
}

.orderbox__title {
    color: white;
    padding: 10px 30px;
    font-size: 28px;
}

.orderbox__content {
    padding: 10px;
}

.orderbox__datarow {
    padding: 10px;
    border-bottom: 1px solid #e2e2e2;
}

.orderbox__datarow-noborder {
    padding: 10px;
}

.orderbox__data-label {
    font-weight: bold;
}

.orderbox__datarow-title {
    font-size: 18px;
}

.orderbox__product-row {
    margin-top: 10px;
    border: 2px solid #117a8b;
    border-radius: 5px;
    padding: 20px;
}

@media only screen and (max-width: 767px) {
    .orderbox__product-row {
        margin: 5px;
    }
}

.orderbox__infobox {
    border-left: 5px solid green;
    padding: 10px 10px 10px 30px;
}

.orderbox__confirm-wrapper {
    padding: 40px 20px;
    background-color: #f9f9f9;
    flex-direction: row-reverse;
}

.orderbox__cancel-box,
.orderbox__accept-box {
    display: flex;
    align-items: center;
    justify-content: center;
}

.orderbox__cancel-box {
    font-weight: bold;
    font-size: 12px;
}

.orderbox__data-quantity {
    font-weight: bold;
    text-align: center;
}

.orderbox__data-price {
    font-weight: bold;
    text-align: right;
}

.orderbox__summary-box {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid gray;
}

.orderbox__summary-row {
    padding: 20px;
    font-size: 16px;
}
.success-panel {
    margin-top: 150px;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #49bd49;
}

.success-info {
    font-size: 12px;
}

.success-info span {
    font-weight: bold;
}

@media only screen and (max-width: 767px) {
    .success-panel {
        margin-top: 50px;
        padding: 10px;
    }

    .success-panel h1 {
        font-size: 28px;
    }
}

.orderbox__button-wrapper {
    padding: 20px 0;
}

.orderbox__button-submit {
    float: right;
}

.orderbox__check-element {
    margin-right: 10px;
}

.orderbox__couponrow {
    background-color: #ddffe4;
}

.orderbox__data-required-mark {
    color: red;
    font-size: 12px;
    top: -0.3em;
}

.orderbox__data-infotext {
    font-size: 12px;
}

.orderbox__paying-option {
    display: block;
    padding: 10px 20px;
    border: 2px solid cornflowerblue;
    background-color: white;
    font-weight: bold;
}

.orderbox__payment-type-wrapper {
    display: inline-block;
    float: right;
}

.orderbox__payment-type {
    display: inline-block;
    margin: 0 .4em;
    width: 30px;
    height: 20px;
    border-radius: 4px;
}

.mastercard {
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20339%22%3E%3Cpath%20fill%3D%22%23003473%22%20d%3D%22M0-.1h500v339.3H0z%22%2F%3E%3Ccircle%20fill%3D%22%23D32020%22%20cx%3D%22174.7%22%20cy%3D%22169.5%22%20r%3D%22112.2%22%2F%3E%3Cpath%20fill%3D%22%23FD9B00%22%20d%3D%22M325.4%2057.2c-29%200-55.5%2011-75.4%2029.1-4.1%203.7-7.9%207.6-11.3%2011.8h22.7c3.1%203.8%205.9%207.7%208.5%2011.9h-39.8c-2.4%203.8-4.5%207.8-6.5%2011.9h52.7c1.8%203.9%203.4%207.8%204.8%2011.8h-62.2c-1.3%203.9-2.4%207.9-3.2%2011.8h68.7c1.7%207.6%202.5%2015.6%202.5%2023.8%200%2012.5-2%2024.5-5.8%2035.7h-62.2c1.4%204.1%203%208.1%204.8%2011.9h52.7c-1.9%204.1-4.1%208.1-6.5%2011.9h-39.8c2.6%204.1%205.4%208.1%208.5%2011.8h22.7c-3.5%204.2-7.3%208.2-11.4%2011.9%2019.9%2018%2046.4%2029.1%2075.4%2029.1%2062%200%20112.2-50.2%20112.2-112.2.1-61.9-50.1-112.2-112.1-112.2z%22%2F%3E%3Cg%20fill%3D%22%23FFF%22%3E%3Cpath%20d%3D%22M122%20199.1h-12.2l7-43.9-15.6%2043.9h-8.3l-1.1-43.6-7.3%2043.6H73.1l9.6-57h17.5l.5%2035.3%2011.8-35.3h19M152%20178.4c-1.3-.1-1.9-.2-2.7-.2-6.9%200-10.4%202.3-10.4%207%200%202.9%201.7%204.8%204.3%204.8%205%200%208.6-4.7%208.8-11.6zm8.9%2020.7h-10.1l.2-4.8c-3.1%203.8-7.2%205.6-12.7%205.6-6.6%200-11.2-5.2-11.2-12.7%200-11.3%207.9-17.8%2021.4-17.8%201.4%200%203.2.1%205%20.3.3-1.5.5-2.2.5-3%200-3-2.1-4.2-7.8-4.2-6-.1-10.9%201.4-12.9%202.1.1-.8%201.7-10.4%201.7-10.4%206.1-1.8%2010.1-2.5%2014.6-2.5%2010.5%200%2016%204.7%2016%2013.6%200%202.4-.3%205.3-1%209.2-1.2%206.6-3.5%2021-3.7%2024.6zM324.3%20143.6l-2%2012.3c-4.3-2.2-7.5-3.1-10.9-3.1-9.1%200-15.5%208.8-15.5%2021.4%200%208.6%204.3%2013.8%2011.4%2013.8%203%200%206.3-.9%2010.3-2.9l-2.1%2013c-4.5%201.2-7.4%201.7-10.7%201.7-13.1%200-21.3-9.4-21.3-24.6%200-20.3%2011.3-34.6%2027.4-34.6%205.3.1%2011.6%202.3%2013.4%203zM344%20178.4c-1.2-.1-1.9-.2-2.7-.2-6.9%200-10.4%202.3-10.4%207%200%202.9%201.7%204.8%204.3%204.8%205%200%208.5-4.7%208.8-11.6zm8.8%2020.7h-10.1l.2-4.8c-3.1%203.8-7.2%205.6-12.7%205.6-6.6%200-11.2-5.2-11.2-12.7%200-11.3%207.9-17.8%2021.4-17.8%201.4%200%203.2.1%205%20.3.3-1.5.5-2.2.5-3%200-3-2.1-4.2-7.8-4.2-5.9-.1-10.9%201.4-12.9%202.1.1-.8%201.7-10.4%201.7-10.4%206.1-1.8%2010.1-2.5%2014.6-2.5%2010.5%200%2016%204.7%2016%2013.6%200%202.4-.3%205.3-1%209.2-1.1%206.6-3.4%2021-3.7%2024.6zM215%20198.3c-3.3%201-5.9%201.5-8.7%201.5-6.2%200-9.6-3.6-9.6-10.2-.1-2.1.9-7.4%201.7-12.3.7-4.3%205.3-31.6%205.3-31.6h12.1l-1.4%207h6.2l-1.7%2011.2h-6.3c-1.4%208.8-3.4%2019.8-3.4%2021.2%200%202.4%201.3%203.4%204.2%203.4%201.4%200%202.5-.1%203.3-.4l-1.7%2010.2z%22%2F%3E%3Cpath%20d%3D%22M252.1%20197.9c-9.3%202.9-18.2%202.1-29.2-.3-9.9-24.4.8-46%2017.4-46%2010%200%2016.4%206.5%2016.4%2016.7%200%203.4-.4%206.7-1.5%2011.4h-24.1c-.8%206.8%203.5%209.5%2010.5%209.5%204.3%200%208.3-.9%2012.6-2.9l-2.1%2011.6zm-6.8-27.4c.1-1%201.3-8.3-5.6-8.3-3.9%200-6.6%203-7.7%208.3h13.3zM168.2%20167.4c0%205.9%202.8%209.9%209.3%2013%205%202.3%205.7%203%205.7%205.1%200%202.9-2.2%204.2-7%204.2-3.7%200-7-.6-11-1.8%200%200-1.6%2010.2-1.7%2010.7%202.8.6%205.2%201.2%2012.7%201.4%2012.9%200%2018.8-4.9%2018.8-15.5%200-6.3-2.5-10.1-8.6-12.9-5.1-2.3-5.7-2.9-5.7-5%200-2.5%202-3.8%206-3.8%202.4%200%205.6.3%208.7.7l1.7-10.7c-3.2-.5-7.9-.9-10.7-.9-13.5-.2-18.3%206.9-18.2%2015.5zM417.3%20199.1h-11.5l.6-4.3c-3.4%203.6-6.8%205.1-11.2%205.1-8.9%200-14.7-7.6-14.7-19.2%200-15.4%209.1-28.4%2019.8-28.4%204.8%200%208.3%201.9%2011.6%206.3l2.7-16.5h12.1l-9.4%2057zm-18-10.8c5.6%200%209.6-6.4%209.6-15.6%200-5.9-2.3-9.1-6.5-9.1-5.5%200-9.4%206.5-9.4%2015.6.1%206.1%202.2%209.1%206.3%209.1zM363.8%20152.8c-1.5%2014.3-4.2%2028.9-6.3%2043.2l-.6%203.1h12.2c4.3-28.3%205.4-33.8%2012.3-33.1%201.1-5.8%203.1-10.9%204.6-13.4-5.1-1-7.9%201.8-11.7%207.3.3-2.3.8-4.7.8-7l-11.3-.1zM263.5%20152.8c-1.5%2014.3-4.3%2028.9-6.3%2043.2l-.6%203.1h12.2c4.3-28.3%205.4-33.8%2012.3-33.1%201.1-5.8%203.1-10.9%204.6-13.4-5.1-1-7.9%201.8-11.7%207.3.3-2.3.8-4.7.8-7l-11.3-.1z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E) no-repeat;
}

.visa {
    background: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20339%22%3E%3Cpath%20fill%3D%22%23FFF%22%20d%3D%22M0%2062.5h500v214H0z%22%2F%3E%3Cpath%20fill%3D%22%23004D90%22%20d%3D%22M200.2%20108l-51.7%20123.3h-33.8l-25.4-98.4c-1.4-6-2.9-8.4-7.7-10.8-7.7-4.1-20.4-8.1-31.4-10.5l.8-3.6h54.4c6.9%200%2013.2%204.5%2014.6%2012.5l13.4%2071.6%2033-83.8h33.8v-.3zm131.9%2083.1c.2-32.6-45-34.2-44.5-48.9%200-4.3%204.3-9.1%2013.4-10.3%204.5-.5%2017.2-1%2031.4%205.5l5.5-26.1c-7.7-2.9-17.5-5.5-29.9-5.5-31.6%200-53.6%2016.8-53.9%2040.7-.2%2017.7%2015.8%2027.5%2027.8%2033.5%2012.5%206%2016.5%209.8%2016.5%2015.3%200%208.4-9.8%2012-19.2%2012-16%20.2-25.4-4.3-32.8-7.9l-5.7%2027.1c7.4%203.4%2021.3%206.5%2035.4%206.5%2034%20.2%2056-16.3%2056-41.9m83.4%2040.2H445L419.1%20108h-27.3c-6.2%200-11.3%203.6-13.6%209.1l-47.9%20114.2h33.5l6.7-18.4h40.9l4.1%2018.4zm-35.7-43.6l16.8-46.2%209.6%2046.2h-26.4zM245.7%20108l-26.3%20123.3h-31.8L213.8%20108h31.9zM0-.1h500v62.6H0z%22%2F%3E%3Cpath%20fill%3D%22%23FEA508%22%20d%3D%22M0%20276.5h500v62.6H0z%22%2F%3E%3C%2Fsvg%3E) no-repeat;
}

.orderbox__steps {
    #border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 12px 20px;
}

@media only screen and (max-width: 767px) {
    .orderbox__steps {
        padding: 12px 10px;
    }
}

@media only screen and (max-width: 376px) {
    .orderbox__steps {
        padding: 12px 0px;
    }
}

.orderbox__status-element {
    padding-left: 0px;
    position: relative;
    width: 25%;
}

.orderbox__status-element.current a {
    color: #222;
}

.orderbox__status-element a {
    color: #999;
    text-decoration: none;
    font-weight: bold;
}

.orderbox__status-element:after {
    position: absolute;
    width: 1px;
    height: 80%;
    content: "";
    background: #ebebeb;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.orderbox__status-element:last-child:after {
    width: 0px;
}

.orderbox__status-element .title {
    align-items: center;
    text-align: center;
    font-size: 12px;
}
@media only screen and (max-width: 767px) {
    .orderbox__status-element .title {
        font-size:  10px;
    }
}

.orderbox__status-element .number {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    border: 2px solid #999;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    margin-bottom: 5px;
    padding-bottom: 2px;
}

.orderbox__status-element .title_text {
    text-align: center;
}

.orderbox__status-element.current .number {
    border: 2px solid #222;
}

.orderbox__step-list {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.orderbox__textarea {
    display: block;
    width: 100%;
}

.orderbox__coupon-row {
    background-color: #c8ffc8;
    color: #840000;
}

.orderbox__terms-box {
    border: 2px solid transparent;
    box-sizing: border-box;
    padding: 10px;
}

.terms-invalid .orderbox__terms-box {
    border: 2px dashed #e00000;
    border-radius: 5px;
    padding: 10px;
}