:root {
  --caixa-blue: rgb(0, 92, 169);
  /*--page-background: linear-gradient(to right, var(--caixa-blue), rgb(76,178,171));*/
  --page-background: rgb(0,92,169);
  --banner-background: rgba(244,247,248); 
  --textbox-background: rgb(244,247,248);

  --progress-outer-fade-color: rgba(0,92,169, 0.8);
  --progress-border-color: rgb(243,146,0);
  --progress-inner-color1: var(--caixa-blue);
  --progress-inner-color2: rgba(0,172,218,0.7);

  --banner: url(https://files.filabra.com/caixa/Logotipo-Inverse-Full.svg);
  --banner-height: 55px;
  --banner-border-color: rgba(244,247,248);
  --banner-textbox-divider-color: rgba(255,255,255,0);
  --textbox-border-color: rgb(244,247,248);
  --corner-radius: 10px;

  --text-color: rgb(0,92,169);
  --text-font: "CAIXA Std Book";
  --link-color: rgb(102,102,102);
  
  --qf-bg:#ffffff;
  --qf-surface:#f5f8fb;
  --qf-blue: rgb(0,92,169);
  --qf-blue-dark:#0f4fa0;
  --qf-accent:#ff9800; /* small accent dot if needed */
  --qf-text:#17406b;
  --qf-muted:#6b86a5;
  --qf-radius:14px;
  --qf-shadow:0 4px 18px rgba(17,37,64,.08);
}
  
@font-face { font-family: "CAIXA Std Bold"; src: url("https://files.filabra.com/caixa/CAIXAStd-Bold.woff2") format("woff2"); }
@font-face { font-family: "CAIXA Std Book"; src: url("https://files.filabra.com/caixa/CAIXAStd-Book.woff2") format("woff2"); }
@font-face { font-family: "CAIXA Std SemiBold"; src: url("https://files.filabra.com/caixa/CAIXAStd-SemiBold.woff2") format("woff2"); }
/*
END EASY CUSTOMISATION
You can also EDIT the styles below, but please don't DELETE or RENAME them.
You can also ADD more styles if you need.
*/

/* Title above cards */
.banner-text{
  color: var(--qf-blue);	
  font-family: "CAIXA Std SemiBold";
  font-size: 20px;
  margin-bottom: 0px;
  font-weight: 700;
}

/* container for cards */
.queue-cards{
  display: grid;
  gap: 14px;
  margin: 0 20px 20px;       /* keep your margins */
}

/* Card */
.queue-card{
  display: flex;
  align-items: center; 
  background: var(--qf-bg);
  border-radius: var(--qf-radius);
  padding: 16px 18px;
  margin-bottom: 10px;
}

/* Icon */
.queue-card__icon{
  flex: 0 0 45px;            /* fixed icon column */
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin-right: 14px;
}
.queue-card__icon svg{ width:26px; height:26px; }

/* Divider */
.queue-card__divider{
  flex: 0 0 2px;
  align-self: stretch;
  background: rgba(0,92,169,0.7);
  margin-right: 10px;
}

/* === CONTENT VARIANTS === */

/* 2 columns: number | text */
.queue-card__content{
  display: grid;
  grid-template-columns: auto minmax(0,1fr); /* right col can shrink */
  align-items: center;
  column-gap: 10px;
  flex: 1 1 auto;            /* allow shrink/grow */
  min-width: 0;              /* critical for wrapping */
}

/* 2 rows: title over subtitle */
.queue-card__content--rows{
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* left-align */
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Typography */
.queue-card__big{
  font-size: 18px;
  text-align: left;
  min-width: 70px;
  margin-left: 5px;
  font-family: "CAIXA Std Bold";
  color: var(--text-color);  /* fixed var() */
  white-space: nowrap;       /* keep number on one line */
}

.queue-card__title{
  margin-left: 5px;
  font-size: 16px;
  font-family: "CAIXA Std Bold";
  color: var(--qf-blue);
}

.queue-card__sub{
  margin-left: 5px;
  color: var(--text-color);
  line-height: 1.2;
  text-align: left;
  overflow-wrap: anywhere;   /* prevent overflow on narrow widths */
}

/* Responsive (optional) */
@media (max-width: 360px){
  .queue-card{ flex-direction: column; align-items: flex-start; }
  .queue-card__divider{ display:none; }
  .queue-card__icon{ margin-bottom: 8px; }
  .queue-card__title{ font-size: 20px; }
  .queue-card__big{ font-size: 16px; }
}
  
.message {
  background-color: #FFFDD0;
    box-shadow: rgba(0,0,0,0.2) 0px 9px 19px 0px;
    border: 2px solid grey;
    border-radius: var(--corner-radius);
    padding: 10px;
}
.banner-image {
  width: auto;
  height: var(--banner-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--banner);
}
body {
  background: var(--page-background) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}
.container { min-height: 100vh; display: flex; align-items: center; justify-content: center;  margin: 0; padding: 0}
a { color: var(--link-color); font-weight: bold; }
.flags { position: absolute; top: 8px; right: 12px; }
.flags img { width: 32px; height: 24px; border-radius: 3px }
.center { position: relative; width: 90%; max-width: 550px; border-radius: var(--corner-radius); background: transparent; margin-top: 10px; margin-bottom: 10px; }
.mainbox {
  background: var(--textbox-background);
  /*box-shadow: rgba(0,0,0,0.2) 0px 18px 38px 0px;*/
  text-align: center;
  font-family: var(--text-font), sans-serif;
  color: var(--text-color);  
  font-size: 16px;
}
.lower {
  border-radius: 0px 0px var(--corner-radius) var(--corner-radius);
  /*padding-left: 20px;
  padding-right: 20px;*/
  padding-bottom: 20px;
  border: 1px solid var(--textbox-border-color);
  border-top: 1px solid var(--banner-textbox-divider-color);
  padding-bottom: 100px;
}
.upper {
  background: var(--banner-background);
  border-radius: var(--corner-radius) var(--corner-radius) 0px 0px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border: 1px solid var(--banner-border-color);
  border-bottom: 1px solid var(--banner-textbox-divider-color);
  padding-top: 100px;
}
.qf-toast {
    font-family: Tahoma; font-size: smaller; border-radius: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
    text-align: center; width: 90%;
}
span,nobr { pointer-events: none }
.statusrow { display: flex; margin-left: 30px; margin-right: 30px; justify-content: space-between}
.statusbox {
  width: 45%; margin-right: 20px; margin-left: 20px; padding-top: 10px; margin-top: 0px !important; margin-bottom: 0px  !important; padding-bottom: 0px !important;
  justify-content: center; border-radius: var(--corner-radius); box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0)); 
}
.qf-toast {
    font-family: Tahoma; font-size: smaller; border-radius: 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
    text-align: center; width: 90%;
}
.qf-turnclock { color: black; }
.balance { text-wrap: balance; }
.bold-font { font-family: "CAIXA Std Bold"; color: var(--caixa-blue) }
.margintb { margin: 16px 0px 16px 0px; }
.marginnob { margin-bottom: 0px !important}
.smaller {font-size: smaller}
.nox { font-size: 1.4em; }
.estwait { padding-top: 20px; font-size: 1.2em}
#aheadNumber { font-size: 1.8em; font-variant-numeric: tabular-nums }
.skip { position: absolute; left: -9999px; z-index: 999; padding: 1em; opacity: 0; } 
.skip:focus { left: 50%; transform: translateX(-50%); opacity: 1; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
@media screen and (max-width: 991px) {
  .mainbox { font-size: 16px; }
  .nox { font-size: 1.2em; }
  .estwait { padding-top: 5px; }
  .banner-image { height: var(--banner-height); }
  .sm-padding { padding-left: 15px !important; padding-right: 15px !important; }
}
.progressOuter {
  border: 1px solid var(--progress-border-color);
  width: auto;
  position: relative;
  margin-left: 20px;
  margin-right: 20px;
  /*padding: 2px;*/
  text-align: center;
  border-radius: 5px;
  /*box-shadow: var(--progress-outer-fade-color) 0px 0px 3px 3px;*/
  background-color: white;
  margin-top: 10px
}
.progressInner {
  background-image: linear-gradient(to right, var(--progress-inner-color1),var(--progress-inner-color2), var(--progress-inner-color1),var(--progress-inner-color2));
  background-size: 300% 300%;
  width: %% progress %%%;
  min-width: 10px;
  transition: width 2s;
  height: 30px;
  border-radius: 5px 0px 0px 5px;
  /*border: 1px var(--progress-border-color) solid;*/
  -webkit-animation: proganim 5s linear infinite;
  -moz-animation: proganim 5s linear infinite;
  animation: proganim 5s linear infinite;
}
@-webkit-keyframes proganim { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }
@-moz-keyframes proganim { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes proganim { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }