:root {
  --accentLightest: hsl(173, 29%, 94%);
  --accentLighter: hsl(174, 20%, 80%);
  --accentLight: hsl(175, 12%, 38%);
  --accentDefault: hsla(176, 12%, 28%);
  --accentDark: hsla(180, 12%, 18%);
  --accentDarker: hsl(180, 13%, 9%);
  --accentDarkest: hsl(180, 13%, 9%);

  --infoLightest: hsl(203, 100%, 95%);
  --infoLighter: hsl(206, 100%, 78%);
  --infoLight: hsl(207, 88%, 59%);
  --infoDefault: hsl(209, 76%, 44%);
  --infoDark: hsl(210, 76%, 34%);
  --infoDarker: hsl(211, 76%, 20%);
  --infoDarkest: hsl(212, 76%, 13%);

  --successLightest: hsl(132, 65%, 92%);
  --successLighter: hsl(134, 52%, 69%);
  --successLight: hsl(135, 52%, 46%);
  --successDefault: hsl(137, 60%, 32%);
  --successDark: hsl(139, 61%, 24%);
  --successDarker: hsl(140, 61%, 14%);
  --successDarkest: hsl(139, 61%, 9%);

  --dangerLightest: hsl(12, 100%, 96%);
  --dangerLighter: hsl(10, 100%, 83%);
  --dangerLight: hsl(9, 88%, 66%);
  --dangerDefault: hsl(7, 68%, 49%);
  --dangerDark: hsl(6, 68%, 37%);
  --dangerDarker: hsl(5, 68%, 21%);
  --dangerDarkest: hsl(5, 68%, 15%);

  --warningLightest: hsl(40, 90%, 92%);
  --warningLighter: hsl(38, 84%, 75%);
  --warningLight: hsl(37, 76%, 51%);
  --warningDefault: hsl(35, 96%, 36%);
  --warningDark: hsl(34, 96%, 28%);
  --warningDarker: hsl(33, 96%, 20%);
  --warningDarkest: hsl(33, 97%, 12%);

  --greyLightest: hsl(206, 28%, 95%);
  --greyLighter: hsl(207, 20%, 82%);
  --greyLight: hsl(207, 16%, 65%);
  --greyDefault: hsl(209, 12%, 41%);
  --greyDark: hsl(208, 12%, 30%);
  --greyDarker: hsl(213, 11%, 19%);
  --greyDarkest: hsl(210, 13%, 9%);

  --specialLightest: hsl(252, 100%, 97%);
  --specialLighter: hsl(254, 100%, 87%);
  --specialLight: hsl(255, 100%, 77%);
  --specialDefault: hsl(257, 72%, 62%);
  --specialDark: hsl(258, 48%, 47%);
  --specialDarker: hsl(259, 48%, 27%);
  --specialDarkest: hsl(260, 48%, 18%);

  /* Other colors */
  --white: var(--col-white-canvas);
  --black: var(--col-black-canvas);
  --blue: hsl(257, 72%, 62%); /* #003ED8 */
  --beige: var(--col-bg-canvas-sec);
}

/* reset */
html, body{
  box-sizing: border-box;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, ::after, ::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select {
  font-weight: inherit;
}

h1, h2, h3, h4, h5, h6, ul {  margin: 0; }

h1, h2, h3, h4, h5, h6 {  
  font-family: var(--ff-brand), var(--ff-system);
  font-weight: bold;
}


::-moz-selection { /* Code for Firefox */
  background: var(--blue);
  color: var(--white);
}

::selection {
  background: var(--accentDefault);
  color: var(--white);
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  font-variant-numeric: lining-nums tabular-nums;
}

input { background-color: transparent; }

textarea { resize: vertical;}

button:active { transform: scale(.96); }

.button-active {
  transform: scale(.9);
}
/* End of reset */

.rtl { direction: rtl;}

.fs0 { font-size: 4rem;     /*64px*/ }
.fs1 { font-size: 2.125rem; /*34px*/ }
.fs2 { font-size: 1.75rem;  /*28px*/ }
.fs3 { font-size: 1.375rem; /*22px*/ }
.fs4 { font-size: 1.125rem  /*18px*/ }
.fs5 { font-size: 1rem;     /*16px*/ }
.fs6 { font-size: .875rem   /*14px*/ }
.fs7 { font-size: .625rem;  /*10px*/ }

.fs1-hover:hover { font-size: 2.125rem; /*34px*/ }
.fs2-hover:hover { font-size: 1.75rem;  /*28px*/ }
.fs3-hover:hover { font-size: 1.375rem; /*22px*/ }
.fs4-hover:hover { font-size: 1.125rem  /*18px*/ }
.fs5-hover:hover { font-size: 1rem;     /*16px*/ }
.fs6-hover:hover { font-size: .875rem   /*14px*/ }
.fs7-hover:hover { font-size: .625rem;  /*10px*/ }


.text-transform-none{ text-transform:none }
.text-decoration-none{ text-decoration:none }
.text-decoration-none-hover:hover{ text-decoration:none }
.underline{ text-decoration:underline }
.underline-hover:hover { text-decoration:underline }
.first-underline::first-letter { text-decoration: underline; }
.first-uppercase::first-letter { text-transform: uppercase; }
.line-through { text-decoration: line-through; }

.italic{ font-style:italic }
.normal{ font-style:normal }
.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }


.thin { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 600; }
.bold{ font-weight: 700; }


.letter-spacing { letter-spacing: 0.06rem; /*1px*/ }


.font-family-site { font-family: var(--ff-brand), var(--ff-system); }
.font-family-monospace { font-family: Consolas, Monaco, monospace; }
.font-family-title { font-family: var(--ff-brand), var(--ff-system); }
.pre { white-space: pre-wrap; }
.pre-wrap { white-space: pre-wrap; }
.pre-line { white-space: pre-line; }
.white-space { white-space: normal; }

.left-align{ text-align:left }
.center{ text-align:center }
.right-align{ text-align:right }
.justify{ text-align:justify }
.center-last{ text-align-last:center }

.wrap { white-space: normal; }
.nowrap{ white-space:nowrap }
.break-word{ word-wrap:break-word }
.break-all{ word-break:break-all }

.line-height-1{ line-height: 1 }
.line-height-2{ line-height: 1.125 }
.line-height-3{ line-height: 1.25 }
.line-height-4{ line-height: 1.5 }
.line-height-5{ line-height: 2 }
.line-height-6{ line-height: 2.25rem }

.line-height-28{ line-height: 28px }
.line-height-24{ line-height: 24px }
.line-height-20{ line-height: 20px }
.line-height-16{ line-height: 16px }
.line-height-12{ line-height: 12px }

.list-style-none{ list-style:none }

.truncate{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


.inline{ display:inline }
.block{ display:block }
.inline-block{ display:inline-block }
.table{ display:table }
.table-cell{ display:table-cell }
.contents{ display:contents }

.overflow-hidden{ overflow:hidden }
.overflow-scroll{ overflow:scroll }
.overflow-auto{ overflow:auto }
.overflow-x-auto{ overflow-x:auto }
.overflow-y-auto{ overflow-y:auto }
.overflow-x-scroll{ overflow-x:scroll }
.overflow-y-scroll{ overflow-y:scroll }

.clearfix:before,
.clearfix:after{
  content:" ";
  display:table;
  clear:both;
 }

.left{ float:left }
.right{ float:right }

.aspect-ratio-1 { aspect-ratio: 1; }
.aspect-ratio-2 { aspect-ratio: 2; }

.fit{ max-width:100% }
.min-width-full { min-width: 100%; }
.min-width-10rem { min-width: 10rem; }
.min-width-15rem{ min-width: 15rem }
.min-width-60px {min-width: 60px; }
.min-width-275px {min-width: 275px; }
.min-width-9rem {min-width: 144px; }

.max-width-1{ max-width: 24rem }
.max-width-2{ max-width: 32rem }
.max-width-3{ max-width: 48rem }
.max-width-4{ max-width: 70rem }
.max-width-5{ max-width: 80rem }
.max-width-6{ max-width: 90rem }
.max-width-7{ max-width: 100rem }

.max-width-col-6{ max-width: 50% }
.max-width-col-4{ max-width: 33% }
.max-width-col-3{ max-width: 25% }

.width-2 { width: 2rem; }
.width-4 { width: 4rem; }
.width-10 { width: 10rem; }

.width-325px { width: 100% !important; }
@media (min-width: 641px){
  .width-325px { width: 325px !important; }
}

.no-width { width: 0%; }
.width-auto { width: auto; }

.border-box{ box-sizing:border-box }

.align-baseline{ vertical-align:baseline }
.align-top{ vertical-align:top }
.align-middle{ vertical-align:middle }
.align-bottom{ vertical-align:bottom }
.align-super{ vertical-align:super }

.mtn1px { margin-top: -0.06rem; /*-1px*/ }
.mt1px { margin-top: 0.06rem; /*1px*/ }
.mb1px { margin-bottom: 0.06rem; /*1px*/ }
.mbn1px { margin-bottom: -0.06rem; /*-1px*/ }

.mt05 { margin-top: .125rem; }

.m0{ margin:0 }
.mt0{ margin-top:0 }
.mr0{ margin-right:0 }
.mb0{ margin-bottom:0 }
.ml0{ margin-left:0 }
.mx0{ margin-left:0; margin-right:0 }
.my0{ margin-top:0; margin-bottom:0 }

.m1  { margin:        .25rem }
.mt1 { margin-top:    .25rem }
.mr1 { margin-right:  .25rem }
.mb1 { margin-bottom: .25rem }
.ml1 { margin-left:   .25rem }
.mx1 { margin-left:   .25rem; margin-right: .25rem }
.my1 { margin-top:    .25rem; margin-bottom: .25rem }


.m2{ margin: .5rem }
.mt2{ margin-top: .5rem }
.mr2{ margin-right: .5rem }
.mb2{ margin-bottom: .5rem }
.ml2{ margin-left: .5rem }
.mx2{ margin-left: .5rem; margin-right: .5rem }
.my2{ margin-top: .5rem; margin-bottom: .5rem }

.m3{ margin: 1rem }
.mt3{ margin-top: 1rem }
.mr3{ margin-right: 1rem }
.mb3{ margin-bottom: 1rem }
.ml3{ margin-left: 1rem }
.mx3{ margin-left: 1rem; margin-right: 1rem }
.my3{ margin-top: 1rem; margin-bottom: 1rem }

.m4{ margin: 2rem }
.mt4{ margin-top: 2rem }
.mr4{ margin-right: 2rem }
.mb4{ margin-bottom: 2rem }
.ml4{ margin-left: 2rem }
.mx4{ margin-left: 2rem; margin-right: 2rem }
.my4{ margin-top: 2rem; margin-bottom: 2rem }

.m5  { margin:        4rem }
.mt5 { margin-top:    4rem }
.mr5 { margin-right:  4rem }
.mb5 { margin-bottom: 4rem }
.ml5 { margin-left:   4rem }
.mx5 { margin-left:   4rem; margin-right: 4rem }
.my5 { margin-top:    4rem; margin-bottom: 4rem }

.mxn1{ margin-left: -.25rem; margin-right: -.25rem !important; }
.mxn2{ margin-left: -.5rem; margin-right: -.5rem !important; }
.mxn3{ margin-left: -1rem; margin-right: -1rem !important; }
.mxn4{ margin-left: -2rem; margin-right: -2rem !important; }
.mxn5{ margin-left: -4rem; margin-right: -4rem !important; }

.myn1{ margin-top: -.25rem; margin-bottom: -.25rem !important; }
.myn2{ margin-top: -.5rem; margin-bottom: -.5rem !important; }
.myn3{ margin-top: -1rem; margin-bottom: -1rem !important; }
.myn4{ margin-top: -2rem; margin-bottom: -2rem !important; }
.myn5{ margin-top: -4rem; margin-bottom: -4rem !important; }

.mtn1{ margin-top: -.25rem !important; }
.mtn2{ margin-top: -.5rem !important; }
.mtn3{ margin-top: -1rem !important; }
.mtn4{ margin-top: -2rem !important; }
.mtn5{ margin-top: -4rem !important; }

.mrn1{ margin-right: -.25rem !important; }
.mrn2{ margin-right: -.5rem !important; }
.mrn3{ margin-right: -1rem !important; }
.mrn4{ margin-right: -2rem !important; }
.mrn5{ margin-right: -4rem !important; }

.mbn1{ margin-bottom: -.25rem !important; }
.mbn2{ margin-bottom: -.5rem !important; }
.mbn3{ margin-bottom: -1rem !important; }
.mbn4{ margin-bottom: -2rem !important; }
.mbn5{ margin-bottom: -4rem !important; }

.mln1{ margin-left: -.25rem !important; }
.mln2{ margin-left: -.5rem !important; }
.mln3{ margin-left: -1rem !important; }
.mln4{ margin-left: -2rem !important; }
.mln5{ margin-left: -4rem !important; }

.ml-auto{ margin-left:auto }
.mr-auto{ margin-right:auto }
.mx-auto{ margin-left:auto; margin-right:auto; }

.no-padding-at-all{ padding:0 !important }

.p0{ padding:0 }
.pt0{ padding-top:0 }
.pr0{ padding-right:0 }
.pb0{ padding-bottom:0 }
.pl0{ padding-left:0 }
.px0{ padding-left:0; padding-right:0 }
.py0{ padding-top:0;  padding-bottom:0 }

.p1  { padding:        0.25rem; }
.pt1 { padding-top:    0.25rem; }
.pr1 { padding-right:  0.25rem; }
.pb1 { padding-bottom: 0.25rem; }
.pl1 { padding-left:   0.25rem; }
.px1 { padding-left:   .25rem; padding-right: .25rem }
.py1 { padding-top:    .25rem; padding-bottom: .25rem }

.p2{ padding: .5rem }
.pt2{ padding-top: .5rem }
.pr2{ padding-right: .5rem }
.pb2{ padding-bottom: .5rem }
.pl2{ padding-left: .5rem }
.py2{ padding-top: .5rem; padding-bottom: .5rem }
.px2{ padding-left: .5rem; padding-right: .5rem }

.p3{ padding: 1rem }
.pt3{ padding-top: 1rem }
.pr3{ padding-right: 1rem }
.pb3{ padding-bottom: 1rem }
.pl3{ padding-left: 1rem }
.py3{ padding-top: 1rem; padding-bottom: 1rem }
.px3{ padding-left: 1rem; padding-right: 1rem }

.p4{ padding: 2rem }
.pt4{ padding-top: 2rem }
.pr4{ padding-right: 2rem }
.pb4{ padding-bottom: 2rem }
.pl4{ padding-left: 2rem }
.py4{ padding-top: 2rem; padding-bottom: 2rem }
.px4{ padding-left: 2rem; padding-right: 2rem }

.p5{ padding: 4rem }
.pt5{ padding-top: 4rem }
.pr5{ padding-right: 4rem }
.pb5{ padding-bottom: 4rem }
.pl5{ padding-left: 4rem }
.py5{ padding-top: 4rem; padding-bottom: 4rem }
.px5{ padding-left: 4rem; padding-right: 4rem }

.gap1 { gap: 0.25rem; }
.gap2 { gap: 0.5rem; }
.gap3 { gap: 1rem; }
.gap4 { gap: 2rem; }
.gap5 { gap: 4rem; }

@media (max-width: 640px) {
  .xs-gap1 { gap: 0.25rem; }
  .xs-gap2 { gap: 0.5rem; }
  .xs-gap3 { gap: 1rem; }
  .xs-gap4 { gap: 2rem; }
  .xs-gap5 { gap: 4rem; }
}
@media (min-width: 641px){
  .sm-gap1 { gap: 0.25rem; }
  .sm-gap2 { gap: 0.5rem; }
  .sm-gap3 { gap: 1rem; }
  .sm-gap4 { gap: 2rem; }
  .sm-gap5 { gap: 4rem; }
}
@media (min-width: 833px){
  .md-gap1 { gap: 0.25rem; }
  .md-gap2 { gap: 0.5rem; }
  .md-gap3 { gap: 1rem; }
  .md-gap4 { gap: 2rem; }
  .md-gap5 { gap: 4rem; }
}
@media (min-width: 1025px){
  .lg-gap1 { gap: 0.25rem; }
  .lg-gap2 { gap: 0.5rem; }
  .lg-gap3 { gap: 1rem; }
  .lg-gap4 { gap: 2rem; }
  .lg-gap5 { gap: 4rem; }
}

.flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
.flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }

/* Use .not-print or add a class to identify elements should't display in print mode */
@media print {
  .no-print {
    display: none;
  }
}

.column-count-2 { column-count: 2 }
.column-count-3 { column-count: 3 }

.column-count-3 div, .columns-3 div { break-inside: avoid;}

.column-gap-2 { column-gap: .5em }
.column-gap-3 { column-gap: 1em }
.column-gap-4 { column-gap: 2em }
.column-gap-5 { column-gap: 4em }

.col{
  float:left;
  box-sizing:border-box;
}

.col-right{
  float:right;
  box-sizing:border-box;
}

.col-1{ width:8.33333%;}
.col-2{ width:16.66667%;}
.col-3{ width:25%;}
.col-4{ width:33.33333%;}
.col-5{ width:41.66667%;}
.col-6{ width:50%;}
.col-7{ width:58.33333%;}
.col-8{ width:66.66667%;}
.col-9{ width:75%;}
.col-10{ width:83.33333%;}
.col-11{ width:91.66667%;}
.col-12{ width:100%;}

