@charset "UTF-8";
@charset "iso-8859-15";
/* Font definitions */

/* Plus Jakarta Sans */
/* Define font variables */
:root {
  /* Font Families */
  --font-family: 'Plus Jakarta Sans', sans-serif;

  /* Font Weights */
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Colours */
  --deep-teal: #1E3432;  /* deep teal */
  --teal: #25695F; /* teal */
  --sage: #C7DCCD;   /* sage */
  --lime: #CCF766;  /* lime */
  --light-grey: #F0F0F0;  /* light grey */
  --white: #ffffff; /* white */
  --grey: #D9D9DB; /* grey */
  --med-grey: #7C7B7A;/* medium grey */
  --dark-grey: #546E84; /* dark grey */
  --mid-green: #5D9185; /* mid green for plans */
}

/* Font Faces */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}

/* Utility Classes for Easier Usage */
.font {
  font-family: var(--font-family);
}

.font-extralight {
  font-weight: var(--font-weight-extralight) !important;
}

.font-light {
  font-weight: var(--font-weight-light) !important;
}

.font-regular {
  font-weight: var(--font-weight-regular) !important;
}

.font-medium {
  font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
  font-weight: var(--font-weight-bold) !important;
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold) !important;
}

/* Italic Variants */
.font-italic {
  font-style: italic;
}



html, body { 
  width:100%;
  height:100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
body{
  font-family: var(--font-family) !important;
  background-color: var(--deep-teal);
  color:var(--light-grey);
  font-weight: var(--font-weight-regular);
  /* font-size: 1em; */
  font-size: 16px;
  letter-spacing: .04em;  
}
/* font styles */
h2, h3, h4, h5{font-weight: 100;}
.feature{
  font-weight: var(--font-weight-semibold);
  font-size: 500%;
}
.title{
  font-weight: var(--font-weight-semibold);
  font-size: 27px;
  /* font-size: 190%; */
  letter-spacing: .04em;
}
.subtitle{
  /* font-size:115%; */
  font-size:20px;
  display:block;
  font-weight: var(--font-weight-bold);
  margin:20px 0 20px 0;}
.mainheading{
  font-weight: var(--font-weight-semibold);
  font-size: 70px;
  /* font-size: 290%; */
}
.heading{
  font-weight: var(--font-weight-semibold);
  font-size: 40px;
  /* font-size: 290%; */
}
.sub-heading{
  font-weight: var(--font-weight-semibold);
  font-size: 40px;
  /* font-size: 165%; */
  letter-spacing: 1.5px;
}

.footer-heading{
  font-weight: var(--font-weight-bold);
  /* font-size: 3em; */
  font-size: 190%;
}
.footer-feature-heading{
  font-weight: var(--font-weight-bold);
  font-size: 30px;
}
.caption{
  font-weight: var(--font-weight-regular);
  font-size: 200%;
  letter-spacing: .04em;
}
.highlight{
  font-weight: var(--font-weight-regular);
  /* font-size: 115%; */
  font-size: 23px;
  letter-spacing: .04em;
}
.smlcomment{
  font-weight: var(--font-weight-light);
  font-size: .8em;
  color:var(--teal);
}
.fontsize27{
  font-size: 27px;
  /* font-weight: var(--font-weight-regular); */
  letter-spacing: .04em;
}
.uppercase{text-transform: uppercase;}
.sentence-case a::first-letter,.sentence-case span::first-letter{
  text-transform: uppercase;
}
.sentence-case{
  text-transform: lowercase;
}
.override-uppercase {
  text-transform: none !important;
}
.planheader{
  font-weight: var(--font-weight-medium);
  font-size:400%;
  white-space: nowrap;
  margin-bottom:10px;
  padding-bottom:20px;
  border-bottom:2px solid var(--lime);
}
.toggle-option.active {
  text-decoration: underline;
  color: var(--lime); 
  }

.plan-sub .highlighted {
  text-decoration: underline;
  color: var(--lime);
}
.toggle-option {
  cursor: pointer;
  transition: color 0.3s, text-decoration 0.3s;
}
.toggle-option:hover {
  color: var(--deep-teal); /* Optional hover effect */
  text-decoration: underline;
}
.position-relative {
  position: relative;
  overflow: hidden;
}
.position-abs-r20{
  position:absolute !important;
  right:20px !important;
}
.plan-highlight {
    display: inline-block;
    vertical-align: middle;
}

.recommended-badge {
    border:2px solid var(--lime);
    position: relative;
}
.recommended-badge::before {
  content: "recommended";
  background-color: var(--lime);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color:var(--teal);
  height:40px;
  text-align: center;
  border-radius: 18px 18px 0 0;
  margin-top:-60px;
  position: absolute;
  text-transform: uppercase;
  left:50%;
  transform: translateX(-50%);
  line-height: 40px;
  padding: 0 40px;
  white-space: nowrap;
  z-index: 10;
}

.plan-sub{
  font-weight: var(--font-weight-light);
  font-size:90%;
  line-height: 1.4;
  /* margin:0 0 10px 0; */
}
.plan-sub-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.plandiv{
  border-bottom: 2px solid var(--lime);
  padding: 20px 0;
  /* margin-bottom:10px; */
  display: flex;
  align-items: flex-end; /* top-aligns the first span with the group */
  gap: 10px; /* spacing between price and subtexts */
}
/* colours */
.deep-teal{ color: var(--deep-teal) !important;}
.teal{ color: var(--teal) !important;}
.sage{ color: var(--sage) !important;}
.lime{ color: var(--lime) !important;}
.grey{ color: var(--light-grey) !important;}
.white{color:var(--white) !important;}
.mid-green{color:var(--mid-green) !important;}

.background-deep-teal{background-color: var(--deep-teal) !important;}
.background-teal{background-color: var(--teal) !important;}
.background-sage{background-color: var(--sage) !important;}
.background-lime{background-color: var(--lime) !important;}
.background-grey{background-color: var(--light-grey) !important;}
.background-white{background-color: var(--white) !important;}
.background-mid-green{background-color: var(--mid-green) !important;}

.background-url-deep-teal{background:url(/images/BIDDA-Logomark-Deep-Teal-RGB.svg) no-repeat;}
.background-url-teal{background:url(/images/BIDDA-Logomark-Teal-RGB.svg) no-repeat;}
.background-url-sage{background:url(/images/BIDDA-Logomark-Sage-RGB.svg) no-repeat;}
.background-url-lime{background:url(/images/BIDDA-Logomark-Lime-RGB.svg) no-repeat;}

.border-deep-teal{border:1px solid var(--deep-teal)}
.border-teal{border:1px solid var(--teal)}
.border-sage{border:1px solid var(--sage)}
.border-lime{border:1px solid var(--lime)}
.border-grey{border:1px solid var(--light-grey)}
.border-none{border:none;}
.border-radius8{border-radius: 8px;}
/* z index*/
.z1{z-index: 1;}
/* Logo Mark */
.logomark-deep-teal{
  background: url(/images/BIDDA-Logomark-Deep-Teal-RGB.svg) no-repeat;
}
.logomark-teal{
  background: url(/images/BIDDA-Logomark-Teal-RGB.svg) no-repeat;
}
.logomark-sage{
  background: url(/images/BIDDA-Logomark-Sage-RGB.svg) no-repeat;
  /* -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: cover; */
}
.logomark-lime{
  background: url(/images/BIDDA-Logomark-Lime-RGB.svg) no-repeat;
}
/* .logomark-lime-left-arrow{
  background: url(/images/BIDDA-Logomark-Lime-RGB.svg) no-repeat;
} */
.positionabsolute{position:absolute;}
.top20{top:20px;}

/* Shared styles for all logomark-arrow elements */
.logomark-arrow-right,
.logomark-arrow-left,
.logomark-arrow-top {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

/* Shared styles for the ::before pseudo-elements */
.logomark-arrow-right::before,
.logomark-arrow-left::before,
.logomark-arrow-top::before {
  content: ""; 
  width: 70px;
  height: 70px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}
.logomark-lime-full::before {
  content: ""; 
  width: 60px;
  height: 60px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  margin-bottom: 10px;
}
.arrow-lime-full::before {
  content: ""; 
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  margin-bottom: 10px;
}
.mark-lime::before {
  content: ""; 
  width: 60px;
  height: 60px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
  margin: 0 20px 0 0;
  vertical-align: bottom;
}
.logomark-lime-left-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 2rem; /* or inherit from your .heading */
  color: var(--lime); /* text color */
  font-weight: bold; /* optional */
  gap: 0.3em; /* spacing between arrow and text */
  margin-bottom:20px;
}

.logomark-lime-left-arrow::before {
  content: "";
  display: inline-block;
  height: 1em; /* same height as text */
  aspect-ratio: 1 / 1; /* keep it square */
  background-image: url('/images/BIDDA-Logomark-Lime-RGB.svg'); /* your lime arrow image */
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* Unique background images */
.logomark-arrow-right::before { background-image: url('/images/arrow-lime-right.svg'); }
.logomark-arrow-left::before { background-image: url('/images/arrow-lime-left.svg'); }
.logomark-arrow-top::before { background-image: url('/images/arrow-lime-top.svg'); }
.logomark-lime-full::before{background-image: url('/images/BIDTEK-Logomark-Lime-RGB.svg'); display:block}
.mark-lime::before{background-image: url('/images/BIDTEK-Logomark-Lime-RGB.svg'); display:inline-block}
.arrow-lime-full::before{background-image: url('/images/BIDTEK-Arrow-full-lime.svg'); display:block}
/*width styles*/
.widthauto{width:auto !important;}
.width20{width:20px;height:20px;}
.width30{width:30px;height:30px;}
.width40{width:40px;height:40px}
.width60{width:60px !important;height:60px !important;}
.width70{width:70px;height:70px;}
.width100{width:100px;height:100px;}
.width100px{width:100px;}
.width700{width:700px;}
.width1000{width:1000px;}
.width10040{width:100px;height:40px;}
.width10080{width:100px;height:80px;}
.width10060{width:100px;height:60px;}
.width12060{width:120px;height:60px;}
.width100percent{width:100% !important}
.maxwidth90{max-width:90px;}
.maxwidth100{max-width:100px !important}
.maxwidth100percent{max-width:100% !important}
.maxwidth80percent{max-width:80% !important}
.maxwidth50percent{max-width:50% !important}
.maxwidth1000{max-width:1000px !important;}
.maxwidth130{max-width:130px;}
.maxwidth400{width:100% !important; max-width:400px;}
.maxwidth425{max-width:425px !important;}
.maxwidth540{max-width:540px !important;}
.maxwidth600{max-width:600px !important;}
.width250{width:250px;}
.widthpanel60{max-width:1000px;min-width:400px;display:inline-block;margin:auto}
.widthpanel900{max-width:1000px;min-width:400px;display:inline-block;margin:auto}
.width-graphic-content{
  min-width: 350px;
  margin: 0 35%;
}
.responsive-width {
  width: 100%;
  max-width: 2000px; /* or 1000px for the last one if needed */
  box-sizing: border-box;
}
.responsive-width50 {
  width: 70%;
  max-width: 2000px; /* or 1000px for the last one if needed */
  box-sizing: border-box;
}
.minwidth70{min-width:70% !important;}
/* Height styles */
.height40{height:40px !important;}
.height50{height:50px !important;}
.height70{height:70%;}
.height150{height:150px;}
.maxheight80{max-height:80%;}
.minheight550{min-height:550px;}
.height500{height:500px !important;}
/* margin styles */
.marginauto{margin:auto !important;}
.margin80auto{margin:80px auto !important;}
.marginbot0{margin-bottom: 0 !important;}
.marginbot10{margin-bottom: 10px !important;}
.marginbot20{margin-bottom: 20px !important;}
.marginbot30{margin-bottom: 30px !important;}
.marginbot40{margin-bottom: 40px !important;}
.margintop30{margin-top:30px !important;}
.margintop40{margin-top:40px !important;}
.margintop80{margin-top:80px !important;}
.margintop100{margin-top:100px !important;}
.margintop180{margin-top:180px !important;}
.margintop350{margin-top:350px !important;}
.marginright20{margin-right:20px;}
.marginleftauto{margin-left:auto;}
.marginleft20{margin-left:20px !important;}
.marginzero{margin:0 !important;}
/* align styles */
.floatright{float:right !important;}
.floatleft{float:left !important;}
.textalignleft{text-align: left !important;}
.textaligncenter{text-align: center !important;}

/* helpdesk styles */
.hdbtn{
  width:100%;
  max-width:425px;
  min-height:30px;
}

/* end */

#containermain {
  flex: 1;
  background: 
      url(/images/B-Sphere.svg) no-repeat,
      url(/images/B-Sphere.svg) no-repeat;
  background-size: 150%;
  background-position: 
      calc(100% + 98%) calc(0% - 20%),  /* Top right, moved 50% up and right */
      calc(0% - 98%) calc(100% + 20%);  /* Bottom left, moved 50% left and down */
}
#containerportal {
  /* flex: 1; */
  display:flex;
  align-items: stretch;
  background-color: var(--sage);
  min-height:100vh;
}
#main-content{
  /* flex:1;*/ /* turned off for martgin-let*/
  margin-left: 290px; /* same as sidebar width */
  /* width: calc(100% - 317px); */
  width:100%;
  background-color: var(--sage);
  /* min-height: 200px; */
  color:var(--teal);
  padding: 0 86px 86px 86px;
  /* height:100%; */
  /* box-sizing: border-box;
  margin:0 0 20px 40px; */
  /* display: inline-block; */
}

#container{
  height:100%;
  background-color: #fff;
  flex: 1 0 auto;
  max-width:1200px;
  width:100%;
  margin:auto;
  padding: 0 10px 0 10px;
}
.registerdiv{
  max-width:900px;
  width:100%;
  min-width:300px;
  margin:auto;
}
.guideviewdiv{
  max-width:1500px;
  width:90%;
  min-width:300px;
  margin:auto;
  padding:20px;
}
.guideviewer{
  max-width:90%;
  background-color: var(--white);
  color:var(--deep-teal);
  border:2px solid var(--deep-teal);
  border-radius: 30px;
  padding:20px;
  margin:0 20px;
  text-align: left;
  display:none;
}
.guide-viewer-background {
  position: relative;
  z-index: 1;
}

.guide-viewer-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(/images/B-Sphere.svg) no-repeat 50%;
  background-size: 200%;
  opacity: 0.5;
  z-index: -1; /* place it behind the content */
  pointer-events: none; /* so it doesn’t interfere with interaction */
}

.grid-container {
  width: 80%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 500px)); /* Fixed width */
  gap: 40px; /* Space between divs */
  padding: 20px;
  justify-content: center; /* Center the grid items within the container */
}

.grid-item {
  padding: 0;
  text-align: left; /* Ensure text remains left-aligned */
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  /* border: 1px solid var(--deep-teal);
  border-radius: 8px; */
}

.grid-container-2 {
  width: 90%;
  margin: 80px auto;
  display: flex;
  flex-wrap: wrap; /* Allows wrapping into multiple rows */
  gap: 40px; /* Space between items */
  justify-content: center; /* Centers items dynamically */
  padding: 20px;
}

.grid-item-2 {
  flex: 1 1 calc(25% - 40px); /* Ensures 4 items per row with spacing */
  min-width: 230px; /* Prevents shrinking too much */
  max-width: 230px; /* Ensures uniform item size */
  padding: 20px;
  text-align: left;
  border: 0px solid var(--teal);
  border-radius: 30px;
  background-color: var(--sage);
}
.flex-container {
  display: grid;
  gap: 40px;
  margin: auto;
  padding: 20px;
  max-width: 1500px;
  box-sizing: border-box;
  justify-items: center;
}

