@croquet/microverse-library/assets/css/settings.css

An npm package version of Microverse

.allow-select {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#dialogTitle {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#dialogTitle.hidden {
    display: none;
}

#titleHolder {
    height: 52px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
}

#titleLogo {
    width: 100%;
}

.dialogPanel {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: "Poppins";
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    align-items: center;
    position: absolute;
    padding-bottom: 10px;

    width: 600px;
    min-height: 600px;

    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.panel-title {
    font-size: 25px;
    text-align: center;
    margin: 30px 0px 30px 0px;
}

.cancelButton {
    justify-content: flex-end;
    display: flex;
}

#joinPrompt {
    display: flex;
    flex-direction: column;
    align-content: center;
    color: white;
    text-align: center;
    gap: 10px;
}

#joinPrompt.notUseEnter {
    display: none;
}

.hidden {
    display: none;
}

#joinPromptTitle {
    font-size: 24px;
    font-weight: bold;
}

.promptBlurb {
    font-size: 13px;
    line-height: 20px;
    margin-top: 13px;
    margin-bottom: 13px;
}

.stringInputHolder {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 6px;
}

.namePrompt {
    font-size: 17px;
    font-weight: 600;
    color: white;
}

.namePrompt span {
    margin-left: 4px;
    color: #fb3232;
}

.nameField {
    height: 24px;
    font-size: 24px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid white;
    border-radius: 20px;
    padding: 12px 20px;
}

#nameExplanation,
#nameFilterWarning {
    font-size: 13px;
    font-weight: 600;
    color: #fb3232;
}

#nameExplanation {
    margin-top: 4px;
}

.dialogButtonsHolder {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 15px;
    font-weight: bold;
    color: white;
    margin-top: 30px;
}

.dialogButtonsHolder.twoItems {
    justify-content: space-evenly;
}

#enterButton {
    width: 40%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #28a745;
    border-radius: 0.25rem;
    cursor: pointer;
}

#dialogEnterButton.notUseEnter {
    display: none;
}

#enterButton:hover {
    background-color: #218838;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.topright {
    position: absolute;
    right: -20px;
    top: -25px;
}

.btn-radio-button {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;

    margin-left: 4px;
    margin-right: 4px;
}

.handedness-label {
    margin-left: 4px;
    margin-right: 4px;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

#cancelButton:hover {
    background-color: #c82333;
}

#acceptButton:hover {
    background-color: #218838;
}

#dialogAcceptCancelButtons {
    display: none;
}

#dialogAcceptCancelButtons.notUseEnter {
    display: flex;
}

.dialogButtonsHolder.disabled #enterButton,
.dialogButtonsHolder.disabled #acceptButton {
    background-color: #6c757d;
    border-color: #6c757d;
    pointer-events: none;
}

#chatHolder {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;

    position: fixed;
    width: 200px;
    height: 50px;

    left: 70%;
    top: 10px;
    z-index: 1;
}

#local {
    display: none;
}

#chatUI {
    height: 50px;
    flex: none;
}

#chatState {
    position: absolute;
    width: 70px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

#chatHolder:not(.hide-settings) #chatState {
    border-bottom-left-radius: 0px;
}

#chatSymbol {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23006837;%7D .st3%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0585;stroke-miterlimit:10;%7D .st4%7Bfill:%23FFFFFF;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.1293;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.5579;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.6536;stroke-miterlimit:10;%7D .st8%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st9%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.5;stroke-miterlimit:10;%7D .st10%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.4911;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D%0A%3C/style%3E%3Cg transform='rotate(240 12.5 13.5)'%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-35.05' y='-74.65' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cg%3E%3Cpath class='st4' d='M13.98,13.25c-0.74-0.21-1.46-0.27-2.2-0.15c-0.22,0.03-0.43,0.08-0.64,0.14c-0.04,0.01-0.1,0.1-0.1,0.14 c0.02,0.23,0.05,0.46,0.08,0.69c0.04,0.37-0.13,0.71-0.48,0.86c-0.58,0.25-1.16,0.48-1.75,0.71c-0.34,0.13-0.69,0-0.88-0.31 c-0.28-0.45-0.57-0.89-0.85-1.34c-0.23-0.37-0.2-0.69,0.11-1c1.38-1.38,3.05-2.1,4.99-2.19c1.71-0.08,3.25,0.42,4.64,1.4 c0.32,0.23,0.61,0.51,0.9,0.78c0.23,0.22,0.26,0.59,0.1,0.86c-0.29,0.49-0.59,0.98-0.89,1.46c-0.18,0.29-0.56,0.41-0.88,0.29 c-0.56-0.21-1.12-0.43-1.68-0.65c-0.41-0.16-0.59-0.45-0.55-0.89C13.92,13.79,13.95,13.53,13.98,13.25z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 100%;
    position: absolute;
    width: 40px;
    height: 40px;
    left: -4px;
    top: 6px;
}

