header {
  position: sticky; 
  top: 0px; 
  margin-bottom:0px; 
  z-index:1000;
  }
/* nav a:js-active {
  color: #212427;
  } */
/* li {list-style: none;} */
a {text-decoration: none;}
/* a:link { color:#212427; text-decoration: none; }
a:visited { color:#212427; text-decoration: none; }
a:hover { color:#BF3143; } */


/* Localization secion START*/
/* .localization {background-color: #ffffff;
top: 0;
left: 0;
text-align: right;
padding: 0rem;
font-size: .9rem;
color: #333333;
} */

.localization {background-color: #ffffff;
top: 0;
left: 0;
text-align: right;
padding: .1rem 0 0 0;  font-size: .9rem;
color: #333333;
border:0px solid purple;
}



.account-info-bar .float-right {display: flex; align-items: center;  font-size: 14px; background-color: white; border:0px solid purple; display:flex; align-items: center; justify-content: flex-end; padding: .1rem 0.5rem 0 0; height:22px;} 





.statusicon {display: flex; align-items: center;}
.account-data {margin-right:.2rem;margin-left:.2rem;}
.top-username {color:#BF3143;
display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
border:0px solid blue;
margin-right: .2rem; margin-left: .2rem;
}

.top-username a {color:#BF3143; cursor: pointer; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.account-info-bar a {color:#BF3143; font-weight: 500; text-decoration: none;
}
.account-info-bar a:hover {color:#992635;}
.account-info-bar a:visited {color:#BF3143;}


.account-data {margin-right:.2rem;margin-left:.2rem;}
.clickable {cursor:pointer; text-align: center;}
.clickable-color {color:#BF3143;cursor:pointer; text-align: center;}
.account-logout-button {}
/* Account secion END*/

/* Nav secion START*/
.horizontal-line {border-bottom:1px solid lightgray; border-top:1px solid lightgray; padding-top: .3rem; padding-bottom: .3rem; background-color: white;}
.navbar {
display:flex;
justify-content: space-between;
align-items: center;
}
.header-logo {margin-left: 1rem;}
.nav-menu {
display: flex;
align-items: center;
}

.nav-item {margin: 0rem 1rem; line-height: 1.3;     
}

.nav-link {
display: flex;
align-items: center;
font-size: 1rem;
font-weight: 320;
}

.nav-link:hover{color: #BF3143;}
.nav-link.js-active{font-weight: 400;color: #BF3143;pointer-events:none;}
.hamburger {display: none;}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #798897;
}

.in-progress-menu { border:0px solid red; color: #488474; font-weight: 600; padding:0.1rem .2rem; border-radius: 4px; font-size: .6rem; border:1.5px solid #488474; margin-left: 4px; background-color: #488474; color: white; }

.beta-menu { font-weight: 600; padding:0.1rem .2rem; border-radius: 4px; font-size: .6rem; border:1.5px solid #BF3143; margin-left: 4px; background-color: #BF3143; color: white;}


/* added for new home May 21 */



.chatMenuItem.tryforfree {border-radius: 6px; color: white; text-align: center;  cursor: pointer; outline: none; width: auto; padding:.5rem .8rem; background-color: #212427; } 

/* .chatMenuItem.tryforfree.nav-link:hover {background-color: #404040; }  */

.trybutton:hover {background-color: #404040;}


/* Nav secion END*/

.chatsRemaining {border: 0px solid red; padding: 0 .2rem;}
.topRemMessage {border: 0px solid red; padding: 0 .2rem;}
.subsMessage {border: 0px solid red; padding: 0 .2rem;}

.maxwidth1 {border: 0px solid red;}

.maxwidth3 {border: 0px solid green;}

.top-username {color:#BF3143;
display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
border:0px solid blue;
margin-right: .2rem; margin-left: .2rem;
}

.maxwidth2 {border: 0px solid red; display: inline-block; margin-right: .2rem;}



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

.nav-menu {width: 9rem; padding-bottom: .3rem; padding-top: .3rem;}

  .nav-menu.js-active {right: 0;}
  .nav-item {margin: .7rem;}
  .hamburger {display: block;cursor: pointer; margin-right:.5rem;}
  .hamburger.js-active .bar:nth-child(2) {opacity: 0;}
  .hamburger.js-active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
  .hamburger.js-active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
  .nav-menu {
  position: fixed;
  right: -100%;
  top: 55px;
  margin-right: .6rem;
  margin-left: .2rem;
  padding-left:0px;
  flex-direction: column;
  background-color: #fff;
  width: 30%;
  border-radius: 2px;
  transition: 0.3s;
  border:1px solid lightgray;
  box-shadow: 0 2px 2px #808080;
  z-index: 2;
  }
.sticky-message-box {width: auto;}
.navbar {padding-right: .8rem;}
.nav-menu.js-active {right: 0;}
.nav-item {margin: .65rem; border:0px solid red;}
.hamburger {display: block;cursor: pointer;}
.hamburger.js-active .bar:nth-child(2) {opacity: 0;}
.hamburger.js-active .bar:nth-child(1) {transform: translateY(8px) rotate(45deg);}
.hamburger.js-active .bar:nth-child(3) {transform: translateY(-8px) rotate(-45deg);}
.nav-menu {width: 9rem; padding-bottom: .5rem;}

}


@media only screen and (max-width: 530px) {
.account-info-bar .float-right {padding: 0 0.2rem 0 0; height:22px;} 

.top-username {
  max-width: 100px; }
.top-username.plus {max-width: 215px;}

}

@media only screen and (max-width: 430px) {
.hamburger {border:0px solid red;margin-right:0; }
.account-info-bar .float-right {padding: 0 0.2rem 0 0; height:22px;} 

.top-username {
  max-width: 70px; }
.top-username.plus {max-width: 215px;}  

.maxwidth2 {border: 0px solid red; display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
margin-right: .2rem; margin-left: .2rem;
max-width: 50px;
}  

.maxwidth3 {border: 0px solid orange; display: inline-block;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis;
margin-right: .2rem; margin-left: .2rem;
max-width: 80px;
}   

}


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

.top-username {
  max-width: 40px; }


}