/* ABFO template*/

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lexend:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
html {
  height: max-content;
}

body.before,
body.after,
body.error {
  background-image: url(bg-luan-rh-rj-1.png);
  min-height: 1400px;
}

body {
  background-color: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  font-family: "Roboto", sans-serif;
  min-height: 1519px;
  background-image: url(bg-luan-rh-rj-1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center;

  /* font-family: "Work Sans", sans-serif; */
}

.queue .login-info,
.after .login-info,
.error .login-info {
  display: none;
}

.login-info {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lexend";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  gap: 18px;
  padding: 18px;
  background-color: #0154be;
  width: max-content;
  max-width: calc(100% - 40px);
  margin: 0 auto 20px auto;
  border-radius: 8px;
  border: 1px solid #fff;
}
.login-info img {
  width: 18px;
  height: auto;
}
#button-wrapper,
#button-wrapper a {
  font-weight: bold;
}
#button-wrapper span {
  font-weight: normal;
}
/* panels */

#toppanel {
  height: calc(81px + 78px);
  width: 100%;
  z-index: 1;
}

#rightpanel {
  width: 50%;
}
.before #rightpanel {
  display: none;
}
#toppanel_iframe,
#rightpanel_iframe {
  width: 100%;
  height: 100%;
}

/* hide default background images - beginning */
#main .t,
#main .b {
  display: none;
}

#main .c,
.warning-box,
.processbar-box,
.processbar-box .holder {
  background-image: none;
  color: inherit;
}

#defaultCountdown h2 {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 105%;
}

#content {
  color: inherit;
  font-weight: 400;
}

/* hide empty containers - beginning */
.after .warning-box,
.after .processbar-box,
.error .processbar-box,
.exit .processbar-box {
  display: none;
}
.before #black {
  display: block;
}
/* hide empty containers - end */

#wrapper {
  min-height: calc(100%);
  display: flex;
  padding: 0 48px;
  overflow-x: hidden;
  gap: 100px;
}
/* mainbox */

.before #main {
  min-width: 60%;
}
#main {
  width: 50%;
  min-width: 40%;
  margin: 30px auto;
  padding: 0px 0;
  max-width: 834px;
  border-radius: 16px;
}
#main .c {
  width: auto;
  padding: 0 48px;
  background: rgba(1, 4, 6, 0.65);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

#main-top {
  padding: 0;
  display: flex;
}

#language-selector {
  /*dropdown*/
  padding-top: 4px;
}

/*you can close this page without losing your place in line*/
#main-top-message {
  text-align: center;
  padding-top: 3px;
  display: none;
}

.item {
  padding-top: 3px;
}

.logo {
  font-size: 0;
  border-radius: 8px 8px 0 0;
  margin: 0;
  margin-top: 0;
}
.logo img {
  content: url(logo-rio.png);
  max-width: 280px;
  margin: 0 auto;
}
#header #headertext,
#whatisthis {
  padding: 0px;
  font-weight: 400;
  color: inherit;
  border: none;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

#whatisthis {
  /*  display: none; */
}
#footer-disclaimer {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 30px;
}
#footer-disclaimer > div {
  height: 30px;
}

.after #footer-disclaimer,
.error #footer-disclaimer {
  display: none;
}

.queue .main-dateplace {
  padding-top: 8px;
  padding-bottom: 0;
}
.after .main-dateplace,
.error .main-dateplace {
  display: none;
}
.main-dateplace div {
  display: flex;
  align-items: center;
  height: 24px;
}
#footer-disclaimer img {
  vertical-align: middle;
  width: 25px;
  height: 25px;
}
.footer-img img {
  margin: 0 auto;
}
.after .footer-img,
.error .footer-img {
  display: none;
}
.before #header,
.before #headertext {
  text-align: left;
}
/* hhh #headertext*/
#header {
  font-weight: 700;
  margin: 0;
  line-height: normal;
  text-align: left;
  color: #fff;
  font-size: 32px;
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  padding: 0;
  padding-top: 30px;
  padding-bottom: 15px;
  border-bottom: none;
}