#peopleSymbol {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%232B2B2B;%7D .st2%7Bfill:%23DC3545;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M16.1,33.9c-2.9,0-5.8,0-8.8,0c-1.4,0-2-0.6-1.9-2c0.1-4.2,3.4-7.5,7.9-7.9c2.2-0.2,4.4-0.1,6.6,0.2 c3.8,0.4,6.8,4,6.9,7.9c0,1.1-0.6,1.8-1.8,1.8C22,33.9,19.1,33.9,16.1,33.9z'/%3E%3Cpath class='st0' d='M22.2,15.6c0,3.4-2.8,6.1-6.1,6.1c-3.4-0.1-6-2.7-6-6.1c0-3.4,2.7-6.1,6.1-6.1C19.5,9.4,22.2,12.2,22.2,15.6z' /%3E%3Cpath class='st0' d='M22.3,20.1c1.7-2.6,1.9-5.2,0.7-7.9c2-1.8,5.1-1.5,7,0.6c1.9,2.1,1.8,5.4-0.3,7.4 C27.6,22.2,24.4,22.1,22.3,20.1z'/%3E%3Cpath class='st0' d='M25.2,24.7c1.7,0.1,3.4,0,5,0.4c3.1,0.6,5.5,3.5,5.7,6.7c0.1,1.5-0.4,2.1-2,2.1c-1.9,0-3.9,0-5.9,0 C29,30.4,27.5,27.3,25.2,24.7z'/%3E%3C/g%3E%3C/svg%3E%0A");
    /* background-image: url("./voice-chat-icons/png/people.png"); */
    background-size: 100%;
    position: absolute;
    width: 18px;
    height: 18px;
    left: 16px;
    top: 10px;
}

#chatCount {
    position: absolute;
    width: 30px;
    height: 50px;
    left: 36px;
    top: 0px;
    font-size: 18px;
    font-weight: bold;
    line-height: 50px;
    text-align: center;
    color: white;
}

#chatButtons {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 70px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

#chatHolder:not(.hide-settings) #chatButtons {
    border-bottom-right-radius: 0px;
}

#chatButtons > div {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

#toggleAudio > div,
#toggleSettings > div {
    background-color: #ddd;
}

#toggleAudio > div:hover,
#toggleSettings > div:hover {
    background-color: #c9c9c9;
}

#toggleAudio > div:focus,
#toggleAudio > div:focus-visible,
#toggleSettings > div:focus,
#toggleSettings > div:focus-visible {
    outline: none !important;
}

#chatButtons .buttonImage {
    position: relative;
    width: 38px;
    height: 38px;
    top: 6px;
    left: 6px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#toggleConnection > .joined {
    background-color: #dc3545;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%232B2B2B;%7D .st2%7Bfill:%23DC3545;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M21.6,28.4c0.8-0.9,1.6-1.8,2.3-2.7c0.7-1,1.6-1.1,2.7-0.7c1.8,0.8,3.5,1.6,5.3,2.3c1.2,0.5,1.7,1.3,1.4,2.5 c-0.4,1.7-0.8,3.5-1.2,5.2c-0.3,1.1-0.9,1.6-2.1,1.6C17.5,36.7,6,26.6,4.5,14.2c-0.1-1.1-0.2-2.2-0.3-3.4C4.2,9.6,4.8,9,5.9,8.7 C7.6,8.3,9.4,8,11.1,7.5c1.1-0.3,1.9,0.1,2.3,1.1c0.9,2,1.7,4,2.5,5.9c0.4,0.9,0.2,1.7-0.6,2.3c-0.9,0.8-1.8,1.5-2.8,2.3 C13.4,22.2,17.4,26.4,21.6,28.4z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M31.6,8.4c0.1-0.1,0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2l0.3,0.3C32.9,8.8,33,8.9,33,9.1 c0,0.2-0.1,0.3-0.2,0.4l-3.2,3.2l3.2,3.2c0.1,0.1,0.2,0.3,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4l-0.3,0.3c-0.1,0.1-0.3,0.2-0.4,0.2 c-0.2,0-0.3-0.1-0.4-0.2l-3.2-3.2l-3.2,3.2c-0.1,0.1-0.3,0.2-0.4,0.2c-0.2,0-0.3-0.1-0.4-0.2L24,16.8c-0.1-0.1-0.2-0.3-0.2-0.4 c0-0.2,0.1-0.3,0.2-0.4l3.2-3.2L24,9.5c-0.1-0.1-0.2-0.3-0.2-0.4c0-0.2,0-0.3,0.2-0.4l0.3-0.3c0.1-0.1,0.3-0.2,0.4-0.2 c0.2,0,0.3,0.1,0.4,0.2l3.2,3.2L31.6,8.4z'/%3E%3C/g%3E%3C/svg%3E%0A");
    /* background-image: url("./voice-chat-icons/png/end-call.png"); */
    background-size: 67%;
}

#toggleConnection:hover > .joined {
    background-color: #c82333;
}

