body { min-width:0px;}
#product-item-filter li		{ margin-left:0px; }
.driver_group  				    { margin:0px; padding:0px; }
.driver_group ul 		    	{ margin:0px; }
.driver_group .tab		  	{ display:none; }
.driver_group .tab.active 	{ display:block; }
.driver_group li		      	{ -webkit-box-sizing: border-box; box-sizing: border-box; list-style-type:none; margin-right:12px; width: 293px; height: 55px; margin-left:0px !important; padding: 0; cursor:pointer;}
.driver_group li.soon   		{ background-color:whitesmoke;  opacity: 0.6;}
.driver_group li.bluesky		{ background-color:whitesmoke;  opacity: 0.6;}
.provider > div 		      	{ display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-pack: end;  -ms-flex-pack: end;  justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; position: relative; }
.provider > div > .driver-icon	{ width: 40px; height: 40px; background-size: cover; display: inline-block; }
.provider > div .text 		{ width: 230px; overflow-y:hidden; height: 100%; }
.provider > div .text h3	{ margin: 0; box-sizing: border-box; padding:0; color:black; display: table-cell; vertical-align: middle; max-width: 230px; padding-left: 10px; }
.provider > div .subtext 	{ position: absolute; bottom: -2px; right: 5px; display: inline-block; visibility: hidden; }
.driver_group li .subtext {  padding: 0!important; }
.driver_group li:hover .subtext { visibility: visible; }


/* ******* GENERAL SETUP ******* */

.product-wrapper header {
  min-height:340px;
  border-bottom:1px solid var(--surface-fill-4);
}


/* ******* RESPONSIVE / MOBILE ******* */

/* mobile style*/
@media screen and (max-width:640px){
  .full{width:300px;}
}



@media screen and (max-width: 640px) {
  .product-wrapper header {overflow: hidden;}
  
    .product-wrapper img {
      max-width: 100% !important;
    }
  .driver-connections .source {
    width: 33%;
  }
    
}


/* NEW DRIVERS SECTION */
    .driver-data-sources {
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: var(--surface-fill-3);
        margin-top: var(--space-24);
    }
	.driver-connections hr {
        margin-bottom: .2em;
      }

      

     

      .driver-connections .driver-data-sources.d-flex.horiz-tiles .source{
          padding-top:0;
          display:flex;
          align-items:center;
          
      }
        .driver-connections .driver-data-sources.d-flex.horiz-tiles .source > div {
            
            border-width: 0 1px 1px 0;
            border-style: solid;
            border-color: var(--surface-fill-3);
            padding: var(--space-20) var(--space-32);
            display: grid;
            grid-template-columns: 32px 1fr;
            grid-template-rows: 32px;
            align-items: center;
            flex: 1;
            gap: 8px;
            transition: all 0.2s ease-in-out;
        }


        .driver-connections .source:hover .icon img {
            transform: scale(1.1);
            cursor: pointer;
        }
        .driver-connections .source:hover > div {
            background-color: var(--surface-fill-1);
        }

      .driver-connections .source .for {
        text-align: left;
            color: var(--text-fill-1);
            font-size: var(--label-s);
            margin: 0 0 0.5em;
            line-height: normal;
      }
      .driver-connections .driver-data-sources.d-flex.horiz-tiles .source .for {
        text-align: left;
         color: var(--text-fill-1);
        font-size: var(--label-m);
        margin: 0;
        white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
      }

      

      .driver-connections .source .icon {
        border-radius: 2px;
            width: 100%;
            position: sticky;
            z-index: 99;
            height: 90px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0.5em;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
      }
      .driver-connections .driver-data-sources.d-flex.horiz-tiles .source .icon {
            border-radius: 0;
            border: none;
            width: auto;
            height:auto;
            margin:0;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            flex:0 0 auto;
        }

      .driver-connections .source .icon i {
        display: none;
        position: absolute;
        right: -5px;
        top: -5px;
        color: #00A0FF;
      }

      .driver-connections .source .icon img {
        transform: scale(1);
        transition: all 0.2s ease-in-out;
        width: 32px;
      }

      .driver-connections .source .icon .tag {
        color: grey;
        text-transform: uppercase;
        margin: 0px;
        font-size: .6em;
        border-top: 1px solid gainsboro;
        padding: .4em;
      }

      .driver-connections .source.smart .icon i {
        display: inline-block;
      }

    

      .driver-connections .nav>li>a.active {
        background-color: #eee;
      }

      .driver-connections .col-md-2:hover .cta {
        opacity: 1;
      }

      .driver-connections .col-md-2:hover .cta-contact {
        opacity: 1;
      }

      .driver-connections .contact-us {
        border-radius: 4px;
        border: 1px solid #e5e5e5 !important;
        width: 82px;
        background-color: #f9f9f9 !important;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: .2em;
        position: relative;
        opacity: 0.5;
      }


	  .driver-connections .content {
        position: relative;
        overflow: hidden;
      }

      .driver-connections .content .content-overlay {
        background: rgba(0, 160, 255, 0.9);
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        -webkit-transition: all 0.4s ease-in-out 0s;
        -moz-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
      }

      .driver-connections .content:hover .content-overlay {
        opacity: 1;
      }

      .driver-connections .content-details {
        position: absolute;
        text-align: center;
        padding-left: 1em;
        padding-right: 1em;
        width: 100%;
        top: 65%;
        left: 47.95%;
        opacity: 0;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: all 0.3s ease-in-out 0s;
        -moz-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
        color: white;
        font-size:.85em;
      }

      .driver-connections .content:hover .content-details {
        opacity: 1;
      }

	  .driver-connections .fadeIn-top {
        top: 35%;
      }
