diff --git a/index.html b/index.html
index de9eb78..075ff8a 100644
--- a/index.html
+++ b/index.html
@@ -133,100 +133,112 @@
 			<div id="head8" class="hidden" data-translate="director-video-muted-you">The director has disabled your camera temporarily.</div>
 		</div>
 		<div id="controlButtons" class="hidden">
-			<div id="obsState" class="hidden" >ACTIVE</div>
-			<div id="subControlButtons">
-			
-				<div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i class="toggleSize las la-eye"></i>
-				</div>
-			
-				<div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue"  aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="queuetoggle" class="toggleSize las la-stream"></i>
-					<div id="queueNotification"></div>
-				</div>
-				
-				<div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleFileshare()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float" style="cursor: pointer;" >
-					<i id="filesharetoggle" class="toggleSize las la-file-upload"></i> 
-					<div id="transferNotification"></div>
-				</div>
-				
-				<div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="chattoggle" class="toggleSize las la-comment-alt"></i>
-					<div id="chatNotification"></div>
-				</div>
-				<div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
-					<i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
-				</div>
-				<div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();"  alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
-					<i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
-				</div>
-				<div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
-					<i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-video"></i>
-				</div>
-				<div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
-					<i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop"></i>
-				</div>
-				<div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
-					<i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
-				</div>
-				<div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
-					<i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
-				</div>
-				<div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
-					<i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-window-maximize"></i>
-				</div>
-				<div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
-					<i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
-					<div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
-						Stop Sharing Website
-					</div>
-				</div>
-				<div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen"  onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
-					<i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt"></i>
-				</div>
-				<div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cycle the Cameras"  onclick="cycleCameras()" class="hidden float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
-					<i id="settingstoggle" class="toggleSize las la-sync-alt"></i> 
-				</div>
-				
-				<div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
-					<i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
-				</div>
-				
-				<div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Room Settings" onclick="toggleRoomSettings();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
-					<i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
-				</div>
-				
-				<div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Your audio and video Settings"  onclick="toggleSettings()" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
-					<i id="settingstoggle" class="toggleSize las la-cog"></i>
-				</div>
-				
-				<div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float"  tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
-					<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
-				</div>
-				<div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-raised="0" title="Alert the host you want to speak"  aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
-				</div>
-				
-				<div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
-					<i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
-				</div>
-				<div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
-				</div>
-				
-				<div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
-					<i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
-				</div>
-				<div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
-					<small>Stop<br>Screen<br>Record</small>
-				</div>
-				<span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
-				<span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
-				<span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
-				<div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="hidden float"  tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
-					<i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
-				</div>
-			</div>
+            <div class="controlPositioning">
+                <div id="obsState" class="hidden" >ACTIVE</div>
+                <div id="chatModule" style="display:none;">
+                    <a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
+                    <div id="chatBody"> 
+                        <div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
+                            Welcome to the chat! You can send text messages directly to connected peers from here.
+                        </div>
+                    </div>
+                    <input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
+                    <button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
+                </div>
+                <div id="subControlButtons">
+                
+                    <div id="blindAllGuests" title="Blind all guests in room (toggle)" alt="Blind all guests in room (toggle)" aria-label="Blind all guests in room" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="blindAllGuests(this, event)"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i class="toggleSize las la-eye"></i>
+                    </div>
+                
+                    <div id="queuebutton" title="Load the next guest in queue" alt="Load the next guest in queue"  aria-label="Load next guest in queue" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="nextQueue()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i id="queuetoggle" class="toggleSize las la-stream"></i>
+                        <div id="queueNotification"></div>
+                    </div>
+                    
+                    <div id="sharefilebutton" title="Transfer any file to the group" alt="Transfer any file to the group" aria-label="Select file to transfer" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleFileshare()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float" style="cursor: pointer;" >
+                        <i id="filesharetoggle" class="toggleSize las la-file-upload"></i> 
+                        <div id="transferNotification"></div>
+                    </div>
+                    
+                    <div id="chatbutton" title="Toggle the Chat" alt="Toggle the Chat" aria-label="Text chat" onmousedown="event.preventDefault(); event.stopPropagation();"  onclick="toggleChat()"  tabindex="16" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i id="chattoggle" class="toggleSize las la-comment-alt"></i>
+                        <div id="chatNotification"></div>
+                    </div>
+                    <div id="mutespeakerbutton" onmousedown="event.preventDefault(); event.stopPropagation();" alt="Toggle the speaker output." aria-label="Mute Speaker output" title="Mute the Speaker" onclick="toggleSpeakerMute()"  tabindex="17" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;" >
+                        <i id="mutespeakertoggle" class="toggleSize las la-volume-up" style="position: relative; top: 0.5px;"></i>
+                    </div>
+                    <div id="mutebutton" onmousedown="toggleMute(false, event);event.preventDefault(); event.stopPropagation();"  alt="Mute the Mic" aria-label="Mute Microphone" title="Mute the Mic" ontouchstart="toggleMute(false, event);event.preventDefault(); event.stopPropagation();" tabindex="18" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
+                        <i id="mutetoggle" class="toggleSize las la-microphone" style="position: relative; top: 0.5px;"></i>
+                    </div>
+                    <div id="mutevideobutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Disable the Camera" alt="Disable the Camera" aria-label="Mute Camera" onclick="toggleVideoMute()"   tabindex="19" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="hidden float" style="cursor: pointer;">
+                        <i id="mutevideotoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-video"></i>
+                    </div>
+                    <div id="screensharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Share a Screen with others" aria-label="Share a screen" onclick="screenshareTypeDecider(1)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share" style="cursor: pointer;">
+                        <i id="screensharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-desktop"></i>
+                    </div>
+                    <div id="screenshare2button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Add a Screen Share" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(2)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
+                        <i id="screenshare2toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
+                    </div>
+                    <div id="screenshare3button" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a Screen with others" alt="Add a Screen Share" aria-label="Share a screen"  onclick="screenshareTypeDecider(3)" tabindex="20" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden task" data-menu="context-menu-screen-share"  style="cursor: pointer;">
+                        <i id="screenshare3toggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las  la-tv"></i>
+                    </div>
+                    <div id="websitesharebutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Share a website with your guests (IFRAME)" aria-label="Share a website" alt="Share a website with your guests (IFRAME)" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
+                        <i id="websitesharetoggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-window-maximize"></i>
+                    </div>
+                    <div id="websitesharebutton2" onmousedown="event.preventDefault(); event.stopPropagation();" title="Hold CTRL (or CMD) and click to spotlight this video" alt="Share a website as an embedded iFRAME" aria-label="Share a website" onclick="shareWebsite(false, event)" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" class="float2 orange shake hidden" style="cursor: pointer;max-width: 200px;margin: auto;padding: 0 10px;">
+                        <i onmousedown="event.preventDefault(); event.stopPropagation();" class="toggleSize las la-window-close" style="display: inline-block;"></i>
+                        <div style="display: inline-block;width: 85px;line-height: 1; font-size: 0.9em;">
+                            Stop Sharing Website
+                        </div>
+                    </div>
+                    <div id="fullscreenPage" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Full-screen the page" alt="Full-screen the page" aria-label="Full screen"  onclick="fullscreenPageToggle()" tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);"  class="float hidden" style="cursor: pointer;">
+                        <i id="fullscreenPageToggle" onmousedown="event.preventDefault(); event.stopPropagation();"  class="toggleSize las la-expand-arrows-alt"></i>
+                    </div>
+                    <div id="flipcamerabutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cycle the Cameras"  onclick="cycleCameras()" class="hidden float"  tabindex="21" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Cycle Cameras" alt="Cycle the Cameras">
+                        <i id="settingstoggle" class="toggleSize las la-sync-alt"></i> 
+                    </div>
+                    
+                    <div id="obscontrolbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="OBS Remote Controller; start/stop and change scenes." onclick="toggleOBSControls();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="Remote OBS control menu" alt="Toggle the Remote OBS Controls Menu">
+                        <i id="obscontroltoggle" class="toggleSize las la-gamepad"></i>
+                    </div>
+                    
+                    <div id="roomsettingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Room Settings" onclick="toggleRoomSettings();" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle the Room Settings Menu" aria-label="Room settings menu">
+                        <i id="roomsettingstoggle" class="toggleSize las la-users-cog"></i>
+                    </div>
+                    
+                    <div id="settingsbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Your audio and video Settings"  onclick="toggleSettings()" class="hidden float"  tabindex="22" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" alt="Toggle Settings Menu" aria-label="Settings menu">
+                        <i id="settingstoggle" class="toggleSize las la-cog"></i>
+                    </div>
+                    
+                    <div id="hangupbutton"  onmousedown="event.preventDefault(); event.stopPropagation();" title="Hangup the Call" aria-label="Hang up" alt="Hangup the Call" onclick="hangup()" class="hidden float"  tabindex="23" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" >
+                        <i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
+                    </div>
+                    <div id="raisehandbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-raised="0" title="Alert the host you want to speak"  aria-label="Raise hand" alt="Alert the host you want to speak" tabindex="24" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="raisehand()" class="hidden float" style="cursor: pointer;">
+                        <i class="toggleSize las la-hand-paper" style="position: relative; right: 1px;" aria-hidden="true"></i>
+                    </div>
+                    
+                    <div id="pptbackbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Go back a slide" aria-label="Back a slide" alt="Go back a slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="gobackSlide()" class="hidden float red" style="cursor: pointer;">
+                        <i class="toggleSize las la-chevron-left" style="position: relative; right: 1px;" aria-hidden="true"></i>
+                    </div>
+                    <div id="pptnextbutton" onmousedown="event.preventDefault(); event.stopPropagation();" title="Next slide" aria-label="Next slide" alt="Next slide" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="nextSlide()" class="hidden float" style="cursor: pointer;">
+                        <i class="toggleSize las la-chevron-right" style="position: relative; right: 1px;" aria-hidden="true"></i>
+                    </div>
+                    
+                    <div id="recordLocalbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Record your stream to disk" aria-label="Record your stream to disk" alt="Record your stream to disk" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalVideoToggle();" class="hidden float" style="cursor: pointer;">
+                        <i class="toggleSize las la-dot-circle" style="position: relative;" aria-hidden="true"></i>
+                    </div>
+                    <div id="recordLocalScreenbutton" onmousedown="event.preventDefault(); event.stopPropagation();"  data-state="0" title="Stop screen share recording" aria-label="Stop screen share recording" alt="Stop screen recording" tabindex="25" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" onclick="recordLocalScreenStopRecord();" class="hidden float" style="cursor: pointer;">
+                        <small>Stop<br>Screen<br>Record</small>
+                    </div>
+                    <span id="miniPerformer" style="pointer-events: auto;" class="hidden"></span>
+                    <span id="rooms" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;"></span>
+                    <span id="groups" class="hidden" style="padding-top:3px;padding-left:6px;pointer-events: auto;color:#fff;text-align: center;"></span>
+                    <div id="hangupbutton2" onmousedown="event.preventDefault(); event.stopPropagation();"  title="Cancel the Director's Video/Audio"  onclick="hangup2()" class="hidden float"  tabindex="26" role="button" aria-pressed="false" onkeyup="enterPressedClick(event,this);" style="cursor: pointer;" aria-label="stop publishing audio and video" alt="Disconnect Direcotor's cam">
+                        <i class="toggleSize las la-phone rotate225" aria-hidden="true"></i>
+                    </div>
+                </div>
+            </div>
 		</div>
 		<span id="miniTaskBar" style="float: right; bottom: 0px;right:0; position:fixed; display:flex;">
 			<div id="closedList_connectUsers" class="hidden"  onclick="getById('connectUsers').classList.remove('hidden');getById('closedList_connectUsers').classList.add('hidden');">