.blog-item-flex {
  min-width: 300px; /* Prevents shrinking too much */
  max-width:365px;
  padding: 20px 30px;
  border-radius: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: space-between;
  height:100%;
}
.grid-item-flex {
  min-width: 300px; /* Prevents shrinking too much */
  max-width:365px;
  padding: 20px 30px;
  border-radius: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: left;
  justify-content: flex-start;
}
.grid-columns-auto {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-columns-1 {
  grid-template-columns: repeat(1, 1fr);
}

.grid-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.span-two {
  grid-column: span 2;
}
.flex3{
  flex: 1 1 calc(33.333% - 40px);
}
.flex4{
  flex: 1 1 calc(25% - 40px);
}
.flex-background-1{
    background: linear-gradient(
    to bottom,
    var(--deep-teal) 0px,
    var(--deep-teal) 75px,
    var(--mid-green) 75px,
    var(--mid-green) 100%
  );
}
/* .flex-background-2{
    background: linear-gradient(
    to bottom,
    var(--deep-teal) 0px,
    var(--deep-teal) 75px,
    var(--sage) 75px,
    var(--sage) 100%
  );
} */
.flex-background-2{
  background: linear-gradient(
    to bottom,
    #1E3432 0px,
    #1E3432 75px,
    rgba(30, 52, 50, 0.3) 75px,
    rgba(30, 52, 50, 0.3) 100%
  );
}

.grid-item-flex-header{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: auto;
  padding: 20px;
  max-width: 70vw;
}
.grid-container-footer {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; /* Allows wrapping into multiple rows on smaller screens */
  gap: 90px; /* Space between columns */
  justify-content: left; /* Ensures even spacing */
  align-items: start; /* Keeps content aligned at the top */
}

.grid-item-footer {
  display: flex;
  flex-direction: column; 
  justify-content: center;
  /* align-items: center;  */
  width: auto; 
  max-width: 100%; 
  /* padding: 20px; */
  text-align: left;
  font-size: 18px;
  min-width:200px;
}
.right-block{
  max-width: 500px !important;
  margin-left: 0;
}
.left-block{
  max-width: 500px !important;
  margin-left: 200px;
}
.footer-title{
  border-top: 1px solid var(--lime);
  padding-top:30px;
  margin: 10px 0 15px 0;
  height:25px;
  /* font-weight:var(--font-weight-light); */
}

.container-1 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: auto;
  padding: 20px;
  max-width:80VW;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height:0;
}
.graphic-1-img{
  background:url(/images/B-Hero_1.jpg) no-repeat;
  background-size: cover;
  background-position: 100% 45%;
  max-height: 750px;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  display: flex;
}
.graphic-2-img{
  background:url(/images/B-Hero_2.jpg) no-repeat;
  background-size: contain;
  background-position: 40% 0;
}
.graphic-3-img{
  background:url(/images/bid-planning.jpg) no-repeat;
  background-size: contain;
  background-position: center;
}
.graphic-isaacs-1-img{
  background:url(/images/isaacs-head-1.jpg) no-repeat center center;
  background-size: contain !important;
   width: 100%;
  height: 100%;
}
.container-box-autowidth {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  width: 90%;
  max-width: 1500px;
  margin: 0 auto;
}

.container-item-autowidth {
  display: block;
  text-align: left;
}

.isaacs-head-fixed {
  /* width: 365px;
  height: 586px; */
  background: url('/images/isaacs-head-1.jpg') no-repeat center center;
  background-size: cover;
  border-radius: 30px;
  overflow: hidden;
  display: block;
  min-height: 100px; /* helps debugging */
}
.isaacs-head-fixed.orig {
  background-image: url('/images/isaacs-head-1.jpg');
  width: 365px;
  height: 586px;
}
.isaacs-head-fixed.ai-1 {
  background-image: url('/images/john-head-2-2.jpg');
  width: 400px;
  height: 400px;
}
.isaacs-head-fixed.edit3 {
  background-image: url('/images/isaacs-head-3.jpg');
  width: 400px;
  height: 514px;
}
.isaacs-head-fixed.edit4 {
  background-image: url('/images/isaacs-head-4.jpg');
  width: 400px;
  height: 514px;
}
.graphic-1{
  margin:auto;
  position:relative;
  display:flex;
  background-size: contain;
  flex: 1 1 761px;
  min-width: 0;
  max-width: 50%;
  max-height:100vh;
  height: auto;
  aspect-ratio: 2000/1333;
  overflow:visible;
}

.graphic-4-img {
  position: relative;
  background: url(/images/B-Hero_4.jpg) no-repeat center;
  background-size: contain;
  background-position: center;
}
.graphic-5-img {
  position: relative;
  background: url(/images/B-Hero_5.jpg) no-repeat center;
  background-size: contain;
  background-position: center;
}
.graphic-6-img {
  position: relative;
  background: url(/images/B-Hero_6.jpg) no-repeat center;
  background-size: contain;
  background-position: center;
}
/* Owl Carousel */
.container-owl {
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  justify-items: center;
  gap: 60px; */
  margin: auto;
  padding: 20px;
  max-width: 1500px;
  /* align-items: stretch; */
}
.owl-carousel-container { /* Main carousel container */
  position: relative;
  }
.owl-item{
  height:100%;
}
.owl-carousel {
    display: flex !important;
    flex-direction: row;
    justify-content: center; 
    width:100%;
}
  .owl-nav .owl-prev, .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  }

  .owl-nav .owl-prev {
  left: -80px;
  }

  .owl-nav .owl-next {
  right: -80px;
  }
  .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
      font-size:100px !important;
  }

/* Help Box */
/* .graphic-4-img::after {
  content: "";
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 250px;
  height: 130px;
  background-color: var(--deep-teal);
  border-radius: 20px;
  z-index: 1;
} */

/* Help Content and Icon Container */
.help-box {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 40%;
  padding: 20px;
  background-color: var(--teal);
  border-radius: 20px;
  color: var(--white);
  z-index: 2;
  display: flex;
  flex-direction: column;
  /* font-size: 0.85rem; */
  text-align: left;
  /* box-shadow: 0 4px 10px rgba(0,0,0,0.1); */
}

/* Info Icon Circle */
.help-icon {
  position: absolute;
  top: -30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: var(--lime);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--deep-teal);
  z-index: 3;
}
.help-icon.icon-info {
  background-image: url('/images/icons/info.svg');
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
}
/* Links inside help text */
.help-box a {
  color: var(--lime);
  font-weight: 500;
  text-decoration: none;
}
.help-box a:hover {
  text-decoration: underline;
}


.icon-files {
  display: grid;
  grid-template-rows: auto;
  min-width: 100%;
  max-width: 400px;
  min-height: 300px;
  padding: 20px;
  border-radius: 30px;
  align-items: center;
  position: relative; /* still needed for layout */
  z-index: 1;
}

.icon-wrapper {
  position: relative;
  display: inline-block;
}

.icon-wrapper::before {
  content: "\f15c"; /* fa-file */
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  position: absolute;
  top: -50px; /* Adjust for distance above box */
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: var(--sage);
  color: var(--teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  z-index: 2;
}

.icon-svg {
  display: inline-block;
  width: 25px; /* or px/rem if preferred */
  height: 25px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 3px; /* adjust to align visually with text */
}

.icon-wrapper-svg, .icon-wrapper-svg-teal {
  position: relative;
  display: inline-block;
}
/* Steps section*/

.steps-section {
  background-color: var(--deep-teal);
  color: var(--white);
  padding: 60px 0;
  text-align: center;
}
.steps-section.white {
  background-color: var(--white);
  padding:0 0 20px 0;
}
.steps-header h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.steps-subtitle {
  color: var(--lime);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.steps-subtitle span {
  font-weight: 700;
}

.steps-container {
  display: flex;
  justify-content: center; /* centers the items instead of spreading them out */
  align-items: flex-start;
  position: relative;
  margin-top: 60px;
  padding: 0 40px;
  gap: 100px; /* controls the space between step-item blocks */
}

.steps-container::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--lime);
  z-index: 0;
}
.steps-container.teal::before {
  background-color: var(--teal);
}

.step-item {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.step-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  color: var(--lime);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 30px;
  background-color: var(--deep-teal);
  margin-bottom: 20px;
}
.step-circle.teal {
  border: 1px solid var(--teal);
  background-color: var(--white);
}
.step-content {
  text-align: left;
}

.step-title {
  font-weight: var(--font-weight-bold);
  font-size: 150%;
  margin-bottom: 20px;
  text-align: left;
}

.step-desc {
  font-size: 0.9rem;
  color: var(--white);
  text-align:left;
}
.step-desc.teal {
  color: var(--teal);
}

/* Benefits Section */
.benefits-section {
  padding: 80px 40px;
  margin: auto;
  max-width: 1500px;
  text-align: left;
}

.benefits-heading {
  max-width: 500px;
  margin-bottom: 60px;
}

.benefits-heading h2 {
  color: var(--teal);
  font-size: 32px;
  margin-bottom: 16px;
  font-weight: var(--font-weight-semibold);
}

.benefits-heading p {
  font-size: 16px;
  color: var(--teal);
  line-height: 1.6;
}

/* Layout wrapper with sage background */
.benefits-layout {
  position: relative;
  background-color: var(--sage);
  border-radius: 30px;
  max-width: 818px;
}

/* Left-side benefit grid */
.benefits-box {
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px;
  width: 60%;
}

.benefit-item h4 {
  color: var(--teal);
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  margin-bottom: 8px;
}

.benefit-item p {
  color: var(--teal);
  font-size: 14px;
  line-height: 1.5;
}

/* Right-side image with badge overlay */
.benefits-media {
  position: absolute;
  top: -200px;
  right: -500px;
  width: 700px;
  z-index: 2;
}

.media-placeholder {
  background: url(/images/B-Hero_2.jpg) no-repeat center center;
  background-size: cover;
  width: 100%;
  aspect-ratio: 697 / 502;
  border-radius: 20px;
}

.benefit-badge {
  position: absolute;
  bottom: -60px;
  right: 40px;
  width: 120px;
  height: 120px;
  background: url('/images/lime-stamp.png') no-repeat center center;
  background-size: contain;
  z-index: 3;
}
/* Waitlist form section */
/* Parent layout */
.waitlist {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--sage);
}

/* Sage background panel */
.waitlist-left-section {
  width: 57%;
  background-color: var(--sage);
  display: flex;
  justify-content: right;
}

/* Content container inside sage section */
.waitlist-left {
  width: 100%;
  max-width: 750px;
  padding: 60px 40px;
  box-sizing: border-box;
  margin-right:10%;
}

/* Deep-teal background panel */
.waitlist-right-section {
  width: 43%;
  background-color: var(--deep-teal);
  display: flex;
  justify-content: left;
}

/* Content container inside deep-teal section */
.waitlist-right {
  width: 100%;
  max-width: 650px;
  padding: 60px 40px;
  box-sizing: border-box;
  color: var(--white);
  margin-left:10%;
}

.waitlist-right h3 {
  font-size: 28px;
  margin-bottom: 30px;
}

.waitlist-right ul {
  list-style: none;
  padding: 0;
  list-style-position: inside;
  margin-left: 10px;
}

.waitlist-right li {
  position: relative;
  padding-left: 50px;
  margin: 10px 0 20px 0;
}

.waitlist-right  li::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: -10px;
  width: 45px;
  height: 45px;
  background-image: url('/images/BIDDA-Logomark-Lime-RGB.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Form layout still applies */
.waitlist-form {
  display: grid;
  gap: 20px;
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.waitlist-form input,
 .waitlist-form select {
  flex: 1;
  margin-bottom:5px !important;
  /* padding: 14px 20px;
  border-radius: 30px;
  border: none; */
  font-size: 16px;
  /* background: var(--white);
  min-width: 150px; */
}

/* .waitlist-form button {
  padding: 14px 30px;
  border-radius: 30px;
  background-color: var(--lime);
  color: var(--deep-teal);
  font-weight: bold;
  border: none;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
} */

/* end waitlist */

/* Background circle */
.icon-wrapper-svg::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: var(--sage);
  border-radius: 50%;
  z-index: 1;
}
.icon-wrapper-svg-teal::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: var(--teal);
  border-radius: 50%;
  z-index: 1;
}
.icon-wrapper-svg-teal.teal::before {
  background-color: var(--teal);
}

.icon-wrapper-svg-teal.lime::before {
  background-color: var(--lime);
}

.icon-wrapper-svg-teal.sage::before {
  background-color: var(--sage);
}

/* Common icon placement */
.icon-wrapper-svg::after, .icon-wrapper-svg-teal::after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 60px;
  height: 60px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 2;
  pointer-events: none;
}
.planfeatures {
  list-style: none;
  padding-left:0;
}
.planfeatures li{
  display: flex;
  align-items: flex-start; /* top-aligns text with icon */
  gap: 10px;
  min-height: 50px;
}
.plan-bottom-content {
  /* display: flex;
  flex-direction: column;
  justify-content: flex-end;  */
   /* margin-top: auto; */
}
/* Modifier classes for different icons */
.icon-wrapper-svg.icon-sparkles::after {
  background-image: url('/images/icons/sparkles.svg');
}

.icon-wrapper-svg.icon-workflow::after {
  background-image: url('/images/icons/workflow.svg');
}

.icon-wrapper-svg.icon-tracking::after {
  background-image: url('/images/icons/tracking.svg');
}

.icon-wrapper-svg.icon-doc::after {
  background-image: url('/images/icons/icon-doc.svg');
}

.icon-wrapper-svg-teal.icon-3hands::after {
  background-image: url('/images/icons/3hands.svg');
}
.icon-wrapper-svg-teal.icon-bell::after {
  background-image: url('/images/icons/bell.svg');
}
.icon-wrapper-svg-teal.icon-searchtarget::after {
  background-image: url('/images/icons/searchtarget.svg');
}
.icon-wrapper-svg-teal.icon-shield::after {
  background-image: url('/images/icons/shield.svg');
}
.icon-wrapper-svg-teal.icon-connecttree::after {
  background-image: url('/images/icons/connecttree.svg');
}
.icon-wrapper-svg-teal.icon-recycle::after {
  background-image: url('/images/icons/recycle.svg');
}
.icon-wrapper-svg-teal.icon-pendoc::after {
  background-image: url('/images/icons/pendoc.svg');
}
.icon-gavel {
  background-image: url('/images/icons/gavel.svg');
}
.icon-profile {
  background-image: url('/images/icons/profile.svg');
}
.icon-profile-lime {
  background-image: url('/images/icons/profile-lime.svg');
}
.icon-phone {
  background-image: url('/images/icons/phone.svg');
}
.icon-cogs {
  background-image: url('/images/icons/cogs.svg');
}
.icon-ringbell {
  background-image: url('/images/icons/ringbell.svg');
}
.icon-stardoc {
  background-image: url('/images/icons/stardoc.svg');
}
.icon-jigsaw {
  background-image: url('/images/icons/jigsaw.svg');
}
.icon-info {
  background-image: url('/images/icons/info.svg');
}

/* about icons in teal */
.icon-wrapper-svg-teal.icon-accessibility::after {
  background-image: url('/images/icons/about/accessibility.svg');
}
.icon-wrapper-svg-teal.icon-efficiency::after {
  background-image: url('/images/icons/about/efficiency.svg');
}
.icon-wrapper-svg-teal.icon-empowerment::after {
  background-image: url('/images/icons/about/empowerment.svg');
}
.icon-wrapper-svg-teal.icon-light-bulb::after {
  background-image: url('/images/icons/about/light-bulb-14.svg');
}
.icon-wrapper-svg-teal.icon-reliability::after {
  background-image: url('/images/icons/about/reliability.svg');
}
.icon-wrapper-svg-teal.icon-trust::after {
  background-image: url('/images/icons/about/trust.svg');
}

.icon-wrapper-svg-teal.icon-email-support::after {
  background-image: url('/images/icons/lime-email-support.svg');
}
.icon-wrapper-svg-teal.icon-support-ticket::after {
  background-image: url('/images/icons/lime-support-ticket.svg');
}
.icon-wrapper-svg-teal.icon-knowledge-base::after {
  background-image: url('/images/icons/lime-knowledge-base.svg');
}

