body {
    background-color: #19354b;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    width: 100%;
}

#chatroom {
    flex-direction: column;
}

#chatroom, #header, #footer, #chatlobby, #lobbyheader, #lobbyfooter {
    display: flex;
    padding: 0;
}

#header {
    height: 65px;
    border-bottom: 1px solid #EAEEEF;
    align-items: center;
    margin: 0 !important;
    padding-left: 10px;
    padding-right: 20px;
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #19354b;
    z-index: 2500;
    justify-content: space-between;
}


body::-webkit-scrollbar, #searchbody::-webkit-scrollbar {
    display: none;
}

#sentmsg {
    overflow-wrap: anywhere;
}

.sentmsg {
    max-width: 93%;
    object-fit: cover;
}

img {
    max-width: 100%;
}

#chatmessages {
    margin-top: 60px;
    margin-bottom: 65px;
    width: 95%;
    padding-left: 10px;
    padding-right: 50px;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.msgsender {
    color: white;
    font-size: 17px;
    margin-top: 8px;
}

#msgcontainer {
    margin-top: 7px;
    margin-bottom: 7px;
    margin-left: 15px;
}

.msgbubble{
    background-color: #bde1eb;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    
	position: relative;
		
	padding: 0.5em 0.8em;
	font-size: 1.1em;
	border-radius: 1rem;
    box-shadow:	0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);

    margin-left: 15px;
    margin-top: 5px;
	width: auto;
    overflow-wrap: anywhere;
    object-fit: cover;
}

#footer {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: #008000;
    width: 100%;
    height: 65px;
    flex-direction: row;
    z-index: 2500;
}

.whowhere {
    color: white;
    font-weight: 600;
    font-size: 25px;
    height: auto;
   margin-top: 10px;    
}

#usertext {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#menubar {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    right: 50px;
    cursor: pointer;
}

#chatbox {
    background-color: #401000;
    color: #eeeeee;
    font-size: 18px;
    border: none;
    flex: 1;
    margin-left: 20px;
    height: 60px;
    font-family: Arial, Helvetica, sans-serif;
}

#xsend, #xrecord, #xshh {
    margin-left: 5px;
}

#rec-btn, #stop-btn, #stop-btng {
    width: 15px;
}

#sendbtn {
    width: 25px;
}

#globeicon {
    width: 25px;
}

#tagsicon {
    width: 33px;
}

#btns {
    display: flex;
    flex-direction: row;
}

#globebtndiv, #recbtndiv, #sendbtndiv, #tagsdiv {
    width: 50px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#sendbtndiv {
    margin-right: 10px;
}

#gnoptions {
    display: none;
    width: 300px;
    background-color: #0d2131;
    z-index: 2999;
    position: fixed;
    right: 20;
    top: 80px;
    color: white;
    padding-top: 35px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 35px;
}

#gnoptionsright {
    display: none;
    height: 100%;
    width:  100%;
    z-index: 2000;
    position: fixed;
    left: 0;
    top: 0;
    bottom:0;
    right: 0;
    background-color: rgba(0, 0, 0, .8);
}

#menulist {
    display: none;
    height: 150%;
    width: 75%;
    background-color: #0d2131;
    z-index: 2999;
    position: fixed;
    right: 0;
    top: 0;
    bottom:0;
    color: white;
    padding-top: 35px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 35px;
    overflow: scroll;
}

#menulistleft {
    display: none;
    height: 150%;
    width: 25%;
    z-index: 2600;
    position: fixed;
    left: 0;
    top: 0;
    bottom:0;
    background-color: rgba(0, 0, 0, .8);
}

#menuheader {
    font-size: 30px;
    font-weight: 900;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid white;
    height: 40px;
}

#menubtnlidiv {
    position: fixed;
    right: 30px;
    top: 3%;
}

#chatter-list, #shoppinglist {
    display: none;
    font-size: 15px;
    line-height: 20px;
    flex: 1;
    margin-top: -10px;
    margin-left: 20px;
}

#shoppinglist {
    margin-top: 10px;
}

#olusers {
    font-size: 25px;
    margin-bottom: 5px;
}

#menubtns {
    position: fixed;
    right: 100px;
}

#menubtnlist {
    margin-top: -20px;
    display: inline-block;
}

