main {
    display: grid;
    grid-template-columns: minmax(330px, 848px) minmax(330px, 415px);
    grid-column-gap: 24px;
}

main .status-sold {
        grid-row: 2/3;
        grid-column: 1/3;
        height: 56px;
        padding: 16px 20px;
        border-radius: 10px;
        background: var(--red);
        color: var(--white);
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        margin: 40px 0;
    }

main .status-sold .error-message {
            display: flex;
            align-items: center;
            align-self: stretch;
            gap: 10px;
        }

main .status-reserved {
        grid-row: 2/3;
        grid-column: 1/3;
        height: 56px;
        padding: 16px 20px;
        border-radius: 10px;
        background: var(--red);
        color: var(--white);
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        margin: 40px 0;
    }

main .status-reserved .error-message {
            display: flex;
            align-items: center;
            align-self: stretch;
            gap: 10px;
        }

main #gallery-container {
        display: none;
    }

main .gallery-container {
        display: grid !important;
        z-index: 4000 !important;
    }

main .breadcrumbs {
        grid-column: 1/3;
        grid-row: 1/2;
        padding: 41px 0 24px 0;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 2px solid var(--grey);
        margin-bottom: 24px;
    }

main .breadcrumbs .breadcrumb-item {
            color: var(--black);
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 20px;
        }

main .breadcrumbs .breadcrumb-item:last-child {
            color: var(--red);
        }

main .breadcrumbs .breadcrumb-logo {
            max-width: 50px;
        }

main .profile-image-container {
        width: 100%;
        margin-bottom: 40px;
    }

main .profile-image-container .profile-image-wrapper {
            height: auto;
            margin-bottom: 18px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }

main .profile-image-container .profile-image-wrapper img {
                width: 100%;
                height: 100%;
                -o-object-fit: cover;
                   object-fit: cover;
                border-radius: 8px;
            }

main .profile-image-container .profile-image-wrapper .count-images {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 8px 12px;
                position: absolute;
                bottom: 18px;
                right: 18px;
                background-color: rgba(11, 11, 11, 0.7);
                color: var(--white);
                border-radius: 8px;
                font-size: 16px;
                white-space: nowrap;
            }

main .profile-image-container .additional-images-container {
            display: flex;
            align-items: center;
            gap: 18px;
            width: 100%;
        }

main .profile-image-container .additional-images-container .additional-images-row {
                display: flex;
                align-items: center;
                gap: 18px;
            }

main .profile-image-container .additional-images-container .additional-image-wrapper {
                height: auto;
                margin-bottom: 48px;
                cursor: pointer;
            }

main .profile-image-container .additional-images-container .additional-image-wrapper img {
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                    -o-object-fit: cover;
                       object-fit: cover;
                }

main .profile-image-container .car-main-details {
            display: flex;
            flex-direction: column;
        }

main .profile-image-container .car-main-details .details-wrapper {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

main .profile-image-container .car-main-details .details-wrapper div {
                    display: flex;
                    flex-direction: column;
                }

main .profile-image-container .car-main-details .details-wrapper div h1 {
                        font-size: 32px;
                        font-weight: 700;
                    }

main .profile-image-container .car-main-details .details-wrapper div h2 {
                        font-size: 28px;
                        font-weight: 400;
                        margin-bottom: 10px;
                    }

main .profile-image-container .car-main-details .details-wrapper button {
                    width: 60px;
                    height: 60px;
                    border: 1px solid var(--grey);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--white);
                    position: relative;
                }

main .profile-image-container .car-main-details .details-wrapper button .share-to-social {
                        position: absolute;
                        top: 65px;
                        display: none;
                        padding: 16px;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 16px;
                        border-radius: 8px;
                        border: 1px solid var(--grey);
                        background: var(--white);
                        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
                    }

main .profile-image-container .car-main-details .details-wrapper button .share-to-social a {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            color: var(--black);
                            white-space: nowrap;
                            font-weight: 600;
                        }

main .profile-image-container .car-main-details .details-wrapper button .share-to-social a img {
                                width: 16px;
                                height: 16px;
                                filter: invert(63%) sepia(9%) saturate(13%)
                                    hue-rotate(344deg) brightness(97%)
                                    contrast(86%);
                            }

