@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Babylonica&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carrois%20Gothic%20SC&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap&family=Noto+Serif:ital,wght@0,100..900;1,100..900');

/* --- Root Variables for consistent branding --- */
:root {
    --primary-navy: #1a237e;
    --accent-blue: #3949ab;
    --bg-light: #f4f7f6;
    --white: #ffffff;
    --text-dark: #2d3436;
    --text-muted: #636e72;
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --radius: 12px;
}

/* --- Global Styles --- */
*
{
    box-sizing: border-box; /* Prevents padding from breaking widths */
}

body {
    /* A soft, professional blue-to-grey gradient */
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh; /* Ensures the gradient covers the whole screen */
    background-color: var(--bg-light);
    font-family: 'Inter', -apple-system, sans-serif;
    /*font-family: 'Carrois Gothic SC', -apple-system, sans-serif;*/
    /*font-family: 'Noto Serif Display', serif;*/
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

/* --- Header & Logo --- */
#header {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard property for other modern browsers */
    
    background: var(--white);
    padding: 5px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}


#head{
    display: flex;
    align-items: center; /* Vertically centers logo and motto */
    justify-content: center; /* Keeps them grouped in the middle */
    gap: 20px; /* Space between logo and motto */
    padding: 20px;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    width: fit-content;
    margin:auto;
}

#moto {
    font-family: 'Babylonica', cursive;
    font-size: 2rem;
    color: var(--primary-navy);
    letter-spacing: 1px;
    padding-left: 20px;
    border-left: 2px solid #dfe6e9;
    line-height: 1;
    display: block;
    cursor: pointer;
    
    /* Smooth rendering fix */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    max-width: 300px;
}

/* Mobile Tweak: Stack them on very small screens */
/*@media (max-width: 480px) {
    #head {
        flex-direction: column;
        gap: 10px;
    }
    #moto {
        border-left: none;
        border-top: 2px solid #dfe6e9;
        padding-left: 0;
        padding-top: 10px;
        text-align: center;
    }
}*/

#QuickPayLogo {
    display: block;
    width: 100px;
    height: 90px;
    background: url('/quickpay_transparent.png') no-repeat center;
    background-size: contain;
    margin: 0 auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

#QuickPayLogo:hover {
    transform: scale(1.1) rotate(2deg);
}

/* --- Navigation Menu (Flexbox) --- */
#QuickPayMenu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px auto;
    padding: 0 20px;
    max-width: 800px;
}

#QuickPayMenu div {
    background-color: var(--primary-navy);
    color: var(--white);
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
}

#QuickPayMenu div:hover {
    background-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

/* --- Main Content & Transactions --- */
#MainContent {
    max-width: 700px;
    margin: 0px auto 25px auto;
    padding: 0 15px;
    position: relative;
}

#QRCodeImage{
 /* 1. Position fixed relative to the viewport */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 2. Float above all other elements */
  z-index: 1000; /* Use a value higher than any other z-index on your page */

  /* 3. Center the content inside the overlay */
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center;     /* Vertically center */

  /* Optional: Add a background to obscure content behind it */
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
}

#QRCodeCanvas, #imgCanvas {
    border: 3px inset darkgreen;
    background-color: whitesmoke;
    padding:15px;
    border-radius: 25px;
}

#QRCodeFrame{
    align-content: center;
    justify-content: center;
}

#download{
    display: flex;
    margin:5px auto;
}

hr {
    border: none;
    height: 4px;
    background-color: #333;
    width: 50px;
    margin: 20px auto; /* Centered */
}

/* --- Login & Form --- */
#loginform, #new_wallet_form, #registerform, #recoverform {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    width: 95%;
    max-width: 400px;
    margin: 10px auto;
}

#loginform label, #new_wallet_form label, #registerform label, #recoverform label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

