/* Quick Quote Widget Container                      */
/*-------------------------------------------------- */
.quick-quote-default { padding: 0 5px;}
.quick-quote-default:after,
.quick-quote-default form:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* Form                                              */
/*-------------------------------------------------- */
/* Prevent flash of unstyled content (FOUC) caused by JS manipulation */
.quick-quote-default form { visibility: hidden; }
.quick-quote-default form.initialized { visibility: visible; }

/* First fieldset - Step 1: Choose your Vehicle */
.qq-choose-vehicle { float: left; min-width: 220px; width: 60%; max-width: 480px; }
.qq-choose-vehicle select { width: 100%; }
.qq-choose-vehicle label span { display: none; }

/* Second fieldset - Step 2: Enter Your Information */
.qq-enter-info { float: right; min-width: 220px; width: 30%; margin-bottom: 40px; }

/* Stacked Classes added via widget.js if in narrow container */
.quick-quote-default .fieldset-stacked, .quick-quote-stacked .qq-choose-vehicle.fieldset-stacked { float: none; width: 100%; display: inline;}

/* Form Misc */
.qq-choose-vehicle .mod { margin: 0; }
.qq-choose-vehicle select { width: 96%; margin: 0 auto; min-width: 5.25em; }
.quick-quote-default select.autoselected { opacity: .5; }


/* Vehicle Image Showcase                            */
/*-------------------------------------------------- */
#showcase { float: left; width: 100%; margin-top: 10px; text-align: center; }
#qq-vehicle-picture { min-height: 360px; width: 100%; background: #fff url('/static/v9/widgets/quick-quote/default/v1/images/showcase_bg.jpg') no-repeat 50% 50%;border: 1px solid #cecece;}
#qq-vehicle-picture.qq-default-bg { background-size: 75% }
#qq-vehicle-picture a { display: block; width: 100%; line-height: 0; text-indent: -9999px; }
#qq-vehicle-picture img { display: block; width: 100%; }
#qq-color-info { display: inline-block; margin: 10px; padding: 5px; overflow: auto; text-align: center; }
.quick-quote-default:not(.quick-quote-stacked) #qq-color-info .swatches { display: inline-block; padding-left: 20px}
#qq-color-label { margin-bottom: 5px; }
.swatches .color { float: left; margin: 0; padding: 8px 2px 0 0; list-style: none;}
.swatches a span { display: block; width: 80px; height: 36px; margin: 0; box-sizing: border-box; border: 1px solid #D4D2D2; background:linear-gradient(178deg,transparent 16%, rgb( 235,235,235,0.4) 51%, transparent 55%);  text-indent: -9999px; }
.swatches a:hover span,.swatches .color.selected a span { width: 80px; height: 42px;background:linear-gradient(178deg,transparent 16%, rgb( 235,235,235,0.4) 51%, transparent 55%);  border: 1px solid #D4D2D2; margin-top: -6px}
.qq-media { text-align: center; }
.no-image { display: block; width: 100%; height: 1.5em; margin: 30% auto 0; text-align: center; background-color: #fff; }

/* Mobile                                            */
/*-------------------------------------------------- */
.mobile #qq-vehicle-picture { min-height: 270px; }
.mobile .quick-quote-default:not(.quick-quote-stacked) #qq-color-info .swatches { padding-left: 40px; }
/*Mobile quick-quote-stacked*/
.mobile .quick-quote-stacked #qq-vehicle-picture { min-height: auto; }
.mobile .quick-quote-stacked #qq-color-info .swatches { padding-left: 5px; }

/* Quick Quote Stacked Style*/
.quick-quote-stacked .qq-choose-vehicle{
    float: none;
    margin: auto;
    width: 60%;
    max-width: 900px;
    display: flex;
    flex-wrap: wrap;
} 
.quick-quote-stacked .qq-choose-vehicle .form-group{
    flex: 1 1 auto;
}
.quick-quote-stacked #qq-vehicle-picture { 
    min-height: 360px; width: 100%; background: #fff url('/static/v9/widgets/quick-quote/default/v1/images/showcase_bg.jpg') no-repeat 50% 50%;
    border: 0;
}
/*Desktop quick-quote-stacked*/
.quick-quote-stacked #qq-color-info .swatches { 
    display: inline-block;
    padding-left: 0px;
}
/*Small screen sizes*/
@media only screen and (max-width: 375px){
    .mobile .quick-quote-stacked #qq-color-info .swatches { 
        padding-left:40px;
    } 
}
@media only screen and (max-width: 375px){
    .mobile .quick-quote-default:not(.quick-quote-stacked) #qq-color-info .swatches { 
        padding-left:20px;
    } 
}
.quick-quote-stacked .qq-enter-info{
    float: none;
    width:100%; 
    max-width: 660px;
    margin: auto;
}
.quick-quote-stacked .qq-step{
    text-align: center;
    font-weight: 300;
    border: none;
    line-height: 45px;
}