/* .after #header {
  font-size: 18px;
} */
#headerparagraph {
  /* font-size: 16px; */
  color: #fff;
  padding-top: 5px;
}

.error #headerparagraph {
  color: #fff;
  font-weight: 600;
}
#whatisthis {
  margin: 0 auto;
  font-size: 14px;
}

#whatisthis,
#detailExpander {
}

a {
  color: inherit;
}

#hlThisIsQueueIt:hover {
}

#detailExpander:hover {
}
#defaultCountdown h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  margin-bottom: -5px;
}
.before .countdown_label {
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  display: inline-block;
}
.countdown_section {
  display: flex;
  align-items: start;
  flex-direction: column;
}
.countdown_row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.countdown_amount {
  font-style: normal;
  font-weight: 500;
  font-size: 34px;
  line-height: 45px;
  text-align: center;
  color: #ff751b;
}
.warning-box {
  min-height: 0;
  border: none;
  margin: 20px 0;
  padding: 0;
  font-weight: 400;
}

.queue .warning-box {
  margin: 0;
  margin-top: 40px;
}
.main-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  padding: 0 48px;
  padding-top: 100px;
}
.before .main-container {
  display: none;
}
.main-container div {
  min-height: 30px;
}
.main-container img {
  max-width: 60%;
  margin-bottom: 30px;
}
.main-container #city {
  color: #371a0a;
}
.main-container #location {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  display: flex;
  gap: 5px;
  margin-bottom: 25px;
}
@media screen and (max-width: 780px) {
  .main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: 0;
  }
  .main-container #location,
  .main-container img {
    display: none;
  }
}
@media screen and (max-width: 540px) {
  .main-container img {
    display: none;
  }
}
@-webkit-keyframes gradient_bkgd {
  from {
    background-position: 0px;
  }

  to {
    background-position: 15px;
  }
}

@-moz-keyframes gradient_bkgd {
  from {
    background-position: 0px;
  }

  to {
    background-position: 15px;
  }
}

@keyframes gradient_bkgd {
  from {
    background-position: 0px;
  }

  to {
    background-position: 15px;
  }
}

/* progressbar ppp  */
.progressbar {
  border: 1px solid #cecece;
  background: rgba(206, 206, 206, 0.15);
  border-radius: 20px;
  height: 37px;
}

.progressbar .progress,
.progressbar .progress.updated {
  background-color: #0154be;
  background-image: none;
  border-radius: 50px;
}

.progressbar .progress.updated {
  -webkit-animation: gradient_bkgd 1s linear infinite !important;
  -moz-animation: gradient_bkgd 1s linear infinite !important;
  animation: gradient_bkgd 1s linear infinite !important;
}

.progressbar .progress .runner,
.progressbar .progress .runner.paused {
  background-image: none;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: contain;
  margin-top: 5px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  margin-right: 5px;
}

#MainPart_lbManualUpdateWarning {
  margin: 15px 0;
}

.alert {
  padding: 8px 15px;
}

.alert-error {
  border-color: #ff6600;
  color: #fe3e3c;
  color: #b94a48;
}

.alert-success {
  border-color: #468847;
}

.processbar-box {
  line-height: normal;
  font-weight: 400;
  padding: 0 0 0px 0;
  margin: 0;
}

.processbar-box p {
  margin: 0;
}

.processbar-box .holder {
  min-height: 0;
  padding: 0 0 10px 0;
  border: none;
}
#defaultCountdown h2 {
  line-height: normal;
  padding-bottom: 10px;
}
.processbar-box .holder .larger {
  min-height: 0;
  color: #fff;
  text-align: left;
  font-size: 20px;
  font-family: inherit;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

.processbar-box .holder .larger span {
  line-height: 100%;
}

.info-container {
  display: flex;
  gap: 2px;
  margin-top: 5px;
}

#MainPart_lbQueueNumber,
#MainPart_lbUsersInLineAheadOfYou,
#MainPart_lbExpectedServiceTime,
#MainPart_lbWhichIsIn,
#MainPart_lbExpectedServiceTimeTimeZonePostfix {
  font-weight: 700;
}