.graphic-2-img::after {
  content: ""; /* Required for pseudo-elements */
  background: url(/images/lime-stamp.png) no-repeat;
  position: absolute;
  left: 100%;         /* Align to right edge */
  margin-left:-80px;
  bottom: 100px;    /* 100px up from the bottom */
  width: 165px;     /* Set dimensions as needed */
  height: 165px;
  background-size: contain; /* Or cover if preferred */
}
.graphic-6-img::after {
  content: ""; /* Required for pseudo-elements */
  background: url(/images/white-stamp.png) no-repeat;
  position: absolute;
  left: 100%;         /* Align to right edge */
  margin-left:-100px;
  bottom: 100px;    /* 100px up from the bottom */
  width: 200px;     /* Set dimensions as needed */
  height: 200px;
  background-size: contain; /* Or cover if preferred */
}
.highlight-container{
  border-left: 5px solid var(--lime);
  letter-spacing: 1.5px;
  padding-left:20px;
  text-transform: uppercase;
}

.graphic-container{
  margin:auto;
  position:relative;
  display:flex;
  background-size: cover;
  flex: 1 1 761px;
  min-width: 200px;
  max-width: 544px;
  max-height:641px;
  height: auto;
  aspect-ratio: 500/641;
  overflow:visible;
  border-radius: 30px;
}
.graphic-container-vertical {
  width: 100%;
  max-width: 375px;
  aspect-ratio: 375 / 586;
  border-radius: 30px;
  overflow: hidden;
}
/* .container-4box {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 100px;
  margin: auto;
  padding: 20px;
  max-width: 70vw;
  align-items: stretch;
} */
.container-3box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* three equal columns */
  justify-items: center;
  gap: 60px;
  margin: auto;
  padding: 20px;
  max-width: 70vw;
  align-items: stretch;
}
.container-3box-header{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: auto;
  padding: 20px;
  max-width: 70vw;
}
.container-item3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: white;
  max-width:600px;
}
.icon-wrapper-svg-teal {
  display: flex;
  flex-direction: column;
  height: 100%; /* Stretch to match grid height */
}

/* .container-item4 {
  display: grid;
  grid-template-rows: auto;
  width: 340px;
  max-width: 400px;
  padding: 20px;
  border-radius: 30px;
  align-items: center;
} */
/* .container-item4 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 20px;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: white;
  max-width:400px;
  width:340px;
} */
.container-4box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
  margin: auto;
  padding: 20px;
  max-width: 100%;
  align-items: stretch; /* ensures grid items stretch equally */
}

.container-item4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;            /* force equal height */
  padding: 20px;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: white;
  max-width:340px;
}

.container-box {
  padding: 20px;
  max-width: 70vw;
  width:100%;
  text-align: left;
  height:550px;
  z-index: 1;
}
.container-2box-lr {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr); */
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  margin: auto;
  padding: 20px;
  max-width: 70vw;
}
.container-2box {
  display: grid;
  /* grid-template-columns: repeat(2, 1fr); */
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  margin: auto;
  padding: 20px;
  max-width: 70vw;
}
.container-item-text {
  display: grid;
  grid-template-rows: auto; 
  min-width: 300px;
  max-width: 80%;
  padding: 20px;
  border-radius: 30px;
  align-items: center;
}
.container-item-flex {
  display: flex;
  min-width: 300px;
  /* max-width: 80%; */
  padding: 20px;
  flex-direction: column;
  justify-content: center;

}
.container-item {
  display: grid;
  grid-template-rows: auto; /* Top content takes auto height, bottom content fills remaining space */
  min-height:300px;
  padding: 20px;
  border-radius: 30px;
  align-items: center;
}
#statsblock .container-item{min-height:177px;}
.stats-container {
  width: 100%;
  margin: 0 auto;
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(466px, 300px)); 
  gap: 40px; 
  padding: 0;
  justify-content: left;
}
.stats-item{
  height:177px;
  width: 466px;
  border:0px solid var(--teal);
  border-radius: 25px;
  position: relative;
  overflow: hidden;
  /* background: linear-gradient(to bottom, var(--teal) 50%, var(--lime) 50%); */
}
.stats-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/images/B-Sphere.svg) no-repeat;
    background-position: 33% calc(50% + 60px);
    background-size: 350%;
    opacity: 0.5;
    transform: scale(-1, -1);
    z-index: 0;
    -webkit-background-size: 250% auto;
}

.stats-title{
  /* color: var(--light-grey); */
  font-size: 1.3em;
  text-align: left;
  /* height:50%;
  display: flex; */
  align-items: center;
  /* max-width:120px; */
  margin:10px 0 0 30px;
  font-weight: var(--font-weight-semibold);
  z-index: 1;
  position:relative;
}
.stats-value{
  /* color: var(--teal); */
  font-size: 60px;
  text-align: center;
  height:45%;
  display: flex;
  align-items: center; 
  justify-content: left;
  margin:23px 0 0 30px;
  font-weight: var(--font-weight-medium);
  z-index: 1;
  position: relative;
}
.filter-value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.top-content {
  display: flex;
  justify-content: center; /* Aligns content to the top */
  margin:40px 0 0 0;
}

.bottom-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Pushes content to the bottom */
  padding:40px;
}
.container-item p{margin:0 0 10px 0 !important;}

.graphic-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Ensures children are left-aligned */
  text-align: left; /* Ensures text remains left-aligned */
  width: max-content; /* Shrinks to fit content width */
  max-width: 100%; /* Prevents overflow */
  margin: 0 auto; /* Centers horizontally */
  flex: 0 0 auto; /* Prevents flex from stretching */
}

.bidready {
  list-style-type: none;
  list-style-position: inside;
  padding-left: 0;
  margin-left: 0;
}

.bidready li {
  position: relative;
  padding-left: 50px;
  margin-top: 10px;
}

.bidready h2{margin: 0 0 10px 0;}

.bidready li::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 1em;
  height: 1em;
  background-image: url('/images/arrow-teal.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.ularrow-white li::before {
  background-image: url('/images/arrow-white.svg');
}
.graphic-content ul {
  list-style: none;
}
.graphic-content ul li{
  position: relative;
  margin-top: -40px;
  padding: 3px 0 2px 25px;
}
.graphic-content h2{margin: 0 0 10px 0;}
.graphic-content ul li:before {
  content: "•";
  font-size: 50px;
  position: relative;
  top: 45px;
  left: -30px;
}

#container2{
  display: flex; /* Ensures it expands properly */
  flex-direction: column; /* Stacks content properly */
  justify-content: center;
  align-items: center; /* Centers items horizontally (optional) */
  height:100vh;
  min-height:900px;
  /* max-height:70vh; */
  flex-grow: 1;
  position: relative;
  z-index: 0;
  /* background-color: var(--teal); */ 
  background: linear-gradient(to bottom, #1E3432, #25695F);
  flex:1;
  text-align: center;
}
#container2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/images/B-Sphere.svg) no-repeat 50%;
  background-size: contain; /* or cover */
  opacity: 0.5; /* adjust as needed */
  z-index: -1;
  -webkit-background-size: 110% auto;
  -moz-background-size: 110% auto;
  -o-background-size: 110% auto;
  background-size: 142%;
}
#container2 .linkblock{
  position:absolute;
  bottom:100px;
}
#container-article {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom, #1E3432, #25695F);
  text-align: center;
  height:759px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

#container-article .article-2box {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
  margin: 199px auto 0 auto;
  max-width: 70vw;
  /* padding-bottom: 100px;  */
  position: relative;
  width:100%;
}

#container-article .article-item-flex {
  padding: 20px 0;
  z-index: 2;
  text-align: left;
}

#container-article .article-image-wrapper {
  position: relative;
  /* transform: translateY(150px);  */
}

#container-article .article-item {
  /* width: 100%; */
  height: 650px;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  overflow: visible;
  position: absolute;
  z-index: 1;
  aspect-ratio: 858 / 650;
  left:50%;
  transform: translateX(-50%);
}

#container-article .article-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}


#container-works, #container-support{

  display: flex; /* Ensures it expands properly */
  flex-direction: column; /* Stacks content properly */
  justify-content: flex-end;
  align-items: center; /* Centers items horizontally (optional) */
  height:759px;
  /* min-height:900px; */
  /* max-height:70vh; */
  flex-grow: 1;
  position: relative;
  z-index: 0;
  /* background-color: var(--deep-teal); */
  background: linear-gradient(to bottom, #1E3432, #25695F);
  flex:1;
  text-align: center;
}
#container-works::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/images/B-Sphere.svg) no-repeat 50%;
  background-size: contain; /* or cover */
  opacity: 0.5; /* adjust as needed */
  z-index: -1;
  /* -webkit-background-size: 110% auto;
  -moz-background-size: 110% auto;
  -o-background-size: 110% auto;
  background-position: -240% 95%; */
  -webkit-background-size: 110% auto;
  -moz-background-size: 110% auto;
  -o-background-size: 110% auto;
  background-position: -340% 90%;
}
#container-welcome{
  display: flex; /* Ensures it expands properly */
  flex-direction: column; /* Stacks content properly */
  justify-content: center;
  align-items: center; /* Centers items horizontally (optional) */
  height:928px;
  flex-grow: 1;
  position: relative;
  z-index: 0;
  /* background: linear-gradient(to bottom, #1E3432, #25695F); */
  background-color: var(--teal);
  flex:1;
  text-align: center;
}
#container-welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/images/B-Sphere.svg) no-repeat 50%;
  background-size: contain; /* or cover */
  opacity: 0.5; /* adjust as needed */
  z-index: -1;
  -webkit-background-size: 142.5% auto;
  -moz-background-size: 142.5% auto;
  -o-background-size: 142.5% auto;
  background-size: 142.5%;
}

.video-thumbnail-wrapper {
  position: absolute;
  top: 780px; /* Adjust this to match how far from top of page it should appear */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  min-width: 350px;
  max-width: 1394px;
  max-height:558px;
  aspect-ratio: 16 / 9;
  background-image: url('/images/B-Hero_1.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20px;
  /* box-shadow: 0 6px 20px rgba(0,0,0,0.2); */
  z-index: 10;
}

.video-thumbnail-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.video-thumbnail-wrapper .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border:2px solid var(--lime);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: border 0.3s ease;
}

.video-thumbnail-wrapper .play-button::before {
  content: "";
  border-style: solid;
  border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent var(--lime);
  transition: border-color 0.3s ease;
}
/* ✅ Proper hover on parent */
.video-thumbnail-wrapper .play-button:hover::before {
  border-color: transparent transparent transparent var(--teal);
}

.video-thumbnail-wrapper .play-button:hover {
  border-color: var(--teal);
}

#container-support::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/images/B-Sphere.svg) no-repeat 50%;
  background-size: contain; /* or cover */
  opacity: 0.5; /* adjust as needed */
  z-index: -1;
  -webkit-background-size: 110% auto;
  -moz-background-size: 110% auto;
  -o-background-size: 110% auto;
  background-size: 120%;
  background-position: 160% 40%;
}
.container-grey{
   background: url(/images/BIDDA-Logomark-Lime-RGB.svg) no-repeat 0, 0; 
  /*-webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;  
  background-size: 110%;*/
  background-color: var(--light-grey);
  display: flex; /* Ensures it expands properly */
  flex-direction: column; /* Stacks content properly */
  justify-content: center;
  align-items: center; /* Centers items horizontally (optional) */
  height:auto;
  min-height:900px;
  /* max-height:70vh; */
  flex-grow: 1;
  position: relative;
  z-index: 0;
  flex:1;
  /* padding-top:60px; */
  margin:60px;
  border-radius: 30px;
  text-align: left;
}
.container-sage{
  background-color: var(--sage);
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  /* width:100vw; */
  padding:60px;
  margin:60px;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  position: relative;
  flex:1;
  border-radius: 30px;
  text-align: center;
 }
#containerright{
  flex:1;
  padding-top:60px;
  /* min-height:100%;
  width:100%;
  position: relative;
  z-index: 0;
  right:0; */
  background-color: #fff;
  /* display:inline-block; */
}
.containercontent{
  /* background: url(/images/green-circles.png) no-repeat; 
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: auto;
  background-position: right top; */
  flex:1;
  padding-top:60px;
  /* height:100%;
  width:100%;
  position: relative;
  z-index: 0;
  display:inline-block */
  max-width: 50VW;
  width: 100%;
  min-width: 400px;
  margin: auto;
}
.container-fullwidth{
    padding: 100px 0 ;
    position: relative;
    flex: 1;
    text-align: center;
}
#contentdiv{
  width:100%;

}
#content{
  margin:80px auto;
  width:70vw;

}
#content-home, #content-about, #content-faq, #content-support,
#content-contact,#content-company, #content-contractor{
  display:none;
}
#content ul{margin-bottom:0}

/* insights grid */

.grid-item-articles {
  padding: 0px;
  text-align: left;
  border: 0px solid var(--teal);
  border-radius: 30px;
  background-color: var(--sage);
}

.image-grid {
  display: flex;
  gap: 20px;
  padding: 0;
  max-width: 1200px;
  margin: 20px auto;
}

.image-item {
  position: relative;
  background: #888; /* Placeholder image background */
  border-radius: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  overflow: hidden;
}
.image-item::before, .grid-item-articles::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--deep-teal);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none; /* Allows clicks through the overlay */
}
.image-item.large {
  flex: 2;
  height: 786px;
}

.image-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;min-width:380px;
}

.image-item.top {
  height: 444px;
}
.image-item.bottom {
  height: 282px;
}
.image-item.article {
  height: 282px;
}
.image-grid .label, .image-item .label {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  color: #1E3432;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
}
.image-grid .content, .image-item .content{
  text-align: left;
  z-index: 10;
}
.image-grid .content h3,
.grid-item-articles h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.read-more {
  color: #C1FF00;
  font-weight: bold;
  font-size: 12px;
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.read-more::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #C1FF00;
  position: absolute;
  bottom: -2px;
  left: 0;
}
/* article cards */
.grid-container-articles {
  display: grid;
  gap: 40px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
  grid-template-columns: repeat(3, 1fr);
}

.article-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 0;
  overflow: hidden;
  height: 100%; /* ⚠️ Allows full height stretch inside grid cell */
  align-items: stretch;
  text-align: left;
  min-width:373px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.article-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.image-wrapper {
  background-size: cover;
  background-position: center;
  height: 240px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--deep-teal);
  opacity: 0.4;
  z-index: 0;
}

.image-wrapper .label {
  position: absolute;
  top: 20px;
  right: 20px;
  background: white;
  color: #1E3432;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 10;
}

.article-card .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 0;
}

.article-card .content h3 {
  margin-bottom: 10px;
}

.article-card .content .intro {
  flex-grow: 1; /* fills vertical space between h3 and link */
  margin: 20px 0;
}

.article-card .limelink {
  color: var(--teal);
  font-weight: var(--font-weight-semibold);
}
.article-card .limelink:hover {
  color: var(--lime);
  font-weight: var(--font-weight-semibold);
}
.featured-header{
  max-width: 1200px;
  margin: auto;
  text-align: left;
  display:flex;
  flex-wrap: wrap; /* 👈 Allows wrapping when needed */
  align-items: center;
  padding:0 20px;
}
#articlecats{
  margin: 0;
  padding:0;
  list-style: none;
  display:flex;
  flex-wrap: wrap; /* 👈 Allow li items to wrap within ul */
  gap: 10px;
  margin-left: auto;;
}
#articlecats li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--lime);
  border-radius: 25px;
  font-weight: var(--font-weight-medium);
  font-size: 15px;
  color: var(--teal);
  background-color: var(--white);
  width: 126px;
  height: 32px;
  white-space: nowrap;
}
#articlecats li:hover{
  background-color: var(--sage);
  color: var(--deep-teal);
  cursor: pointer;
}
#articlecats li.active {
  background-color: var(--deep-teal);
  color: var(--white);
}

/* end insights */