.col-1-from-7 { width: 14.285714285714286%; /* 1/7 */ }
.col-5-from-7 { width: 71.42857142857143%;  /* 5/7 */ }
.col-1-from-5 { width: 20%;  /* 1/5 */ }

@media (min-width: 641px){
  .sm-medium { font-weight: 500; }

  .sm-inline{ display:inline }
  .sm-block{ display:block }
  .sm-inline-block{ display:inline-block }
  .sm-table{ display:table }
  .sm-table-cell{ display:table-cell }

  .sm-left-align{ text-align:left }
  .sm-center{ text-align:center }
  .sm-right-align{ text-align:right }
  .sm-justify{ text-align:justify }

  .sm-border-none{ border:0 !important }

  .sm-left{ float:left }
  .sm-right{ float:right }

  .sm-mtn1{ margin-top: -.25rem }
  .sm-mtn2{ margin-top: -.5rem }
  .sm-mtn3{ margin-top: -1rem }
  .sm-mtn4{ margin-top: -2rem }
  .sm-mtn5{ margin-top: -4rem }

  .sm-mbn1{ margin-bottom: -.25rem }
  .sm-mbn2{ margin-bottom: -.5rem }
  .sm-mbn3{ margin-bottom: -1rem }
  .sm-mbn4{ margin-bottom: -2rem }
  .sm-mbn5{ margin-bottom: -4rem }

  .sm-col{
    float:left;
    box-sizing:border-box;
  }

  .sm-col-right{
    float:right;
    box-sizing:border-box;
  }

  .sm-col-1{ width:8.33333%;}

  .sm-col-2{ width:16.66667%;}

  .sm-col-3{ width:25%;}

  .sm-col-4{ width:33.33333%;}

  .sm-col-5{ width:41.66667%;}

  .sm-col-6{ width:50%;}

  .sm-col-7{ width:58.33333%;}

  .sm-col-8{ width:66.66667%;}

  .sm-col-9{ width:75%;}

  .sm-col-10{ width:83.33333%;}

  .sm-col-11{ width:91.66667%;}

  .sm-col-12{ width:100%;}

  .sm-column-count-2 { column-count: 2 }

  .sm-column-count-3 { column-count: 3 }

  .sm-inline { display: inline; }


  .sm-width-4 { width: 4rem; }

}
@media (min-width: 833px){

  .md-col{
    float:left;
    box-sizing:border-box;
  }

  .md-col-right{
    float:right;
    box-sizing:border-box;
  }

  .md-col-1{
    width:8.33333%;
  }

  .md-col-2{
    width:16.66667%;
  }

  .md-col-3{
    width:25%;
  }

  .md-col-4{
    width:33.33333%;
  }

  .md-col-5{
    width:41.66667%;
  }

  .md-col-6{
    width:50%;
  }

  .md-col-7{
    width:58.33333%;
  }

  .md-col-8{
    width:66.66667%;
  }

  .md-col-9{
    width:75%;
  }

  .md-col-10{
    width:83.33333%;
  }

  .md-col-11{
    width:91.66667%;
  }

  .md-col-12{
    width:100%;
  }

}
@media (min-width: 1025px){

  .lg-col{
    float:left;
    box-sizing:border-box;
  }

  .lg-col-right{
    float:right;
    box-sizing:border-box;
  }

  .lg-col-1{
    width:8.33333%;
  }

  .lg-col-2{
    width:16.66667%;
  }

  .lg-col-3{
    width:25%;
  }

  .lg-col-4{
    width:33.33333%;
  }

  .lg-col-5{
    width:41.66667%;
  }

  .lg-col-6{
    width:50%;
  }

  .lg-col-7{
    width:58.33333%;
  }

  .lg-col-8{
    width:66.66667%;
  }

  .lg-col-9{
    width:75%;
  }

  .lg-col-10{
    width:83.33333%;
  }

  .lg-col-11{
    width:91.66667%;
  }

  .lg-col-12{
    width:100%;
  }

}
.flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
.inline-flex{ display:-webkit-box; display:-webkit-inline-flex; display:-ms-inline-flexbox; display:inline-flex }
/* Avoids issues with btrz-pill using inline-block */
  .flex.inline-block{ display:-webkit-box; display:-webkit-inline-flex; display:-ms-inline-flexbox; display:inline-flex }
/* End of Avoids issues ... */

@media (min-width: 641px){
  .sm-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
  .sm-flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
  .sm-justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between }
}

@media (min-width: 833px){
  .md-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
}

@media (min-width: 1025px){
  .lg-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }
}

.flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
.flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }
@media (max-width: 640px){
  .xs-flex-wrap{ -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap }
  .xs-flex-column{ -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column }
  .xs-justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around }
}

.column-reverse {-webkit-flex-direction:column-reverse; -ms-flex-direction:column-reverse; flex-direction: column-reverse;}
.row-reverse {-webkit-flex-direction:row-reverse; -ms-flex-direction:row-reverse; flex-direction: row-reverse;}

.items-start{ -webkit-box-align:start; -webkit-align-items:flex-start; -ms-flex-align:start; -ms-grid-row-align:flex-start; align-items:flex-start }
.items-end{ -webkit-box-align:end; -webkit-align-items:flex-end; -ms-flex-align:end; -ms-grid-row-align:flex-end; align-items:flex-end }
.items-center{ -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center }
.items-baseline{ -webkit-box-align:baseline; -webkit-align-items:baseline; -ms-flex-align:baseline; -ms-grid-row-align:baseline; align-items:baseline }
.items-stretch{ -webkit-box-align:stretch; -webkit-align-items:stretch; -ms-flex-align:stretch; -ms-grid-row-align:stretch; align-items:stretch }

.self-start{ -webkit-align-self:flex-start; -ms-flex-item-align:start; align-self:flex-start }
.self-end{ -webkit-align-self:flex-end; -ms-flex-item-align:end; align-self:flex-end }
.self-center{ -webkit-align-self:center; -ms-flex-item-align:center; align-self:center }
.self-baseline{ -webkit-align-self:baseline; -ms-flex-item-align:baseline; align-self:baseline }
.self-stretch{ -webkit-align-self:stretch; -ms-flex-item-align:stretch; align-self:stretch }

.justify-start{ -webkit-box-pack:start; -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start }
.justify-end{ -webkit-box-pack:end; -webkit-justify-content:flex-end; -ms-flex-pack:end; justify-content:flex-end }
.justify-center{ -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center }
.justify-between{ -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between }
.justify-around{ -webkit-justify-content:space-around; -ms-flex-pack:distribute; justify-content:space-around }

.content-start{ -webkit-align-content:flex-start; -ms-flex-line-pack:start; align-content:flex-start }
.content-end{ -webkit-align-content:flex-end; -ms-flex-line-pack:end; align-content:flex-end }
.content-center{ -webkit-align-content:center; -ms-flex-line-pack:center; align-content:center }
.content-between{ -webkit-align-content:space-between; -ms-flex-line-pack:justify; align-content:space-between }
.content-around{ -webkit-align-content:space-around; -ms-flex-line-pack:distribute; align-content:space-around }
.content-stretch{ -webkit-align-content:stretch; -ms-flex-line-pack:stretch; align-content:stretch }
.flex-auto{
  -webkit-box-flex:1;
  -webkit-flex:1 1 auto;
      -ms-flex:1 1 auto;
          flex:1 1 auto;
  min-width:0;
  min-height:0;
}
.flex-none{ -webkit-box-flex:0; -webkit-flex:none; -ms-flex:none; flex:none }

.flex-grow-0{ -webkit-box-flex-grow:0; -webkit-flex-grow:0; -ms-flex-grow:0; flex-grow:0; }
.flex-grow{ -webkit-box-flex-grow:1; -webkit-flex-grow:1; -ms-flex-grow:1; flex-grow:1; }
.flex-shrink-0{ -webkit-box-flex-shrink:0; -webkit-flex-shrink:0; -ms-flex-shrink:0; flex-shrink:0; }
.flex-shrink{  -webkit-box-flex-shrink:1; -webkit-flex-shrink:1; -ms-flex-shrink:1; flex-shrink:1;  }

.order-0{ -webkit-box-ordinal-group:1; -webkit-order:0; -ms-flex-order:0; order:0 }
.order-1{ -webkit-box-ordinal-group:2; -webkit-order:1; -ms-flex-order:1; order:1 }
.order-2{ -webkit-box-ordinal-group:3; -webkit-order:2; -ms-flex-order:2; order:2 }
.order-3{ -webkit-box-ordinal-group:4; -webkit-order:3; -ms-flex-order:3; order:3 }
.order-last{ -webkit-box-ordinal-group:100000; -webkit-order:99999; -ms-flex-order:99999; order:99999 }

.relative{ position:relative }
.absolute{ position:absolute }
.fixed   { position:fixed }
.sticky  { position: -webkit-sticky;
           position: -moz-sticky;
           position: -ms-sticky;
           position: -o-sticky;
           position: sticky; }
.height0 { height: 0px; }
.height-focus:focus { height: auto; }
.height100 { height: 100%; }
.height-auto { height: auto; }
.max-height0 { max-height: 0; }
.max-height500 { max-height: 500px; }
.max-height1000 { max-height: 1000px; }
.min-height500 { min-height: 500px; }
.height200 {height: 200px;}
.width100 { width: 100%; }

.top-0{ top:0 }
.right-0{ right:0 }
.bottom-0{ bottom:0 }
.left-0{ left:0 }

.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1{ bottom:1rem; }
.left-1 { left: 1rem; }

.top-3 { top: 3rem; }
.right-3 { right: 3rem; }
.bottom-3{ bottom:3rem; }
.left-3 { left: 3rem; }

.z1 { z-index: 1; }
.z2 { z-index: 2; }
.z3 { z-index: 3; }
.z4 { z-index: 4; }
.z5 { z-index: 5; }
.z6 { z-index: 6; }
.z7 { z-index: 7; }
.z8 { z-index: 8; }
.z9 { z-index: 9; }
.z10 { z-index: 10; }
.z1800 { z-index: 1800; }
.z1900 { z-index: 1900; }
.zmax { z-index: 2000; }

.border{
  border-style:solid;
  border-width: 1px ;/* 0.06rem = 1px*/
}

.border-top{
  border-top-style:solid;
  border-top-width: 0.06rem; /*1px*/
}

.border-right{
  border-right-style:solid;
  border-right-width: 0.06rem; /*1px*/
}

.border-bottom{
  border-bottom-style:solid;
  border-bottom-width: 0.06rem; /*1px*/
}

.border-left{
  border-left-style:solid;
  border-left-width: 0.06rem; /*1px*/
}

.border1{
  border-style:solid;
  border-width: 0.19rem; /*3px*/
}

.border-top1{
  border-top-style:solid;
  border-top-width: 0.19rem; /*3px*/
}

.border-right1{
  border-right-style:solid;
  border-right-width: 0.19rem; /*3px*/
}

.border-bottom1{
  border-bottom-style:solid;
  border-bottom-width: 0.19rem; /*3px*/
}

.border-left1{
  border-left-style:solid;
  border-left-width: 0.19rem; /*3px*/
}

.box-shadow-none { box-shadow: 0 0 0; }
.box-shadow-inset-none { box-shadow: inset 0 0 0; }
.border-none{ border:0 }
.no-border-at-all{ border:0 !important }
.border-dashed { border-style: dashed; }

