table,tr,td{font-size:12px}
.btn{background:#eeffee;border:2px solid green;font-weight:bold}
.bac1{background-color:#eeeeee;border-bottom:1px solid #dddddd;font-size:12px}
.bac2{background-color:#ffffff;border-bottom:1px solid #dddddd;padding-left:5px;font-size:12px}
.descriptionT{background-color:#FFFFdd;border-bottom:1px solid #cccccc;font-size:12px;padding:0.25em;padding-top:0.5em;;padding-bottom:0.5em}
.priceT{background-color:#eeeeee;padding-left:8px;font-weight:bold;border-bottom:1px solid #cccccc}
.dockclass{position:relative;text-align:center;background-color: #ffffaa; layer-background-color: #ffffaa;border: 2px solid #000000;}
.menuh {border-color:#FFFF99;cursor: hand ;border-left:#FFFF99;border-top:#FFFF99;padding-left:1px;padding-top:1px;background-color:#FFFF99;}
.menu{background-color:white ;}
.home{cursor : hand ;}
.menulinks{text-decoration:none;}
#fixedtipdiv{
position:absolute;
padding: 2px;border:1px solid black;font:normal 12px Verdana;line-height:18px;z-index:100;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;}
#sku{margin:0 0 0 0;padding:0 0 0 0; font-size:16px}
#copyrightText{font-size:12px;color:#999999}
.normalHeading{font-size:18px;color:#2C79B6;margin:0 0 0 0;padding:0px;font-weight:bold}
#Pcode{color:#000;margin:0 0 0 0;padding:0 0 0 0;}
#PageDescription{margin:0 0 0 0;padding:0 0 0 0;font-size:18px;color:#2C79B6;}
body{text-align:left;}
#copyrightT{font-size:11px}


/* begin css tabs */

ul#tabnav { /* general settings */
text-align: left; /* set to left, right or center */
margin: 1em 0 0 0; /* set margins as desired */
font: bold 16px arial, helvetica, sans-serif; /* set font as desired */
border-bottom: 3px double #aaa; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li { /* do not change */
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 2px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { /* settings for selected tab */
border-bottom: 2px solid #fff; /* set border color to page background color */
background-color: #fff; /* set background color to match above border color */
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a { /* settings for selected tab link */
background-color: #fff; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
}

ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #666; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #eee; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */
}

/* end css tabs */

.button {background-color:#ff0000;font-weight:bold;font-size:18px;color:#ffffff;cursor:pointer;cursor:hand}

#overview, #features{
font-size:135%;
 text-transform: capitalize;
color:purple;
}

#specifications{
font-size:125%;
 text-transform: capitalize;
color:purple;
}

#overview-summary{
font-size:125%;
text-transform: uppercase;
}

.heading{
font-size:100%;
text-transform: capitalize;
color:purple;
}
#notice{
background-color:#2C79B6;
padding:1em;
font-size:12px;
color:#fff;
}


.pdf-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 height: 40px;
 padding: 0 5px;
 background-color: #99AEBF;
 color: #FFFFFF;
 font-family: Arial, sans-serif;
 font-size: 18px;
 text-decoration: none;
 border-radius: 8px;
 transition: background-color 0.3s ease;
 gap: 10px;
 line-height: 1;
 font-size: 12px;
}

.pdf-button .icon {
font-size:12px;
}

.pdf-button:hover {
 background-color: #0056b3;
}



/* stock */

 .bar-container {
 width: 100%;
 height: 8px;
 background-color: #eee;
 border-radius: 4px;
 overflow: hidden;
 position: relative;
 margin: 10px 0;
 }

 .bar-fill {
 height: 100%;
 width: 0%;
 border-radius: 4px;
 animation: fillBar 0.8s ease-out forwards;
 }

 .low {
 background-color: red;
 }

 .medium {
 background-color: yellow;
 }

 .high {
 background-color: green;
 }

 @keyframes fillBar {
 from { width: 0%; }
 to { width: var(--stock); }
 }
 
 
 
 
/*

*/

 .os-indicator {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 10px;
 font-weight: bold;
 color: white;
 background: linear-gradient(270deg, #3b8dff, #4fd0ff, #5271ff, #3b8dff);
 background-size: 400% 400%;
 animation: bluePulse 18s ease-in-out infinite;
 box-shadow: 0 0 8px rgba(0, 0, 50, 0.3);
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;<br>
box-shadow: 0 4px 16px rgba(0, 0, 80, 0.6); /* Deeper shadow */
 text-shadow: 0 1px 2px rgba(0,0,0,0.3);
 user-select: none;
 flex-shrink: 0;
 }

 @keyframes bluePulse {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
 
  .os-label {
 font-size: 14px;
 font-weight: 600;
 color: #333;
 }
  .os-container {
 display: flex;
 align-items: center;
 gap: 10px; /* spacing between circle and text */
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
 
 
.extra-indicator {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 10px;
 font-weight: bold;
 color: white;
 background: linear-gradient(270deg, #3b8dff, #4fd0ff, #5271ff, #3b8dff);
 background-size: 400% 400%;
 animation: bluePulse 36s ease-in-out infinite;
 box-shadow: 0 4px 16px rgba(0, 0, 80, 0.6); /* Deeper shadow */
 text-shadow: 0 1px 2px rgba(0,0,0,0.3);
 user-select: none;
 flex-shrink: 0;
}

@keyframes redYellowFlow {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}


.button-orange {
 position: relative;
 background-color: orange;
 color: white;
 width: 70%;
 padding: 12px 20px;
 border: none;
 border-radius: 6px;
 font-size: 16px;
 font-weight: bold;
 cursor: pointer;
 text-align: center;
 overflow: hidden;
 transition: background-color 0.3s ease;
}

.button-orange:hover {
 background-color: darkorange;
}

/* Shine effect */
.button-orange::before {
 content: '';
 position: absolute;
 top: 0;
 left: -75%;
 width: 50%;
 height: 100%;
 background: linear-gradient(
 120deg,
 rgba(255, 255, 255, 0) 0%,
 rgba(255, 255, 255, 0.5) 50%,
 rgba(255, 255, 255, 0) 100%
 );
 transform: skewX(-20deg);
}

.button-orange:hover::before {
 animation: shine 1.2s ease forwards;
}

@keyframes shine {
 0% {
 left: -75%;
 }
 100% {
 left: 125%;
 }
}