#loginform #username, #loginform #password, 
#new_wallet_form #amount, #new_wallet_form #type, 
#new_wallet_form #note, #new_wallet_form #maxamount, 
#register_form #username, #registerform #name, 
#registerform #phone, #registerform #email,
#registerform #password, #registerform #username,
#registerform #address, #recoverform #username, #recoverform #email,
#recoverform #phone, #prompt-input
{
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 2px solid #edf2f7;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

#loginform #username:focus, #loginform #password:focus, 
#new_wallet_form #amount:focus, #new_wallet_form #note:focus,
#register_form #username:focus, #registerform #name:focus, 
#registerform #phone:focus, #registerform #email:focus,
#registerform #password:focus, #registerform #username:focus,
#registerform #address:focus, #recoverform #username:focus, #recoverform #email:focus,
#recoverform #phone:focus, #new_wallet_form #type:focus, #prompt-input:focus
{
    border-color: var(--primary-navy);
    outline: none;
}

#loginform input[type=submit], #new_wallet_form input[type=submit], 
#registerform input[type=submit], #recoverform input[type=submit]{
    width: 100%;
    background: var(--primary-navy);
    color: white;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

#new_wallet_form #type{
    height: 45px;
}
.confirm_data{
    margin: 15px auto;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 15px;
}
/*#loginform{
    position:relative;
}*/

#registerBTN, #forgotpwdBTN {
    display: block;
    padding: 10px!important;
    font-size: 14px!important;
    font-weight: 200!important;
    width: fit-content!important;
}

#registerBTN{
    float:left;
    margin: 0px auto 0px 0px;
    clear:left!important;
}

#forgotpwdBTN {
    margin: 0px 0px 0px auto;
    /*float:right!important;*/
}

#loginform input[type=submit]:hover {
    background: var(--accent-blue);
}

/* --- Fetch More Data Button --- */
#MORE {
    display: block;
    width: fit-content;      /* Button only as wide as the text */
    min-width: 200px;        /* Ensures a nice clickable area */
    margin: 25px auto;       /* Centers the button with breathing room */
    padding: 12px 24px;
    
    background-color: transparent;
    color: var(--primary-navy);
    border: 2px solid var(--primary-navy);
    border-radius: var(--radius);
    
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    
    transition: all 0.3s ease;
}

#MORE:hover {
    background-color: var(--primary-navy);
    color: white;
    box-shadow: var(--shadow-soft);
    transform: translateY(-2px);
}

#MORE:active {
    transform: translateY(0); /* Subtle "push" effect when clicked */
}

#MORE::after {
    content: ' ↓';
    font-weight: bold;
}

#hb{
    /*height: 100%;*/
    /*border: 1px solid black;*/
    /*float:right;*/
    font-size: 40px;
    vertical-align: middle;
    align-content: center;
    /*padding: 0px 10px;*/
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    cursor: pointer;
    display:none;
    
/*    height:30px;
    width:30px;
    overflow: hidden;*/
    
}

#hb:hover{
    transform: scale(1.2) rotate(1deg);
}



.hideandshow{
    /* Switch to a 2-column grid on phones */
    display:grid!important;
    grid-template-columns: 1fr 1fr;
}

#video_cont video {
    display: block; /* Makes it a block element for better layout control */
    width: 100%;    /* Makes it responsive to the container's width */
    height: auto;   /* Automatically adjusts height to maintain aspect ratio */
    max-width: 800px; /* Optional: Sets a maximum size for large screens */
    margin: 0 auto; /* Centers the video horizontally within its parent */
    /*border: 5px outset #000;*/
/*    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
    
    background: var(--white);
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    width: 95%;
    max-width: 640px;
    margin: 10px auto;
}

.video_flip{
    /**
        ova e za flip horizontal na videoto, ama poarno bez nego
    */
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

#scanner_overlay {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom:10px;
    background: url('/qr_scann_overlay-2.png') no-repeat center;
    background-size: contain;
}
   
#video_cont{
    display: block;
    width: 350px;
    height: fit-content;
    margin: 0px auto;        
    position: relative;
}

.wid, .tid {
    display:none;
    visibility: hidden;
}

.transaction, .wallet{
    display: block;
    background: var(--white);
    border: none;
    border-left: 4px solid var(--primary-navy);
    border-radius: var(--radius);
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 5px;
    /*box-shadow: var(--shadow-soft);*/
    box-shadow: var(--shadow-hover);
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: normal;*/
    height: fit-content;
}

.wallet{
    border: none;
    border-right: 4px solid var(--primary-navy);
}

.visidiv{
    display: block;
    clear:both;
}