.rounded-xs { border-radius: var(--r-xs); }
.rounded-sm { border-radius: var(--r-sm); }
.rounded-md { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-xl { border-radius: var(--r-xl); }
.rounded-pill { border-radius: var(--r-pill); }

.not-rounded{ border-radius: var(--r-none); }
.rounded { border-radius: var(--r-xs); }
.circle{ border-radius: var(--r-circle); }

.rounded-top{ border-radius: var(--r-xs) var(--r-xs) 0 0 !important; }
.rounded-right{ border-radius: 0 var(--r-xs) var(--r-xs) 0 !important; }
.rounded-bottom{ border-radius: 0 0 var(--r-xs) var(--r-xs) !important; }
.rounded-left{ border-radius: var(--r-xs) 0 0 var(--r-xs) !important; }

.vertical-text { writing-mode: vertical-rl }

.invisible{ visibility: hidden; }
.visible-hover:hover{ visibility: visible; }

/* Content isn't displayed on the screen, but is announced to screen reader users */
.hide{
  position:absolute !important;
  height:1px;
  width:1px;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
}

@media (max-width: 640px){
  .xs-hide{ display:none !important }
}

@media (min-width: 641px) and (max-width: 832px){
  .sm-hide{ display:none !important }
}

@media (min-width: 833px) and (max-width: 1024px){
  .md-hide{ display:none !important }
}

@media (min-width: 1025px){
  .lg-hide{ display:none !important }
}

.display-none { display:none !important }

.display-table { display: table; }

.display-table-cell { display: table-cell; }

@media (max-width: 640px){
  .xs-display-none{ display:none !important }
}

@media (min-width: 641px) and (max-width: 832px){
  .sm-display-none{ display:none !important }
}

@media (min-width: 833px) and (max-width: 1024px){
  .md-display-none{ display:none !important }
}

@media (min-width: 1025px){
  .lg-display-none{ display:none !important }
}

.rotate90 { transform: rotate(90deg);}

.opacity1 { opacity:.1; }
.opacity2 { opacity:.2; }
.opacity3 { opacity:.3; }
.opacity4 { opacity:.4; }
.opacity5 { opacity:.5; }
.opacity6 { opacity:.6; }
.opacity7 { opacity:.7; }
.opacity8 { opacity:.8; }
.opacity9 { opacity:.9; }

.opacity1-hover:hover { opacity:.1; }
.opacity2-hover:hover { opacity:.2; }
.opacity3-hover:hover { opacity:.3; }
.opacity4-hover:hover { opacity:.4; }
.opacity5-hover:hover { opacity:.5; }
.opacity6-hover:hover { opacity:.6; }
.opacity7-hover:hover { opacity:.7; }
.opacity8-hover:hover { opacity:.8; }
.opacity9-hover:hover { opacity:.9; }


.text-indent { text-indent: 1.5rem; }

.mtn50 { margin-top:    -50%; }
.mrn50 { margin-right:  -50%; }
.mbn50 { margin-bottom: -50%; }
.mln50 { margin-left:   -50%; }


.rounded-1 { border-radius: 1rem; }
.rounded-max { border-radius: 1000px; }


@media (min-width: 641px) {

  .sm-regular { font-weight: normal; }

  .sm-center { text-align:center; }

  .sm-uppercase { text-transform: uppercase; }

  .sm-mx4 { margin-left: 2rem; margin-right: 2rem; }

  .sm-m0 { margin:       0 }
  .sm-mt0{ margin-top:   0 }
  .sm-mr0{ margin-right: 0 }
  .sm-mb0{ margin-bottom:0 }
  .sm-ml0{ margin-left:  0 }
  .sm-mx0{ margin-left:  0; margin-right:0 }
  .sm-my0{ margin-top:   0; margin-bottom:0 }

  .sm-m1 { margin:        .25rem }
  .sm-mt1{ margin-top:    .25rem }
  .sm-mr1{ margin-right:  .25rem }
  .sm-mb1{ margin-bottom: .25rem }
  .sm-ml1{ margin-left:   .25rem }
  .sm-mx1{ margin-left:   .25rem; margin-right: .25rem }
  .sm-my1{ margin-top:    .25rem; margin-bottom: .25rem }

  .sm-m2 { margin:        .5rem }
  .sm-mt2{ margin-top:    .5rem }
  .sm-mr2{ margin-right:  .5rem }
  .sm-mb2{ margin-bottom: .5rem }
  .sm-ml2{ margin-left:   .5rem }
  .sm-mx2{ margin-left:   .5rem; margin-right: .5rem }
  .sm-my2{ margin-top:    .5rem; margin-bottom: .5rem }

  .sm-m3 { margin: 1rem }
  .sm-mt3{ margin-top: 1rem }
  .sm-mr3{ margin-right: 1rem }
  .sm-mb3{ margin-bottom: 1rem }
  .sm-ml3{ margin-left: 1rem }
  .sm-mx3{ margin-left: 1rem; margin-right: 1rem }
  .sm-my3{ margin-top: 1rem; margin-bottom: 1rem }

  .sm-m4 { margin: 2rem }
  .sm-mt4{ margin-top: 2rem }
  .sm-mr4{ margin-right: 2rem }
  .sm-mb4{ margin-bottom: 2rem }
  .sm-ml4{ margin-left: 2rem }
  .sm-mx4{ margin-left: 2rem; margin-right: 2rem }
  .sm-my4{ margin-top: 2rem; margin-bottom: 2rem }

  .sm-m5 { margin: 4rem }
  .sm-mt5{ margin-top: 4rem }
  .sm-mr5{ margin-right: 4rem }
  .sm-mb5{ margin-bottom: 4rem }
  .sm-ml5{ margin-left: 4rem }
  .sm-mx5{ margin-left: 4rem; margin-right: 4rem }
  .sm-my5{ margin-top: 4rem; margin-bottom: 4rem }

  .sm-mxn1{ margin-left: -.25rem; margin-right: -.25rem; }
  .sm-mxn2{ margin-left: -.5rem; margin-right: -.5rem; }
  .sm-mxn3{ margin-left: -1rem; margin-right: -1rem; }
  .sm-mxn4{ margin-left: -2rem; margin-right: -2rem; }
  .sm-mxn5{ margin-left: -4rem; margin-right: -4rem; }

  .sm-ml-auto{ margin-left:auto }
  .sm-mr-auto{ margin-right:auto }
  .sm-mx-auto{ margin-left:auto; margin-right:auto; }

  .sm-p0 { padding:0 }
  .sm-pt0{ padding-top:0 }
  .sm-pr0{ padding-right:0 }
  .sm-pb0{ padding-bottom:0 }
  .sm-pl0{ padding-left:0 }
  .sm-px0{ padding-left:0; padding-right:0 }
  .sm-py0{ padding-top:0;  padding-bottom:0 }

  .sm-p1  { padding:        0.25rem; }
  .sm-pt1 { padding-top:    0.25rem; }
  .sm-pr1 { padding-right:  0.25rem; }
  .sm-pb1 { padding-bottom: 0.25rem; }
  .sm-pl1 { padding-left:   0.25rem; }
  .sm-px1 { padding-left:   .25rem; padding-right: .25rem }
  .sm-py1 { padding-top:    .25rem; padding-bottom: .25rem }

  .sm-p2 { padding: .5rem }
  .sm-pt2{ padding-top: .5rem }
  .sm-pr2{ padding-right: .5rem }
  .sm-pb2{ padding-bottom: .5rem }
  .sm-pl2{ padding-left: .5rem }
  .sm-py2{ padding-top: .5rem; padding-bottom: .5rem }
  .sm-px2{ padding-left: .5rem; padding-right: .5rem }

  .sm-p3 { padding: 1rem }
  .sm-pt3{ padding-top: 1rem }
  .sm-pr3{ padding-right: 1rem }
  .sm-pb3{ padding-bottom: 1rem }
  .sm-pl3{ padding-left: 1rem }
  .sm-py3{ padding-top: 1rem; padding-bottom: 1rem }
  .sm-px3{ padding-left: 1rem; padding-right: 1rem }

  .sm-p4 { padding: 2rem }
  .sm-pt4{ padding-top: 2rem }
  .sm-pr4{ padding-right: 2rem }
  .sm-pb4{ padding-bottom: 2rem }
  .sm-pl4{ padding-left: 2rem }
  .sm-py4{ padding-top: 2rem; padding-bottom: 2rem }
  .sm-px4{ padding-left: 2rem; padding-right: 2rem }

  .sm-p5 { padding: 4rem }
  .sm-pt5{ padding-top: 4rem }
  .sm-pr5{ padding-right: 4rem }
  .sm-pb5{ padding-bottom: 4rem }
  .sm-pl5{ padding-left: 4rem }
  .sm-py5{ padding-top: 4rem; padding-bottom: 4rem }
  .sm-px5{ padding-left: 4rem; padding-right: 4rem }

  /* font sizes */
  .sm-fs0 { font-size: 4rem;     /*64px*/ }
  .sm-fs1 { font-size: 2.125rem; /*34px*/ }
  .sm-fs2 { font-size: 1.75rem;  /*28px*/ }
  .sm-fs3 { font-size: 1.375rem; /*22px*/ }
  .sm-fs4 { font-size: 1.125rem  /*18px*/ }
  .sm-fs5 { font-size: 1rem;     /*16px*/ }
  .sm-fs6 { font-size: .875rem   /*14px*/ }
}



/* Mobile only classes */
@media (max-width: 640px){
  .xs-flex-auto{
    -webkit-box-flex:1;
    -webkit-flex:1 1 auto;
        -ms-flex:1 1 auto;
            flex:1 1 auto;
    min-width:0;
    min-height:0;
  }
  .xs-truncate{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .xs-bold { font-weight: bold; }
  .xs-absolute{ position:absolute }

  .xs-col { float:left; box-sizing:border-box; }
  .xs-col-right { float:right; box-sizing:border-box; }

  .xs-col-1  { width:8.33333%; }
  .xs-col-2  { width:16.66667%; }
  .xs-col-3  { width:25%;}
  .xs-col-4  { width:33.33333%; }
  .xs-col-5  { width:41.66667%; }
  .xs-col-6  { width:50%; }
  .xs-col-7  { width:58.33333%; }
  .xs-col-8  { width:66.66667%; }
  .xs-col-9  { width:75%; }
  .xs-col-10 { width:83.33333%; }
  .xs-col-11 { width:91.66667%; }
  .xs-col-12 { width:100%; }

  .xs-center { text-align:center; }

  .xs-px3{ padding-left: 1rem; padding-right: 1rem; }
  .xs-px4{ padding-left: 2rem; padding-right: 2rem; }

  .xs-mr0{ margin-right:0 }
  .xs-mb3{ margin-bottom:1rem }
  .xs-mt0{ margin-top:0 }
  .xs-pt0{ padding-top:0 }

  .xs-mtn1 { margin-top:  -.25rem }

  .xs-border-none{ border:0 }

  .xs-flex{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex }

  /* font sizes */
  .xs-fs0 { font-size: 4rem;     /*64px*/ }
  .xs-fs1 { font-size: 2.125rem; /*34px*/ }
  .xs-fs2 { font-size: 1.75rem;  /*28px*/ }
  .xs-fs3 { font-size: 1.375rem; /*22px*/ }
  .xs-fs4 { font-size: 1.125rem  /*18px*/ }
  .xs-fs5 { font-size: 1rem;     /*16px*/ }
  .xs-fs6 { font-size: .875rem   /*14px*/ }
}

.pointer { cursor: pointer; }
.user-select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }
.pointer-events-all { pointer-events: all; }
.ew-resize { cursor: ew-resize; }
.grab { cursor: grab;}
.grabbing { cursor: grabbing;}
.pointer-not-allowed { cursor: not-allowed }

*:focus {
  outline: 0;
}

*:focus-visible {
  box-shadow: none;
  outline: 2px dashed var(--greyLight);
  outline-offset: 0.19rem; /*3px*/
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #333333;
}

.inverted-color select:-moz-focusring {
    color: transparent;

    text-shadow: 0 0 0 white;
}

.inverted-color .outline-grey-lighter:-moz-focusring,
.inverted-color .outline-grey-lighter-focus:-moz-focusring,
.inverted-color .outline-color-scheme-neutral-400, 
.inverted-color .focus:outline-color-scheme-neutral-400,
.inverted-color .outline-grey-lighter,
.inverted-color .outline-grey-lighter-focus:focus,
.inverted-color a:focus {
  outline: 2px dashed var(--white);
  outline-offset: 0.19rem; /*3px*/
}

.outline-grey-lighter:-moz-focusring,
.outline-grey-lighter-focus:-moz-focusring,
.outline-grey-lighter,
.outline-color-scheme-neutral-400
.focus:.outline-color-scheme-neutral-400,
.outline-grey-lighter-focus:focus,
a:focus {
  outline: 2px dashed var(--greyDefault);
  outline-offset: 0.19rem; /*3px*/
}

.outline-grey-lightest,
.outline-color-scheme-neutral-200
.outline-grey-lightest-focus:focus,
.focus:outline-color-scheme-neutral-200,
a:focus {
  outline: 2px dashed var(--greyLightest);
  outline-offset: 0.19rem; /*3px*/
}

.outline-offset-n1 { outline-offset: -1px; }
.outline-offset-n3-focus:focus { outline-offset: -3px; }
.outline-offset-n5 { outline-offset: -5px; }
.outline-offset-n8 { outline-offset: -8px; }

.outline-white-before { position: relative; }
.outline-white-before::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: solid white 3px;
  pointer-events: none;
  border-radius: 6px;
  outline: solid 2px white;
}

.outline-grey {
  outline: 1px solid var(--greyDefault);
}

.focus-none:focus {
  box-shadow: none;
  border-color: transparent;
  outline: 0;
}

.box-shadow-focus:focus {
  /* accent color */
  box-shadow: 0 1px 1px var(--accentDefault);
}

.box-shadow-inset {
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5);
}
/* Keeps previous box-shadow definition in buttons */
.box-shadow-inset.bg-black-10-hover:hover,
.box-shadow-inset.bg-black-10-focus:focus { box-shadow: inset 0 0 99999px rgba(0, 0, 0, .1), inset 0 2px 3px rgba(0, 0, 0, .5); }
.box-shadow-inset.box-shadow-focus:focus { box-shadow: 0 1px 1px var(--accentDefault), inset 0 2px 3px rgba(0, 0, 0, .5); }

/* custom background color */
.bg-background { background-color: var(--beige);}
.border-background { border-color: var(--beige);}

.bg-sunken { background-color:hsla(208, 29%, 90%, 0.5); }

.bg-transparent { background-color: transparent; }
.color-transparent { color: transparent; }
.border-transparent { border-color: transparent; }

/* accent colors */
.bg-accent-lightest { background-color: var(--accentLightest); }
.color-accent-lightest { color: var(--accentLightest); }
.border-accent-lightest { border-color: var(--accentLightest); }
.color-accent-lightest-hover:hover { color: var(--accentLightest); }

.bg-accent-lighter { background-color: var(--accentLighter); }
.color-accent-lighter { color: var(--accentLighter); }
.border-accent-lighter { border-color: var(--accentLighter); }
.color-accent-lighter-hover:hover { color: var(--accentLighter); }

.bg-accent-light { background-color: var(--accentLight); }
.color-accent-light { color: var(--accentLight); }
.border-accent-light { border-color: var(--accentLight); }
.color-accent-light-hover:hover { color: var(--accentLight); }

.bg-accent { background-color: var(--accentDefault); }
.color-accent { color: var(--accentDefault); }
.border-accent { border-color: var(--accentDefault); }
.color-accent-hover:hover { color: var(--accentDefault); }
.bg-accent-hover:hover { background-color: var(--accentDefault); }

.bg-accent-dark { background-color: var(--accentDark); }
.color-accent-dark { color: var(--accentDark); }
.border-accent-dark { border-color: var(--accentDark); }
.color-accent-dark-hover:hover { color: var(--accentDark); }

.bg-accent-darker { background-color: var(--accentDarker); }
.color-accent-darker { color: var(--accentDarker); }
.border-accent-darker { border-color: var(--accentDarker); }
.color-accent-darker-hover:hover { color: var(--accentDarker); }

.bg-accent-darkest { background-color: var(--accentDarkest); }
.color-accent-darkest { color: var(--accentDarkest); }
.border-accent-darkest { border-color: var(--accentDarkest); }
.color-accent-darkest-hover:hover { color: var(--accentDarkest); }

.box-shadow-accent { box-shadow: 0 1px 1px var(--accentDefault); }
.box-shadow-accent-focus:focus { box-shadow: 0 1px 1px var(--accentDefault); }
.border-accent-hover:hover { border-color: var(--col-brand-prim-400); }
.color-accent-hover:hover { color: var(--accentDefault); }
.outline-accent { outline: solid 1px var(--accentDefault); outline-offset: -1px; }
.outline-accent-hover:hover { outline: solid 1px var(--accentDefault); outline-offset: -1px; }


/* danger colors */
.bg-danger-lightest { background-color: var(--dangerLightest); }
.color-danger-lightest { color: var(--dangerLightest); }
.border-danger-lightest { border-color: var(--dangerLightest); }
.color-danger-lightest-hover:hover { color: var(--dangerLightest); }

.bg-danger-lighter { background-color: var(--dangerLighter); }
.color-danger-lighter { color: var(--dangerLighter); }
.border-danger-lighter { border-color: var(--dangerLighter); }
.color-danger-lighter-hover:hover { color: var(--dangerLighter); }

.bg-danger-light { background-color: var(--dangerLight); }
.color-danger-light { color: var(--dangerLight); }
.border-danger-light { border-color: var(--dangerLight); }
.color-danger-light-hover:hover { color: var(--dangerLight); }

.bg-danger { background-color: var(--dangerDefault); }
.color-danger { color: var(--dangerDefault); }
.border-danger { border-color: var(--dangerDefault); }
.color-danger-hover:hover { color: var(--dangerDefault); }
.bg-danger-hover:hover { background-color: var(--dangerDefault); }

.bg-danger-dark { background-color: var(--dangerDark); }
.color-danger-dark { color: var(--dangerDark); }
.border-danger-dark { border-color: var(--dangerDark); }
.color-danger-darker-hover:hover { color: var(--dangerDark); }

.bg-danger-darker { background-color: var(--dangerDarker); }
.color-danger-darker { color: var(--dangerDarker); }
.border-danger-darker { border-color: var(--dangerDarker); }
.border-danger-darker-hover:hover { border-color: var(--dangerDarker);}
.color-danger-darker-hover:hover { color: var(--dangerDarker); }
.box-shadow-danger { box-shadow: 0 1px 1px var(--dangerDarker); }

.bg-danger-darkest { background-color: var(--dangerDarkest); }
.color-danger-darkest { color: var(--dangerDarkest); }
.border-danger-darkest { border-color: var(--dangerDarkest); }
.color-danger-darkest-hover:hover { color: var(--dangerDarkest); }



/* warning colors */
.bg-warning-lightest { background-color: var(--warningLightest); }
.color-warning-lightest { color: var(--warningLightest); }
.border-warning-lightest { border-color: var(--warningLightest); }
.color-warning-lightest-hover:hover { color: var(--warningLightest); }

.bg-warning-lighter { background-color: var(--warningLighter); }
.color-warning-lighter { color: var(--warningLighter); }
.border-warning-lighter { border-color: var(--warningLighter); }
.color-warning-lighter-hover:hover { color: var(--warningLighter); }

.bg-warning-light { background-color: var(--warningLight); }
.color-warning-light { color: var(--warningLight); }
.border-warning-light { border-color: var(--warningLight); }
.color-warning-light-hover:hover { color: var(--warningLight); }

.bg-warning { background-color: var(--warningDefault); }
.color-warning { color: var(--warningDefault); }
.border-warning { border-color: var(--warningDefault); }
.color-warning-hover:hover { color: var(--warningDefault); }

.bg-warning-dark { background-color: var(--warningDark); }
.color-warning-dark { color: var(--warningDark); }
.border-warning-dark { border-color: var(--warningDark); }
.color-warning-dark-hover:hover { color: var(--warningDark); }

.bg-warning-darker { background-color: var(--warningDarker); }
.color-warning-darker { color: var(--warningDarker); }
.border-warning-darker { border-color: var(--warningDarker); }
.color-warning-darker-hover:hover { color: var(--warningDarker); }

.bg-warning-darkest { background-color: var(--warningDarkest); }
.color-warning-darkest { color: var(--warningDarkest); }
.border-warning-darkest { border-color: var(--warningDarkest); }
.color-warning-darkest-hover:hover { color: var(--warningDarkest); }

/* info colors */
.bg-info-lightest { background-color: var(--infoLightest); }
.color-info-lightest { color: var(--infoLightest); }
.border-info-lightest { border-color: var(--infoLightest); }
.color-info-lightest-hover:hover { color: var(--infoLightest); }

.bg-info-lighter { background-color: var(--infoLighter); }
.color-info-lighter { color: var(--infoLighter); }
.border-info-lighter { border-color: var(--infoLighter); }
.color-info-lighter-hover:hover { color: var(--infoLighter); }

.bg-info-light { background-color: var(--infoLight); }
.color-info-light { color: var(--infoLight); }
.border-info-light { border-color: var(--infoLight); }
.color-info-light-hover:hover { color: var(--infoLight); }

.bg-info { background-color: var(--infoDefault); }
.color-info { color: var(--infoDefault); }
.border-info { border-color: var(--infoDefault); }
.color-info-hover:hover { color: var(--infoDefault); }

.bg-info-dark { background-color: var(--infoDark); }
.color-info-dark { color: var(--infoDark); }
.border-info-dark { border-color: var(--infoDark); }
.color-info-dark-hover:hover { color: var(--infoDark); }

.bg-info-darker { background-color: var(--infoDarker); }
.color-info-darker { color: var(--infoDarker); }
.border-info-darker { border-color: var(--infoDarker); }
.color-info-darker-hover:hover { color: var(--infoDarker); }

.bg-info-darkest { background-color: var(--infoDarkest); }
.color-info-darkest { color: var(--infoDarkest); }
.border-info-darkest { border-color: var(--infoDarkest); }
.color-info-darkest-hover:hover { color: var(--infoDarkest); }

/* success colors */
.bg-success-lightest { background-color: var(--successLightest); }
.color-success-lightest { color: var(--successLightest); }
.border-success-lightest { border-color: var(--successLightest); }
.color-success-lightest-hover:hover { color: var(--successLightest); }

.bg-success-lighter { background-color: var(--successLighter); }
.color-success-lighter { color: var(--successLighter); }
.border-success-lighter { border-color: var(--successLighter); }
.color-success-lighter-hover:hover { color: var(--successLighterv); }

.bg-success-light { background-color: var(--successLight); }
.color-success-light { color: var(--successLight); }
.border-success-light { border-color: var(--successLight); }
.color-success-light-hover:hover { color: var(--successLight); }

.bg-success { background-color: var(--successDefault); }
.color-success { color: var(--successDefault); }
.border-success { border-color: var(--successDefault); }
.color-success-hover:hover { color: var(--successDefault); }

.bg-success-dark { background-color: var(--successDark); }
.color-success-dark { color: var(--successDark); }
.border-success-dark { border-color: var(--successDark); }
.color-success-dark-hover:hover { color: var(--successDark); }

.bg-success-darker { background-color: var(--successDarker); }
.color-success-darker { color: var(--successDarker); }
.border-success-darker { border-color: var(--successDarker); }
.color-success-darker-hover:hover { color: var(--successDarker); }