#toggleConnection > .notJoined {
    background-color: #28a745;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%232B2B2B;%7D .st2%7Bfill:%23DC3545;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M21.8,28.4c0.8-1,1.6-1.9,2.3-2.8c0.7-0.9,1.5-1.1,2.5-0.7c1.9,0.8,3.8,1.6,5.7,2.4c1,0.4,1.4,1.2,1.2,2.3 c-0.4,1.9-0.8,3.7-1.3,5.5c-0.3,1.1-1.1,1.4-2.1,1.4C18,36.6,6.9,27.2,4.9,15.3c-0.2-1.4-0.4-2.7-0.4-4.1C4.3,9.6,4.8,9,6.3,8.7 c1.7-0.4,3.4-0.7,5-1.2c1.1-0.3,1.9,0.1,2.3,1.1c0.9,1.9,1.7,3.9,2.5,5.8c0.4,1,0.2,1.8-0.7,2.5c-0.5,0.3-0.9,0.7-1.3,1.1 c-1.6,1.3-1.6,1.3-0.5,3.1C15.6,24.3,18.3,26.7,21.8,28.4z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st0' d='M27.7,8.1c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.4-0.2h0.4c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4 v4.1h4.1c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4v0.4c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2h-4.1v4.1 c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2h-0.4c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4v-4.1h-4.1 c-0.2,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4v-0.4c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.4-0.2h4.1V8.1z'/%3E%3C/g%3E%3C/svg%3E%0A");
    /*background-image: url("./voice-chat-icons/png/join-call.png"); */
    background-size: 67%;
}

#toggleConnection:hover > .notJoined {
    background-color: #218838;
}

#connection-tooltip {
    position: absolute;
    top: 14px;
    left: 100%;
    height: 1.5rem;
    width: 6.4rem;
    color: #000;
    background-color: #ffc107 !important;
    border-radius: 0.25rem;
    font-size: 12px;
    pointer-events: none;
}

#connection-tooltip.bouncing {
    /* @keyframes duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
    animation: 2s linear 0s 5 bounce, 2s linear 10s 1 normal forwards running fade;
}

#connection-tooltip-arrow {
    left: -0.68rem;
    top: 0.06rem;
    border-width: 0.7rem 0.7rem 0.7rem 0;
    border-right-color: #ffc107;
    border-style: solid;
    color: transparent;
    position: relative;
    width: 1px;
}

#connection-tooltip-contents {
    position: absolute;
    left: 0px;
    top: 0px;
    width: fit-content;
    white-space: nowrap;
    padding: 0rem 0.5rem 0.25rem 0.5rem;
}

/* adapted from https://github.com/animate-css/animate.css/blob/main/source/attention_seekers/bounce.css */
@keyframes bounce {
    from,
    10%,
    26%,
    50% {
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translateY(0);
    }

    20%,
    22% {
	animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	transform: translateY(-14px);
    }

    35% {
	animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	transform: translateY(-8px);
  }

    40% {
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translateY(0);
    }

    45% {
	transform: translateY(-6px);
    }

    to {
	transform: translateY(0);
    }
}

@keyframes fade {
    from {
	opacity: 1;
	transform: scale(1);
    }

    99% {
	opacity: 0;
	transform: scale(1);
    }

    to {
	transform: scale(0);
    }
}

#chatHolder.unconnected #toggleConnection > .joined {
    display: none;
}

#chatHolder:not(.unconnected) #toggleConnection > .notJoined {
    display: none;
}

#chatHolder.unconnected.joining #toggleConnection {
    pointer-events: none;
}

#chatHolder.unconnected.joining #toggleConnection > .buttonImage {
    background-color: #aaa;
}

#chatHolder.unconnected #toggleAudio {
    display: none;
}

#toggleAudio > .enabled {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%232B2B2B;%7D .st2%7Bfill:%23DC3545;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st1' d='M25.3,16.5c0,1.6,0,3.1,0,4.7c-0.1,2.9-2.3,5.2-5.2,5.4c-2.8,0.1-5.4-2.1-5.6-5c-0.1-3.3-0.1-6.7,0-10 c0.1-2.9,2.6-5.2,5.5-5.1c3,0.1,5.3,2.4,5.3,5.4C25.4,13.3,25.3,14.9,25.3,16.5z'/%3E%3Cpath class='st1' d='M21.4,31c-0.3,2-0.3,2,1.6,2c0.4,0,1.7-0.1,1.9,0.1c0.5,0.5,0.3,1.1,0.4,1.7c0,1-0.6,0.8-1.2,0.8 c-2.6,0-5.3,0-7.9,0c-0.7,0-1.5,0.1-1.6-0.9c0-1,0-1.7,1.6-1.7c0.8,0,1.5,0,2.3,0c0.5-1.9,0.5-2-1.2-2.5c-4.9-1.5-7.8-6.2-7.2-11.9 c0.1-0.8,0.6-1.4,1.4-1.1c0.5,0.2,1,0.7,1.2,1.2c0.2,0.6,0.1,1.3,0.1,1.9c0,4.1,3.2,7.6,7,7.7c4,0.2,7.2-2.8,7.6-7 c0.1-0.9-0.1-1.8,0.1-2.7c0.1-0.5,0.8-1.1,1.2-1.1c0.4,0,1.2,0.6,1.3,1c1,4.9-1.7,10-6.2,11.7C22.9,30.6,22.1,30.8,21.4,31z'/%3E%3C/g%3E%3C/svg%3E%0A");
    /* background-image: url("./voice-chat-icons/png/mute.png"); */
    background-size: 80%;
    display: none;
}

