/* smts frontend styles */

:root {
    --imalco-blue: #11549a;
    --imalco-yellow: #ff9a31;
}
.skeleton {
  background-repeat: no-repeat;
  background-image: 
    /* layer 2: avatar */
    /* white circle with 16px radius */
    radial-gradient(circle 16px, white 99%, transparent 0),
    /* layer 1: title */
    /* white rectangle with 40px height */
    linear-gradient(white 40px, transparent 0),
    /* layer 0: card bg */
    /* gray rectangle that covers whole element */
    linear-gradient(gray 100%, transparent 0);
}

.full-width .tire-selector-wrapper {
    background-color: var(--imalco-yellow);
    float: right;
    max-width: 25%;
    min-height: 430px;
    padding: 1rem;
    position: relative;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}
.tire-selector ::placeholder {
    color: #C99;
}
.tire-selector .ts-bg0 {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
}
.home-hero-search .eginfo
{
	display: block;
	width:auto;
    padding: 10px 0px;
    color: #fff;
    font-family: Titillium Web, sans-serif;
    font-size: 1em;
    font-weight: 500;
}
.home-hero-search .eginfo 
{
font-family: Titillium Web;
font-weight:600;
font-size:1.1em;

}
.home-hero-search .eginfo span.w,.home-hero-search .eginfo span.wv
{
color:#FFFF00

}
.home-hero-search .eginfo span.h,.home-hero-search .eginfo span.hv
{
color:#fdb819;

}
.home-hero-search .eginfo span.r,.home-hero-search .eginfo span.rv
{
color:#1274da;	
}
.home-hero-search .eginfo span.brand
{
color:#fdb819;	
font-size: 1.1em;
}
.home-hero-search.elementor-widget-tabs .elementor-tab-content {
    padding: 10px 20px 20px 20px;
    display: none;
}
.tire-selector .title {
    background-color: #11549a;
    color: #fff;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    margin-bottom: 2rem;
    padding: 0.2rem 0.4rem;
    text-rendering: optimizeLegibility;
    text-transform: uppercase;
    width: 100%;
}
/*
.tire-selector .selectors {
    margin: 0.75rem 0.5rem 2rem 0.5rem;
    text-align: center;
    width: calc(100% - 1.5rem);
}
*/
.tire-selector .selectors .box {
    background-color: #fff;
    cursor: pointer;
    border: 1px solid #333;
    display: inline-block;
    height: 2rem;
    margin-right: .8rem;
    min-height: 2rem;
    padding: 0.1rem 0.2rem;
    width: 20%;
}
input[type="text"].box
{
	width:100%
}
input[type="text"].box
{
	width:100%
}
#btnBySize.btn-selector,#btnByVehicle.btn-selector
{
width:100%	
}
.tire-selector .selectors .box:last-child {
    margin-right: 0;
}
.tire-selector .selectors:after, .tire-selector .title:after, .tire-selector .btn-wrap:after {
    content: "";
    display: table;
    clear: both;
}
.tire-selector .btn-wrap {
  
  margin-top: .75em;
    /*margin: 0.5rem 0.75rem;
    text-align: center;
    width: calc(100% - 1.5rem);
	*/
}
.tire-selector .btn-wrap .left {
    width: 63%;
    float: left;
    text-align: right;
    
}
/*
.tire-selector .ts-vehicle .btn-wrap .left {
    background: url(../images/car2t.png) no-repeat bottom center;
    background-size: contain;
}

.tire-selector .ts-size .btn-wrap .left {
    background: url(../images/tire3t.png) no-repeat bottom center;
    background-size: contain;
}
*/
.tire-selector .btn-wrap .right {
    width: 37%;
    float: right;
}
.tire-selector .btn-selector
{
width:20%;	
}
/*
.modal-size .content-area .content .btn-selector {
   display: inline-block;
    width: 25%;
    min-width: 200px;
}
*/
/*
.tire-selector .btn-selector, .modal-size .btn-selector {
    color: #FFF;
    background-color: #11549a;
    font-size: inherit;
    font-weight: 400;
    height: auto;
    margin: 1rem 0;
    padding: .5rem .25rem;
    opacity: 1;
    text-transform: uppercase;
    width: calc(100% - .25rem);
}
*/
.tire-selector .btn-selector.s2x, .modal-size .btn-selector.s2x {
    font-size: .9em;
    font-weight: 700;
    /* padding: 1rem 1rem; */
    padding: 10px;
    text-transform: uppercase;
}
.tire-selector .btn-selector:hover, .modal-size .btn-selector:hover {
    background-color: #11549a99;
}
.tire-selector .btn-selector.alt, .modal-size .btn-selector.alt {
    background-color: #ff9a31;
}
.tire-selector .btn-selector.alt:hover, .modal-size .btn-selector.alt:hover {
    background-color: #11549a;
    color: #fff;
}

ul.tire-property-list {
    overflow: auto;
    position: relative;
    margin-left: 0;
    padding: 0.5rem;
}

.tire-property-list li {
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    list-style: none;
    margin: 0 1rem 1rem 0;
    padding: .2rem .5rem;
    text-align: center;
    width: calc(8% - 1rem);
    vertical-align: top;
}