.bg-success-darkest { background-color: var(--successDarkest); }
.color-success-darkest { color: var(--successDarkest); }
.border-success-darkest { border-color: var(--successDarkest); }
.color-success-darkest-hover:hover { color: var(--successDarkest); }


/* inverted colors */
.inverted-color select.bg-transparent { background-color: rgba(156, 156, 156, .4);}
.inverted-color textarea.bg-transparent { background-color: rgba(156, 156, 156, .4);}
.inverted-color input.bg-transparent { background-color: rgba(156, 156, 156, .4);}

.inverted-color .box-shadow-focus:focus {
  box-shadow: 0 1px 1px #A9D9BF;
}
.inverted-color .box-shadow-black-50, .inverted-color .box-shadow-black-50:hover { box-shadow: 0 0 0 !important; }
.inverted-color .bg-accent { background-color: var(--col-bg-canvas-sec); }
.inverted-color .color-accent-hover:hover { color: var(--col-b-prim-inv); }
.inverted-color .color-accent { color: var(--col-b-prim-inv); }
.inverted-color .border-accent { border-color: var(--col-b-prim-inv) }
.inverted-color .box-shadow-accent { box-shadow: 0 1px 1px #A9D9BF; }

.inverted-color .bg-black { background-color: var(--white); }
.inverted-color .color-black { color: var(--white); }
.inverted-color .border-black { border-color: var(--white); }
.inverted-color .text-shadow-black { text-shadow: 0px 0px 2px rgba(0, 0, 0, .66); }
.inverted-color .bg-black-10-hover:hover { box-shadow: inset 0 0 99999px rgba(0, 0, 0, .1); }
.inverted-color .border-black-hover:hover { border-color: var(--white); }
.inverted-color .color-black-hover:hover { color: var(--white); }

.inverted-color.box-shadow-black-10 { box-shadow: var(--s-el-flat); }
.bg-info.box-shadow-black-50 { box-shadow: var(--s-el-flat); }

.inverted-color .bg-grey-darker { background-color: #cfcfcf; }
.inverted-color .color-grey-darker { color: #cfcfcf; }
.inverted-color .border-grey-darker { border-color: #cfcfcf; }
.inverted-color .border-grey-darker-hover:hover { border-color: #cfcfcf; }
.inverted-color .color-grey-darker-hover:hover { color: #cfcfcf; }

.inverted-color .bg-grey-darkest { background-color: var(--white); }
.inverted-color .color-grey-darkest { color: var(--white); }
.inverted-color .border-grey-darkest { border-color: var(--white); }
.inverted-color .border-grey-darkest-hover:hover { border-color: var(--white); }
.inverted-color .color-grey-darkest-hover:hover { color: var(--white); }

.inverted-color.bg-white { background-color: var(--greyDarker); }
.inverted-color .bg-white { background-color: var(--greyDarker); }
.inverted-color .color-white { color: var(--col-text-prim); }
.inverted-color .border-white { border-color: var(--black); }
.inverted-color .bg-white-hover:hover { box-shadow: inset 0 0 99999px rgba(255, 255, 255, .1); }
.inverted-color .border-white-hover:hover { border-color: var(--black); }
.inverted-color .color-white-hover:hover { color: var(--black); }

.inverted-color .bg-grey-lightest { background-color: var(--greyDefault); }
.inverted-color .color-grey-lightest { color: var(--greyDefault); }
.inverted-color .border-grey-lightest { border-color: var(--greyDefault); }
.inverted-color .border-grey-lightest-hover:hover { border-color: var(--greyDefault); }
.inverted-color .color-grey-lightest-hover:hover { color: var(--greyDefault); }

.inverted-color .bg-grey-lighter { background-color: var(--greyLight); }
.inverted-color .color-grey-lighter { color: var(--greyLight) }
.inverted-color .border-grey-lighter { border-color: var(--greyLight); }
.inverted-color .border-grey-lighter-hover:hover { border-color: var(--greyLight); }
.inverted-color .color-grey-lighter-hover:hover { color: var(--greyLight); }

.inverted-color .bg-grey { background-color: #e2e2e2; }
.inverted-color .color-grey { color: #e2e2e2; }
.inverted-color .border-grey { border-color: #e2e2e2; }
.inverted-color .border-grey-hover:hover { border-color: #e2e2e2; }
.inverted-color .color-grey-hover:hover { color: #e2e2e2; }

.inverted-color .bg-danger-lightest { background-color: var(--dangerDarkest); }

.inverted-color .bg-info { background-color: var(--infoLight); }
.inverted-color .color-info { color: var(--infoDefault); }
.inverted-color .border-info { border-color: var(--infoLight); }
.inverted-color .color-info-hover:hover { color: var(--infoLight); }

.inverted-color .cell {color:var(--white);}
.inverted-color header {color:var(--white);}

.inverted-color select option{background-color: #333}

/* black & white */
.bg-white { background-color: var(--white); }
.color-white { color: var(--white); }
.border-white { border-color: var(--white); }
.bg-white-hover:hover { background-color: var(--white); }
.border-white-hover:hover { border-color: var(--white); }
.color-white-hover:hover { color: var(--white); }
.bg-white-blurred { background-color: var(--col-bg-el-floating-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.bg-black { background-color: var(--black); }
.color-black { color: var(--black); }
.border-black { border-color: var(--black); }
.text-shadow-black { text-shadow: 0px 0px 2px rgba(0, 0, 0, .66); }
.bg-black-10-hover:hover, .bg-black-10-focus:focus { box-shadow: inset 0 0 99999px var(--col-brand-prim-100); }
.border-black-hover:hover { border-color: var(--black); }
.color-black-hover:hover { color: var(--black); }

.bg-white-25 { background-color: rgba(255, 255, 255, 0.25); }
.bg-black-30 { background-color: var(--col-bg-canvas-sec-inv); }
.bg-black-05 { background-color: var(--col-bg-el-sunken-glass) }

.bg-blue { background-color: var(--blue); }
.border-blue { border-color: var(--blue); }

/* box shadows */
/* flat */
.box-shadow-black-10 { box-shadow: var(--s-el-flat); }
.box-shadow-black-10-hover:hover { box-shadow: var(--s-el-flat); }
.box-shadow-black-10-double { box-shadow: inset var(--s-el-flat), var(--s-el-flat); }
/* raised */
.box-shadow-black-30 { box-shadow: var(--s-el-raised); }
.box-shadow-black-30-hover:hover { box-shadow: var(--s-el-raised); }
/* floating */
.box-shadow-black-50 { box-shadow: var(--s-el-floating); }
.box-shadow-black-50-hover:hover { box-shadow: var(--s-el-floating); }
/* Solves shadow conflict on hover */
.bg-black-10-hover.box-shadow-black-50:hover { box-shadow: 0 2px 3px var(--col-bg-el-sunken-canvas), inset 0 0 99999px rgba(0, 0, 0, .1); }

/* grey */
.bg-grey-lightest { background-color: var(--greyLightest); }
.color-grey-lightest { color: var(--greyLightest); }
.border-grey-lightest { border-color: var(--greyLightest); }
.bg-grey-lightest-hover:hover { background-color: var(--greyLightest); }
.border-grey-lightest-hover:hover { border-color: var(--greyLightest); }
.color-grey-lightest-hover:hover { color: var(--greyLightest); }

.bg-grey-lighter { background-color: var(--greyLighter); }
.color-grey-lighter { color: var(--greyLighter); }
.border-grey-lighter { border-color: var(--greyLighter); }
.bg-grey-lighter-hover:hover { background-color: var(--greyLighter); }
.border-grey-lighter-hover:hover { border-color: var(--greyLighter); }
.color-grey-lighter-hover:hover { color: var(--greyLighter); }

.bg-grey-light { background-color: var(--greyLight); }
.color-grey-light { color: var(--greyLight); }
.border-grey-light { border-color: var(--greyLight); }
.bg-grey-light-hover:hover { background-color: var(--greyLight); }
.border-grey-light-hover:hover { border-color: var(--greyLight); }
.color-grey-light-hover:hover { color: var(--greyLight); }

.bg-grey { background-color: var(--greyDefault); }
.color-grey { color: var(--col-text-ter); }
.border-grey { border-color: var(--greyDefault); }
.bg-grey-hover:hover { background-color: var(--greyDefault); }
.border-grey-hover:hover { border-color: var(--greyDefault); }
.color-grey-hover:hover { color: var(--col-text-ter); }

.bg-grey-dark { background-color: var(--greyDark); }
.color-grey-dark { color: var(--col-text-sec); }
.border-grey-dark { border-color: var(--greyDark); }
.border-grey-dark-hover:hover { border-color: var(--greyDark); }
.color-grey-dark-hover:hover { color: var(--col-text-sec); }

.bg-grey-darker { background-color: var(--greyDarker); }
.color-grey-darker { color: var(--col-text-sec); }
.border-grey-darker { border-color: var(--greyDarker); }
.border-grey-darker-hover:hover { border-color: var(--greyDarker); }
.color-grey-darker-hover:hover { color: var(-col-text-sec); }

.bg-grey-darkest { background-color: var(--greyDarkest); }
.color-grey-darkest { color: var(--col-text-prim); }
.border-grey-darkest { border-color: var(--greyDarkest); }
.border-grey-darkest-hover:hover { border-color: var(--greyDarkest); }
.color-grey-darkest-hover:hover { color: var(-col-text-prim); }

.transition-all { transition:all 300ms;}

/* squares */
.square-width { width: 3.71rem; }
.square-width62px { width: 3.88rem; }
.square-width36px { width: 2.25rem; }
/* Animation */
.btrz-slideInDown--initial { margin-top: -100%; transition: margin-top .25s .25s; }

.no-content-animation--initial * { opacity: 0; transition: opacity .5s 0s; }

.btrz-slideInDown { margin-top: 0; transition: margin-top .25s; }

.no-content-animation * { opacity: 1; transition: opacity .25s .25s; }

.animated { animation-duration: 500ms; animation-fill-mode: both; }

.animated.infinite { animation-iteration-count: infinite; }

.animated.longer-duration { animation-duration: 1s; }

.animated.shorter-duration { animation-duration: 300ms; }

.animated.hinge { animation-duration: 2s; }

.transition-min-width {transition: min-width 0.3s;}

.list-move { transition: transform 1s; }

.bezier {
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}
.delay-1 { animation-delay: 100ms; }
.delay-2 { animation-delay: 200ms; }
.delay-3 { animation-delay: 300ms; }
.delay-4 { animation-delay: 400ms; }
.delay-5 { animation-delay: 500ms; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn { animation-name: fadeIn; }

@keyframes fadeInEntrance {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  100% {
    /* opacity: 1; */
  }
}

.fadeInEntrance {
  animation: fadeInEntrance;
  animation-duration: 250ms;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes scaleIn {
  from {
    opacity: 0.5;
    scale: .9;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

.scaleIn {
  animation-name: scaleIn;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes fadeOutShrinkX {
  0% {
    max-height: 10000px;
    opacity: 1;
    animation-timing-function: ease-out;
  }
  50% {
    max-height: 100px;
    overflow: hidden;
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    border: transparent solid 0;
    animation-timing-function: ease-out;
  }
}

.fadeOutShrinkX {
  animation-name: fadeOutShrinkX;
}

@-webkit-keyframes slideUpFade {
  from {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    opacity: 0;
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideUpFade {
  from {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
    opacity: 0;
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.slideUpFade { animation-name: slideUpFade; animation-duration: .6s;}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown { animation-name: slideInDown; }


@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown { animation-name: fadeInDown; }


@keyframes fadeOutDown {
  from {
    opacity: 1;
    height: auto;
  }

  to {
    opacity: 1;
    height: 0;
  }
}

.fadeOutDown { animation-name: fadeOutDown; }

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft { animation-name: slideInLeft; }


@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight { animation-name: slideInRight; }

.slide-fade-enter-active {
  transition: all .6s ease;
}
.slide-fade-leave-active {
  transition: all 0s ease-out;
}
.slide-fade-enter {
  transform: translateX(10px);
  opacity: 0;
}
.slide-fade-leave-to {
  opacity: 0;
}


.slide-fade-inv-enter-active {
  transition: all .6s ease;
}
.slide-fade-inv-leave-active {
  transition: all 0s ease-out;
}
.slide-fade-inv-enter {
  transform: translateX(-10px);
  opacity: 0;
}
.slide-fade-inv-leave-to {
  opacity: 0;
}

.timer-enter-active {
  animation-name: timerAnimation;
  animation-timing-function: ease-out;
  animation-iteration-count: 2;
}

@keyframes timerAnimation {
  from {
    width: 100%;
    opacity: 0.2;
  }

  to {
    width: 0%;
    opacity: 0.8;
  }
}


.slide-up-fade-enter-active {
  transition: all .6s ease;
}
.slide-up-fade-leave-active {
  transition: all .6s ease-out;
}
.slide-up-fade-enter {
  transform: translateY(10px);
  opacity: 0;
}
.slide-up-fade-leave-to {
  opacity: 0;
}


.fade-enter-active {
  transition: opacity .4s ease;
}
.fade-leave-active {
  transition: opacity .4s ease;
}
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}


.fadeIn-enter-active {
  transition: all .4s ease;
}
.fadeIn-leave-active {
  transition: 0;
}
.fadeIn-enter {
  opacity: 0;
}
.fadeIn-leave-to {
  opacity: 0;
}


.scale-out-enter-active {
  transition: all .2s ease-in;
}
.scale-out-leave-active {
  transition: all .2s ease-out;
}
.scale-out-enter {
  transform: scaleY(0);
}
.scale-out-leave-to {
  transform: scaleY(0);
}


.scaleY-out-enter-active {
  transition: all .2s ease-in;
}
.scaleY-out-leave-active {
  transition: all .32s ease-out;
}
.scaleY-out-enter {
  transform: scaleY(0);
}
.scaleY-out-leave-to {
  transform: scaleY(0);
}


.strikethrough-enter-active {
  transition: all .6s ease;
}
.strikethrough-leave-active {
  transition: all .6s ease-out;
}
.strikethrough-enter {
  transform: translateX(10px);
  opacity: 0;
}
.strikethrough-leave-to {
  opacity: 0;
}
.strikethrough-leave-to::before {
  content:"";
  border-bottom: 3px solid var(--dangerDefault);
  width: 100%;
  position: absolute;
  right: 0;
  top: 60%;
}

/* end of animation */

/* */
/* timer hourglass Animation */
/* */
#hourglass {
  opacity: 1;
}
#hourglass i {
  opacity: 0;
  animation: hourglass 2.4s ease-in infinite, hourglass-spin 2.4s ease-out infinite;
}
#hourglass > i:nth-child(1) {
  color: var(--greyLighter);
  animation-delay: 0s, 0s;
}
#hourglass > i:nth-child(2) {
  color: var(--greyLighter);
  animation-delay: 0.6s, 0s;
}
#hourglass > i:nth-child(3) {
  color: var(--greyLighter);
  animation-delay: 1.2s, 0s;
}
#hourglass > i:nth-child(4) {
  color: var(--greyLighter);
  animation-delay: 1.8s, 0s;
}
#hourglass > i:nth-child(4) {
  animation: hourglass-end 2.4s ease-in infinite, hourglass-spin 2.4s ease-out infinite;
}
#hourglass > i:nth-child(5) {
  color: var(--greyDark);
  opacity: 1;
  animation: hourglass-spin 2.4s ease-out infinite;
}

@keyframes hourglass {
  0% {
    opacity: 1;
  }
  24% {
    opacity: 0.9;
  }
  26% {
    opacity: 0;
  }
}
@keyframes hourglass-end {
  0% {
    opacity: 0;
  }
  70% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hourglass-spin {
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* CSS tooltip */
[data-title]{
  position: relative;
}

[data-title]:hover::after {
  content: attr(data-title);
  position: absolute;
  font-size: 1rem;
  font-style: normal;
  background-color: var(--greyDarker);
  color: var(--greyLightest);
  border-radius: 0.19rem; /*3px*/
  padding: 6px 12px;
  top: 28px;
  left: 8px;
  animation: fadeInTooltip 3000ms cubic-bezier(1, -0.3, 0.39, 1.2) normal;
  -webkit-animation: fadeInTooltip 900ms cubic-bezier(1, -0.3, 0.39, 1.2) normal;
  z-index: 1;
}

@keyframes fadeInTooltip {
  0% { opacity:0; transform: translateY(-8px); }
  66% { opacity:0; transform: translateY(-8px); }
  100% { opacity:1; }
}

@-webkit-keyframes fadeInTooltip {
  0% { opacity:0; transform: translateY(-8px);}
  66% { opacity:0; transform: translateY(-8px);}
  100% { opacity:1; }
}


/* link hover underline animation */
.underline-animation {
  display: inline-block;
  position: relative;
}

.underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  left: 0;
  background-color: var(--accentDefault);
  transition: transform 0.16s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.underline-animation:hover::after{
  transform: scaleX(1);
  transition: transform 0.24s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.link-animation:hover {
  text-decoration: none !important;
}
.link-animation::after  {
  height: 0.06rem; /*1px*/
  bottom: 2px;
}

.tab-animation:hover {
  border-color: none !important;
}
.tab-animation::after {
  height: 1px;
  bottom: -1px;
}

.menu-animation:hover {
  border-color: transparent !important;
}
.menu-animation::after {
  height: 0.19rem; /*3px*/
  top: -3px;
}


/* content placeholder */
.placeholder-animation {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 8;
  -webkit-animation-name: placeholderSkeleton;
  -webkit-animation-timing-function: linear;
  background: #eeeeee;
  background-image: -webkit-gradient(linear, left center, right center, from(#eeeeee), color-stop(.2, #e2e2e2), color-stop(.4, #eeeeee), to(#eeeeee));
  background-image: -webkit-linear-gradient(left, #eeeeee 0%, #e2e2e2 20%, #eeeeee 40%, #eeeeee 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px;
  position: relative;
}

@-webkit-keyframes placeholderSkeleton {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

/* Stripes animation */

@keyframes animate-stripes {
    0% {
        background-position: 60px 0;
    }

    100% {
        background-position: 0 0;
    }
}

.animated-stripes {
    background-size: 30px 30px;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, .15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .15) 50%,
        rgba(255, 255, 255, .15) 75%,
        transparent 75%,
        transparent
    );
    animation: animate-stripes 0.6s linear infinite;
}

/* /////////////
// BTRZ-TABLE //
///////////// */
.btrz-table {
  width: 100%;
  font-family: var(--ff-brand), var(--ff-system);
  border: 0;
  color: var(--greyDarkest);
}

/* Use .not-print or add a class to identify elements should't display in print mode */
@media print {
  .btrz-table {
    page-break-inside: avoid;
  }
}

.btrz-table th {
  text-align: left;
  font-weight: 600;
  font-size: 1rem; /* sm-fs5 */
  padding: 0.5rem 1rem 0.5rem 1rem; /* pb2 pt2 px3 */
}

.btrz-table thead th {
  padding: 1rem 1rem 0.5rem 1rem; /* pb2 pt3 px3 */
}

.header-sort-down:after {
  content: "\f0d7";
  font-family: fontawesome;
  padding-left: .5rem;
}

.header-sort-up:after {
  content: "\f0d8";
  font-family: fontawesome;
  padding-left: .5rem;
}

.header-draggable {
  cursor: grabbing;
}

.header-sortable-action {
  cursor: pointer;
}

/* sticky thead */
.btrz-table.table-sticky thead {
  z-index: 2000; /* zmax */
  top: 222px; /* top-222 */
}
@media (max-width: 40em) {
  .btrz-table.table-sticky thead {
    top: 196px; /* .xs-mt-196 */
  }
}
.btrz-table.table-sticky thead th {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 51px; /* below-top-menu */
  z-index: 2;
  background-color: var(--white);
}
.overflow-auto .btrz-table.table-sticky thead th,
.overflow-x-auto .btrz-table.table-sticky thead th,
.overflow-y-auto .btrz-table.table-sticky thead th {
  top: 0px;
}
@media (min-width: 641px) {
  .btrz-table.table-sticky thead th {
    top: 67px; /* below-top-menu */
  }
  .overflow-auto .btrz-table.table-sticky thead th,
  .overflow-x-auto .btrz-table.table-sticky thead th,
  .overflow-y-auto .btrz-table.table-sticky thead th {
    top: 0px;
  }
}
.btrz-table.table-standalone  { background-color: white; }

.btrz-table.table-sticky.table-standalone thead th {
  background-color: var(--beige); /* bg-background */
}
.btrz-table.table-sticky.table-standalone thead th::after,
.btrz-table.table-sticky.table-x-border thead th::after {
  content: "";
  width: 100%;
  background-color: var(--greyDefault);
  height: 0.06rem; /*1px*/
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0
}

/* Frozen column */
.btrz-table.frozen-first-column tr th:first-of-type,
.btrz-table.frozen-first-column tr td:first-of-type {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  left: 0;
}
.btrz-table.frozen-first-column tr td:first-of-type::before {
  content: "";
  width: 0.06rem; /*1px*/
  background-color: var(--white);
  height: 100%;
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0
}
.btrz-table.frozen-first-column tr td:first-of-type::after {
  content: "";
  width: 0.06rem; /*1px*/
  background-color: var(--greyLighter);
  height: 100%;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0
}
.btrz-table.table-standalone.frozen-first-column tr th:first-of-type::before {
  content: "";
  width: 0.06rem; /*1px*/
  background-color: #ecdecf;
  height: 100%;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0
}
.btrz-table.frozen-first-column tr th:first-of-type::before {
  content: "";
  width: 0.06rem; /*1px*/
  background-color: #EBEBEB;
  height: 100%;
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0
}
.btrz-table.frozen-first-column tr th:first-of-type {
  z-index: 3;
}
.btrz-table.frozen-first-column:not(.table-standalone) tr th:first-of-type {
  background-color: white;
}
.btrz-table.frozen-first-column.table-standalone tr th:first-of-type {
  background-color: var(--beige); /* bg-background */
}

/* cells */
.btrz-table tbody td {
  text-align: left;
  font-size: 1.125rem; /* sm-fs4 */
  border: solid 1px var(--greyLighter);
  padding: 1rem;
  /* background-color: white; */
}

.btrz-table tbody td:not(.align-middle) {
  vertical-align: top;
}

.btrz-table.align-middle tbody td {
  vertical-align: middle;
}


/* TABLE-X-BORDER: horizontal borders only */
.btrz-table.table-x-border tbody td {
  border: none;
}
.btrz-table.table-x-border tbody tr:not(.remove-td-border-bottom) td:not(.border-none),
.btrz-table.table-x-border tbody tr:not(.remove-td-border-bottom) th:not(.border-none),
.btrz-table.table-x-border tbody tr:not(.remove-td-border-bottom) td:not(.border-0),
.btrz-table.table-x-border tbody tr:not(.remove-td-border-bottom) th:not(.border-0) {
  border-bottom: solid 1px var(--greyLighter);
}
.btrz-table.table-x-border thead th {
  border: none;
  border-bottom: solid 1px var(--greyDefault);
}

/* SMALL TABLE */
.btrz-table.table-small thead th {
  font-size: .875rem; /* fs6 */
  padding: 1rem 1rem 0.25rem 1rem; /* pb1 pt3 px3 */
}
.btrz-table.table-small tbody td {
  font-size: 1rem; /* sm-fs5 */
  padding: .5rem 1rem;
}


/* row hover  */
.btrz-table:not(.table-triangle) tbody tr:not(.no-hover):hover td {
  background-color: var(--greyLightest);
}
/* cell hover */
.btrz-table:not(.table-x-border) tbody tr:not(.no-hover) td:not(.no-hover):hover {
  box-shadow: inset 0 0px 0px 999px var(--white);
  box-shadow: inset 0 0px 0px 999px var(--greyDarker);
  color: white;
}


/* SELECTED ROW */
  /* selected row background  */
  .btrz-table tbody tr.selected td,
  .btrz-table tbody tr:has(input[type="checkbox"]:checked) td {
    background-color: var(--successLightest);
  }
  /* selected row hover  */
  .btrz-table tbody tr.selected:not(.no-hover):hover td,
  .btrz-table tbody tr:not(.no-hover):has(input[type="checkbox"]:checked):hover td {
    background-color: var(--successLighter);
  }
  /* selected cell hover */
  .btrz-table:not(.table-x-border) tbody tr.selected:not(.no-hover) td:not(.no-hover):hover {
    box-shadow: inset 0 0px 0px 999px var(--successLightest);
    box-shadow: inset 0 0px 0px 999px var(--successDarker);
    color: white;
  }

/* STRIPED TABLE */
  /* odd row */
  .btrz-table.table-striped > tbody > tr:nth-of-type(odd) td {
    background-color: #f9f9f9;
  }
  /* odd row hover */
  .btrz-table.table-striped > tbody > tr:nth-of-type(odd):not(.no-hover):hover td {
    background-color: #e2e0e0;
  }
  /* odd cell hover */
  .btrz-table.table-striped > tbody > tr:nth-of-type(odd):not(.no-hover) td:not(.no-hover):hover {
    box-shadow: inset 0 0px 0px 999px #f9f9f9;
    box-shadow: inset 0 0px 0px 999px var(--greyDarkest);
    color: white;
  }

/* table outline */
.btrz-table:not(.table-standalone) tbody tr:first-child td:first-child {
  border-top-left-radius: 0.19rem; /*3px*/
}
.btrz-table:not(.table-standalone) tbody tr:first-child td:last-child {
  border-top-right-radius: 0.19rem; /*3px*/
}
.btrz-table:not(.table-standalone) tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.19rem; /*3px*/
}
.btrz-table:not(.table-standalone) tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.19rem; /*3px*/
}
.btrz-table:not(.table-standalone):not(.table-x-border) tbody {
  outline: solid 1px var(--greyDefault);
  outline-offset: -1px;
  border-radius: 0.19rem; /*3px*/
  border: solid 2px white;
}
.btrz-table .btrz-table.table-standalone tbody,
.btrz-table .btrz-table.table-x-border tbody {
  outline:none;
}

/* links within tables */
.btrz-table a.color-danger:hover,
.btrz-table a.text-bz-danger-default {
  color: var(--dangerDefault);
}
.btrz-table a:not(.btn):not(.text-decoration-none),
.btrz-table a:not(.btn):not(.no-underline) {
  color: var(--greyDarkest);
  text-decoration: underline;
}
.btrz-table a:not(.btn):not(.text-decoration-none):hover,
.btrz-table a:not(.btn):not(.no-underline) {
  color: var(--accentDefault);
}
.btrz-table:not(.table-x-border) tbody tr:not(.no-hover) td:not(.no-hover):hover a:not(.btn) {
  color: white;
}

/* btrz-table modifiers */
.btrz-table thead th.right-align,
.btrz-table thead th.right,
.btrz-table thead th.text-right {
  text-align: right;
}
.btrz-table thead th.center {
  text-align: center;
}
.btrz-table tbody th.wrap,
.btrz-table tbody th.white-space {
  white-space: normal;
}
.btrz-table tbody td.right-align,
.btrz-table tbody td.right,
.btrz-table tbody td.text-right {
  text-align: right;
}
.btrz-table tbody td.center,
.btrz-table tbody td.text-center {
  text-align: center;
}
.btrz-table tbody td.wrap,
.btrz-table tbody td.whitespace-normal,
.btrz-table tbody td.white-space,
.btrz-table tbody td.whitespace-normal {
  white-space: normal;
}
.btrz-table .cell1 {
  min-width: 10px;
  width: 10px;
}
.btrz-table .cell2 {
  min-width: 20px;
  width: 20px;
}
.btrz-table .cell3 {
  min-width: 30px;
  width: 30px;
}
.btrz-table .cell4 {
  min-width: 40px;
  width: 40px;
}
.btrz-table .cell5 {
  min-width: 50px;
  width: 50px;
}
.btrz-table .cell6 {
  min-width: 60px;
  width: 60px;
}
.btrz-table .cell7 {
  min-width: 70px;
  width: 70px;
}
.btrz-table .cell8 {
  min-width: 80px;
  width: 80px;
}
.btrz-table .cell9 {
  min-width: 90px;
  width: 90px;
}
.btrz-table .cell10 {
  min-width: 100px;
  width: 100px;
}
.btrz-table .cell11 {
  min-width: 110px;
  width: 110px;
}
.btrz-table .cell12 {
  min-width: 120px;
  width: 120px;
}
.btrz-table .cell13 {
  min-width: 130px;
  width: 130px;
}
.btrz-table .cell14 {
  min-width: 140px;
  width: 140px;
}
.btrz-table .cell15 {
  min-width: 150px;
  width: 150px;
}
.btrz-table .cell16 {
  min-width: 160px;
  width: 160px;
}
.btrz-table .cell17 {
  min-width: 170px;
  width: 170px;
}
.btrz-table .cell18 {
  min-width: 180px;
  width: 180px;
}
.btrz-table .cell19 {
  min-width: 190px;
  width: 190px;
}
.btrz-table .cell20 {
  min-width: 200px;
  width: 200px;
}
.btrz-table .cell21 {
  min-width: 210px;
  width: 210px;
}
.btrz-table .cell22 {
  min-width: 220px;
  width: 220px;
}
.btrz-table .cell23 {
  min-width: 230px;
  width: 230px;
}
.btrz-table .cell24 {
  min-width: 240px;
  width: 240px;
}


/* sticky thead */
.sticky-header th:not(.table-hack) {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 67px;
  background-color: white;
  z-index: 1;
  box-shadow: 0 1px 0 var(--greyDefault);
}

.frozen-column tr th:first-of-type,
.frozen-column:not(.table-triangle) tr td:first-of-type {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  left: 0;
  background-color: white;
  box-shadow: 1px 0px 1px var(--greyLighter);
}

.frozen-column tr.selected th:first-of-type,
.frozen-column:not(.table-triangle) tr.selected td:first-of-type {
    background-color: var(--successLightest);
}

.frozen-column tr.selected:hover th:first-of-type,
.frozen-column:not(.table-triangle) tr.selected:hover td:first-of-type {
    background-color: var(--successLighter);
}

.frozen-last-column:not(.table-triangle) tr.selected td:last-of-type {
  background-color: var(--accentLighter);
}

.frozen-column thead tr th:first-of-type {
  z-index: 3 !important;
}

.frozen-column:not(.table-triangle) tr td:first-of-type,
.frozen-column tbody tr th {
  z-index: 1;
}

.frozen-last-column tr th:last-of-type,
.frozen-last-column:not(.table-triangle) tr td:last-of-type {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  right: 0;
  background-color: white;
  /* background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 14.5%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 100%); */
  background-color: white;
  box-shadow: 1px 0px 1px var(--greyLighter);
}

.frozen-last-column thead tr th:last-of-type {
  z-index: 3 !important;
}

.frozen-last-column:not(.table-triangle) tr td:last-of-type,
.frozen-last-column tbody tr th {
  z-index: 1;
}

/* CSS only Triangle table */
.btrz-table.table-x-border.table-triangle tbody td:not(.border-none),
.btrz-table.table-x-border.table-triangle tbody th:not(.border-none),
.btrz-table.table-x-border.table-triangle tbody td:not(.border-0),
.btrz-table.table-x-border.table-triangle tbody th:not(.border-0) {
  border-bottom: solid 1px var(--greyLighter);
  border-right: solid 1px var(--greyLighter);
}

.table-triangle thead tr:hover th:hover {
  color: var(--col-text-prim-inv);
  background-color: var(--col-selected-600);
}

.table-triangle tbody tr:hover th:first-child {
  color: var(--col-text-prim-inv);
  background-color: var(--col-selected-600);
}

.table-triangle tbody tr th:has(~ td input:focus) {
  color: var(--col-text-prim-inv);
  background-color: var(--col-selected-400);
}

.table-triangle tr:hover td:not(:first-child):hover {
  background-color: var(--col-selected-200);
  /* outline: solid 2px var(--col-selected-600); */
  outline-offset: -1px;
}
.table-triangle tr:hover td:not(:first-child):hover input {
  background-color: white;
}
.table-triangle td:not(:first-child):has(input:focus) {
  background-color: var(--col-selected-100);
  /* outline: solid 1px var(--col-selected-600); */
  outline-offset: -1px;
}
.table-triangle td:not(:first-child):has(input:focus) input {
  background-color: white;
}


.btrz-table.table-triangle tbody tr td:has(~ td:hover) {
  background-color: var(--col-selected-200);
}

.btrz-table.table-triangle tbody tr td:has(~ td input:focus) {
  background-color: var(--col-selected-100);

}

.table-triangle td,
.table-triangle th {
  transition: background-color 333ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btrz-table.table-triangle tbody th {
  max-width: 140px;
}

/* This for Firefox */
@supports not selector(:has(+ *)) {
  .table-triangle tbody tr:hover th:first-child {
    color: var(--greyDarkest);
    background-color: var(--white);
  }
  .table-triangle td,
  .table-triangle th {
    position: relative;
  }
  .table-triangle tr:hover td:hover div {
    z-index: 101 !important;
    background-color: var(--accentLighter) !important;
  }
  .table-triangle td:hover::before {
    background-color: var(--accentLighter);
    content: '';
    height: 10000px;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 100;
    pointer-events: none;
    opacity: .3;
  }
  .table-triangle td:hover::after {
    background-color: var(--accentLighter);
    content: '';
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 10000px;
    z-index: 100;
    pointer-events: none;
    opacity: .3;
  }
  .table-triangle { margin-top: 0;}
}

/* End of CSS only Triangle table */

/* btrz-table component styles */
.sticky-th {
  box-shadow: 0 1px 0 var(--greyDefault);
}

.frozen {
  box-shadow: 1px 0px 0 var(--greyLighter);
}

.sticky-th.frozen {
  box-shadow: 1px 0px 0 var(--greyLighter), 0 1px 0 var(--greyDefault);
}

  /* No more tables */

@media only screen and (max-width: 767px) {

  /* Force table to not be like tables anymore */
  .no-more-tables table,
  .no-more-tables thead,
  .no-more-tables tbody,
  .no-more-tables th,
  .no-more-tables td,
  .no-more-tables tr {
    display: block;
    /* font-size: 15px; */
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .no-more-tables thead tr {
    position: absolute;
    top:  -9999px;
    left: -9999px;
  }

  .no-more-tables tr {
    margin-bottom: 2rem;
  }

  .no-more-tables td {
    /* Behave  like a "row" */
    border: none;
    position: relative;
    white-space: normal;
    text-align:left;
  }

  .no-more-tables td:before {
    /* Now like a table header */
    position: absolute;
    font-weight: 600;
  }

  /*
  Label the data
  */
  .no-more-tables td:not(.accionable):before {
    content: attr(data-prop);
    margin-top: -1.5rem;
  }
}


/* Modifiers screen table */
  .left-n2px { left: -2px; }
  .mt-157 { margin-top: 157px; }
  .top-222 { top: 222px; }
  @media (max-width: 40em) {
    .xs-mt-131 { margin-top: 131px; }
    .xs-mt-196 { top: 196px; }
  }
  /* This is to change padding in notifications component for this case specifically */
  .mdfrs.p3 {
    padding: 0 1rem;
    -webkit-box-align: center;
      -webkit-align-items: center;
      -ms-flex-align: center;
      -ms-grid-row-align: center;
      align-items: center;
      height: 52px;
  }
/* End of Modifiers screen table */
/* CSS New seatmap desgin only*/
.coach {
  position: relative;
}
.coach::before {
  content: "";
  position: absolute;
  inset: 10px 6PX 10px 4px;
  background-color: var(--greyLight);
  background: linear-gradient(0deg, rgba(168,168,168,1) 0%,
                                    rgba(168,168,168,1) 20%,
                                    rgba(255,255,255,0) 20%,
                                    rgba(255,255,255,0) 40%,
                                    rgba(168,168,168,1) 40%,
                                    rgba(168,168,168,1) 60%,
                                    rgba(255,255,255,0) 60%,
                                    rgba(255,255,255,0) 80%,
                                    rgba(168,168,168,1) 80%,
                                    rgba(168,168,168,1) 100%
  );
}
.coach.border1::before { inset: 8px 4PX 8px 2px; }

.side-panel {  /* seatmap container */
  --columns: 5; /* default amount of columns */
  --rows: 15; /* default amount of rows */
  --maxSeatHeight: calc((var(--idealSeatMapWidthREM) -  1rem) / 5); /* considering 2+2 layout as ideal */
  --minScreenHeight: 64; /* Less than this minimum screen height will shrink the seatmap */
  --idealSeatMapWidth: 15.83; /* Seatmap width needed to make it fit in considering an average 2+2 15rows seatmap */
  --idealSeatMapWidthREM: var(--idealSeatMapWidth) * 1rem; /* Adds px unit */
  --idealSeatMapWidthMin: calc(var(--idealSeatMapWidthREM)/2); /* min width to shrink to due to browser's height limitation */
  --gap: 0.25rem; /* gap size between seats */
  --gapsWidth: calc(var(--gap) * (var(--columns) - 1)); /* total gaps accordicg to columns - rem unit */
  --proportion: calc(100vh / var(--minScreenHeight) * var(--idealSeatMapWidth)); /* vh unit not used anymor due it has conflicts with rem values */
  --containerWidth: clamp(var(--idealSeatMapWidthMin),  var(--idealSeatMapWidthREM), var(--idealSeatMapWidthREM)); /* min in rem, it was --proportion but it wont work with rem,  or max in rem unit */
  --containerWidthMinusGaps: calc(var(--containerWidth) - var(--gapsWidth)); /* actual dimension to divide between seats */
  --seatHeight: min(var(--maxSeatHeight), calc(var(--containerWidthMinusGaps) / var(--columns))); /*  */
  --seatWidth: var(--seatHeight); /* same as height for square seats */
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--seatWidth));
  grid-template-rows: repeat(var(--rows), var(--seatHeight));
  grid-gap: var(--gap);
  height: 100%;
}
@media (min-width: 1250px){
  .side-panel {
    --idealSeatMapWidth: 11.88; /* 190px to rem for 16px root fs */
  }
}
@media (min-width: 1400px){
  .side-panel {
    --idealSeatMapWidth: 13.75; /* 220px to rem for 16px root fs */
  }
}
@media (min-width: 1900px){
  .side-panel {
    --idealSeatMapWidth: 15.63; /* 250px to rem for 16px root fs */
  }
}

.side-panel.seatmap {
  border-radius: 10px 10px 3px 3px;
  outline: var(--greyLight) solid 1px;
  outline-offset: 6px;
  box-shadow: 0 0 12px var(--greyLighter);
}

.seatmap .seatmap-outline-blue {
  outline: 2px solid var(--col-blue-600);
  outline-offset: 2px;
  z-index: 100 !important;
}

.seatmap .numeric-display {
  font-size: 120px;
  top: calc(50% - 60px);
}

@keyframes circularize {
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
    border-radius: 50px;
  }
}

@keyframes blinking-border {
  50% {
    border-color: var(--greyLighter);
    outline: 0;
  }
}
/* focusing elements in sales flow */
.blinking-border {
  animation: blinking-border 700ms step-start 0s infinite;
}

/* focusing a seat */
.seatmap div[data-focus] {
  animation: blinking-border 700ms step-start 0s infinite;
  border-width: 3px;
  border-color: var(--accentDefault);
  outline: 1px solid rgba(256,256,256,.4);
  outline-offset: -4px;
}

.seatmap div[data-type="seat"]:not(.color-transparent),
.seatmap div[data-type="item"],
.seatmap div[data-type="wc"] {
  background-color: var(--bgcolor);
  color: var(--color, --col-text-prim);
}

/* blocked seat */
.seatmap div[data-status="blocked"][data-type="seat"],
.seatmap div[data-status="blocked"][data-type="seat"][data-fee],
.seatmap div[data-status="blocked"][data-type="seat"][data-seat-class] {
  background-color: var(--greyDark);
  color: transparent;
}
.seatmap div[data-status="blocked"]:not([data-selected="true"])::before {
  content: "\f068";
  font-family: fontawesome;
  color: var(--greyLighter);
  position: absolute;
  font-size: 1.5em;
}

/* selected side panel*/
.side-panel-grey {
  background-color: #F9F9F9;
  min-width: 19.83rem; /* 238/12 */
  display: grid;
}
.side-panel-grey:has(div div div div[data-focus="true"]) {
  background-color: var(--accentLightest);
}

@media (min-width: 1250px){
  .side-panel-grey {
    min-width: 15.88rem; /* 254/16 */
  }
}
@media (min-width: 1400px){
  .side-panel-grey {
    min-width: 17.75rem; /* 284/16 */
  }
}
@media (min-width: 1900px){
  .side-panel-grey {
    min-width: 19.63rem; /* 314/16 */
  }
}


/* selected seat and focus*/
.seatmap div[data-selected="true"][data-type="seat"][data-status="blocked"][data-focus="true"],
.seatmap div[data-selected="true"][data-type="seat"][data-status="blocked"][data-focus="true"][data-accessible="true"],
.seatmap div[data-selected="true"][data-type="seat"][data-status="available"][data-focus="true"][data-suggested="true"] {
  animation: circularize 0.16s cubic-bezier(0.645, 0.045, 0.355, 1), blinking-border 700ms step-start 0s infinite;
  background-color: var(--accentDefault) !important;
  color: #fff !important;
  border-radius: 50%;
}
/* selected seat */
.seatmap div[data-selected="true"][data-type="seat"],
.seatmap div[data-selected="true"][data-type="seat"][data-status="blocked"],
.seatmap div[data-selected="true"][data-type="seat"][data-suggested="true"] {
  animation: circularize 0.16s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: var(--accentDefault) !important;
  color: #fff;
  border-radius: 50%;
}

/* not active selected seat */
.seatmap div[data-selected="true"][data-type="seat"][data-active="false"],
.seatmap div[data-selected="true"][data-type="seat"][data-status="blocked"][data-active="false"] {
  opacity: .5;
}

/* unavailable seat */
.seatmap div[data-status="unavailable"][data-type="seat"],
.seatmap div[data-status="unavailable"][data-type="seat"][data-fee],
.seatmap div[data-status="unavailable"][data-type="seat"][data-seat-class] {
  background-color: var(--greyDefault);
  color: transparent;
}
.seatmap div[data-status="unavailable"]::before {
  content: "\f00d";
  font-family: fontawesome;
  color: var(--greyLighter);
  position: absolute;
  font-size: 1.5em;
}

/* reserved seat */
.seatmap div[data-status="reserved"]::before {
  content: "\f146";
  font-family: fontawesome;
  color: var(--col-text-prim);
  position: absolute;
  font-size: .68rem;
  left: 2px;
  top: 1px;
}

/* accessible seat */
.seatmap div[data-accessible="true"][data-type="seat"],
.seatmap div[data-accessible="true"][data-type="seat"][data-fee],
.seatmap div[data-accessible="true"][data-type="seat"][data-seat-class] {
  background-color: var(--col-blue-600);
  color: transparent;
  outline-offset: -4px;
  outline: solid 2px #fff;
}
.seatmap div[data-accessible="true"]::before {
  content: "\f193";
  font-family: fontawesome;
  color: #fff;
  position: absolute;
  font-size: 1em;
  font-weight: bold;
}

.seatmap div[data-type="seat"][data-accessible="true"][data-selected="true"],
.seatmap div[data-type="seat"][data-accessible="true"][data-selected="true"][data-suggested="true"] {
  outline: 0;
  animation: circularize 0.16s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: var(--accentDefault) !important;
  color: #fff;
  border-radius: 50%;
}
.seatmap div[data-accessible="true"][data-selected="true"]::before {
  content: "";
}

/* Unavailable seat */
.seatmap.show-female-seats div[data-status="unavailable"][data-female="true"] {
  border: solid 3px violet;
  background-color: white;
}

/* female seat */
.seatmap.show-female-seats div[data-status="unavailable"][data-female="true"]::before {
  content: "\f182";
  font-family: fontawesome;
  color: violet;
  position: absolute;
  font-size: 1em;
}

/* suggested seat */
.seatmap div[data-status="available"][data-suggested="true"] {
  border: dashed 3px var(--accentDefault);
  font-weight: bold;
  color: var(--accentDefault);
}

.seatmap div[data-accessible="true"][data-status="available"][data-suggested="true"] {
  border: 0;
  background-color: var(--col-blue-600);
  color: transparent;
  outline-offset: -4px;
  outline: dashed 2px #fff;
}

.seatmap .stairway-vertical {
  background-image: linear-gradient(90deg, var(--greyDefault) 2.38%, var(--white) 2.38%, var(--white) 50%, var(--greyDefault) 50%, var(--greyDefault) 52.38%, var(--white) 52.38%, var(--white) 100%);
  background-size: 39.00px 42.00px;
  z-index: 1;
}

.seatmap .stairway-horizontal {
  background-image: linear-gradient(0deg, var(--greyDefault) 2.38%, var(--white) 2.38%, var(--white) 50%, var(--greyDefault) 50%, var(--greyDefault) 52.38%, var(--white) 52.38%, var(--white) 100%);
  background-size: 42.00px 39.00px;
  z-index: 1;
}

.seatmap .driver {
  border-top: 1px var(--greyLighter) solid;
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

.seatmap .driver::before {
  content: "\f1db";
  font-family: Fontawesome;
  position: absolute;
  top: 23%;
  left: 16px;
  color: var(--greyDefault);
}

.seatmap .driver.right-driver::before {
  left: calc(100% - 26px);
}

.seatmap .accordion-top {
  position: relative;
  z-index: 1;
  overflow: hidden;
  transform: translateY(-7px);
  margin-left: -7px;
  margin-right: -7px;
  margin-bottom: -7px;
  border-left: solid 1px var(--greyLight);
  border-right: solid 1px var(--greyLight);
}

.seatmap .accordion-top::before {
  content: "";
  position: absolute;
  background-color: var(--greyLight);
  width: 50%;
  border-radius: 100px;
  transform: translate(50%, -63%);
  z-index: 1;
  aspect-ratio: 1;
  box-shadow: 0px 25px 0 10px #f9f9f9;
}

.seatmap .accordion-top::after {
  content: "";
  background-image: linear-gradient(0deg, var(--greyLight) 33.33%, #f9f9f9 33.33%, #f9f9f9 50%, var(--greyLight) 50%, var(--greyLight) 83.33%, #f9f9f9 83.33%, #f9f9f9 100%);
  background-size: 80.00px 20.00px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.seatmap .accordion-bottom {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-left: -7px;
  margin-right: -7px;
  margin-bottom: -7px;
  border-left: solid 1px var(--greyLight);
  border-right: solid 1px var(--greyLight);
}

.seatmap .accordion-bottom::before {
  content: "";
  position: absolute;
  background-color: var(--greyLight);
  width: 50%;
  border-radius: 100px;
  transform: translate(50%, 0);
  z-index: 1;
  aspect-ratio: 1;
  box-shadow: 0px -25px 0 10px #f9f9f9;
}

.seatmap .accordion-bottom::after {
  content: "";
  background-image: linear-gradient(0deg, var(--greyLight) 33.33%, #f9f9f9 33.33%, #f9f9f9 50%, var(--greyLight) 50%, var(--greyLight) 83.33%, #f9f9f9 83.33%, #f9f9f9 100%);
  background-size: 80.00px 20.00px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.seatmap .door-right {
  position: relative;
  z-index: 1;
  background-color: #F9F9F9;
  border-radius: 12px;
}

.seatmap .door-right::after {
  content: "\f0d9"" ""\f0da";
  font-family: Fontawesome;
  position: absolute;
  bottom: 7px;
  right: -11px;
  color: var(--greyDefault);
  z-index: 1;
  display: flex;
  top: 7PX;
  align-items: center;
  z-index: 1;
}

.seatmap .door-right::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 6px;
  right: -7px;
  width: 7px;
  background-color: #F9F9F9;
  border-top: solid 1px #bcbcbc;
  border-bottom: solid 1px #bcbcbc;
  z-index: 1;
}

.seatmap .door-left {
  position: relative;
  z-index: 1;
  background-color: #F9F9F9;
}

.seatmap .door-left::after {
  content: "\f0d9"" ""\f0da";
  font-family: Fontawesome;
  position: absolute;
  bottom: 7px;
  left: -11px;
  color: var(--greyDefault);
  z-index: 1;
  display: flex;
  top: 7PX;
  align-items: center;
  z-index: 1;
}

.seatmap .door-left::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 6px;
  left: -7px;
  width: 7px;
  background-color: #F9F9F9;
  border-top: solid 1px #bcbcbc;
  border-bottom: solid 1px #bcbcbc;
  z-index: 1;
}

.seatmap .seatmap-table {
  background-color: #F9F9F9;
  z-index: 1;
  position: relative;
}

.seatmap .seatmap-table::before {
  content: "";
  position: absolute;
  top: 15%;
  right: 10%;
  bottom: 15%;
  left: 10%;
  border: solid 1px var(--greyDefault);
  border-radius: 3px;
  background-color: #fff;
}

.seatmap .wc {
  border-radius: 3px;
  background-color: var(--greyDefault);
  color: var(--greyLighter);
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  z-index: 1;
}

.seatmap .item {
  z-index: 2;
  position: relative;
  color: transparent;
  pointer-events: none;
  opacity: .66;
  border-radius: 22px;
  margin-top: -0.63rem;
  height: 1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 12px;
}

.seatmap .seatmap-gap {
  background-color: #F9F9F9;
  z-index: 1;
}

.seatmap .settings {
  overflow: auto;
}

div[data-orientation="front"][data-status="available"]:not([data-accessible="true"]),
div[data-orientation="rear"][data-status="available"]:not([data-accessible="true"]) {
  margin-left: 2px;
  margin-right: 2px;
}

div[data-orientation="right"][data-status="available"]:not([data-accessible="true"]),
div[data-orientation="left"][data-status="available"]:not([data-accessible="true"]) {
  margin-top: 2px;
  margin-bottom: 2px;
}


div[data-orientation][data-status="available"]:not([data-accessible="true"])::after {
  content: "";
  position: absolute;
  height:100%;
  background-color: var(--greyLight);
  clip-path: polygon(0 50%, 0% 100%, 15% 100%, 15% 50%, 85% 50%, 85% 85%, 5% 85%, 5% 100%, 100% 100%, 100% 50%);
  border-radius: 6px;
}
div[data-orientation="front"][data-status="available"]:not([data-accessible="true"])::after {
  transform: rotate(0deg);
  bottom: -1px;
  left: -3px;
  right: -3px;
}
div[data-orientation="left"][data-status="available"]:not([data-accessible="true"])::after {
  transform: rotate(-90deg);
  top: 0px;
  left: 3px;
  right: -5px;
}
div[data-orientation="rear"][data-status="available"]:not([data-accessible="true"])::after {
  transform: rotate(180deg);
  bottom: 1px;
  left: -3px;
  right: -3px;
}
div[data-orientation="right"][data-status="available"]:not([data-accessible="true"])::after {
  transform: rotate(90deg);
  top: 0px;
  left: -5px;
  right: 3px;
}

/* End of CSS New seatmap design only */
/* HALL OF SHAME */
.bg-black-30.animated,
.bg-color-canvas-secondary-inverse.animated { 
    animation-name: none; /* Fix issue with hsl color */
  }

.station-marker {
  background-color: #2e57de;
  color: white;
  border-radius: 50%;
  text-align: center;
  width: 18px !important;
  height: 18px !important;
  box-shadow: 0 0 2px 10px rgba(255,255,255,0.33);
  outline: solid white 3px;
  outline-offset: 10px;
}

.leaflet-left .leaflet-control {
  margin-left: 16px !important;
}

.leaflet-top .leaflet-control {
  margin-top: 16px !important;
}

.invisible-label label{ visibility: hidden; }

tr.remove-td-border-bottom td {
  border-bottom: none !important;
}

/* filter component cards. This should be changed in btrz-modules filter,js and deleted here */
section.box-shadow-black-10.bg-white {
  border-radius: var(--r-xs);
}
section.box-shadow-black-10.bg-black-05 {
  border-radius: var(--r-xs);
  box-shadow: 0 0 0;;
}

/* Nav new styles */
nav.fixed.bg-white,
.fixed.bg-background.box-shadow-black-10 {
  background-color: var(--col-bg-el-flat-glass);
  backdrop-filter: blur(var(--blur-lg));
}
/* Fix issue due background transparency */
nav.fixed.bg-white ul li a,
nav.fixed.bg-color-static-white-canvas ul li a {
  border-color: transparent;
}

#side-menu,
#panel-right {
  background-color: var(--col-bg-el-floating-glass);
  backdrop-filter: blur(var(--blur-lg));
  box-shadow: var(--s-el-floating);
}

a.border-grey-lighter-hover:hover,
.border-top.border-bottom.border-grey-lighter-hover:hover,
a.bg-accent-lighter.color-accent,
a.hover\:border-bz-grey-lighter:hover,
.border-top.border-bottom.hover\:border-bz-grey-lighter:hover,
a.bg-bz-accent-lighter.text-bz-accent-default {
  border-color: transparent;
  box-shadow: inset 0 0 99999px var(--col-brand-prim-100);
  background-color: transparent;
}

#blocking-div,
#blocking {
  opacity: 0;
}

#shortcutHints {
  background-color: var(--col-bg-el-sunken-glass);
  backdrop-filter: blur(var(--blur-lg));
}
/* Round old cards and filter containers  */
/* section.box-shadow-black-10.mb4.p4.bg-black-05, */
.white-panel {
  border-radius: var(--r-xs);
}


.toggle-ejs input[type=radio] ~ div.rounded-xs {
  border: solid 0px var(--greyLighter);
}
.toggle-ejs input[type=radio]:checked ~ div.rounded-xs {
  color: var(--white);
}
.toggle-ejs input[type=radio]:checked ~ div.rounded-xs i {
  color: var(--white);
}
.toggle-ejs .radio-enable input[type=radio]:checked ~ div.rounded-xs {
  background-color: var(--successDefault);
}
.toggle-ejs .radio-disable input[type=radio]:checked ~ div.rounded-xs {
  background-color: var(--dangerDefault);
}

.split-button { display: inline-block;}
.btn-filter {
  color: var(--greyDarkest) !important;
}
.bg-black-05 .border-grey,
.color-elevation-sunken-glass .border-bz-grey-default { border-color: var(--greyLight);}


/* fix manifest screen only */
#fixer-manifest-wrapper label {width: auto;}
#fixer-manifest-wrapper #filter > div > div > div {
  display: flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
}
#fixer-manifest-wrapper #filter input.sm-fs5 {
  font-size: 1rem; box-shadow: none; height:36px; padding: 1rem;
}
#fixer-manifest-wrapper > section { box-shadow:none; }
/* UI changes bulk-seat-selection */
#bulk-seatmap-container #seatmapContainer .btrz-card {
  position: relative !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
}
.checkIn-i {
  padding: 1rem !important;
  border: none !important;
}

/*This is to override older CSS definition. Hopefully it will be removed in near future.*/
.btrz-table.table-sorter thead tr .header-sort-down,
.btrz-table.table-sorter thead tr .header-sort-up
{
  background-image:none;
}

/* Force font size in btrz-display size="large" component to fit its container */
.forceFontSize .sm-fs1 {
  font-size: 1.8vw;
}

/* Time-picker */
.btrz-select-form.hour select {
  padding-right: 0;
}
.btrz-select-form.hour div {
  border: none !important;
}
.btrz-select-form.minute select {
  padding-left: 0;
}
.btrz-select-form.minute div {
  border: none !important;
}
.inverted-color .btrz-time-picker .flex.bg-transparent
 { background-color: rgba(156, 156, 156, .4);}
.inverted-color .hour .bg-transparent,
.inverted-color .minute .bg-transparent
 { background-color: transparent;}

/* styles for links within error messages  */
.btrz-error a{
  color: white;
  text-decoration:underline;
}

/* styles for links within hints  */
.italic.color-grey a,
.italic.text-color-tertiary a{
  color: var(--greyDefault);
  text-decoration: underline;
}

/* styles for disabled components  */
select:disabled {
    background-color: var(--greyLightest);
    color: var(--greyDarkest);
    border-color: var(--greyLighter);
}

select:disabled:hover {
    border-color: var(--greyLighter);
}


/* 5 day outlook column enlargement  */
@media (min-width: 641px) {
  .wide .col-1-from-5.selectedColumn,
  .wide .w-1\/5.selectedColumn { width:40%; transition: width 300ms; }
  .wide .col-1-from-5,
  .wide .w-1\/5
 { width: 15%; transition: width 300ms; }
  .ssr-amount { display: none; }
  .selectedColumn .ssr-amount { display: inline-block; }
}

/* Custom padding right needed only for btrz-select component */
.jpr2-5 { padding-right: 2.5rem;}

/* checkbox component */
input[type=checkbox]:checked ~ div.rounded i.fa-square-o,
input[type=checkbox]:checked ~ div.rounded-xs i.fa-square-o {
  display: none;
}
input[type=checkbox]:checked ~ div.rounded,
input[type=checkbox]:checked ~ div.rounded-xs {
  border: solid 1px var(--greyLighter);
}
input[type=checkbox]:not(:checked) ~ div.rounded i.fa-check-square-o,
input[type=checkbox]:not(:checked) ~ div.rounded-xs i.fa-check-square-o {
  display: none;
}
input[type=checkbox]:disabled + div.rounded,
input[type=checkbox]:disabled + div.rounded-xs {
  background-color: var(--greyLightest);
  border-color: var(--greyLighter);
  color: var(--greyDefault);
}



/* No border standalone checkbox */
input[type=checkbox]:checked ~ div.line-height-1 i.fa-square-o,
input[type=checkbox]:checked ~ div.leading-100 i.fa-square-o {
  display: none;
}
input[type=checkbox]:not(:checked) ~ div.line-height-1 i.fa-check-square-o,
input[type=checkbox]:not(:checked) ~ div.leading-100 i.fa-check-square-o {
  display: none;
}
input[type=checkbox]:disabled + div.line-height-1 i,
input[type=checkbox]:disabled + div.leading-100 i {
  opacity: .5;
}
input[type=checkbox]:focus ~ div.line-height-1,
input[type=checkbox]:focus ~ div.leading-100 {
  outline: 2px dashed var(--greyDefault);
  outline-offset: 6px;
}

/* standalone checkbox and radio */
input[type=checkbox]:before,
input[type=radio]:before {
  content:"";
  width:0.85rem;
  height:0.85rem;
  background-color: var(--col-white-canvas);
  border-radius: 0.19rem; /*3px*/
  position: absolute;
}
.btrz-table tbody tr.selected input[type=checkbox]:before,
.btrz-table tbody tr.selected input[type=radio]:before {
  background-color:var(--accentLighter);
}
.btrz-table tbody tr:not(.no-hover):hover td input[type=radio]:before {
  background-color: var(--greyLightest);
}
.btrz-table tbody tr.selected:not(.no-hover):hover td input[type=radio]:before {
  background-color: var(--accentLighter);
}
input[type=checkbox]:checked:after,
input[type=radio]:checked:after {
  font-family: FontAwesome;
  position: absolute;
  margin: -0.13rem 0 0 -0.065rem;
  color: var(--accentDefault);
}
input[type=checkbox]:checked:after {
  content:"\f046";
}
input[type=radio]:checked:after {
  content:"\f192";
}
input[type=checkbox]:not(:checked):after {
  content:"\f096";
  color: var(--greyDefault);
  font-family: FontAwesome;
  position: absolute;
  margin: -0.13rem 0 0 -0.065rem;
}
input[type=radio]:not(:checked):after {
  content:"\f10c";
  color: var(--greyDefault);
  font-family: FontAwesome;
  position: absolute;
  margin: -0.13rem 0 0 -0.065rem;
}

/* radio component */
input[type=radio]:checked ~ div.rounded i.fa-circle-o,
input[type=radio]:checked ~ div.rounded-xs i.fa-circle-o {
  display: none;
}
input[type=radio]:checked ~ div.rounded,
input[type=radio]:checked ~ div.rounded-xs {
  border: solid 1px var(--greyLighter);
}
input[type=radio]:not(:checked) ~ div.rounded i.fa-dot-circle-o,
input[type=radio]:not(:checked) ~ div.rounded-xs i.fa-dot-circle-o {
  display: none;
}
input[type=radio]:disabled + div.rounded,
input[type=radio]:disabled + div.rounded-xs {
  background-color: var(--greyLightest);
  border-color: var(--greyLighter);
  color: var(--greyDefault);
}

/* change border color if btrzInput component is empty and not disabled */
input:not([disabled]):placeholder-shown {
  border-color: var(--greyDefault);
}

/* search box component */
.search-box.search-input-open {
  min-width: calc(100% - 100px);
}

@media (min-width: 641px) {
  .search-box.search-input-open {
    min-width: 220px;
  }
}

/* fix hover background on absolute position element */
.bg-black-10-hover .bg-black-10-hover {
  box-shadow: -16px 0 8px var(--col-white-canvas);
}

.bg-black-10-hover:hover .bg-black-10-hover,
.bg-black-10-hover:focus .bg-black-10-hover,
.hover\:shadow-\[inset_0_0_99999px_var\(--col-brand-prim-100\)\] .shadow-\[inset_0_0_99999px_var\(--col-brand-prim-100\)\],
.focus\:shadow-\[inset_0_0_99999px_var\(--col-brand-prim-100\)\] .shadow-\[inset_0_0_99999px_var\(--col-brand-prim-100\)\] {
  box-shadow: inset 0 0 99999px var(--col-bg-el-sunken-canvas);
}

.remove-mb4-last-child:last-child {
  margin-bottom: -2rem;
}

.remove-mb-last-child:last-child {
  margin-bottom: 0;
}

/* arrows :before */
.arrow-left-info:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #387EB2;
  position: absolute;
  left: -8px;
  top: calc(50% - 8px);
}

.stops-route-stop {
  margin-top: -3px;
  height: 6px;
  width: 6px;
}

/* button progress bar */
button::before {
  content: "";
  height: 4px;
  width: 0%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .3);
}

.progress-bar::before {
  transition: all 25s;
  width: 100%;
  background-color: var(--accentDefault);
}

/* sticky top relation with top main menu */
.below-top-menu {
  top: 3.31rem; /*53px 53/16*/
}

@media (min-width: 641px){
  .below-top-menu {
    top: 4.31rem; /*69px 69/16*/
  }
}

/* sticky submenu */
.sticky-submenu {
  top: 3rem;
  box-shadow: 0 0 0.19rem 0.25rem var(--beige);
}

@media (min-width: 641px){
  .sticky-submenu {
    top: 5rem;
    box-shadow: 0 0 0.19rem 0.81rem var(--beige);
  }
}


/* Shopping cart */

.white-stripes::before {
  content: "";
  background-color: var(--col-white-canvas);
  position: absolute;
  top: 0.06rem; /*1px*/
  left: -1px;
  right: 0;
  height: 1rem;
}

.white-stripes::after {
  content: "";
  background-color: var(--col-white-canvas);
  position: absolute;
  bottom: 0;
  left: -1px;
  right: 0;
  height: 1rem;
}


.mt67px { margin-top: 67px; }
.mt100px { margin-top: 100px; }


/* Dotted borders */
.dotted-top-border {
  /* Some browsers need border-style and border-color default definition */
  border-style: dotted;
  border-image: url("images/dots.svg");
  border-image-slice: 33% 33%;
  border-image-repeat: round;
  border-width: 8px 0 0 0;
}
.dotted-right-border {
  /* Some browsers need border-style and border-color default definition */
  border-style: dotted;
  border-image: url("images/dots.svg");
  border-image-slice: 33% 33%;
  border-image-repeat: round;
  border-width: 0 8px 0 0;
}
.dotted-bottom-border {
  /* Some browsers need border-style and border-color default definition */
  border-style: dotted;
  border-image: url("images/dots.svg");
  border-image-slice: 33% 33%;
  border-image-repeat: round;
  border-width: 0 0 8px 0;
}
.dotted-left-border {
  /* Some browsers need border-style and border-color default definition */
  border-style: dotted;
  border-image: url("images/dots.svg");
  border-image-slice: 33% 33%;
  border-image-repeat: round;
  border-width: 0 0 0 8px;
}
.dotted-vertical-borders {
  /* Some browsers need border-style and border-color default definition */
  border-style: dotted;
  border-image: url("images/dots.svg");
  border-image-slice: 33% 33%;
  border-image-repeat: round;
  border-width: 0 8px 0 8px;
}

/* Add male female icon to fontawesome to be used in amenities */
.fa-malefemale:before {
  content: "\f183 \f182";
}

/* 6 points icon for draggable objects */
.fa-ellipsis-v2:before {
  content: "\f142";
}
.fa-ellipsis-v2:after {
  content: "\f142";
  padding-left: 0.06rem; /*1px*/
}

/* Icon definition added to font awesome */
.fa-multiple-tickets:before {
  content: "\f145";
  text-shadow: 0.3em 0 0 rgba(207, 207, 207, 0.7), 0.6em 0 0 #cfcfcf;
  text-shadow: 0.3em 0 0 rgba(207, 207, 207, 0.7), 0.6em 0 0 rgba(207, 207, 207, 0.4);
  padding-right: 0.3em;
  margin-left: -0.3em;
}

.placeholder {
  background-color: var(--greyLightest);
  opacity: 0.8;
  background-image: linear-gradient(0deg, var(--greyLightest) 50%, #fff 50%);
  background-size: 10px 6px;
  box-shadow: inset  20px 24px 24px var(--col-white-canvas)
}


/* do not change border color in controls after interaction */
.permanent-border .border-grey-lightest { border-color: var(--greyDefault); }
.inverted-color .permanent-border .border-grey-lightest { border-color: var(--white); }

/* Requires no background element */
.scroll-shadow {
  overflow-x: auto;
  overflow-y: hidden;
  background-image:
  linear-gradient(to right, white, white),
  linear-gradient(to right, white, white),
  linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
  linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
  background-attachment: local, local, scroll, scroll;
}
.scroll-shadow-v {
  overflow-y: auto;
  overflow-x: hidden;
  background-image:
  linear-gradient(to top, white, white),
  linear-gradient(to top, white, white),
  linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)),
  linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
  background-position: bottom center, top center, bottom center, top center;
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
  background-attachment: local, local, scroll, scroll;
}
/* radial shadow works better for no-border containers */
.scroll-shadow-vertical {
  overflow-y: auto;
  background:
  linear-gradient(white 30%, rgba(255,255,255,0)),
  linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
  radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.15), rgba(0,0,0,0)),
  radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.15), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 20px, 100% 20px, 100% 10px, 100% 10px;
	background-attachment: local, local, scroll, scroll;
}

.scroll-shadow-horizontal {
  overflow-x: auto;
  background:
  linear-gradient(to right, white 70%, rgba(255,255,255,0)),
  linear-gradient(to right, rgba(255,255,255,0), white 30%),
  radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.15), rgba(0,0,0,0)),
  radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) 0 100%;
  background-position: left center, right top, left center, right center;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 20px 100%, 20px 100% , 10px 100%, 10px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Exact padding right to avoid overlapping custom arrow */
select.pr4 {
  padding-right: 3rem;
}

/* Add an comment sign in a table cell */
.asterisk {
  position: relative;
}

.asterisk::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 0;
  border-color: transparent var(--dangerLight) transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
  color: var(--dangerLight);
}

.cell-border-right {
  box-shadow: inset -1px 0 0px var(--greyDefault);
}

.v2::after{
  content:"2";
  position:absolute;
  margin-top:-3px;
  margin-left:5px;
  font-size:.8em;
}

/* Sandbox label */
.sandbox-label::before {
  content: "";
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-right: 18px solid var(--blue);
    position: absolute;
    left: -18px;
    top: -24px;
}

.sandbox-label::after {
  content: "";
    width: 0;
    height: 0;
    border-top: 24px solid transparent;
    border-bottom: 24px solid transparent;
    border-left: 18px solid var(--blue);
    position: absolute;
    right: -18px;
    top: -24px;
}
/* End of Sandbox label */


.stretched-link::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: "";
}

.darken-hover:hover {
  filter: brightness(96%);
}
.darken-row-hover:hover td{
  filter: brightness(96%);
}

.shortcut {
  text-transform: capitalize;
  font-size: .75rem;
  line-height: 1rem;
  font-family: monospace;
  font-weight: normal;
  background: rgba(230,230,230,0.8);
  padding: 0 2px;
  border-radius: 3px;
  color:var(--greyDarker);
  margin-left: 4px;
  display: inline-block;
  -webkit-align-self:center; -ms-flex-item-align:center; align-self:center;
}

.bg-accent .shortcut {
  color: var(--accentDark);
}

/* Print styles */
/* Use .not-print or add a class to identify elements should't display in print mode */
@media print {
  .no-print {
    display: none;
  }
  .btrz-navbar {
    display: none;
  }
  .table {
    page-break-inside: avoid;
  }
}


/* Inverted colors */
/* These are the default values when using a parent container with .inverted-color */
/* Every Tailwind definition like .inverted:text-secondary will override any of these */

.inverted-color select.bg-transparent { background-color: rgba(156, 156, 156, .4);}
.inverted-color textarea.bg-transparent { background-color: rgba(156, 156, 156, .4);}
.inverted-color input.bg-transparent { background-color: rgba(156, 156, 156, .4);}

.inverted-color .focus\:shadow-\[var\(--accentDefault\)\] {
  box-shadow: 0 1px 1px #A9D9BF;
}
.inverted-color .hover\:text-[--accentDefault] { color: #A9D9BF; }
.inverted-color .text-bz-accent-default{ color: #A9D9BF; }
.inverted-color .border-bz-accent-default { border-color: #A9D9BF; }
.inverted-color .shadow-\[var\(--accentDefault\)\] { box-shadow: 0 1px 1px #A9D9BF; }

.inverted-color .bg-color-static-black-canvas { background-color: var(--white); }
.inverted-color .text-color-static-black-canvas { color: var(--white); }
.inverted-color .border-color-static-black-canvas { border-color: var(--white); }
.inverted-color .text-shadow-black { text-shadow: 0px 0px 2px rgba(0, 0, 0, .66); }
.inverted-color .hover\:border-color-static-black-canvas { border-color: var(--white); }
.inverted-color .hover\:text-color-static-black-canvas { color: var(--white); }

.inverted-color.shadow-elevation-flat { box-shadow: var(--s-el-flat); }

.bg-info.shadow-elevation-floating { box-shadow: var(--s-el-flat); }

.inverted-color .bg-bz-grey-darker { background-color: #cfcfcf; }
.inverted-color .text-color-secondary { color: #cfcfcf; }
.inverted-color .border-bz-grey-darker{ border-color: #cfcfcf; }
.inverted-color .hover\:border-bz-grey-darker { border-color: #cfcfcf; }
.inverted-color .hover\:text-color-secondary { color: #cfcfcf; }

.inverted-color .bg-bz-grey-darkest { background-color: var(--white); }
.inverted-color .text-color-primary { color: var(--white); }
.inverted-color .border-bz-grey-darkest{ border-color: var(--white); }
.inverted-color .hover\:border-bz-grey-darkest { border-color: var(--white); }
.inverted-color .hover\:text-color-primary { color: var(--white); }

.inverted-color.bg-color-static-white-canvas { background-color: var(--greyDarker); }
.inverted-color .bg-color-static-white-canvas { background-color: var(--greyDarker); }
.inverted-color .text-color-static-white-canvas { color: var(--black); }
.inverted-color .border-color-static-white-canvas { border-color: var(--black); }
.inverted-color .hover\:bg-color-static-white-canvas { box-shadow: inset 0 0 99999px rgba(255, 255, 255, .1); }
.inverted-color .hover\:border-color-static-white-canvas { border-color: var(--black); }
.inverted-color .hover\:text-color-static-white-canvas { color: var(--black); }

.inverted-color .bg-bz-grey-lightest { background-color: var(--greyDefault); }
.inverted-color .text-bz-grey-lightest { color: var(--greyDefault); }
.inverted-color .border-bz-grey-lightest { border-color: var(--greyDefault); }
.inverted-color .hover\:border-bz-grey-lightest { border-color: var(--greyDefault); }
.inverted-color .hover\:text-bz-grey-lightest{ color: var(--greyDefault); }

.inverted-color .bg-bz-grey-lighter { background-color: #e2e2e2; }
.inverted-color .text-bz-grey-lighter { color: #e2e2e2; }
.inverted-color .border-bz-grey-lighter { border-color: #e2e2e2; }
.inverted-color .hover\:border-bz-grey-lighter{ border-color: #e2e2e2; }
.inverted-color .hover\:text-bz-grey-lighter { color: #e2e2e2; }

.inverted-color .bg-bz-grey-default { background-color: #e2e2e2; }
.inverted-color .text-color-tertiary { color: #e2e2e2; }
.inverted-color .border-bz-grey-default { border-color: #e2e2e2; }
.inverted-color .hover\:border-bz-grey-default { border-color: #e2e2e2; }
.inverted-color .hover\:text-color-tertiary { color: #e2e2e2; }

.inverted-color .bg-bz-danger-lightest { background-color: var(--dangerDarkest); }

.inverted-color .bg-bz-info-default { background-color: var(--infoLight); }
.inverted-color .text-bz-info-default { color: var(--infoDefault); }
.inverted-color .border-bz-info-default { border-color: var(--infoLight); }
.inverted-color .hover\:text-bz-info-default { color: var(--infoLight); }

.inverted-color .cell { color:var(--white); }
.inverted-color header { color:var(--white); }

.inverted-color select option{ background-color: #333; }

/* End of inverted colors */
/* ====================================================================
   BTRZ New sales flow - Styles
   ====================================================================
   
   Styles for the new single-screen sales flow (sales-reservations-2)
   Moved from embedded <style> tag in single-screen-sales-flow-vue.ejs
   All styles are scoped under .new-sales-flow class
   
   ==================================================================== */

/* UI for small screens */
@media (max-width: 1024px) {
    /* Avoids double icon for radios and checkboxes */
    .new-sales-flow input[type=checkbox]:before,
    .new-sales-flow input[type=radio]:before {
        content: "";
        width: 1.1rem;
        height: 1.1rem;
    }

    /* Reduces checkbox and radio components size for small screens */
    .new-sales-flow input[type=checkbox]:checked:after,
    .new-sales-flow input[type=radio]:checked:after,
    .new-sales-flow input[type=checkbox]:not(:checked):after,
    .new-sales-flow input[type=radio]:not(:checked):after {
        margin: 0.07rem 0 0 0.09rem;
    }
}

/* Segment layout styles - CSS variables for dynamic segment widths */
.new-sales-flow div:has( > div[name="segment"]) {
    --selected: 100%;
    --others: 0;
}
.new-sales-flow div:has( > * + div[name="segment"]) {
    --selected: 50%;
    --others: 50%;
}
.new-sales-flow div:has( > * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 33%;
}
.new-sales-flow div:has( > * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 22%; /* 66%/3 */
}
.new-sales-flow div:has( > * + * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 16.5%; /* 66%/4 */
}
.new-sales-flow div:has( > * + * + * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 13.2%; /* 66%/5 */
}
.new-sales-flow div:has( > * + * + * + * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 11%; /* 66%/6 */
}
.new-sales-flow div:has( > * + * + * + * + * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 9.43%; /* 66%/7 */
}
.new-sales-flow div:has( > * + * + * + * + * + * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 8.25%; /* 66%/8 */
}
.new-sales-flow div:has( > * + * + * + * + * + * + * + * + * + div[name="segment"]) {
    --selected: 33%;
    --others: 7.33%; /* 66%/9 */
}

/* Segment display rules */
.new-sales-flow div[name="segment"]:not(.border-accent) .itineraryTable,
.new-sales-flow div[name="segment"]:not(.border-bz-accent-default) .itineraryTable {
    width: 1500%;
}
.new-sales-flow div[name="segment"] {
    overflow: hidden;
    min-width: var(--others);
}
.new-sales-flow div[name="segment"].border-accent,
.new-sales-flow div[name="segment"].border-bz-accent-default {
    min-width: var(--selected);
}

/* Seatmap animations */
.new-sales-flow .seatmap {
    animation: seatmap-fade-in 300ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes seatmap-fade-in {
    0% {
        opacity: 0;
        transform: translate3d(0, 5px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Side panel adjustments */
.new-sales-flow .side-panel .fa-4x {
    font-size: 3rem !important;
}

/* Background animation effects */
.new-sales-flow .delay-bg-accent-lighter {
    animation: delay-bg-accent-lighter 2s linear;
}
@keyframes delay-bg-accent-lighter {
    50% {
        background-color: #BCEDD2;
    }
}

/* Loader line animation */
.new-sales-flow .loader-line {
    position: relative;
    overflow: hidden;
    width: 200%;
    animation: widthAnim 5s linear;
}

.new-sales-flow .loader-line:before {
    content: "";
    position: absolute;
    left: -50%;
    height: 3px;
    width: 40%;
    background-color: #7DC39C;
    -webkit-animation: lineAnim 1s linear infinite;
    -moz-animation: lineAnim 1s linear infinite;
    animation: lineAnim 1s linear infinite;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

@keyframes lineAnim {
    0% {
        left: -40%;
    }
    50% {
        left: 20%;
        width: 80%;
    }
    100% {
        left: 100%;
        width: 100%;
    }
}

@keyframes widthAnim {
    0% {
        width: 100%;
    }
    100% {
        width: 200%;
    }
}

/* Day selector animations */
.new-sales-flow .day-of-week[data-status="current"].prevDay,
.new-sales-flow .day-of-week[data-status="previous"].prevDay {
    transform: translateX(-110%) scale(0.2);
}

.new-sales-flow .day-of-week[data-status="current"].nextDay,
.new-sales-flow .day-of-week[data-status="next"].nextDay {
    transform: translateX(110%) scale(0.2);
}

/* Staggered animations */
@keyframes staggered {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        /* opacity: 1; */
    }
}

/* Itinerary table styles */
.new-sales-flow table.itineraryTable tr td:last-of-type {
    position: relative !important;
}

.new-sales-flow table.itineraryTable tbody tr td {
    border: none !important;
    padding: 0 !important;
}

/* Empty state table styles */
.new-sales-flow table.empty-state-table tbody tr td {
    position: relative;
    pointer-events: none;
}

.new-sales-flow table.empty-state-table tbody tr td::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 1000px;
    opacity: .8;
    background-color: transparent;
    margin: 0.5rem 0.8rem;
    z-index: 1;
}

.new-sales-flow table.empty-state-table tbody tr td:nth-child(1),
.new-sales-flow table.empty-state-table tbody tr td:nth-child(2) {
    width: 36%;
}

.new-sales-flow table.empty-state-table tbody tr td:nth-child(3),
.new-sales-flow table.empty-state-table tbody tr td:nth-child(4) {
    width: 14%;
}

.new-sales-flow table.empty-state-table tbody tr td:has(.mxn2)::before,
.new-sales-flow table.empty-state-table tbody tr td:has(.-mx-100)::before {
    margin: 0.5rem 0.25rem;
}

.new-sales-flow table.empty-state-table tbody tr td:has(.mxn3)::before,
.new-sales-flow table.empty-state-table tbody tr td:has(.-mx-200)::before {
    margin: 0.5rem 0rem;
}

.new-sales-flow table.empty-state-table tbody tr.selected td {
    background-color: #fff;
}

/* Results table animations */
.new-sales-flow table.results-table tbody tr:not(.no-hover) {
    animation: staggered;
    animation-duration: 250ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    animation-delay: calc(16 * 33ms);
}

@keyframes staggered1 {
    0% {
        max-height: 0px;
        opacity: 0;
    }
    100% {
        opacity: 1;
        max-height: 200px;
    }
}

.new-sales-flow table.results-table tbody tr.no-hover:not(.center) td div,
.new-sales-flow table.results-table tbody tr.no-hover:not(.text-center) td div {
    animation: staggered1;
    animation-duration: 900ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.32, 2, .55, .27);
    animation-delay: 0;
}

/* Row-specific animation delays and background colors */
.new-sales-flow table.results-table tbody tr:nth-of-type(1) {
    animation-delay: calc(1 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(1) td::before {
    background-color: #efefef;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(2) {
    animation-delay: calc(2 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(2) td::before {
    background-color: #f1f1f1;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(3) {
    animation-delay: calc(3 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(3) td::before {
    background-color: #f2f2f2;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(4) {
    animation-delay: calc(4 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(4) td::before {
    background-color: #f3f3f3;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(5) {
    animation-delay: calc(5 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(5) td::before {
    background-color: #f4f4f4;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(6) {
    animation-delay: calc(6 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(6) td::before {
    background-color: #f5f5f5;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(7) {
    animation-delay: calc(7 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(7) td::before {
    background-color: #f6f6f6;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(8) {
    animation-delay: calc(8 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(8) td::before {
    background-color: #f7f7f7;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(9) {
    animation-delay: calc(9 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(9) td::before {
    background-color: #f8f8f8;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(10) {
    animation-delay: calc(10 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(10) td::before {
    background-color: #f9f9f9;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(11) {
    animation-delay: calc(11 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(11) td::before {
    background-color: #fafafa;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(12) {
    animation-delay: calc(12 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(12) td::before {
    background-color: #fbfbfb;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(13) {
    animation-delay: calc(13 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(13) td::before {
    background-color: #fcfcfc;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(14) {
    animation-delay: calc(14 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(14) td::before {
    background-color: #fff;
}

.new-sales-flow table.results-table tbody tr:nth-of-type(15) {
    animation-delay: calc(15 * 33ms);
}
.new-sales-flow table.empty-state-table tbody tr:nth-of-type(15) td::before {
    background-color: #fff;
}

/* Shopping cart button with counter */
.new-sales-flow button.pointer .fa-shopping-cart,
.new-sales-flow button.cursor-pointer .fa-shopping-cart {
    margin-right: 18px;
}

.new-sales-flow button.pointer .fa-shopping-cart::after,
.new-sales-flow button.cursor-pointer .fa-shopping-cart::after {
    content: var(--cartItemsNumber);
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    width: 0.88rem;
    height: 0.88rem;
    border-radius: 111px;
    border: solid 1px #848484;
    background-color: white;
    color: #191919;
    font-size: 0.75rem;
    text-align: center;
    line-height: 0.75rem;
    margin-top: -0.19rem;
}

/* Expandable itinerary component */
.new-sales-flow .itinerarySigns {
    position: relative;
    text-align: center;
    padding: 0 0.25rem;
    width: 19px;
}

.new-sales-flow .side-panel .itinerarySigns {
    padding: 0 0.25rem 0 0;
}

.new-sales-flow .itinerarySigns > div {
    width: 19px;
}

.new-sales-flow .itinerarySigns::before {
    content: "";
    position: absolute;
    background-color: #848484;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(to right,
        #fff,
        #fff 9px,
        #848484 10px,
        #848484 10px,
        #fff 10px,
        #fff 19px);
}

.new-sales-flow .side-panel .itinerarySigns::before {
    background: repeating-linear-gradient(to right,
        #f9f9f9,
        #f9f9f9 9px,
        #848484 10px,
        #848484 10px,
        #f9f9f9 10px,
        #f9f9f9 19px);
}

.new-sales-flow .itinerary-item:first-of-type,
.new-sales-flow .itinerary-item:last-of-type {
    font-weight: bold;
}

.new-sales-flow .itineraryTable tbody tr,
.new-sales-flow .itineraryTable tbody tr td {
    font-size: .875rem !important;
    line-height: 24px;
}

.new-sales-flow .itineraryTable tbody tr:first-of-type,
.new-sales-flow .itineraryTable tbody tr:first-of-type td,
.new-sales-flow .itineraryTable tbody tr:last-of-type,
.new-sales-flow .itineraryTable tbody tr:last-of-type td {
    font-size: 1rem !important;
}

.new-sales-flow .itineraryTable tr:first-of-type td.itinerarySigns::before {
    top: 50%;
}

.new-sales-flow .itineraryTable tr:last-of-type td.itinerarySigns::before {
    bottom: 50%;
}

.new-sales-flow .itineraryTable tr:first-of-type td.itinerarySigns div div,
.new-sales-flow .itineraryTable tr:last-of-type td.itinerarySigns div div {
    width: 11px;
    height: 11px;
    outline: 1px white solid;
}

.new-sales-flow .itineraryTable tr td.itinerarySigns div div {
    width: 7px;
    height: 7px;
    outline: 1px white solid;
}

/* Seatmap references */
.new-sales-flow [data-status="blocked-ref"]::before {
    content: "\f068";
    font-family: fontawesome;
    color: lightgrey;
    position: absolute;
    font-size: 1.4em;
}

.new-sales-flow [data-status="reserved-ref"]::before {
    content: "\f25d";
    font-family: fontawesome;
    color: lightgrey;
    position: absolute;
    font-size: 1.4em;
}

.new-sales-flow div[data-status="accessible-ref"]::before {
    content: "\f193";
    font-family: fontawesome;
    color: #fff;
    position: absolute;
    font-size: 1.4em;
}

/* Flex layout utilities */
.new-sales-flow .flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.new-sales-flow .flex-item {
    width: calc(50% - 15px);
    margin-bottom: 15px;
}

/* Seatmap empty state placeholder */
.new-sales-flow [data-status="placeholder"] {
    width: 4.6vh;
    height: 4.6vh;
}

/* Table enhancements */
.new-sales-flow .btrz-table tbody td {
    vertical-align: middle !important;
}

.new-sales-flow .btrz-table tbody tr.selected td {
    background-color: var(--accentLighter);
}

.new-sales-flow .btrz-table tbody tr.selected td .bg-warning-lighter,
.new-sales-flow .btrz-table tbody tr.selected td .bg-bz-warning-lighter {
    color: #423016;
    background-color: #F0AD4E
}

/* Date picker adjustments */
.new-sales-flow .narrow-date-picker .btrz-input-form input {
    width: 7.33rem;
    padding-right: 0 !important;
}

.new-sales-flow .narrow-date-picker .btrz-input-form .height100.width100,
.new-sales-flow .narrow-date-picker .btrz-input-form .h-full.w-full {
    display: none;
}

/* Success background color */
.new-sales-flow .btrz-table tbody td.bg-success-lightest,
.new-sales-flow .btrz-table tbody td.bg-bz-success-lightest {
    background-color: #EDFFF4;
}

/* Search form labels */
.new-sales-flow #search label,
.new-sales-flow #btrz-search-trips label {
    font-size: .88rem;
    margin-bottom: .25rem;
}

/* Fade in animation */
@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.new-sales-flow .fade-in {
    animation: fadeIn 2s;
}