@@ -411,8 +423,8 @@
 						<span><i class="las la-headphones"></i><span data-translate="you-are-using-headphones-earphones">You are using headphones / earphones</span></span>
 					</div>
 					<div id="videoMenu" class="videoMenu">
-						<span style="padding-right:2px;display:inline-block;position:relative;top:1px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
-						<span style="display:inline-block;padding-top: 5px;">
+						<span style="display:inline-block;position:relative;padding: 7px 0px;"><i class="las la-video"></i><span data-translate="video-source"> Video Source </span></span>
+						<span style="display:flex;align-items: center;">
 							<select id="videoSourceSelect" alt="Video source list"></select>
 							<span id="gear_webcam" onclick="toggle(document.getElementById('videoSettings'));">
 								<i class="las la-cog" style="font-size: 140%; vertical-align: middle;" aria-hidden="true"></i>
@@ -2046,19 +2058,7 @@
 				</li>
 			</ul>
 		</nav>
-		
-		<div id="chatModule" style="display:none;text-align:right">
-			<a target="popup" id="popOutChat" style="cursor:pointer;text-align:right;color:#B3C7F9;" onclick="createPopoutChat();"><i class="las la-external-link-alt"></i></a>
-			<div id="chatBody"> 
-				<div class="inMessage" id="welcomeMsg" data-translate='welcome-to-vdo-ninja-chat'>
-					Welcome to the chat! You can send text messages directly to connected peers from here.
-				</div>
-			</div>
-			<input type="text" id="chatInput" placeholder="Enter chat message to send here" onkeypress="EnterButtonChat(event)" />
-			<button class="chatBarInputButton" onclick="sendChatMessage()" data-translate='send-chat'>Send</button>
-		</div>
-		
-		
+				
 		<div id="roomSettings" class="customModelPopup" style="display:none; user-select: none;">
 			<div class="promptModalInner">
 				<span class='modalClose' onclick="toggleRoomSettings();">×</span>