#homelogo{
  text-align:center;
  color:#fff;
  position: relative;
  z-index: 100;
}
#header{
  top:0;
  background-color: var(--light-grey);
  height:100px;
  position: fixed;
  width:calc(100% - 100px);
  z-index: 1000;
  /* border-bottom:solid 1px #00385C; */
  margin: 0 0 0 60px;
}
#header1{
  top:47PX;
  height:130px;
  background: transparent;
  /* border-bottom: 1px solid #00385C; */
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 10000;
  transition: background-color 1.5s ease; 
  /* display: flex; */
}
#header1.scrolled {
    background: var(--teal); /* Fade in to this color */
}
#headertop{
  top:0;
  height:47px;
  background: var(--deep-teal);
  /* border-bottom: 1px solid #00385C; */
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 10000;
  /* display: flex; */
}
#headerportal{
  top:0;
  background-color: var(--sage);
  /* height:100px;
  position: fixed; */
  /* width:100%; */
  z-index: 1000;
  margin: 105px 0 0 0;
}
#headnav{
  margin:0;
  display:inline-block;
}
#usernamediv{float:right;display:none;}
#companydata{
  margin: 0;
  display:block;
}
.user-profile-box {
  display: flex;
  align-items: center;
  gap: 16px;
  height:42px;
  background-color: var(--sage); /* optional for contrast */
  padding: 0 20px;
  border-radius: 50px;
  font-family: var(--font-family);
}

.notification-wrapper {
  position: relative;
  font-size: 18px;
  color: var(--deep-teal);
}

.notification-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background-color: var(--lime);
  border-radius: 50%;
  color: var(--teal);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}
.notification-dot-menu {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background-color: var(--lime);
  border-radius: 50%;
  color: var(--teal);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  box-sizing: border-box;
}
.notification-dot-menu.right25 {
  right: calc(-4px - 40px); 
  top:0 !important;
}
.notification-dot.right25 {
  right: calc(-4px - 40px); 
  top:0 !important;
}
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--deep-teal);
  line-height: 1.2;
  height:100%;
  text-align: right;
}

.profileheading {
  font-weight: var(--font-weight-semibold);
  font-size: 16px;
}

.company-name {
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  opacity: 0.7;
}

.avatar-circle {
  /* background-color: var(--white); */
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--deep-teal);
}




#tgusernamediv{
  display:none;
  margin: -60px 0 0 20px;
  font-size: 22px;
  position: absolute;
}
#tgusernamediv i{margin-right:10px;}
#mainmenu{
  /* display:block; */
  flex-grow: 1;
}
#lowmenu{display:none;padding-left:20px;}
/* #sidebar{
  width:290px;
  height:100%;
  position:fixed;
  left:0;
  top:0;
  background-color: var(--deep-teal);
  display:block;
} */
 /*  Sidebar working with scroll */ 
/* #sidebar {
  width: 290px;
  min-height: 100vh;              
  background-color: var(--deep-teal);
  display: flex;
  flex-direction: column;
} */
/* Ensure sidebar stays fixed */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  min-height: 910px;
  width: 290px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* pushes footerp to bottom */
  background-color: var(--deep-teal);
  z-index: 10;
  overflow: hidden;
}
.sidebar-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}
#sidebar-feature{
  width:180px;
  height:225px;
  background-color: var(--teal);
  border-radius: 30px;
  padding:20px;
  position: relative; 
  overflow: hidden;
  margin:auto;
}
#sidebar-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/images/B-Sphere.svg) no-repeat;
    background-position: 40.5% calc(50% + 30px); 
    background-size: 350%;
    opacity: 0.5;
    transform: scale(-1, -1);
    z-index: 0;
    -webkit-background-size: 350% auto;
    -moz-background-size: 350% auto;
    -o-background-size: 350% auto;
}

#sidebarbottom {
  width: 100px;
  background-color: var(--light-grey);
  padding-top: 10px;
  display: flex;
  align-items: center;
}
/* #sidebarbottom {
  width: 100%;
  position:fixed;
  padding-top: 10px;
  display: block;
  align-items: center; 
} */
#sidebar ul {margin:10px 0 0 0;}
#sidebar ul li, #sidebarbottom ul li{
  margin:0;
  padding:8px 0 8px 80px;
  font-size: 14px;
}
#sidebar ul li:hover, .navhover{
  background: rgb(199, 220, 205, 0.1);
  cursor: pointer;
}

.input-icon-wrapper {
  position: relative;
  width: 100%;
  margin-bottom:20px;
}

.input-icon-wrapper i {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
  color: var(--white); /* or your desired color */
  pointer-events: none; /* so it doesn’t block clicks in the input */
  font-size: 16px;
}
.portalsearch{
  max-width:180px !important;
  width:100% !important;
  padding:2px 5px 2px 50px !important;
  font-size: 18px !important;
  border:0px solid var(--sage) !important;
  background: rgb(199, 220, 205, 0.1) !important;
  color:var(--white) !important;
  border-radius: 30px !important;
  margin:0 auto !important;
  height:40px !important;
  display:block;
}
.portalsearch::placeholder {
  color: var(--white);
}

.portalsearch::-webkit-input-placeholder {
  color: var(--white);
}

.portalsearch:-moz-placeholder {
  color: var(--white);
  opacity: 1;
}

.portalsearch::-moz-placeholder {
  color: var(--white);
  opacity: 1;
}

.portalsearch:-ms-input-placeholder {
  color: var(--white);
}
.horlinenav{
  border-bottom:2px solid rgb(199, 220, 205, 0.1);
  margin:5px 0;
  width:100%;
}
/* FontAwesome Custom */
.fa-li{position: relative;}
.fa-house,.fa-user ,.fa-gear , 
.fa-right-from-bracket ,.fa-user-pen ,
.fa-magnifying-glass ,.fa-chart-mixed, .fa-bell-ring, 
.fa-comment, .fa-user, .fa-chart-simple, .fa-list{
  color:var(--white);
  /* background-color:var(--light-grey); */
  cursor: pointer;
  padding:8px 20px 8px 8px;
  border-radius: 8px;;
}

/* .fa-house:hover,.fa-gear:hover, 
.fa-right-from-bracket:hover,.fa-user-pen:hover,
.fa-magnifying-glass:hover,.fa-chart-mixed:hover{
  color:var(--deep-teal);
  background-color:var(--sage);
  cursor: pointer;


} */
/* Charts */

#chart-container {
  width: 350px;
  height: auto;
  margin-right:20px;
}
#doughnut-container {
  width: 450px;
  height: auto;
}

.push{height:40px;}
#headermenudiv{display:block;position: absolute;right:60px;}

#topmenudiv{display:block;position: absolute;right:60px;margin-top:20px;}
#footer1{display:block;}
#footer1{
  height: 400px;
  width: 100%;
  background-color: var(--teal);
  padding: 0;
  border-top:1px solid var(--teal);
}
#footer2{
  height: 70px;
  width: 100%;
  background-color: var(--deep-teal);
  padding: 0;
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 100px;
}

.footer-left {
  margin-left: 0; /* already handled by padding */
}

.footer-right {
  margin-right: 0; /* already handled by padding */
}

#footer{
  height: 40px;
  width: 100%;
  padding: 20px 0;
  bottom:0;
}
.footer-container{
  position: relative; /* Ensure ::before is positioned relative to this container */
  max-height: 614px;
  padding: 0 !important;
  overflow: hidden;
  z-index: 1;
}
.footer-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--deep-teal);
  opacity: 0.6;
  z-index: 0;
  pointer-events: none; /* Allows clicks through the overlay */
}
/* Original footerp style*/
/* #footerp {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    min-height: 150px;
    padding: 0;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
} */
/* Working footerp style with footerp attached to the bottom of sidebar scrolls with page*/ 
/* #footerp {
  width: 100%;
  padding: 0;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  flex-shrink: 0;
  margin-bottom:50px;
} */

/* Revised footerp style as sticky footer */
/* #footerp {
  position: relative;
  width: 100%;
  min-height: 150px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
} */

/* Default: footerp is sticky at bottom of sidebar */
#footerp {
  position: relative;
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin: auto 0 50px 0;
}

.poweredby{
  font-size:11px;
  color:rgb(199, 220, 205, 0.5);
  margin:0 0 10px 35px !important;
  text-transform: uppercase;
}
#bottomportaldiv {
  display: flex;
  justify-content: center;  /* center content horizontally */
  align-items: center;      /* center content vertically */
  height: 100%;             /* take up available space */
  font-weight: var(--font-weight-regular);
  font-size: 12px;
  color: var(--white);
}
#bottommenudiv{
  /* text-align: left;
  margin:auto;
  max-width:700px; */
  /* border-top:1px solid var(--teal); */
  width:100%;
  margin:20px;
}

.bottommenu, .requestmenu {
  list-style: none; /* Removes default bullets */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* Ensures list items behave as a column */
  align-items: flex-start;
  gap: 10px; /* Spaces out list items */
  width: 100%; /* ✅ Makes sure the menu takes full width of .grid-item-footer */
  text-align: left;
}
.bottommenu{
  padding:0 0 20px 0 !important;
}
.bottommenu a, #bottommenudiv a {
  text-decoration: none;
  color: inherit; 
}

 .bottommenu li {
  padding: 0; 
  display:inline-block;
  border-bottom:2px solid var(--teal);
}
.bottommenu li:hover {
  color: var(--lime);
  border-bottom-color: var(--lime);
  cursor: pointer;
}

.requestmenu li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 30px;
  color: var(--white);
  background: rgba(199, 220, 205, 0.14);
  height: 60px;
  width: 260px;
  overflow: hidden;
  z-index: 1;
}

.requestmenu li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(199, 220, 205, 1);
  transform: translateX(-100%);
  opacity: 0;
  z-index: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.requestmenu li:hover::before {
  transform: translateX(0);
  opacity: 1;
  cursor:pointer;
}

.requestmenu li span {
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
}

.requestmenu li:hover span {
  color: var(--teal);
  cursor:pointer;
}

/* box for green arrow */
.arrow-box {
  width: 60px;
  height: 60px;
  background: var(--lime);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2; /* ensure it's above ::before */
}

/* right-pointing arrow */
.greenarrow {
  position: relative;
  width: 20px;
  height: 20px;
}

.greenarrow::before,
.greenarrow::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 15px;
  background: var(--teal);
  top: 50%;
  left: 80%;
}

.greenarrow::before {
  transform: translate(-50%, -100%) rotate(-45deg);
  transform-origin: bottom center;
}

.greenarrow::after {
  transform: translate(-50%, 0%) rotate(45deg);
  transform-origin: top center;
}

#fsignin a.full-link {
  display: flex;            /* if using flex for arrow layout */
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
  height: 100%;
}




#cregister{
    display: inline-block;
    margin-left: 60px;
}

#socialicons{
  font-weight: var(--font-weight-bold);
  margin:0 0 20px -40px;
  list-style: none;
  font-size:200%;
}
#socialicons li {
  margin:0 10px 0 0;
  display:inline-flex;
  border:0px solid var(--deep-teal);
  padding:2px 4px 2px 4px;
  font-weight: var(--font-weight-medium);
  color:var(--white);
}
.links a, .links a:active, .links a:visited{
    color:var(--deep-teal);
    text-decoration: none;
}
.links a:hover{
    color:var(--lime);
    text-decoration: underline; 
}
.limelink{
  color:var(--lime);
  text-decoration: underline; 
}
.limelink:hover{
  color: var(--white);
  cursor: pointer;
}
.teallink{
  color:var(--teal);
  text-decoration: underline; 
}
.teallink:hover{
  color: var(--lime);
  cursor: pointer;
}
#socialicons i:hover{color:var(--lime);cursor: pointer;}
.headermenu i, .footermenu i{margin:-5px 10px 0 0;vertical-align: middle;}
.headermenu i:hover, .footermenu i:hover{color: var(--lime);}
#topmenu a, #topmenu a:active,#topmenu a:visited,
.headermenu a, .headermenu a:active,.headermenu a:visited, .headermenu li, .headermenu i,
.footermenu a, .footermenu a:active,.footermenu a:visited, .footermenu li, .footermenu i,
.footer2menu a, .footer2menu a:active,.footer2menu a:visited{
    color:var(--white);
    text-decoration: none;
}
#topmenu, .headermenu, .footermenu{margin:14px 0 -10px 0;list-style: none;display:inline-block;}
.footer2menu{margin: 10px 0 10px -10px !important;list-style: none;display:inline-block;}
#topmenu li, .headermenu li, .footermenu li {
  margin:0 10px 0 40px;
  display:inline-flex;
  border:0px solid var(--deep-teal);
  padding:2px 4px 2px 4px;
  font-weight: var(--font-weight-extrabold);
  font-size:14px;
}
.footer2menu li {
  margin:0;
  display:inline-flex;
  border:0px solid var(--deep-teal);
  padding:2px 4px 2px 4px !important;
  font-weight: var(--font-weight-medium);
  font-size: 12px !important;
}
.footer2menu a:hover{
  border-bottom:2px solid var(--lime);
  color: var(--lime);
}
#topmenu li:hover, .headermenu li:hover{
  margin:0 10px 0 40px;
  display:inline-flex;
  color:var(--lime);
  border-bottom:2px solid var(--lime); 
  padding:2px 4px 2px 4px;
  cursor: pointer;
}

.headermenu li:hover, .headermenu li:hover i,
.footermenu li:hover, .footermenu li:hover i{
  color:var(--lime);
}
.tmhoverclass{
  margin:0;
  display:inline-flex;
  color:var(--lime);
  /* background-color: var(--lime); */
  border-bottom:2px solid var(--lime) !important;
  padding:2px 4px 2px 4px;
  /* border-radius: 4px; */
}
.menuhoverclass{
  margin:0;
  display:inline-flex;
  color:var(--lime);
  /* background-color: #f09719; */
  border:0px solid #00385C !important;
  padding:4px;
  border-radius: 4px;
}
/* #topmenu li::after {
  content: " | ";
  padding: 0.5em;
} */
#biddalogohome{
  background: url(/images/BIDTEK-Primary-Logo-Reversed-RGB.svg) no-repeat left; 
  text-align:left;
  position: relative;
  z-index: 100;
  height:100px;
  width:500px;
  margin:auto;
  top:0;
  display:inline-block;
  /* justify-content: flex-end; */
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
#biddalogo{
  background: url(/images/BIDTEK-Primary-Logo-Reversed-RGB.svg) no-repeat left; 
  text-align:left;
  position: absolute;
  z-index: 100;
  height:60px;
  width:300px;
  margin:30px 0 0 0;
  left:60px;
  top:0;
  display:inline-block;
  /* justify-content: flex-end; */
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
#biddalogosml {
    background: url(/images/BIDTEK-Primary-Logo-Reversed-RGB.svg) no-repeat center;
    position: absolute;
    z-index: 9000;
    height: 30px;
    width: 300px;
    top: 10px;
    left: 150px;
    transform: translateX(-50%);
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
#biddalogosml{display:none;}
#portallogo{
  background: url(/images/BIDTEK-Primary-Logo-Reversed-RGB.svg) no-repeat;
  height:40px;
  width:222px;
  margin:40px auto 70px auto;
}
.hiddendiv{display:none;}

#help-content .subtitle{
  font-size:1.3em;
  display:contents;
  width:auto;
  color:var(--teal);
  margin:5px 0 5px 0;
}
#help-content > ol > li{
  margin-bottom:10px;
}
#headnav .subtitle{
  font-size:20px;
  display:inline-block;
  width:auto;
  color:var(--teal);
  margin:0;

}
#atmdata .subtitle{
  font-size:20px;
  display:inline-block;
  width:auto;
  color:#00385C;
  margin:12px 0 0 0;

}
#atmdata .title{
  color:var(--deep-teal);
  display:block;
  font-weight: var(--font-weight-regular);
  margin:0 0 20px 10px;
}
#headnav .subtitle > .fa-user{
  font-size:20px !important;
  vertical-align: middle !important;
  margin:0 5px 2px 0 !important;
  color: var(--teal) !important;
  cursor: default !important;
}
#headnav .subtitle:hover{
  pointer-events: none;
}
#container2 .subtitle, .featuretitle{
  font-size:2em;
  display:block;
  /* text-shadow: 1px 1px #000;  */
  color:#fff; 
  margin:10px 0 0 0;
}
.featuretitle{
  font-size: max(2vw, 20px);
  text-align: center;
  width: 100%;
}
.darktitle{
  font-size: max(2vw, 20px);
  text-align: center;
  width: 100%;
  text-shadow: none;
  color:#00385C;
  margin:10px 0 0 0;
  display:block;
}
.darksubtitle{
  color:#00385C;
  margin: 0 auto 60px auto;
  text-align: center;
  /* max-width: 450px; */
  font-size: max(1.5vw, 16px);
}
.yellowarrow {
  width: 180px; /* Set width to 50% */
  height: 20px; /* height of the rectangular part */
  background-color: #f09719; /* color of the rectangle */
  margin: 0 auto; /* Center the rectangle */
  position: relative;
  border-radius: 4px 4px 0 0;
}

