/*    We want to move from table to flex-wrap */
div#contentDiv table.above-fold {
    max-width: 1350px;
    width:95%;
    display: block;
    border-collapse: collapse;
    border: none;
    /*border: 1px solid black;*/
    padding: 0;
    margin: 0 auto;
}
div#contentDiv table.above-fold td.left-side {
    width: 48%;
    border: none;
    vertical-align: top;
    margin: 0;
    padding: 5px 12px 5px 0;
}
div#contentDiv h1.big_heading {
    font-size: 46px;
    text-decoration: none;
    font-weight: bold;
    margin: 0.5em auto;
    line-height: 1.15;
}
div#contentDiv h2 {
    font-size: 24px;
    text-decoration: none;
    font-weight: normal;
    margin: 0.5em auto;
    line-height: 1.1;
}
div#contentDiv table.above-fold td.left-side * {
    font-size: 18px;
}
div#contentDiv table.above-fold td.right-side {
    width: 49%;
    vertical-align: top;
    border: none;
    /*border: 1px solid red;*/
    padding: 10px;
    margin: 0;
}
div#contentDiv div#rh-img-d {
    display: flex;
    justify-content: center;
    border: 1px solid #d0e0d0;
    margin: 0;
    padding: 1em;
    border-radius: 15px;
    background: #f0faf0;
}
div#contentDiv div#rh-img-d img#rh-img {
    border-radius: 15px;
    width: 6.25in;
    #max-height: 500px;
    margin: 0 auto;
}
div#contentDiv table.above-fold td.right-side ul,
div#contentDiv div#lower-img-d ul {
    width: 100%;
    text-align: center;
}
div#contentDiv ul.tncliker {
    margin: 0.25em auto;
    padding: 0;
}
div#contentDiv ul.tncliker li {
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
div#contentDiv ul.tncliker li a {
    width: 2em;
    padding: 6px;
    margin: 2px;
    background: #f0f0f0;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
}
div#contentDiv div#lower-img-d {
    width: inherit;
    margin: 1em;
    padding: 0;
    vertical-align: middle;
    text-align: center;
    max-height: 840px;
    overflow: hidden;
    border: 1px solid #d0e0d0;
    border-radius: 10px;
    background: #f0faf0;
}
div#contentDiv div#lower-img-d img#lower-img {
    width: 100%;
    max-width: 1600px;
    max-height: 780px;
}
div#contentDiv div.furtherdetails {
    width: 100%;
    height: 4em;
    border: none;
    margin: 2em auto 3em 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
div#contentDiv div.furtherdetails div {
    display: inline-block;
    margin: 2em 1em;
}
div#contentDiv div.furtherdetails div a {
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    padding: 1em;
    margin: 0;
    border: 1px solid #d0e0d0;
    border-radius: 35px;
}
a.yellowbox, a:visited.yellowbox {
    background: #ffa52d;
    color: black;
}
div#contentDiv table.above-fold td.left-side h3 {
    font-size: 14px;
    font-weight: normal;
    line-height: 0.9;
    color: darkslategray;
    background: #f0ffF0;
    border: 1px solid lightgray;
    border-radius: 9px;
    padding: 8px;
    display: inline-block;
}
div#contentDiv table.above-fold td.left-side ul {
    text-align: right;
    list-style: none;
    border: none;
    border-radius: 15px;
    margin: 0;
    padding: 0;
    max-height: 500px;
}
div#contentDiv table.above-fold td.left-side ul li {
    align-items: center;
    display: inline-block;
    min-width: 4em;
    max-width: 8em;
    min-height: 4em;
    max-height: 6em;
    vertical-align: middle;
    text-align: center;
    margin: 10px;
    list-style-type: none;
    line-height: 1.08;
    padding: 0.5em;
    border: 1px solid lightgray;
    border-radius: 13px;
    background: #f0fff0;
    color: darkslategray;
}
/* --chars is inserted via js */
div#contentDiv table.above-fold td.left-side ul li span {
    --scale: calc(41rem - (var(--chars) * 1.51rem));
    font-size: clamp(1.25rem, var(--scale), 2.5rem);
    font-weight: normal;
    overflow-wrap: break-word;
}

/*Above Fold*/
div#contentDiv div.aboveFoldRow {
   display: flex;
   max-width: 95%;
   justify-content: center;
   margin: 10px;
   padding: 0.5em;
}
div#aboveFoldRow, div.leftBlock, div.rightBlock {
   #border: 3px solid black;
   width: 48%;
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
   font-size: 14px;
   line-height: 0.9;
}
div#aboveFoldRow, div.leftBlock {
   margin-right: 5px;
}
div#aboveFoldRow, div.rightBlock {
   margin-left: 5px;
   max-width: 6.5in;
}