#toggleAudio > .disabled {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:%232B2B2B;%7D .st2%7Bfill:%23DC3545;%7D%0A%3C/style%3E%3Cg%3E%3Cg%3E%3Cpath class='st2' d='M14.7,14.5c0-1.3,0-2.2,0-3.2c0.1-3.1,2.4-5.4,5.4-5.4c2.8,0,5.3,2.3,5.4,5.2c0.1,3.7-0.2,7.4-0.2,11.1 c0,0.5,0.6,1,1,1.5c0.2,0,0.4,0,0.6-0.1c0.2-1.2,0.4-1.8,0.7-2.9c0.3-1.1,0.1-2.3,0.3-2.8c0.2-0.5,0.4-0.8,0.9-0.9 c0.8-0.2,1.3,0.4,1.3,1.2c0.1,2.2,0.1,4.4-0.9,6.5c-0.4,0.7-0.2,1.1,0.4,1.6c2.7,2,5.3,4.2,7.9,6.2c0.6,0.5,1.1,1,0.6,1.9 c-0.5,0.9-1.3,1-2.3,0.2c-2-1.5-3.9-3.1-5.9-4.6C21,22.9,12,15.9,3,8.9C2.7,8.6,2.2,8.4,2.1,8C2,7.5,2,6.7,2.3,6.4 C2.6,6.1,3.4,6,3.8,6.2c0.8,0.4,1.4,1,2.1,1.5C8.7,9.9,11.6,12.1,14.7,14.5z'/%3E%3Cpath class='st2' d='M10,18.1c1.5,1,2.6,1.8,2.9,3.7c0.8,4.5,5.3,6.7,8.6,6.1c0.9-0.2,2.1,0.8,3.1,1.2c0,0.2-0.1,0.4-0.1,0.5 c-1,0.3-2,0.7-2.9,1c-0.3,1.9-0.3,1.9,1.6,2c0.8,0,1.7-0.1,2.1,0.9c0.4,1,0,1.7-1.1,1.7c-2.7,0-5.4,0-8,0c-0.7,0-1.5,0-1.5-1 c0-1,0.5-1.5,1.5-1.6c0.8,0,1.5,0,2.3,0c0.4-1.9,0.4-1.9-1.2-2.4c-4-1.2-6.9-4.9-7.2-9.4C10,20,10,19.1,10,18.1z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
    /* background-image: url("./voice-chat-icons/png/unmute.png"); */
    background-size: 80%;
    display: none;
}