.yellowarrow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -40px; /* Position the triangle below the rectangle */
  transform: translateX(-50%); /* Center the triangle */
  width: 0;
  height: 0;
  border-left: 112.5px solid transparent; /* Half of 50% width (225px / 2) */
  border-right: 112.5px solid transparent;
  border-top: 40px solid #f09719; /* color and height of the triangle */
}
#featurepanel{
  text-align: center;
  max-width: 80%;
  position: absolute; 
  /* padding: 60px; */
  /* transform: translate(0, 50%); */
  margin: auto;
  top:25%;
  left:10%;
  right:10%;
  bottom:25%;
  width:80%;
  display:grid;
}
#welcomepanel{
  text-align: center;
  max-width: 1000px;
  position: absolute; 
  margin: auto;
  top:25%;
  left:10%;
  right:10%;
  bottom:20%;
  width:80%;
  display:grid;
  max-height:500px;
}
.subtitle-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pushes content to the bottom */
  height: 100px; /* or whatever height you want */
}
#headtitle{
    display:none;
    color:#00385C;
    font-size: 1em;
    width:calc(100% - 120px);
    margin:2px 0 0 5px;
  }
.describe{font-size:1.5em;display:block;margin:40px 0 0 0;text-shadow: 1px 1px #000;}
#btnlogout{margin-left:40px}
#login{
  display:block;
  /* float:left; */
  width:400px;
  margin:auto;
  display:flex;flex-wrap: wrap;
} 
#payform{
  display:block;
  float:left;
  width:100%;
  margin:auto;
  /* display:flex;flex-wrap: wrap; */
}
#payform label{width:100%;}
/* #login input{
  width:96%;
  padding:5px;
} */
/* input[type="text"], input[type="password"]{
  background-color: #fff;
  box-shadow: none;
  border:none;
  border-radius: 8px;
  border:01px solid var(--deep-teal);
  padding:0 10px;
  height:40px;
  color:var(--teal);
} */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: var(--white) !important;
  /* -webkit-box-shadow: 0 0 0 1000px var(--light-grey) inset !important; */
  -webkit-text-fill-color: var(--teal) !important;
  transition: background-color 5000s ease-in-out 0s;
  border:none;
}

/* #login input[type="text"],#login input[type="password"]{
  background-color: var(--light-grey);
  box-shadow: none;
  border:none;
  border-radius: 8px;
} */
#payform input{
  width:96%;
  padding:5px;
  margin:5px 0;
}
#frmregister, #regtypediv, #frmcontact, #accountdiv{
  margin:20px 0 0 0;
  padding-top:20px;
  width:100%;
  color:var(--light-grey);
  position: relative;
  z-index: 100;
  flex:1 0;
}
#frmcontact{margin:auto;max-width:450px;text-align: left;}
#accountdiv{margin:10px 0 20px 0; padding-top:0;overflow:hidden;}
#surveyfrm{
  margin:20px 0 0 0;
  /* padding-top:20px; */
  width:100%;
  color:var(--light-grey);
  position: relative;
  z-index: 100;
  flex:1 0;
}
.flexdiv {
  display: flex;
  flex-wrap: wrap;
  /* flex-direction: column; */
  gap: 10px; /* Adjust as needed */
}


#frmregister{
  margin:0 0 0 20px!important;
}
#frmregister input, #regtypediv input, #frmcontact input, #frmcontact .textarea,#frmcontact .textarea,
#tabs form input, #surveyfrm input, #surveyfrm .textarea, #accountdiv input, input[type="text"], input[type="password"],
.form input.form-control, .form textarea.form-control, .form select.form-control{
  max-width:365px;
  width:100%;
  padding:5px 30px;
  font-size: 20px;
  border:0px solid var(--sage);
  color:var(--teal);
  border-radius: 30px;
  margin-bottom:30px;
  height:40px;
}
#atmtable input{
  max-width:250px;
}
#filenameDisplay{
  max-width:385px;
  width:100%;
  padding:5px;
  border:0px solid #00385C;
  height:15px;
  border-radius: 4px;
  margin-top:20px;
  color:#000;
}
#progress, #fileInput, #fileToUpload, #fileToUpload1, #fileToUpload2{
  color:var(--deep-teal);
}
#logothumb, #cslink{margin:10px;}
#categories, #categories2{height:300px;font-size: 18px;width:100%;}
#regtypediv, #frmcontent{
  display:none;
}
/* #frmregister input[type=submit], #frmcontact input[type=submit], input[type=button], input[type=submit],
 .btnsage{
  padding:10px !important;
  background-color: var(--sage) ;
  border: 0px solid var(--teal) !important;
  border-radius: 25px;
  margin-top:20px;
  color:var(--deep-teal);
  font-weight: var(--font-weight-medium);
  display:inline-block;
  max-width:400px;
  width:100%;
  font-size:150% !important;
} */

/* Common arrow base for all variants */
/* Base wrapper */
.select-wrapper {
  position: relative;
  display: inline-block;
  height: 50px;
  z-index: 1;
  overflow: visible;
}

/* Base select styles */
.select-wrapper select {
  width: 100%;
  height: 50px;
  font-size: 20px;
  border-radius: 30px;
  color: var(--teal);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--white);
  border: 1px solid var(--sage);
  padding: 0 50px 0 15px; /* reserve space for arrow */
  position: relative;
  z-index: 1;
}

/* Width variants */
.select-wrapper.wide {
  width: 425px;
}
.select-wrapper.medium {
  width: 170px;
}
.select-wrapper.narrow {
  width: 110px;
}
.select-wrapper.full {
  width: 100%;
}

/* Padding and border overrides */
.select-wrapper.wide select {
  padding: 0 40px 0 30px;
  border: 0px solid var(--sage);
}

.select-wrapper.medium select,
.select-wrapper.narrow select {
  padding: 0 20px 0 10px;
  border: 1px solid var(--sage);
}

/* Hover styles */
.select-wrapper select:hover {
  cursor: pointer;
}

/* Arrow pseudo-elements */
.select-wrapper::before,
.select-wrapper::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 20px;
  height: 5px;
  background-color: var(--lime);
  transform-origin: center;
  pointer-events: none;
  z-index: 2;
}

/* Left slanting line */
.select-wrapper::before {
  transform: translateY(-50%) rotate(45deg);
}

/* Right slanting line */
.select-wrapper::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* Arrow position adjustments */
.select-wrapper.wide::before {
  right: 28px;
}
.select-wrapper.wide::after {
  right: 16px;
}

.select-wrapper.medium::before {
  right: 24px;
}
.select-wrapper.medium::after {
  right: 12px;
}

.select-wrapper.narrow::before {
  right: 22px;
}
.select-wrapper.narrow::after {
  right: 10px;
}
.select-wrapper.full::before {
  right: 22px;
}
.select-wrapper.full::after {
  right: 10px;
}
/* end select wrapper */

input::-webkit-input-placeholder {
  color: var(--teal);
}

input::-moz-placeholder {
  color: var(--teal);
}

input:-ms-input-placeholder {
  color: var(--teal);
}

input::placeholder {
  color: var(--teal);
}

input:focus,
textarea:focus {
  outline: none;
  /* box-shadow: 0 0 0 2px var(--teal); */
  border-color: var(--teal); 
}

#portallogin{
  max-width: 500px;
  width: 500px;
  margin: auto;
  position: absolute;
  z-index: 100;
  display: block;
  flex-wrap: wrap;
  max-height: 400px;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
}
#demologin{
  margin:20px;
  width:300px;
  position: relative;
  z-index: 100;
  display:flex;
  flex-wrap: wrap;
  max-height:400px;
  /* top:50%; */
  /* transform: translate(0%, -60%);
  right:0; */
}
#demologin label, #frmregister label, #surveyfrm label, #portallogin label,
#frmcontact label{
  display:block;
  color:var(--teal);
  margin:10px 0 10px 0;
  font-size: 22px;
}

#demologin label, #portallogin label{
  /* color:#00385C; */
}
#frmcapability label{
  display:inline-block;
  color:#000;
  margin:10px 10px 10px 0;
  font-size: 22px;
}
#billplanmonthly, #billplanannually{
  margin:20px auto;
  max-width:816px;
  position: relative;
  z-index: 100;
  display:flex;
  flex-wrap: wrap;
}
#billplanannually{display:none;}
#subscribeheader{max-width:500px; margin:auto;}
.billplan{
  width:200px;
  height:325px;
  padding:10px;
  background-color:#e8e8e8;
  margin:10px;
  border:1px solid #00385C;
  border-radius: 10px;
}
#billplanannually .billplan{background-color:#d7d7d7;}
.billplan .title{
  font-size:1.5em;
  font-weight: bold;
  display:block;
  width:100%;
  float: left;
  color:#00385C;
  margin: 0 0 10px 0;
  text-shadow: none;
}
.billplan >ul{margin-left: 25px;}
.billplan .fa-ul > li{
  margin-bottom:10px;
}
#signup{
  margin:0 auto;
  /* padding-top:20px; */
  width:400px;
  color:#fff;
  position: relative;
  z-index: 100;
  height:auto;
  /* display:flex;
  flex-wrap: wrap; */
}
#signup .subtitle{
  height:40px;
  margin:0px 0 20px 0;
}
#atmfilter{
    display: flex;
    align-items: left;
    gap: 16px;
    background-color: var(--white);
    margin-bottom:20px;
}
/* #atmfilter {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: auto;
  padding: 10px;
  max-width: 100%;
  box-sizing: border-box;
} */
#atmfilter label{
  display:inline;
  color:var(--teal);
  margin:-25px 0 0 10px;
  position:absolute;
}
/* #filtersubmit, #filterreset{
  padding:10px !important;
  background-color: #00385C;
  border-radius: 4px;
  color:#fff;
  font-weight: bold;
  display:inline-block;

} */
#atmtable .select{
  width: 96%;
  padding: 5px;
  margin: 0;
  height:40px;
  border: 1px solid var(--sage);
}
#atmtable input{
  width: 90% !important;
  padding: 5px;
  margin: 0;
}
#btnlogout{
  padding: 8px 16px !important;
  background-color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 25px;  color:#fff;
  font-weight: var(--font-weight-medium);
  font-size:150%;
  display:inline-block;
  float: right;
}

#loginsubmit, #btnsignup, .btnstandard, #paysubmit{
  padding:4px 16px !important;
  background-color: var(--lime);
  border: 0px solid var(--teal);
  border-radius: 25px;
  color:var(--deep-teal);
  font-weight: var(--font-weight-medium);
  font-size:150%;
  display:inline-block;
  width:auto;
  max-height:40px;
  height:40px;
  text-align: center;
}

 .btnfilter{
  padding:12px 15px;
  background-color:#fff;
  border: 1px solid var(--sage);
  border-radius: 30px;
  color:var(--teal);
  font-weight: var(--font-weight-medium);
  font-size:20px;
  display:inline-block;
  width:140px;
  /* max-height:40px; */
  /* height:30px; */
  text-align: center;
}
#filterreset{background-color:var(--sage);}
#filtersubmit:hover, #sortsubmit:hover{
  background-color: var(--lime);
  border: 1px solid var(--sage);
  color:var(--teal);
  font-weight: var(--font-weight-medium);
  cursor:pointer;
}
#filterreset:hover{
  background-color: var(--lime);
  border: 1px solid var(--lime);
  color:var(--teal);
  font-weight: var(--font-weight-medium);
  cursor:pointer;
}
#paysubmit{
  /* max-width:215px; */
  margin-top:20px;
  padding:5px 16px 0 16px !important;
}
#uploadsubmit, #uploadsubmit2, 
::file-selector-button, .btnblue{
  padding:10px !important;
  background-color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 25px;
  margin-top:0px;
  color:var(--teal);
  font-weight: var(--font-weight-medium);
  font-size:150%;
  display:inline-block;
  width:auto !important;
  /* max-height:40px; */
}
#btnusernext{
  padding:10px !important;
  /* background-color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 25px;
  margin-top:20px;
  color:#fff;
  font-weight: var(--font-weight-medium); 
  font-size:150%;*/
  display:table;
  /*width:40px; */
  max-height:40px;
  text-align: center;
  cursor: pointer;
}
#btnsignup{
  margin-bottom:20px;
}

/* button styles */
.btnlime {
  display: inline-block;
  padding: 9px 16px; /* Adjust padding */
  font-size:16px;
  font-weight: var(--font-weight-bold);
  background-color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 25px;
  margin-top: 20px;
  color: var(--teal);
  position: relative; /* Needed for positioning the pseudo-element */
  cursor: pointer;
  text-align: center;
  /* transition: all 0.3s ease-in-out; */
}
.btnlime-arrow {
  display: inline-block;
  padding: 9px 16px; /* Adjust padding */
  font-size:16px;
  font-weight: var(--font-weight-bold);
  background-color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 25px;
  margin-top: 20px;
  color: var(--teal);
  position: relative; /* Needed for positioning the pseudo-element */
  cursor: pointer;
  /* transition: all 0.3s ease-in-out; */
}
.btnlimeteal {
  display: inline-block;
  padding: 9px 16px; /* Adjust padding */
  font-size:16px;
  font-weight: var(--font-weight-bold);
  background-color: var(--lime);
  border: 1px solid var(--lime);
  border-radius: 25px;
  margin-top: 20px;
  color: var(--teal);
  position: relative; /* Needed for positioning the pseudo-element */
  cursor: pointer;
  /* transition: all 0.3s ease-in-out; */
}
.btnteallime {
  display: inline-block;
  padding: 9px 16px !important; /* Adjust padding */
  font-size:20px !important;
  font-weight: var(--font-weight-bold) !important;
  background-color: var(--teal) !important;
  border: 0px solid var(--teal);
  border-radius: 30px;
  color: var(--lime) !important;
  position: relative; /* Needed for positioning the pseudo-element */
  text-decoration: none;
  height:auto !important;
  max-width: 365px;
  width: 100%;
  text-align: center;
  /* transition: all 0.3s ease-in-out; */
}
.btnlime:hover {
  background-color: transparent;
  border: 1px solid var(--lime);
  color: var(--lime);
  cursor: pointer;
}
.btnlime.active {
  background-color: transparent;
  border: 1px solid var(--lime);
  color: var(--lime);
  cursor: pointer;
}
.btnlimerev, .limecategory {
  display: inline-block;
  padding: 9px 30px;
  font-size:16px;
  font-weight: var(--font-weight-bold);
  background-color: transparent;
  border: 1px solid var(--lime);
  border-radius: 25px;
  margin-top: 20px;
  color: var(--lime);
  position: relative;
  cursor: pointer;
}
.btnlimerev:hover {
  background-color: var(--lime);
  border: 1px solid var(--lime);
  color: var(--teal);
  cursor: pointer;
}
.btnlimerev.active {
  background-color: var(--lime);
  border: 1px solid var(--lime);
  color: var(--teal);
  cursor: pointer;
}
.btnlimeteal:hover {
  background-color: var(--teal);
  border: 1px solid var(--teal);
  color: var(--lime);
  cursor: pointer;
}
.btnteallime:hover {
  background-color: var(--lime) !important;
  border: 0px solid var(--deep-teal);
  color: var(--deep-teal) !important;
  cursor: pointer;
}
/* Circle Outline Instead of Solid Background */
.btnlime-arrow::after {
  content: "";
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: transparent; 
  border: 2px solid var(--lime);
  position: absolute;
  right: -45px; 
  top: 50%;
  transform: translateY(-50%);
  /* transition: all 0.3s ease-in-out; */
}

/* Right Arrow Inside the Circle */
.btnlime-arrow::before {
  content: "";
  position: absolute;
  right: -35px; /* Position inside the circle */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid var(--lime); /* Creates the arrow */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  /* transition: all 0.3s ease-in-out; */
}

/* Hover effect on Button */
.btnlime-arrow:hover {
  background-color: transparent;
  border: 1px solid var(--lime);
  color: var(--lime);
  cursor: pointer;
}