diff --git a/lib.js b/lib.js
index 3f47844..b8f644f 100644
--- a/lib.js
+++ b/lib.js
@@ -2010,7 +2010,7 @@ function makeMiniDraggableElement(elmnt) {
 	
 	try {
 		elmnt.dragElement = false;
-		elmnt.style.bottom = "auto";
+		// elmnt.style.bottom = "auto";
 		elmnt.style.cursor = "grab";
 		
 		elmnt.stashonmouseup = null;
@@ -2168,110 +2168,192 @@ function makeMiniDraggableElement(elmnt) {
 	elmnt.ontouchstart = dragMouseDown;
 }
 				
-function makeDraggableElement(elmnt, absolute=false) {
+function makeDraggableElement(element) {
+
+        let isDragging = false;
+        let initialX;
+        let currentX;
+        let xOffset = 0;
+        let initialY;
+        let currentY;
+        let yOffset = 0;
+    
+        element.addEventListener('mousedown', dragStart);
+        document.addEventListener('mouseup', dragEnd);
+    
+        function dragStart(e) {
+            initialX = e.clientX - xOffset;
+            initialY = e.clientY - yOffset;
+    
+            document.addEventListener('mousemove', drag);
+            isDragging = true;
+        }
+    
+        function dragEnd(e) {
+            initialX = currentX;
+            initialY = currentY;
+    
+            document.removeEventListener('mousemove', drag);
+            isDragging = false;
+            updateMixer();
+        }
+    
+        function drag(e) {
+            if (isDragging) {
+                currentX = (e.clientX - initialX);
+                currentY = (e.clientY - initialY);
+    
+                // Get the dimensions of the viewport
+                let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+                let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
+
+                // Get the dimensions of the object
+                let elementWidth = element.offsetWidth;
+                let elementHeight = element.offsetHeight;
+                // console.log('elementWidth:\n',elementWidth)
+                // console.log('elementHeight:\n',elementHeight)
+    
+                // Calculate the boundaries
+                let maxX = vw - elementWidth;
+                let maxY = vh - elementHeight;
+                let minX = 0;
+                let minY = 0;
+    
+                // Calculate real boundaries (parent position: fixed issues) 
+                let topOffset = 0;
+                let leftOffset = 0;
+                let elementOffset = element;
+                while (elementOffset) {
+                    topOffset += elementOffset.offsetTop;
+                    leftOffset += elementOffset.offsetLeft;
+                    elementOffset = elementOffset.offsetParent;
+                }
+    
+                // Adjust the position if it's going beyond the boundaries   
+                let realX = currentX + leftOffset; 
+                let realY = currentY + topOffset;
+
+                if (realX > maxX) {
+                    currentX = maxX - leftOffset;
+                } else if (realX < minX) {
+                    currentX = minX - leftOffset;
+                }
+    
+                if (realY > maxY) {
+                    currentY = maxY - topOffset;
+                } else if (realY < minY) {
+                    currentY = minY - topOffset;
+                }
+                // Update the position and offset
+                xOffset = currentX;
+                yOffset = currentY;
+    
+                element.style.transform = `translate(${currentX}px, ${currentY}px)`;
+            }
+        }
 	
-	if (session.disableMouseEvents){return;}
+	// if (session.disableMouseEvents){return;}
 	
-	try {
-		elmnt.dragElement = false;
-		elmnt.style.bottom = "auto";
-		elmnt.style.cursor = "grab";
-		elmnt.stashonmouseup = null;
-		elmnt.stashonmousemove = null;
-	} catch (e) {
-		errorlog(e);
-		return;
-	}
-	var pos1 = 0;
-	var pos2 = 0;
-	var pos3 = 0;
-	var pos4 = 0;
-	var timestamp = false;
+	// try {
+	// 	elmnt.dragElement = false;
+	// 	elmnt.style.bottom = "auto";
+	// 	elmnt.style.cursor = "grab";
+	// 	elmnt.stashonmouseup = null;
+	// 	elmnt.stashonmousemove = null;
+	// } catch (e) {
+	// 	errorlog(e);
+	// 	return;
+	// }
+	// var pos1 = 0;
+	// var pos2 = 0;
+	// var pos3 = 0;
+	// var pos4 = 0;
+	// var timestamp = false;
 	
 	
-	var enterEventCount = 0;
-	var leaveEventCount = 0;
+	// var enterEventCount = 0;
+	// var leaveEventCount = 0;
 
 
-	function dragMouseDown(e) {
-		timestamp = Date.now();
+	// function dragMouseDown(e) {
+	// 	timestamp = Date.now();
 		
-		e = e || window.event;
-		e.preventDefault();
+	// 	e = e || window.event;
+	// 	e.preventDefault();
 		
-		pos3 = e.clientX;
-		pos4 = e.clientY;
-		//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
-		//elmnt.stashonmousemove = document.onmousemove;
-		//elmnt.stashonclick = document.onclick;
+	// 	pos3 = e.clientX;
+	// 	pos4 = e.clientY;
+	// 	//elmnt.stashonmouseup = document.onmouseup; // I don't want to interfere with other drag events.
+	// 	//elmnt.stashonmousemove = document.onmousemove;
+	// 	//elmnt.stashonclick = document.onclick;
 
-		document.onmouseup = function(event){closeDragElement(event, elmnt);};
+	// 	document.onmouseup = function(event){closeDragElement(event, elmnt);};
 		
-		document.onmousemove = function(event){elementDrag(elmnt,event);};
+	// 	document.onmousemove = function(event){elementDrag(elmnt,event);};
 		
-		if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
+	// 	if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
 		
-		elmnt.onmouseleave = function(event){
-			leaveEventCount+=1;
-			elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
-					closeDragElement(evt1, ele);}
-				,100, elmnt, event);
-		};
-		elmnt.onmouseenter = function(event){
-			enterEventCount+=1;
-			if (enterEventCount>=leaveEventCount){
-				if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
-			} else {
-				if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
-					clearTimeout(elmnt.stopDragTimeout);
-					elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
+	// 	elmnt.onmouseleave = function(event){
+	// 		leaveEventCount+=1;
+	// 		elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
+	// 				closeDragElement(evt1, ele);}
+	// 			,100, elmnt, event);
+	// 	};
+	// 	elmnt.onmouseenter = function(event){
+	// 		enterEventCount+=1;
+	// 		if (enterEventCount>=leaveEventCount){
+	// 			if ("stopDragTimeout" in elmnt){clearTimeout(elmnt.stopDragTimeout);}
+	// 		} else {
+	// 			if (("stopDragTimeout" in elmnt) && (elmnt.stopDragTimeout)){
+	// 				clearTimeout(elmnt.stopDragTimeout);
+	// 				elmnt.stopDragTimeout = setTimeout(function(ele,evt1){
 						
-						closeDragElement(evt1, ele);}
-					,100, elmnt, event);
-				}
-			}
-		};
+	// 					closeDragElement(evt1, ele);}
+	// 				,100, elmnt, event);
+	// 			}
+	// 		}
+	// 	};
 		