/*Blinking icon*/
#MainPart_ulProgressbarBox_Holder_Processbar {
  display: none;
}

.processbar {
  width: 24px;
  margin: 5px auto;
}

#defaultViewPb1 {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  /* border: 1px solid #000; */
  box-shadow: 0px 0px 3px #000;
  margin: 3px;
  overflow: hidden;
}

.processbar span {
  background-image: linear-gradient(to bottom, #fff 21px, #000 21px);
}

/*status last updated*/
#MainPart_divProgressbarBox_Holder_LastUpdateTime {
  color: #fff;
  font-size: 16px;
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  text-align: left;
  margin-top: 8px;
}

/* Dynamic message mmm*/
.time-box {
  margin: 0 0 0px 0;
  background-color: rgba(0, 0, 0, 0);
  color: inherit;
  text-align: center;
}

.time-box .frame {
  min-height: 0;
  padding: 10px 15px 15px;
}

.time-box h2 {
  font-weight: 400;
  color: inherit;
  font-size: 10px;
}

.time-box p {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 14px;
}

#MainPart_frmReminder2 {
  /* email,button,label */
}

#MainPart_FormEmailInput {
}

/*iiinput*/
.reminder-form {
  margin: 0;
  min-height: 0;
}

.reminder-form form {
  font-size: 0;
}

/* please notify... */
.reminder-form h2 {
  font-weight: normal;
  color: inherit;
  margin: 8px 0;
}

/* email input iii*/
.reminder-form .item-input {
  padding: 3px 15px 0px;
  font-size: 15px;
  background: #fff;
  border: 1px solid #adaeb0;
  color: #4d4d4d;
  font-family: inherit;
  font-weight: 400;
  box-sizing: border-box;
  line-height: normal;
  width: 294px;
  min-width: 250px;
  vertical-align: top;
  margin: 0 5px 5px 0;
}

.reminder-form .item-input:focus {
  outline: none;
  font-weight: 400;
}

.reminder-form .row {
  margin: 0;
}

/*button bbb*/
.btn {
  background-color: #ff751b;
  color: #fff;
  width: 184px;
  text-align: center;
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  font-size: 16px;
  font-family: inherit;
  line-height: normal;
  box-sizing: border-box;
  transition: all 0.3s ease 0s;
  font-weight: 700;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.reminder-form .item-input,
.btn {
  height: 48px;
  border-radius: 8px;
}

.btn .r {
  display: none;
}

body.error .btn,
body.exit .btn {
  width: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}

.btn:hover {
  background: none;
  background-color: #000;
  box-shadow: none;
}

.btn:focus {
  outline: none;
}

.btn:active {
  top: 0;
}

.btn.btn-disabled {
  padding: 8px 15px 10px 15px;
}

/*leave the line */
.block {
  padding: 5px 0 0 0;
}

.block a {
  color: inherit;
}

.block p {
  margin: 0;
}

#footer {
  width: auto;
  color: inherit;
  padding: 20px 0;
  font-weight: 400;
  font-size: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* display: none; */
}

#hlLinkToQueueTicket2Text {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  font-weight: inherit;
  padding: 0 6px;
}

#footer-direct-link {
  padding: 0;
}

#footer-direct-link a {
  pointer-events: none;
  cursor: default;
}

#footer .by {
  text-align: right;
  /* width: auto;
  height: 10px; */
}

#footer a {
  color: inherit;
}

#footer img {
  height: 100%;
  /* content: url(./logo-white.svg); */
}
#footer-queueit-link {
  /*  display: none; */
}
#hlLinkToQueueTicket2 {
  pointer-events: none;
  text-decoration: none;
}

/* elements that main .c padding affects */
#header,
.warning-box,
#MainPart_lbManualUpdateWarning,
#MainPart_divProgressbarBox,
#MainPart_divBlock,
#MainPart_divTimeBox,
#MainPart_frmReminder2,
#MainPart_divExitLine,
#footer {
}

/* change font weight for elements */
#content,
#header,
#header h2,
.warning-box,
.processbar-box,
.time-box h2,
.reminder-form h2,
.reminder-form .item-input,
.reminder-form .item-input:focus,
#footer {
}