/* Hover effect on Circle */
.btnlime-arrow:hover::after {
  border-color: var(--deep-teal); /* Change circle border color */
}

/* Hover effect on Arrow */
.btnlime-arrow:hover::before {
  border-left-color: var(--deep-teal); /* Change arrow color */
}

/* my-tickets-content */
#my-tickets-content {
  .container-item {
    &.background-white {
      background: var(--white);
      /* border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1); */
      
      .content-padding {
        padding: 20px;
      }
    }
  }
  
  .ticket-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 20px;
    
    .title {
      color: var(--teal);
      font-weight: var(--font-weight-semibold);
      font-size: 27px;
    }
  }
  
  .message-container {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 4px;
    
    &.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    
    &.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    
    strong {
      font-weight: var(--font-weight-bold);
    }
  }
  
  .no-tickets-container {
    text-align: center;
    padding: 40px;
    color: #666;
    
    .icon {
      font-size: 48px;
      margin-bottom: 20px;
    }
    
    h4 {
      color: var(--teal);
      margin-bottom: 15px;
      font-weight: var(--font-weight-semibold);
    }
    
    p {
      margin-bottom: 20px;
      
      strong {
        font-weight: var(--font-weight-bold);
      }
    }
  }
  
  .tickets-table-container {
    overflow-x: auto;
    margin-top: 20px;
    
    .tickets-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--white);
      border-radius: 10px;
      overflow: hidden;
      
      thead {
        tr {
          background-color: var(--sage);
          color: var(--teal);
          
          th {
            padding: 15px;
            text-align: left;
            font-weight: 600;
            font-weight: var(--font-weight-semibold);
            
            &:nth-child(1) { /* Ticket ID */
              width: 120px;
              min-width: 100px;
            }
            
            &:nth-child(2) { /* Subject */
              width: 35%;
              min-width: 200px;
            }
            
            &:nth-child(3) { /* Status */
              width: 120px;
              min-width: 100px;
            }
            
            &:nth-child(4) { /* Priority */
              width: 100px;
              min-width: 80px;
            }
            
            &:nth-child(5) { /* Created */
              width: 140px;
              min-width: 120px;
            }
            
            &:nth-child(6) { /* Last Update */
              width: 140px;
              min-width: 120px;
            }
            
            &:nth-child(7) { /* Replies */
              width: 80px;
              min-width: 60px;
              text-align: center;
            }
          }
        }
      }
      
      tbody {
        tr {
          border-bottom: 1px solid #eee;
          transition: background-color 0.2s;
          background-color: var(--white);
          
          &:hover {
            background-color: #f8f9fa;
          }
          
          td {
            padding: 15px;
            
            &.ticket-id {
              a {
                color: var(--teal);
                text-decoration: none;
                font-weight: 600;
                font-weight: var(--font-weight-semibold);
                
                &:hover {
                  text-decoration: underline;
                }
              }
            }
            
            &.subject-cell {
              max-width: 300px;
              
              .subject-title {
                font-weight: 500;
                font-weight: var(--font-weight-medium);
                margin-bottom: 5px;
              }
              
              .subject-author {
                font-size: 12px;
                color: #666;
              }
            }
            
            &.status-cell,
            &.priority-cell {
              .status-badge,
              .priority-badge {
                color: var(--white);
                padding: 4px 8px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 500;
                font-weight: var(--font-weight-medium);
                
                &.status-new {
                  background-color: var(--lime);
                  color:var(--teal);
                }
                
                &.status-waiting {
                  background-color: #ffc107;
                }
                
                &.status-replied {
                  background-color: #17a2b8;
                }
                
                &.status-resolved {
                  background-color: var(--mid-green);
                  color:var(--white);
                }
                
                &.status-progress {
                  background-color: #fd7e14;
                }
                
                &.status-hold {
                  background-color: #6c757d;
                }
                
                &.priority-critical {
                  background-color: #dc3545;
                }
                
                &.priority-high {
                  background-color: #fd7e14;
                }
                
                &.priority-medium {
                  background-color: #ffc107;
                }
                
                &.priority-low {
                  background-color: var(--teal);
                  color:var(--white);
                }
              }
            }
            
            &.date-cell {
              font-size: 14px;
              color: #666;
            }
            
            &.replies-cell {
              text-align: center;
              
              .replies-badge {
                background-color: var(--lime);
                color: var(--teal);
                padding: 4px 8px;
                border-radius: 12px;
                font-size: 12px;
                font-weight: 500;
                font-weight: var(--font-weight-medium);
              }
            }
          }
        }
      }
    }
  }
  
  .tip-container {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    text-align: center;
    
    p {
      margin: 0;
      color: #666;
      font-size: 14px;
      
      strong {
        font-weight: var(--font-weight-bold);
      }
    }
  }
  /* Flex-based layout alternative to table */
  .tickets-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    margin: auto;
    justify-content: center;
    margin-top: 20px;
  }
}

/* Responsive layout for tickets - similar to tender-container */
/* @media (min-width:2220px){ */
  #my-tickets-content .tickets-container {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #my-tickets-content .ticket-item {
    flex: 0 0 calc(48% - 10px);
    max-width: calc(48% - 10px);
  }
  
  .ticket-item {
    flex: 0 0 auto;
    border: 1px solid var(--sage);
    padding: 15px;
    border-radius: 5px;
    background-color: var(--light-grey);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .ticket-content-flex {
    display: flex;
    flex-grow: 1;
    min-width: 0;
    align-items: center;
    gap: 2px;
  }

  .ticket-content-flex > div:nth-child(1) { /* Ticket ID */
    width: 60px;
    min-width: 60px;
  }
  
  .ticket-content-flex > div:nth-child(2) { /* Subject */
    width: 100%;
    min-width: 200px;
    max-width: 650px;
    padding-right: 5px;
  }
  
  .ticket-content-flex > div:nth-child(3) { /* Status */
    width: 120px;
    min-width: 100px;
    align-self: flex-start;
  }
  
  .ticket-content-flex > div:nth-child(4) { /* Priority */
    width: 100px;
    min-width: 80px;
    align-self: flex-start;
  }
  
  .ticket-content-flex > div:nth-child(5) { /* Created */
    width: 140px;
    min-width: 120px;
    align-self: flex-start;
  }
  
  .ticket-content-flex > div:nth-child(6) { /* Last Update */
    width: 140px;
    min-width: 120px;
    align-self: flex-start;
  }
  
  .ticket-content-flex > div:nth-child(7) { /* Replies */
    width: 80px;
    min-width: 60px;
    text-align: center;
    align-self: flex-start;
  }
  
  .ticket-header-row {
    display: flex;
    background-color: var(--sage);
    color: var(--teal);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 2px;
    font-weight: var(--font-weight-semibold);
  }
  
  .ticket-header-row > div:nth-child(1) { /* Ticket ID */
    width: 120px;
    min-width: 100px;
  }
  
  .ticket-header-row > div:nth-child(2) { /* Subject */
    width: 100%;
    min-width: 200px;
    max-width: 650px;
    padding-right: 5px;
  }
  
  .ticket-header-row > div:nth-child(3) { /* Status */
    width: 120px;
    min-width: 100px;
  }
  
  .ticket-header-row > div:nth-child(4) { /* Priority */
    width: 100px;
    min-width: 80px;
  }
  
  .ticket-header-row > div:nth-child(5) { /* Created */
    width: 140px;
    min-width: 120px;
  }
  
  .ticket-header-row > div:nth-child(6) { /* Last Update */
    width: 140px;
    min-width: 120px;
  }
  
  .ticket-header-row > div:nth-child(7) { /* Replies */
    width: 80px;
    min-width: 60px;
    text-align: center;
  }
  
  .ticket-id a {
    color: var(--teal);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
  }
  
  .ticket-id a:hover {
    text-decoration: underline;
  }
  
  .subject-title {
    font-weight: var(--font-weight-medium);
    margin-bottom: 5px;
  }
  
  .subject-author {
    font-size: 12px;
    color: #666;
  }
  
  .status-badge,
  .priority-badge {
    color: var(--white);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    display: inline-block;
  }
  
  .status-badge.status-new {
    background-color: var(--lime);
    color: var(--teal);
  }
  
  .status-badge.status-waiting {
    background-color: #ffc107;
  }
  
  .status-badge.status-replied {
    background-color: #17a2b8;
  }
  
  .status-badge.status-resolved {
    background-color: var(--mid-green);
    color: var(--white);
  }
  
  .status-badge.status-progress {
    background-color: #fd7e14;
  }
  
  .status-badge.status-hold {
    background-color: #6c757d;
  }
  
  .priority-badge.priority-critical {
    background-color: #dc3545;
  }
  
  .priority-badge.priority-high {
    background-color: #fd7e14;
  }
  
  .priority-badge.priority-medium {
    background-color: #ffc107;
  }
  
  .priority-badge.priority-low {
    background-color: var(--teal);
    color: var(--white);
  }
  
  .date-cell {
    font-size: 14px;
    color: #666;
  }
  
  .replies-badge {
    background-color: var(--lime);
    color: var(--teal);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    display: inline-block;
  }
/* } */

/* end my-tickets-content */

#loginsubmit:hover, #btnlogout:hover, 
#btnsignup:hover, #uploadsubmit:hover, 
#uploadsubmit2:hover, ::file-selector-button:hover,
#btnusernext:hover, 
.btnstandard:hover, #paysubmit:hover, .btnblue:hover, .btnsage:hover,
#frmcontact input[type=submit]:hover{
  background-color: var(--deep-teal);
  border: 0px solid var(--lime);
  border-radius: 25px;
  color:var(--lime);
  font-weight: var(--font-weight-medium);
  cursor:pointer;
}
.stdbutton{
  padding:2px 10px 2px 10px;
  background-color: var(--sage);
  margin-top:0px;
  color:var(--deep-teal);
  font-weight: var(--font-weight-medium);
  font-size:1.1em;
  border: 0px solid var(--teal);
  border-radius: 25px;
}
.stdbutton:hover, #frmregister input[type=submit]:hover, input[type=button]:hover, input[type=submit]:hover{
  background-color: var(--lime);
  border-radius: 25px;
  color:var(--deep-teal);
  font-weight: var(--font-weight-medium)
}
.custom-file-upload {
  display: inline-block;
  cursor: pointer;
  padding:2px 5px 2px 5px;
  background-color: var(--sage);
  margin-top:0px;
  color:var(--deep-teal);
  font-weight: var(--font-weight-medium);
  font-size:1.1em;
  border: 0px solid var(--teal);
  border-radius: 25px;
  height:40px;
  width:250px;
  padding:10px 0 0 0 !important;
  text-align: center;
}
.custom-file-upload:hover {
  background-color: var(--lime);
  color:var(--deep-teal);
}
input[type="file"] {
  display: none;
}
.stdbuttonrev{
  padding:2px 5px 2px 5px;
  background-color: var(--lime);
  border-radius: 4px;
  margin-top:0px;
  color:#000;
  font-weight: bold;
  border:solid 1px var(--lime);
}
.stdbuttonrev:hover{
  background-color: var(--deep-teal);
  border-radius: 4px;
  color:#fff;
  font-weight: bold;
}
#filterform #closedt{height:23px;margin-right:20px;width:100px}
/* #filterform #state{height:27px;margin-right:20px} */
select{border-radius: 8px;height:30px;}
#demo{
  width: calc(100% - 317px);
  background-color: var(--sage);
  min-height: 200px;
  color:var(--teal);
  padding: 0;
  box-sizing: border-box;
  margin:0 0 20px 317px;
  display: inline-block;
}
#demo #title{
  margin:20px;
  display:inline-block;
}

#atmdata{
  padding:20px;
  background:#fff;
  border-radius: 25px;
  margin: 0;
  justify-content: center;
  align-items: center;
  display:none;
  min-height: 300px;
}
#atmtable {
  /* border-collapse: collapse;  */
  width: 100%;
  border-left:0px solid #ddd;
  border-right:0px solid #ddd;
}
#atmtable thead{    
  background-color: var(--sage);
  color: #fff;
}
#atmtable thead th:first-child {
  border-radius: 8px 0 0 8px;
}

#atmtable thead th:last-child {
  border-radius: 0 8px 8px 0;
}

#atmtable th{
  color:var(--teal);
  font-family: sans-serif;
  font-weight: bold;
  text-align: left;
}
#atmtable tbody{vertical-align: top;}
#atmtable th, #atmtable td {
  border: 0px solid #ddd; /* Add borders to cells */
  padding: 8px; /* Add padding for better readability, adjust as needed */
}

#atmtable td:first-child, #atmtable th:first-child {
  border-left: none; /* Remove left border for the first cell in each row */
}

#atmtable td:last-child, #atmtable th:last-child {
  border-right: none; /* Remove right border for the last cell in each row */
}
/* Add ellipsis to table cell */
.ellipsis-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px; /* Adjust the max-width as needed */
  position:relative;
}
.ellipsis-cell::after {
  content: '\2026'; /* Unicode character for ellipsis */
  color: #ff0000; /* Adjust the color as needed */
  font-size: 1.5em; /* Adjust the font size as needed */
  position:absolute;
  right:0;
  top:0;
}
.pointer{cursor: pointer;}
.ellipsis-cell.short::after {
  content: none;
}

/* Loader */

.loader {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  display: none;
  margin: 10px auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Analytics */
#Categorychart-container, #Statechart-container {
  width: 350px;
  height: auto;
  margin-right:20px;
  }
  #Categorydoughnut-container, #Statedoughnut-container {
  width: 450px;
  height: auto;
  }
  #atmCategorydata, #atmStatedata {
      display:flex;
  }

/* Tender Styles */

.tender-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 100%;
  margin: auto;
}

.tender-item {
  border: 1px solid var(--sage);
  padding: 15px;
  border-radius: 5px;
  background-color: var(--light-grey);
  box-sizing: border-box;
  width: 100%;
}

