.orderform {
    &__area {
        border: 1px solid #F2F6F9;
        max-width: 800px;
        margin: 0 auto;
        @extend %bg-white, %p-30;
        @include border-radius(10px);
    }
    &__head {
        padding: 20px 0px;
        border-bottom: 1px solid $border-color;
        @include breakpoint(sm) {
            padding: 20px 30px;
        }
    }
    &__body {
        
    }
    &__item {
        padding: 20px 0px;
        border-bottom: 1px solid $border-color;
        @include breakpoint(sm) {
            padding: 20px 30px;
        }
        &:last-child {
            border-bottom: none;
        }
        h6 {}
        p {}
        label {
            @extend %mb-15;
        }
        input {
            border: 1px solid $border-color;
        }
        select {
            border: 1px solid $border-color;
            background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
            background-position: calc(100% - 0.75rem) center !important;
            -moz-appearance:none !important;
            -webkit-appearance: none !important; 
            appearance: none !important;
            padding-right: 2rem !important;
            option {}
        }
        ul {
            @extend %flex;
            gap: 15px;
            li {
                @extend %rel, %text-center, %flex, %align-items-center, %hidden, %pointer, %justify-center;
                border: 1px solid $border-color;
                width: calc(100% / 2 - 15px);
                padding: 20px 15px;
                @include border-radius(4px);
                @include breakpoint(xl) {
                    width: calc(100% / 4 - 15px);
                }
                &.active {
                    background-color: $theme-color;
                    border-color: $theme-color;
                    label {
                        @extend %white-color;
                    }
                    input {
                        background-color: $theme-color;
                        &:checked {
                            background-color: $theme-color;
                            border-color: $theme-color;
                            &[type=radio] {
                                background-image: none;
                            }
                        }
                    }
                }
                input {
                    @extend %abs, %w-100, %h-100, %pointer;
                    top: 0;
                    left: 0;
                    &:checked {
                        background-color: transparent;
                        border-color: transparent;
                        &[type=radio] {
                            background-image: none;
                        }
                    }
                }
                .form-check-input {
                    outline: 0;
                    padding: 0;
                    &[type="radio"] {
                        border-radius: 0px;
                        outline: none;
                        margin: 0;
                        border: 0;
                    }
                    &:focus {
                        box-shadow: none;
                    }
                }
                  
                label {
                    @extend %mb-0, %rel, %pointer;
                    z-index: 1;
                }
            }
        }
        .cart-plus-minus {
            @extend %w-100;
            .qtybutton {
                @include font-size(20px);
            }
            input {
                @extend %w-100;
                padding-inline: 40px;
            }
        }
        .lab-btn {
            border: none;
            @extend %mb-15;
        }
    }
}