#settingsicon {
    margin-top: -20px;
    margin-right: 10px;
    margin-left: 20px;
    display: inline-block;
}

#settingsiconlist {
    position: fixed;
    right: 30px;
    display: inline-block;
}

#linkcopysuccessdiv {
    width: 300px;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 10px;
    position: fixed;
    bottom: 40;
    left: 50%;
    right: 50%;
    text-align: center;
}

#clistbtn, #archivechats, #clearhist, #chathistory {
    font-size: 15px;
    background-color: white;
    border: none;
    border-radius: 10px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

#invitepage{
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

#cnptxt, #newpasstext, #usertext {
    color: white;
}

#newpasstext, #chatpwinvite, #usertext, #chatuserinvite, #chatpwinvite1 {
    font-size: 20px;
}

#chatpwinvite {
    margin-bottom: 20px;
}

#chatpwinvite, #chatuserinvite , #chatpwinvite1 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    display: inline;
    text-align: center;
}

#showpass, #passwordsubmit {
    font-size: 18px;
}

#cnptxt {
    font-size: 40px;
    margin-bottom: 20px;
}

#pwdiv, #userdiv {
    text-align: center;
}

#inviteform {
    margin-top: 7%;
}





#loginpage, #signuppage {
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;

}

#loginform, #signupform {
    width: 350px;
    margin: auto;
    margin-top: 7%;
}

#logintxt, #signuptxt {
    font-size: 50px;
    font-weight: 900;
    color: white;
    text-align: center;
    margin-bottom: 15px;
}

#divider {
    color: white;
    font-size: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#nickname, #chatpw {
    font-size: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    display: inline;
    width: 150px;
    text-align: center;
}

#nickname {
    text-align: center;
    margin-bottom: 15px;
}

#chatpw {
    font-family: 'password';
    text-align: center;
}

#nickname-submit, #showpasslogin  {
    font-size: 12px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

#loginbtns {
    width:250px !important; 
    margin: auto;
    display:flex; 
    flex-direction:row; 
    justify-content: space-evenly;
}

#eyebtn {
    width: 65px;
    height: 50px;
    margin-top: 5px;
    margin-left: 10px;
    display: inline;
    background: url(images/eye.png);
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    background-position: center;
}

#pwdiv, #userdiv {
    display: flex;
    flex-direction: row;
}

#recdiv {
    background-color: #19354b;
    z-index: 1999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
}

#recopen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 80px;
}

#clistbtn:hover, #archivechats:hover, #clearhist:hover, #chathistory:hover {
    opacity: 80%;
}

#clistbtn:active, #archivechats:active, #clearhist:active, #chathistory:active {
    font-size: 15px;
    background-color: #19354b;
    border: 1px solid white;
    border-radius: 10px;
    padding: 9px;
    padding-left: 14px;
    padding-right: 14px;
}


#chatlobby {
    flex-direction: column;
}

#lobbyheader {
    height: 85px;
    border-bottom: 2px solid #EAEEEF !important;
    align-items: center;
    margin: 0 !important;
    padding-left: 10px;
    padding-right: 20px;
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #19354b;
    z-index: 999;
    color: white;
    justify-content: space-between;
}

#backtomain {
    width: 25px !important;
    position: fixed;
    right: 75%;
    top: 30px;
    bottom:0;
    cursor: pointer;
}

#imess {
    font-weight: 900;
    font-size: 20px;
}

#messageicon {
    width: 50px;
    height: 50px;
    margin-left: 70px;
    margin-top: 19px;
}

#friendsicon {
    width: 40px;
    height: 40px;
    margin-right: 70px;
    margin-top: 21px;
}

#lobbyfooter {
    position: fixed;
    bottom: 0;
    left: 10;
    right: 0;
    background-color: #EAEEEF;
    width: 100%;
    height: 85px;
    flex-direction: row;
    justify-content: space-between;
}

#chatdiv {
    margin-top: 82px;
    margin-bottom: 78px;
}

#chatcontainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f3f3f3;
    height: 65px;
    margin-left: -10px;
    margin-bottom: 3px;
    padding-left: 20px;
    padding-top: 15px;
    line-height: 25px;
}

#chatwith {
    font-weight: 600;
    font-size: 18px;
}

#chatboxmsg {
    font-size: 14px;
    color: #8d8d8d;
}

