body{background-color:#282c34;margin:0;font-family:Verdana,Geneva,Tahoma,sans-serif}.App{text-align:center;max-width:728px;margin:0 auto}.App header{background-color:#181717;height:10vh;min-height:50px;color:#fff;position:fixed;width:100%;max-width:728px;top:0;display:flex;align-items:center;justify-content:space-between;z-index:99;padding:0 10px;box-sizing:border-box}.App section{display:flex;flex-direction:column;justify-content:center;min-height:100vh;max-height:100vh;background-color:#666}main{padding:0 10px;height:80vh;margin:10vh 0;overflow-y:scroll;display:flex;flex-direction:column}main::-webkit-scrollbar{width:.25rem}main::-webkit-scrollbar-track{background:#1e1e24}main::-webkit-scrollbar-thumb{background:#f0f0f0}form{height:10vh;position:fixed;bottom:0;background-color:#3a3a3a;width:100%;max-width:728px;display:flex;font-size:1.5rem;align-items:center}form button{border-radius:50%;background-color:#787878;width:75px;height:75px;margin-right:15px}form button img{width:50px;margin:0 0 0 -18px}.selfPhoto{cursor:pointer}#text-input{line-height:2;font-size:1.5rem;background:#1f1f1f;color:#fff;outline:none;border:none;border-radius:20px;padding:0 15px}.inputTxtContainer{display:flex;flex-direction:column;width:100%;padding:0 15px}.progressBar{width:100%;height:10px;margin-top:0}button{background-color:#282c34;border:none;border-radius:12px;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;cursor:pointer;font-size:1.25rem}button:disabled{opacity:.5;cursor:not-allowed}.sign-in{color:#282c34;background:#fff;max-width:500px;margin:0 auto;border:2px solid #333333;display:flex;align-items:center;border-radius:50px}.sign-in img{margin-right:5px}ul,li{text-align:left;list-style:none}.message{display:flex;flex-direction:column}.message-content{display:flex;align-items:flex-start}.message-content .userPhoto{border-radius:50%}.sent .message-content{flex-direction:row-reverse}p{text-align:left}.sent p{color:#fff;background:#0b93f6;border-radius:25px;padding:10px 20px;margin:0 5px 0 30%}.sent a{color:#fff}span{color:#fff;margin-top:10px;display:flex}.sent #name-span{margin-right:55px}.received #name-span{margin-left:55px}.sent span{flex-direction:row-reverse}.sent .received{flex-direction:row}.sent .messagePhoto{text-align:right}.imgWithText{margin:0!important}.sent .messagePhotoContainer{width:100%;text-align:right}.messagePhoto{width:250px;height:auto;border-radius:10px;margin:0 55px}.received p{background:#e5e5ea;color:#000;border-radius:25px;padding:10px 20px;margin:0 30% 0 5px}.received a{color:#000}.received .messagePhotoContainer{width:100%;text-align:left}.imageBtnContainer{padding:0 15px 0 0;display:flex;flex-direction:column;align-items:flex-start}.uploadImgBtn{width:120px;height:auto;text-align:center;font-size:.75rem;padding:10px;margin:0;border-radius:25px}.selectedImgText{color:#fff;margin:2px 0 0;font-size:.5rem;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:center}img{width:40px;height:40px;margin:2px 5px}header div{width:33%}header div:has(>button){text-align:right}#span-date{display:inline-block}.confirm-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 10px #0000001a;width:300px;max-width:80%;z-index:1000}.confirm-dialog-content{padding:20px;text-align:center}.confirm-dialog-content h3{margin:0 0 10px}.confirm-dialog-content p{margin:0 0 20px;text-align:center}.confirm-dialog-content button{margin:0 5px;padding:8px 16px;border:none;background-color:#282c34;color:#fff;border-radius:4px;cursor:pointer}.confirm-dialog-content button:hover{background-color:#16181d}.confirm-dialog-content button:last-child{background-color:#892323}.confirm-dialog-content button:last-child:hover{background-color:#501414}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}header>:nth-child(2){font-size:1.5rem}.welcome-message{background-color:#404040;color:#fff;text-align:center;margin:20px 5%;padding:10px 20px;border-radius:20px;border:2px solid #333333}.welcome-message p{text-align:center}.imgButton{display:none}.sendButton{padding:0 15px 0 0;cursor:pointer}@media (max-width: 768px){.sent p{margin:0 5px 0 10%}.received p{margin:0 10% 0 5px}.App section{min-height:100dvh;max-height:100dvh}#sign-out-btn{border-radius:12px;padding:15px 32px;font-size:1.25rem;font-weight:700}header>:first-child{display:none}header>:nth-child(2){width:60%;font-size:1.3rem}header>:nth-child(3){width:40%}.imageBtnContainer{display:none}#text-input{margin:0;padding:0 10px;width:100%;box-sizing:border-box}.inputTxtContainer{padding:0 5px}.imgButton{display:block}.sendButton{padding:0 10px 0 0}form{height:8vh}main{height:82vh;margin:10vh 0 8vh}}