#toggleAudio > .unavailable {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 25' style='enable-background:new 0 0 25 25;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bdisplay:none;%7D .st1%7Bdisplay:inline;fill:%23393838;%7D .st2%7Bfill:%23FFFFFF;%7D .st3%7Bfill:%23006837;%7D .st4%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.0519;stroke-miterlimit:10;%7D .st5%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st6%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.8088;stroke-miterlimit:10;%7D .st7%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.364;stroke-miterlimit:10;%7D .st8%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st9%7Bfill:%23E85656;%7D .st10%7Bfill:%23E85656;stroke:%23393838;stroke-width:0.2282;stroke-miterlimit:10;%7D .st11%7Bfill:%23393838;%7D .st12%7Bfill:%23FFFFFF;stroke:%23393838;stroke-width:0.2485;stroke-miterlimit:10;%7D .st13%7Bfill:%23191919;%7D .st14%7Bfill:none;stroke:%23E85656;stroke-width:0.5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Layer_1' class='st0'%3E%3Crect x='-122.05' y='-0.18' class='st1' width='270.4' height='215.61'/%3E%3C/g%3E%3Cg id='Layer_2'%3E%3Cg%3E%3Cpath class='st8' d='M12.04,16.48c0.02-0.03,0.03-0.03,0.03-0.04c0-0.16,0.05-0.34-0.01-0.46c-0.05-0.09-0.25-0.12-0.38-0.16 c-1.24-0.37-2.16-1.59-2.18-2.91c0-0.25,0-0.5,0-0.74c0-0.21,0.11-0.31,0.31-0.31c0.06,0,0.12,0,0.18,0 c0.24,0,0.32,0.09,0.33,0.33c0.01,0.36,0,0.71,0.04,1.07c0.09,0.8,0.83,1.71,1.85,1.85c1.24,0.17,2.48-0.85,2.46-2.17 c0-0.26,0-0.52,0-0.78c0-0.2,0.1-0.29,0.3-0.3c0.01,0,0.01,0,0.02,0c0.45-0.01,0.5,0.04,0.5,0.49c0,0.53,0.03,1.07-0.17,1.58 c-0.4,1.06-1.15,1.72-2.26,1.95c-0.15,0.03-0.17,0.09-0.17,0.22c0,0.38,0,0.38,0.38,0.38c0.17,0,0.34,0,0.51,0 c0.24,0,0.34,0.1,0.35,0.34c0,0.07,0,0.15,0,0.22c-0.01,0.16-0.1,0.26-0.26,0.26c-0.91,0-1.81,0-2.72,0 c-0.17,0-0.26-0.09-0.28-0.25c-0.01-0.08-0.01-0.16-0.01-0.24c0.01-0.23,0.11-0.33,0.34-0.33C11.48,16.47,11.77,16.48,12.04,16.48 z'/%3E%3Cpath class='st8' d='M14.13,11.59c0,0.47,0,0.93,0,1.4c-0.01,0.8-0.61,1.46-1.44,1.58c-0.77,0.11-1.55-0.4-1.76-1.15 c-0.04-0.16-0.07-0.33-0.07-0.5c-0.01-0.89-0.01-1.78,0-2.67c0.01-0.76,0.47-1.38,1.16-1.6c1.04-0.32,2.11,0.47,2.11,1.56 C14.13,10.67,14.13,11.13,14.13,11.59z M13.31,11.59c0-0.45,0-0.91,0-1.36c0-0.45-0.33-0.8-0.77-0.81 c-0.47-0.01-0.84,0.31-0.85,0.77c-0.01,0.93-0.01,1.86,0,2.79c0.01,0.46,0.38,0.8,0.83,0.79c0.45-0.01,0.8-0.37,0.8-0.83 C13.31,12.48,13.31,12.04,13.31,11.59z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='st9' d='M17.07,16.59c-0.11,0.13-0.2,0.28-0.32,0.38c-0.11,0.09-0.21-0.02-0.3-0.1c-1.52-1.24-3.04-2.48-4.57-3.72 c-1.22-1-2.44-1.99-3.66-2.99c-0.18-0.15-0.19-0.24-0.05-0.43c0.02-0.03,0.04-0.06,0.07-0.08c0.15-0.18,0.21-0.19,0.39-0.04 c1.12,0.91,2.24,1.82,3.36,2.74c1.58,1.29,3.17,2.58,4.75,3.87c0.07,0.06,0.15,0.11,0.21,0.17C16.98,16.44,17.01,16.5,17.07,16.59 z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    display: none;
}

#chatHolder:not(.mute-audio) #toggleAudio:not(.error) > .enabled {
    display: block;
}

#chatHolder.mute-audio #toggleAudio:not(.error) > .disabled {
    display: block;
}

#toggleAudio.error > .unavailable {
    display: block;
}

#chatHolder.unconnected #toggleSettings {
    display: none;
}

