@media screen and (max-width: 4500px) { .chat-body .MuiAvatar-circle { box-shadow: 0px 0px 0px 2px #fff; border: 3px solid #ffffff66; width: 60px; height: 60px; top: 20px; z-index: 30; font-family: 'IRANSansNumeralBold'; & div { font-family: 'IRANSansNumeralBold'; } } .chat-body { background-color: rgb(210, 196, 214); justify-content: flex-start; flex: 1; height: 100%; border-top-left-radius: 40px; border-top-right-radius: 40px; &__content { background: url(../../../assets/images/chat.png); background-size: cover; padding: 0px 10px 0px; height: 100%; min-height: 200px; position: relative; border-top-left-radius: 40px; border-top-right-radius: 40px; position: relative; top: -75px; &--preview { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; justify-content: center; align-items: center; background-color: rgb(210, 196, 214); z-index: 1000; & img { width: 100%; max-height: 400px; object-fit: scale-down; } } &--confirm { width: 100vw; height: 100vh; position: fixed; top: 0px; left: 0px; justify-content: center; align-items: center; z-index: 300; &___box { position: relative; bottom: 50px; width: 100%; max-width: 250px; padding: 10px; background: rgb(139, 73, 186); background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111, 108, 255) 95%); text-align: right; direction: rtl; color: white; border-radius: 5px; box-shadow: 0px 0px 20px rgba(0, 0, 0, 1); font-size: 16px; &---options { justify-self: flex-end; align-self: flex-start; width: 110px; height: 40px; justify-content: space-between; & button { background-color: inherit; border: none; font-size: 14px; &:focus { outline: none; } } } } } } &__footer { width: 100%; z-index: 1000; background-color: rgb(210, 196, 214); background: url(../../../assets/images/chat.png); box-shadow: 0px 0px 5px 2px #9d9595ad; background-size: cover; overflow-y: scroll; overflow-x: hidden; position: fixed; bottom: 0px; left: 0; padding-bottom: 5px; } } }