.comment{
    display: none;
    clear:both;
    /*margin:5px 5px 5px 5px;*/
    clear:both;
    width:auto;
    /*border:1px outset graytext;*/
    /*border-radius: 5px;*/
    /*background-color: var(--bg-light);*/
}

/*.cmtBtn:hover{
    background-color: var(--primary-navy);
    color: white;
    box-shadow: var(--shadow-soft);
    transform: scale(1.1) rotate(1deg);
}*/

.cbutton, .cdate, .camount, .cmtBtn, .ctname, .msgname{
    font-size:14px;
    float:left;
    vertical-align: middle;
    display:block;
    padding:3px;
    height: 100%;
}

.wdbtn{
    cursor: pointer;
    vertical-align: middle;
    margin: 0px 3px 0px auto;
    text-align: center;
    font-weight: bold;
    width: fit-content;
    padding: 3px;
}

.wdbtn:hover{
    border-color: red;
}

.msgreact{
    display: block;
    align-self: end;
    float:right;
    cursor:pointer;
}

.cdate, .cdatein{
    /*font-size: 12px;*/
    border: 1px outset black;
    border-radius: 5px;
    background-color: whitesmoke;
    vertical-align: middle;
    margin: 0px 0px 0px 3px;
    min-width: 130px;
    text-align: center;
    cursor: pointer;
    
    /*text-shadow: 10px 10px 1px rgba(0, 0, 0, 0.3);  Soft black shadow with 50% opacity */
}

/*.cdate:hover{
    font-size: 16px;
    margin: 5px 5px 5px 5px;
}*/

.ctname{
    /*font-size: 14px;*/
    border: 1px outset transparent;
    border-radius: 5px;
    vertical-align: middle;
    margin: 0px 0px 0px 3px;
    font-weight: bold;
    overflow: hidden;
    max-width: 310px;
}


.cmtBtn{
    /*border: 1px solid transparent;*/
    background: url("/info_icon.png") no-repeat center;
    background-size: contain;
    background-color: transparent;
    width: 25px;
    height:25px;
    cursor: pointer;
}

.cbutton:hover{
    background-color: var(--bg-light);
    color: white;
    box-shadow: var(--shadow-soft);
    transform: scale(1.1) rotate(1deg);
}

.cbutton{
    border: 1px solid white;
    background: url("/qr-code.png") no-repeat center;
    background-size: contain;
    width: 25px;
    height:25px;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}

.camount{
    float:right;
    /*width: 150px;*/
}

.tplus, .tminus{
    border: 1px outset black;
    border-radius: 5px;
    cursor: default;
    vertical-align: middle;
    /*margin:5px 5px 5px 5px;*/
    margin-right:5px;
    min-width: 130px;
    text-align: center;
}

.tplus{
    /*color: #4CBB17;*/
    color: white;
    font-weight: bold;
    background-color: #004a99;
}

.tminus{
    color: white;
    font-weight: bold;
    background-color: #dc3545;
    /*wheat*/
}

.amountLbl{
    display: block;
    float:left;
    width: fit-content;
}

.amountVal{
    display: block;
    float:right;
    width: auto;
    text-align: right;
}

.infini{
    text-align:center; 
    width:120px; 
    font-size: 16px;
    font-weight: bold;
}

.cdatein{
    font-size: 13px;
    background-color: white;
    margin: 5px 5px 5px 5px;
    /*width: fit-content;*/
    clear:both;
    padding: 5px;
    
    display: none;
    
    border:1px outset graytext;
    border-radius: 5px;
    text-align: left;
}

.commentbody{
    clear:both;
    padding:10px;
    margin:5px 5px 5px 5px;
    clear:both;
    width:auto;
    border:1px outset graytext;
    border-radius: 5px;
    background-color: white;
    line-height: 1.3;
}

.messagebody{
    padding:10px;
    margin:5px 5px 5px 5px;
    clear:both;
    width:auto;
    border:1px outset graytext;
    border-radius: 5px;
    background-color: white;
    line-height: 1.3;
}

#UserInfo, #AboutInfo{
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    width: 95%;
    max-width: 640px;
    margin: 10px auto;
    /*font-family: 'Carrois Gothic SC', sans-serif;*/
}

