<div class="quickSettingPanel" id="quickSettingPanel">
    <div class="utils">
        <div class="title">
            Settings <i class="fa-solid fa-gear"></i> <span class="shortcut">[Alt+s]</span>
        </div>
        <div class="subsettingsContainer">
            <div class="subsettings">
                <div class="subtitle">Sounds <i class="fa-solid fa-volume-high"></i></div>
                <!-- Enable/disable button sounds -->
                <div class="field-checkers clickable playable">
                    <input type="checkbox" id="buttonSound">
                    <label for="buttonSound">
                        <div class="textContainer">
                            Click Sound
                        </div>
                        <span class="toggleButton"></span>
                    </label>
                </div>
                <!-- Enable/disable message sounds -->
                <div class="field-checkers clickable playable">
                    <input type="checkbox" id="messageSound">
                    <label for="messageSound">
                        <div class="textContainer">
                            Message sound
                        </div>
                        <span class="toggleButton"></span>
                    </label>
                </div>
            </div>
    
            <div class="subsettings">
                <div class="subtitle">Keyboard <i class="fa-regular fa-keyboard"></i></div>
                <div class="field-checkers keyboardMode clickable playable">
                    <input type="radio" name="sendMethod" id="Ctrl+Enter" value="Ctrl+Enter">
                    <label for="ctrl">
                        <div class="textContainer">
                            Use Ctrl+Enter to send
                            <div class="moreInfo">Enter to add newlines</div>
                        </div>
                        <span class="toggleButton"></span>
                    </label>
                </div>
    
                <div class="field-checkers keyboardMode clickable playable">
                    <input type="radio" name="sendMethod" id="Enter" value="Enter">
                    <label for="nonctrl">
                        <div class="textContainer">
                            Use Enter to send
                            <div class="moreInfo">Shift+Enter to add newlines</div>
                        </div>
                        <span class="toggleButton"></span>
                    </label>
                </div>
            </div>

            <!--Quick emoji-->
            <div class="subsettings">
                <div class="subtitle">Quick emoji <i class="fa-regular fa-smile"></i></div>
                <div class="field-checkers clickable playable">
                    <input type="checkbox" id="quickEmoji" checked>
                    <label for="quickEmoji">
                        <div class="textContainer">
                            Enable quick emoji
                        </div>
                        <span class="toggleButton"></span>
                    </label>
                </div>
                <div class="field-checkers clickable playable">
                    <button class="hyper" id="chooseQuickEmojiButton">Change Emoji <span class="quickEmojiIcon"></span></button>
                </div>
            </div>

            <div id="themeButton" class="button clickable playable" title="Select themes [Alt+t]"><i class="fa-solid fa-palette"></i><span>Theme</span><i class="fa-solid fa-brush"></i></div>
        </div>
    </div>
</div>