@font-face {
    font-family: 'Helvetica Neue Black Condensed';
    src: url('helvetica-neue-black-condensed.woff2') format('woff2'),
         url('helvetica-neue-black-condensed.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

.helvetica-nue{
  font-family: 'Helvetica Neue Black Condensed' !important;
}

#chat-room{
   font-family: 'Helvetica Neue Black Condensed' !important;
}
#chat-room {
  position: relative;
}

#chat-room .reply-form{
  display: none;
}

.highlighed{
  background-color: var(--secondary-color);
  color: color-contrast(var(--secondary-color) vs white, black);
}

.show-reply-input{
  display: flex !important;
  align-items: stretch;
}

#nextGame-modal-popup .chat-header .top{
  flex-flow: wrap;
  justify-content: center;
}

#chat-input {
  padding: 30px;
  line-height: normal;
  overflow: hidden;
  font-weight: bold;
  width:100%;

height: 150px;
border: 1px solid #000;
padding: 30px;
overflow-y: auto;
outline: none;
white-space: pre-wrap;
border-radius: 10px;
text-align: left;
}

.editable-div {
      display: inline-block;
      min-height: 20px;
      padding: 5px;
      border: 1px solid #ccc;
}

/* Blinking effect */
    .editable-div.blink {
      caret-color: transparent;
      animation: blink 1s step-end infinite;
}

.qr-code-form input{
    font-size:20px;
}

@keyframes blink {
      50% {
        caret-color: transparent;
      }
}

.comment_reply{
  padding: 0 15px;
}

.chat-header .top {
  display: flex;
  align-items: center;
  width: 100%;
}

.chat-header .top p{
  margin: 0;
  padding: 0;
  line-height: normal;
  font-size: 16px !important;

}

.flex{
  display: flex;
  width: 100%;
}


.flex-wrap{
  flex-flow: wrap;
}



#chat-room select:focus,
.chat-header .comment-filters {
  outline: none;
}

.chat-header .comment-filters {
  margin: 0;
  line-height: normal;
}

.comment-filters {
  font-size: 15px !important;
  font-family: 'Helvetica Neue Black Condensed' !important;
  font-weight: bold;
  padding: 0 15px !important;
  line-height: normal;
}

.message-count {
  display: inline-block;
  font-size: inherit;
  margin-left: 2px;
}



#chat-room .controls {
  position: absolute;
  width: 100%;
  bottom: 45px;
}

#comments .controls {
margin-bottom: 10px;
}

#chat-messages {
  text-align: left;
  padding-bottom: 35px;
  overflow-y: visible;
      display: flex;
    flex-flow: wrap;

}

#chat-messages .message {
  font-size: 16px;
  margin: 5px 0px 0px;
  width: 100%;
  padding-left: 27px;
}

#chat-messages .in-reply-to {
  padding-left: 30px;
  padding-right: 30px;
}

#send-message svg{
  fill:#000;
}

#chat-messages .in-reply-to .comment-btns{
  margin-top: 0;
}

#chat-messages .username {
  font-weight: 900;

  margin-top: 5px;
  margin-bottom:3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#chat-messages .username .inline-block {
  font-size: 15px !important;
}


.qr-code-form input::placeholder, .qr-code-form input::-webkit-input-placeholder, #send-message{
  font-family: 'Helvetica Neue Black Condensed' !important;
font-size: 30px;
text-align: center;
border:none !important;
outline: none;
background-color:transparent !important;
}



.message-content .qrcode-img{
  margin-right: 15px;
    vertical-align: text-top;
    float: left;
}

.message-content p{
	color:#010000;
}

#chat-messages .comment > div {
  width: 100%;
  justify-content: space-between;
}

.rq-code-preview{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:30px;
}

.rq-code-preview img{
    width: 275px;
    height: 275px !important;
}

 .preview-wrapper .icons{
	position:relative;
	top:-6px;
	margin-left: 20px;
}


.in-reply-to > div{
  justify-content: space-between;
  align-items: center;
}

#chat-messages .comment {
  color: var(--primary-color);
  margin-bottom:15px;
}

#chat-messages {
  text-align: left;
  overflow-y: auto;
  overflow-x: hidden;
}

.inline-flex{
  display: inline-flex;
}

.message_replies {
  padding-left: 5px;
  margin-left: 7px;
  position: relative;
}