#user_name, #user_credit{
    display:block;
    margin: 10px auto;
    font-size: 20px;
    width: fit-content;
}

#user_credit{
    font-size: 35px;
    font-weight: bolder;
    margin: 25px auto;
}

*:focus {
  outline: none;
}

.resadapt{
    max-width: 480px;
}

a, button, input, select, textarea, div {
    -webkit-tap-highlight-color: transparent;
}

#maincmtBtn, #printBtn, #scp{
    margin: 10px 0px 0px 25px;
    font-family: 'Carrois Gothic SC', -apple-system, sans-serif;
    font-size: 22px;
    width: fit-content;
    cursor: pointer;
}

#scp{
    margin:10px auto;
}

#uploadholder{
    width: fit-content;
    margin: 10px auto;
    align-content: center;
    text-align: center;
}

#maincmtBtn:hover{
    transform: scale(1.1);
}

#scnm{
    font: 12px "Segoe UI", sans-serif;
    text-align: center;
    margin-bottom: -10px;
}

#loader{
    display:none;
    background: url('/loader.gif') center no-repeat;
    background-size: contain;
    margin: auto;
    position: fixed;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 44px;
    height:45px;
    z-index: 2000;
}

#MainBody{
    position: relative;
    min-height: 100vh;
}

#footer{
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard property for other modern browsers */
    
    position: absolute;
    bottom:0px;
    display: block;
    width: 100%;
    text-align: center;
    
    background: var(--white);
    border: none;
    /*border-left: 4px solid var(--primary-navy);*/
    border-radius: var(--radius);
    margin-top: 8px;
    /*margin-bottom: 0px;*/
    padding: 5px;
    /*box-shadow: var(--shadow-soft);*/
    box-shadow: var(--shadow-hover);
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*align-items: normal;*/
}

#aback{
    display: flex;
    float: right;
    font-size: 14px;
    cursor: pointer;
}

#about{
    font-size: 14px;
    cursor: pointer;
    right:10px;
    top:5px;
    position: absolute;
}

#about:hover, #aback:hover{
    text-decoration: underline;
}

#langbar{
    font-size: 14px;
    cursor: pointer;
    left:10px;
    top:5px;
    position: absolute;
    left: 10px;
}

#langs{
    display:none;
    position: absolute;
    bottom: 20px;
    left:0px;
    margin: auto 1px;
}

#langs div{
    background-color: whitesmoke;
    display: block;
    padding: 5px;
    width: 100%;
    border: 1px solid black;
    margin: 3px;
}

#langs div:hover{
    color: whitesmoke;
    background-color: var(--accent-blue);
    box-shadow: var(--shadow-hover);
}

#editor{
    width: 90%;
    /*margin: auto;*/
    height: 68px;
    float:right;
}

#enter_message{
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard property for other modern browsers */
}

#editor textarea{    
    width: 100%; /* Makes the textarea span the full width of its parent container */
    height: 100%; /* Sets an initial height */
    padding: 12px; /* Adds space inside the border */
    box-sizing: border-box; /* Ensures padding/border are included in width/height */
    border: 1px solid #ccc; /* Adds a solid border */
    background-color: #f8f8f8; /* Light gray background */
    font-size: 16px; /* Sets the font size */
    resize: none; /* Disables manual resizing */
    border-radius: 10px;
}

.mymessage{
    display: block;
    background: var(--white);
    border: none;
    border-left: 4px solid var(--primary-navy);
    border-radius: var(--radius);
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 5px;
    box-shadow: var(--shadow-hover);
    height: fit-content;
    width: 90%;
    margin-left: auto;
}

.friendmessage{
    display: block;
    background: var(--white);
    border: none;
    border-right: 4px solid limegreen;
    border-radius: var(--radius);
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 5px;
    box-shadow: var(--shadow-hover);
    height: fit-content;
    width: 90%;
    margin-right: auto;
}

.chatname, .ctname, .msgname{
    cursor: pointer;
}

.msgname{
    /*font-size: 14px;*/
    border: 1px outset transparent;
    border-radius: 5px;
    vertical-align: middle;
    margin: 0px 0px 0px 3px;
    font-weight: bold;
    overflow: hidden;
    max-width: 310px;
}

