body {
    line-height: 1.5;
    text-size-adjust: 100%;
    background-image: url("/static/images/gray.png");
    font-size: 1rem;
    font-weight: 400;
    font-family: 
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        "PingFang TC", "Apple LiGothic Medium", 
        "Microsoft JhengHei", 
        "Noto Sans CJK TC", "Source Han Sans TC", 
        "WenQuanYi Micro Hei", 
        sans-serif;
}


h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 0.25em;
}

h1 {
    font-size: 1.75rem;
	font-weight: bold;
	color: #000;
	margin-left: -2px;
	margin-bottom: 5px;
	letter-spacing: 2px;
	padding-left: 10px;
	border-left: 6px solid #D3351F;
}

h2 {
    font-size: 1.5rem;
	letter-spacing: 1px;
    border-bottom: 1px solid #999;
}

h3 {
    font-size: 1.25rem;
}

h4, h5, h6 {
    font-size: 1rem; 
}

p {
    font-size: 1rem;
}

hr {
    border: none;
    height: 1px;
    background: black;
    margin-top: 0;
}

a {
	color: #CA351E;
	text-decoration: none;
}

a:hover {
	color: #F43F23;
    border-bottom: 1px solid;
}

a:active {
	color: #000;
}


/* fix for images/videos making the parent element a few pixels too tall */
img {
    vertical-align: middle;
}

video {
    vertical-align: middle;
}

header {
	height: 60px;
    margin-bottom: 2px;
}

#ttmain {
    box-sizing: border-box;
	width: 1024px;
    min-height: 90vh;
    margin: 3vh auto;
    background-color: #fcfcfc;
	position: relative;
    padding: 1.25em 1.5em;
    border-top: 1px solid #CCC;
    border-left: 1px solid #CCC;
    border-bottom: 4px solid #666;
    border-right: 4px solid #666;
    display: grid;
    grid-template-rows: min-content auto min-content;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.flex-col {
    flex-direction: column;
}

.flex-space-between {
    justify-content: space-between;
}

.flex-break {
    width: 100%;
    height: 0%;
    margin-bottom: 2%
}

.flex-break-column {
    border-bottom: 1px solid #000;
    flex-direction: column;
    flex-basis: 100%;
    height: 100%;
    width: 0;
}

#title {
	font-size: 12px;
	letter-spacing: 1px;
	width: 120px;
	float: left;
	margin-top: 40px;
	padding-right: 15px;
	padding-left: 10px;
}

#quote {
	font-size: 14px;
	font-style: italic;
	color: #333;
}

#logo div,
#logo img {
    margin-right: 1em;
    display: inline-block;
    vertical-align: bottom;
}

#logo a {
    text-decoration: none !important;
    border-bottom: none !important;
}

#header-menu {
    position: relative;
}

#language-selector {
    font-size: 14px;
	color: #666;
	text-align: right;
}

.break-line {
    width: 100%;
    margin-bottom: 0.25em;
    margin-top: 0.25em;
}

#navigation-menu {
	font-size: 14px;
	color: #000;
	text-align: right;
    position: absolute;
    bottom: 0;
    right: 0;
    width: max-content;
}

.home-grid-container {
    display: grid;
    grid-template-columns: min-content auto;
    grid-template-rows: min-content auto;
    gap: 1em;
}

.home-aboutus {
    grid-column: 1 / -1;
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em
}

#home-video {
	background-color: #CCC;
	border: 1px solid #CCC;
    width: min-content;
    height: min-content;
}

#legal-footer {
    font-size: 14px;
	text-align: center;
	margin-top: 1em;
}





.menu-element {
    border-left: solid #CA351E 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-bottom: 5px;
}

/* scroll up bar */
.scrollup {
    /* invisible by default, see scrollup_visibility() */
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: #282828cc;
}

.scrollup-text {
    transform: rotate(180deg);
    writing-mode: vertical-lr;
    color: white;
    margin-top: 10px;
}