.message_replies .text{
  margin-top: 5px;
}

#chat-messages .comment-btns div[class*="-btn"]{
  cursor: pointer;
  font-size: 16px;
  font-weight: bold !important;
  display: flex;
  align-items: center;
}

#chat-messages .reply-username, #chat-messages .username .inline-block{
  font-weight: bold;
}

.reply-form input[type="text"]{
  padding: 0 10px;
  height: 30px;
}

.reply-form input::placeholder, .reply-form ::-webkit-input-placeholder {
  font-family: Roboto;;
  padding-left: 15px;
  font-size: 12px !important;
  font-weight: bold;
}

.message_replies:after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.message_replies .hyphen {
  width: 12px;
  margin-right: 5px;
  display: none;
}

#chat-messages .comment iframe {
  height: 218px;
  border-radius: 10px;
  width: 100%;
}

#chat-messages .reply-input {
  display: none;
}

.chat-header{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content:space-between;
}

.chat-header > .flex {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.line-height-normal{
  line-height: normal !important;
}

#chat-messages .reply-icon, #chat-messages .icon {
  height: 16px;
  width: 15px;
  fill: none;
  margin-right: 5px;
  vertical-align: middle;
  position: relative;
  top: -3px;
}

#chat-messages .reply-username {
  font-size: 16px;
}

#chat-messages .reply-username .inline-flex{
  line-height: normal;
}

.gap-10px {
  gap: 10px;
}

.gap-30px {
  gap: 30px;
}

.comment-btns {
  font-family: "Helvetica";
  margin-left: 15px;
  justify-content: space-between;
}

.comment-btns .share-btn {
  position: relative;
  cursor: pointer;
 
}

.shared-comment-link {
  display: none;
  background-color: #fff;
  position: absolute;
  top: 100%;
  font-size: 12px;
  padding: 5px 6px;
  box-shadow: 1px 1px 5px 2px #ccc;
}

.comment-btns .social-share{
  display: flex;
  gap: 10px;
  align-items: center;
}

.shared-comment-link  svg{
  width: 15px;

}

.shared-comment-link{
  z-index: 100;
}

.comment-btns .social-share a{
  color:var(--primary-color);
  font-size: 14px;
}

.parent_comment_reply > .comment-btns{
  margin-top: 3px;
}

.message-reply .comment-btns {
  margin-top: 7px;
  justify-content: space-between;
}

.comment-btns span.shared-comment-link{
  font-size: 14px;
}

.comment-btns .shared-comment-link svg {
  width: 20px;
  vertical-align: middle;
  margin-top: -2px;
}

.emoji-dropdown-container {
  display: inline-block;
}
.emoji-dropdown-toggle {
  font-size: 24px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  height: 100%;
  background-color: transparent !important;
}
.emoji-dropdown-list {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1;
  width: 100%;
  left: 0;
  top: -200px;
}
.emoji-category {
  margin-bottom: 10px;
}
.emoji-category h4 {
  font-size: 14px;
  margin: 5px 0;
}
.emoji {
  display: inline-block;
  font-size: 20px;
  padding: 5px;
  cursor: pointer;
}
.emoji:hover {
  background-color: #eee;
  border-radius: 5px;
}

.full-width {
  width: 100%;
  position: relative;
}

#nextGame-modal-popup #chat-messages {
  height: 556px;
}



.imgdropdown {
  position: relative;
  display: inline-block;
  background-color: #fff;
  color: var(--primary-color);
  white-space: nowrap;
}

.dropdown-button li{
    list-style: none;
    display: flex;
    align-items: center;
  
}

.imgdropdown ul{
  list-style: none;
}

.imgdropdown .dropdown-options{
  overflow-y: auto;
  height: 250px;
}

.dropdown-button {
  background-color: #fff !important;
  border: 0;
  padding: 0 10px;
  cursor: pointer;
  color: var(--primary-color);
  font-family: "Bebas Neue";
  font-weight: bold;
  font-size: 16px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  outline: none;
}

.dropdown-options {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  z-index: 10000;
}

.dropdown-options li {
  padding: 0 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: "Bebas Neue";
    font-weight: bold;
}

.game-schedule-dropdown span.icon{
  width: 100%;
  height: 100%;
  display: inline-flex;
  padding: 3px;
  align-items: center;
}