main .profile-image-container .car-main-details .stock {
                display: flex;
                padding: 4px 12px;
                justify-content: center;
                align-items: center;
                align-self: flex-start;
                border-radius: 97px;
                background: var(--black);
                color: var(--white);
                font-size: 14px;
                font-weight: 700;
                line-height: 24px;
                margin-bottom: 20px;
            }

main .profile-image-container .car-main-details .stock span {
                    color: var(--white) !important;
                }

main .profile-image-container .car-main-details .carvertial-cta {
                display: flex;
                padding: 12px 16px;
                justify-content: center;
                align-items: flex-start;
                gap: 16px;
                border-radius: 6px;
                border: none;
                background: var(--white);
                color: var(--black);
                font-size: 18px;
                line-height: 28px;
                border: 1px solid var(--dark-grey);
            }

main aside {
        grid-row: 2/6;
        grid-column: 2/3;
    }

main aside .price-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            border: 2px solid var(--grey);
            border-radius: 12px;
            margin-bottom: 24px;
            background-color: var(--white);
        }

main aside .price-container .prev-price {
                color: var(--dark-grey);
                font-size: 24px;
                font-weight: 700;
                line-height: 24px;
                -webkit-text-decoration: line-through;
                text-decoration: line-through;
                align-self: end;
                margin-bottom: 17px;
            }

main aside .price-container .main-price {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24px;
            }

main aside .price-container .main-price .vat-reclaimable {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 12px;
                    border-radius: 97px;
                    background: var(--light-red);
                    color: var(--red);
                    font-size: 14px;
                    font-weight: 500;
                }

main aside .price-container .main-price .gross-price {
                    font-size: 36px;
                    font-weight: 700;
                    align-self: flex-end;
                }

main aside .price-container .main-price-no-vat {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 24px;
            }

main aside .price-container .main-price-no-vat .gross-price {
                    font-size: 36px;
                    font-weight: 700;
                    align-self: flex-end;
                }

main aside .price-container .want-to-buy-btn,
            main aside .price-container .reserve-car-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 60px;
                padding: 10px 16px;
                gap: 12px;
                align-self: stretch;
                border-radius: 8px;
                background: var(--red);
                border: none;
                color: var(--white);
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
                margin-bottom: 12px;
            }

main aside .price-container .reserve-car-btn {
                background-color: black;
            }

main aside .price-container .buyback-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 60px;
                padding: 10px 16px;
                gap: 12px;
                align-self: stretch;
                border-radius: 8px;
                background: var(--white);
                border: 1px solid var(--grey);
                color: var(--black);
                font-size: 18px;
                font-weight: 600;
                line-height: 28px;
            }

main aside .car-details {
            padding: 20px;
            border: 2px solid var(--grey);
            border-radius: 12px;
            margin-bottom: 24px;
            background-color: var(--grey);
        }

main aside .car-details ul {
                display: flex;
                flex-direction: column;
                gap: 16.5px;
            }

main aside .car-details ul li {
                    display: flex;
                    gap: 16px;
                }

main aside .car-details ul li span {
                        flex: 1;
                    }

main aside .car-details ul li span:first-child {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        font-size: 16px;
                    }

main aside .car-details ul li span:last-child {
                        color: var(--red);
                        font-size: 20px;
                        font-weight: 700;
                    }

main aside .leasing-calculator {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 20px;
            border: 2px solid var(--grey);
            border-radius: 12px;
            gap: 12px;
        }

main aside .leasing-calculator h4 {
                color: var(--red);
                font-size: 16px;
                font-weight: 700;
                text-transform: uppercase;
            }