/* Set number of columns based on screen width */
/* Very wide screens - 4 columns */
@media (min-width: 2300px) {
  .tender-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Wide screens - 3 columns */
@media (max-width: 2299px) and (min-width: 1800px) {
  .tender-container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Medium screens - 2 columns */
@media (max-width: 1799px) and (min-width: 1400px) {
  .tender-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens - 1 column */
@media (max-width: 1399px) {
  .tender-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

.tender-content {
  flex-grow: 1; /* Expands to fill all available space */
  min-width: 0; /* Prevents overflow issues */
  margin-right:20px;
}

.tender-content-flex {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.tender-row {
  width: 100%;
  margin-bottom: 10px;
}

.title-row h3 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  line-height: 1.3;
  color: var(--deep-teal);
  font-weight: var(--font-weight-medium);
}

.tender-id-row,
.agency-row {
  font-size: 0.95em;
  margin-bottom: 8px;
}

.agency-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 5px;
}

.agency-row span:first-child {
  white-space: nowrap;
  flex-shrink: 0;
}

.agency-row span:nth-child(2) {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.details-flex-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  margin: 15px 0;
  flex-wrap: wrap;
}

.detail-item {
  flex: 1;
  min-width: 80px;
  text-align: left;
  font-size: 0.9em;
}

.button-row {
  margin-top: auto;
  padding-top: 15px;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}
/* .tender-content-flex > div:nth-child(1) { width: 45px; }
.tender-content-flex > div:nth-child(2) { width: 100%;min-width:200px;max-width:650px;padding-right:5px; }
.tender-content-flex > div:nth-child(3) { width: 100%;min-width:100px;max-width:200px; }
.tender-content-flex > div:nth-child(4) { width: 100%;min-width:100px;max-width:200px; }
.tender-content-flex > div:nth-child(5) { width: 100%;min-width:120px;max-width:200px; }
.tender-content-flex > div:nth-child(6) { width: 100%;min-width:300px;max-width:350px; } */

/* .tender-content-flex > div:nth-child(3),
.tender-content-flex > div:nth-child(4),
.tender-content-flex > div:nth-child(5) {
  align-self: flex-start;
} */
/* Section 1: Logo area */
.tender-content-flex > div:nth-child(1) {
  width: 45px;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Section 2: Main content area with two rows */
.tender-content-flex > div:nth-child(2) {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

/* Top row: Header container (full width) */
.header-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Bottom row: Score and button containers side by side */
.tender-content-flex .tender-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
}

.score-container {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 30px;
  flex-wrap: wrap;
}

.button-container {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  gap: 10px;
  min-width: 300px;
}

/* Skills container styles similar to tender-container */
    .skills-container {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }

    .skill-item {
        background: var(--grey);
        border: 1px solid var(--sage);
        border-radius: 8px;
        padding: 0;
        /* box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: box-shadow 0.3s ease; */
    }

    .skill-item:hover {
        /* box-shadow: 0 4px 8px rgba(0,0,0,0.15); */
    }

    .skill-content-flex {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        padding: 20px;
        align-items: flex-start;
        position: relative;
    }

    .skill-field {
        display: flex;
        flex-direction: column;
        min-width: 120px;
        flex: 0 0 auto;
    }

    .skill-field-wide {
        display: flex;
        flex-direction: column;
        min-width: 200px;
        flex: 0 0 auto;
    }

    .skill-field label {
        font-weight: var(--font-weight-light);
        color: var(--teal);
        margin-bottom: 5px;
        font-size: 14px;
    }

    .skill-input, .skill-select, .skill-textarea {
        padding: 8px 12px;
        border: 1px solid #c5c5c5;
        border-radius: 4px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .skill-textarea {
        resize: vertical;
        min-height: 60px;
        font-family: inherit;
        color: var(--teal);
        border-radius: 30px;
        overflow: hidden;
    }

    .skill-input:focus, .skill-select:focus, .skill-textarea:focus {
        outline: none;
        border-color: var(--teal);
        box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.1);
    }



    /* Skill content flex width styles similar to tender-content-flex */
    .skill-content-flex > div:nth-child(1) {
        width: 45px;
        align-self: center;
    }
    .skill-content-flex > div:nth-child(2) { width: 100%;min-width:200px;max-width:300px;padding-right:5px; }
    .skill-content-flex > div:nth-child(3) { width: 100%;min-width:150px;max-width:200px; }
    .skill-content-flex > div:nth-child(4) { width: 100%;min-width:200px;max-width:400px; }
    .skill-content-flex > div:nth-child(5) { flex: 1; min-width:200px; }
    .skill-content-flex > div:nth-child(6) { width: 100%;min-width:150px;max-width:200px; }
    .skill-content-flex > div:nth-child(7) { width: 100%;min-width:100px;max-width:120px; }
    .skill-content-flex > div:nth-child(8) { width: 100%;min-width:100px;max-width:120px; }
    .skill-content-flex > div:nth-child(9) { width: 100%;min-width:150px;max-width:200px; }

    .skill-content-flex > div:nth-child(3),
    .skill-content-flex > div:nth-child(6),
    .skill-content-flex > div:nth-child(7),
    .skill-content-flex > div:nth-child(8),
    .skill-content-flex > div:nth-child(9) {
      align-self: flex-start;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .skill-content-flex {
            flex-wrap: wrap;
        }
        
        .skill-field {
            min-width: 100%;
            flex: 1 1 100%;
        }
        
        .skill-field-wide {
            min-width: 100%;
            flex: 1 1 100%;
        }
        
        .skill-content-flex > div:nth-child(1),
        .skill-content-flex > div:nth-child(2),
        .skill-content-flex > div:nth-child(3),
        .skill-content-flex > div:nth-child(4),
        .skill-content-flex > div:nth-child(5),
        .skill-content-flex > div:nth-child(6),
        .skill-content-flex > div:nth-child(7),
        .skill-content-flex > div:nth-child(8),
        .skill-content-flex > div:nth-child(9) {
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
        }
    }
.progress-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.progress-label {
  font-size: 14px;
  color: var(--deep-teal);
  display: block;
}

.progress-bar {
  width: 100px; /* fixed width */
  height: 6px;
  background-color: var(--deep-teal);
  border-radius: 10px;
  /* overflow: hidden; */
  /* display: inline-block; */
  position: relative;
}

.progress-fill {
  height: 14px; /* taller than bar */
  background-color: var(--lime);
  display: block;
  width: 0; /* default, overridden inline */
  border-radius: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Tender details row styling */
.tender-details-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  margin-top: 5px;
  overflow: hidden;
  width: 100%;
}

.tender-detail-item {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}

.tender-detail-item:nth-child(1) {
  max-width: 300px;
}

/* Header container h3 styling */
.header-container h3 {
  margin: 0 0 5px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Button container styling */
.button-container button {
  margin-left: 0 !important;
  margin-bottom: 5px;
}

.tender-item h3 {
  margin-top: 0;
  color: var(--deep-teal);
  font-weight:var(--font-weight-medium);
}
.tender-item p {
  margin: 5px 0;
}

/* Hidden content for popup */
#msg-content, #demologin {
  display: none;
  max-height:50%;
  min-height:300px;
  overflow-y: auto;
}
#msg-content p:focus, #help-content .subtitle:focus {
  outline: none;
}

#popup-content, #popup-content-summary {
  display: none;
  height:calc(100% - 120px)!important;
  min-height:300px;
  overflow-y: auto !important;
}
#pdf-dialog {
  display: none;
  /* width: 100%;
  height: 500px; */
}
#pdf-frame {
  width: 100%;
  height: 500px;
  border: none;
}

/* Loading animation styles */
#loading, #loading2, #loadingconfig{
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20000;
  background-color: rgba(255, 255, 255, 1.0);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  color:#000;
  text-align: center;
}

#loading .spinner, #loading2 .spinner, #loadingconfig .spinner{
  border: 4px solid rgba(0, 0, 0, 0.3);
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin:auto;
}

/* Loading spinner animation keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.leftmiddle{
  float: left;
  vertical-align: middle;
  font-size: 1em;
  margin-right:10px;
}

/* layout styles */
.marginleft20{margin-left:20px;}
.marginleft40{margin-left:40px;}
.marginleft20imp{margin-left:20px !important;}
.marginleft10{margin-left:10px;}
.marginright10{margin-right:10px;}
.marginright10imp{margin-right:10px !important;}
.marginright20imp{margin-right:20px !important;}
.marginbottom20{margin-bottom:20px !important;}
.marginbottom70{margin-bottom:70px !important;}
.marginbottom-30{margin-bottom:-30px !important;}
.margintop0{margin-top:0 !important;}
.margintop20{margin-top:20px !important;}
.margintop100{margin-top:100px !important;}
.margin-copyright{margin:30px 0 30px 0;}
.displayinlineblock{display:inline-block !important;}
.displayinline{display:inline;}
.displayblock{display:block !important;}
.displaynone{display:none;}
.width100percent{width:100%;}
.width200{width:200px !important;}
.width98{width:98%;max-width: 98%;}
.width30percent{width:30%;min-width:400px;}
.profilediv{max-width:600px;min-width:400px;width:100%;}
.categorydiv{max-width:300px;min-width:200px;width:100%;}
.categorydiv label{
  display: block;
  color: var(--deep-teal);
  margin: 0 0 10px 0 !important;
  font-size: 18px !important;
  width:100%;
}
.category-checkbox {
  margin-right: 8px;
  max-width: 20px !important;
}
.txtbold{
  font-weight:bold;
  display:inline;
  padding:0 !important;
  margin:0 !important;
  white-space: nowrap;
}
.textarea{
  resize:vertical;
  border: 1px solid var(--sage);
  border-radius: 8px;
}
.inputwidth{box-sizing: content-box;width:100%;}
.underline{border-bottom:2px solid #000;}
.disabled, .disabled:hover{color:#c0c0c0;background-color:#999}
#atmdata input:disabled{background-color: var(--grey);}
.txtgreen{color:green}
.txtcenter{text-align: center !important;}
.pagination {
  display: inline-block;
  margin:0 0 40px 10px;
  /* float:left; */
}

.pagination a {
  color: var(--deep-teal);
  /* float: left; */
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid var(--teal);
  margin-right:2px;
}
.pagination a.active {
  background-color: var(--lime);
  color: var(--deep-teal);
  border-radius: 4px;
}

.pagination a:hover:not(.active, .disabled) {background-color: var(--teal);color:var(--light-grey);cursor: pointer;}
.pagination .disabled, .pagination .disabled:hover{color:var(--deep-teal);background-color:var(--sage);cursor: not-allowed;}
.pagination .disabled, .disabled { 
  pointer-events: none; 
}

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: 0;
}
/* Custom Tooltips */
.ui-tooltip, .arrow:after {
  background: #fff;
  border: 2px solid #fff;
}
.ui-tooltip {
  padding: 5px 10px;
  color: #000;
  border-radius: 5px;
  /* font: bold 14px "Helvetica Neue", Sans-Serif; */
  text-transform: capitalize;
  box-shadow: 0 0 7px black;
}
.arrow {
  width: 60px;
  height: 17px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 20%;
}
.arrow:after {
  content: "";
  position: absolute;
  left: 25px;
  top: -20px;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 7px  black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}

/* Customize the label (the container) */
.rbcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin: 0 12px 12px 0;
  color:#00385C;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#regtypediv .rbcontainerG1940{display:inline !important}
/* Hide the browser's default checkbox */
.rbcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border:1px solid var(--teal);
  border-radius: 8px;
}

/* On mouse-over, add a grey background color */
.rbcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.rbcontainer input:checked ~ .checkmark {
  background-color: var(--teal);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.rbcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.rbcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 30px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
#billmonthly{margin-right:10px;font-weight: bold;}
#billannually{margin-left:10px;font-weight: bold;}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #00385C;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 4px;
  bottom: 4px;
  background-color: #f09719;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider.checked:before {
  background-color: #00385C; 
}

input:checked + .slider {
  background-color: #f09719;
}

input:focus + .slider {
  box-shadow: 0 0 1px #00385C;
}

input:checked + .slider:before {
  -webkit-transform: translateX(38px);
  -ms-transform: translateX(38px);
  transform: translateX(38px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Hamburger Menu */
#menuToggle
{
  display: none;
  position: fixed;
  top: 22px;
  left: 15px;
  width:300px;
  z-index: 2000;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: var(--teal);
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#menu span{background: none !important;margin:20px 0 0 0;display:inline;}
#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: var(--white);
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -15px;
  padding: 125px 20px 10px 50px;
  padding-top: 125px;
  
  background: var(--teal);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 5px 0;
  font-size: 22px;
}
#menu li:hover{
  background: rgb(199, 220, 205, 0.1);
  cursor: pointer;
}

/* pseudo styles */
.reddot {
  position: relative;
  display: inline-block;
}

.reddot::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -20px; /* Adjust this value to change the distance between the dot and the text */
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}
.limedot {
  position: relative;
  display: inline-block;
}

.limedot::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -20px; /* Adjust this value to change the distance between the dot and the text */
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--lime);
  border-radius: 50%;
}
.ticketlimedot {
  position: relative;
  display: inline-block;
  top: 8px;
  right: -10px; 
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--lime);
  border-radius: 50%;
}
.ticketdot {
  content: "";
  position: absolute;
  top: 20px;
  right: -80px; /* Adjust this value to change the distance between the dot and the text */
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: var(--lime);
  border-radius: 50%;
}
/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}


/* Hamburger menu RIGHT */

#menuToggleR
{
  display: none;
  position: fixed;
  top: 15px;
  right: 0px; /* Change left to right */
  width: 200px;
  z-index: 2000;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggleR a
{
  text-decoration: none;
  color: #00385C;
  
  transition: color 0.3s ease;
}

#menuToggleR a:hover
{
  color: tomato;
}


#menuToggleR input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  right: 20px; /* Change left to right */
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger RIGHT
 */
#menuToggleR span
{
  display: block;
  width: 33px;
  height: 4px;
  margin: 0 0 5px 140px;
  position: relative;
  
  background: var(--lime);
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 100% 0%; /* Align the bars from the right */
  text-align: right; /* Ensure the bars are right-aligned */
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuR span{background: none !important;margin:20px 0 0 0;}
#menuToggleR span:first-child
{
  transform-origin: 100% 0%; /* Adjust for right alignment */
}

#menuToggleR span:nth-last-child(2)
{
  transform-origin: 100% 100%; /* Adjust for right alignment */
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggleR input:checked ~ span
{
  opacity: 1;
  transform: rotate(-45deg) translate(3px, 0px); /* Adjust translation for right alignment */
  background: var(--lime);
}

/*
 * But let's hide the middle one.
 */
#menuToggleR input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Oh yeah and the last one should go the other direction
 */
#menuToggleR input:checked ~ span:nth-last-child(2)
{
  transform: rotate(45deg) translate(3px, 0px);
}

/* Make this absolute positioned
 * at the top right of the screen
 */
#menuR
 {
   position: absolute;
   width: 200px;
   margin: -100px -50px 0 0; /* Adjust margin for right alignment */
   padding: 125px 50px 10px 20px; /* Adjust padding for right alignment */
   background: var(--deep-teal);
   border:1px solid var(--lime);
   list-style-type: none;
   -webkit-font-smoothing: antialiased;
   /* to stop flickering of text in safari */
   
   transform-origin: 100% 0%; /* Adjust transform origin for right alignment */
   transform: translate(100%, 0); /* Slide in from the right */
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 
 #menuR li
 {
   padding: 5px;
   font-size: 22px;
 }
 #menuR a{
  color: var(--white);
  border:0;
 }
  #menuR a:hover{
  color: var(--lime);
  border:0;
 }
 /*
  * And let's slide it in from the right
  */
 #menuToggleR input:checked ~ ul
 {
   transform: none;
 }
 

/* END */

/* Billing and payment styles */
.billpay{
  display:block;
  max-width:500px;
  /* G426width:100%; */
  margin:auto;
  padding:10px;
  /* border:1px solid #000;
  border-radius: 5px; */
}
.bpleftside, .bprightside{
  display:inline-block;
  width:48%;
}
.billpay .select{
  width: 96%;
  height: 42px;
  padding: 5px;
  margin: 5px 0;
}
.billpay .subtitle{font-size:2em;display:block;width:100%;float: left;color:#00385C;margin:0px 0 20px 0;}
/* end */



/* Accordion */

ul.accordion-list {
  position: relative;
  display: block;
  max-width:50VW;
  width: 100%;
  min-width:300px;
  height: auto;
  padding: 20px;
  margin: auto;
  list-style: none;
  background-color: var(--teal);
  border:0px solid var(--lime);
  border-radius: 0px;
  
  li {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    /* background-color: #FFF; */
    padding: 20px;
    margin: 0 auto 15px auto;
    border-bottom: 1px solid var(--white);
    border-radius: 0px;
    cursor: pointer;
    
    &.active {
      h3 {
        &:after {
          transform: rotate(45deg);
        }
      }
    }
    
    h3 {
      font-weight: var(--font-weight-medium);
      font-size:20px;
      position: relative;
      display: block;
      width: 100%;
      height: auto;
      padding: 0 0 0 0;
      margin: 0;
      /* font-size: 15px; */
      letter-spacing: 0.01em;
      cursor: pointer;
      
      &:after {
        content: "\f278";
        font-family: "material-design-iconic-font";
        position: absolute;
        right: 0;
        top: 0;
        color: var(--lime);
        transition: all 0.3s ease-in-out;
        font-size: 32px;
      }
    }
    
    div.answer {
      position: relative;
      display: block;
      /* width: 100%; */
      height: auto;
      margin: 10px 0 0 0;
      padding: 10px 20px;
      cursor: pointer;
      background-color: var(--mid-green);
      color: var(--white);
      font-weight: var(--font-weight-light);
      border-radius: 30px;
      font-size:20px;
      p {
        position: relative;
        display: block;
        font-weight: var(--font-weight-light);
        padding: 10px 0 0 0;
        cursor: pointer;
        line-height: 150%;
        margin: 0 0 15px 0;
        font-size: 18px;
      }
    }
  }
}

/* End Accordion */

/* jquery-ui replacement */
.ui-widget {
	font-family: var(--font-family);
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: var(--font-family);
	font-size: 1em;
}
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 25px !important;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 25px !important;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 25px !important;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 25px !important;
}

.ui-dialog{
  max-height:80% !important;
  border: 1px solid var(--teal) !important;
  z-index: 10002 !important;
  height:auto;
  overflow-y: auto;
}

#pdf-dialog .ui-dialog{
  overflow-y: hidden !important;
}


.ui-dialog .ui-dialog-content{
  padding:.5em !important;
  overflow: auto ; 
}
.ui-widget-overlay{
  z-index: 10001 !important;
}

/* Component containers
----------------------------------*/
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: var(--font-family);
	font-size: 20px;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: var(--light-grey);
	color: var(--deep-teal);
  padding:10px;
}
#tabs .ui-widget-content{
  color:var(--teal);
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: var(--teal);
	font-weight: var(--font-weight-bold);
  font-size:200%;
}
.ui-widget-header a {
	color: #333333;
}