.game-schedule-dropdown span.vs{
  margin: 0 10px;
}

.game-schedule-dropdown .date-txt{
  display: inline-block;
  margin-right: 15px;
}

.dropdown-button:focus-visible{
  outline: none;
}

.dropdown-options li img, .dropdown-button img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  object-fit: fill;
}

.dropdown-options li:hover {
  background-color: #f0f0f0;
}

.imgdropdown .dropdown-button:after{
  font-family: 'Font Awesome 6 Free' !important;
  content:'\f078';
  font-size: 14px;
  padding-left: 5px;
  font-weight: bold;
  color:var(--primary-color);
}

.chat-header .top{
  flex-flow: wrap;
}

.form-inputs{
  justify-content: space-between;
	margin-top:10px;
}

.form-inputs .name::placeholder, .form-inputs .name::-webkit-input-placeholder{
	color:#979797;
}
.form-inputs .email::placeholder, .form-inputs .email::-webkit-input-placeholder{
	color:#717171;
}

.form-inputs .link::placeholder, .form-inputs .link::-webkit-input-placeholder{
color:#474747;
}

#send-message{
	color:#474747;
}

.form-inputs input, .form-inputs button, .form-inputs input:focus, .form-inputs input:focus, .form-inputs input:focus-visible, .form-inputs input:-internal-autofill-selected  {
color:#474747;
background-color: transparent !important;
font-family: 'Helvetica Neue', sans-serif !important;
font-weight: 900  !important;
 margin: 0 !important;
 text-align: center;
 font-size: 20px !important;
}

.nfl-chat-controls{
  width: 100%;
}

.fullheight-section {
    height: 100vh; /* Full viewport height */
    opacity: 0; /* Initially hidden */
    transition: opacity 1s ease-in-out; /* Fade-in transition */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-flow: column;
    width: 100%;
}

.fullheight-section.visible {
    opacity: 1; /* Section becomes visible */
}


.fullheight-section h3{
	 font-family: 'Helvetica Neue Black Condensed' !important;
	font-weight:900;
}

html {
    scroll-behavior: smooth; /* Smooth scrolling */
}


.preview-wrapper{
  display: flex;
  align-items: baseline;
}

.preview-wrapper svg{
	width:50px;
	height:50px;
	stroke-width: 0.8;
}

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

.form-inputs button:hover{
  background-color: transparent;
}

.form-inputs input::placeholder, .form-inputs input::-webkit-input-placeholder {
      color:#474747; /* Change to any color */
      opacity: 1; /* Ensure full visibility */
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 900;
}


.qr-code-form input{
  width: 100%;
}

.pagination{
	margin: 0 auto;
    display: flex;
    align-items: center;
    width: 100%;
}

.pagination .page-numbers{
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0;
    color: #000;
    align-items: center;
    text-align: center;
    margin: 0 auto;
	text-transform:none !important;
	text-decoration:none !important;
	padding: 0 10px;
}

.pagination .page-numbers.current{
	background: #e12b2b;
    text-align: center;
    padding: 0 10px;
    color: #fff !important;
}

.main-content-background{
	margin-top:0 !important;
	padding-top: 0 !important;
}

#header-section, #ut-custom-contact-section{
	display:none;
}

.form-inputs input::placeholder, .form-inputs input::-webkit-input-placeholder{
font-family: 'Helvetica Neue Black Condensed' !important;

}


@media screen and (max-width: 767px) {
  .qr-code-form input{
    border:0 !important;
    outline: 0;
    margin-top: 10px !important;
	  width:100%;
  }
	
.form-inputs{
		width:100%;
}

 .preview-wrapper{
    flex-flow: wrap;
    justify-content: center;
  }
	

	
.fullheight-section h3{
	font-size:30px !important;
}

#chat-messages .comment{
    width:100%;
}

}

@media screen and (min-width: 768px) {

.form-inputs input, .form-inputs button{
  width: 25%;
  background-color: transparent;
  border: 0 !important;
}
	
#chat-messages .comment {
  width: 50%;
}

.form-inputs input::placeholder, .form-inputs input::-webkit-input-placeholder, .form-inputs button {
  font-size: 20px;
}

.sm-flex{
  display: flex;
  width: 100%;
}
	
.sm-fs-55{
	font-size:55px !important;
}

}