#searchdiv {
    position: fixed;
    top: 90px;
    width: 78%;
    bottom: 0;
    right: 0;
    background-color: #0d2131;
    z-index: 1999;
    margin-left: -10px;
    color: white;
    font-size: 20px;
    padding-left: 15px;
    padding-top: 10px;
    padding-bottom: 25px;
    line-height: 30px;
    display: none;
}

#searchinput {
    width: 70%;
    font-size: 18px;
    border-radius: 5px;
    border: none;
}

#searchblank, #usernexist {
    display: none;
    margin-top: 10px;
}

#oline {
    font-size: 25px;
    padding-top: 5px;
    font-weight: 600;
    margin-bottom: -10px;
    margin-left: 10px;
}

#addfriendicon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}

#useravaillist {
    display: flex;
    flex-direction: row;
    padding-bottom: 5px;
    border-bottom: 1px solid white;
    justify-content: space-between;
    width: 40%;
    margin-top: 10px;
}

#useravail {
    margin-left: 10px;
}

#contactlist {
    background-color: #0d2131;
    z-index: 4999;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#settingsdiv {
    background-color: #0d2131;
    z-index: 4999;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#clearstylesdiv, #changespchbbl {
    margin-top: 10px;
}

#custombackgrounddiv {
    margin-top: 10px;
}

#custombackgrounddiv, #custombubblediv, #customhrefcolordiv, #clearstylesdiv {
    margin-bottom: 25px;
    padding-left: 20px;
    display: none;
    font-weight: 600;
}



#custombubblediv {
    margin-top: 10px;
}

#custombubblebgdiv, #customfontcolordiv, #customfonesizediv, #customhrefcolorinputdiv {
    margin-top: 10px;
}

#contactheader {
    height: 55px;
    display: flex;
    display: row;
    padding-top: 25px;
    padding-left: 20px;
    border-bottom: 2px solid white;
}

#settingsheader {
    height: 100px;
    display: flex;
    display: row;
    padding-top: 25px;
    padding-left: 20px;
}

#settingsbody {
    position: fixed;
    top: 80px;
    bottom: 0;
    left: 0;
    right: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background-color: #f3f3f3;
    z-index: 6999;
    padding-top: 30px;
    overflow-y: scroll;
}

#conheadtext {
    color: white;
    font-size: 25px;
    margin-left: 20px;
    font-weight: 600;
}

#setheadtext {
    color: white;
    font-size: 25px;
    font-weight: 600;
}

#contactbox {
    width: 100%;
    height: 65px;
    background-color: #EAEEEF;
    font-size: 20px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
}

#lobbywho {
    margin-left: 20px;
    cursor: pointer;
}

#status_image {
    margin-left: 15px;
    margin-top: 10px;
}

/*Landing Page*/
#headerdiv {
    background-color: #0d2131;
    color: #f3f3f3 ;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    font-size: 25px;
    padding-left: 25px;
    padding-top: 40px;
    font-weight: 600;
    display: flex;
    flex-direction: row;
}

#contacttext {
    margin-right: 10px;
    cursor: pointer;
}

#grouptext {
    margin-left: 10px;
    cursor: pointer;
}

#landingsearchicon {
    width: 25px;
    position: fixed;
    right: 30;
}

#bodydiv {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding-top: 15px;
    background-color:#f3f3f3;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow-y: scroll;
}

#grouplist {
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    padding-top: 15px;
    background-color:#f3f3f3;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow-y: scroll;
    display: none;
}

.newfr {
    background-color: #0d2131;
    color: white;
    padding-left: 20px;
    width: auto;
    border: 1px solid #f3f3f3;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 25px;
}

#acceptfr {
    margin-left: 10px;
}

#declinefr {
    margin-left: 10px;
}

.persondiv, .groupdiv {
    font-size: 18px;
    color:#0d2131;
    border-bottom: 1px solid #0d2131;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.groupdiv {
    text-decoration: none;
}

.perlistdiv {
    font-size: 18px;
    color:#0d2131;
    border-bottom: 1px solid #0d2131;
    padding-left: 20px;
    padding-bottom: 20px;
    padding-top: 20px;
}

.statusimg {
    width: 25px;
}

.landingstatus {
    width: 20px;
    margin-left: 5px !important;
}

