body.fluid{
    #header{
        #sub_bar{
            border-bottom:none;
            #badges{display:none;}
        }
    }
}

#page{
    #content{
        #body{
            padding:20px 0;
            @media only screen and (max-width: 1020px){padding:10px 0;}
            @media only screen and (max-width: 863px){padding:0;}
            .callout{
                color:var(--black);
                &.simple {
                    padding:15px;
                    p {
                        margin:0px;
                    }
                }
                p{font-size:var(--font_size8);line-height:18px;}
            }
            div{box-sizing:border-box;}

            .selectbox{
                background:#fff;box-sizing:border-box;border:1px solid #999;border-radius:4px;width:100%;position:relative;z-index:10;margin:0;text-transform:uppercase;
                .select{
                    appearance:none;background:none;border:none;display:block;font-size:15px;width:100%;height:38px;line-height:38px;padding:0 28px 0 5px;position:relative;z-index:11;text-align:center;white-space:nowrap;
                    @media only screen and (max-width: 863px){height:40px;line-height:40px;}
                }
                ul.select-menu{
                    background:var(--white);border:1px solid var(--grey);width:120%;padding:0;height:auto;max-height:280px;overflow-y:auto;box-shadow:0px 3px 18px -3px rgba(0, 0, 0, 0.2);position:absolute;top:40px;left:-1px;z-index:55;list-style:none;margin:0;
                    @media only screen and (max-width: 863px){min-width:100px;}
                    @media only screen and (max-width: 480px){min-width:85px;}
                    li{
                        line-height:26px;height:26px;font-weight:normal;width:auto;white-space:nowrap;text-align:left;padding:0 10px;
                        &:hover{background:var(--bright_blue);color:var(--white);cursor:pointer;}
                        &.selected{
                            background:var(--grey-1);
                            &:hover{color:var(--text2);}
                        }
                    }
                }
                &::after{
                    color:#666;content:"\f078";font-family: "Font Awesome 5 Free";font-weight:bold;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;font-size:16px;width:14px;height:16px;margin:-8px 0 0 0;position:absolute;top:50%;right:10px;z-index:10;
                    @media only screen and (max-width: 1020px){right:5px;}
                }
            }
            #checkout_steps{
                display:flex;flex-direction:row;justify-content:flex-start;align-items:center;margin:0 0 0 auto;
                @media only screen and (max-width: 863px){display:flex;flex-direction:row;justify-content:center;align-items:center;border-bottom:1px solid var(--grey-1);padding:10px;margin:0 0 10px 0;width:100%;}
                .steps_label{display:none;}
                .step{
                    margin:0 30px 0 0;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;
                    @media only screen and (max-width: 863px){flex-direction:column;text-align:center;}
                    .number{background:var(--grey-3);border:1px solid var(--grey2);border-radius:10px;box-sizing:border-box;color:var(--grey2);font-size:var(--font_size2);line-height:18px;margin:0 10px 0 0;height:20px;width:20px;text-align:center;float:left;}
                    .label{
                        color:var(--grey2);font-size:var(--font_size3);line-height:20px;height:20px;float:left;
                        @media only screen and (max-width: 863px){font-size:13px;}
                        &.mobile{display:none;}
                    }
                    &.submit_order{margin:0;}
                    &.active{
                        .number{background:color-mix(in srgb, var(--blue) 5%, transparent);border:1px solid var(--text1);color:var(--text1);}
                        .label{color:var(--text1);font-weight:bold;}
                    }
                    &::after{content:'\0020';clear:both;display:block;float:none;overflow:hidden;visibility:hidden;width:0;height:0;margin:0;padding:0;}
                    @media only screen and (max-width: 863px){
                        &.one,
                        &.two{
                            .label{
                                display:none;
                                &.mobile{display:block;}
                            }
                            &.submit_order{
                                .label{display:block;}
                            }
                        }
                    }
                }
            }
            .autoshipcheckout{
                width:65%;cursor:pointer;margin:0 0 0 auto;
                @media only screen and (max-width: 863px){width:-webkit-fill-available;margin:0 -10px;order:4;}
                .options_container{
                    background:color-mix(in srgb, var(--blue) 15%, transparent);border:1px solid var(--grey);width:100%;border-radius:4px;display:flex;align-items:center;justify-content:center;
                    @media only screen and (max-width: 863px){font-size:14px;justify-content:space-around;border-radius:0 0 4px 4px;flex-direction:column;}
                    label{
                        cursor:pointer;display:flex;align-items:stretch;justify-content:flex-start;padding:0;
                        @media only screen and (max-width: 863px){justify-content:center;position:relative;flex-wrap:wrap;}
                        .checkbox{
                            background:#f7f7f7;border-right:1px solid var(--grey);border-radius:3px 0 0 3px;display:flex;align-items:center;justify-content:center;width:48px;min-height:48px;
                            @media only screen and (max-width: 863px){border-right:1px solid var(--grey);border-bottom:1px solid var(--grey);border-radius:0;}
                            input{width:20px;height:20px;min-width:20px;min-height:20px;accent-color:#009DCC;cursor:pointer;}
                            i.fa{display:none;}
                        }
                        .offer_heading{
                            background:var(--red);border-right:1px solid var(--grey);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;width:calc(50% - 24px);
                            @media only screen and (max-width: 863px){border-right:none;border-bottom:1px solid var(--grey);width:calc(100% - 48px);}
                            h5,h6{
                                color:#fff;display:block;margin:0;padding:0;text-align:center;
                            }
                            h5{
                                font-size:20px;font-weight:bold;
                                @media only screen and (max-width: 1020px){font-size:17px;}
                            }
                            h6{
                                font-size:13px;font-weight:normal;text-transform:uppercase;
                            }
                        }
                        .offer_text{
                            display:flex;align-items:center;justify-content:center;width:calc(50% - 24px);min-height:48px;padding:6px 10px;
                            @media only screen and (max-width: 863px){width:100%;}
                            p{
                                font-size:13px;margin:0;padding:0;line-height:16px;
                                @media only screen and (max-width: 863px){text-align:center;}
                                .fancy{
                                    .fa-info-circle{color:#009DCC;}
                                }
                            }
                        }
                        &.subscribe{
                            width:100%;
                        }
                        &.subscribed{
                            width:calc(100% - 135px);
                            @media only screen and (max-width: 863px){width:100%;}
                            .checkbox{
                                background:#fff;
                                input{display:none;}
                                i.fa{display:block;color:#62AE3C;font-size:26px;}
                            }
                            .offer_heading{
                                background:#fff;width:calc(42% - 24px);
                                @media only screen and (max-width: 863px){width:calc(100% - 48px);}
                                h5{color:var(--red);}
                                h6{color:#000;}
                            }
                            .offer_text{
                                width:calc(58% - 24px);
                                @media only screen and (max-width: 863px){width:100%;}
                            }
                        }
                    }
                    .selectbox{
                        cursor:pointer;max-width:135px;height:40px;margin:0 4px 0 0;
                        @media only screen and (max-width: 863px){max-width:unset;width:calc(100% - 20px);padding:0;margin:0 10px 10px 10px;}
                        select{
                            background:none;border:none;cursor:pointer;padding:0 10px 0 5px;height:40px;width:100%;position:relative;z-index:11;-webkit-appearance:none;-moz-appearance:none;
                        }
                    }
                }
            }
            .form-footer{
                display:flex;flex-direction:row;justify-content:center;align-items:center;margin:0 0 30px 0;
                @media only screen and (max-width: 863px){display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;}
                a.btn{
                    width:calc(40% - 20px);margin:0 10px 20px 10px;
                    @media only screen and (max-width: 863px){width:100%;margin:0 0 15px 0;}
                    &.color2{
                        background:var(--ghost_btn);border:1px solid var(--ghost_btn_border);color:var(--ghost_btn_text);height:46px;line-height:46px;font-size:22px;
                        @media only screen and (max-width: 863px){display:none;}
                    }
                }
                .or{display:none;}
                #btnPayPal{
                    height:46px;
                    @media only screen and (max-width: 863px){width:100%;}
                }
            }
        }
    }
}