main aside .leasing-calculator .leasing-field {
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

main aside .leasing-calculator .leasing-field label {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 20px;
                }

main aside .leasing-calculator .leasing-field input[type="text"] {
                    padding: 10px 14px;
                    border-radius: 8px;
                    border: 1px solid rgba(0, 0, 0, 0.2);
                    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
                    font-size: 16px;
                }

main aside .leasing-calculator .leasing-field .months {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                }

main aside .leasing-calculator .leasing-field input[type="button"] {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    padding: 10px 5px;
                    border-radius: 8px;
                    border: 1px solid var(--grey);
                    background-color: var(--light-grey);
                    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
                    flex: 1;
                    cursor: pointer;
                    color: var(--black);
                }

main aside .leasing-calculator .calculate-rate {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 60px;
                padding: 16px 22px;
                border-radius: 8px;
                border: none;
                background: var(--red);
                color: var(--white);
                font-size: 16px;
                font-weight: 600;
            }

main aside .leasing-calculator .person-type {
                display: flex;
                border-radius: 8px;
                border: 1px solid var(--grey);
            }

main aside .leasing-calculator .person-type button {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 10px;
                    flex: 1;
                    text-align: center;
                    font-size: 16px;
                    line-height: 24px;
                    border: none;
                    background-color: var(--white);
                    color: var(--black);
                }

main aside .leasing-calculator .person-type button:first-child {
                    border-radius: 8px 0 0 8px;
                }

main aside .leasing-calculator .person-type button:last-child {
                    border-radius: 0 8px 8px 0;
                }

main aside .leasing-calculator .person-type .individual {
                    border: 1px solid var(--dark-grey);
                }

main aside .leasing-calculator .person-type .legal-selected {
                    border: 1px solid var(--dark-grey);
                }

main aside .leasing-calculator .leasing-results {
                display: flex;
                align-items: center;
                padding: 16px;
                gap: 12px;
                align-self: stretch;
                border-radius: 16px;
                background: var(--grey);
            }

main aside .leasing-calculator .leasing-results .monthly-rate,
                main aside .leasing-calculator .leasing-results .total-payment {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                }

main aside .leasing-calculator .leasing-results .monthly-rate span:first-child, main aside .leasing-calculator .leasing-results .total-payment span:first-child {
                        font-size: 16px;
                        font-weight: 400;
                    }

main aside .leasing-calculator .leasing-results .monthly-rate span:last-child, main aside .leasing-calculator .leasing-results .total-payment span:last-child {
                        color: var(--red);
                        text-align: center;
                        font-size: 20px;
                        font-weight: 700;
                    }

main .aside-status-sold,
    main .aside-status-reserved {
        grid-row: 3/7;
    }

main .car-description {
        margin-bottom: 40px;
    }

main .car-description h3 {
            font-size: 24px;
            font-weight: 600;
            line-height: 24px;
            margin-bottom: 24px;
        }

main .car-description p {
            font-size: 16px;
            line-height: 24px;
        }

main .car-description-read-more {
        color: #e41515;
        font-weight: 600;
        line-height: 24px;
        text-decoration-line: underline;
        background: none;
        border: none;
        padding: 0px;
    }

main .car-features {
        margin-bottom: 40px;
    }

main .car-features .feature-nav {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--grey);
            margin-bottom: 36px;
            flex-wrap: wrap;
        }

main .car-features .feature-nav li {
                color: var(--black);
                font-size: 16px;
                font-weight: 600;
                line-height: 24px;
                padding-bottom: 17px;
                cursor: pointer;
            }

main .car-features .feature-nav .active::after {
                position: absolute;
                height: 1px;
                width: 100%;
                background-color: var(--red);
            }

main .car-features .car-feature-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 17px;
        }

main .car-features .car-feature-list h4 {
                display: none;
            }

main .car-features .car-feature-list .car-features-line {
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 16px;
            }

main .car-features .car-feature-list .show-more {
                display: none;
            }

main .test-drive {
        margin-bottom: 53px;
        padding: 24px 40px;
        border-radius: 12px;
        background-image: linear-gradient(
                to bottom,
                rgba(11, 11, 11, 0.7),
                rgba(11, 11, 11, 0.7)
            ),
            url(../images/test-drive.png);
        background-repeat: no-repeat;
        background-size: cover;
    }

main .test-drive h4 {
            color: var(--white);
            font-size: 25px;
            font-weight: 600;
            margin-bottom: 8px;
        }

main .test-drive p {
            color: var(--white);
            font-size: 20px;
            margin-bottom: 28px;
        }

main .test-drive button {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 332px;
            width: 100%;
            height: 60px;
            gap: 12px;
            border-radius: 8px;
            background: var(--white);
            border: none;
            color: var(--black);
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
            padding: 0px 10px;
        }

main .gallery-container {
        z-index: 2;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 1rem;
        display: grid;
        grid-template-areas:
            ". carousel close"
            "left carousel right";
        grid-template-rows: 1fr 5fr;
        padding-top: 1rem;
        background: rgba(0, 0, 0, 0.9);
    }

