@media only screen and (min-width: 1024px) {

.pimspecsMainContainer
  {
    min-width:992px;
    margin: 3px;
  }
.variantColorImage
{
    height: 159px;
    width: 300x;
    position: absolute;
    z-index: 1;
    background-color: white;
    border: 1px solid grey;
}
.ui.card {
    width: 210px !important;
}

.selectedCarCard {
    box-shadow: 0 0 10px black !important;
}

.cardscontainer {
    
    margin:0 auto;
}

.ui.toggle.checkbox input:focus:checked~.box:before,
.ui.toggle.checkbox input:focus:checked~label:before {
    background-color: black !important
}

.ui.toggle.checkbox input:checked~.box:before,
.ui.toggle.checkbox input:checked~label:before {
    background-color: black !important;
}

sub,
sup {
    /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
    font-size: 75%;
    /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
    line-height: 0;
    /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
    position: relative;
    /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
    vertical-align: baseline;
}

sup {
    /* Move the superscripted text up */
    top: -0.5em;
}

sub {
    /* Move the subscripted text down, but only half as far down as the superscript moved up */
    bottom: -0.25em;
}

.specdisclaimertext {
    font-size: 14px;
}

.specsTable {
    margin-bottom: 10px !important;
    break-inside: avoid;
    break-before: always;
}

.dropdown
{
    min-height: 18px !important;
}

#dropdownEngines
{    
    margin-bottom: 15px;
}

#carSpecsHeader
{
    margin-bottom:10px;
    margin-top:30px;
}

.showImageText
{

    cursor: pointer;
    font-size:20px;
}

#tablesContainerMobile
{
    display: none;
}

#mobileSelection
{
    display: none;
}


#motorMobilesContainer
{
    display: none;
}

#divValueExplanation
{

}

#tablesEnginesContainerMobile
{
    display: none;;
}


.explanationicondiv
{
    margin-right: 10px;

}

#msgNoVariantSelected
{
    max-width: 500px;
    margin: 0 auto;
}


#motorVariantSelector
{
    display: none;
}

}
@media only screen and (max-width: 1023px) {


    .variantColorImage
    {
        height: 159px;
        width: 300x;
        position: absolute;
        z-index: 1;
        background-color: white;
        border: 1px solid grey;
    }
    .ui.card {
        width: 210px !important;
    }
    
    .selectedCarCard {
        box-shadow: 0 0 10px black !important;
    }
    
    .cardscontainer {
        display: none !important;
    }
    
    .ui.toggle.checkbox input:focus:checked~.box:before,
    .ui.toggle.checkbox input:focus:checked~label:before {
        background-color: black !important
    }
    
    .ui.toggle.checkbox input:checked~.box:before,
    .ui.toggle.checkbox input:checked~label:before {
        background-color: black !important;
    }
    
    sub,
    sup {
        /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
        font-size: 75%;
        /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
        line-height: 0;
        /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
        position: relative;
        /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
        vertical-align: baseline;
    }
    
    sup {
        /* Move the superscripted text up */
        top: -0.5em;
    }
    
    sub {
        /* Move the subscripted text down, but only half as far down as the superscript moved up */
        bottom: -0.25em;
    }
    
    .specdisclaimertext {
        font-size: 14px;
    }
    
    .specsTable {
        margin-bottom: 10px !important;
    }
    
    
    #dropdownEngines
    {
        min-height: 18px !important;
        margin-bottom: 15px;
    }
    
    .showImageText
    {
        text-decoration: underline;
        cursor: pointer;
    }
    
    
    #enginesHeader
    {
        margin-top:20px;
    }
    
    
    #gridSpecificationsDesktop
    {
        display: none;
    }
    
    
    
    #mobileDropdownModels
    {
        margin-bottom: 10px;
        width:600px !important;
        max-width: 88% !important;
        box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15);
        border-radius: .28571429rem;
    }
    
    #dropdownMobileEngines
    {
        margin-bottom: 10px;
        width:600px !important;
        max-width: 88% !important;
        box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15);
        border-radius: .28571429rem;

    }
    
    #mobileDropdownVariants
    {
        margin-bottom: 10px;
        width:600px !important;
        max-width: 88% !important;
        box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15);
        border-radius: .28571429rem;
    }
    
    #carSpecsHeader
    {
        font-size: 17px;
        margin-bottom:12px;
    }
    
    #mobileDropdownModelsList
    {
        max-height: 50rem !important;
    }
    
    .dropdown
    {
        min-height: 18px !important;
    }
    
    .explanationicondiv
    {
       
        margin-right: 10px;
        margin-bottom: 10px;
        
    }

    #divValueExplanation
    {
       
        margin-right: 10px;
        margin-bottom: 20px;
        
    }
    
    .ui.styled.accordion .accordion .content, .ui.styled.accordion .content {
        margin: 0 !important;
        padding: 0.1em 0.2em 1.5em !important;
    }
    
    
    #mobileModelHeader
    {
        margin-bottom: 10px;
    }
    
    #mobileVariantHeader
    {
        margin-bottom: 10px;
    }
    
    }.print
{
    font-size: 12px !important;
}

.printtable
{

}

#printSpecSheet
{
    max-width: 95%;

}

#printSpecSheet
{
    width:100%;
    
}

#printheader
{

    text-align: center;
}



#printingSpecsLogo
{
    float:left;
    padding-top:50px;
    height: 200px;
    width: 200px;
}


#printingSpecsHeader
{
    float:left;
    padding-top:45px;
    margin-left:100px;
}

#printingSpecsImage
{
    margin-left:100px;
    height:100px;
    width:100px;
}i.icon, i.icons {
    font-size: 0.6em !important;
}