/* the container must be positioned relative: */
.autocomplete {position: relative;display: inline-block;}
input {border: 1px solid transparent;background-color: #f1f1f1;padding: 10px;font-size: 16px;}
input[type=text] {background-color: #f1f1f1;width: 100%;}
.autocomplete-items {position: absolute;border: 1px solid #d4d4d4;border-bottom: none;border-top: none;z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;left: 0;right: 0;}
.autocomplete-items div {padding: 10px;cursor: pointer;background-color: #fff;border-bottom: 1px solid #d4d4d4;}
/*when hovering an item:*/
.autocomplete-items div:hover {background-color: #e9e9e9;}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {background-color: DodgerBlue !important;color: #ffffff;}
.container_bla {display: grid;grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));font-family: Helvetica;font-size: 1.4em;color: black;text-align: center;display: grid;}
/*
.container_bla div:nth-child(n) {
  background-color: #B8336A;
}
*/

img.imgcandidate {
  width: 200px;
  height: 300px;
  object-fit: cover;
  flex-shrink: 0;
}

img.imgothercandidate {
	width: 100px;
  height: 150px;
  object-fit: cover;
  flex-shrink: 0;
}


.container_picture {position: relative;text-align: center;color: white;}
/* Bottom left text */
.bottom-left {position: absolute;bottom: 8px;left: 16px;}
img.imglogo {height: 50px;max-width: 100%;}
img.nonselected {opacity: 0.65;filter: alpha(opacity=65); /* msie */
  -webkit-filter: grayscale(1); /* Webkit */
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* W3C */
}

img.flagnonselected {
  opacity: 0.25;
  filter: alpha(opacity=25); /* msie */
  /* -webkit-filter: grayscale(1); /* Webkit */
  /* filter: gray; /* IE6-9 */
  /* filter: grayscale(1); /* W3C */
}




.flag {
  height: 24px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.flag-link:hover .flag {
  transform: scale(1.15);
}




.election-batch {
  margin-bottom: 40px;
}

/* Frame */
.candidate-card.frame {
  position: relative;
  display: inline-block;

  padding: 6px;
  background: #fff;
  border-radius: 6px;

  overflow: hidden; /* 🔑 THIS CLIPS THE RIBBON */

  box-shadow:
    0 4px 10px rgba(0,0,0,.18),
    0 1px 3px rgba(0,0,0,.12);
}

/* Image */
.imgcandidate {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Ribbon */
.ribbon {
  position: absolute;
  top: 5px;
 	left: -80px;    /* mostly inside */
   width: 200px;
  padding: 6px 0;

  font-size: 11px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  color: #fff;

  transform: rotate(-45deg);
  z-index: 2;
}

/* Party color */
.ribbon.dem {background: linear-gradient(135deg, #f7a8b8, #e35d6a);}
.ribbon.rep {background: linear-gradient(135deg, #00AEEF, #6fd3ff);}
.ribbon.gre {background: linear-gradient(135deg, #6fdc9c, #00A651);}
.ribbon.con {background: linear-gradient(135deg, #3a2416, #1f120a);}
.ribbon.lib {background: linear-gradient(135deg, #f9a03f, #d97706);}
.ribbon.wfp {background: linear-gradient(135deg, #6b2f85, #3f1a52);}
.ribbon.com {background: linear-gradient(135deg, #a32020, #5a0f0f);}
.ribbon small {
  display: block;
  font-size: 9px;
}

.candidate-card.frame {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;

  padding: 6px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;

  box-shadow:
    0 4px 10px rgba(0,0,0,.18),
    0 1px 3px rgba(0,0,0,.12);
}

/* 🔒 Image is sacred: never resize */
.imgcandidate {
  display: block;
  width: 200 !important;
  height: 300 !important;
  max-width: none !important;   /* ⬅ critical */
  flex-shrink: 0;               /* ⬅ critical */
}

.imgothercandidate {
  display: block;
  width: 83px !important;
  height: 125px !important;
  max-width: none !important;   /* ⬅ critical */
  flex-shrink: 0;               /* ⬅ critical */
}

/* 🔒 Name is constrained to image width */
.candidate-name {
  max-width: 100%;              /* relative to image */
  margin-top: 6px;
  padding: 2px 4px;

  text-align: center;
  font-size: 14px;
  font-weight: 600;

  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.candidate-card.frame {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.candidate-card.frame:hover {
  transform: translateY(-3px);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.25),
    0 3px 6px rgba(0,0,0,0.15);
}

.state-flag-bar {
  position: sticky;
  top: 0;
  z-index: 300;
}

.election-header {
  position: sticky;
  top: var(--flags-h);
  z-index: 200;
}

.district-header {
  position: sticky;
  top: calc(var(--flags-h) + var(--date-h));
  z-index: 100;
}

.state-flag-bar,
.election-header,
.district-header {
  background-color: #ffffff !important;
  background-clip: padding-box;
}

.flag-link {
  position: relative;
  display: inline-block;
}

.flag-link::after {
  content: attr(data-state);
  position: absolute;

  bottom: 100%;          /* appear above flag */
  left: 50%;
  transform: translateX(-50%) translateY(-6px);

  background: #000;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;

  padding: 4px 8px;
  border-radius: 4px;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 9999;
}

.flag-link:hover::after {
  opacity: 1;
}