main .gallery-container .close-gallery {
            grid-area: close;
            z-index: 3;
            background-color: transparent;
            cursor: pointer;
            align-self: start;
            border: none;
        }

main .gallery-container .close-gallery svg {
                width: 28px;
                height: 28px;
                filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(265deg)
                    brightness(103%) contrast(101%);
            }

main .gallery-container .carousel-container {
            grid-area: carousel;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

main .gallery-container .carousel-container .image {
                border-radius: 5px;
                height: 90vh;
            }

main .gallery-container .carousel-container .image img {
                    -o-object-fit: contain;
                       object-fit: contain;
                    width: 100%;
                    height: 100%;
                }

main .gallery-container .carousel-control {
            border-radius: 50%;
            background-color: transparent;
            margin: 2rem;
            align-self: center;
            transform: translateY(-50%);
            cursor: pointer;
        }

main .gallery-container .carousel-control svg {
                width: 3rem;
                height: 3rem;
            }

main .gallery-container .prev {
            grid-area: left;
            background: transparent;
            border: none;
            filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(265deg)
                brightness(103%) contrast(101%);
        }

main .gallery-container .next {
            grid-area: right;
            border: none;
            filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(265deg)
                brightness(103%) contrast(101%);
        }

main .may-like {
        grid-column: 1/3;
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 70px;
    }

main .may-like .car-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            margin-bottom: 0;
        }

main .may-like h3 {
            font-size: 24px;
            font-weight: 700;
            line-height: 24px;
        }

main .may-like .see-recomanded {
            display: flex;
            padding: 8px 18px;
            justify-content: center;
            align-items: center;
            border-radius: 8px;
            background: var(--red);
            color: var(--white);
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            align-self: center;
        }

main .car-pdp-unavailable-container {
        grid-column: 1/3;
    }

main .car-pdp-unavailable-container .car-card-unavailable {
            display: flex;
            align-items: center;
            gap: 24px;
            flex: 1 0 0;
            border-radius: 20px;
            border: 1px solid var(--grey);
            background: var(--white);
            flex-wrap: wrap;
            margin-bottom: 40px;
        }

main .car-pdp-unavailable-container .car-card-unavailable .car-details-wrapper {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                height: 100%;
                padding: 24px;
                flex: 3;
            }

main .car-pdp-unavailable-container .car-card-unavailable .car-details-wrapper h3 {
                    padding-bottom: 24px;
                    width: 100%;
                    border-bottom: 1px solid var(--grey);
                }

main .car-pdp-unavailable-container .car-card-unavailable .car-details-wrapper ul {
                    padding: 24px 0;
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    flex-wrap: wrap;
                }

main .car-pdp-unavailable-container .car-card-unavailable .car-details-wrapper ul li {
                        display: flex;
                        padding: 4px 12px;
                        justify-content: center;
                        align-items: center;
                        gap: 10px;
                        border-radius: 97px;
                        background: var(--grey);
                        min-height: 32px;
                    }

@media (min-width: 1024px) {
    .sticky-price {
        position: sticky;
        top: 18px;
        width: 415px;
        margin-bottom: 45px;
    }
}