.tire-property-list li:hover {
    color: #ff9a31;
}
#makes.tire-property-list li, #bmakes.tire-property-list li {
    width: calc(25% - 1rem);
}
#make-models.tire-property-list li, #bmake-models.tire-property-list li {
    width: calc(33% - 1rem);
}
.tire-property-list li a {
    display: block;
}
.elementor-widget-wp-widget-tz_woo_cart, .widget_tz_shopping_cart {
    z-index: unset;
}
.modal-size.modal {
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;
    /* height: 80%; */
    /* height: 80vh; */
    max-width: 1100px;
    padding: 0;
    width: 70%;
    padding-bottom: 2rem;
    
}
.smts-overlay {
    
}
.modal-size.modal .overlay {
    display: none;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: url('../images/spinner.svg') center center no-repeat;
    background-color: rgba(0,0,0,0.5);
    z-index: 1;
}
.modal a.close-modal {
    left: inherit;
    right: -12.5px;
}
.modal-size .modal-title {
    padding: 0.4rem .8rem;
    background: #11549a;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
    text-transform: uppercase;
    height: 2.3rem;
}
.modal-size.modal .content-area p {
    margin-bottom: 1.1rem;
    color: #000;
	font-size: 1.1em;
}
.modal-size.modal .content-area .infowrap {
    display: table;
    height: calc(30%);
    width: calc(100% - 3rem);
    margin: 0 auto;
}
.modal-size.modal .infowrap .left {
    float: left;
    height: 100%;
    width: 55%;
    display: table-cell;
}
.modal-size.modal .infowrap .right {
    float: right;
    margin-right: 1rem;
	width: 40%;
    height: 100%;
    text-align: right;
    overflow: auto;
    display: table-cell;
    position: relative;
}

.modal-size.modal.modal-tire .infowrap .right .tireimage
{
    background: url(../images/info-tire-spec.png) bottom right no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 100%;
    height: 118px;
    position: absolute;
    bottom: 0;
    vertical-align: bottom;
    width: 100%;
}
.modal-size.modal.modal-vehicle .infowrap .right .tireimage
{
    background: url(../images/car_bg_popup.jpg) bottom right no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: 100%;
    height: 118px;
    position: absolute;
    bottom: 0;
    vertical-align: bottom;
    width: 100%;
}
.modal-size.modal .infowrap .tsmsg {
    color: #333333;
    font-size: 1.1em;
    font-weight: bold;
}

.modal-size.modal .infowrap .tsmsg p strong {
    color: #ff9a31;
    font-size: inherit;
    font-weight: 600;
	font-size:1.1em;
}
.modal-size.modal .infowrap .progress {
    height: calc(75% - 5rem);
    background-image: url(../images/ps1-1.png);
    background-repeat: no-repeat;
    background-position: left;
    background-size: initial;
    margin-bottom: 1.8rem;
    min-height: 90px;
    margin-top: 1.8em;
    max-width: 300px;
}
@media screen and (max-width: 1023px) {
    .modal-size.modal .infowrap .progress {
        display: none;
    }
}
.modal-size.modal .infowrap .progress.step2 {
    background-image: url('../images/ps1-2.png');
}
.modal-size.modal .infowrap .progress.step3 {
    background-image: url('../images/ps1-3.png');
}
.modal-size.modal .infowrap .progress.step4 {
    background-image: url('../images/ps1-4.png');
}
.modal-size.modal .infowrap .progress .ps {
    display: block;
    float: left;
    font-size: x-large;
    font-weight: bold;
    height: calc(100% - 1rem);
    width: 29%;
    font-size: 1.1em;
}
.modal-size.modal .content-area {
    height: calc(100% - 3rem);
}
.modal-size.modal .content-area .content {
    background: #CCC;
    border-radius: 1rem;
    border: 1rem solid #CCC;
    display: block;
    height: calc(70% - 1.5rem);
    width: calc(100% - 3rem);
    margin: 0 auto;
    overflow-y: auto;
}


.modal span.restart:after {
    content: "\f531";
    font-family: dashicons;
}

.modal p {
    margin-bottom: 6px;
}

.modal .change-make, .modal .change-bmake, .modal .change-width {
    cursor: pointer;
    color: #fff;
    background-color: #11549a;
    border-radius: 3px;
    padding: 3px 6px;
	font-weight: 600;
}

.tire-selector-wrapper:before{display: none;}
/* for horizontal innerpages b4shoploop */
.home-hero-search.elementor-widget-tabs .elementor-tab-title.elementor-active
{
	border-color: #ff9a31;
}

@media (max-width: 900px) {
    .banner-style-1 .full-width .tire-selector-wrapper {
        float: right;
        margin: 0 auto;
        max-width: 40%;
        position: relative;
        right: unset;
        top: unset;
        transform: none;
    }
    
    .tire-property-list li {
        width: calc(33.3333% - 1rem);
        padding: 0.5rem;
    }
    #makes.tire-property-list li {
        width: calc(50% - 1rem);
    }
    #make-models.tire-property-list li {
        width: calc(100%);
    }
    .modal-size.modal .infowrap .left {
        width: calc(100%);
    }
    .modal-size.modal .infowrap .right {
        display: none;
    }
    .modal-size.modal .content-area .infowrap {
        height: calc(15%);
    }
    .modal-size.modal .content-area .content {
        height: calc(85% - 1.5rem);
    }
}