.c-order {
    flex: 0 0 55%;
    max-width: 55%;
    padding: 3rem;
    background-color: var(--main-background-color);
    border-radius: 10px;
    margin-right: 1rem;
}

.order-page {
    width: 100%;
    height: 100%;
}

.order-page__container {
    display: flex;
    margin: 4rem 0;
}

.order-page__container .title-section {
    display: none;
}

.c-order__radiobutton label {
    margin-bottom: 10px;
}

.c-order__checkbox label {
    margin-bottom: 10px;
}

.order-block {
    display: none
}

.order-page__container .container {
    margin: 0;
    padding: 0;
    max-width: none;
}

.order-block--current {
    display: block;
    -webkit-animation: showBlock .5s;
    animation: showBlock .5s
}

.payment-values__pay-info,
.payment-values__delivery-info,
.payment-values__info {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    margin-bottom: 10px;
}

.payment-values__pay-info,
.payment-values__pay,
.payment-values__info,
.payment-values__name,
.payment-values__email,
.payment-values__phone,
.payment-values__delivery-info,
.payment-values__delivery {
    display: none;
}

.payment-values__pay-info._active,
.payment-values__pay._active,
.payment-values__info._active,
.payment-values__name._active,
.payment-values__email._active,
.payment-values__phone._active,
.payment-values__delivery-info._active,
.payment-values__delivery._active {
    display: block;
}

.payment-values__info-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--main-text-color);
    margin-bottom: 1rem;
}

.payment-values__pay,
.payment-values__delivery,
.payment-values__name,
.payment-values__email,
.payment-values__phone {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--third-text-color);
    margin-bottom: 0.5rem;
}


@-webkit-keyframes showBlock {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes showBlock {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.order-slogan {
    color: #333;
    font-size: 28px
}

@media (max-width:1200px) {
    .order-slogan {
        position: absolute;
        top: 15px;
        left: 25px
    }
}



.order-tabs {
    display: flex;
    padding: 20px 0;
    flex-wrap: wrap;
}


.order-tabs__item {
    display: flex
}

.order-tabs__text {
    font-size: 1.2rem;
    color: var(--third-text-color)
}

.order-tabs__text--current {
    color: var(--main-text-color);
    font-weight: 500
}

.order-tabs__icon {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0.8rem;
}

.order-tabs__icon svg {
    color: var(--third-text-color);
    width: 1.0rem;
    height: 1.0rem;
}

.order-arrow {
    width: 15px;
    height: 15px;
    fill: #737373
}

.c-order__title {
    color: var(--main-text-color);
    font-size: 2rem;
    margin-bottom: 2rem;
    line-height: 1.2
}

.delivery-details-list label {
    display: flex;
    padding-bottom: 20px;
    color: #545454;
    position: relative
}

.order-page .order-block label {
    position: relative
}

.c-form label [type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0
}

.c-form label:before {
    display: block;
    min-width: 15px;
    max-width: 15px;
    min-height: 15px;
    max-height: 15px;
    margin-right: 15px;
    content: '';
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: #fff;
}

.c-form label.active::before {
    content: '\F012C';
}

.agreement__label [type=checkbox] {
    position: absolute;
    top: 15px;
    left: 0;
    height: 100% !important;
    opacity: 0
}

.order-agreement .agreement__label span {
    padding-left: 40px
}

.order-agreement .agreement__label span::before {
    display: block;
    min-width: 15px;
    max-width: 15px;
    min-height: 15px;
    max-height: 15px;
    margin-right: 15px;
    content: '';
    font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 14px;
    border: 1px solid var(--border-color);
    background: #fff;
    position: absolute;
    left: 0
}

.agreement__label [type=checkbox]:checked+span::before {
    content: '\F012C';
}

.active [type=radio]+span::before {
    background: #000
}

.order-agreement .agreement__label::before {
    display: none
}

.c-order__checkbox [type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100% !important;
    opacity: 0
}

.c-order__title--small {
    color: #545454;
    font-size: 14px;
    margin-bottom: 20px
}

.order-steps-btns {
    display: flex;
    flex-wrap: wrap;
}

.order-steps-btns .default-btn {
    height: 4rem;
}

.order-step-btn {
    margin: 5px;
    padding: 10px 15px;
    border-radius: 20px;
    background-color: var(--secondary-background-color);
    color: var(--secondary-text-color);
    transition: all 0.4s ease-in-out;
    font-size: 15px;
}

.order-step-btn:hover {
    color: var(--main-text-color);
    background-color: var(--accent-color);
}

.hasDatepicker {
    -webkit-appearance: none;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    padding: 13px 11px;
    border-radius: 5px;
    margin-bottom: 20px
}

.delivery-price-block {
    margin-left: 32px;
}

.order__title {
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--main-text-color);
}

.ui-datepicker {
    width: auto !important
}

.ui-datepicker-header {
    color: var(--main-text-color) !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    line-height: 30px !important;
    background-color: var(--main-background-color) !important;
    border: none !important
}

.c-order__list--item input,
.c-order__list--width textarea {
    color: #333;
    border: 1px solid #d9d9d9;
    width: 100%;
    border-radius: 5px;
    padding: 13px 11px;
    -webkit-appearance: none;
    margin-bottom: 15px;
    box-sizing: border-box
}

.c-order__list--item select {
    margin-bottom: 15px
}

.c-order-field__title {
    color: var(--third-text-color);
    font-size: 1.4rem;
    margin-bottom: 2rem;
    font-weight: 400;
}

.c-order__payment label,
.c-order__payment li {
    display: flex;
    align-items: center
}

.c-order__payment {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.c-order__payment li {
    margin-bottom: 20px;
    min-height: 20px;
    width: 100%;
}

.c-order__payment span {
    top: 0 !important
}

.order-agreement {
    margin-bottom: 20px
}

.total-price-block .checkout-btn {

    cursor: pointer;

}


.c-order .c-form .delivery-date .order-empty,
.c-order .c-form .c-order__payment .order-empty,
.c-order .c-form .c-order__list .order-empty {
    -webkit-animation: orderBounce 1s ease;
    animation: orderBounce 1s ease;
    border-color: red;
}

@-webkit-keyframes orderBounce {
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    60% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes orderBounce {
    30% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px)
    }

    60% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.email-error {
    display: none
}

.email-error--open {
    display: block
}

@media (max-width: 1200px) {
    .order-page__container {
        flex-direction: column;
        padding: 0;
        justify-content: flex-end;
    }

    .c-order {
        padding: 3rem;
        width: 100%;
        max-width: none;
        margin: 0 0 1rem;
    }
}