-	}
-	function elementDrag(ele,e) {
+	// }
+	// function elementDrag(ele,e) {
 		
-		e = e || window.event;
-		if (("buttons" in e) && (e.buttons!==1)){return;}
+	// 	e = e || window.event;
+	// 	if (("buttons" in e) && (e.buttons!==1)){return;}
 		
-		e.preventDefault();
+	// 	e.preventDefault();
 		
-		ele.dragElement = true;
-		pos1 = pos3 - e.clientX;
-		pos2 = pos4 - e.clientY;
-		pos3 = e.clientX;
-		pos4 = e.clientY;
+	// 	ele.dragElement = true;
+	// 	pos1 = pos3 - e.clientX;
+	// 	pos2 = pos4 - e.clientY;
+	// 	pos3 = e.clientX;
+	// 	pos4 = e.clientY;
 
-		var topDrag = (ele.offsetTop - pos2 );
-		if (absolute){
-			if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
-				topDrag = (-3 + (window.innerHeight - ele.clientHeight));
-			}
-		} else {
-			if (topDrag > -3){
-				topDrag = -3;
-			}
-		}
-		ele.style.top = topDrag + "px";
-		ele.style.left = (ele.offsetLeft - pos1) + "px";
+	// 	var topDrag = (ele.offsetTop - pos2 );
+	// 	if (absolute){
+	// 		if (topDrag > (-3 + (window.innerHeight - ele.clientHeight))){
+	// 			topDrag = (-3 + (window.innerHeight - ele.clientHeight));
+	// 		}
+	// 	} else {
+	// 		if (topDrag > -3){
+	// 			topDrag = -3;
+	// 		}
+	// 	}
+	// 	ele.style.top = topDrag + "px";
+	// 	ele.style.left = (ele.offsetLeft - pos1) + "px";
 		