#unreadmsg {
    padding-left: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    background-color: rgb(139, 9, 9);
    color: white;
    border-radius: 10px;
    font-size: 15px;
    margin-left: 10px;
    margin-top: -20px !important;
}

#menuoptdiv {
    line-height: 40px;
    overflow-y: scroll;
}

#menuoptdiv::-webkit-scrollbar{
    display: none;
}

.menuoptlist {
    font-size: 20px;
    border-bottom: 1px solid rgb(255, 255, 255, 0.5);
    padding: 10px;
    cursor: pointer;
}

#clearhistory {
    border-bottom: none;
}

#invitecontactdiv, #privkeydiv, #userpassdiv, #logoutbtn, #deffiatdiv, #customdiv, #bkrestbtn {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #0d2131;
}

#contactlistcont, #groupmemberscont {
    display: none;
    line-height: 30px;
}

#groupmemberscont{
    border-bottom: 1px solid white;
    margin-top: 10px;
    /* margin-bottom: 10px; */
}

.availdiv {
    margin-top: -3px;
    margin-bottom: -3px;
}

.availspan {
    font-size: 15px;
}

#privkeytext, #userpasstext, #logoutbtn, #deffiattext, #customtext, #bkrestbtn {
    font-size: 20px;
    padding-left: 20px;
    cursor: pointer;
}

#logoutbtn {
    border-bottom: none;
}

#invitecontactinputdiv, #privkeyinputdiv, #userpassinputdiv, #deffiatinputdiv {
    display: none;
    padding-top: 10px;
    text-align: center;
}

#privkeyinput, #pubkeyinput {
    font-size: 18px;
    width: 90%;
}

#userinput, #userdiv, #passdiv, #passinput, #deffiatinput {
    font-size: 18px;
}

#passdiv {
    margin-top: 10px;
}

#pkupdatebtn, #pknewkeysbtn, #userbtn, #showpassbtn, #passbtn, #pkclearkeysbtn, #deffiatbtn,#changebgcolorbtn, #changespchbbl, #removestylebtn, #hrefcolorbtn {
    border: 1px solid #0d2131;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 16px;
    border-radius: 20px;
    background-color: #f3f3f3;
    margin-right: 20px;
    margin-top: 10px;
}

#pkupdatebtn:hover, #pknewkeysbtn:hover, #userbtn:hover, #showpassbtn:hover, #passbtn:hover, #pkclearkeysbtn:hover, #changebgcolorbtn:hover, #changespchbbl:hover, #removestylebtn:hover {
    opacity: 80%;
}

#pkupdatebtn:active, #pknewkeysbtn:active, #userbtn:active, #showpassbtn:active, #passbtn:active, #pkclearkeysbtn:active, #changebgcolorbtn:active, #changespchbbl:active, #removestylebtn:active {
    border: none;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 16px;
    border-radius: 20px;
    background-color: #0d2131;
    color: white;
}

#friendnncont {
    position: relative;
    top: -10;
    bottom: 0;
    height: 100vh;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 4999;
}

#menubtns {
    position: fixed;
    top: 85%;
    right: 8%;
}

#scrolltobottom {
    width:35px; 
    height:35px; 
    position:fixed; 
    bottom:95px; 
    left:50%;
    transform:translateX(-50%); 
    background-color:white; 
    border-radius:50px; 
    display:flex; 
    justify-content:center; 
    color:black; 
    vertical-align: middle;
    line-height: 50px;
    align-items: center;
    z-index: 10000;
    border: 1px solid black;
    cursor: pointer;
}
#beatsdiv {
    display: none; /* Reinforce initial state */
    background: #fff; /* Optional: make it visible for debugging */
    padding: 10px; /* Optional: for visibility */
    position: relative;
    z-index: 3000; /* Ensure it's above other elements */

}

#recordpop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the element by offsetting it by half its own width and height */
    height: 70vh; /* 80% of viewport height */
    width: 80vw; /* 80% of viewport width */
    background-color: rgba(88, 33, 0, 0.9);
    display: none;
    z-index: 9999;
    display: flex; /* Added to use flexbox for centering */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
}

.instruction {
    color: white;
    font-size: 1.5em;
    margin-bottom: 20px; /* Space between instruction and mic container */
    text-align: center;
}