#toggleSettings > .enabled {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MS4zMiA0My44Ij4KICA8cGF0aCBkPSJNMzguNTMsMTUuODhjLS4wMiwuNTgtLjMyLDEtLjcyLDEuMzctLjkyLC44NC0xLjg0LDEuNjktMi43OCwyLjUxLS4yMSwuMTktLjI3LC4zNy0uMjYsLjY2LC4wMywxLDAsMi4wMSwuMDIsMy4wMSwwLC4xOSwuMDksLjQ0LC4yMywuNTcsLjg4LC44MiwxLjc4LDEuNjIsMi42NywyLjQyLC44OSwuOCwxLDEuMzksLjU2LDIuNTItLjcsMS44MS0xLjc0LDMuNDEtMi45Miw0LjkzLS40OSwuNjMtMS4xOSwuODItMi4wNywuNTQtMS4yLS4zOC0yLjQtLjc4LTMuNi0xLjE1LS4xOC0uMDUtLjQ0LDAtLjYxLC4wOS0uOTIsLjUtMS44MywxLjAyLTIuNzMsMS41NS0uMTMsLjA4LS4yNiwuMjMtLjI5LC4zNy0uMjgsMS4yNC0uNTQsMi40OS0uNzksMy43NC0uMTgsLjg4LS42OCwxLjM5LTEuNTgsMS41NS0yLC4zNS00LjAxLC4zNS02LjAxLDAtLjkyLS4xNi0xLjM3LS42My0xLjU2LTEuNTYtLjI0LTEuMi0uNDktMi40MS0uNzQtMy42MS0uMDYtLjI4LS4xOS0uNDQtLjQ3LS41OC0uODktLjQ2LTEuNzQtLjk5LTIuNjItMS40Ny0uMTctLjA5LS40Mi0uMTUtLjYtLjA5LTEuMiwuMzYtMi40LC43NS0zLjU5LDEuMTUtLjgzLC4yOC0xLjUzLC4xMi0yLjEtLjU3LTEuMjktMS41Ni0yLjI5LTMuMy0zLjAzLTUuMTktLjMxLS43Ny0uMTMtMS40OCwuNS0yLjA1LC45NC0uODQsMS44OS0xLjY4LDIuODQtMi41MSwuMjEtLjE4LC4yOC0uMzUsLjI3LS42NS0uMDQtMS4wMywwLTIuMDctLjAyLTMuMSwwLS4xOC0uMDctLjQyLS4yLS41NC0uODYtLjgxLTEuNzQtMS42MS0yLjY0LTIuMzktLjk0LS44Mi0xLjA5LTEuNDgtLjYxLTIuNjMsLjcyLTEuNzMsMS42NS0zLjMzLDIuODMtNC43OSwuNTctLjcxLDEuMjItLjkyLDIuMTEtLjY0LDEuMjIsLjM4LDIuNDMsLjc4LDMuNjUsMS4xNSwuMTcsLjA1LC40MSwuMDIsLjU3LS4wNiwuOTEtLjUyLDEuODEtMS4wNSwyLjctMS42MSwuMTUtLjEsLjMyLS4yOCwuMzUtLjQ1LC4yOS0xLjIzLC41NS0yLjQ2LC44MS0zLjY5LC4xOC0uODcsLjcxLTEuMzUsMS41Ny0xLjUsMS45OS0uMzUsMy45OC0uMzUsNS45Ni0uMDIsLjk5LC4xNywxLjM5LC42MSwxLjYsMS42MiwuMjQsMS4xNiwuNDksMi4zMiwuNzMsMy40OCwuMDYsLjMxLC4yMiwuNDcsLjUsLjYyLC44OCwuNDgsMS43NCwuOTksMi41OSwxLjUzLC4yMiwuMTQsLjM4LC4xNywuNjEsLjA5LDEuMi0uMzksMi40LS43NywzLjU5LTEuMTcsLjgxLS4yNywxLjUtLjExLDIuMDcsLjU0LDEuMzcsMS41NCwyLjI5LDMuMzQsMy4wNCw1LjIzLC4wOSwuMjMsLjExLC40OSwuMTcsLjc0Wm0tMTcuODksMTEuOTRjMy4zOS0uMTIsNS44Ni0yLjM3LDUuOS01Ljg4LC4wNC0zLjM4LTIuMzQtNS45MS01Ljg2LTUuOTMtMy4zOC0uMDItNS45MSwyLjMzLTUuOTIsNS44Ny0uMDEsMy40MiwyLjM5LDUuNzksNS44OCw1Ljk0WiIgZmlsbD0iIzJiMmIyYiIvPgo8L3N2Zz4=");
    background-size: 75%;
}