-	}
-	function closeDragElement(event=false, ele=false) {
-		document.onmouseup = null;
-		document.onmousemove = null
-		ele.onmouseleave = null;
-		ele.onmouseenter = null;
-		enterEventCount = 0;
-		leaveEventCount = 0;
-		updateMixer();
-		//document.onclick = elmnt.stashonclick;
-	}
+	// }
+	// function closeDragElement(event=false, ele=false) {
+	// 	document.onmouseup = null;
+	// 	document.onmousemove = null
+	// 	ele.onmouseleave = null;
+	// 	ele.onmouseenter = null;
+	// 	enterEventCount = 0;
+	// 	leaveEventCount = 0;
+	// 	updateMixer();
+	// 	//document.onclick = elmnt.stashonclick;
+	// }
 	
-	elmnt.onmousedown = dragMouseDown;
+	// elmnt.onmousedown = dragMouseDown;
 }
 
 function removeStorage(cname){
@@ -10520,7 +10602,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
 		session.chat = true;
 		getById("chattoggle").className = "las la-comment-dots toggleSize";
 		getById("chatbutton").className = "float";
-		getById("chatModule").style.display = "block";
+		getById("chatModule").style.display = "flex";
 		getById("chatInput").focus(); // give it keyboard focus
 	} else {
 		session.chat = false;
@@ -10537,7 +10619,7 @@ function toggleChat(event = null) { // TODO: I need to have this be MUTE, toggle
 	if (getById("chatNotification").value) {
 		getById("chatNotification").value = 0;
 	}
-	getById("chatNotification").classList.remove("notification");
+	getById("chatNotification").classList.remove("notification", "red");
 }
 
 function directorAdvanced(ele) {
@@ -22734,7 +22816,7 @@ function addDownloadLink(fileList, UUID, pc){
 		} else {
 			getById("chatNotification").value = 1;
 		}
-		getById("chatNotification").classList.add("notification");
+		getById("chatNotification").classList.add("notification", "red");
 	}
 	
 	//if (session.broadcastChannel !== false) {
@@ -29470,7 +29552,7 @@ function getChatMessage(msg, label = false, director = false, overlay = false) {
 		} else {
 			getById("chatNotification").value = 1;
 		}
-		getById("chatNotification").classList.add("notification");
+		getById("chatNotification").classList.add("notification", "red");
 	}
 
 	