.scrollup-arrow {
    position: absolute;
    bottom: 5px;
    left: 1px;
    right: 1px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid white;
    margin: auto;
}

.company-text p {
    text-indent: 2ch;
}

.company-image {
    margin-top: 1rem;
    border: 1px solid #CCC;
}


/* *********************************************************** */
#contact-text {
    box-sizing: border-box;
    font-style: normal;
    padding-left: 1em;
}

#contactus {
    overflow:hidden;
    width:100%;
    border: 0;
}

table {
    margin: 1em 0;
    border-collapse:collapse;
    border-spacing:0; 
    border: 1px solid lightgray; 
    width: 100%;
    font-family:inherit;
    font-size:100%;
    text-align:left;
    vertical-align:top;
}

table td {
    padding:10px 5px; word-break:normal;
}

table tr {
    border: 1px lightgray; border-style: solid none;
}

table th {
    border: none; background: lightgray; font-weight:normal; overflow:hidden;
    padding:10px 5px; word-break:normal; align-content: center;
}

table th:nth-child(1) { text-indent: 0.5em; }

table td:nth-child(1) { text-indent: 0.5em; }

.product-gallery {
    width: 300px; height: fit-content; padding: 4px; border: 1px solid lightgray; 
    float: right; margin-left: 1em; margin-bottom: 1em;
}

.main-image-link {
    display: block; border: 1px solid #ccc;
}
a.main-image-link:hover { border-bottom: 1px solid #ccc; }

.main-image {
    display: block; width: 100%; object-fit: contain; background: #f5f5f5;
}

.thumbnails { 
    display: flex; gap: 8px; margin-top: 10px; overflow-x: auto;
}

.thumb { 
    padding: 0; border: 2px solid transparent; background: none; 
    cursor: pointer; flex: 0 0 auto;
}

.thumb img { 
    display: block; width: 80px; height: 80px; object-fit: cover;
}

.thumb.active { border-color: #000;}

.product-page-grid { 
    display: grid; grid-template-columns: auto min-content; 
}

.product-page-flex {
    display: flex; gap: 1em; 
}

a.pdflink { 
    width: 50%; background-color: #CA351E; color: white;
}

a.pdflink:hover { 
    background-color: #F43F23; color: white; border-color: #F43F23;
}

a.contactsales { 
    width: 50%; background: white; color: #CA351E;
}

a.contactsales:hover { 
    background-color: white; color: #F43F23; border-color: #F43F23;
}

a.linkbox { 
    padding: 1em; justify-content: center; align-items: center; display: flex; border-radius: 1em; border: 2px #CA351E solid;
}

a.linkbox:hover {border-bottom-width: 2px}

a.linkbox > p { margin: 0; }

:target { border-bottom: 2px black dotted; }




.toc{
    list-style: none;
    padding-left: 0;
}

.toc ul {
    list-style: none;
    padding-left: 2em;
}

.toc-number {
    color: black;
    font-weight: normal;
    padding-right: 0.5em;
}

.product {
    font-family: sans-serif;
    font-size: 16px;
}

.product hr {
    clear: right;
    margin-top: 4px;
    margin-bottom: 4px;
}

.product table {
    width: 100%;
    border-collapse: collapse;
}

table.product th {
    border: 1px solid darkslategray;
    padding: 1px;
    vertical-align: top;
    text-align: left;
    white-space: nowrap;
}

.product td {
    border: 1px solid darkslategray;
    padding: 1px;
    vertical-align: top;

    /* padding-left: 1ch; */
}

.product tr + tr {
    /* border-top: 1px solid darkslategray; */
}

.product-infobox {
    float:right;
    border: 1px solid darkslategray;
    background: #fafafa;
    padding: 2px;
    margin: 4px;
}

.product-image {
    display: inline-block;
    width: 180px;
    height: 180px;
    border: 1px solid black;
}

.product-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.product-image-unlimited {
    border: 1px solid black;
}

.product-image-unlimited img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.products-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1em;
}

/* left column, from top to bottom */
.products-row-span-all {
    grid-row: 1 / -1;
}

.product-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0.75em;
}