div#contentDiv div.longDesc {
   display: grid;
   place-items: center;
   max-width: 700px;
   margin: 0 auto;
   padding: 0 20px;
}
div#contentDiv div.specSheet {
   display:flex;
   flex-direction: row;
   justify-content: center;
   gap: 20px;
   padding: 20px;
   background: radial-gradient(circle, rgba(176, 217, 193, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
div#contentDiv div.specSheet div.specPage {
   display: flex;
   flex-direction: column;
   gap: 20px;
}
div#contentDiv div.specSheet div.specCard {
   border: 2px solid black;
   border-radius: 12px;
   padding: 10px;
   background-color: #d0e0d0;
   max-width: 8in;
}
div#contentDiv div.multiSpec {
   display: grid;
   grid-template-columns: auto auto;
   gap: 10px;
}
div#contentDiv div.miniSpec {
   border-radius: 8px;
   #background-color: #C0C0C0;
   background-color: rgba(232, 211, 114, 1);
   padding: 8px;
   box-shadow: 3px 5px;
}
div#contentDiv div.imageRibbon {
   display: flex;
   flex-direction: row;
   justify-content: center;
   background-color: #2F4F4F;
   padding: 20px;
   gap: 10px;
}
div#contentDiv div.imageHolder {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   max-height: 80%;
   max-width: 80%;
}
div#contentDiv div.thumbnail {
   max-height: 80%;
   max-width: 80%;
}
div#contentDiv img.thumbnailImg {
   width: auto;
   height: auto;
   max-width: 100%;
   max-height: 100%;
}
div#contentDiv table.specTable {
   border: 2px solid grey;
   border-collapse: separate;
   border-radius: 15px;
   border-spacing: 0;
   padding: 5px;
}
div#contentDiv ul.badgeRow {
   background: radial-gradient(circle, rgba(176, 217, 193, 1) 50%, rgba(255, 255, 255, 1) 100%);
   display: flex;
   justify-content: center;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   list-style: none;
}
div#contentDiv div.badgeHolder {
   background-image: url('../images/badges/chevron-gold-wide.png');
   background-repeat: no-repeat;
   background-size: 100% 80%;
   background-position: center;
   max-height: 1.3in;
   max-width: 1.3in;
   height: 1.3in;
   width: 1.3in;
   margin-left: -15px;
   margin-right: -15px;
   margin-top: -15px;
   margin-bottom: -15px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
}	
div#contentDiv img.badgeIcon {
   max-height: 0.8in;
   max-width: 0.8in;
   height: 0.4in;
   width: 0.4in;
   opacity: 0.95;
   margin-left: 25px;
   margin-bottom: -10px;
}
div#contentDiv p.badgeText {
   display: flex;
   justify-content: center;
   align-items: center;
   /*max-height: 0.15in;*/
   color: white;
   margin-left: 0px;
   margin-bottom: 3px;
   text-shadow: 2px 2px 2px black;
   font-size: 0.8em;
   font-family:   "Geist", "Noto Sans", "DejaVu Sans","Helvetica New", "Century Gothic", "DejaVu Sans", Arial, Helvetica, sans-serif;
   line-height: 0.8em;
}
div#contentDiv div.priceLine {
   display: flex;
   justify-content: center;
}
div#contentDiv table.featureTable, .featureTable th, .featureTable tbody {
   border-color: white;
   width: 100%;
   border-collapse: collapse;
}
div#contentDiv tr.featureRow {
   #background-image: linear-gradient(90deg, rgba(176, 217, 193, 1), rgba(212, 175, 55, 0.9));
   background-image: linear-gradient(90deg, rgba(97, 158, 123, 1), rgba(212, 175, 55, 1));
   height: 50px;
}
div#contentDiv img.featureIcon {
   max-height: 0.8in;
   max-width: 0.8in;
   #height: 0.5in;
   #width: 0.5in;
   margin-left: 0.5in;
   margin-right: -0.2in;
}
div#contentDiv p.featureLabel {
   color: white;
   font-size: 24px;
   text-shadow: 1px 1px 1px black;
}
div#contentDiv td.featureCell {   
   height: 25px;
   padding: 0;
}
div#contentDiv table.smallTable, .smallTable td, .smallTable tr, .smallTable th {
   font-size: 14px !important;
   border: none !important;
   padding: 6px;
}
div#contentDiv div.bentoHolder {
   display: inline-block;
   margin: 1em;
   padding: 0;
   vertical-align: middle;
   text-align: center;
   max-height: 840px;
   overflow: hidden;
}
div#contentDiv div.bentoHolder img#bentoImage {
   max-width: 1350px;
   max-height: 780px;
   margin: 0 auto;
   object-fit: contain;
}