.pc-box
{
  background-color: var(--bs-card-bg);
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--lte-sidebar-color);
  margin-top:2px;
  margin-bottom:4px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--lte-sidebar-color);
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
  cursor: pointer;
}

.pc-box-header
{
  border-bottom: 1px solid var(--lte-sidebar-color);
  color: black;
}

.icon-size
{
  height:30px;
  width: auto;
}

.t20-text
{
  margin-top:1.35px;
}

.button-size-l
{
  min-width:85%;
}

.no-line-break
{
  display: inline-block;      /* Keeps the div inline with others if needed */
  white-space: nowrap;        /* Prevents line breaks inside */
}

.login-button
{
  min-width:84px;
  padding-top:3px;
  padding-bottom:3px;
  margin-top: 3px;
}

.op-0
{
  opacity: 0;
}

.box-filter
{
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
  border: 1px solid black;
  padding-top: 10px;
  padding-bottom: 5px;
}

.email-box
{
  background-color: rgba(255, 255, 255, 0.87);
  border-radius: var(--bs-border-radius);
  border: 1px solid black;
  padding : 25px;
}

.va-m
{
  vertical-align: middle !important;
}

.badge {
  display: inline-block;
  background-image: url('../images/badge.svg');
  background-size: cover;
  background-position: center;
  padding: 10px;
  color: black;
  font-size: inherit;
  min-height: 40px;
  min-width: 40px;          /* ? Prevents collapse for 1-char text */
  text-align: center;       /* ? Keeps text centered inside */
  line-height: 1;           /* Optional: Tighter vertical spacing */
  white-space: nowrap;      /* Prevents wrapping */
  margin-right: 5px;
}

.c-modal-footer
{
  text-align:center !important;
  padding : 15px;
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
}

.c-border
{
  border: 1px solid black;
}

.c-t-border
{
  border-top: 1px solid black;
}

.c-b-border
{
  border-bottom: 1px solid black;
}

.flag
{
  height:20px;
  width: auto;
  margin-right: 5px;
  border:1px solid black;
  border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.r-pad
{
  margin-right: 5px;
}

.b-pad
{
  margin-bottom: 10px !important;
}

.shad-g1 {
    background: linear-gradient(
        to bottom,        
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.5),
        rgba(0, 0, 0, 0.025),
        rgba(0, 0, 0, 0.025),
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1)
    );
}

.box-logo
{
  height:18px;
  opacity: 0.67;
  pointer-events: none;
}

.e-box
{
  background-color: var(--bs-body-bg);
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
}

.p-10
{
  padding: 10px;
}

.w-100p
{
  width: 100%;
}

.w-60p
{
  width: 60%;
}

.w-50p
{
  width: 50%;
}

.fl-r
{
  float: right;
}

.cp
{
  cursor: pointer;
}

.pl-0
{
  padding-left: 0px !important;
}

.mb-0
{
  margin-bottom: 0px !important;
}

.ta-c
{
  text-align: center;
}

.ta-l
{
  text-align: left;
}

.ta-r
{
  text-align: right;
}

.rmp-photo
{
  width: 100%;
  height: auto;
  border-radius: var(--bs-border-radius);
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  pointer-events: none;
}

.div-auto
{
  display: inline-block;
}

.div-auto-c
{
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  display: table;
}

.div-small-c
{
  min-width: 300px;
  max-width: 500px;  
  width:15%;
  margin: 0 auto;
}

.w-photo-c
{
  width:50%;
  margin: 0 auto;
}

.w-photo-th
{
  width: 75%;
  max-width: 350px;
  margin: 0 auto;
}

.card
{
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

.card-header
{
  padding-top: 10px;
  padding-bottom: 10px;
}

.vote-card
{
  color: black;
  background-color: white;
}

.tcb
{
  color: black;
}

.tcw
{
  color: white;
}

.vote-buttons
{
  width:100%;
  padding-top:14px;
  padding-left:20px;
  padding-right:20px;
}

.vote-buttons-mobile-top-row
{
  width:100%;
  padding-top:14px;
  padding-left:6px;
  padding-right:6px;
  padding-bottom:0px;
}

.vote-buttons-mobile-bottom-row
{
  width:100%;
  padding-top:0px;
  padding-left:8px;
  padding-right:8px;
}

.width-20p
{
  width:20%;
}

.width-10p
{
  width:10%;
}

.ca-d
{
  margin: 0 auto;
}

.p-im
{
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: var(--bs-border-radius);
  width: 100%; height: 100%;
  background: transparent;
}

/* desktop specific css */
@media (min-width: 1024px)
{
  .w-photo-c
  {
    width:50%;
    min-width: 620px;
    max-width: 1024px;    
  }
  
  .card-body
  {
    padding: 12px;
  }
  
  .box-filter
  {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
  
  .mb-4a /* margin bottom tweak for google ads */
  {
    margin-bottom: 1.05rem !important;
  }
}

/* mobile specific css */
@media (max-width: 768px)
{
  .w-photo-c
  {
    width:100%;
  }

  .card-body
  {
    padding: 4px;
  }
  
  .box-filter
  {
    width: 100%;
  }
  
  .app-content
  {
    padding-left: 2px;
    padding-right: 2px;
  }
  
  .container-fluid
  {
    padding-left: 6px;
    padding-right: 6px;  
  }
  
  .mb-4 /* shorten vertical spacing on mobile */
  {
    margin-bottom: 1.0rem !important;
  }
  
  .mb-4a /* margin bottom tweak for google ads */
  {
    margin-bottom: 0.5rem !important;
  }
}