.msgname:hover{
    color: blue;
}

#chat_box_wrapper{
    height: 100%;
    width: 80%;
    float:left;
}

#enter_message{
    width: 19%;
    float:left;
    height:100%;
    text-align: center;
    border: 1px solid #ccc;
    background-color: whitesmoke;
    border-radius: 10px;
    cursor: pointer;
    margin-left: 2px;
    
    display: flex;
    justify-content: center; /* Centers text horizontally */
    align-items: center;  
}

#enter_message:hover{
/* Lift and tilt the card towards the viewer */
  transform: translateZ(20px) rotateX(0deg) rotateY(0deg); 
  /* Make the shadow larger and more pronounced to enhance the 3D effect */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); 
    background-color: silver;
}

#maincmtBtn{
    float:left;
}

#payment, #new_wallet, #latest_t{
    background-color: var(--primary-navy);
    color: var(--white);
    padding: 14px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-soft);
    width: fit-content;
    float:right;
    margin-left: 30px;
}

#payment:hover, #new_wallet:hover{
    background-color: var(--accent-blue);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.jointBtn{
    margin-top:10px;
}

#latest_t{
    border:1px solid transparent;
    background-color: transparent;
    box-shadow: none;
    padding: 7px;
    font-size: 24px;
}

#latest_t:hover{
    transform: translateY(-3px);
}

/*Reactions*/
.reaction-container {
  position: relative;
  display: inline-block;
}

.emoji-picker {
  position: absolute;
  bottom: 40px;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 30px;
  padding: 5px 10px;
  display: flex;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 10;
}

.hidden { display: none; }

.emoji {
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s;
}

.emoji:hover {
  transform: scale(1.3);
}


#FileInputButton{
    cursor:pointer;
    display: block;
    width: 100%;   
    height: auto;  
    margin: 0 auto;
    background: var(--white);
    padding: 10px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    margin: 10px auto;
}


/*red notification bubble for chat, and perhaos for payments too*/

/* Define what each icon button should look like */
.button {
  color: white;
  display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
  position: relative; /* All 'absolute'ly positioned elements are relative to this one */
  padding: 2px 10px; /* Add some padding so it looks nice */
  font-size: 16px!important;
}

/* Make the badge float in the top right corner of the button */
.button__badge {
  background-color: #fa3e3e;
  border-radius: 20px;
  color: white;
 
  padding: 1px 3px;
  font-size: 10px;
  
  position: absolute; /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}


/* ------------------------------------------------ */
/* MEDIA QUERIES (The Mobile Magic)              */
/* ------------------------------------------------ */

/* For Tablets and smaller (e.g., iPads) */
@media (max-width: 768px) {
    
    #QuickPayLogo {
        width: 80px;
        height: 70px;
    }
    
    #QuickPayMenu {
        gap: 8px;
    }
    
    #QuickPayMenu div {
        padding: 12px 18px;
        font-size: 13px;
    }
    
    #hb{
        display: none;
    }
    
    #editor{
        width: 100%;
        /*position: fixed;*/
        bottom: 0px;
        float:right;
    }
    
    .msgname{
        width: 100%;
    }
    
    #payment, #latest_t{
        margin-left: 3px;
    }
}

/* For Mobile Phones (e.g., iPhones/Android) */
@media (max-width: 480px) {
    
    #QuickPayLogo {
        width: 80px;
        height: 70px;
    }

    #QuickPayMenu {
        display: none;
    }

    #QuickPayMenu div {
        text-align: center;
        padding: 15px 10px;
    }

    #loginform, #new_wallet_form {
        padding: 25px;
    }

    .transaction, .wallet {
        flex-direction: column; /* Stack transaction info vertically */
        align-items: flex-start;
        gap: 10px;
    }
    
    #hb{
        display: block;
    }
    
    .resadapt{
        max-width: 230px;
        /*border: 1px solid red;*/
    }
    
    .cdate{
        display: none;
    }
    
    .wdate{
        display: block;
    }
    
    .cdatein{
        display: block!important;
        text-align: left;
    }
    
    .ctname{
        max-width: 190px;
        overflow: hidden;
    }
    
    .msgname{
        width: 100%;
    }
    
    #moto{
        max-width: 180px;
    }
}