@media (max-width: 1024px) {
    main {
        display: flex;
        flex-direction: column;
    }

        main aside {
            margin-bottom: 40px;
        }
                main .details-wrapper button .share-to-social {
                    right: 0;
                }
}
@media (max-width: 800px) {
    .gallery-container {
        display: flex;
        flex-direction: column;
    }
            .gallery-container .carousel-container .carousel::-webkit-scrollbar {
                display: inline;
            }
        .gallery-container .close-gallery {
            align-self: flex-end;
        }

        .gallery-container .carousel-control {
            display: none;
        }
}
@media (max-width: 768px) {
            main .car-features .feature-nav {
                display: none;
            }
            main .car-features .car-feature-list {
                display: flex !important;
                flex-direction: column;
            }

                main .car-features .car-feature-list h4 {
                    display: block;
                }

                main .car-features .car-feature-list .show-more {
                    display: flex;
                    padding: 8px 22px;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    align-self: stretch;
                    border-radius: 8px;
                    border: 1px solid var(--dark-grey);
                    background: var(--white);
                    color: var(--black);
                    font-size: 16px;
                    font-weight: 600;
                }

            main .car-features .car-feature-list:not(:last-child) {
                margin-bottom: 36px;
            }
}
@media (max-width: 480px) {
        main section {
            margin-bottom: 32px !important;
        }
        main .breadcrumbs {
            display: none;
        }
            main .profile-image-container .profile-image-wrapper {
                height: auto;
                margin-top: 20px;
            }

                main .profile-image-container .profile-image-wrapper img {
                    -o-object-fit: initial;
                       object-fit: initial;
                }

            main .profile-image-container .additional-image-wrapper {
                display: none;
            }
                main .profile-image-container .car-main-details .details-wrapper {
                    position: relative;
                }
                    main .profile-image-container .car-main-details .details-wrapper button {
                        height: 40px;
                        width: 40px;
                        position: absolute;
                        right: 0;
                        bottom: -33px;
                    }

                        main .profile-image-container .car-main-details .details-wrapper button img {
                            width: 16px;
                            height: 16px;
                        }

                        main .profile-image-container .car-main-details .details-wrapper button .share-to-social {
                            top: 50px;
                        }
                main aside .price-container .prev-price {
                    align-self: flex-start;
                    font-size: 24px;
                }
                main aside .price-container .main-price {
                    flex-direction: row-reverse;
                }
            main .test-drive h4 {
                margin-bottom: 16px;
            }

        main .car-list {
            margin-bottom: 0;
        }
            main .may-like .see-recomanded {
                width: 100%;
            }
            main .may-like .car-list {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
                margin-bottom: 0;
            }

        main .gallery-container {
            grid-template-areas:
                " close"
                " carousel ";
        }
        main .close-gallery {
            display: flex;
            justify-content: flex-end;
        }
}
.modal-layout {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    display: none;
}
.modal-layout ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }
.modal-layout ::-webkit-scrollbar-track {
        background: var(--white);
        border-radius: 10px;
    }
.modal-layout ::-webkit-scrollbar-thumb {
        background: var(--dark-grey);
        border-radius: 10px;
    }

.modal-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
        0px 8px 8px -4px rgba(16, 24, 40, 0.03);
    max-height: 95vh;
    overflow: auto;
}

.modal-container .google-announce-container {
        padding: 24px;
    }

.modal-container .error-message {
        width: 100%;
        text-align: center;
    }

.modal-container #topcars-testdrive-error {
        margin-top: 1.25rem;
        font-weight: normal !important;
        text-align: center;
    }

.modal-container #topcars-testdrive-success {
        margin-top: 1.25rem;
        font-weight: normal !important;
        text-align: center;
    }

.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-header-container {
    display: flex;
    padding: 24px 25px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--black);
}

.modal-heading-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.modal-heading-text-wrapper h1 {
        color: var(--white);
        font-size: 18px;
        font-weight: 700;
    }

.main-modal-input-fields-wrapper {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.fields-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    width: 100%;
}

.fields {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 0 0;
}

.field label {
        color: var(--grey-main);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

.field input {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        flex: 1 0 0;
        overflow: hidden;
        color: var(--primary-main);
        text-overflow: ellipsis;
        border: none;
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        outline: none;
    }

.input-container {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: var(--white);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.input-container input {
    flex: 1;
}

.input-container img {
    margin-left: 5px;
    cursor: pointer;
}

.modal-cross-icon-wrapper img {
    cursor: pointer;
    display: flex;
}

.button-main-container {
    display: flex;
    padding: 16px 25px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
}

.button-main-container button {
        display: flex;
        width: 60%;
        padding: 10px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: 8px;
        background: var(--red);
        border: none;
    }

.button-main-container button span {
            color: var(--white);
            font-size: 16px;
            font-weight: 600;
        }

.gdpr-container .radio-container:first-child {
        margin-bottom: 10px;
    }

.gdpr-container input[type="radio"] {
        margin-right: 5px;
    }

@media (max-width: 600px) {
    .modal-layout {
        max-height: 100vh;
        overflow-y: scroll;
    }

        .modal-layout .modal-container {
            max-height: 90vh;
            overflow-y: scroll;
            margin: 0 15px;
        }

    .fields {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        gap: 20px;
    }

    .field {
        width: 100%;
    }

    .modal-cross-icon-wrapper img {
        height: 15px;
        width: 15px;
    }
        .button-main-container button {
            width: 100%;
        }
}