.mic-container {
    display: flex; /* Use flexbox for the microphone images and labels */
    justify-content: center; /* Center the containers horizontally */
    align-items: center; /* Center items vertically within container */
    gap: 70px; /* Space between the two microphone containers */
    height: auto; /* Adjusted to auto to prevent unnecessary stretching */
}

.mic-item {
    display: flex;
    flex-direction: column; /* Stack label and image vertically */
    align-items: center; /* Center items horizontally within each mic-item */
}

.mic-label {
    color: white; /* Adjust color as needed */
    font-size: 1.2em; /* Adjust size as needed */
    margin-bottom: 10px; /* Space between label and image */
}
#confoptionscont {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 2300;
}

#qrcont {
    position: fixed;
    top: -10;
    bottom: 0;
    left: 0;
    right: -30;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 2300;
}

#walletcont {
    position: fixed;
    top: -10;
    bottom: 0;
    left: 0;
    right: -30;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 2300;
}

#payprocessingcont, #searchingcont, #sellaltpayinvcont {
    position: fixed;
    top: -10;
    bottom: 0;
    left: 0;
    right: -30;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 2300;
}

#protocont, #protoaudiocont, #protoovccont {
    position: fixed;
    top: -10;
    bottom: 0;
    left: 0;
    right: -30;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 2300;
}

#walletreceivecont, #walletsendfriendcont, .walletcont {
    position: fixed;
    top: -10;
    bottom: 0;
    left: 0;
    right: -30;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    margin-left: -10px;
    display: none;
    z-index: 2400;
}
.notification {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            z-index: 1000;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
    
#tagoptions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 56%;
    background-color: #eeeeee;
    padding: 10px;
    overflow-y: scroll;
 z-index: 9999;
}

#walletoptions, #searching, #payprocessing, #protolist, #protolistaudio, #protolistovc, #sellaltpayinv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    background-color: #0d2131;
    padding: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
}

#audiocall, #inframecall, #videocall {
    cursor: pointer;
}

#confoptions {
    position: absolute;
    display: flex;
    flex-direction: column;
    color: white;
    top: 65px;
    right: 5px;
    background-color: #0d2131;
    padding: 20px;
    padding-left: 30px;
    padding-right: 30px;
    line-height: 45px;
    text-align: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#protolist, #protolistaudio, #protolistovc {
    display: flex;
    flex-direction: column;
    text-align: center;
}

#payprocessing {
    color: white;
}

#walletowner {
    text-align: center;
    color: white;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
}

#sendtext, #receivetext {
    text-align: center;
    color: white;
}

#sendfriend, #sendex, #sendsfriend, #buyalt, #sellalt, #buyaltbtn, #sellaltbtn {
    background-color: rgb(223, 11, 11);
}

#sendreqtochat, #createinvoice, #sendsreqtochat, #sellalt {
    background-color: rgb(31, 150, 61);
}

.receiveclass {
    background-color: white;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    padding-top: 7px;
    border: none;
    height: 50px;
    color: white;
}

/* #sendreqtochat {
    margin-top: -20px;
} */

#callbuttons {
    display: grid;
    /* flex-direction: column;
    justify-self: center; */
    position:fixed; 
    background-color: rgb(34, 34, 34); 
    padding-top: 10px;
    color: white;
    border: 1px solid white;
    width:212px; 
    height:50px; 
    top: 235px; 
    right: 170px;
    z-index: 5000;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#iframecont, #iframeptcont {
    display:flex; 
    justify-content: center;
}

#ifrconf {
    display:block; 
    resize: vertical !important;
    object-fit: cover;
    position:fixed; 
    height: 180px;  
    width:210px; 
    top: 0px; 
    right: 170px;
    margin-left:auto; 
    margin-right:auto; 
    z-index:5000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#ifrpopuptour {
    display:block; 
    resize: both !important;
    object-fit: cover;
    position:fixed; 
    height: 180px;  
    width:210px; 
    top: 65px; 
    left: 0px;
    margin-left:auto; 
    margin-right:auto; 
    z-index:5000;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#closeifrpt {
    display: none;
    position: fixed;
    top: 65px;
    left: 0px;
    width: 20px;
    height: 20px;
    background-color: #19354b;
    color: white;
    z-index: 5000;
    text-align: center;
    vertical-align: middle;
    line-height: 20px; 
}

