 .wrapper {
   width: 100%;
   margin: auto;
   background-color: white;
   border-radius: 10px;
   /*box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);*/
 }

 .buttonWrapper {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin: 0 10px;
 }

 button {
   letter-spacing: 3px;
   border: none;
   padding: 10px;
   background-color: white;
   color: #232c3d;

   font-size: 18px;
   cursor: pointer;
   transition: 0.5s;
   font-family: 'Nexa', Tahoma, Arial, sans-serif;
 }

 button:hover {
   background-color: #c40030;
   border-color: #c40030;
   color: white;
 }

 button.tabactive {
   background-color: #ec0048;
   border-color: #ec0048;
   color: white;
 }

 .tabactive {
   background-color: white;
 }

 p {
   text-align: left;
   padding: 10px;
 }

 .tabcontent {
   display: none;
   padding: 10px 20px;
 }

 .tabcontent.tabactive {
   display: block;
   padding-bottom: 4rem;
 }

 .ProductCard a {
   color: #454545;
   display: block;
   font-size: 1.0rem;
   padding: 0.2rem;
   font-weight: 400;
   text-align: center !important;
 }

 .ProductCard a:visited {
   color: #ec0048;
   text-align: center !important;
 }


 .ProductCard h2 {
   text-align: center !important;
   margin-bottom: 0px !important;
   font-size: 1.4rem;
   margin-bottom: 5px;
 }

 .irs--flat .irs-handle>i:first-child {
   background-color: #303C49 !important;
 }

 ul.filterItems {

   display: flex !important;
   flex-wrap: wrap;
 }

 #pg_main {
   /* margin: 0rem auto !important; */
   margin: 0rem 8rem 0rem 8rem !important;
 }

 @media screen and (max-width: 900px) and (min-width: 500px) {
   #pg_main {
     margin: 0rem 3rem !important;
   }
 }

 @media screen and (max-width: 499px) {
   #pg_main {
     margin: 0rem 1rem !important;
   }
 }


 .content {
   position: relative !important;
   display: flex !important;
   justify-content: center !important;
   align-content: center !important;
   align-items: stretch !important;
 }

 .container {
  margin: 0 10px;
 }

 a:visited {
   color: transparent !important
 }

 .projectguide_wrapper * {
   box-sizing: border-box;
   --hl: 0;
   --nothl: calc(1 - var(--hl));
   /* margin: 0;
    padding: 0; */
   background: none;
   /* font: inherit; */
   font-family: 'Nexa', Tahoma, Arial, sans-serif !important;
 }

 .projectguide_wrapper html,
 .projectguide_wrapper body {
   min-height: 100%;
   background: #fff;
   color: #000;
   --i: var(--wide, 1);
   --j: var(--narr, 0);
   --notj: calc(1 - var(--j));
   display: grid;
   /* place-content: center; */
   /* Commented by Chaitali on 30/03/2023 */
   overflow-x: hidden;
   height: 100vh;
   /* color: #fff; */
   /* Commented by Chaitali on 30/03/2023 */
 }

 .projectguide_wrapper body {
   font-family: 'Nexa', Tahoma, Arial, sans-serif;
   font-size: 1.4rem;
   text-rendering: optimizeLegibility;
 }

 .projectguide_wrapper body,
 .projectguide_wrapper ul,
 .projectguide_wrapper ol,
 .projectguide_wrapper dl {
   margin: 0;
 }

 .projectguide_wrapper article,
 .projectguide_wrapper aside,
 .projectguide_wrapper audio,
 .projectguide_wrapper footer,
 .projectguide_wrapper header,
 .projectguide_wrapper nav,
 .projectguide_wrapper section,
 .projectguide_wrapper video {
   display: grid;
 }

 .projectguide_wrapper h1 {
   font-size: 3.4rem;
   font-weight: 700;
 }

  .projectguide_wrapper h3 {
   margin-bottom: 15px;
 }

 .projectguide_wrapper MainTitle.p {
  padding-left: 0;
   font-size: 17px;
   font-weight: 400;
   -ms-word-break: break-all;
   word-break: break-all;
   word-break: break-word;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
 }

 .projectguide_wrapper textarea {
   resize: vertical;
 }

 .projectguide_wrapper table {
   border-collapse: collapse;
 }

 .projectguide_wrapper td {
   padding: 0.5rem;
 }

 .projectguide_wrapper img {
   border: none;
   max-width: 100%;
 }

 .projectguide_wrapper input[type="submit"]::-moz-focus-inner,
 .projectguide_wrapper input[type="button"]::-moz-focus-inner {
   border: 0px;
 }

 .projectguide_wrapper input[type="search"] {
   -webkit-appearance: textfield;
 }

 .projectguide_wrapper input[type="submit"] {
   -webkit-appearance: none;
 }

 .projectguide_wrapper input:required:after {
   color: #f00;
   content: " *";
 }

 .projectguide_wrapper input[type="email"]:invalid {
   background: #f00;
 }

 .projectguide_wrapper .right {
   float: right;
   margin-left: 2rem;
   clear: right;
 }

 .projectguide_wrapper .left {
   float: left;
   margin-right: 2rem;
   clear: left;
 }

 .projectguide_wrapper sub,
 .projectguide_wrapper sup {
   line-height: 0;
   /*Overall sizes*/
 }

 .projectguide_wrapper #pg_main {
   margin: 0rem 6rem;
   /* Tabs */
 }

 .projectguide_wrapper .card {
   display: block;
 }

 .projectguide_wrapper [for*='-1'] {
   border-bottom: solid 0.2rem grey;
 }

 .projectguide_wrapper [for*='-2'] {
   border-bottom: solid 0.2rem grey;
 }

 .projectguide_wrapper :checked+label+article {
   grid-area: ver;
   z-index: 1;
 }

 .projectguide_wrapper .gridheader {
   display: block;
   float: left;
   position: sticky;
   width: 18rem;
 }

 .projectguide_wrapper label {
   cursor: pointer;
   text-align: center;
 }

 .projectguide_wrapper label:hover {
   background: rgba(0, 0, 0, 0.2);
 }

 .projectguide_wrapper input:not(checked)+label {
   background: #fff;
   color: grey;
 }

 .projectguide_wrapper input:checked+label {
   background: #fff;
   border-bottom-color: #3A86A6;
   border-bottom-width: 0.4rem;
   border-bottom-style: solid;
   color: black;
 }

 .projectguide_wrapper .filterItems input:checked+label {
   color: #303C49;
   padding: 0.2rem 1.2rem;
   border-radius: 0.8rem;
   background: #F4F4F4;
   border: solid #303C49;
 }

 .projectguide_wrapper .filterItems input:not(checked)+label {
   border: #000 0.1rem solid;
   color: #000;
   padding: 0.2rem 1.2rem;
   border-radius: 0.8rem;
   background: #F4F4F4;
 }

 .projectguide_wrapper .hide {
   display: none;
 }

  .projectguide_wrapper .FilterTile {
    background-color: #F4F4F4;
    border-radius: 1rem;
    margin: auto;
    padding: 2rem;
    width: 18rem;
    height: 22.4rem;
    display: block;
  }
  .projectguide_wrapper .FilterTile h2 {
    font-size: 1.6rem;
    font-weight: 500;
    text-align: center;
    margin-top: 0rem;
  }

 .container p{
  font-family:'Nexa', Tahoma, Arial, sans-serif;
  padding-left: 0;
  font-size: 17px !important;
 }

 @keyframes show {

   /*Filter Items*/
   0%,
   20% {
     opacity: 0;
     max-height: 0;
   }

   100% {
     opacity: 1;
     max-height: 100vh;
   }
 }

 .projectguide_wrapper ul.filterItems {
   display: flex;
   list-style: none;
   padding: 1.6rem 0rem;
 }

 .projectguide_wrapper .filterItems li {
   font-size: 0.8rem;
   margin: 0.2rem 0.6rem;
 }

 .projectguide_wrapper ul.filterItems1 {
   padding: 1.6rem 0rem;
 }

 .projectguide_wrapper .list-with-heading h3 {
   font-weight: bold;
   font-size: 0.6rem;
 }

 .projectguide_wrapper .ProductCardlist {
   list-style: none;
   display: grid;
   grid-area: main;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 4rem;
   grid-column: 2;
 }

 .projectguide_wrapper [id^="pg_ProductCardContainer"] {
   display: contents;
   /*Product Cards*/
 }

 
 #pg_ProductCardContainer_2S .ProductCardlist {
   margin-top: 4rem;
 }
 
 #pg_Other.ProductCardlist {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
   gap: 4rem;
   margin-bottom: 4rem;
 }
 
 .projectguide_wrapper .ProductCard {
   background-color: #F4F4F4;
   border-radius: 1rem;
   margin: auto;
   padding: 2rem;
   width: 18rem;
   height: 22.4rem;
   display: block;
 }

 .projectguide_wrapper .ProductCard img {
   max-width: 12rem;
   width: auto;
   max-height: 12rem;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0rem;
   display: block;
   height: auto;
 }

 .projectguide_wrapper .ProductCard h2 {
   font-size: 1.6rem;
   font-weight: 700;
   margin-top: 0rem;
 }

 .projectguide_wrapper .ProductCard a {
   color: #454545;
   display: block;
   font-size: 1rem;
   padding: 0.2rem;
   font-weight: 400;
   text-align: center !important;
 }

 .projectguide_wrapper .ProductCard a:visited {
   color: #ec0048;
   text-align: center !important;
   /* Commented By Chaitali  12-04-2023 */
   /* Sliders */
   /* Code By Webdevtrick ( https://webdevtrick.com ) */
   /*.wrap::before, .wrap::after, input[type='range'] {
     grid-column: 2;
     grid-row: 2;
     place-self: center;
     width: var(--track-w);
     pointer-events: none; 
     }  
     */
   /* Code By Chaitali  29-03-2023 */
 }

 .projectguide_wrapper .MainTitle {
   background-color: white;
   color: black;
   font-size: 0.875em;
   margin: 0 10px;
 }

 .projectguide_wrapper .sr-only {
   position: absolute;
   clip-path: inset(50%);
   /* from Style1.css */
 }

 .projectguide_wrapper .wrap {
   --dif: calc(var(--max) - var(--min));
   display: grid;
   grid-template: repeat(2, -webkit-max-content) 1em/1fr 1fr;
   grid-template: repeat(2, max-content) 1em/1fr 1fr;
   overflow: hidden;
   position: relative;
   margin: 1em auto;
   width: 20em;
   background: linear-gradient(0deg, #ccc 1em, transparent 0);
   font-family: ubuntu mono, consolas, monaco, monospace;
 }

 .projectguide_wrapper .wrap::before,
 .projectguide_wrapper .wrap::after {
   grid-column: 1/span 2;
   grid-row: 3;
   height: 100%;
   background: #95a;
   content: "";
 }

 .projectguide_wrapper .wrap::before {
   margin-left: calc((var(--a) - var(--min))/var(--dif)*100%);
   width: calc((var(--b) - var(--a))/var(--dif)*100%);
 }

 .projectguide_wrapper .wrap::after {
   margin-left: calc((var(--b) - var(--min))/var(--dif)*100%);
   width: calc((var(--a) - var(--b))/var(--dif)*100%);
 }

 .projectguide_wrapper [id=multi-lbl] {
   grid-column: 1/span 2;
 }

 .projectguide_wrapper .sr-only {
   position: absolute;
   -webkit-clip-path: inset(50%);
   clip-path: inset(50%);
 }

 .projectguide_wrapper input[type=range] {
   grid-column: 1/span 2;
   grid-row: 3;
   z-index: 1;
   top: 0;
   left: 0;
   margin: 0;
   background: none;
   /* get rid of white Chrome background */
   color: #000;
   pointer-events: none;
 }

 .projectguide_wrapper input[type=range]::-webkit-slider-runnable-track,
 .projectguide_wrapper input[type=range]::-webkit-slider-thumb,
 .projectguide_wrapper input[type=range] {
   -webkit-appearance: none;
 }

 .projectguide_wrapper input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 100%;
   background: none;
 }

 .projectguide_wrapper input[type=range]::-moz-range-track {
   width: 100%;
   height: 100%;
   background: none;
 }

 .projectguide_wrapper input[type=range]::-webkit-slider-thumb {
   border: none;
   /* get rid of Firefox thumb border */
   width: 1em;
   height: 1em;
   border-radius: 0;
   /* get rid of Firefox corner rounding */
   background: currentcolor;
   pointer-events: auto;
 }

 .projectguide_wrapper input[type=range]::-moz-range-thumb {
   border: none;
   /* get rid of Firefox thumb border */
   width: 1em;
   height: 1em;
   border-radius: 0;
   /* get rid of Firefox corner rounding */
   background: currentcolor;
   pointer-events: auto;
 }

 .projectguide_wrapper input[type=range]:focus {
   z-index: 2;
   outline: dotted 1px currentcolor;
 }

 .projectguide_wrapper input[type=range]:focus,
 .projectguide_wrapper input[type=range]:focus+output {
   color: darkorange;
 }

 .projectguide_wrapper output {
   grid-row: 2;
 }

 .projectguide_wrapper output:last-child {
   text-align: right;
 }

 .projectguide_wrapper output::after {
   counter-reset: c var(--c);
   content: "--" attr(for) ": " counter(c) ";";
 }

 .projectguide_wrapper ul,
 .projectguide_wrapper li,
 .projectguide_wrapper div {
   background: rgba(0, 0, 0, 0);
   border: 0;
   font-size: 100%;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;
   font: 13px/20px 'Nexa', Tahoma, Arial, sans-serif !important;
   text-shadow: 0 1px 0 white;
 }

 .projectguide_wrapper li {
   display: list-item;
   text-align: -webkit-match-parent;
 }

 .projectguide_wrapper .tabs-nav {
   list-style: none;
   margin: 0;
   padding: 0;
 }

 .projectguide_wrapper .tabs-nav li:first-child a {
   border-right: 0;
   -moz-border-radius-topleft: 6px;
   -webkit-border-top-left-radius: 6px;
   border-top-left-radius: 6px;
 }

 .projectguide_wrapper .tabs-nav .tab-active a {
   background: white;
   border-bottom-color: rgba(0, 0, 0, 0);
   color: #8dc63f;
   cursor: default;
 }

 .projectguide_wrapper .tabs-nav a {
   background: #f4f6f4;
   border: 1px solid #c6c9cd;
   color: #8b9098;
   display: block;
   font-size: 11px;
   font-weight: bold;
   height: 40px;
   line-height: 44px;
   text-align: center;
   text-transform: uppercase;
   width: 140px;
 }

 .projectguide_wrapper .tabs-nav li {
   float: left;
 }

 .projectguide_wrapper .tabs-stage {
   border: 1px solid #c6c9cd;
   -webkit-border-radius: 0 0 6px 6px;
   -moz-border-radius: 0 0 6px 6px;
   -ms-border-radius: 0 0 6px 6px;
   -o-border-radius: 0 0 6px 6px;
   border-radius: 0 0 6px 6px;
   border-top: 0;
   clear: both;
   margin-bottom: 20px;
   position: relative;
   top: -1px;
   width: 281px;
 }

 .projectguide_wrapper .tabs-stage p {
   margin: 0;
   padding: 20px;
   color: #545454;
 }

 .projectguide_wrapper .irs--flat .irs-from:before,
 .projectguide_wrapper .irs--flat .irs-to:before,
 .projectguide_wrapper .irs--flat .irs-single:before {
   border-top-color: #000000 !important;
 }

 .projectguide_wrapper .irs--flat .irs-from,
 .projectguide_wrapper .irs--flat .irs-to,
 .projectguide_wrapper .irs--flat .irs-single {
   background-color: #000000 !important;
 }

 .projectguide_wrapper .irs--flat .irs-bar {
   background-color: #000000 !important;
 }

 .projectguide_wrapper .header li {
   font-family: 'Nexa', Tahoma, Arial, sans-serif !important;
   text-align: center;
 }

 .projectguide_wrapper .ProductCard h2 {
   text-align: center !important;
   margin-bottom: 0px !important;
   font-size: 1.4rem;
   margin-bottom: 5px;
 }

 .projectguide_wrapper .irs--flat .irs-handle>i:first-child {
   background-color: #000000 !important;
 }

 .projectguide_wrapper ul.filterItems {
   display: flex !important;
   flex-wrap: wrap;

 }