/* Tabs styles */
.ui-state-active, .ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, 
.ui-button.ui-state-active:hover {
  border: 1px solid var(--lime) !important;
  background: var(--teal) !important;
  font-weight: normal;
  color: var(--teal);
}
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: .5;
  filter: Alpha(Opacity = 50);

}

.ui-widget-header{
  border:none;
  /* border-bottom:1px solid #c5c5c5; */
  background:none;
}
.ui-widget.ui-widget-content {
  border:1px solid var(--sage);
}

.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 30px;
	margin: -15px 0 0 0;
	padding: 1px;
	height: 30px;
  background-color: var(--lime);
}

/* .ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default, */
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid var(--lime);
	background: var(--lime);
	font-weight: var(--font-weight-medium);
	color: var(--teal);
}

.ui-button .ui-icon {
	/* background-image: url("images/ui-icons_777777_256x240.png"); */
  width: 16px; /* Adjust as needed */
  height: 16px; /* Adjust as needed */
  background: linear-gradient(45deg, transparent 40%, var(--teal) 40%, var(--teal) 60%, transparent 60%),
              linear-gradient(-45deg, transparent 40%, var(--teal) 40%, var(--teal) 60%, transparent 60%);
  display: inline-block;

}
/* .ui-state-hover .ui-icon, */
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	width: 16px; /* Adjust as needed */
  height: 16px; /* Adjust as needed */
  background: linear-gradient(45deg, transparent 40%, var(--lime) 40%, var(--lime) 60%, transparent 60%),
              linear-gradient(-45deg, transparent 40%, var(--lime) 40%, var(--lime) 60%, transparent 60%);
  display: inline-block;
}
/* .ui-state-hover, */
/* .ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover, */
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover{
	border: 1px solid var(--lime);
	background: var(--teal);
	font-weight: normal;
	color: var(--limel);
  outline:none;
}
.ui-dialog .ui-dialog-buttonpane {
  display:none;
}
button:focus-visible {
  outline: none;
}
.ui-dialog .ui-dialog-titlebar {
  padding: .4em;
  position: relative;
}
.ui-dialog-title:focus {
  outline: none;
}
#popup-detail a {
	color: var(--dark-teal) !important;
}
#popup-detail a:hover {
	color: var(--teal) !important;
}
.alertResultsActionBtnContainer {display:none;}
/* end */
/* Datepicker */
#datepicker{width:110px;padding:5px 10px;border: 1px solid var(--sage);}
#datepicker:hover{cursor:pointer;}
.ui-datepicker{
  background:var(--light-grey) !important;
}
.ui-datepicker-header{
  color:var(--teal) !important;
  font-size:1.2em !important;
}
#ui-datepicker-div .ui-state-active, #ui-datepicker-div .ui-state-active:hover,
#ui-datepicker-div .ui-state-hover {
  border: 1px solid var(--lime) !important;
  background: var(--teal) !important;
  font-weight: normal;
  color: var(--light-grey);
}
#ui-datepicker-div .ui-datepicker-prev:hover, #ui-datepicker-div .ui-datepicker-next:hover{
  background:var(--lime) !important;
  color:var(--teal) !important;
}
/* Responsive tender styles */
@media (max-width: 1200px) {
  .tender-item {
    flex: 1 1 calc(50% - 10px);
  }
}

@media (max-width: 800px) {
  .tender-item {
    flex: 1 1 100%;
    max-width: none;
  }
  
  .details-flex-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .detail-item {
    text-align: left;
    margin-bottom: 8px;
  }
  
  .button-container {
    flex-direction: column;
  }
  
  .button-container button {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
  }
}

@media (max-width: 600px) {
  .tender-container {
    gap: 15px;
  }
  
  .details-flex-row {
    gap: 8px;
  }
}

/* @media */
@media (min-width:2220px){
   /*.tender-container {
   flex-direction: row;  Switch to row layout 
    flex-wrap: wrap; Allows two items per row
  }*/
  .graphic-1-img{max-height:850px;}
  /* .tender-item {
    flex: 0 0 calc(49% - 10px); 
    max-width: 800px;
  } */
  .waitlist-left-section, .waitlist-right-section{
    width:50%;
  }
  
}
@media (max-width:2130px){
 #my-tickets-content .ticket-item {
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}
@media only screen and (max-width:2020px){
  .stats-item{width:400px;}
}
@media (min-width: 1921px) {
  .graphic-content{font-size:0.7vw;}
  #featurepanel{font-size:150%}
  /* #container-works::before {
    background-size: 80%;
    background-position: 200% 95%;
  } */
}

@media only screen and (max-width:1920px){
  .grid-container{grid-template-columns: repeat(auto-fit, minmax(300px, 350px));  }
  #featurepanel{width:80%}
  /* .feature{font-size: 500%;}
  .heading{font-size: 290%;}
  .sub-heading{font-size: 165%;}
  .title{font-size: 180%;}
  .highlight{font-size: 100%;}
  .subtitle{font-size: 115%;} */
  .container-4box {
    gap: 150px 50px;
    margin: auto;
    padding: 10px;
    max-width: 100%;
  }
  .left-block{margin-left:0;}
  /* .container-item4 {
    width:365px;
    max-width: 100%;
    min-height: 225px;
    padding: 10px;
    border-radius: 30px;
    align-items: center;
  }
  .container-item4 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border-radius: 30px;
  box-sizing: border-box;
  background-color: white;
  max-width:400px;
  width:340px;
} */



  /* .container-2box{max-width:85vw;} */
  #container-works::before {
    background-size: 118%;
    background-position: -240% 95%;
  }
  #container-support::before{
    background-size: 150%;
    background-position: 70% 40%
  }
  
  .stats-container{grid-template-columns: repeat(auto-fit, minmax(400px, 300px));}
}

@media only screen and (max-width:1885px){
  #container2{min-height:800px;}
  
}

@media only screen and (max-width:1750px){
  .container-owl {max-width:1120px;}
  #container-article .article-item{
    height:500px;
  }
  #container-article .article-2box{margin-top:180px;}
}



@media only screen and (max-width:1695px){
  .grid-container-2 {
    gap: 20px;
    padding: 10px;
  }
  .grid-item-2{
    padding:10px;
  }
}
@media only screen and (max-width:1425px){

  #container-article .article-item{
    height:400px;
  }
  #container-article .article-2box{margin-top:180px;}
  .benefits-media{
    width:500px;
    right:-350px;
  }
  .benefits-box{
    width:70%;
    gap:20px 30px;
  }
  .benefits-heading {
    max-width: 450px;
  }
  .benefits-section{
    max-width:800px;
    padding:20px;
  }
  .benefits-layout{max-width:650px;}
  
  /* Ticket responsive wrapping */
  #my-tickets-content .ticket-content-flex {
    flex-wrap: wrap;
  }
  
  #my-tickets-content .ticket-content-flex > div:nth-child(1),
  #my-tickets-content .ticket-content-flex > div:nth-child(2) {
    flex: 0 0 auto;
  }
  
  #my-tickets-content .ticket-content-flex > div:nth-child(2) {
    width: 100%;
    min-width: 100%;
    flex-basis: 100%;
  }
  
  #my-tickets-content .ticket-content-flex > div:nth-child(3),
  #my-tickets-content .ticket-content-flex > div:nth-child(4),
  #my-tickets-content .ticket-content-flex > div:nth-child(5),
  #my-tickets-content .ticket-content-flex > div:nth-child(6),
  #my-tickets-content .ticket-content-flex > div:nth-child(7) {
    flex: 0 0 auto;
    margin-top: 5px;
  }
  
  /* Tender item responsive layout */
  .tender-content-flex {
    flex-direction: column;
    gap: 15px;
  }
  
  .tender-content-flex > div:nth-child(1) {
    align-self: center;
  }
  
  .tender-bottom-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .score-container {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .button-container {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 100%;
  }
  
  .button-container button {
    margin-right: 10px;
  }
}

@media only screen and (max-width:1360px){
  /* #featurepanel{transform: translate(0, 10%);width:80%} */
  #container2{min-height:700px;}
  #containermain{background:none;
    background: url(/images/green-circles.png) no-repeat; 
    background-position: right top;
  }
  .right-block{margin:auto;}
  .container-owl {max-width:740px;}
}
@media only screen and (max-width:1325px){
  #topmenudiv{display:none;}
  #menuToggleR{display:block;}
  #headermenudiv {right:100px;}
  .container-box{max-width:90%}
  #biddalogosml{
    height: 60px;
    width: 300px;
    top: 60px;
    left: 50%;
  }
  .container-2box{grid-template-columns: repeat(1, 1fr);}
}

@media only screen and (max-width:1320px){
  .footer-left{display:none;}
  .isaacs-head-fixed{
    width:400px;
    height:400px;
  }
}
@media only screen and (max-width:1275px){
  #biddalogo{display:none;}
  #biddalogosml{display:block;}
  .benefits-section{
    max-width:80%;
  }
}
@media screen and (max-width: 1245px) {
  .grid-container-articles {
    grid-template-columns: repeat(2, 1fr);
  }

}
@media only screen and (max-width:1150px){
  #container-article .article-item{
    height:350px;
  }
  #container-article .article-2box {
    max-width:80vw;
  }
  .feature{font-size:300%}
  .sub-heading{font-size: 30px;}
  #containercontent{max-width:80VW;}
  .footer-flex{padding:0 50px;}
  .grid-container-footer {gap:40px;}
  #headermenudiv {left:0; right:0;}
  #header1.scrolled {
    background: transparent;
  }
  #container-works::before {
    background-size: 150%;
    background-position: -45% 95%;
  }
   #container-support::before{
    background-size: 170%;
    background-position: 60% 40%
  }
    #menuToggle{display:block;}
    #sidebar{display:none;}
    #main-content{margin-left:0;}
    #headerportal{margin:40px 0 0 0;}
}

/* When screen height <= 910px, allow sidebar scroll */
@media (max-height: 964px) {
  #portallogo{margin: 40px auto 40px auto;}
  .footer-feature-heading {
    font-size: 20px;
  }
  #footerp {
    margin: 50px 0 0 0;
  }
   .arrow-lime-full::before{
    width: 30px;
    height: 30px;
  }  
}
@media (max-height: 910px) {
  /* #sidebar {
    position: relative;
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  } */

}

@media screen and (max-width: 1030px){
    #articlecats{
    margin-left:0;
  }
}
@media only screen and (max-width:1000px){
  #containermain{background-position: 120% top;}
}
@media (max-width: 1240px) {
  .image-grid {
    flex-direction: column;
  }

  .image-column {
    width: 100%;
  }

  .image-item.large {
    height: auto; /* or set a smaller height like 400px if needed */
    max-height:429px;
    aspect-ratio: 16 / 9; /* optional for consistent scaling */
  }

  .image-item.top,
  .image-item.bottom {
    height: auto;
    aspect-ratio: 16 / 9; /* helps preserve layout balance */
  }

  .image-column {
    flex-direction: column;
  }
}
   
@media only screen and (max-width: 860px) {
  #featurepanel{padding:20px;}

}
@media only screen and (max-width: 910px) {
  .grid-container-footer {justify-content: center;}
  #footer1{height:500px;}
  #container-works::before {
    background-size: 250%;
    background-position: 50% 40%;
  }
    #container-support::before{
    background-size: 190%;
    background-position: 60% 60%
  }
  .container-owl {max-width:375px;}
    .guideviewdiv {
    margin-top:150px;
  }
  #container-article .article-2box {
  grid-template-columns: 1fr;
  }
  .container-2box-lr {
    grid-template-columns: 1fr;
  }
} 
@media (max-width: 875px) {
  .container-box-autowidth {
    flex-direction: column;
    align-items: center;
    gap: 40px; /* smaller gap for mobile */
  }

  .container-item-autowidth {
    text-align: center;
    max-width: 90vw;
  }
  .steps-container {
    flex-direction: column;
    align-items: center;
  }

  .step-item {
    width: 100%;
    margin-bottom: 40px;
  }

  .steps-container::before {
    display: none;
  }
}

@media only screen and (max-width: 775px) {
  .headermenu{margin: 14px 0 -10px -50px;}
  .headermenu li{margin:0 10px 0 20px;}
  #poweredbytop{display:none;}
  #biddalogohome{width:300px;height:60px;}
}

@media only screen and (max-width: 735px) {
  .leftmiddle{width:100%;margin-bottom:10px;}
  #menuToggleR{display:block;}
  .help-box{right:10px;}

  #container2::before {background-size: 300%;}
  #containermain{background-position: 220px top;}
  #containercontent{max-width:90VW;}
  #featurepanel{font-size: max(1.5vw, 16px);}
  /* #sidebar{
    height:10px;
    overflow: hidden;
    border-bottom: solid 1px #00385C;
    border-right:none;
    z-index: 1000;
    position: fixed;
  } */
  #mainmenu, #lowmenu{display:none;}
  #demo{margin:60px 0 20px 10px;}
  #tgusernamediv{display:block;}
  #menu{margin:-100px 0 0 -15px !important;}
  #menuR{margin:-100px -50px 0 0 !important;}
  #headnav .subtitle {font-size: 1em;margin: 15px 0 0 120px;}
  /* #container2{display:none;} */
  #containerright{width:100%;}
  #headtitle{display:block;}
  .container-4box{grid-template-columns: 1fr;}
  .container-item4{font-size: 130%;}
  .graphic-2-img::after, .graphic-6-img::after{
    width:150px;
    height:150px;
  }
}
@media screen and (max-width: 864px) {
  .grid-container-articles {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 625px) {
  .graphic-2-img::after, .graphic-6-img::after{
    width:100px;
    height:100px;
  }

}
@media only screen and (max-width: 570px) {
  #footer1{height:700px;}
  .width-graphic-content {
    min-width: 300px;
    margin: 0;
  }
  .isaacs-head-fixed.ai-1{
    width:300px;
    height:300px;
  }
  .isaacs-head-fixed.edit3 {
    width: 300px;
    height: 385px;
  }
  
  .grid-container-footer{
    gap: 10px;
  }

}

/* Benefits styles */
@media (max-width: 1070px) {
  .benefits-layout {
    max-width: 100%;
     background: linear-gradient(to bottom, var(--sage) 60%, transparent 40%);
  }

  .benefits-box {
    width: 80%;
    /* grid-template-columns: 1fr; */
  }

  .benefits-media {
    position: static;
    width: 100%;
    margin-top: 40px;
  }

  .benefit-badge {
    position: relative;
    bottom: 80px;
    right: -150px;
    margin: 20px auto 0;
  }
  .video-thumbnail-wrapper {
    max-width:900px;
  }

  .waitlist-left-section, .waitlist-right-section {
    width: 100%;
  }

}
@media only screen and (max-width: 430px) {
  #demologin, #login, #portallogin, #signup{max-width:320px;}
  #frmregister input, #regtypediv input, #frmcontact input, #accountdiv input{max-width:320px;}
  /* #featurepanel{display:none} */
  #billplanmonthly, #billplanannually{max-width:250px;}
  #subscribeheader{max-width:380px;}
  .footer-flex {padding: 0;}
  .sub-heading{font-size: 24px;}
  .feature {font-size: 40px;}
  .heading {font-size: 30px;}
   .benefits-layout {
     background: linear-gradient(to bottom, var(--sage) 80%, transparent 20%);
  }
    .benefits-box {
    grid-template-columns: 1fr;
  }
  .benefit-badge {
    right: -100px;
  }
}