#endcallbtn {
    width: 25px; 
    display:none;
}

#toggleaudiovid {
    width: 25px; 
    display:none;
    margin-left: 25px;
}

#ifrconf::-webkit-scrollbar {
    display: none;
  }

#walletreceivediv, #walletsendfrienddiv, .walletdiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    background-color: #0d2131;
    padding: 10px;
    z-index: 4999;
    border-radius: 20px;
    padding: 20px;
    padding-bottom: 20px;
    line-height: 30px;
}

#invoicebtns, #invoicesendbtns {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#walletsrtext {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 350px;
    color: white;
    margin-top: -20px;
}

#walletbtns {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    margin-top: 10px;
}

#satsamt {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: -10px;
}

#satbalwallet, #fiatbalwallet {
    color: white;
    font-size: 23px;
}

#sendqrbtn {
    margin:0 auto;
    margin-top: 20px;
    display:block;
    margin-top: 5px;
    background-color: #0d2131;
    border-radius: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 7px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: none;
    color: white;
}

#qrdiv {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 4999;
    border-radius: 20px;
    padding: 20px;
    line-height: 30px;
}

#walletreceivetext, #walletsendfriendtext, .wallettext {
    color: white;
}

#walletsendfriend, #walletsendreq, #walletsendex {
    margin-top: 10px;
    width: auto;
    color: white;
}

#invreqamount, #invsendamount, .inputamt {
    font-size: 20px;
    width: auto;
}

#invsendfriendamountsats, #invsendreqamountsats, #invsendexamountsats, #buyaltsats, #sellaltsats {
    width: 50%;
}

#buyaltsats {
    margin-right: 10px;
}

#sendsreqtochat {
    display: block;
    margin: auto;
    margin-top: 10px;
}

#sendsats, #receivesats {
    width: 160px;
    font-size: 23px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.optsbtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #ffffff; /* Updated to pure white for consistency */
    border: 1px solid #0d2131;
}

/* Ensure all optsbtn elements within tagoptionscont and tagoptions have a white background */
#tagoptionscont #tagoptions .optsbtn {
    background-color: #ffffff !important; /* Solid white to block any transparency */
    color: #000000 !important; /* Ensure text visibility */
    border: 1px solid #0d2131;
}

/* Specifically target textareabtng to ensure it has a white background */
#tagoptionscont #tagoptions #textareabtng {
    background-color: #ffffff !important;
    color: #000000 !important;
}

#uploadbtn {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #f3f3f3;
    border: none;
}

.optsbtn:hover {
    opacity: 80%;
}

.optsbtn:active {
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 7px;
    padding-bottom: 7px;
    background-color: #0d2131;
    border: 1px solid white;
    color: white;
}

#searchbody {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    padding: 15px;
    padding-bottom: 5px;
    background-color:#f3f3f3;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    overflow-y: scroll;
}

#searchbody::-webkit-scrollbar {
    display: none;

}

#searchtextdiv {
    font-size: 18px;
}

#landsearchinput {
    width: 90%;
    margin-top: 10px;
}

#landsearchbtn {
    margin-top: 10px;
}

#addicondiv {
    margin-right: 20px;
}

#addicon {
    width: 25px;
}

#perlistdiv {
    display: flex;
    flex-direction: row;
}

#perlistname {
    flex: 1;
}

#searchbodyheader {
    position: fixed;
    right: 0;
    left: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    height: 85px;
    background-color: #f3f3f3;
    margin-top: -15px;
}

#perlistcont {
    margin-top: 85px;
}

#userdiv, #passdiv {
    padding-left: 20px;
    line-height: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    padding-right: 20px;
}

#userdiv {
    margin-top: 10px;
}

#userinput, #passinput {
    flex: 1;
    margin-left: 5px;
}

#userbtndiv, #passbtndiv, #logoutbtn {
    margin-bottom: 10px;
}

#invfriendsdiv {
    padding: 15px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 30;
    bottom: 30;
    z-index: 6999;
}

#invfriendsdiv {
    margin-bottom: 10px;
    background-color: rgb(31, 150, 61);
}

#deletefriendsdiv {
    background-color: rgb(223, 11, 11);;
}

#invfriendsicon {
    width: 30px;
    position: fixed;
    right: 80;
}

