One Hat Cyber Team

Edit File: responsive.css

@media screen and (max-width:480px)
{
    
.main .chatbox>.contents>.chat_messages>ul>li.system_message>div>.right>.content
{
margin-left: 2px;
text-align: center;
}

.main .chatbox>.contents>.chat_messages>ul>li.system_message>div>.right
{
text-align: center;
}

.main .chatbox>.contents>.chat_messages>ul>li.system_message>div>.right>.content>div
{
text-align: center;
}

.main .chatbox>.footer>.editor .message_editor .note-btn.attach_from_storage_feature
{
}

.main .chatbox > .header
{
max-height: 140px;
padding: 10px 5px;
}

.main .chatbox > .header > .switch_user
{
margin-left: 5px;
}

.main .chatbox > .header > .heading > .title
{
max-width: 120px;
}

.main .chatbox > .header > .icons
{
text-align: right;
gap: 4px;
}

.rtl_language .main .chatbox>.header>.icons
{
text-align: left;
}

.main .chatbox > .header > .icons > span, .main .chatbox > .header > .icons > .options > .icon
{
text-align: center;
}
}

@media only screen and (min-width: 1200px) and (max-width: 1330px)
{
.main .aside > .mini_audio_player > div > .center
{
max-width: 30%;
}
}

@media screen and (max-width: 260px)
{
.main .chatbox>.header>.heading>.title
{
display: none;
}

.main .chatbox > .header > .image
{
display: block;
}
}

@media screen and (min-width: 260px) and (max-width: 282px)
{
.main .chatbox > .header > .image
{
display: none!important;
}

.main .chatbox > .footer > .editor .message_editor .note-editor .note-toolbar
{
margin-left: -50px;
}
}

@media screen and (max-width: 400px)
{
.main .chatbox>.header>.image>.thumbnail>img,.main .chatbox>.header>.image>.thumbnail
{
width: 25px;
height: 25px;
}

.main .chatbox>.header>.icons>span
{
/* width: 30px; *//* height: 30px; */
;
}

.main .chatbox>.header>.icons>span > svg
{
/* transform: scale(0.9); */
;
}

.main .chatbox>.header>.heading>.title
{
max-width: 180px;
word-break: break-word;
overflow: hidden;
max-height: 135px;
}
}

@media screen and (max-width:770.98px)
{
.main .page_column
{
display: none;
transition: 0s;
}

.main .chatbox > .contents > .chat_messages > ul > li > div > .right > .content > div
{
max-width: 75vw;
}

.main .middle > .video_preview
{
max-height: 30%;
min-height: 30%;
}

.main .middle > .group_headers
{
max-height: 30%;
min-height: 30%;
}

.message_editor .note-toolbar
{
text-align: center;
}

.main .chatbox > .contents > .chat_messages > ul > li > div > .right > .files > div > ul > li > .file.audio_preview > div > .icon
{
display: none;
}

.main .chatbox>.contents>.chat_messages>ul>li>div>.right>.files>div>ul>li>.file.audio_preview>div>.icon.download_file
{
display: inline-flex;
min-width: 30px;
min-height: 30px;
width: 30px;
height: 30px;
}

.main .chatbox>.contents>.chat_messages>ul>li>div>.right>.files>div>ul>li>.file.audio_preview>div>.icon.download_file > i
{
transform: scale(0.8);
}

.main .go_back_icon
{
display: block;
margin-right: 4px;
}

.main .page_column.visible
{
display: flex;
z-index: 3;
}

.main .page_column.previous
{
display: flex;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}

.main .navopen .page_column.previous
{
padding-left: 60px;
}

.main .navopen .chatbox .file.audio_preview > div > .audio_controls > div > div > div > .duration,
.main .navopen .chatbox .file.audio_preview > div > .audio_controls > div > div > div > .current_timestamp
{
display: none;
}

.main .chatbox>.footer>.editor .message_editor
{
}

.main .chatbox>.footer>.editor>div
{
padding: 0px 5px;
}

.main .chatbox>.footer>.editor .send_message_button > div > span
{
}

.main .chatbox>.footer>.editor .send_message_button > div
{
}

.main .chatbox>.footer>.editor .message_editor .note-btn i
{
padding: 3px 5px;
}

.main .chatbox>.footer>.grid_list>div>.results>div>ul>li
{
max-width: 33.33%;
flex: 33.33%;
}

.main .chatbox>.footer>.grid_list
{
max-height: 200px;
}
}

@media screen and (max-width:430px)
{
    
.main .middle > .content > .statistics .table_list > .item > div
{
min-width: 100%;
margin-bottom: 2px;
}

.main .middle > .content > .statistics .table_list > .item
{
flex-wrap: wrap;
text-align: center;
}

.main .middle > .content > .statistics .table_list > .item > .image
{
margin-right: 0px;
margin-bottom: 10px;
}

.main .middle > .content > .statistics .table_list > .item > div.button
{
margin-top: 10px;
}
}

@media only screen and (max-width: 1290px) and (min-width: 1024px)
{
.boxed_layout .main > .window
{
padding: 10px;
}
}

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

.rtl_language .main .side_navigation
{
right: 0px!important;
left: auto!important;
margin-left: 0px!important;
margin-right: 0px!important;
}

.main .chat_page_container.show_navigation .aside>.head
{
display: flex;
}

.main .side_navigation
{
position: absolute;
margin-left: 0px;
left: 0px;
}

.rtl_language .main .chat_page_container.show_navigation
{
padding-right: 0px !important;
}

.main .chat_page_container.show_navigation
{
padding-left: 0px;
}
}

@media screen and (max-width: 770.98px)
{
.main .chatbox>.footer>.editor .message_editor .note-btn
{
margin-right: 2px;
}
}

@media screen and (max-width: 500.98px)
{
.main .chatbox>.footer>.editor .send_message_button
{
}

.rtl_language .main .chatbox>.footer>.editor .send_message_button
{
right: inherit;
}

.note-editor.note-frame .note-editing-area
{
}

.rtl_language .note-editor.note-frame .note-editing-area
{
}
}

@media screen and (max-width: 380px)
{
.main .chatbox.chat_message_selection > .header > .image,
.main .chatbox.searching_chat_message > .header > .image
{
display: none!important;
}

button.note-btn.messenger_features.attach_from_storage_feature
{
}

.note-editor.note-frame .note-editing-area
{
}

.rtl_language .note-editor.note-frame .note-editing-area
{
}

.message_editor .note-editor.note-frame .note-editing-area .note-editable
{
}

.main .chatbox>.footer>.editor .send_message_button>div>span
{
}

.main .chatbox>.footer>.editor .send_message_button>div
{
}

.main .chatbox>.footer>.editor .send_message_button
{
}
}

@media only screen and (max-width: 600px)
{
.main .middle>.content>.custom_page>.page_content
{
padding: 0px;
}
}

@media screen and (max-width:850px)
{
body, .main
{
overflow-x: hidden;
}
}

@media screen and (max-width: 771px) and (min-width: 768px)
{
.main .row.nowrap .page_column
{
width: 100%;
}
}