diff --git a/main.css b/main.css
index 525b13a..ed6e3af 100644
--- a/main.css
+++ b/main.css
@@ -249,11 +249,6 @@ button.hint {
 	visibility: hidden;
 }
 
-
-/* #screenshare3button.green{
-	animation: pulse 5s infinite;
-} */
-
 /* Clicked buttons overwrite */
 .red {
 	background-color: #840000 !important;
@@ -296,15 +291,6 @@ button.hint {
 	background-color: #5c7785 !important;
 }
 
-/* button.red {
-	-webkit-app-region: no-drag;
-	padding: 10px;
-	margin: 10px 0px;
-	cursor: pointer;
-	border-radius: 2px;
-	color: white;
-} */
-
 button {
 	-webkit-app-region: no-drag;
 	padding: 7px 10px 6px 6px;
@@ -1167,16 +1153,15 @@ hr {
 }
 
 .notification {
-	position: relative;
-	top: -40px;
-	right: -33px;
-	padding: 2px 0;
-	border-radius: 50%;
-	background: red;
-	color: white;
-	width: 11px;
-	height: 11px;
-	margin: 0;
+    position: absolute;
+    top: -4px;
+    right: -4px;
+    padding: 2px 0;
+    border-radius: 50%;
+    color: white;
+    width: 11px;
+    height: 11px;
+    margin: 0;
 }
 .queueNotification {
 	position: relative;
@@ -1222,9 +1207,10 @@ button.glyphicon-button.active.focus {
     position: fixed;
     z-index: 995;
     padding: 0px 10px;
-    bottom: 0;
+    bottom: 10px;
+    padding: 0 10px;
     border: 0;
-    min-height: 52px;
+    min-height: 0; /* Must have a min-height or drag-drop doesn't work */
     pointer-events: none;
     width: 100%;
     justify-content: center;
@@ -1235,6 +1221,16 @@ button.glyphicon-button.active.focus {
 	display: none;
 }
 
+.controlPositioning {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+}
+
 #subControlButtons {
     display: flex;
     position: absolute;
@@ -1246,8 +1242,9 @@ button.glyphicon-button.active.focus {
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
-    bottom: 3px;
+    bottom: 0px;
     min-width: 230px;
+    cursor: grab;
 }
 
 #subControlButtons:empty{
@@ -1270,6 +1267,11 @@ button.glyphicon-button.active.focus {
     border-radius: 4px;
 }
 
+/* Set for the notification button to use as offset */
+#chatbutton {
+    position: relative;
+}
+
 
 #container.vidcon {
 	height:100%;
@@ -1295,10 +1297,6 @@ button.glyphicon-button.active.focus {
 }
 
 @media only screen and (max-width: 640px){
-	#controlButtons {
-		/* transform: scale(0.9); */
-	}
-	
 	.labelSmall {
 		display:inherit;
 		padding:5px;
@@ -1323,17 +1321,6 @@ button.glyphicon-button.active.focus {
 		margin-right: 1px;
 	}
 }
-@media only screen and (max-width: 400px){
-	#controlButtons {
-		/* transform: scale(0.8); */
-	}
-	
-}
-@media only screen and (max-width: 300px){
-	#controlButtons {
-		/* transform: scale(0.7); */
-	}	
-}
 
 .orange{
 	background-color: #8d5e1a
@@ -1403,9 +1390,6 @@ button.btnArmTransferRoom.selected{
 	#gridlayout>#container.vidcon {
 		height:85%
 	}
-	#controlButtons {
-        /* transform: scale(0.9); */
-	}
 	#header{
 		min-height:0px;
 	}