#toggleSettings > .disabled {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MS4zMiA0My44Ij4KICA8cGF0aCBkPSJNMzguNTMsMTUuODhjLS4wMiwuNTgtLjMyLDEtLjcyLDEuMzctLjkyLC44NC0xLjg0LDEuNjktMi43OCwyLjUxLS4yMSwuMTktLjI3LC4zNy0uMjYsLjY2LC4wMywxLDAsMi4wMSwuMDIsMy4wMSwwLC4xOSwuMDksLjQ0LC4yMywuNTcsLjg4LC44MiwxLjc4LDEuNjIsMi42NywyLjQyLC44OSwuOCwxLDEuMzksLjU2LDIuNTItLjcsMS44MS0xLjc0LDMuNDEtMi45Miw0LjkzLS40OSwuNjMtMS4xOSwuODItMi4wNywuNTQtMS4yLS4zOC0yLjQtLjc4LTMuNi0xLjE1LS4xOC0uMDUtLjQ0LDAtLjYxLC4wOS0uOTIsLjUtMS44MywxLjAyLTIuNzMsMS41NS0uMTMsLjA4LS4yNiwuMjMtLjI5LC4zNy0uMjgsMS4yNC0uNTQsMi40OS0uNzksMy43NC0uMTgsLjg4LS42OCwxLjM5LTEuNTgsMS41NS0yLC4zNS00LjAxLC4zNS02LjAxLDAtLjkyLS4xNi0xLjM3LS42My0xLjU2LTEuNTYtLjI0LTEuMi0uNDktMi40MS0uNzQtMy42MS0uMDYtLjI4LS4xOS0uNDQtLjQ3LS41OC0uODktLjQ2LTEuNzQtLjk5LTIuNjItMS40Ny0uMTctLjA5LS40Mi0uMTUtLjYtLjA5LTEuMiwuMzYtMi40LC43NS0zLjU5LDEuMTUtLjgzLC4yOC0xLjUzLC4xMi0yLjEtLjU3LTEuMjktMS41Ni0yLjI5LTMuMy0zLjAzLTUuMTktLjMxLS43Ny0uMTMtMS40OCwuNS0yLjA1LC45NC0uODQsMS44OS0xLjY4LDIuODQtMi41MSwuMjEtLjE4LC4yOC0uMzUsLjI3LS42NS0uMDQtMS4wMywwLTIuMDctLjAyLTMuMSwwLS4xOC0uMDctLjQyLS4yLS41NC0uODYtLjgxLTEuNzQtMS42MS0yLjY0LTIuMzktLjk0LS44Mi0xLjA5LTEuNDgtLjYxLTIuNjMsLjcyLTEuNzMsMS42NS0zLjMzLDIuODMtNC43OSwuNTctLjcxLDEuMjItLjkyLDIuMTEtLjY0LDEuMjIsLjM4LDIuNDMsLjc4LDMuNjUsMS4xNSwuMTcsLjA1LC40MSwuMDIsLjU3LS4wNiwuOTEtLjUyLDEuODEtMS4wNSwyLjctMS42MSwuMTUtLjEsLjMyLS4yOCwuMzUtLjQ1LC4yOS0xLjIzLC41NS0yLjQ2LC44MS0zLjY5LC4xOC0uODcsLjcxLTEuMzUsMS41Ny0xLjUsMS45OS0uMzUsMy45OC0uMzUsNS45Ni0uMDIsLjk5LC4xNywxLjM5LC42MSwxLjYsMS42MiwuMjQsMS4xNiwuNDksMi4zMiwuNzMsMy40OCwuMDYsLjMxLC4yMiwuNDcsLjUsLjYyLC44OCwuNDgsMS43NCwuOTksMi41OSwxLjUzLC4yMiwuMTQsLjM4LC4xNywuNjEsLjA5LDEuMi0uMzksMi40LS43NywzLjU5LTEuMTcsLjgxLS4yNywxLjUtLjExLDIuMDcsLjU0LDEuMzcsMS41NCwyLjI5LDMuMzQsMy4wNCw1LjIzLC4wOSwuMjMsLjExLC40OSwuMTcsLjc0Wm0tMTcuODksMTEuOTRjMy4zOS0uMTIsNS44Ni0yLjM3LDUuOS01Ljg4LC4wNC0zLjM4LTIuMzQtNS45MS01Ljg2LTUuOTMtMy4zOC0uMDItNS45MSwyLjMzLTUuOTIsNS44Ny0uMDEsMy40MiwyLjM5LDUuNzksNS44OCw1Ljk0WiIgZmlsbD0iIzJiMmIyYiIvPgo8L3N2Zz4=");
    background-size: 75%;
}

#chatHolder.hide-settings #toggleSettings > .enabled {
    display: none;
}

#chatHolder:not(.hide-settings) #toggleSettings > .disabled {
    display: none;
}

/* SETTINGS */

#settings {
    /* transition: flex 0.5s; */
    display: flex;
    flex-direction: column;
    align-items: center;
    scrollbar-width: thin;
    z-index: 3;
    background-color: #191919;
    overflow-x: hidden;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

#chatHolder.hide-settings #settings {
    flex: 0;
}

#settings::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
}

#settings::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

#chatHolder.hide-settings #settings::-webkit-scrollbar {
    display: none;
}

#chatHolder.hide-settings #settings {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#settingsButtons {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    font-size: 12px;
}

#settingsButtons > div {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    margin-bottom: 10px;
    /* transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; */
    color: #fff;
    background-color: #3f556c;
    border-color: #3f556c;
    cursor: pointer;
}

#settingsButtons > div:hover {
    color: #fff;
    background-color: #132c42;
    border-color: #132c42;
}

#settingsButtons > select {
    text-overflow: ellipsis;
    border-radius: 0.25rem;
    padding: 7px;
    margin: 3px;
}

#connectionCount {
    position: absolute;
    width: 50px;
    height: 14px;
    top: 26px;
    left: 6px;
    z-index: 10;
    pointer-events: none;
}

#chatHolder.unconnected #connectionCount {
    display: none;
}

#toggleMicrophoneTest {
    margin: 3px;
}

#toggleMicrophoneTest::after {
    content: "Test Microphone";
}

#chatHolder.testing-microphone #toggleMicrophoneTest::after {
    content: "Stop Testing";
}

#audioInputs {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    cursor: pointer;
}

#loudness {
    align-self: stretch;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
}

#loudness .title {
    user-select: none;
    -webkit-user-select: none;
    text-align: center;
    font-size: 12px;
}

#loudness .bar {
    display: flex;
    position: relative;
    flex-direction: row;
    background-color: white;
    border: solid thin lightgray;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

#loudness .max {
    background-color: gray;
    position: absolute;
    transition: background-color 0.2s, left 0.2s, bottom 0.2s;
}

#loudness .value {
    flex: 0;
    background-color: green;
    transition: background-color 0.05s, flex 0.05s;
}

.settingsText {
    color: white;
}

#chatHolder.resize {
    cursor: ns-resize;
}

