@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap');


.test, .order-info, .order-data{
    display: flex;
}

.test{
    flex-flow: wrap;
    align-items: flex-start;
    margin-bottom: 50px;
}

.order-data{
    width: 57.266%;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-right: -3.45001px;
    padding: 35px 0 45px 0;
    flex-direction: column;
}

.contact-data{
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 100px;
}

.data-title{
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    color: #555555;
}

.choice-person-type{
    display: flex;
    flex-direction: row;
    margin-top: 36px;
    margin-bottom: 31px;
}

.choice-person-type > li > label > span{
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    color: #555555;
}

.radio-second{
    margin-left: 39px;
}

.contact-data > .form-group > input{
    height: 50px;
    width: 100%;
    background-color: #F9F9F9;
    border: 1px solid #E4E4E4;
    margin-bottom: 20px;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: #555555;
    padding: 17px 20px 16px 20px;
    border-radius: 5px;
}

.sity-point{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sity-choice{
    width: 279px;
    height: 50px;
}



.sity-choice > .multiselect > .multiselect__tags{
    background-color: #F9F9F9;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: #555555;
}

.sity-choice > .multiselect > .multiselect__tags > .multiselect__single,
.sity-choice > .multiselect > .multiselect__tags > input{
    background-color: #F9F9F9;
}

.sity-choice > .multiselect > .multiselect__content-wrapper > .multiselect__content> .multiselect__element > .multiselect__option{
    border: none;
    background: none;
    font-size: 14px;
    padding: 11px 20px;
    min-height: 0;
    line-height: 14px;
}

.sity-choice > .multiselect > .multiselect__content-wrapper > .multiselect__content> .multiselect__element > .multiselect__option--highlight,
.sity-choice > .multiselect > .multiselect__content-wrapper > .multiselect__content> .multiselect__element > .multiselect__option--selected{
    background: #ffffff;
    color: #EE4036;

}


.sity-choice > .multiselect--active > .multiselect__tags,
.sity-choice > .multiselect--active > .multiselect__tags > input{
    background-color: #ffffff;
}

.sity-choice > .multiselect--active{
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.sity-choice > .multiselect--active > .multiselect__content-wrapper{
    box-shadow: 0 9px 15px rgba(0, 0, 0, 0.1);
}


.sity-point-title{
    font-weight: 500;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    color: #555555;
    flex-grow: 1;
}

.sity-famous > ul{
    display: flex;
    margin-top: 6px;
}

.sity-famous > ul > li{
    margin-right: 19px;
}

.choice-delivery{
    width: 100%;
    margin-top: 30px;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #e1e1e1;
    padding: 31px 100px 30px 100px;
    display: flex;
    flex-direction: column;
}

.choice-delivery-title{
    font-weight: 500;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    color: #555555;
}

.choice-delivery > ul{
    margin-top: 30px;
}

.choice-delivery > ul > li{
    font-weight: 400;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    color: #555555;
}

.radio-delivery{
    margin-left: 26px;
}

.delivery-companies{
    margin-top: 30px;
}

.delivery-companies > ul{
    display: flex;
    flex-flow: row wrap;
}

.delivery-companies > ul > li{
    margin-right: 8px;
}

.delivery-companies > ul > li:last-child{
    margin-right: 0;
}

.company > .radio-company{
    height: 93px;
    width: 151px;
    border: 1px solid #EBEBEB;
    border-radius: 10px;
}

.company > input[type="radio"] {
    display: none;
}

.company > input[type="radio"]:checked + .radio-company {
    border: 2px solid #0036D9;
    box-shadow: 0 0 10px rgba(0,54,217, 0.5);
}

.radio-company:hover{
    border: 2px solid #0036D9;
    transition: 0.1s;
}

.radio-company .selected{
    border: 2px solid #0036D9;
    box-shadow: 0 0 10px rgba(0,54,217, 0.5);
}

.radio-company{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.radio-company > img{
    margin-bottom: 11px;
}

.name-company{
    margin-bottom: 6px;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #555555;
}

.amount-delivery{
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #555555;
    margin-bottom: 9px;
}

.select-address{
    width: 100%;
    margin-top: 26px;
}

.select-address > .multiselect > .multiselect__tags{
    background-color: #F9F9F9;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    color: #555555;
}

.select-address > .multiselect > .multiselect__tags > .multiselect__single,
.select-address > .multiselect > .multiselect__tags > input{
    background-color: #F9F9F9;

}

.choice-payment{
    padding: 30px 100px 0 100px;
}

.choice-payment-title{
    font-weight: 500;
    font-size: 16px;
    font-family: 'Rubik', sans-serif;
    color: #555555;
}

.choice-payment > ul{
    margin-top: 20px;
}

.choice-payment > ul > li {
    display: flex;
    flex-direction: column;
    margin-bottom: 19px;
}

.choice-payment > ul > li:last-child{
    margin-bottom: 0;
}


.order-info{
    width: 40.172%;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    margin-left: 2.565%;
    flex-direction: column;
}

.order-info-title{
    padding: 0 16px;
    width: 100%;
    height: 82px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.order-info-title-left{
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    font-weight: 500;
    flex-grow: 1;
}

.order-info-title-right{
}

.order-items{
    width: 100%;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
}

.order-items > ul > li{
    border-bottom: 1px dashed #CFCFCF;
    margin: 0 16px;
}

.order-items > ul > li:last-child{
    border-bottom: none;
}

.order-item{
    padding: 21px 0 37px 0;
    display: flex;
    flex-direction: row;
}

.order-item-left{
    width: 70px;
    height: 70px;
}

.order-item-center{
    margin-left: 20px;
}

.order-item-name{
    font-weight: 500;
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    color: #0036D9;
}

.order-item-desc{
    font-weight: 400;
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    color: #8E8E8E;
    margin-top: 10px;
}

.order-item-count{
    font-weight: 400;
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    color: #555555;
    margin-top: 16px;
}

.order-item-right{
    flex-grow: 1;
    text-align: right;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Rubik', sans-serif;
    color: #555555;
}

.order-check{
    padding: 33px 0 47px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.check-details{
    display: flex;
    flex-direction: row;
}

.check-details-title{
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #555555;
    line-height: 24px;
}

.check-details-amount{
    margin-left: 82px;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #555555;
    line-height: 24px;
}

.check-sum{
    display: flex;
    flex-direction: row;
    margin-top: 24px;
}

.check-sum-title{
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    color: #555555;
}

.check-sum-value{
    margin-left: 19px;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    color: #EE4036;
}

.check-btn{
    margin-top: 35px !important;
}

.check-agreement{
    margin-top: 31px;
    font-weight: 400;
    font-family: 'Rubik', sans-serif;
    font-size: 12px;
    color: #555555;
    line-height: 24px;
    text-align: center;

}

.check-agreement > a{
    color: #0036D9
}


@media (max-width: 767px) {

    .test{
        flex-direction: column;
    }

    .order-data{
        width: 100%;
        padding: 0;
    }

    .order-info{
        width: 100%;
        margin-left: 0;
        margin-top: 48px;
    }

    .test{
        padding: 0 19px !important;

    }

    .contact-data{
        padding: 23px 16px 32px 16px;
    }

    .choice-delivery{
        padding: 31px 16px 30px 16px;
        margin-top: 0;
    }

    .choice-payment{
        padding: 31px 16px 34px 16px;

    }

    .radio-delivery{
        margin-left: 0;
        margin-top: 20px;
    }

    .sity-point{
        flex-direction: column;
        align-items: flex-start;
    }

    .sity-choice{
        margin-top: 20px;
        width: 100%;
    }

    .choice-person-type{
        flex-direction: column;
    }

    .radio-second{
        margin-left: 0;
        margin-top: 20px;
    }

    .choice-delivery > ul{
        display: flex;
        flex-direction: column;
    }
}

@media (min-width: 768px) and (max-width: 780px){

    .sity-point{
        flex-direction: column;
        align-items: flex-start;
    }

    .sity-choice{
        margin-top: 20px;
    }

    .choice-person-type{
        flex-direction: column;
    }

    .radio-second{
        margin-left: 0;
        margin-top: 20px;
    }

    .choice-delivery > ul{
        display: flex;
        flex-direction: column;
    }

    .radio-delivery{
        margin-left: 0;
        margin-top: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1000px){

    .order-data{
        width: 48.7%;
    }

    .contact-data{
        padding: 23px 16px 32px 16px;
    }

    .choice-delivery{
        padding: 31px 16px 30px 16px;
    }

    .choice-payment{
        padding: 31px 16px 34px 16px;

    }

    .company .radio-company{
        width: 143.15px;
    }

    .order-info{
        width: 48.7%;
    }

}

@media (max-width: 1280px) {

    .delivery-companies > ul > li:last-child{
        margin-top: 8px;
    }

    .radio-delivery{
        margin-left: 0;
        margin-top: 20px;
    }

}

@media (min-width: 539px) and (max-width: 767px) {
    .delivery-companies > ul > li:last-child{
        margin-top: 0;
    }
}

.radio {
    display: block;
    cursor: pointer;
}
.radio input {
    display: none;
}
.radio input + span {
    line-height: 20px;
    height: 20px;
    padding-left: 20px;
    display: block;
    position: relative;
    font-size: 16px;
}
.radio input + span:not(:empty) {
    padding-left: 30px;
}
.radio input + span:before, .radio input + span:after {
    content: '';
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    left: 0;
    top: 0;
    position: absolute;
}
.radio input + span:before {
    background: #B9B9B9;
    -webkit-transition: background 0.2s ease, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
    transition: background 0.2s ease, -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
    transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
    transition: background 0.2s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2);
}
.radio input + span:after {
    background: #fff;
    -webkit-transform: scale(0.68);
    transform: scale(0.68);
    -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
    transition: -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4), -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
.radio input:checked + span:before {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
    background: #EE4036;
}
.radio input:checked + span:after {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
}
.radio:hover input + span:before {
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}
.radio:hover input + span:after {
    -webkit-transform: scale(0.74);
    transform: scale(0.74);
}
.radio:hover input:checked + span:after {
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
}