@@ -1423,9 +1407,6 @@ button.btnArmTransferRoom.selected{
 	#gridlayout>#container.vidcon {
 		height:78%
 	}
-	#controlButtons {
-        /* transform: scale(0.8); */
-	}
 }
 @media only screen and (max-height: 190px){
 	#gridlayout>#container.vidcon {
@@ -1436,9 +1417,6 @@ button.btnArmTransferRoom.selected{
 	#gridlayout>#container.vidcon {
 		height:70%
 	}
-	#controlButtons {
-        /* transform: scale(0.7); */
-	}
 }
 @media only screen and (max-height: 120px){
 	#gridlayout>#container.vidcon {
@@ -1803,6 +1781,73 @@ input[type=range]:focus::-ms-fill-upper {
 	
 }
 
+/* ////// Icon resizing for mobile subControl bar ////// */
+
+@media only screen and (max-width: 500px) {
+    #subControlButtons {
+        position: unset;
+        min-width: unset;
+    }
+    #subControlButtons > div {
+        min-width: 40px;
+        min-height: 40px;
+        margin: 4px;
+    }
+    #SubControlButtons > div i {
+        font-size: 28px;
+    }
+}
+
+@media only screen and (max-width: 410px) {
+    #subControlButtons > div {
+        min-width: 35px;
+        min-height: 35px;
+        border-radius: 6px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 24px;
+    }
+}
+
+@media only screen and (max-width: 360px) {
+    #subControlButtons > div {
+        min-width: 30px;
+        min-height: 30px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 20px;
+    }
+}
+
+@media only screen and (max-width: 320px) {
+    #subControlButtons > div {
+        min-width: 28px;
+        min-height: 28px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 18px;
+    }
+}
+
+@media only screen and (max-width: 280px) {
+    #subControlButtons > div {
+        min-width: 25px;
+        min-height: 25px;
+        border-radius: 4px;
+        margin: 3px;
+    }
+    #SubControlButtons > div i {
+        font-size: 16px;
+    }
+}
+
+
+/* //////////////////////////////////// */
 
 @media only screen and (max-height: 650px) {
 	body {
@@ -1848,9 +1893,8 @@ input[type=range]:focus::-ms-fill-upper {
 	#fakeguest2{
 		display: none!important;
 	}
-    #subControlButtons {
-        position: unset;
-        min-width: unset;
+    #chatModule {
+        margin-bottom: 5px !important;
     }
 }
 @media only screen and (max-width: 292px) {
@@ -1925,11 +1969,6 @@ input[type=range]:focus::-ms-fill-upper {
 		min-width: 90% !important;
 		overflow: hidden !important;
 	}
-	/* #popupSelector {
-		padding: 20px 5px 0px 15px !important;
-		font-size: 92%;
-		width: 385px !important
-	} */
 	.popupSelector_constraints{
 		margin:25px 15% 0 1%;
 	}
@@ -1949,19 +1988,8 @@ input[type=range]:focus::-ms-fill-upper {
 	.popupSelector_constraints{
 		margin:20px 12% 0 2%;
 	}
-
-	/* #popupSelector {
-		padding: 0 0 20px 0 !important;
-	} */
 }
 
-/* @media only screen and (max-height: 330px) {
-	#popupSelector {
-		font-size: 92%;
-	}
-} */
-
-
 #popupSelector_user_settings label{
 	color:white;
 	text-shadow: 0px 0px 6px #000000FF;
@@ -2998,10 +3026,9 @@ button.toggleSettings{
 }
 
 #videoSourceSelect {
-	display: inline-block;
+    flex: 1;
 	vertical-align: middle;
 	font-size: 100%;
-	max-width: 260px;
     border: solid 1px #AAA;
     border-radius: 4px;
 }
