.transportation-data__wrapper {
    display: grid;
    grid-template-columns: 1fr;
}


.select2-container .select2-selection--single {
    height: 39px;
}

.select2-selection *, .select2-results__option {
    font-weight: 400;
    font-size: 12px;
    line-height: 15px !important;
    color: var(--black) !important;
}

    .ui-datepicker {
        display: none;
        padding: 8px;
        border: 1px solid #DEE4F0;
        border-radius: 16px;
        background: #FFFFFF;
        z-index: 2 !important;
        width: 400px !important;
    }

    .ui-datepicker .ui-widget-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: transparent;
        color: #3e3f42;
        border: none;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }

    .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon {
        display: block;
        flex: 0 0 30px;
        height: 30px;
        font-size: 0;
        cursor: pointer;
    }

    .ui-datepicker-prev {
        order: 1;
    }

    .ui-datepicker-title {
        order: 2;
        padding-left: 10px;
    }

    .ui-datepicker .ui-datepicker-calendar th {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #6d6d77;
        padding: 6px 8.5px;
    }

    .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-prev .ui-icon, .ui-datepicker-next .ui-icon {
        display: block;
        flex: 0 0 30px;
        height: 30px;
        font-size: 0;
        cursor: pointer;
    }

    .ui-widget-header .ui-icon {
        background: url("../images/arrow-right.svg") center no-repeat;
        background-size: 14px 17px;
        width: 30px;
        height: 30px;
        position: static !important;
        margin: 0 !important;
    }

    .ui-helper-clearfix:before, .ui-helper-clearfix:after {
        display: none;
    }

    .ui-datepicker .ui-datepicker-title {
        margin: 0;
    }

    .ui-datepicker .ui-datepicker-next {
        position: static;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        order: 3;
        background: transparent !important;
        color: transparent !important;
        border: none !important;
    }

    .ui-datepicker .ui-datepicker-prev {
        position: static;
        transform: rotate(180deg);
        position: static;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        color: transparent !important;
        border: none !important;
    }

    a.ui-state-default.ui-state-hover, .ui-datepicker .ui-state-active {
        background: var(--blue);
        border-radius: 6px;
        color: #FFFFFF;
    }

    .ui-datepicker-next.ui-state-disabled, .ui-datepicker-prev.ui-state-disabled {
        display: none;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        display: block;
        margin: 0 auto;
        border: none;
        background: transparent;
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        padding: 4px 13px;
        color: #3e3f42;
    }

    a.ui-state-default.ui-state-hover, .ui-datepicker .ui-state-active {
        background: var(--blue);
        border-radius: 6px;
        color: #FFFFFF;
    }

    .button-submit-wrapper {
        position: relative;
    }

    .button-submit-inner-wrapper {
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    .button-submit-inner-wrapper.disabled-name,
    .button-submit-inner-wrapper.disabled-phone,
    .button-submit-inner-wrapper.disabled-approval {
        z-index: 3;
    }

    .invalid {
        border: 1px solid #FF2E00 !important;
    }

    .custom-checkbox.invalid {
        border: 3px solid #DEE4F0 !important;
        outline: 1px solid #FF2E00 !important;
    }

    .top-form .label-custom-placeholder,
    .top-form .label-custom-placeholder input {
        pointer-events: none;
        cursor: not-allowed;
        background-color: #F9F9F9;
        border-color: #DEE4F0;
    }

    .top-form__container .select2 {
        pointer-events: none;
        cursor: not-allowed;
    }

    .top-form__container .select2-container .select2-selection--single {
        background-color: #F9F9F9 !important;
        border-color: #DEE4F0 !important;
    }

    .transportation-data {
        width: 100%;
        max-width: 1220px;
        margin: 0 auto;
        padding: 29px 20px 0 20px;
        padding-bottom: 100px;
    }


    .transportation-data h1 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 25px;
    }

    .type-delivery {
        padding: 30px 18px;
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 21px;
        margin-bottom: 20px;
    }

    .type-delivery h2 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        color: #4C73E3;
        margin-bottom: 16px;
    }

    .type-delivery__description p {
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        color: #181C19;
    }

    .type-delivery__description p:not(:last-of-type) {
        margin-bottom: 13px;
    }

    .contacts {
        display: grid;
        grid-template-columns: 1fr;
        margin-bottom: 20px;
    }

    .contacts__sender,
    .contacts__recipient {
        padding: 20px 18px;
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 21px;
    }

    .contacts__sender {
        margin-bottom: 20px;
    }

    .contacts__sender fieldset,
    .contacts__recipient fieldset {
        display: flex;
        flex-direction: column;
    }

    .fieldset-name {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    .contacts__sender fieldset label,
    .contacts__recipient fieldset label {
        position: relative;
    }

    .contacts__sender fieldset label:not(:last-of-type),
    .contacts__recipient fieldset label:not(:last-of-type) {
        margin-bottom: 8px;
    }

    .contacts__sender fieldset label input,
    .contacts__recipient fieldset label input {
        width: 100%;
        height: 52px;
        padding: 20px 16px 6px;
        border: 1px solid #DEE4F0;
        border-radius: 16px;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #181C19;
    }

    .contacts__sender fieldset label .inner-custom-placeholder,
    .contacts__recipient fieldset label .inner-custom-placeholder {
        font-weight: 400;
        font-size: 14px;
        line-height: 15px;
        color: #6D6D77;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 16px;
        pointer-events: none;
    }

    .contacts__sender fieldset label .inner-custom-placeholder.inner-custom-placeholder--top,
    .contacts__recipient fieldset label .inner-custom-placeholder.inner-custom-placeholder--top {
        font-size: 12px;
        transform: translateY(calc(-100% - 5px));
    }

    .cargo-parameters {
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 21px;
        padding: 21px 18px;
        margin-bottom: 20px;
    }

    .cargo-parameters__top-wrapper {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .cargo-parameters__top-wrapper h2 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;  
        color: #181C19;
    }

    .cargo-parameters__top-wrapper button {
        background-color: transparent;
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        color: #4C73E3;
    }

    .review__list li:not(:last-of-type) {
        margin-bottom: 15px;
    }

    .cargo-parameters__parameters {
        display: flex;
        align-items: center;
    }

    .cargo-parameters__parameters p:not(:last-of-type) {
        margin-right: 20px;
    }

    .review {
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 21px;
        padding: 25px 20px;
        margin-bottom: 15px;
    }

    .review h2 {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 18px;
    }

    .review__list {
        display: grid;
        grid-template-columns: 1fr;
        column-gap: 15px;
        margin-bottom: 18px;
    }

    .review__list li {
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 20.9289px;
        flex: 0 0 33.33%;
        padding: 20px 16px;
    }

    .review__list li .review__name {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 5px;
        display: inline-block;
        margin-right: 15px;
    }

    .review__list li .review__date {
        font-weight: 400;
        font-size: 14px;
        line-height: 120%;
        color: #6C6C6C;
        white-space: nowrap;
        display: inline-block;
        margin-bottom: 5px;
    }

    .review__list li .review__stars {
        width: 128px;
        height: 24px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 128px 24px;
        display: block;
        margin-bottom: 5px;
    }

    .review__text {
        font-weight: 400;
        font-size: 14px;
        line-height: 120%;
        color: #222222;
    }

    .review__list li .review__stars.star-1 {
        background-image: url("../images/star-1.svg");
    }

    .review__list li .review__stars.star-2 {
        background-image: url("../images/star-2.svg");
    }

    .review__list li .review__stars.star-3 {
        background-image: url("../images/star-3.svg");
    }

    .review__list li .review__stars.star-4 {
        background-image: url("../images/star-4.svg");
    }

    .review__list li .review__stars.star-5 {
        background-image: url("../images/star-5.svg");
    }

    .review a {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #181C19;
        text-decoration-line: underline;
    }

    .transportation-data__total-wrapper {
        padding: 20px;
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 20px;
        align-self: start;
    }

    .transportation-data__total-wrapper h2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 6px;
    }

    .transportation-data__total-wrapper ul {
        margin-bottom: 20px;
    }

    .transportation-data__total-wrapper ul li {
        font-weight: 700;
        font-size: 14px;
        line-height: 18px;
    }

    .transportation-data__total-wrapper ul li ul li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
        margin: 5px 0;
    }

    .transportation-data__total-wrapper ul li ul li span:nth-child(2) {
        white-space: nowrap;
        margin-left: 10px;
    }

    .transportation-data__total-sum {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
    }

    .transportation-data__delivery-date {
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 26px;
    }

    .transportation-data__total-wrapper button {
        font-weight: 700;
        font-size: 20px;
        line-height: 25px;
        color: #FFFFFF;
        background-color: var(--blue);
        width: 100%;
        min-height: 65px;
        border-radius: 16px;
        margin-bottom: 16px;
    }

    .transportation-data__total-wrapper button:disabled {
        background-color: #EFEFEF;
        color: #6D6D77;
    }

    .transportation-data__total-wrapper label {
        display: flex;
    }

    .transportation-data__total-wrapper label input {
        position: absolute;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .transportation-data__total-wrapper label a {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        color: #181C19;
    }

    .transportation-data__total-wrapper label a span {
        text-decoration: underline;
    }

    .transportation-data__total-wrapper label .custom-checkbox {
        display: block;
        border: 3px solid #DEE4F0;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        cursor: pointer;
        margin-left: 10px;
    }

    .transportation-data__total-wrapper label input:checked + span {
        background-image: url("../images/check.svg");
        background-position: center;
        background-size: 32px 32px;
        border: none;
    }

@media(min-width: 780px) {

    .transportation-data {
        padding: 30px 70px;
    }

    .contacts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        margin-bottom: 20px;
    }

    .contacts__sender {
        margin-bottom: 0;
    }

    .cargo-parameters__top-wrapper {
        flex-direction: row;
        justify-content: space-between;
    }

    .transportation-data__total-wrapper {
        max-width: 450px;
    }

    .review__list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .review__list li:not(:last-of-type) {
        margin-bottom: 0;
    }
}