.product-item-subfilter-wrapper{
    /*text-align:center;*/
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    
}
#product-item-subfilter {
    display: flex;
    flex:1;
    flex-wrap: wrap;
    gap: var(--space-8);

}
#product-item-subfilter.nav::before{
    display: none;
}
#product-item-subfilter.nav.nav-pills > li{
    float:none;
    margin:0;
} 

#product-item-subfilter.nav.nav-pills li a{
    text-align: center;
    font-size: var(--label-m);
}
#product-item-vertical-subfilter{
    display:flex;
    flex-direction:column;
}
#product-item-vertical-subfilter.nav.nav-pills > li{
    float:none;
    margin:0;
}
#product-item-subfilter.nav-pills > li + li{
   margin:0;
}
/*SEARCH BAR FILTER*/
.search-block-wrapper {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 0 0 0 5px;
    z-index: 1000;
    flex:0 0 20%;
    margin:6px 0;
}
.search-block-wrapper.full-width{
    width: 100%;
    flex: 1;
} 
.search-block {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    max-width: 100%;
    transition: all 0.3s ease;
    opacity:0;
    margin-right:0;
}
.search-block.active {
    width: calc(100% - 30px);
    opacity:1;
    margin-right:30px;
}
.search-block.full-width{
    width:100%;
    opacity:1;
    position:relative;
}

.search-block.full-width #quicksearch{
    background:var(--surface-fill-1) url("../img/redesign/icon-search-gray.svg")no-repeat calc(100% - 16px) 50% / 16px auto;
}
.search-block.full-width #quicksearch:focus,.search-block.full-width #quicksearch:focus-visible, .search-block.full-width #quicksearch:active{
    background-image:none;
}
#quicksearch {
    

    width: 100%;
    padding: var(--space-8) var(--space-32) var(--space-8) var(--space-16);
    border-radius: 4px;
    font-size: var(--label-m);
    color: var(--text-fill-1);
    background-color: var(--surface-fill-1);
    border: 1px solid var(--surface-fill-3);
    display: block;
    transition: border-color .15s linear;
    position: relative;
}

    #quicksearch:focus, #quicksearch:focus-visible, #quicksearch:active {
        border-color: var(--surface-fill-3);
        outline: none;
    }



.reset {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 16px;
    background: 0 0;
    border: none;
    font-size: 16px;
    color: var(--text-fill-3);
    opacity: 0;
    transition: opacity .15s linear;
}

#quicksearch:focus + .reset, #quicksearch:focus-visible + .reset, #quicksearch:active + .reset {
    opacity:1;
}

span.search-trigger {
    width: 30px;
    height: 44px;
    border: none;
    outline: none;
    -webkit-appearance: none;
    background: none;
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.3s ease;
    display:flex;
    justify-content:center;
    align-items:center;
}


span.search-trigger i {
    color: #ccc;
    font-size:16px;
    transition: color 0.3s ease;
}
span.search-trigger.search-trigger-active i{
    color:#337ab7;
}
span.search-trigger:focus{
    outline: none;
}
@media (min-width:992px) and (max-width:1199px) {
    .driver-connections .driver-data-sources.d-flex.horiz-tiles .source .for {
        font-size: 12px;
    }

    .driver-connections .driver-data-sources.d-flex.horiz-tiles .source .icon img {
        width: 30px;
    }
}
@media (min-width:768px) and (max-width:1199px){
    .product-item-subfilter-wrapper{
        align-items:flex-start;
    }
    
    .search-block-wrapper{
        flex:0 0 30%
    }
    
    
}

@media (min-width:768px) {
    #product-item-vertical-subfilter.stuck {
        position: sticky;
        top: 100px;
    }
}

@media (max-width:767px){
    #product-item-subfilter, .search-block-wrapper{
        flex:0 0 auto;
        width:100%;
        max-width:100%;
        
    }

    #product-item-subfilter{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    
    span.search-trigger {
        height: 36.5px;
        left: 0;
        right: auto;
    }
    .search-block-wrapper {
        justify-content: flex-start;
    }
    .search-block.active {
        width: calc(100% - 30px);
        opacity: 1;
        margin-left: 30px;
    }
}