#MainPart_divExitLine {
  display: none;
}

.footer-logo-svg-path {
  fill: #fff;
}
body.queue #lbHeaderH2 > span,
body.before #lbHeaderH2 > span {
  font-size: 22px;
  font-weight: 400;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: left;
}
body.before #header #lbHeaderH2 {
  font-size: 24px;
  padding-bottom: 10px;
}
body.after #header #headertext {
  text-align: left;
  color: #fff;
  font-size: 32px;
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  padding-bottom: 40px;
}

body.error #header #headertext {
  font-weight: 500;
  font-size: 20px;
  color: #fff;
}
body.before #lbHeaderP span,
body.after #lbHeaderP span,
body.error #lbHeaderP span {
  font-size: 22px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
}
body.after #lbHeaderP {
  font-weight: 600;
}
body.before #lbHeaderP {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0em;
  text-align: center;
  color: #fff;
}
.before #MainPart_divProgressbarBox_Holder_LastUpdateTime,
.before .warning-box {
  display: none;
}
.footer-desktop {
  display: block;
}
.footer-mobile {
  display: none;
}
body.after #header #lbHeaderH2,
body.error #header #lbHeaderH2 {
  font-size: 32px;
  color: #fff;
}
body.after #header {
  padding-bottom: 10px;
}
body.after #lbHeaderP,
body.error #detailExpander,
body.error #lbHeaderP {
  font-weight: 600;
  font-size: 18px;
  color: #fff;
}
.before .before-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.before-container > div:nth-child(2) > img {
  max-width: 80%;
  display: block;
  margin: 0 auto;
}
.queue .before-container > div:nth-child(2),
.after .before-container > div:nth-child(2),
.error .before-container > div:nth-child(2) {
  display: none;
}
.after .before-container,
.after .before-container {
  display: block;
}
.before-container {
  margin-bottom: 0;
  text-align: center;
}
.before-container img {
  width: 70%;
  height: auto;
  margin: 0 auto;
}
.before .before-container > div:nth-child(1) > img,
.before .before-container > div:nth-child(2) > img {
  width: 100%;
  max-width: 90%;
}

.before-container > div:nth-child(1) > span {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  margin: 20px 0;
  display: flex;
  gap: 10px;
  line-height: 28px;
  color: #fff;
}
.before-container div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  text-align: center;
  /* padding-bottom: 20px; */
}
.before .before-container div:nth-child(1),
.before .before-container div:nth-child(2) {
  width: 50%;
}
.before-container #date,
.before-container #city {
  font-size: 42px;
  font-weight: 600;
}
.before-container #date {
  color: #fff;
}
.before-container #city {
  color: #371a0a;
}
.before-container #location {
  font-size: 18px;
  color: #fff;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.before-container > div:nth-child(1) > div {
  padding: 20px 0;
}
.before-container #location > img {
  height: 22px;
  width: auto;
}
.main-container > div {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  margin: 20px 0;
  display: flex;
  gap: 10px;
  line-height: 28px;
  color: #fff;
  margin-bottom: 0;
}
#arena {
  margin-top: 5px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#black {
  color: #000;
}
#mobile {
  display: none;
}
@media screen and (max-width: 1024px) {
  #wrapper {
    gap: 40px;
  }
}
@media screen and (max-width: 780px) {
  .before .before-container div:nth-child(1),
  .before .before-container div:nth-child(2) {
    display: none;
  }
  .before-container #date,
  .before-container #city {
    font-size: 36px;
  }
  .progressbar {
    height: 23px;
  }
  .progressbar .progress .runner,
  .progressbar .progress .runner.paused {
    margin-top: 3px;
    width: 17px;
    height: 17px;
    margin-right: 3px;
  }
  .footer-desktop {
    display: none;
  }
  .footer-mobile {
    display: block;
  }
  #toppanel {
    height: calc(32px + 51px);
    /* margin: 0 24px; */
  }

  #rightpanel {
    width: 100%;
  }

  #wrapper {
    flex-direction: column;
    gap: 30px;
    margin: 0 24px;
    height: 100%;
  }

  #main {
    margin: 30px auto;
    width: 100%;
    margin-bottom: 0;
    margin-top: 40px;
  }

  #header #headertext {
    font-size: 16px;
  }

  #header {
    font-size: 20px;
  }
  .error #header {
    font-size: 18px;
  }
  #main .c {
    width: auto;
    padding: 0 24px;
  }

  #whatisthis {
    font-size: 12px;
  }

  .processbar-box .holder .larger {
    font-size: 14px;
    font-weight: 400;
  }

  #MainPart_divProgressbarBox_Holder_LastUpdateTime,
  #footer-direct-link,
  #hlLinkToQueueTicket2Text {
    font-size: 12px;
  }

  #footer-direct-link {
    text-align: left;
  }

  #footer {
    margin: 0;
  }
  .main-container div {
    display: none;
  }
  #black {
    display: block;
    color: #000;
  }
  #mobile {
    display: block;
    text-align: center;
    margin-bottom: -3px;
    width: 80%;
    margin: 0 auto;
  }
  #mobile img {
    width: 100%;
  }
  .queue .before-container > div:nth-child(1),
  .after .before-container > div:nth-child(1),
  .error .before-container > div:nth-child(1) {
    display: none;
  }
}