@@ -3146,6 +3173,7 @@ button.toggleSettings{
 	vertical-align: middle;
 	text-align: left;
 }
+
 #videoMenu3{
 	background-color: #f3f3f3;
 	width: 450px;
@@ -3290,23 +3318,20 @@ input[type=checkbox] {
 }
 .outMessage {
 	color: #000;
-	margin: 3px;
 	border-radius: 5px;
 	background: #BCF;
 	padding: 5px;
 	text-align: right;
-	margin: 10px 3px;
+    margin-bottom: 5px;
 }
 #chatBody {
-	z-index: 12;
-	background-color: #0004;
-	width: 100%;
-	border-radius: 5px;
-	padding: 1px 7px;
-	overflow-y:scroll;
-	overflow-wrap: anywhere;
-	max-height: 800px;
-    line-height: 22px;
+    z-index: 12;
+    background-color: #0004;
+    width: 100%;
+    border-radius: 5px;
+    overflow-y: scroll;
+    overflow-wrap: anywhere;
+    max-height: 500px;
 }
 
 #chatBody::-webkit-scrollbar {
@@ -3325,31 +3350,24 @@ div#chatBody a {
 }
 
 #chatModule {
-	bottom: 50px;
-	position: fixed;
-	margin: 10px;
-	align-self: center;
-	width: 574px;
-	min-width: 300px;
-	max-width: 100%;
-	z-index:3;
+    display: flex;
+    flex-wrap: wrap;
+    z-index: 3;
+    width: 100%;
+    max-width: 500px;
+    z-index: 3;
+    margin-bottom: 65px;
+    gap: 0px 5px;
 }
 #chatInput {
 	color: #000;
 	background-color: #FFFE;
-	max-width: 700px;
-	min-width: 320px;
-	width: calc(100% - 89px);
-	font-size: 105%;
+	width: 70%;
 	padding: 3px;
-	border: 3px solid black;
 }
 .chatBarInputButton {
-	width:60px;
-	background-color:#EEE;
-	top: -1px;
-	position: relative;
-	margin-right: 10px;
+	width: calc(30% - 5px);
+    margin: unset;
 }
     
 .debugStats {
@@ -3447,32 +3465,7 @@ div#chatBody a {
 	font-weight: bold;
 	border-bottom: 2px solid #364c84;
 }
-@media only screen and (max-width: 390px) {
-	#chatBody {
-		z-index: 12;
-		background-color: #FFF1;
-		width: 100%;
-		border-radius: 5px;
-		padding: 1px 7px;
-		margin: 0px;
-	}
-	
-	#chatModule {
-		bottom: 50px;
-		position: fixed;
-		margin: 0px;
-		align-self: center;
-		width: 400px;
-		max-width: 100%;
-	}
-	
-	#chatInput {
-		max-width: 99%;
-		min-width: 240px;
-		margin-left: 11px;
-		font-size: 100%;
-	}
-}
+
 .directorMargins {
 	margin: var(--director-margin);
 }
@@ -4980,9 +4973,6 @@ body.darktheme .form-group .multiselect {
 body.darktheme h2 {
 	color: #DDD;
 }
-body.darktheme button {
-    /* filter: brightness(0.70); */
-}
 body.darktheme .column .las {
 	color: var(--discord-text);
 }
@@ -5023,9 +5013,9 @@ body.darktheme select{
     background-color: var(--discord-grey-7);
     color: var(--discord-text);
 }
-body.darktheme .white {
+/* body.darktheme .white {
 	color: var(--discord-text);
-}
+} */
 body.darktheme .directorsgrid .vidcon {
     background-color: var(--discord-grey-3);
 	color: var(--discord-text);
@@ -5056,7 +5046,8 @@ body.darktheme .actionMessage {
 	background-color: #b1b1b1;
 }
 body.darktheme #chatInput{
-	background-color:#ccc;
+    background-color: var(--discord-grey-7);
+    color: var(--discord-text)
 }
 body.darktheme .popup-message{
 	background-color: #9b9b9b !important;
@@ -5148,9 +5139,6 @@ body.darktheme .invite_setting_group_links a {
 	color:#d2e5ff!important;
 }
 
-
-
-
 /* ---- BASIC CSS CLASSES ---- */
 .pressed {
 	background: #1e0000 !important;