.site-sub-header{
    /* position: fixed; */
    position:sticky;
    top:0px;
    right: 0;
    width: 100%;
    z-index: 200;
}
.site-main-content{
    padding:0px;
    /* padding-top: 60px; */
    padding-bottom: 20px;
    max-width: unset;

}
.site-main-content.features{
    padding-bottom: 40px;
    position: relative;
}
.site-main-content.spec *{
    color:#656565 !important;
}

.site-sub-header-right a{
    text-decoration: none;
}
/* product ad */
.product-content{
    /* max-width: 1130px; */
    width: 100% !important;
    max-width: 100% !important;
    font-size: 20rem;
}

.product-content img{
    max-width: 100% !important;
    height: auto !important;
}

/* Video embeds (YouTube etc.) have no max-width constraint of their own,
   unlike img above. Once table-layout:fixed makes a column a strict
   percentage width, an iframe with a wider declared HTML width attribute
   than its column overflows sideways into the next column/spacer instead of
   shrinking to fit. Cap width only - height is left alone since these
   iframes already carry a correct explicit height attribute, and forcing
   height:auto on an iframe (no intrinsic aspect ratio) collapses it to the
   browser's ~150px default instead of scaling. */
.product-content iframe{
    max-width: 100% !important;
}

.product-content table tr td span,.product-content table tr td p{
    /*font-size: 17px !important;*/
}
/*.product-content table tr td ol{*/
/*    list-style-position: inside;*/
/*}*/
/*.product-content table tr td ol p{*/
/*    display: inline-block;*/
/*}*/

/*
.product-content table tr td ol,.product-content table tr td ul{
    list-style-position: inside;
}

.product-content table tr td ol p,.product-content table tr td ul p{
    display: inline-block;
}
*/
.product-content table tr td ol,.product-content table tr td ul
{
    padding-left: 20px;
}
.product-ad{
    background-color: gray;
}
.product-ad-banner{
    width: 100%;
    height: auto;
}
.product-ad-wrap{
    height: 400px;
    color: black;
}
.product-ad-wrap{
    width: 100%;
    max-width: 1000px;
    margin:0px auto;
}
.product-ad-des-title{
    font-size: 32rem;
    font-weight: bold;
}
.product-ad-des-sub-title{
    font-size: 26rem;
    margin-top: 20px;
}
.product-ad-des-sub-title2{
    font-size: 26rem;
    font-weight: bold;
    margin-top: 10px;
}
.product-ad-img{
    width: 400px;
    height: auto;
}

.product-content{
    padding-top: 20px;
}

/* table{
    width: 100% !important;
} */
/* MeuboVue */
/* .meibovue table td:nth-of-type(1){
    width: 44% !important;
}
.meibovue table td:nth-of-type(2){
    width: 6% !important;
}
.meibovue table td:nth-of-type(3){
    width: 50% !important;
}
.meibovue table td p,.meibovue table td span{
    background: none !important;
}
.meibovue table td video,.meibovue table td:not(.custom) img{
    width: 100% !important;
    height: auto !important;
} */
.meibovue table td ol li p{
    margin-left: 0px !important;
}

/* Same fix as .iflo: table-layout:auto lets the browser's column-width
   algorithm defer to the images' native pixel size (from their HTML width
   attribute) instead of the CSS max-width cap, so the empty spacer <td>
   (no content, no minimum size) gets squeezed down to a few px once the
   image columns claim more than their fair share. table-layout:fixed makes
   column widths strictly follow the first row's declared widths; min-width
   is a floor in case that still isn't enough at some viewport. */
.meibovue table{
    /*width: 100% !important;*/
    table-layout: fixed !important;
}
.meibovue.features table td:nth-of-type(2){
    min-width: 30px !important;
}

