- Scan ID:
- adddbccf-c4e5-4977-9a7e-01925414553eFinished
- Submitted URL:
- https://r8.whiteboardfox.com/85379604-3797-0163
- Report Finished:
Links · 0 found
The outgoing links identified from the page
JavaScript Variables · 111 found
Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope
| Name | Type |
|---|---|
| 0 | object |
| 1 | object |
| 2 | object |
| 3 | object |
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| hexToRgb | function |
| getCssFilterFromHexColor | function |
| getCssFilterFromHexColorJs | function |
Console log messages · 3 found
Messages logged to the web console
| Type | Category | Log |
|---|---|---|
| warning | other |
|
| log | other |
|
| warning | other |
|
HTML
The raw HTML body of the page
<!DOCTYPE html><!-- The DOCTYPE declaration above will set the --><!-- browser's rendering engine into --><!-- "Standards Mode". Replacing this declaration --><!-- with a "Quirks Mode" doctype is not supported. --><html><head>
<title>Online Whiteboard 85379604-3797-0163</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="gwt:property" content="locale=en">
<meta name="description" content="Whiteboard Fox is a simple online whiteboard that allows you to collaborate with others in real time. Share your ideas, brainstorm with your team, and take notes all in one place. Whiteboard Fox is easy to use, and it's free to get started.">
<meta property="og:title" content="85379604-3797-0163 - Whiteboard Fox">
<meta property="og:description" content="Whiteboard Fox is a simple online whiteboard that allows you to collaborate with others in real time.">
<meta property="og:image" content="https://r8.whiteboardfox.com/snapshot?thumbnail=true&diagram=8537960437970163">
<meta property="og:image:alt" content="Preview thumbnail of the shared whiteboard">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
<meta property="og:site_name" content="Whiteboard Fox">
<meta property="og:type" content="article">
<meta property="og:url" content="https://r8.whiteboardfox.com/85379604-3797-0163">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@WhiteboardFox">
<meta name="twitter:title" content="85379604-3797-0163 - Whiteboard Fox">
<meta name="twitter:description" content="Whiteboard Fox is a simple online whiteboard that allows you to collaborate with others in real time.">
<meta name="twitter:image" content="https://r8.whiteboardfox.com/snapshot?thumbnail=true&diagram=8537960437970163">
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link type="text/css" rel="stylesheet" href="Whiteboard.css">
<link rel="shortcut icon" href="images/icon.png">
<link rel="icon" type="image/png" href="images/icon.png">
<link rel="icon" sizes="128x128" href="images/icon.png">
<link rel="apple-touch-icon" href="images/icon.png">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> -->
<!-- A solution to zoom fix issue on mobile is to copy the url and open in new tab -->
<meta name="viewport" content="user-scalable=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<script async="" type="text/javascript" src="https://cmp.inmobi.com/tcfv2/53/cmp2.js?referer=r8.whiteboardfox.com"></script><script async="" type="text/javascript" src="https://btloader.com/tag?o=5708166709903360&upapi=true"></script><script async="" type="text/javascript" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script><script async="" src="//c.amazon-adsystem.com/aax2/apstag.js"></script><script async="" type="text/javascript" src="https://cdn.fuseplatform.net/prebid/prebid-9f3c4d510451fc7cea7b8a7bf210c16a.js"></script><script async="" type="text/javascript" src="https://cmp.inmobi.com/choice/PRrmquD1Ggcb1/r8.whiteboardfox.com/choice.js?tag_version=V3"></script><script src="/cssFilterUtil.js"></script>
<script type="text/javascript">
let diagramName = '8537960437970163';
const showProSubscriptionAd = false;
const isLoggedIn = isLoggedInJs();
let showingSnackbar = false;
let snackBarMessages = {
"edit_denied": 'You can only erase, select or edit your own work',
"connection_warning": 'Warning: Your drawing is not saved. Check your internet connection.',
"no_shape_to_fill": 'Could not find a closed shape to fill. Use the join button to ensure the shape is closed.',
"too_many_lines": 'The filled stroke is too complicated. Consider filling smaller areas.',
"fill_timeout": 'Too many lines to calculate fill area. Consider selecting a smaller area.',
"undo_fill_selection_not_possible": 'Switch to Fill mode to see selection changes',
"change_color_to_repaint": 'Change the draw color before repainting the selection.',
"post_hint": 'Select an area to post to your online gallery',
};
function getCssFilterFromHexColorJs(hexColor){
const result = getCssFilterFromHexColor(hexColor);
return result.filter;
}
let pauseAds = false;
let pauseAdsTimer;
function pauseAdsJs(){
if (false) {
return
}
clearTimeout(pauseAdsTimer);
pauseAds = true;
pauseAdsTimer = setTimeout(() => {
pauseAds = false;
initPubliftAd();
}, 3000)
}
function setHTMLSpinnerVisibilityJs(show) {
toggleSpinner(show);
}
function toggleSpinner(show, msg) {
const spinnerElem = document.querySelector(".spinner-overlay");
const spinnerText = document.querySelector(".spinner-text");
if (msg) {
spinnerText.innerText = msg;
}
else {
// default msg is uploading_image
spinnerText.innerText = `Uploading Image...`;
}
spinnerElem.style.display = show ? 'flex': 'none';
}
function showMessageModal(message) {
const messageModal = document.getElementById("message-modal")
const closeButton = document.getElementById("message-modal-close-btn");
closeButton.addEventListener("click", hideMessageModal);
const messageText = document.getElementById("message-modal-text");
messageText.innerHTML = message;
// Show the modal
messageModal.style.display = "flex";
function handleWindowClick(event) {
if (event.target === messageModal) {
hideMessageModal();
}
}
window.addEventListener('click', handleWindowClick);
function hideMessageModal() {
messageModal.style.display = "none";
window.removeEventListener('click', handleWindowClick);
messageText.innerHTML = '';
closeButton.removeEventListener("click", hideMessageModal);
}
}
function showSignInModalJs() {
const redirectUrl = '/login.jsp?redirect=85379604-3797-0163';
showMessageModal(`You must be signed in to post to your gallery.
<a href="${redirectUrl}" class="underline">Click here to sign in.</a>`);
return;
}
function showSubscriptionModalJs(featureName) {
document.getElementById("feature-name").innerText = `You must have an active subscription to use ${featureName}`;
document.getElementById("already-subscribed-text").style.display = isLoggedIn ? "none" : "flex";
const subscriptionModal = document.getElementById("subscription-modal")
const closeButton = document.getElementById("subscription-modal-close-btn");
const isMobile = isUserOnMobile();
const subscriptionModalContent = document.getElementById("subscription-modal-content")
subscriptionModalContent.style.scale = isMobile ? '1.5' : '';
subscriptionModalContent.style.top = isMobile ? '10%' : '';
// Show the modal
subscriptionModal.style.display = "flex";
function handleWindowClick(event) {
if (event.target === subscriptionModal) {
hideSubscriptionModal();
}
}
closeButton.addEventListener("click", hideSubscriptionModal);
window.addEventListener('click', handleWindowClick);
function hideSubscriptionModal() {
subscriptionModal.style.display = "none";
window.removeEventListener('click', handleWindowClick);
closeButton.removeEventListener("click", hideSubscriptionModal);
}
}
function showTextModalJs(pastedText = '') {
if (!isActiveSubscriptionJs()) {
return;
}
const textboxModal = document.getElementById('textbox-modal');
const checkbox = document.getElementById('textbox-checkbox');
const closeButton = document.getElementById('textbox-modal-close-btn');
const cancelButton = document.getElementById('textbox-modal-cancel-btn');
const isMobile = isUserOnMobile();
const textboxModalContent = document.getElementById('textbox-modal-content');
textboxModalContent.style.scale = isMobile ? '1.5' : '';
textboxModalContent.style.top = isMobile ? '10%' : '';
// Show the modal
textboxModal.style.display = 'flex';
const textarea = document.getElementById('textbox-textarea');
textarea.addEventListener("keyup", handleKeyUp);
textarea.value = pastedText;
textarea.focus();
const submitButton = document.getElementById('textbox-submit-btn');
function handleTextboxSubmit() {
let inputValue = textarea.value;
if (inputValue && inputValue.trim().length > 0) {
receiveInputFromJs(inputValue, checkbox.checked, textarea.clientWidth - 20);
}
hideModal();
}
cancelButton.addEventListener('click', hideModal);
closeButton.addEventListener('click', hideModal);
submitButton.addEventListener('click', handleTextboxSubmit);
window.addEventListener('mousedown', handleWindowClick);
window.addEventListener('touchstart', handleWindowClick);
function handleWindowClick(event) {
if (event.target === textboxModal) {
event.stopPropagation();
hideModal();
}
}
function hideModal() {
textarea.value = '';
textboxModal.style.display = 'none';
window.removeEventListener('mousedown', handleWindowClick);
window.removeEventListener('touchstart', handleWindowClick);
textarea.removeEventListener('keyup', handleKeyUp);
closeButton.removeEventListener('click', hideModal);
cancelButton.removeEventListener('click', hideModal);
submitButton.removeEventListener('click', handleTextboxSubmit);
}
}
function showColorPickerModalJs(currentColor) {
const colorpickerModal = document.getElementById('colorpicker-modal');
const closeButton = document.getElementById('colorpicker-modal-close-btn');
const cancelButton = document.getElementById('colorpicker-modal-cancel-btn');
colorpickerModal.style.display = 'flex';
const submitButton = document.getElementById('colorpicker-submit-btn');
let selectedColor = currentColor;
const colorPickerSelectedColorDiv = document.getElementById('colorpicker-selected-color');
const colorPickerSelectedColorText = document.getElementById('colorpicker-selected-color-hex');
colorPickerSelectedColorText.innerText = selectedColor;
colorPickerSelectedColorDiv.style.backgroundColor = selectedColor;
const isMobile = isUserOnMobile();
const colorPickerModalContent = document.getElementById('colorpicker-modal-content');
closeButton.style.scale = isMobile ? '1.5' : '';
closeButton.style.top = isMobile ? '34px' : '12px';
closeButton.style.right = isMobile ? '34px' : '12px';
colorPickerModalContent.style.fontSize = isMobile ? '34px' : '24px';
colorPickerModalContent.style.padding = isMobile ? '36px' : '24px';
cancelButton.style.fontSize = isMobile ? '26px' : '16px';
submitButton.style.fontSize = isMobile ? '26px' : '16px';
colorPickerSelectedColorText.style.fontSize = isMobile ? '26px' : '16px';
cancelButton.style.padding = isMobile ? '12px 26px' : '8px 20px';
submitButton.style.padding = isMobile ? '12px 26px' : '8px 20px';
const colorPickerDiv = document.getElementById("picker");
colorPickerDiv.style.marginTop = isMobile ? '36px' : '24px';
var colorPicker = new iro.ColorPicker("#picker", {
width: isMobile ? 360: 240,
color: selectedColor,
handleRadius: isMobile ? 16: 8,
margin: isMobile ? 30 : 12,
});
colorPicker.on('color:change', function(color) {
selectedColor = color.hexString;
colorPickerSelectedColorText.innerText = selectedColor;
colorPickerSelectedColorDiv.style.backgroundColor = selectedColor;
});
function handleColorpickerSubmit() {
if (selectedColor) {
receiveColorFromJs(selectedColor);
hideModal();
}
}
cancelButton.addEventListener('click', hideModal);
closeButton.addEventListener('click', hideModal);
submitButton.addEventListener('click', handleColorpickerSubmit);
window.addEventListener('mousedown', handleWindowClick);
window.addEventListener('touchstart', handleWindowClick);
function handleWindowClick(event) {
if (event.target === colorpickerModal) {
event.stopPropagation();
hideModal();
}
}
function hideModal() {
colorPicker.on('mount', function() {
colorPicker.el.removeChild(colorPicker.base);
colorPicker.el = null;
})
colorpickerModal.style.display = 'none';
window.removeEventListener('mousedown', handleWindowClick);
window.removeEventListener('touchstart', handleWindowClick);
closeButton.removeEventListener('click', hideModal);
cancelButton.removeEventListener('click', hideModal);
submitButton.removeEventListener('click', handleColorpickerSubmit);
}
}
function showColorsEditorModalJs(colorsListStr) {
const colorsEditModal = document.getElementById('colorsedit-modal');
const closeButton = document.getElementById('colorsedit-modal-close-btn');
const cancelButton = document.getElementById('colorsedit-modal-cancel-btn');
const isMobile = isUserOnMobile();
const colorseditModalContent = document.getElementById('colorsedit-modal-content');
colorseditModalContent.style.scale = isMobile ? '1.5' : '';
colorseditModalContent.style.top = isMobile ? '10%' : '';
colorsEditModal.style.display = 'flex';
const textarea = document.getElementById('colorsedit-text-box');
textarea.focus();
textarea.value = colorsListStr;
textarea.addEventListener("keyup", handleKeyUp);
const submitButton = document.getElementById('colorsedit-submit-btn');
function handlecolorseditSubmit() {
let { resultString } = processHexColors(textarea.value);
receiveColorsListFromJs(resultString);
hideModal();
}
cancelButton.addEventListener('click', hideModal);
closeButton.addEventListener('click', hideModal);
submitButton.addEventListener('click', handlecolorseditSubmit);
window.addEventListener('mousedown', handleWindowClick);
window.addEventListener('touchstart', handleWindowClick);
function handleWindowClick(event) {
if (event.target === colorsEditModal) {
event.stopPropagation();
hideModal();
}
}
function hideModal() {
colorsEditModal.style.display = 'none';
textarea.value= '';
window.removeEventListener('mousedown', handleWindowClick);
window.removeEventListener('touchstart', handleWindowClick);
textarea.removeEventListener('keyup', handleKeyUp);
closeButton.removeEventListener('click', hideModal);
cancelButton.removeEventListener('click', hideModal);
submitButton.removeEventListener('click', handlecolorseditSubmit);
}
}
function isValidHexCode(str) {
const hexColorRegex = new RegExp(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/);
return hexColorRegex.test(str.trim())
}
function processHexColors(v) {
const colorsArray = v.split('\n');
let validColorsArray = colorsArray.filter((color) => isValidHexCode(color));
let uniqueColorsSet = new Set();
for (let color of validColorsArray) {
if (color.length === 9) {
color = color.slice(0, 7);
}
uniqueColorsSet.add(color);
}
validColorsArray = Array.from(uniqueColorsSet);
validColorsArray = validColorsArray.slice(0, 36);
const resultString = validColorsArray.join('_');
return {resultString, resultArray: validColorsArray};
}
function handleKeyUp (e) {
e.stopPropagation();
}
function generateSnapshotModalJs(creators, byLine, uploadUrl, videoInfoData) {
// Checkbox
const checkbox = document.getElementById("gridlinesCheckbox");
const remixCheckbox = document.getElementById("remixPost") || {checked: false};
// default dataUrl
let dataUrl = getSnapshotUriJs(checkbox.checked, undefined);
let dataUrlForDownload = getSnapshotUriJs(checkbox.checked, byLine);
// Image
const image = document.getElementById("snapshot-modal-img")
image.src = dataUrl;
image.onload = function() {
image.style.width = this.naturalWidth / 2 + "px";
image.style.height = this.naturalHeight / 2 + "px";
};
function handleSnapshotCheckboxChange(e) {
dataUrl = getSnapshotUriJs(e.target.checked, undefined)
dataUrlForDownload = getSnapshotUriJs(e.target.checked, byLine)
image.src = dataUrl;
}
checkbox.addEventListener("change", handleSnapshotCheckboxChange);
// Description Text
const textarea = document.getElementById("snapshot-modal-description");
const charCountDiv = document.getElementById('snapshot-modal-description-count');
function handleSnapshotDescriptionChange(e){
// IMPORTANT To prevent keyboard shortcuts triggering while typing
// Something is wrong with the KEY_A, getting exception, try stopPropagation onKeyUp
e.stopPropagation();
const remaining = 200 - textarea.value.length;
charCountDiv.innerText = 'Remaining ' + remaining;
}
textarea.addEventListener("keydown", handleSnapshotDescriptionChange);
textarea.addEventListener("keyup", handleKeyUp);
// Buttons Functionality
const postBtn = document.getElementById("snapshot-modal-post-btn");
const downloadBtn = document.getElementById("snapshot-modal-download-btn");
async function handleSnapshotUpload() {
try {
toggleSpinner(true);
const postFileName = await uploadSnapshot(dataUrl, uploadUrl);
const postId = await postSnapshotToGallery(textarea.value, creators, byLine, postFileName, remixCheckbox.checked, videoInfoData);
hideSnapshotModal();
showMessageModal(`Snapshot posted to gallery. <a href="post/${postId}" target="_blank">Click here to view your post.</a>`);
} catch (error) {
hideSnapshotModal();
showMessageModal(error);
} finally {
toggleSpinner(false);
}
}
postBtn.addEventListener("click", handleSnapshotUpload);
function handleSnapshotDownload() {
const downloadLink = document.createElement('a');
downloadLink.setAttribute('download', 'MySnapshot.png');
downloadLink.href = dataUrlForDownload;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
downloadBtn.addEventListener("click", handleSnapshotDownload);
// Show the modal
const modal = document.getElementById("snapshot-modal")
modal.style.display = "flex";
// Close on clicking outside the modal
function handleWindowClick(event) {
if (event.target === modal) {
hideSnapshotModal();
}
}
window.addEventListener('click', handleWindowClick);
const closeBtn = document.getElementById("snapshot-modal-close-btn");
closeBtn.addEventListener("click", hideSnapshotModal);
function hideSnapshotModal() {
modal.style.display = "none";
textarea.value = '';
image.src = '';
charCountDiv.innerText = 'Remaining 200';
checkbox.removeEventListener("change", handleSnapshotCheckboxChange);
textarea.removeEventListener("keydown", handleSnapshotDescriptionChange);
textarea.removeEventListener("keyup", handleKeyUp);
postBtn.removeEventListener("click", handleSnapshotUpload);
downloadBtn.removeEventListener("click", handleSnapshotDownload);
closeBtn.removeEventListener("click", hideSnapshotModal);
window.removeEventListener('click', handleWindowClick);
}
}
async function uploadSnapshot(dataUrl, uploadUrl) {
let base64String = dataUrl.slice(dataUrl.indexOf(',') + 1);
const byteCharacters = atob(base64String);
// Convert Base64 string to binary
const byteNumbers = Array.from(byteCharacters).map(char => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
// Convert the Base64 string to a Blob object
const blob = new Blob([byteArray], {type: 'image/png'});
// Create a FormData object and append the Blob
const formData = new FormData();
formData.append('uploadFormElement', blob, 'snapshot.png');
formData.append('isSnapshotUpload', true);
const resp = await fetch(uploadUrl, {
method: 'POST',
body: formData
});
if(resp.status != 200){
throw new Error("HTTP status " + resp.status);
}
return await resp.text();
}
async function postSnapshotToGallery(description, creators, byLine, postFileName, allowRemix, videoInfoData) {
// Create a FormData object and append
const formData = new URLSearchParams();
formData.append('description', description);
formData.append('creators', creators);
formData.append('byLine', byLine);
formData.append('diagramName', diagramName);
formData.append('postFileName', postFileName);
formData.append('allowRemix', allowRemix);
formData.append('videoInfoData', videoInfoData);
const resp = await fetch("api/snapshot", {
method: 'POST',
body: formData,
headers : {
"Content-Type": "application/x-www-form-urlencoded"
}
})
if(resp.status != 200){
throw new Error("HTTP status " + resp.status);
}
const data = await resp.text();
if(data.error){
throw new Error(data.error);
}
return data;
}
let fusetagInitialized = false;
function initPubliftAd(){
if(fusetagInitialized || pauseAds){
return;
}
let publiftEl = document.createElement('script');
publiftEl.src = 'https://cdn.fuseplatform.net/publift/tags/2/3299/fuse.js';
document.getElementsByTagName('head')[0].appendChild(publiftEl);
let addPubliftElementsToDiv = (elementId, fuseId, adId) => {
let adArea = document.getElementById(elementId);
if (adArea.children.length > 0) {
return;
}
// console.log(elementId, 'Adding ad...');
let adInsEl = document.createElement('div');
adInsEl.setAttribute("id", adId);
adInsEl.setAttribute("style", "display:block;");
adInsEl.setAttribute("data-fuse", fuseId);
adArea.appendChild(adInsEl);
};
addPubliftElementsToDiv("right-ad-area", "22970017882", "whiteboard-ad-right");
addPubliftElementsToDiv("bottom-ad-area", "22970017885", "whiteboard-ad-bottom");
const fusetag = window.fusetag || (window.fusetag = { que: [] });
fusetag.que.push(function () {
fusetag.setAllowRefreshCallback(function (fuseId) {
return !pauseAds;
});
}, function() {
fusetag.registerAll();
});
fusetagInitialized = true;
}
const PRO_SUBSCRIPTION_AD_DURATION = 30000;
// From https://stackoverflow.com/a/950146
function loadAdJs() {
if (false) {
return;
}
let delay = 3000;
if (showProSubscriptionAd) {
loadWhiteboardFoxAd();
delay = PRO_SUBSCRIPTION_AD_DURATION + 100; // initPubliftAd to be called after 30 seconds
}
setTimeout(initPubliftAd, delay);
}
function loadWhiteboardFoxAd() {
const rightAd = document.getElementById('right-ad-area');
const bottomAd = document.getElementById('bottom-ad-area');
// Function to handle ad click
const handleAdClick = () => {
showSubscriptionModalJs('Extra Colors');
};
// Set up the ads
setupAd(rightAd, 'images/pro-subscription-right.png', 'right');
setupAd(bottomAd, 'images/pro-subscription-bottom.png', 'bottom');
// Set up ad element
function setupAd(adElement, imageUrl, position) {
Object.assign(adElement.style, {
backgroundImage: `url('${imageUrl}')`,
backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
cursor: 'pointer',
});
const adTemplate = document.getElementById(position === 'right' ? 'ad-template-right': 'ad-template-bottom');
const clone = document.importNode(adTemplate.content, true);
const adOverlay = clone.querySelector(position === 'right' ? '#ad-overlay-right': '#ad-overlay-bottom');
if(position === 'bottom') {
adElement.style.alignItems = 'center';
adElement.style.justifyContent = 'center';
}
adElement.appendChild(adOverlay);
// Add event listener
adElement.addEventListener('click', handleAdClick);
// Clear ad after 30 seconds
setTimeout(() => {
adElement.style.backgroundImage = 'none';
adOverlay.remove();
adElement.removeEventListener('click', handleAdClick);
}, PRO_SUBSCRIPTION_AD_DURATION);
}
}
function showSnackbar(msgKey) {
if (showingSnackbar)
return;
showingSnackbar = true;
var x = document.getElementById("snackbar");
let message = snackBarMessages[msgKey];
if(message == undefined){
message = msgKey; // just show the string which is passed in the function
}
x.innerHTML = message;
x.className = "show";
setTimeout(function(){ x.className = "hide"; }, 2000);
setTimeout(function(){ x.className = ""; showingSnackbar=false;}, 2450); // 3500 causes visible artifact
}
let showingWhoIsDrawingSnackbar = false;
function showWhoIsDrawingSnackbar(msg, userAvatarHtml, userLink) {
if(showingWhoIsDrawingSnackbar)
return;
showingWhoIsDrawingSnackbar= true;
let snackbarContainer = document.getElementById("draw-info-snackbar");
let snackbarAvatarContainer = document.getElementById("draw-info-avatar");
let snackbarTitleEl = snackbarContainer.querySelector('.snackbar-title');
if (userLink) {
snackbarTitleEl.onclick = function() {
window.open(userLink, '_blank');
};
snackbarTitleEl.style.cursor = 'pointer';
snackbarTitleEl.style.textDecoration = 'underline';
}
else {
snackbarTitleEl.onclick = null;
snackbarTitleEl.style.cursor = 'default';
snackbarTitleEl.style.textDecoration = 'none';
}
snackbarAvatarContainer.innerHTML = userAvatarHtml;
snackbarTitleEl.innerText = msg;
snackbarContainer.className = "show";
setTimeout(function(){ snackbarContainer.className = "hide"; }, 2000);
setTimeout(function(){ snackbarContainer.className = ""; showingWhoIsDrawingSnackbar=false;}, 2450); // 3500 causes visible artifact
}
let showingInvitationToDrawSnackbar = false;
let receivedNotifications = [];
function showInvitationToDrawSnackbar(diagramName, userName, userAvatarHtml) {
if(showingInvitationToDrawSnackbar || receivedNotifications.includes(diagramName))
return;
receivedNotifications.push(diagramName);
showingInvitationToDrawSnackbar= true;
let snackbarContainer = document.getElementById("invite-msg");
if(!snackbarContainer){
return;
}
snackbarContainer.setAttribute("href", "/" + diagramName);
let snackbarAvatarContainer = document.getElementById("whiteboard-invitation-avatar");
let snackbarTitleEl = snackbarContainer.querySelector('.snackbar-title');
snackbarAvatarContainer.innerHTML = userAvatarHtml;
snackbarTitleEl.innerText = getInvitationMsg(userName);
snackbarContainer.className = "show";
setTimeout(function(){ snackbarContainer.className = "hide"; showingInvitationToDrawSnackbar=false;}, 5500);
}
function getInvitationMsg(userName) {
let msg = `@##placeholder## invited you to join their whiteboard`;
return msg.replace("##placeholder##", userName);
}
function isReadOnlyJs() {
return false;
}
function isCopyAllowedJs() {
return true;
}
function isActiveSubscriptionJs() {
return ;
}
function hasProFeaturesJs() {
return false
}
function isLoggedInJs() {
return false;
}
function getSessionIdJs() {
return "026EFD1145F4DF329F837777FA2C5DE5";
}
function showSnackbarJs(msgKey) {
// console.log('Edit attempt denied');
showSnackbar(msgKey);
}
function showPanicModalJs() {
alert(`Your browser is almost out of memory, here is what you need to do:
1. Close any other Whiteboard Fox tabs in your browser
2. Restart your phone by holding down the Power and Volume Up buttons`);
}
function getFeatureFlagJs() {
return 5890;
}
function notifyUserDrawing(msg, userAvatarHtml, userLink){
if(!userAvatarHtml) {
userAvatarHtml = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<circle class="avatar-circle-1" cx="256" cy="256" r="256" fill="#828282" style="fill: #828282;"></circle>
<circle class="avatar-circle-2" cx="256" cy="256" r="256" fill="#FFFFFFBB" style="fill: #828282;"></circle>
<path class="avatar-path" d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#bf1b1b" style="fill: rgba(255, 255, 255, 0.533);"></path>
</svg>`;
}
showWhoIsDrawingSnackbar(msg, userAvatarHtml, userLink);
}
function notifyAboutWhiteboardInvitationJs(diagramName, userName, userAvatarHtml) {
showInvitationToDrawSnackbar(diagramName, userName, userAvatarHtml);
}
function toggleFullscreenModeJs() {
var elem = document.documentElement;
var currentlyFullscreen = document.fullscreenElement
|| document.mozFullScreenElement
|| document.msFullscreenElement
|| document.webkitFullscreenElement;
if (currentlyFullscreen) {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
else {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
}
function createCookie(name, value, days, baseUrl) {
let expires = '';
let domain = '';
if (days) {
let date = new Date();
date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
expires = '; expires=' + date.toGMTString();
}
if (baseUrl) {
domain = '; domain=' + baseUrl;
}
document.cookie = name + '=' + value + expires + domain + '; path=/';
}
function readCookie(name) {
var nameEQ = name + '=';
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
// http://stackoverflow.com/questions/1822350/what-is-the-javascript-operator-and-how-do-you-use-it
if (readCookie("bid") == null) {
var v = "";
for (var i = 0; i < 18; i++) {
v = v + ((Math.random() * 10) >> 0);
}
createCookie("bid", v, 365 * 2);
}
function isUserOnMobile() {
const userAgent = navigator.userAgent.toLowerCase();
if (/iphone/.test(userAgent)) {
return true;
} else if (/android/.test(userAgent)) {
return true;
}
return false;
}
</script>
<!-- Google tag (gtag.js) -->
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-1D9TC6VV9C"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1D9TC6VV9C');
</script>
<noscript>
<title>Whiteboard Fox</title>
</noscript>
<!-- -->
<!-- This script loads your compiled module. -->
<!-- If you add any GWT meta tags, they must -->
<!-- be added before this line. -->
<!-- -->
<script type="text/javascript" language="javascript" src="whiteboard/whiteboard.nocache.js"></script><link rel="stylesheet" href="https://r8.whiteboardfox.com/whiteboard/gwt/clean/clean.css"><script src="https://r8.whiteboardfox.com/whiteboard/9C234419DB5A23D6835D9B464A68C7AD.cache.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.subscribe-btn:hover {
opacity: 0.7;
}
.cursor-crosshair{
cursor: crosshair;
}
.cursor-default{
cursor: default;
}
/* ToolTip Styles*/
.tooltip {
position: absolute;
top: 348px;
left: 80px;
border: 1px solid #ccc;
padding: 10px 20px 20px 20px;
border-radius: 8px;
background-color: white;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
z-index: 100;
margin-right: 12px;
max-width: 470px;
}
.tooltip-header {
display: flex;
justify-content: space-between;
align-items: self-start;
position: relative;
}
.tooltip-header h2 {
margin: 12px 0;
font-size: 28px;
color: #4a4a4a;
font-weight: 700;
font-family: Roboto, Arial;
}
.close-btn {
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.tooltip-body {
display: flex;
flex-direction: column;
}
.tooltip-content {
margin: 0;
margin-bottom: 12px;
font-size: 20px;
color: #4a4a4a;
font-family: Roboto, Arial;
}
.tooltip button, .tooltip button.cta {
display: block;
font-size: 20px;
padding: 6px 12px;
border: none;
background-color: rgb(255,106,0);
color: white;
cursor: pointer;
border-radius: 4px;
align-self: flex-end;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
transition: all 200ms ease-in;
}
.tooltip button.cta:hover {
text-decoration: none;
}
.tooltip button:hover {
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
}
/* Modal Styling */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 3;
left: 0;
top: 0;
width: 100vw; /* Full width */
height: 100vh; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-checkbox-container{
display: flex;
align-items: center;
gap: 6px;
font-size: 16px;
width: fit-content;
margin: 12px 0;
margin-right: 12px;
}
.modal-description{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
resize: vertical;
font-size: 16px;
font-family: Arial, sans-serif;
}
.modal-btn-container{
display: flex;
align-items: center;
gap: 16px;
justify-content: center;
}
.modal-btn-container button{
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
border: none;
padding: 10px 32px;
border-radius: 4px;
font-size: 16px;
}
.modal-content {
background-color: #fefefe;
margin: 50px auto;
padding: 20px;
border: 1px solid #888;
max-width: 900px;
position: relative;
text-align: center;
border-radius: 12px;
height: min-content;
-webkit-animation-name: fadeInAnim;
-webkit-animation-duration: 0.3s;
animation-name: fadeInAnim;
animation-duration: 0.3s;
}
@-webkit-keyframes fadeInAnim {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeInAnim {
from {opacity: 0;}
to {opacity: 1;}
}
.close {
color: #aaa;
position: absolute;
top: 10px;
right: 25px;
font-size: 30px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.message-modal-modal-content {
background-color: #fefefe;
margin: 50px auto;
padding: 36px;
border: 1px solid #888;
width: fit-content;
max-width: 900px;
position: relative;
text-align: center;
border-radius: 12px;
height: min-content;
}
.message-modal-close {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
padding: 0;
margin: 0;
top: 8px;
right: 8px;
background: none;
border: none;
}
.subscription-modal-content,
.feedback-modal-content {
background-color: #fefefe;
margin: 50px auto;
padding: 14px;
border: 1px solid #888;
width: fit-content;
max-width: 420px;
position: relative;
text-align: center;
border-radius: 12px;
height: min-content;
}
.subscription-modal-close,
.feedback-modal-close {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
padding: 0;
margin: 0;
top: 32px;
right: 32px;
background: none;
border: none;
outline: 2px solid #c7d2fe;
border-radius: 4px;
padding: 6px;
}
.subscription-modal-close:hover,
.subscription-modal-close:focus {
outline: 2px solid #6466e9;
}
.cta-anchor {
justify-content: center;
width: 100%;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
padding: 12px 16px;
border: none;
border-radius: 8px;
background-color: rgb(100,102,233);
color: white;
font-size: 20px;
text-decoration: none;
}
.cta-anchor:hover {
background-color: rgb(120,122,253);
}
#paypal-anchor {
background: #ffc43a;
color: #022169;
}
#paypal-anchor:hover {
background: #ffc43a;
filter: brightness(0.95);
text-decoration: none;
}
#subscribe-anchor:hover {
color: white;
background-color: rgb(120,122,253);
text-decoration: none;
}
a#subscribe-anchor:visited {
color: white;
}
/* Responsive image */
.modal-content img {
max-width: 100%;
height: auto !important;
object-fit: contain;
}
.textbox-modal-content {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #f9f9f9;
margin: 50px auto;
padding: 20px;
border: 1px solid #888;
width: 40%;
max-width: 100vw;
position: relative;
text-align: center;
border-radius: 12px;
height: 400px;
max-height: 100%;
min-height: 300px;
min-width: 360px;
}
.colorpicker-modal-content {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #f9f9f9;
margin: 50px auto;
padding: 24px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
position: relative;
text-align: center;
border-radius: 12px;
}
.colorsedit-modal-content {
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #f9f9f9;
padding: 24px;
border: 1px solid #888;
width: fit-content;
height: fit-content;
position: relative;
text-align: center;
border-radius: 12px;
max-height: 100%;
margin: 50px auto;
}
.textbox-modal-close,
.colorpicker-modal-close,
.colorsedit-modal-close {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
position: absolute;
padding: 0;
margin: 0;
top: 12px;
right: 12px;
background: none;
border: none;
border-radius: 4px;
padding: 6px;
}
#textbox-textarea {
margin-top: 20px;
width: 100%;
height: 100%;
min-width: 100%;
max-height: 100%;
border: 2px solid #ccc;
border-radius: 5px;
padding: 10px;
font-family: Arial;
resize: none;
word-break: break-word;
}
.textbox-checkbox-container {
margin-top: 12px;
display: flex;
align-items: center;
gap: 8px;
margin-left: 4px;
}
.textbox-checkbox-container label {
color: rgb(100, 100, 100);
font-size: 16px;
}
.textbox-checkbox-container label,
.textbox-checkbox-container input {
cursor: pointer;
}
.textbox-modal-buttons-container,
.colorpicker-modal-buttons-container,
.colorsedit-modal-buttons-container {
margin-top: 20px;
display: flex;
width: 100%;
justify-content: flex-end;
gap: 20px;
align-items: center;
}
input.textbox-checkbox {
transform : scale(1.4);
}
.textbox-button,
.colorpicker-button,
.colorsedit-button {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
cursor: pointer;
border: none;
padding: 8px 20px;
border-radius: 6px;
font-size: 16px;
}
.textbox-button:hover,
.colorpicker-button:hover,
.colorsedit-button:hover {
opacity: 0.9;
}
/* Media querries */
@media screen and (min-width: 0px) and (max-width: 850px) {
.modal{
justify-content: center;
}
.modal-content {
max-width: 90%;
margin : 0;
}
}
@media screen and (min-width: 850px) {
.tooltip {
left: 150px
}
}
/* END MODAL STYLE */
/* Overlay Styles */
.spinner-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 1000;
}
.spinner-text {
color: white;
margin-top:8px;
font-size: 16px;
text-align: center;
}
/* Spinner Styles */
.spinner {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid #3498db;
border-radius: 50%;
animation: spin 2s linear infinite;
}
/* Keyframes for Spinner Animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#carbonads {
position: fixed;
top: 515px;
left: 5px;
display: flex;
max-width: 130px;
border-radius: 3px;
background-color: hsl(0, 0%, 98%);
box-shadow: 0 0 1px hsla(0, 0%, 0%, .15);
font-size: 11px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#carbonads a {
color: #111;
text-decoration: none;
}
#carbonads a:hover {
color: #111;
}
.carbon-img {
display: block;
margin-bottom: 8px;
max-width: 130px;
line-height: 1;
}
.carbon-img img {
display: block;
margin: 0 auto;
max-width: 130px;
border-radius: 3px 3px 0 0;
width: 130px;
height: auto;
}
.carbon-text {
display: block;
padding: 0 10px 8px;
text-align: left;
line-height: 1.35;
}
.carbon-poweredby {
display: block;
padding: 10px;
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
text-transform: uppercase;
letter-spacing: .5px;
font-weight: 600;
font-size: 8px;
line-height: 0;
}
.colorpicker-selected-color-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin: 0 0 20px 0;
}
.colorpicker-selected-color-container span {
font-weight: bold;
letter-spacing: 2px;
}
#colorpicker-selected-color {
height: 40px;
width: 70px;
border: 1px solid #c0c0c0;
border-radius: 4px;
}
@media only screen and (max-width: 849px) {
#carbonads {
display:none;
}
}
#snackbar, #draw-info-snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 2;
left: 50%;
top: 20px;
font-size: 17px;
}
#draw-info-snackbar {
left: 20%;
top: 60px;
min-width: 120px;
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
}
#draw-info-snackbar svg {
width: 40px;
height: 40px;
}
#exp-msg, #invite-msg {
min-width: 250px;
margin-left: -125px;
background-color: #f72d2d;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 8px 16px;
position: fixed;
z-index: 2;
left: 50%;
bottom: 10px;
font-size: 17px;
display: flex;
flex-direction: column;
alignItems: center;
gap: 4px;
border: none;
cursor: pointer;
}
#invite-msg {
flex-direction: row;
align-items: center;
transition: all 500ms ease-in;
}
div#whiteboard-invitation-avatar {
width: 40px;
height: auto;
}
div#whiteboard-invitation-avatar img {
max-width: 100%;
height: auto;
border-radius: 50%;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}
#draw-info-snackbar.show {
visibility: visible;
-webkit-animation: fadein-user 0.5s;
animation: fadein-user 0.5s;
}
#snackbar.hide {
visibility: visible;
-webkit-animation: fadeout 0.5s;
animation: fadeout 0.5s;
}
#draw-info-snackbar.hide {
visibility: visible;
-webkit-animation: fadeout-user 0.5s;
animation: fadeout-user 0.5s;
}
@-webkit-keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 20px; opacity: 1;}
}
@keyframes fadein {
from {top: 0; opacity: 0;}
to {top: 20px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {top: 20px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout {
from {top: 20px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@-webkit-keyframes fadein-user {
from {top: 0; opacity: 0;}
to {top: 60px; opacity: 1;}
}
@keyframes fadein-user {
from {top: 0; opacity: 0;}
to {top: 60px; opacity: 1;}
}
@-webkit-keyframes fadeout-user {
from {top: 60px; opacity: 1;}
to {top: 0; opacity: 0;}
}
@keyframes fadeout-user {
from {top: 60px; opacity: 1;}
to {top: 0; opacity: 0;}
}
#invite-msg.show {
display: flex;
}
#invite-msg.hide {
display: none;
}
#exp-msg, #invite-msg {
left:40%;
}
#bottom-ad-area {
border: 2px solid black;
text-align:center;
position: absolute;
z-index: 1;
bottom: 0;
padding:0;
left: 70px;
right: 30px;
height: 120px; /* Height of bottom-ad-area */
max-height: 120px;
background-color: #eeeeee;
display: none;
overflow: hidden;
}
#right-ad-area {
border: 2px solid black;
position: absolute;
z-index: 2;
bottom: 30px;
padding:0;
top: 70px;
right: 0;
width: 120px; /* Width of right ad area */
background-color: #eeeeee;
display: block;
overflow: hidden;
}
@media screen and (min-width: 850px) {
#right-ad-area {
width: 160px; /* Increased width for screen width >= 1200px */
}
}
@media screen and (max-aspect-ratio: 1/1) {
#right-ad-area {
display: none; /* right-ad area not shown */
}
#bottom-ad-area {
display: flex;
}
#exp-msg, #invite-msg {
bottom: 140px;
left:50%;
}
}
#upload-image-overlay {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
#upload-image-overlay p {
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
}
</style>
<script src="https://cdn.fuseplatform.net/publift/tags/2/3299/fuse.js"></script><script src="https://config.aps.amazon-adsystem.com/configs/8b48e249-e9e6-4a52-8b48-396ea93403e8" type="text/javascript" async="async"></script><meta http-equiv="origin-trial" content="AlK2UR5SkAlj8jjdEc9p3F3xuFYlF6LYjAML3EOqw1g26eCwWPjdmecULvBH5MVPoqKYrOfPhYVL71xAXI1IBQoAAAB8eyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3NTgwNjcxOTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="Amm8/NmvvQfhwCib6I7ZsmUxiSCfOxWxHayJwyU1r3gRIItzr7bNQid6O8ZYaE1GSQTa69WwhPC9flq/oYkRBwsAAACCeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiV2ViVmlld1hSZXF1ZXN0ZWRXaXRoRGVwcmVjYXRpb24iLCJleHBpcnkiOjE3NTgwNjcxOTksImlzU3ViZG9tYWluIjp0cnVlfQ=="><meta http-equiv="origin-trial" content="A9wSqI5i0iwGdf6L1CERNdmsTPgVu44ewj8QxTBYgsv1LCPUVF7YmWOvTappqB1139jAymxUW/RO8zmMqo4zlAAAAACNeyJvcmlnaW4iOiJodHRwczovL2RvdWJsZWNsaWNrLm5ldDo0NDMiLCJmZWF0dXJlIjoiRmxlZGdlQmlkZGluZ0FuZEF1Y3Rpb25TZXJ2ZXIiLCJleHBpcnkiOjE3MzY4MTI4MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><meta http-equiv="origin-trial" content="A+d7vJfYtay4OUbdtRPZA3y7bKQLsxaMEPmxgfhBGqKXNrdkCQeJlUwqa6EBbSfjwFtJWTrWIioXeMW+y8bWAgQAAACTeyJvcmlnaW4iOiJodHRwczovL2dvb2dsZXN5bmRpY2F0aW9uLmNvbTo0NDMiLCJmZWF0dXJlIjoiRmxlZGdlQmlkZGluZ0FuZEF1Y3Rpb25TZXJ2ZXIiLCJleHBpcnkiOjE3MzY4MTI4MDAsImlzU3ViZG9tYWluIjp0cnVlLCJpc1RoaXJkUGFydHkiOnRydWV9"><script src="https://securepubads.g.doubleclick.net/pagead/managed/js/gpt/m202410280101/pubads_impl.js?cb=31088558" async=""></script><script src="//cdn.id5-sync.com/api/1.0/id5-api.js"></script><style type="text/css"> .qc-cmp-button.qc-cmp-secondary-button:hover { background-color: #368bd6 !important; border-color: transparent !important; } .qc-cmp-button.qc-cmp-secondary-button:hover { color: #ffffff !important; } .qc-cmp-button.qc-cmp-secondary-button { color: #368bd6 !important; } .qc-cmp-button.qc-cmp-secondary-button { background-color: #eee !important; border-color: transparent !important; } </style><script type="text/javascript" id="__tcfapiuiscript" src="https://cmp.inmobi.com/tcfv2/53/cmp2ui-en.js"></script><style qc-data-emotion="css-global" data-s=""></style><style qc-data-emotion="css" data-s=""></style></head>
<!-- -->
<!-- The body can have arbitrary html, or -->
<!-- you can leave the body empty if you want -->
<!-- to create a completely dynamic UI. -->
<!-- -->
<body style="touch-action:none;overflow:hidden;"><div class="qc-cmp2-container" id="qc-cmp2-container" data-nosnippet=""><div class="qc-cmp2-main" id="qc-cmp2-main" data-nosnippet=""><div height="600" class="qc-cmp-cleanslate css-1m0wtjn"><div id="qc-cmp2-ui" role="dialog" aria-label="qc-cmp2-ui" aria-modal="true" tabindex="0" class="css-5yw3x1"><div class="qc-cmp2-summary-section"><div class="qc-cmp2-consent-info"><div class="qc-cmp2-publisher-logo-container"><figure><h2>We value your privacy</h2></figure><div class="qc-cmp2-summary-info "><div class=""> We and our <button mode="link" class="qc-cmp2-link-inline css-1sjf9qp" size="large">partners</button> store and/or access information on a device, such as cookies and process personal data, such as unique identifiers and standard information sent by a device for personalised advertising and content, advertising and content measurement, audience research and services development. With your permission we and our partners may use precise geolocation data and identification through device scanning. You may click to consent to our and our 1446 partners’ processing as described above. Alternatively you may access more detailed information and change your preferences before consenting or to refuse consenting. Please note that some processing of your personal data may not require your consent, but you have a right to object to such processing. Your preferences will apply to this website only. You can change your preferences or withdraw your consent at any time by returning to this site and clicking the "Privacy" button at the bottom of the webpage. <div> Please note that this website/app uses one or more Google services and may gather and store information including but not limited to your visit or usage behaviour. You may click to grant or deny consent to Google and its third-party tags to use your data for below specified purposes in below Google consent section.</div></div></div></div></div></div><div class="qc-cmp2-footer qc-cmp2-footer-overlay qc-cmp2-footer-scrolled"><div class="qc-cmp2-summary-buttons"><button mode="secondary" size="large" class=" css-1hy2vtq"><span>MORE OPTIONS</span></button><button mode="primary" size="large" class=" css-47sehv"><span>AGREE</span></button></div></div></div></div></div></div>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="draw-info-snackbar">
<div id="draw-info-avatar">
</div>
<p class="snackbar-title"></p>
</div>
<div id="snackbar"></div>
<a href="#" id="invite-msg" target="_blank" class="hide">
<div id="whiteboard-invitation-avatar"></div>
<p class="snackbar-title"></p>
</a>
<div id="boost-offer-available" style="display:none;color:#fff;text-decoration:none;position: absolute;top: 10px;left: 512px;font-size: 15px;font-weight: 600;color: white;padding: 1px 7px;border-radius: 3px;z-index: 1;z-index:1;background: #835eff;cursor: pointer;justify-content: center;align-items: center;gap: 6px;height: 24px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 16px; height: 16px">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Pro Boost Available
</div>
<div style="position: absolute;top: 10px;left: 436px;font-size: 15px;font-weight: 600;color: white;padding: 1px 8px;border-radius: 3px;z-index: 1;background: #ff9300;height: 24px;">
<a href="/login.jsp?redirect=85379604-3797-0163" style="color:#fff;text-decoration:none;">
Login
</a>
</div>
<div id="bottom-ad-area"><div id="whiteboard-ad-bottom" style="display:block;" data-fuse="22970017885"></div></div>
<div id="right-ad-area"><div id="whiteboard-ad-right" style="display:block;" data-fuse="22970017882"></div></div>
<div id="snapshot-modal" class="modal" style="display: none">
<div id="snapshot-modal-content" class="modal-content">
<span id="snapshot-modal-close-btn" class="close">
×
</span>
<img id="snapshot-modal-img" src="" alt="Snapshot Image" style="border: 1px solid rgb(74, 74, 74);">
<div class="modal-checkbox-container">
<div class="modal-checkbox-container">
<input type="checkbox" id="gridlinesCheckbox" name="gridlinesCheckbox" style="cursor: pointer" checked="">
<label for="gridlinesCheckbox" style="cursor: pointer">Include gridlines</label>
</div>
<div class="modal-checkbox-container">
<input type="checkbox" id="remixPost" name="remixPost" style="cursor: pointer" checked="">
<label for="remixPost" style="cursor: pointer">Allow others to remix post</label>
<span style="width: 20px;height: 20px;cursor: pointer;color: gray;" onclick="alert('Remix allows other users to copy the portion of your whiteboard and modify the copy.')">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"></path>
</svg>
</span>
</div>
</div>
<textarea id="snapshot-modal-description" rows="3" maxlength="200" class="modal-description" placeholder="Add description"></textarea>
<div id="snapshot-modal-description-count" style="display: flex; width: 100%; justify-content: flex-end">Remaining 200</div>
<div class="modal-btn-container">
<button id="snapshot-modal-download-btn" style="color: black">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="fill: #4a4a4a">
<path d="M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z"></path>
</svg>
<span>Download</span>
</button>
<button id="snapshot-modal-post-btn" style="background-color: rgb(255, 106, 0); color: white">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" style="fill: white">
<path d="M14 3h2.997v5h-2.997v-5zm9 1v20h-22v-24h17.997l4.003 4zm-17 5h12v-7h-12v7zm14 4h-16v9h16v-9z">
</path>
</svg>
<span>Post to gallery</span>
</button>
</div>
</div>
</div>
<div id="message-modal" class="modal" style="display: none;">
<div id="message-modal-content" class="message-modal-modal-content">
<button class="message-modal-close" id="message-modal-close-btn">
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<p style="font-size: 16px;" id="message-modal-text"></p>
</div>
</div>
<div id="boost-offer-modal" class="modal">
<div id="message-modal-content" class="message-modal-modal-content">
<button class="message-modal-close" id="boost-offer-modal-close-btn">
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<p style="font-size: 16px; width: 400px; margin-bottom: 12px;" id="boost-offer-modal-text"></p>
<div class="modal-btn-container">
<button id="boost-offer-modal-confirm-btn" onclick="window.location.reload();" style="background-color: rgb(255, 106, 0); color: white">
<span>Reload</span>
</button>
</div>
</div>
</div>
<div id="subscription-modal" class="modal" style="display: none;">
<div id="subscription-modal-content" class="subscription-modal-content">
<button class="subscription-modal-close" id="subscription-modal-close-btn">
<svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<div style="
padding: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 500px;
border: 2px solid #6466e9;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 14px;
">
<p style="font-size: 24px; font-weight: bold; color: #6466e9;">Pro Subscription</p>
<p id="feature-name" style="width: 100%; text-align: left; color: #4b5563; display:flex; align-items:center;"></p>
<div style="display: flex;align-items: center;gap: 4px;">
<span style="font-size: 36px; font-weight: bold">$7.90</span><span style="padding-top: 9px;color: #4b5563;">/ month</span>
</div>
<a href="initSubscription?mode=stripe&useOldStripe=false&redirect=85379604-3797-0163" onclick="localStorage.setItem('showFeedbackFormLS', true);localStorage.setItem('visitedStripe', true);" id="subscribe-anchor" class="cta-anchor">
<svg style="height: 30px; margin-right: 8px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"></path>
</svg>
<strong>Pay with Credit Card</strong>
</a>
<a href="initSubscription?mode=paypal&redirect=85379604-3797-0163" onclick="localStorage.setItem('showFeedbackFormLS', true);" id="paypal-anchor" class="cta-anchor">
<img style="height: 30px;margin-right: 8px;" src="images/paypal.png">
<strong>Pay with PayPal</strong>
</a>
<p id="already-subscribed-text" style="width: 100%;
font-size: 15px;
font-style: italic;
justify-content: center;
align-items: center;
gap: 4px;
margin-top: -4px;
color: #4b5563;
display: none;
">
Already subscribed? <a href="login.jsp?redirect=85379604-3797-0163" style="text-decoration: underline; color: #6466e9;">Click here to sign in.</a>
</p>
<div style="display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 8px">
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width:95%">Draw in a range of 73 vibrant colors with 4 opacity levels</p>
</div>
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width: 95%">Create whiteboards that never expire while subscription is active</p>
</div>
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width:95%">Choose your own profile picture</p>
</div>
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width: 95%">Create multi-line text with adjustable width</p>
</div>
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width: 95%">4 Pro Boosts per month - give another user Pro features for one hour</p>
</div>
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width: 95%">Remove ads for all whiteboard participants while you are connected</p>
</div>
<div style="width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;">
<svg width="20px" height="20px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<g id="Complete">
<g id="tick">
<polyline fill="none" points="3.7 14.3 9.6 19 20.3 5" stroke="#6466e9" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"></polyline>
</g>
</g>
</g>
</svg>
<p style="width: 95%">Dark mode available</p>
</div>
</div>
</div>
</div>
</div>
<div id="textbox-modal" class="modal" style="display: none">
<div id="textbox-modal-content" class="textbox-modal-content">
<button class="textbox-modal-close" id="textbox-modal-close-btn">
<svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<p style="font-size: 20px; font-weight: bold">Add Text</p>
<textarea id="textbox-textarea" style="font-size: 28px; line-height: 36px"></textarea>
<div class="textbox-checkbox-container">
<input type="checkbox" checked="" id="textbox-checkbox" class="textbox-checkbox" name="textbox-checkbox">
<label for="textbox-checkbox">Wrap Text</label>
</div>
<div class="textbox-modal-buttons-container">
<button id="textbox-modal-cancel-btn" class="textbox-button" style="background-color: rgb(215, 215, 215); color: rgb(0, 0, 0)">
Cancel
</button>
<button class="textbox-button" id="textbox-submit-btn" style="background-color: rgb(255, 106, 0); color: white">
<span>Add Text</span>
</button>
</div>
</div>
</div>
<div id="colorpicker-modal" class="modal" style="display: none">
<div id="colorpicker-modal-content" class="colorpicker-modal-content">
<button class="colorpicker-modal-close" id="colorpicker-modal-close-btn">
<svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<p style="font-weight: bold;">Select a Color</p>
<div id="picker" style="width: 100%; display: flex; justify-content: center;"></div>
<div style="display: flex; flex-direction: column; width: 100%; margin-top: 20px;">
<div class="colorpicker-selected-color-container">
<div id="colorpicker-selected-color"></div>
<span id="colorpicker-selected-color-hex"></span>
</div>
<div class="colorpicker-modal-buttons-container">
<button id="colorpicker-modal-cancel-btn" class="colorpicker-button" style="background-color: rgb(215, 215, 215); color: rgb(0, 0, 0)">
Cancel
</button>
<button class="colorpicker-button" id="colorpicker-submit-btn" style="background-color: rgb(255, 106, 0); color: white">
<span>Select</span>
</button>
</div>
</div>
</div>
</div>
<div id="colorsedit-modal" class="modal" style="display: none">
<div id="colorsedit-modal-content" class="colorsedit-modal-content">
<button class="colorsedit-modal-close" id="colorsedit-modal-close-btn">
<svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<p style="font-size: 20px; font-weight: bold; margin-bottom: 20px;">Edit Colors</p>
<textarea id="colorsedit-text-box" style="width: 340px; resize: none; height: 300px; padding: 5px; font-size: 16px; line-height: 26px;"> </textarea>
<div class="colorsedit-modal-buttons-container">
<button id="colorsedit-modal-cancel-btn" class="colorsedit-button" style="background-color: rgb(215, 215, 215); color: rgb(0, 0, 0)">
Cancel
</button>
<button class="colorsedit-button" id="colorsedit-submit-btn" style="background-color: rgb(255, 106, 0); color: white">
<span>Save</span>
</button>
</div>
</div>
</div>
<div class="spinner-overlay" style="display: none;"><div class="spinner"></div><p class="spinner-text">Uploading Image...</p></div>
<div id="upload-image-overlay">
<p>Drop to add image</p>
</div>
<div class="tooltip" style="display: none;">
<div class="tooltip-header">
<h2 class="tooltip-title">Introducing Pro Boost
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 26px; height: 26px; fill: #7c66f5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
</h2>
<span class="close-btn" onclick="hideTooltip()">×</span>
</div>
<div class="tooltip-body">
<p class="tooltip-content">
Select Options > Users > Boost to give another user Pro features for one hour. You can give 4 Pro Boosts per subscription month.
</p>
<div style="display: flex; gap: 8px; justify-content: flex-end;">
<button style="background-color:#eeeeee;color:#233f98;" onclick="hideTooltip()">
Got it
</button>
</div>
</div>
</div>
<template id="ad-template-right">
<div id="ad-overlay-right" style="
padding: 50px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
width: fit-content;
background-color: #ffffff91;
backdrop-filter: blur(30px);
">
<h3 style="font-size: 24px; text-align: center;">Draw in all 73 Colors!</h3>
<button style="
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 16px;
border: none;
border-radius: 8px;
background-color: #6466e9;
color: white;
font-size: 16px;
">
<strong>Tell me more</strong>
</button>
</div>
</template>
<template id="ad-template-bottom">
<div id="ad-overlay-bottom" style="
margin-top: 35px;
padding: 2px 20px;
display: flex;
align-items: center;
gap: 80px;
width: fit-content;
background-color: #ffffffdb;
border-radius: 8px;
">
<h3 style="font-size: 34px;">Draw in all 73 Colors!</h3>
<button style="
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 4px 16px;
border: none;
border-radius: 6px;
background-color: #6466e9;
color: white;
font-size: 26px;
">
<strong>Tell me more</strong>
</button>
</div>
</template>
<div id="feedback-modal" class="modal" style="display: none">
<div id="feedback-modal-content" class="feedback-modal-content">
<button class="feedback-modal-close" id="feedback-modal-close-btn">
<svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<div style="
padding: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 500px;
border: 2px solid #6466e9;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 14px;
">
<p style="font-size: 24px; font-weight: bold; color: #6466e9; text-align: left">
Payment Problem?
</p>
<p style="width: 100%; text-align: left; color: #4b5563; display: flex; align-items: center; font-size: 16px">
Please tell us why you didn't complete your payment
</p>
<form id="feedback-form" style="width: 100%; display: flex; flex-direction: column; gap: 18px; margin-top: 8px">
<div style="width: 100%; display: flex; align-items: center; gap: 10px; text-align: left">
<input style="cursor: pointer;" type="radio" id="feedback-0" value="card_declined" name="feedback">
<label style="width: 95%; cursor: pointer;" for="feedback-0">
My credit card was not accepted
</label>
</div>
<div style="width: 100%; display: flex; align-items: center; gap: 10px; text-align: left">
<input style="cursor: pointer;" type="radio" id="feedback-2" value="accidental_click" name="feedback">
<label style="width: 95%; cursor: pointer;" for="feedback-2">
Clicked "Subscribe" by accident
</label>
</div>
<div style="width: 100%; display: flex; align-items: center; gap: 10px; text-align: left">
<input style="cursor: pointer;" type="radio" id="feedback-3" value="changed_mind" name="feedback">
<label style="width: 95%; cursor: pointer;" for="feedback-3">
Changed my mind
</label>
</div>
<div style="width: 100%; display: flex; align-items: center; gap: 10px; text-align: left">
<input style="cursor: pointer;" type="radio" id="feedback-4" value="too_expensive" name="feedback">
<label style="width: 95%; cursor: pointer;" for="feedback-4">
Too expensive
</label>
</div>
<button type="submit" style="
display: flex;
align-items: center;
justify-content: center;
width: 100%;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
padding: 12px 16px;
border: none;
border-radius: 8px;
background-color: rgb(100, 102, 233);
color: white;
font-size: 20px;
text-decoration: none;
margin-top: 30px;
">
<strong> Submit </strong>
</button>
</form>
</div>
</div>
</div>
<div id="paypal-modal-after-failure" class="modal" style="display: none">
<div id="feedback-modal-content" class="feedback-modal-content">
<button class="feedback-modal-close" id="feedback-modal-close-btn">
<svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_429_11083)">
<path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
</g>
<defs>
<clipPath id="clip0_429_11083">
<rect width="24" height="24" fill="white"></rect>
</clipPath>
</defs>
</svg>
</button>
<div style="
padding: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
max-width: 500px;
border: 2px solid #6466e9;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 14px;
">
<p style="font-size: 24px; font-weight: bold; color: #6466e9; text-align: center">
Try PayPal?
</p>
<p style="width: 100%; text-align: left; color: #4b5563; display: flex; align-items: center; font-size: 16px">
If you were unable to complete your payment using our normal credit card processor Stripe, please try again using PayPal
</p>
<div>
<a href="initSubscription?mode=paypal&redirect=85379604-3797-0163&retry_with_paypal=true" id="paypal-anchor" onclick="localStorage.setItem('showFeedbackFormLS', true);" class="cta-anchor">
<img style="height: 30px;margin-right: 8px;" src="images/paypal.png">
<strong>Try Again with PayPal</strong>
</a>
</div>
</div>
</div>
</div>
<script>
function showProBoostAvailableJs(username) {
let script = document.createElement('script');
script.src = 'confetti.js';
script.onload = function() {
confetti({
particleCount: 300,
spread: 500,
ticks: 10,
origin: { x: 0.35, y: 0 },
});
let boostNotificationPill = document.querySelector("#boost-offer-available");
boostNotificationPill.style.display = "flex";
boostNotificationPill.addEventListener("click", (e) => showBoostOfferDialog(username));
};
document.head.appendChild(script);
}
function showBoostOfferDialog(username) {
let offerModal = document.querySelector("#boost-offer-modal");
offerModal.style.display = "block";
document.querySelector("#boost-offer-modal-text").innerText = 'Congratulations! User @' + username + ' has given you a Pro boost, so you can use Pro features for one hour! Reload this page to access Pro features on this whiteboard.';
document.querySelector("#boost-offer-modal-confirm-btn").addEventListener("click", () => {
window.location.reload();
});
let closeButton = document.querySelector("#boost-offer-modal-close-btn");
closeButton.addEventListener('click', hideOfferModal);
function hideOfferModal() {
offerModal.style.display = 'none';
closeButton.removeEventListener('click', hideOfferModal);
}
}
window.addEventListener('paste', (e) => {
let isTextboxModalOpen = document.getElementById('textbox-modal').style.display !== 'none';
let isColorsEditorModalOpen = document.getElementById('colorsedit-modal').style.display !== 'none';
let isSnapshotModalOpen = document.getElementById('snapshot-modal').style.display !== 'none';
let textarea = document.getElementById('textbox-textarea');
if (!textarea.value && !isTextboxModalOpen && !isSnapshotModalOpen && !isColorsEditorModalOpen) {
// textarea is empty so text can be pasted directly into the textbox modal
e.preventDefault();
}
let items = (e.clipboardData || e.originalEvent.clipboardData).items;
for (let item of items) {
if (item.kind === 'file') {
let file = item.getAsFile();
processImageFile(file);
} else if (item.kind === 'string' && item.type.match('^text/plain')) {
item.getAsString((pastedText) => {
if (!isTextboxModalOpen && !isSnapshotModalOpen && !isColorsEditorModalOpen) {
showTextModalJs(pastedText);
return;
}
});
}
}
});
function isImageFile(file) {
return file.type.startsWith('image/');
}
function processImageFile(file) {
if (!isImageFile(file)) {
window.alert('File must be an image');
return;
}
document.getElementById('hidden-tag').value = Math.random() + ':' + Math.random();
let dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
let uploadFormEl = document.getElementsByName('uploadFormElement')[0];
uploadFormEl.files = dataTransfer.files;
uploadFormEl.dispatchEvent(new Event('change'));
}
const tooltip = document.querySelector('.tooltip');
function showTooltip() {
tooltip.style.display = 'block';
}
function hideTooltip() {
tooltip.style.display = 'none';
}
function showAnnouncementTooltip(){
let hasSeenBoostAnnouncement = readCookie("boost_feature_checked");
// Check if user has discovered new Pro Boost feature
if(false && !hasSeenBoostAnnouncement){
showTooltip();
createCookie('boost_feature_checked', 'true', 365 * 10, ".whiteboardfox.com");
}
}
// showAnnouncementTooltip();
function showUploadOverlay() {
let overlay = document.getElementById('upload-image-overlay');
overlay.style.display = 'flex';
}
function hideUploadOverlay() {
let overlay = document.getElementById('upload-image-overlay');
overlay.style.display = 'none';
}
window.addEventListener('dragover', function (e) {
e.preventDefault();
showUploadOverlay();
});
window.addEventListener('dragenter', function (e) {
e.preventDefault();
showUploadOverlay();
});
window.addEventListener('dragleave', function (e) {
e.preventDefault();
if (!e.relatedTarget) {
hideUploadOverlay();
}
});
window.addEventListener('drop', function (e) {
e.preventDefault();
hideUploadOverlay();
let files = e.dataTransfer.files;
if (files.length > 0) {
let file = files[0];
processImageFile(file);
}
});
window.addEventListener("load", (event) => {
const showFeedbackFormLS = localStorage.getItem('showFeedbackFormLS');
if (showFeedbackFormLS && !isActiveSubscriptionJs()) {
showFeedbackModal();
}
});
function showFeedbackModal() {
localStorage.removeItem('showFeedbackFormLS');
let hasVisitedStripe = localStorage.getItem('visitedStripe');
localStorage.removeItem('visitedStripe');
const feedbackModal = hasVisitedStripe ? document.getElementById('paypal-modal-after-failure') : document.getElementById('feedback-modal');
const closeButton = document.getElementById('feedback-modal-close-btn');
const isMobile = isUserOnMobile();
const feedbackModalContent = document.getElementById('feedback-modal-content');
feedbackModalContent.style.scale = isMobile ? '1.5' : '';
feedbackModalContent.style.top = isMobile ? '10%' : '';
// Show the modal
feedbackModal.style.display = 'flex';
function handleWindowClick(event) {
if (event.target !== feedbackModal) {
hideFeedbackModal();
}
}
closeButton.addEventListener('click', hideFeedbackModal);
window.addEventListener('click', handleWindowClick);
function hideFeedbackModal() {
feedbackModal.style.display = 'none';
window.removeEventListener('click', handleWindowClick);
closeButton.removeEventListener('click', hideFeedbackModal);
}
const feedbackForm = document.getElementById('feedback-form');
feedbackForm.addEventListener(
'submit',
(e) => {
e.preventDefault();
const selectedRadio = document.querySelector('input[name="feedback"]:checked');
const selectedValue = selectedRadio.value;
let formData = new FormData();
formData.append('eventType', 'checkout_cancelled_feedback');
formData.append('feedback', selectedValue);
fetch('saveException', {
method: 'PUT',
body: formData,
})
.then((response) => response.text())
.then((text) => {
hideFeedbackModal();
showSnackbar(text);
})
.catch((error) => {
hideFeedbackModal();
showSnackbar('Error:', error);
});
},
false
);
}
</script>
<script type="text/javascript">
const textarea = document.getElementById("textbox-textarea");
const colorsEditTextarea = document.getElementById("colorsedit-text-box");
const checkbox = document.getElementById('textbox-checkbox');
textarea.addEventListener("keydown", function(e) {
e.stopPropagation();
});
colorsEditTextarea.addEventListener("keydown", function(e) {
e.stopPropagation();
});
// default styles
textarea.style.whiteSpace = checkbox.checked ? '' : 'pre';
textarea.style.overflowWrap = checkbox.checked ? '' : 'normal';
textarea.style.overflowX = checkbox.checked ? '' : 'auto';
checkbox.addEventListener('change', function () {
if (this.checked) {
textarea.style.whiteSpace = '';
textarea.style.overflowWrap = '';
textarea.style.overflowX = '';
textarea.style.wordBreak = 'break-word';
} else {
textarea.style.whiteSpace = 'pre';
textarea.style.overflowWrap = 'normal';
textarea.style.overflowX = 'auto';
textarea.style.wordBreak = '';
}
});
function splitStringWithEmojiJs(inputString) {
if (typeof Intl.Segmenter === "function") {
const segmenter = new Intl.Segmenter('en', {granularity: 'grapheme'});
return Array.from(segmenter.segment(inputString)).map(segmentObj => segmentObj.segment);
} else {
return inputString.split("");
}
}
let proBoostsGivenThisMonth = 0;
function getProBoostsGivenThisMonthJs(){
return proBoostsGivenThisMonth;
}
function updateProBoostsGivenThisMonthJs(boostsGiven) {
proBoostsGivenThisMonth = boostsGiven;
}
function getMaxProBoostsAllowedJs() {
return 4;
}
</script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
let userType = readCookie("user_type");
let isBusinessOwner = userType == "work";
var Tawk_API = Tawk_API ||{}, Tawk_LoadStart=new Date();
(function(){
if(!isBusinessOwner || isUserOnMobile()) {
return;
}
var s1=document.createElement("script"), s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/643d39d231ebfa0fe7f8c13e/1hi5dkhtg';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
window.Tawk_API.onStatusChange = function(status){
if(status === 'online'){
window.Tawk_API.showWidget();
window.Tawk_API.maximize();
e.preventDefault();
e.stopPropagation();
}
};
</script>
<!--End of Tawk.to Script-->
<iframe id="whiteboard" tabindex="-1" style="position: absolute; width: 0px; height: 0px; border: none; left: -1000px; top: -1000px;"></iframe><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20cm; width: 10cm; height: 10cm; visibility: hidden;"> </div><div style="position: absolute; inset: 0px;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; inset: 0px;"><div style="position: absolute; inset: 0px;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; bottom: 0px; width: 70px;"><div id="menuStrip" style="position: absolute; inset: 0px;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Undo the previous operation (Key Z)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Undo.png"><br>Undo</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Redo the next operation (Key Y)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Redo.png"><br>Redo</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-down" role="button" id="button" title="Draw with a pencil (press again to show color palette) (Key D)" aria-pressed="true" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Draw</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Erase whiteboard elements (Key E)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Eraser.png"><br>Erase</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 280px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Reposition the view (Key A + Drag Mouse)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Move.png"><br>Move</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 350px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="More whiteboard options" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Cog.png"><br>Options</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 420px; right: 0px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Erase multiple drawing elements in a single action" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Trash.png"><br>Clear</div></div></div></div></div><div style="position: absolute; overflow: hidden; inset: 0px 0px 0px 70px;"><canvas id="canvasId" class="cursor-default" tabindex="0" width="730" height="600" style="position: absolute; inset: 0px;"></canvas></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 490px; height: 70px;"><div id="colorsPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(0%) sepia(0%) saturate(7500%) hue-rotate(313deg) brightness(93%) contrast(107%); opacity:1"><br>Black</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-down" role="button" id="button" aria-pressed="true" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Blue</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(54%) sepia(100%) saturate(497%) hue-rotate(172deg) brightness(106%) contrast(90%); opacity:1"><br>Aqua</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(16%) sepia(81%) saturate(6030%) hue-rotate(318deg) brightness(76%) contrast(99%); opacity:1"><br>Red</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(76%) sepia(26%) saturate(6428%) hue-rotate(31deg) brightness(101%) contrast(85%); opacity:1"><br>Green</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(67%) sepia(8%) saturate(2790%) hue-rotate(214deg) brightness(92%) contrast(93%); opacity:1"><br>Purple</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(82%) sepia(67%) saturate(1004%) hue-rotate(334deg) brightness(95%) contrast(89%); opacity:1"><br>Yellow</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 770px; height: 420px;"><div id="extraColors" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(100%) sepia(29%) saturate(689%) hue-rotate(43deg) brightness(123%) contrast(100%); opacity:1"><br>White</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Cloud</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(65%) sepia(11%) saturate(24%) hue-rotate(34deg) brightness(92%) contrast(94%); opacity:1"><br>Silver</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(39%) sepia(2%) saturate(5%) hue-rotate(57deg) brightness(97%) contrast(84%); opacity:1"><br>Ash</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(20%) sepia(0%) saturate(0%) hue-rotate(143deg) brightness(92%) contrast(94%); opacity:1"><br>Charcoal</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(0%) sepia(98%) saturate(13%) hue-rotate(25deg) brightness(90%) contrast(100%); opacity:1"><br>Black</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(90%) sepia(7%) saturate(2108%) hue-rotate(172deg) brightness(101%) contrast(95%); opacity:1"><br>Sapphire</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(68%) sepia(52%) saturate(1484%) hue-rotate(177deg) brightness(113%) contrast(94%); opacity:1"><br>Sky</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(47%) sepia(97%) saturate(524%) hue-rotate(152deg) brightness(104%) contrast(100%); opacity:1"><br>Azure</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(60%) sepia(43%) saturate(4452%) hue-rotate(156deg) brightness(96%) contrast(98%); opacity:1"><br>Turquoise</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(35%) sepia(91%) saturate(1072%) hue-rotate(162deg) brightness(94%) contrast(104%); opacity:1"><br>Steel</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(24%) sepia(97%) saturate(1102%) hue-rotate(161deg) brightness(101%) contrast(106%); opacity:1"><br>Slate</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(86%) sepia(2%) saturate(5000%) hue-rotate(190deg) brightness(99%) contrast(75%); opacity:1"><br>Baby Blue</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(55%) sepia(45%) saturate(321%) hue-rotate(188deg) brightness(97%) contrast(88%); opacity:1"><br>Periwinkle</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(48%) sepia(20%) saturate(1928%) hue-rotate(185deg) brightness(83%) contrast(81%); opacity:1"><br>Peacock</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(19%) sepia(73%) saturate(2184%) hue-rotate(190deg) brightness(99%) contrast(97%); opacity:1"><br>Prussian</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(16%) sepia(39%) saturate(5120%) hue-rotate(194deg) brightness(96%) contrast(102%); opacity:1"><br>Ocean</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(15%) sepia(71%) saturate(2334%) hue-rotate(210deg) brightness(81%) contrast(108%); opacity:1"><br>Midnight</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(98%) sepia(3%) saturate(4752%) hue-rotate(203deg) brightness(92%) contrast(85%); opacity:1"><br>Wisteria</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(63%) sepia(20%) saturate(623%) hue-rotate(248deg) brightness(96%) contrast(81%); opacity:1"><br>Lavender</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(47%) sepia(7%) saturate(3441%) hue-rotate(250deg) brightness(92%) contrast(84%); opacity:1"><br>Violet</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(20%) sepia(54%) saturate(4611%) hue-rotate(292deg) brightness(75%) contrast(86%); opacity:1"><br>Grape</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(10%) sepia(72%) saturate(5090%) hue-rotate(284deg) brightness(93%) contrast(92%); opacity:1"><br>Plum</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(5%) sepia(81%) saturate(6199%) hue-rotate(299deg) brightness(95%) contrast(101%); opacity:1"><br>Aubergine</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(87%) sepia(12%) saturate(816%) hue-rotate(292deg) brightness(97%) contrast(103%); opacity:1"><br>Baby Pink</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(67%) sepia(95%) saturate(394%) hue-rotate(291deg) brightness(100%) contrast(103%); opacity:1"><br>Candy</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(63%) sepia(19%) saturate(4014%) hue-rotate(296deg) brightness(95%) contrast(99%); opacity:1"><br>Flamingo</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(20%) sepia(98%) saturate(6642%) hue-rotate(317deg) brightness(92%) contrast(105%); opacity:1"><br>Hot Pink</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(12%) sepia(79%) saturate(4252%) hue-rotate(313deg) brightness(104%) contrast(112%); opacity:1"><br>Cherry</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(10%) sepia(94%) saturate(4032%) hue-rotate(315deg) brightness(86%) contrast(108%); opacity:1"><br>Sangria</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(75%) sepia(39%) saturate(245%) hue-rotate(332deg) brightness(103%) contrast(96%); opacity:1"><br>Fawn</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(76%) sepia(12%) saturate(4354%) hue-rotate(313deg) brightness(107%) contrast(92%); opacity:1"><br>Salmon</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(46%) sepia(99%) saturate(1325%) hue-rotate(335deg) brightness(99%) contrast(96%); opacity:1"><br>Rose</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(24%) sepia(100%) saturate(7307%) hue-rotate(352deg) brightness(115%) contrast(90%); opacity:1"><br>Crimson</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(14%) sepia(97%) saturate(4564%) hue-rotate(351deg) brightness(72%) contrast(91%); opacity:1"><br>Mahogany</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(8%) sepia(70%) saturate(6122%) hue-rotate(351deg) brightness(99%) contrast(109%); opacity:1"><br>Merlot</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(89%) sepia(10%) saturate(500%) hue-rotate(330deg) brightness(100%) contrast(100%); opacity:1"><br>Skin 1</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(89%) sepia(20%) saturate(1000%) hue-rotate(320deg) brightness(100%) contrast(100%); opacity:1"><br>Skin 2</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(60%) sepia(30%) saturate(500%) hue-rotate(340deg) brightness(100%) contrast(100%); opacity:1"><br>Skin 3</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(50%) sepia(50%) saturate(500%) hue-rotate(345deg) brightness(100%) contrast(100%); opacity:1"><br>Skin 4</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(20%) sepia(99%) saturate(500%) hue-rotate(345deg) brightness(100%) contrast(100%); opacity:1"><br>Skin 5</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(10%) sepia(10%) saturate(4000%) hue-rotate(350deg) brightness(100%) contrast(100%); opacity:1"><br>Skin 6</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(85%) sepia(18%) saturate(546%) hue-rotate(333deg) brightness(107%) contrast(98%); opacity:1"><br>Sand</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(71%) sepia(58%) saturate(289%) hue-rotate(346deg) brightness(102%) contrast(102%); opacity:1"><br>Peach</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(76%) sepia(100%) saturate(2057%) hue-rotate(319deg) brightness(100%) contrast(101%); opacity:1"><br>Apricot</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(61%) sepia(66%) saturate(536%) hue-rotate(347deg) brightness(95%) contrast(99%); opacity:1"><br>Orange</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(49%) sepia(40%) saturate(1872%) hue-rotate(2deg) brightness(88%) contrast(80%); opacity:1"><br>Bronze</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(30%) sepia(51%) saturate(1243%) hue-rotate(355deg) brightness(99%) contrast(94%); opacity:1"><br>Walnut</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(87%) sepia(35%) saturate(239%) hue-rotate(25deg) brightness(109%) contrast(99%); opacity:1"><br>Sorbet</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(94%) sepia(87%) saturate(441%) hue-rotate(329deg) brightness(103%) contrast(102%); opacity:1"><br>Butter</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(93%) sepia(95%) saturate(604%) hue-rotate(340deg) brightness(100%) contrast(104%); opacity:1"><br>Lemon</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(86%) sepia(86%) saturate(3580%) hue-rotate(351deg) brightness(98%) contrast(106%); opacity:1"><br>Banana</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(71%) sepia(18%) saturate(4012%) hue-rotate(13deg) brightness(100%) contrast(99%); opacity:1"><br>Mustard</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(48%) sepia(37%) saturate(3588%) hue-rotate(34deg) brightness(96%) contrast(97%); opacity:1"><br>Brass</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(89%) sepia(19%) saturate(277%) hue-rotate(47deg) brightness(106%) contrast(87%); opacity:1"><br>Pistachio</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(92%) sepia(36%) saturate(471%) hue-rotate(20deg) brightness(92%) contrast(90%); opacity:1"><br>Spring</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(78%) sepia(39%) saturate(546%) hue-rotate(34deg) brightness(97%) contrast(88%); opacity:1"><br>Lime</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(66%) sepia(61%) saturate(465%) hue-rotate(45deg) brightness(97%) contrast(88%); opacity:1"><br>Meadow</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(44%) sepia(60%) saturate(627%) hue-rotate(82deg) brightness(88%) contrast(83%); opacity:1"><br>Pine</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(36%) sepia(10%) saturate(3138%) hue-rotate(53deg) brightness(104%) contrast(82%); opacity:1"><br>Pickle</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(88%) sepia(10%) saturate(372%) hue-rotate(104deg) brightness(98%) contrast(91%); opacity:1"><br>Eggshell</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(83%) sepia(11%) saturate(1024%) hue-rotate(112deg) brightness(89%) contrast(89%); opacity:1"><br>Teal</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(50%) sepia(63%) saturate(495%) hue-rotate(118deg) brightness(101%) contrast(95%); opacity:1"><br>Emerald</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(47%) sepia(23%) saturate(1892%) hue-rotate(116deg) brightness(96%) contrast(94%); opacity:1"><br>Leaf</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(29%) sepia(70%) saturate(1958%) hue-rotate(142deg) brightness(95%) contrast(101%); opacity:1"><br>Jade</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 350px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(14%) sepia(61%) saturate(5603%) hue-rotate(161deg) brightness(92%) contrast(96%); opacity:1"><br>Jungle</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 770px; height: 280px;"><div id="customColors" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 140px; height: 140px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; position: absolute; inset: 0px;" aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="70" height="70" src="images/ColorWheel.png"><br>Select Color</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 140px; height: 140px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" style="display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; position: absolute; inset: 0px;" aria-pressed="false"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/List.png"><br>Edit Colors</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 420px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 490px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 560px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 630px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div><div style="position: absolute; overflow: hidden; left: 700px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/PencilBlack.png" style="filter: invert(95%) sepia(0%) saturate(2%) hue-rotate(150deg) brightness(90%) contrast(85%); opacity:1"><br>Empty</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 630px; height: 140px;"><div id="shapesPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 210px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw straight lines (Key R)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Line.png"><br>Line</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw an ellipse" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Ellipse.png"><br>Ellipse</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw a circle" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Circle.png"><br>Circle</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw a rectangle" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Rectangle.png"><br>Rectangle</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw a square" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Square.png"><br>Square</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw diamond shape" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Diamond.png"><br>Diamond</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw arrow shape" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Arrow.png"><br>Arrow</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw star shape" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Star.png"><br>Star</div></div></div><div style="position: absolute; overflow: hidden; left: 350px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Heart" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Heart.png"><br>Heart</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-down" role="button" id="button" title="Draw freehand (Key W)" aria-pressed="true" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Freestyle.png"><br>Freehand</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Fill a closed region with selected color (Key F)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/FillTool.png"><br>Fill</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Draw calligraphy (Key I)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Calligraphy.png"><br>Callig.</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 350px; height: 280px;"><div id="widthPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Finest brush with opacity 100%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/xFine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Finest 1</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Finest brush with opacity 60%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/xFine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.6"><br>Finest 2</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Finest brush with opacity 30%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/xFine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.2980392156862745"><br>Finest 3</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Finest brush with opacity 15%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/xFine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.14901960784313725"><br>Finest 4</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Fine brush with opacity 100%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Fine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Fine 1</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Fine brush with opacity 60%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Fine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.6"><br>Fine 2</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Fine brush with opacity 30%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Fine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.2980392156862745"><br>Fine 3</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Fine brush with opacity 15%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Fine.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.14901960784313725"><br>Fine 4</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-down" role="button" id="button" title="Medium brush with opacity 100%" aria-pressed="true" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Normal.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Medium 1</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Medium brush with opacity 60%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Normal.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.6"><br>Medium 2</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Medium brush with opacity 30%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Normal.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.2980392156862745"><br>Medium 3</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Medium brush with opacity 15%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Normal.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.14901960784313725"><br>Medium 4</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Large brush with opacity 100%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Thick.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Large 1</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Large brush with opacity 60%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Thick.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.6"><br>Large 2</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Large brush with opacity 30%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Thick.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.2980392156862745"><br>Large 3</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Large brush with opacity 15%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Thick.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.14901960784313725"><br>Large 4</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Largest brush with opacity 100%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Jumbo.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:1"><br>Largest 1</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Largest brush with opacity 60%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Jumbo.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.6"><br>Largest 2</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Largest brush with opacity 30%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Jumbo.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.2980392156862745"><br>Largest 3</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Largest brush with opacity 15%" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Jumbo.png" style="filter: invert(29%) sepia(32%) saturate(2763%) hue-rotate(189deg) brightness(93%) contrast(81%); opacity:0.14901960784313725"><br>Largest 4</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 70px; width: 350px; height: 70px;"><div id="palettesPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Palette.png"><br>Basic</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Palette.png"><br>Extra</div></div></div><div style="position: absolute; overflow: hidden; left: 140px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Palette.png"><br>Custom</div></div></div><div style="position: absolute; overflow: hidden; left: 210px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Freestyle.png"><br>Style</div></div></div><div style="position: absolute; overflow: hidden; left: 280px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Normal.png"><br>Size</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 140px; top: 140px; width: 70px; height: 280px;"><div id="viewOptionsPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Focus on a larger whiteboard area (Scroll Mouse Wheel)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/ZoomIn.png"><br>Zoom In</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Focus on a larger whiteboard area (Scroll Mouse Wheel)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/ZoomOut.png"><br>Zoom Out</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Selection mode" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Select.png"><br>Select</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Toggle fullscreen mode" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Fullscreen.png"><br>Fullscreen</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 70px; height: 280px;"><div id="editOptionsPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Insert text into the whiteboard (Key T)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Text.png"><br>Add Text</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Insert a picture from an image file (Key P)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Picture.png"><br>Add Pic</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="See who are the users watching this whiteboard" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Users.png"><br>38</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Toggle Dark Mode" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Dark.png"><br>Dark</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 210px; top: 140px; width: 70px; height: 280px;"><div id="boardOptionsPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Let other people view the whiteboard" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Share.png"><br>Share</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div class="gwt-HTML" style="position: absolute; inset: 0px;"><div class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Copy everything to a new whiteboard" aria-pressed="false" style="position: absolute; inset: 0px;"><a id="copy-button-link" target="_blank" style="text-decoration: none;color: inherit;" href="diagramName?diagramToCopy=8537960437970163"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Copy.png"><br>Copy All</div></a></div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Post a snapshot to my gallery" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Post.png"><br>Post</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="More Board Options" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/More.png"><br>More</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 70px; height: 350px;"><div id="selectionPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Repaint the selection with the current draw color" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/RollerBrush.png"><br>Repaint</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Create a copy the selection (Key C)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Copy.png"><br>Copy</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Copy and flip the current selection horizontally" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Flip.png"><br>Flip</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Delete the selection (Key Delete)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Trash.png"><br>Delete</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 280px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Add to the current selection (Hold Down Shift Key)" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Select.png"><br>Add</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 140px; width: 70px; height: 280px;"><div id="fillModePanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Select lines of the boundary of an area to be filled" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/FillSelect.png"><br>Select</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 70px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Join two selected strokes or erase an existing join" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/FillJoin.png"><br>Join</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 140px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Fill a closed region with selected color" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/FillTool.png"><br>Fill</div></div></div><div style="position: absolute; overflow: hidden; left: 0px; top: 210px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Clear the currently selected strokes, you can also undo this operation" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/FillClear.png"><br>Clear</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 70px; top: 420px; width: 140px; height: 70px;"><div aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-PushButton gwt-PushButton-up" role="button" id="button" title="Clear everything on the board" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Trash.png"><br>All</div></div></div><div style="position: absolute; overflow: hidden; left: 70px; top: 0px; width: 70px; height: 70px;"><div tabindex="0" class="gwt-ToggleButton gwt-ToggleButton-up" role="button" id="button" title="Clear the drawing session of a user" aria-pressed="false" style="position: absolute; inset: 0px;"><input type="text" tabindex="-1" aria-hidden="true" style="opacity: 0; height: 1px; width: 1px; z-index: -1; overflow: hidden; position: absolute;"><div class="html-face"><img width="32" height="32" src="images/Users.png"><br>Session</div></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 140px; top: 70px; width: 350px; height: 350px;"><div class="liveUsersPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; inset: 0px;"><table class="staticChild" id="usersTable" style="position: absolute; inset: 0px;"><colgroup><col></colgroup><tbody><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(201, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="online userStatus"></div></div></td><td><p class="userName">anon.5749 (you)</p></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(192, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(192, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.1285</p></td><td><button type="button" class="blockButton" userid="anon.1285">Block</button></td><td><button type="button" class="boostButton" userid="anon.1285"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(174, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(174, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.6769</p></td><td><button type="button" class="blockButton" userid="anon.6769">Block</button></td><td><button type="button" class="boostButton" userid="anon.6769"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(248, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(248, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.2352</p></td><td><button type="button" class="blockButton" userid="anon.2352">Block</button></td><td><button type="button" class="boostButton" userid="anon.2352"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(74, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(74, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.1548</p></td><td><button type="button" class="blockButton" userid="anon.1548">Block</button></td><td><button type="button" class="boostButton" userid="anon.1548"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(82, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(82, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.7469</p></td><td><button type="button" class="blockButton" userid="anon.7469">Block</button></td><td><button type="button" class="boostButton" userid="anon.7469"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(189, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.1606</p></td><td><button type="button" class="blockButton" userid="anon.1606">Block</button></td><td><button type="button" class="boostButton" userid="anon.1606"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(312, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(312, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.1942</p></td><td><button type="button" class="blockButton" userid="anon.1942">Block</button></td><td><button type="button" class="boostButton" userid="anon.1942"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(224, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(224, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.8721</p></td><td><button type="button" class="blockButton" userid="anon.8721">Block</button></td><td><button type="button" class="boostButton" userid="anon.8721"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(142, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(142, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.9863</p></td><td><button type="button" class="blockButton" userid="anon.9863">Block</button></td><td><button type="button" class="boostButton" userid="anon.9863"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(105, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@user.0B98D1">@user.0B98D1</a></td><td><button type="button" class="blockButton" userid="user.0B98D1">Block</button></td><td><button type="button" class="boostButton" userid="user.0B98D1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(301, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@Neptunoponytawnngatitopross2">@Neptunoponytawnngatitopross2</a></td><td><button type="button" class="blockButton" userid="Neptunoponytawnngatitopross2">Block</button></td><td><button type="button" class="boostButton" userid="Neptunoponytawnngatitopross2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(110, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(110, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.5856</p></td><td><button type="button" class="blockButton" userid="anon.5856">Block</button></td><td><button type="button" class="boostButton" userid="anon.5856"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(85, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@user.8BF729">@user.8BF729</a></td><td><button type="button" class="blockButton" userid="user.8BF729">Block</button></td><td><button type="button" class="boostButton" userid="user.8BF729"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(352, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(352, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@user.30A1EE">@user.30A1EE</a></td><td><button type="button" class="blockButton" userid="user.30A1EE">Block</button></td><td><button type="button" class="boostButton" userid="user.30A1EE"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(95, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@user.FCA07A">@user.FCA07A</a></td><td><button type="button" class="blockButton" userid="user.FCA07A">Block</button></td><td><button type="button" class="boostButton" userid="user.FCA07A"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(103, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@El_Dislexico">@El_Dislexico</a></td><td><button type="button" class="blockButton" userid="El_Dislexico">Block</button></td><td><button type="button" class="boostButton" userid="El_Dislexico"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(304, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(304, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@CKesleyy93">@CKesleyy93</a></td><td><button type="button" class="blockButton" userid="CKesleyy93">Block</button></td><td><button type="button" class="boostButton" userid="CKesleyy93"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(260, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(260, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.5928</p></td><td><button type="button" class="blockButton" userid="anon.5928">Block</button></td><td><button type="button" class="boostButton" userid="anon.5928"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(254, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(254, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.9027</p></td><td><button type="button" class="blockButton" userid="anon.9027">Block</button></td><td><button type="button" class="boostButton" userid="anon.9027"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(266, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(266, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.7986</p></td><td><button type="button" class="blockButton" userid="anon.7986">Block</button></td><td><button type="button" class="boostButton" userid="anon.7986"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(260, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(260, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.9627</p></td><td><button type="button" class="blockButton" userid="anon.9627">Block</button></td><td><button type="button" class="boostButton" userid="anon.9627"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(140, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(140, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.8538</p></td><td><button type="button" class="blockButton" userid="anon.8538">Block</button></td><td><button type="button" class="boostButton" userid="anon.8538"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(305, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.1044</p></td><td><button type="button" class="blockButton" userid="anon.1044">Block</button></td><td><button type="button" class="boostButton" userid="anon.1044"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(149, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@user.A16907">@user.A16907</a></td><td><button type="button" class="blockButton" userid="user.A16907">Block</button></td><td><button type="button" class="boostButton" userid="user.A16907"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(222, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(222, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.5911</p></td><td><button type="button" class="blockButton" userid="anon.5911">Block</button></td><td><button type="button" class="boostButton" userid="anon.5911"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(10, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(10, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@Patty_Noob">@Patty_Noob</a></td><td><button type="button" class="blockButton" userid="Patty_Noob">Block</button></td><td><button type="button" class="boostButton" userid="Patty_Noob"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(171, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.7954</p></td><td><button type="button" class="blockButton" userid="anon.7954">Block</button></td><td><button type="button" class="boostButton" userid="anon.7954"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(193, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.2177</p></td><td><button type="button" class="blockButton" userid="anon.2177">Block</button></td><td><button type="button" class="boostButton" userid="anon.2177"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(93, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.1114</p></td><td><button type="button" class="blockButton" userid="anon.1114">Block</button></td><td><button type="button" class="boostButton" userid="anon.1114"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(195, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.7363</p></td><td><button type="button" class="blockButton" userid="anon.7363">Block</button></td><td><button type="button" class="boostButton" userid="anon.7363"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(192, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(192, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@Fan_culero_del_Solkat">@Fan_culero_del_Solkat</a></td><td><button type="button" class="blockButton" userid="Fan_culero_del_Solkat">Block</button></td><td><button type="button" class="boostButton" userid="Fan_culero_del_Solkat"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(210, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(210, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.8998</p></td><td><button type="button" class="blockButton" userid="anon.8998">Block</button></td><td><button type="button" class="boostButton" userid="anon.8998"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(106, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(106, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.3773</p></td><td><button type="button" class="blockButton" userid="anon.3773">Block</button></td><td><button type="button" class="boostButton" userid="anon.3773"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(74, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(74, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.4194</p></td><td><button type="button" class="blockButton" userid="anon.4194">Block</button></td><td><button type="button" class="boostButton" userid="anon.4194"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(284, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(284, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@user.E57091">@user.E57091</a></td><td><button type="button" class="blockButton" userid="user.E57091">Block</button></td><td><button type="button" class="boostButton" userid="user.E57091"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="hsl(230, 75%, 43%)"></circle><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="hsl(230, 75%, 43%)"></path></svg><div class="offline userStatus"></div></div></td><td><p class="userName">anon.5595</p></td><td><button type="button" class="blockButton" userid="anon.5595">Block</button></td><td><button type="button" class="boostButton" userid="anon.5595"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr><tr><td><div class="avatar-container"><svg class="w-8 h-8 max-w-full max-h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#FFFFFF88"></circle><circle cx="256" cy="256" r="256" fill="hsl(37, 75%, 43%)"></circle><path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z" fill="#FFFFFF88"></path></svg><div class="offline userStatus"></div></div></td><td><a target="_blank" class="userName" href="gallery/@Purple_lol">@Purple_lol</a></td><td><button type="button" class="blockButton" userid="Purple_lol">Block</button></td><td><button type="button" class="boostButton" userid="Purple_lol"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#835eff" style="width: 16px; height: 16px" class="w-5 h-5">
<path fill-rule="evenodd" d="M4.606 12.97a.75.75 0 0 1-.134 1.051 2.494 2.494 0 0 0-.93 2.437 2.494 2.494 0 0 0 2.437-.93.75.75 0 1 1 1.186.918 3.995 3.995 0 0 1-4.482 1.332.75.75 0 0 1-.461-.461 3.994 3.994 0 0 1 1.332-4.482.75.75 0 0 1 1.052.134Z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M5.752 12A13.07 13.07 0 0 0 8 14.248v4.002c0 .414.336.75.75.75a5 5 0 0 0 4.797-6.414 12.984 12.984 0 0 0 5.45-10.848.75.75 0 0 0-.735-.735 12.984 12.984 0 0 0-10.849 5.45A5 5 0 0 0 1 11.25c.001.414.337.75.751.75h4.002ZM13 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" clip-rule="evenodd"></path>
</svg>
Boost</button></td></tr></tbody></table></div><div style="position: absolute; overflow: hidden; inset: 0px;"><div class="gwt-HTML" style="position: absolute; inset: 0px;"><button class="whoDrewBtn">Who drew what?</button></div></div></div></div><div style="position: absolute; overflow: hidden; display: none; left: 170px; top: 250px; width: 500px; height: 200px;"><div id="uploadPanel" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"><div aria-hidden="true" style="position: absolute; z-index: -32767; top: -20ex; width: 10em; height: 10ex; visibility: hidden;"> </div><div style="position: absolute; overflow: hidden; left: 20px; top: 20px; right: 20px; height: 40px;"><div class="gwt-Label" style="position: absolute; inset: 0px;">Note: Image must be a maximum size of 4000 x 4000 pixels. JPEG images must not use CYMK color model.</div></div><div style="position: absolute; overflow: hidden; left: 20px; top: 80px; right: 20px; height: 40px;"><form target="FormPanel_whiteboard_1" enctype="multipart/form-data" method="post" id="image-upload-form" action="https://s1.whiteboardfox.com/fileUpload" style="position: absolute; inset: 0px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td align="left" style="vertical-align: top;"><input type="file" class="gwt-FileUpload" name="uploadFormElement"></td></tr><tr><td align="left" style="vertical-align: top;"><input type="hidden" name="tag" id="hidden-tag" value="0.7595906746516872:0.5751531935446716"></td></tr></tbody></table></form></div><div style="position: absolute; overflow: hidden; left: 20px; top: 120px; right: 20px; height: 60px;"><div class="gwt-Label" style="position: absolute; inset: 0px;">Note: You can copy an image using Ctrl+C (Windows) or Cmd+C (Mac), and paste it using Ctrl+V (Windows) or Cmd+V (Mac). Additionally, you can drag and drop an image to add it to the whiteboard.</div></div></div></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-8688055453430381970" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=5653267818700711505" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-6991985697560681396" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=462581667686005027" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-8841988695433584212" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-4353251962537177683" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=2362518712752706015" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=3817885372446204105" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-3355988414029307644" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-474397126620059727" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-4093182353970801677" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-353865942399057824" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=1838010452570046436" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-6000150553917925391" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=1342876066185147786" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-6578125607978803135" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-1196317168976000246" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=2283712734598268217" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=1748980825015853389" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=1922048766123137526" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=5765079077981174386" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-7821727479767173308" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=9207258250401634565" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=4137777558124022316" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=-4627925432349267394" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=6131218533610622841" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=1125559098261841233" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div><div style="position: absolute; overflow: hidden; display: none; inset: 0px;"><img class="gwt-Image" crossorigin="anonymous" src="https://s1.whiteboardfox.com/sendPicture?id=6427192141985281339" aria-hidden="true" style="position: absolute; inset: 0px; display: none;"></div></div></div></div><iframe src="about:blank" name="FormPanel_whiteboard_1" tabindex="-1" style="position:absolute;width:0;height:0;border:0"></iframe><iframe name="__tcfapiLocator" style="display: none;"></iframe><iframe name="__gppLocator" style="display: none;"></iframe><img src="https://ad-delivery.net/px.gif?ch=2" style="display: none !important; width: 1px !important; height: 1px !important;"><img src="https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250" style="display: none !important; width: 1px !important; height: 1px !important;"><img src="https://ad-delivery.net/px.gif?ch=1&e=0.11734010158667174" style="display: none !important; width: 1px !important; height: 1px !important;"></body></html>