@media screen and (max-width: 540px) {
  body {
    min-height: 1785px;
    background-image: url(bgFooter01.png), url(bg-luan-rh-rj-1.png);
    background-size:
      250px auto,
      cover;
    background-position:
      center bottom 100px,
      center;
    background-attachment: scroll, scroll;
  }

  body.before,
  body.after,
  body.error {
    background-image: url(bgFooter01.png), url(bg-luan-rh-rj-1.png);
  }

  .logo {
    margin-top: 20px;
  }
  .logo img {
    filter: drop-shadow(0px 0px 4px #000);
  }
  .before-container {
    flex-direction: column;
  }
  .before-container > div:nth-child(1) > span {
    min-height: 0;
  }
  body.queue #lbHeaderH2 > span,
  body.before #lbHeaderH2 > span {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
  }
  body.before #header #headertext {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0em;
    padding: 0;
  }

  body.before #lbHeaderP,
  body.after #lbHeaderH2 {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0em;
    text-align: left;
  }
  body.after #header #headertext {
    color: #fff;
    padding-bottom: 0;
  }
  body.after #headerparagraph {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
  }
  body.after #header {
    padding-bottom: 0;
  }
  body.before #header #lbHeaderH2 {
    font-size: 12px;
    padding-bottom: 10px;
  }
  body.after #header #lbHeaderH2,
  body.error #header #lbHeaderH2 {
    font-size: 20px;
  }
  body.error #header #lbHeaderP {
    font-size: 18px;
  }
  .progressbar {
    height: 23px;
  }
  #wrapper {
    flex-direction: column;
    padding: 0;
    margin-bottom: 30px;
    padding-bottom: 50vh;
  }
  .error #main {
    margin-top: 150px;
  }
  .footer-img img {
    width: 100%;
    max-width: 248px;
  }
  .footer-desktop {
    display: none;
  }
  .footer-mobile {
    display: block;
  }
  #footer-disclaimer {
    font-size: 16px;
    line-height: 1;
  }

  .error #main-top::before {
    margin-top: 0;
  }
  .erro #main {
    margin-top: 0;
  }

  .reminder-form .item-input,
  .btn {
    width: 100%;
    text-align: center;
    max-width: none;
  }

  #main-top-message {
    display: none;
  }

  .processbar-box .holder .larger {
  }

  #footer {
    /* margin: 20px; */
  }

  #footer .by {
    display: block;
    margin: 5px auto 0;
    float: none;
  }

  #footer .by a {
    text-align: center;
  }

  #footer-queueit-link,
  #footer-direct-link {
    /* text-align: center; */
    float: none;
  }

  #language-selector {
    text-align: center;
    padding: 0 0 15px 0;
  }
  .main-container {
    width: 100%;
  }
}

/* Desktop Big */
@media screen and (min-width: 1800px) {
  body {
    background-size: 100% 100%;
  }
}