/* Quik Vue */
.quikvue table{
    /*width: 100% !important;*/
    table-layout: fixed !important;
}
.quikvue.features table td{
    vertical-align: middle;
}
.quikvue.features table td:nth-of-type(1){
    width: 38.6% !important;
}
.quikvue.features table td:nth-of-type(2){
    width: 7% !important;
    min-width: 30px !important;
}
.quikvue.features table td:nth-of-type(3){
    width: 54.4%  !important;
}
.quikvue.features table td p,.iflo table td span{
    background: none !important;
}
.quikvue.features table td video,.quikvue.features table td:not(.custom) img{
    width: 100% !important;
    height: auto !important;
}

.quikvue.features table.image-table td{
    width: 25% !important;
    padding:10px;
}
.quikvue.features table.image-table tr:not(.firstRow) td *{
    color:#656565 !important;
}
.quikvue.features table.image-table tr:not(.firstRow) td p{
    text-align: center;
}

/* QuikVue Spec: unlike iexpressor-spec/lidvue-spec (authored with a smaller
   fixed inline px width on the table itself), this table was exported with
   the <table> tag carrying an HTML width="100%" attribute while its cells
   still declare fixed px widths (429px+641px). Removing the old CSS
   width:100% override wasn't enough here - an HTML attribute is lower
   priority than any author CSS rule, so once no CSS "width" property applied
   at all, the attribute's 100% just won by default. Force it to iexpressor-
   spec's own authored width (927px) instead for a consistent compact look;
   the cell widths then just scale proportionally within that box. */
.quikvue.spec .product-content table.fr-alternate-rows{
    width: 927px !important;
    table-layout: fixed !important;
}
@media (max-width: 1200px) {
    .quikvue.spec .product-content table.fr-alternate-rows{
        width: 100% !important;
        max-width: 100% !important;
    }
    .quikvue.spec .product-content table.fr-alternate-rows td,
    .quikvue.spec .product-content table.fr-alternate-rows th{
        width: auto !important;
    }
}

/* antervue Vue */
.antervue table{
    width: 100% !important;
    table-layout: fixed !important;
}
.antervue.features table td{
    vertical-align: middle;
}
.antervue.features table td .textwith{
    width: 85%;
}
.antervue.features table td:nth-of-type(1){
    width: 38.6% !important;
}
.antervue.features table td:nth-of-type(2){
    width: 7% !important;
    min-width: 30px !important;
}
.antervue.features table td:nth-of-type(3){
    width: 54.4%  !important;
}
.antervue.features table td p,.iflo table td span{
    background: none !important;
}
.antervue.features table td video,.antervue.features table td:not(.custom) img{
    height: auto !important;
}

.antervue.features table.image-table td{
    width: 25% !important;
    padding:10px;
}
.antervue.features table.image-table tr:not(.firstRow) td *{
    color:#656565 !important;
}
.antervue.features table.image-table tr:not(.firstRow) td p{
    text-align: center;
}


/* iFlo Vue */
.iflo table{
    /*width: 100% !important;*/
    table-layout: fixed !important;
}
.iflo.features table td{
    vertical-align: middle;
}
.iflo.features table td:nth-of-type(1){
    width: 46% !important;
}
.iflo.features table td:nth-of-type(2){
    width: 8% !important;
    min-width: 30px !important;
}
.iflo.features table td:nth-of-type(3){
    width: 46% !important;
}
.iflo.features table td p,.iflo table td span{
    background: none !important;
}

/* iFlo Spec: this table's own inline style is width:100% with percentage
   (40%/60%) column widths, so removing the CSS override left it exactly as
   before - the 100% was never a leftover CSS override here, it's the
   table's own authored value. Force it to iexpressor-spec's own authored
   width (927px) to match the compact look on the other Spec pages; the
   percentage columns then just scale proportionally within that box. */
.iflo.spec .product-content table.fr-alternate-rows{
    width: 927px !important;
    table-layout: fixed !important;
}
@media (max-width: 1200px) {
    .iflo.spec .product-content table.fr-alternate-rows{
        width: 100% !important;
        max-width: 100% !important;
    }
    .iflo.spec .product-content table.fr-alternate-rows td,
    .iflo.spec .product-content table.fr-alternate-rows th{
        width: auto !important;
    }
}