#friendnndiv {
    background-color: #0d2131;
    position: fixed;
    top: 50%;
    left: 50%;
    transform:  translate(-50%, -80%);
    padding: 20px;
    border-radius: 20px;
    line-height: 40px;
    z-index: 5999;
    width: 80%;
}

#friendnndiv {
    background-color: #0d2131;
    position: fixed;
    top: 50%;
    left: 50%;
    transform:  translate(-50%, -80%);
    padding: 20px;
    border-radius: 20px;
    line-height: 40px;
    z-index: 5999;
    width: 80%;
}

#friendnntext {
    color: white;
    font-size: 18px;
}

#friendnninput {
    font-size: 18px;
    width: 100%;
}

#getlinkbtn, #copyfrlink, #resetfriendnn {
    font-size: 18px;
    border-radius: 5px;
    border: none;
    margin-top: 10px;
}

#copyfrlink, #resetfriendnn {
    display: none;
}

#xdiv {
    color: white;
    cursor: pointer;
    float: right;
}

#xdivcolored {
    color: #0d2131;
    cursor: pointer;
    float: right;
}

#menubtn {
    cursor: pointer;
}

/* MEDIA QUERY */
@media only screen and (max-width: 650px){
    #menubtns {
        width: 250px;
        right: 2%;
        float: right;
    }
}

@media only screen and (max-width: 1030px){
    #ifrconf {
        top:65px;
        right:0;
    }

}

.archmsgbtn {
    width: 25px;   
    max-height: 25px;
    margin-left: 8px;
}

.removemsg {
    width:18px; 
    max-height:25px;
    margin-left: 8px;
}

.quotemsg {
    width:23px; 
    max-height:20px;
    margin-left: 8px;
}

.msgmenubtn {
    width:13px;
    max-height: 20px;
    margin-left: 10px;
}

#searchhisdiv {
    background-color: #19354b;
    width: 100%;
    position: fixed;
    top: 67px;
    right: 0;
    flex-direction: row;
    color: white;
    display: none;
    z-index: 999;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: -10px;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-bottom-left-radius: 0px;
    cursor: pointer;
}

.msgoptscont {
    display: flex;
    flex-direction: row;
}

.msgoptions {
    display: flex;
    flex-direction: row;
}

.optionsmsg {
    display: none;
}

#searchhisbtncont {
    text-align: center;
    cursor: pointer;
}

#searchhisinput {
    display: inline;
    width: 80%;
    margin-left: 20px;
    margin-bottom: 10px;
}

#searchhistext {
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline;
    padding-left: 10px;
}

#searchhisopt {
    margin-left: 5px;
}

#showsats {
    color: white;
    display: flex;
    flex-direction: row;
    margin: auto;
    cursor: pointer;
}

#invsendfriendamount {
    margin-right:5px;
}

#fiatlabel3 {
    color: white;
}

#showsatstext {
    color: white;
}

.checkbox {
    max-height:25px;
}

@media only screen and (max-width: 500px){
    #lobbywho {
        margin-left: 0px;
    }

    #showsats {
        font-size: 15px;
    }

    .iframecss{
        width: 300px;
    }
}

@media only screen and (min-width: 500px){
    #searchhisdiv {
        width: 200px;
        border-bottom-left-radius: 10px;
    }
    #searchhisopt {
        display:block;
        margin: auto;
        margin-bottom: 5px;
    }
    #searchhisinput {
        margin-bottom: 5px;
    }
}



@media only screen and (max-width: 400px){
    #menubtns {
        width: 100px;
        right: 2%;
        float: right;
        top: 69%;
        right: 10%;
    }

    #showsats {
        font-size: 13px;
    }

    #clistbtn, #archivechats, #clearhist, #chathistory {
        font-size: 12px;
        background-color: white;
        border: none;
        border-radius: 10px;
        padding: 10px;
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 8px;
    }

    #loginform, #signupform {
        margin-top: 25%;
    }
}

/*INVITED*/
#invitedcontainer {
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

#invitedbtnsdiv {
    margin: auto;
    width: 100px;
    padding: 10px;
    height: auto;
}

/* Subscribe */
#subcribetext, #subcribetextmob {
    color: white;
    line-height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
}

#subcribetextmob {
    font-size: 18px;
    line-height: 30px;
}