#settingsButtons {
    width: 90%;
    margin-top: 8px;
    margin-bottom: 8px;
}

#loudness {
    margin-top: 10px;
    /* margin-bottom: 10px; */
}

#loudness .bar {
    margin-top: 4px;
    width: 129px;
    height: 8px;
}

#loudness .max {
    width: 2px;
    height: 8px;
    top: -1px;
    left: 0;
}

#dialogAvatarSelections {
    height: 100px;
    width: 100%;
    padding-bottom: 30px;
}

#avatarOr {
    display: flex;
    justify-content: space-around;
}

#handednessRow {
    display: flex;
    align-items: center;
}

#handednessLabel {
    margin-right: 10px;
}

#avatarList {
    display: flex;
    justify-content: space-around;
    height: 100%;
    width: 100%;
}

.avatarThumb {
    width: 14%;
    background-color: white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 5px solid transparent;
}

.avatarThumb[selected="true"] {
    border: 5px solid #761cfe;
    box-shadow: 0 0 10px 2px #761cfe;
    z-index: 1;
}

.avatarNameField {
    height: 24px;
    white-space: nowrap;
    overflow: hidden;
    padding: 12px 20px;
    margin-bottom: 30px;
}

.content-container {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.dialog-container {
    width: 320px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.help-table {
    border-collapse: collapse;
}

.help-row {
    border-bottom: 2px solid white;
}

.help-row > td {
    padding-right: 20px;
    height: 50px;
}

.icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-right: 10px;
    font-size: 30px;
}

.table-head {
    font-weight: bold;
    margin-bottom: 0px;
}

.table-desc {
    font-size: 15px;
    margin-top: 5px;
}

.icon-column {
    width: 100px;
    text-align: center;
}

.btn-x {
    width: 40px;
    height: 40px;
    border-radius: 60px;
    font-size: 15px;
    z-index: 10;
}

#table-wrapper {
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 400px;
}

#table-scroll {
    overflow: auto;
    flex-grow: 1;
    /* height: 490px; */
}

#table-scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #000000;
}

#table-scroll::-webkit-scrollbar {
    width: 6px;
    background-color: #000000;
}

#table-scroll::-webkit-scrollbar-thumb {
    background-color: #f5f5f5;
}

.show {
    visibility: visible;
    display: block;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

#share-qr {
    padding: 20px;
    border: 1px solid grey;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-qr-canvas {
    width: 200px;
    height: 200px;
    margin: 10px;
}

.copy-link {
    height: 35px;
    border: 1px solid grey;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    flex-grow: 1
}

.desc {
    font-size: 13px;
}

.share-settings-label {
    margin-bottom: 10px;
    margin-top: 20px;
}

.share-menu-row {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    gap: 10px;
}

.btn-purple {
    background-color: #761cfe;
    color: white;
    font-weight: bold;
}

@media (max-width: 600px), (max-height: 600px) {
    .dialogPanel {
	height: 80%;
	width: 90%;
	min-width: 300px;
	min-height: 300px;
	display: flex;
	margin-left: auto;
	margin-right: auto;
	flex-direction: column;
	justify-content: space-around;
    }



    .content-container {
	width: 95%;
	height: 95%;
    }

    #dialogAvatarSelections {
	height: 40px;
	padding-bottom: 10px;
    }

    .namePrompt {
	font-size: 12px;
    }

    .nameField {
	height: 14px;
	font-size: 12px;
	padding-top: 2px;
	flex-grow: 1;
    }

    #nameExplanation {
	display: none;
    }

    #nameFilterWarning {
	display: none;
    }

    #handednessLabel {
	font-size: 12px;
    }

    .handedness-label {
	font-size: 12px;
    }

    #share-qr {
	display: none;
    }

    .topright {
	right: 10px;
	top: 10px;
    }
}

@media (max-height: 600px) {
    .dialogPanel {
	width: 80%;
	height: 300px;
    }

    .panel-title {
	margin: 2px 20px 2px 20px;
    }

    #table-wrapper {
	padding: 10px;
	height: calc(100% - 50px);
    }

    #joinPrompt {
	display: none;
    }

    #avatarNameField {
	margin-bottom: 10px;
    }

    .dialogButtonsHolder {
	position: relative;
	top: -65px;
	width: 50%;
	left: 50%;
    }

}

@media (max-width: 600px) {
    .dialogPanel {
	height: 80%;
	width: 90%;
    }

    .panel-title {
	margin: 20px 0px 10px 0px;
    }

    #table-wrapper {
	height: calc(100% - 100px);
    }

    .share-settings-label {
	font-size: 12px;
    }

    .stringInputHolder {
	flex-direction: row;
    }

    .copy-link {
	font-size: 12px;
	height: 14px;
	border: 1px solid grey;
	border-radius: 10px;
	display: flex;
	align-items: center;
	padding-left: 10px;
	overflow: hidden;
	white-space: nowrap;
	flex-grow: 1;
    }
}