/* lidvue Vue: scoped to .features specifically (not bare .lidvue) so it
   doesn't reach the Spec page's Froala tables below - those must NOT be
   forced to width:100% at PC widths, they need to keep their own authored
   width (matching eyestream-spec/iexpressor-spec). */
.lidvue.features table{
    width: 100% !important;
    table-layout: fixed !important;
}

/* Spec page tables (class="fr-alternate-rows") carry a hardcoded inline
   width plus a hardcoded pixel width on every individual <td>/<th> from
   Froala's column-resize feature. Fine at PC widths (natural authored
   size), only needs correcting once the viewport gets narrower than that
   and would otherwise clip the table's right edge. */
@media (max-width: 1200px) {
    .lidvue.spec .product-content table{
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    .lidvue.spec .product-content table td,
    .lidvue.spec .product-content table th{
        width: auto !important;
    }
}

.lidvue.features table td:nth-of-type(1){
    width: 46% !important;
}
.lidvue.features table td:nth-of-type(2){
    width: 8% !important;
    min-width: 30px !important;
}
.lidvue.features table td:nth-of-type(3){
    width: 46% !important;
}
.lidvue.features table td p,.lidvue table td span{
    background: none !important;
}
.lidvue.features table td video,.lidvue table td:not(.custom) img{
    width: 100% !important;
    height: auto !important;
    max-width: 600px;
}
.fr-video iframe{
    width: 100% !important;
}
/* iexpressor: scoped to .features specifically (not bare .iexpressor) so it
   doesn't reach the Spec page's Froala tables below - those must NOT be
   forced to width:100%, they need to keep their own authored width at PC
   sizes. */
.iexpressor.features table{
    width: 100% !important;
}

/* Spec page tables (class="fr-alternate-rows") carry a hardcoded inline
   width (e.g. style="width:927px") plus a hardcoded pixel width on every
   individual <td>/<th> from Froala's column-resize feature. That's fine at
   PC widths - like eyestream-spec and the other product Spec pages, it
   should just display at its own authored width, not stretch to fill the
   whole content column. It only needs correcting once the viewport gets
   narrower than that authored width and would otherwise clip the table's
   right edge. */
@media (max-width: 1200px) {
    .iexpressor.spec .product-content table{
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }
    .iexpressor.spec .product-content table td,
    .iexpressor.spec .product-content table th{
        width: auto !important;
    }
}

.iexpressor table td p,.lidvue table td span{
    background: none !important;
}
.iexpressor table td video,.iexpressor table td:not(.custom) img{
    height: auto !important;
}
.iexpressor table tr:nth-of-type(3) td img{
    max-width: 500px;
}
.fr-video iframe{
    max-width: 600px;
}
.iexpressor.features .product-content> table:nth-child(1) td:nth-of-type(1){
    width: 38.6% !important;
}
.iexpressor.features .product-content> table:nth-child(1) td:nth-of-type(2){
    width: 7% !important;
    min-width: 30px !important;
}
.iexpressor.features .product-content> table:nth-child(1) td:nth-of-type(3){
    width: 54.4% !important;
}

/* pagagraph */
.paragraph-item {
    font-size: 20rem;
    color: black;
    padding:20px 100px;
}
.text-section-header{
    color: rgb(0, 195, 255);
    font-size: 24rem;
}

/* Spec */

.spec-wrap{
    width: 100%;
    padding:20px 40px;
}
.spec-table{
    width: 100%;
    margin:0px auto;
}
.spec-table th{
    font-size: 26rem;
    font-weight: bold;
    text-align: left;
}
.spec-table tr td{
    font-size: 22rem;
    color:rgb(33, 37, 41);
}
.spec-table tbody tr:nth-child(even){
    background-color: rgb(239, 239, 239);
}

/* override */
li{
    list-style: inherit;
}