.product-card + .product-card {
    /* margin-top: 0.75em; */
}

.product-card :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    margin-bottom: 0;
}

.product-card-wide {
    grid-column: 2 / span 2;
}

.product-section {
    grid-column: 2 / span 2;
    margin-left: 0;
}

/* remove grid gap between section and following card */
.product-section + .product-card {
    margin-top: -1em;
}

/* add gap between card and following section */
.product-card + .product-section {
    margin-top: 2em;
}


.pdf-icon {
    height: 1.6em;
    width: 1.6em;
    vertical-align: bottom;
    display: inline;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dashed black;
}

.tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;

    /* for putting tooltips into headings */
    font-size: 16px;
    font-weight: normal;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.product-model {
    border: 1px solid black;
    background: transparent;
    padding: 0.25em;
}

.products-title {
	font-family: sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #000;
	margin-bottom: 5px;
	letter-spacing: 2px;
	padding-left: 10px;
	border-left: 3px solid #D3351F;
}

.products-text {
	padding-left: 1em;
}

.download-icon {
    display: inline-block;
    height: 24px; width: 24px;
    background-size: 24px; 
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" /></svg>');
}

/* main style */
div.feature {
  padding: 0;
  padding-bottom: 0.25em;
  margin-bottom: 20px;
  background-color: #eee;
  #border: 1px solid;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

div.feature p {
  margin: 0.5em 1em;
  padding: 0;
}

div.feature p a {
  color: inherit !important;
}

div.feature div.highlight {
  margin-left: 1em;
  margin-right: 1em;
}

div.feature table.highlighttable {
  padding-left: 1em;
  padding-right: 1em;
}

div.feature table.highlighttable div.highlight {
  margin-left: 0;
  margin-right: 0;
}

div.feature ul,
div.feature ol {
  margin: 0.1em 0.5em 0.5em 3em;
  padding: 0;
}

/* title style */
div.feature p.feature-title {
  color: #fff;
  background-color: #D3351F;
  margin: 0;
  padding: 0.2em 0 0.2em 0.5em;
  font-weight: bold;
  display: block;
}

div.feature p.feature-title::before {
  display: inline-block;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
  background-repeat: no-repeat;
  height: 24px; width: 24px;
  background-size: 24px;
  vertical-align: -40%;
  padding-right: 1em;
}

/* icons data */
div.feature .feature-default-icon::before {
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /> <path d="M9 12l2 2l4 -4" /></svg>');
}

div.download-icon {
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" /></svg>');
}

div.feature .bolt::before {
  background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"/></svg>');
}

div.feature .loadbalancer::before {
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 13a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M11 20a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 16v3" /><path d="M12 10v-7" /><path d="M9 6l3 -3l3 3" /><path d="M12 10v-7" /><path d="M9 6l3 -3l3 3" /><path d="M14.894 12.227l6.11 -2.224" /><path d="M17.159 8.21l3.845 1.793l-1.793 3.845" /><path d="M9.101 12.214l-6.075 -2.211" /><path d="M6.871 8.21l-3.845 1.793l1.793 3.845" /></svg>');
}

div.feature .gear::before {
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg>');
}

div.feature .resize::before {
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11v8a1 1 0 0 0 1 1h8m-9 -14v-1a1 1 0 0 1 1 -1h1m5 0h2m5 0h1a1 1 0 0 1 1 1v1m0 5v2m0 5v1a1 1 0 0 1 -1 1h-1" /><path d="M4 12h7a1 1 0 0 1 1 1v7" /></svg>');
}

div.feature .topology-star::before {
    background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 18a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M20 6a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M8 6a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M20 18a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M14 12a2 2 0 1 0 -4 0a2 2 0 0 0 4 0" /><path d="M7.5 7.5l3 3" /><path d="M7.5 16.5l3 -3" /><path d="M13.5 13.5l3 3" /><path d="M16.5 7.5l-3 3" /></svg>');
}