@media(min-width: 1440px) {

    .select2-container .select2-selection--single {
        height: 52px;
    }

    .transportation-data {
        padding: 30px 0;
    }

    .transportation-data__wrapper {
        display: grid;
        grid-template-columns: 1fr 374px;
        column-gap: 45px;
    }

    .contacts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        margin-bottom: 20px;
    }

    .review__list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 15px;
        margin-bottom: 18px;
    }

    .transportation-data h1 {
        font-weight: 700;
        font-size: 36px;
        line-height: 41px;
        margin-bottom: 25px;
    }

    .fieldset-name {
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 8px;
    }

    .transportation-data {
        width: 100%;
        max-width: 1220px;
        margin: 0 auto;
        padding-top: 29px;
        padding-bottom: 100px;
    }

    .contacts__sender {
        margin-bottom: 0;
    }

    .cargo-parameters__top-wrapper h2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
        color: #181C19;
    }

    .cargo-parameters__top-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .review {
        background: #FFFFFF;
        border: 1px solid #DEE4F0;
        border-radius: 21px;
        padding: 25px 20px;
    }

    .review h2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 18px;
    }

    
    .review__list li .review__name {
        font-weight: 600;
        font-size: 18px;
        line-height: 120%;
        margin-bottom: 5px;
        display: inline-block;
        margin-right: 15px;
    }

    .transportation-data__total-wrapper h2 {
        font-weight: 700;
        font-size: 36px;
        line-height: 41px;
        margin-bottom: 6px;
    }

    .transportation-data__total-wrapper label a {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: #181C19;
    }

    .select2-selection *, .select2-results__option {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px !important;
        color: var(--black) !important;
    }


}