/* reset browser styles */

button.DialogButton
{
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

button.DialogButton
{
	background: none;
	border: 0;
	color: inherit;
	/* cursor: default; */
	font: inherit;
	line-height: normal;
	overflow: visible;
	padding: 0;
	margin: 2px 0;
	user-select: none;
	-webkit-user-select: none;
	/* for button */
	-moz-user-select: none;
	-ms-user-select: none;
}

input.DialogInput::-moz-focus-inner,
button.DialogButton::-moz-focus-inner
{
	border: 0;
	padding: 0;
}

.DialogInputPlaceholder::placeholder,
.DialogInputPlaceholder::-webkit-input-placeholder
{
	color: #969696;
	font-style: italic;
}


/* for some reason, mixing these with ::placeholder confuses chrome */

.DialogInputPlaceholder::-ms-input-placeholder,
.DialogInputPlaceholder:-ms-input-placeholder
{
	color: #969696;
	font-style: italic;
}

.PopupFullWindow
{
	height: 100%;
}

.DialogBody
{
	padding-top: 4px;
	padding-right: 12px;
	/*border: 2px dotted #f005;*/
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: auto;
}

.ModalDialogPopup .DialogContentTransition .DialogBody
{
	overflow-y: scroll;
	-webkit-mask: linear-gradient( 0deg, rgba( 0, 0, 0, 0 ) 0px, rgba( 0, 0, 0, 1 ) 16px, rgba( 0, 0, 0, 1 ) calc( 100% - 8px ), rgba( 0, 0, 0, 0 ) 100% );
	mask: linear-gradient( 0deg, rgba( 0, 0, 0, 0 ) 0px, rgba( 0, 0, 0, 1 ) 16px, rgba( 0, 0, 0, 1 ) calc( 100% - 8px ), rgba( 0, 0, 0, 0 ) 100% );
}

.DialogInnerBody
{
	flex: 1;
	overflow: auto;
	padding-right: 2px;
	padding-bottom: 16px;
}

.ModalDialogPopup .DialogInnerBody
{
	overflow-y: scroll;
	overflow-x: hidden;
}

.ModalPosition
{
	display: flex;
	align-content: center;
	height: 100%;
	flex-direction: column;
}

.ModalPosition:focus
{
	outline: none;
}

.ModalDialogPopup .ModalPosition_Dismiss
{
	display: none;
}

.ModalPosition_Dismiss
{
	position: absolute;
	right: 4px;
	top: 4px;
	z-index: 1;
}

.ModalPosition_Dismiss .closeButton
{
	width: 14px;
	height: 14px;
	padding: 4px;
	background-size: cover;
	cursor: pointer;
	background-image: none;
	border-radius: 4px;
}

.ModalPosition_Dismiss .closeButton .SVGIcon_X_Line line
{
	stroke: rgb(120, 138, 146);
	stroke-width: 24px;
}

.ModalPosition_Dismiss .closeButton:hover .SVGIcon_X_Line line
{
	stroke: rgb( 255, 255, 255 );
}

.ModalPosition_Dismiss .closeButton:hover
{
	opacity: 1.0;
}

.ModalPosition_Content
{
	box-shadow: 0px 8px 38px 5px rgba( 0, 0, 0, 0.75 );
	max-width: 80vw;
	max-height: 90vh;
	margin: auto;
	font-weight: 300;
	color: #969696;
	font-size: 16px;
	position: relative;
	display: flex;
	flex-direction: column;
}

.ModalPosition_Content > div:not( .ModalPosition_TopBar ):not( .ModalPosition_Dismiss )
{
	min-height: 0;
	min-width: 0;
	flex-shrink: 1;
	flex-grow: 1;
}

.PopupFullWindow .ModalPosition_Content > div:not( .ModalPosition_TopBar ):not( .ModalPosition_Dismiss )
{
	min-height: initial;
	flex: 1;
}

.DialogContent,
.DialogContentTransition
{
	background: radial-gradient( circle at top left, rgba( 74, 81, 92, 0.4 ) 0%, rgba( 75, 81, 92, 0 ) 60% ), #25282e;
	user-select: none;
}

.DialogContentTransition
{
	display: flex;
	width: 664px;
	max-width: calc( 100% - 64px );
	flex: 3.3;
	position: relative;
}

.ModalDialogPopup .DialogContentTransition
{
	display: block;
}

.ModalDialogPopup .DialogContentTransition > .DialogContent
{
	position: absolute;
	bottom: 0;
	top: 0;
}

:not(.PopupFullWindow) .DialogContentTransition .opacityfade-anim-exit
{
	position: absolute;
}

.DialogContent
{
	padding: 32px;
	padding-right: 6px;
	width: 600px;
	max-width: calc( 100% - 38px );
	display: flex;
	overflow: visible;
	position: relative;
}

.PagedSettingsDialog_PageListItem,
.DialogToggle_Label
{
	user-select: none;
}

.contextMenuItem .DialogToggle_Label
{
	white-space: nowrap;
}

._DialogNote
{
	font-size: 12px;
	text-transform: uppercase;
}

._DialogCenterVertically
{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.DialogContent_InnerWidth
{
	max-width: 600px;
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: auto;
	/*border: 0.5px dashed #f805;*/
}

.ModalDialogPopup .DialogContent
{
	width: 100%;
	overflow: visible;
}

.ModalDialogPopup .DialogContent_InnerWidth
{
	max-width: none;
}

.DialogContent_InnerWidth > form
{
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ModalPosition_TopBar
{
	height: 1px;
	background: linear-gradient( to right, #00ccff, #3366ff );
}

.Destructive .ModalPosition_TopBar
{
	background: linear-gradient( to right, #c44848, #c44848 );
}

.ModalDialogPopup .ModalPosition,
.ModalDialogPopup .ModalPosition_Content
{
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
}

.ModalAnimation-appear .ModalPosition,
.ModalAnimation-leave .ModalPosition
{
	opacity: 0;
	box-shadow: 0px 4px 18px 3px rgba( 0, 0, 0, 1 );
	transform: scale3d( .92, .92, 1 );
	transition-duration: .42s;
}

.DialogContent._DialogLayout.PagedSettingsDialog_PageContent .DialogHeader
{
	margin-bottom: 16px;
	margin-right: 0;
}

.DialogHeader
{
	font-weight: 300;
	font-size: 32px;
	line-height: 36px;
	letter-spacing: 2px;
	color: #ffffff;
	text-transform: uppercase;
	flex-shrink: 0;
	user-select: none;
	margin-right: 26px;
}

.DialogContent_InnerWidth .DialogBody .DialogHeader
{
	margin-right: 0px;
}

.DialogHeaderSubtitle
{
	color: rgb( 110, 121, 133 );
	font-size: 22px;
	letter-spacing: 1px;
	text-transform: none;
}

.DialogHighlight
{
	color: rgb( 66, 151, 248 );
}

.DialogFooter
{
	margin-top: 16px;
	flex-shrink: 0;
	margin-right: 26px;
}

.DialogBodyText
{
	color: #969696;
	font-size: 16px;
	line-height: 19px;
	font-weight: 300;
	margin-bottom: 32px;
	user-select: none;
}

.DialogBodyText a
{
	color: #969696;
	text-decoration: underline;
}

.DialogBodyText a:hover
{
	color: #ffffff;
}

.DialogLabel
{
	cursor: default;
}

.DialogLabel,
.DialogLabelStrong
{
	font-weight: 300;
	color: #969696;
	text-transform: uppercase;
	line-height: 19px;
	font-size: 13px;
	margin-bottom: 4px;
	user-select: none;
	letter-spacing: initial;
}

.DialogLabelStrong .DialogLabel,
.DialogLabel.DialogLabelStrong
{
	text-transform: none;
	color: #dedede;
}

.disabled .DialogLabelStrong .DialogLabel,
.disabled .DialogLabel.DialogLabelStrong
{
	color: rgb( 66, 72, 83 );
}

.DialogHBar
{
	flex: 1;
	min-height: 1px;
	max-height: 1px;
	background: linear-gradient( to right, rgba( 57, 62, 71, 1 ) 0%, rgba( 64, 70, 79, 1 ) 20%, rgba( 57, 62, 71, 1 ) 100% );
	margin-bottom: 16px;
}

.OrSeparator .DialogHBar
{
	margin: 0;
}

._DialogRow
{
	display: flex;
	flex-direction: row;
	padding: 4px;
	padding-left: 12px;
	margin-bottom: 6px;
	justify-content: space-between;
	flex-shrink: 0;
}

._DialogRow._DialogRowBackground
{
	background: linear-gradient( to right, #383d45, #383d45 );
}

._DialogRow ._DialogRowAction
{
	flex: 1;
}

._DialogRow ._DialogRowSecondaryLabel,
._DialogRow ._DialogRowLabel
{
	flex: 1.5;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 14px;
	align-self: center;
	display: flex;
	flex-direction: row;
}

._DialogRow ._DialogRowSecondaryLabel
{
	display: block;
	flex: 1;
	line-height: 32px;
	text-align: center;
	margin: 2px 0;
}

._DialogRow ._DialogRowLabel .SVGIcon_Button
{
	width: 24px;
	height: 24px;
}

.disabledNotice
{
	color: rgba( 184, 156, 80, .75 );
	margin-left: 4px;
}

.DialogLabelExplainer
{
	text-transform: none;
	text-align: center;
	font-weight: 300;
	color: #7e7e7e;
	font-size: 13px;
	margin-top: 4px;
}

.DialogInput
{
	border: 1px solid white;
}

.DialogLabelExplainer.Left
{
	text-align: left;
}

.DialogInputRequirementLabel
{
	color: #b80505;
	margin-left: 15px;
}

.DialogRequirementLabel
{
	color: #b80505;
}

.DialogInputLabelGroup
{
	margin-bottom: 22px;
}

._DialogSection
{
	margin-bottom: 26px;
}

._DialogTextInputBase,
._DialogInputContainer
{
	background: rgba( 59, 63, 72, 0.5 );
	color: #dfe3e6;
	font-size: 14px;
	font-family: "Motiva Sans Light", Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 3px;
	box-shadow: inset 0px 0px 0px #0000;
	transition: all .2s ease-in-out;
}

._DialogTextInputBase:focus
{
	background: rgba( 67, 73, 83, .6 );
	box-shadow: inset 1px 1px 8px #000a;
	padding-left: 11px;
}

._DialogTextInputBase:not( disabled ):hover
{
	background: rgba( 67, 73, 83, .6 );
}

._DialogTextInputBase:disabled:hover
{
	background: rgba( 67, 73, 83, .3 );
}

._DialogInputContainer
{
	padding: 12px;
	line-height: 18px;
	margin-bottom: 22px;
}

._DialogInputContainer:focus
{
	outline: none;
}

.DialogOnOffToggle._DialogInputContainer
{
	display: flex;
	justify-content: space-between;
	padding: 6px;
	padding-left: 12px;
}

.DialogOnOffToggle.Disabled .DialogToggle_Label
{
	color: #555;
}

._DialogInputContainer.Active
{
	/*outline: 1px solid rgba( 31, 141, 254, 1.0 );*/
}

.DialogDropDown._DialogInputContainer.Active
{
	outline: none;
}

._DialogTextInputBase.inviteURLLink
{
	padding: 0 12px;
	background: rgb( 48, 53, 59 );
	margin-right: 4px;
	flex-grow: 4;
	box-shadow: inset 0px 0px 4px #0006;
	border: 0.5px solid rgba( 139, 153, 170, .4 );
	border-style: inset;
}

._DialogTextInputBase:disabled,
._DialogTextInputBase:read-only
{
	color: rgba( 136, 136, 136, 0.7 );
}

.InviteLinksTable .DialogInput
{
	padding: 5px;
	margin: 5px;
	margin-right: 30px;
}

.DialogInput_Wrapper
{
	display: flex;
	flex-direction: row;
	position: relative;
}

.DialogInput_Wrapper > input.DialogInput
{
	flex: 1;
}


.DialogInput_Wrapper > input.DialogInput:focus
{
	outline: none;
}

button.DialogButton:focus
{
	outline: none;
}

button.DialogButton.DialogInput_CopyAction
{
	width: auto;
	padding-left: 16px;
	padding-right: 16px;
}

.DialogInput_ClearAction
{
	position: absolute;
	right: 12px;
	top: 0;
	bottom: 0;
	width: 24px;
	cursor: pointer;
}

.DialogInput
{
	display: block;
	line-height: 22px;
	padding: 10px;
}

button.DialogButton
{
	display: block;
	line-height: 32px;
	color: #dfe3e6;
	font-size: 14px;
	text-align: center;
	border-radius: 2px;
	/*margin-bottom: 22px;*/
	cursor: pointer;
	transition: 0.1s all;
	width: 100%;
	background: transparent;
	transition: all 0.2s ease-out;
	background: #3d4450;
	background-position: 99% 1%;
	background-size: 300% 300%;
	position: relative;
}

button.DialogButton::before
{
	pointer-events: none;
	user-select: none;
	content: ' ';
  	position: absolute;
  	top: 0;
  	right: 0;
	bottom: 0;
  	left: 0;
  	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .3);
  	opacity: 0;
  	transition: opacity 200ms ease-in-out;
}

button.DialogButton:disabled:hover::before,
button.DialogButton:disabled::before
{
	opacity: 0;
}


button.DialogButton:hover::before
{
	opacity: 1;
}

button.DialogButton:active::before
{
	opacity: 0;
}


button.DialogButton.DialogButtonTall
{
	height: 44px;
}

.VoiceSettings .advancedSettingsButton
{
	margin-bottom: 0px;
	margin-top: 16px;
}

.VoiceSettings .advancedSettings
{
	margin-bottom: 16px;
}

.DialogBody.VoiceSettings ._FixedHeight
{
	padding-bottom: 16px;
}

button.DialogButton.Primary
{
	background: transparent;
	background: linear-gradient( to right, #47bfff 0%, #1a44c2 60% );
	background-position: 25%;
	background-size: 330% 100%;
}

button.DialogButton.GreenPlay
{
	background: linear-gradient( to right, rgb(138, 195, 41) 0%, rgb(74, 122, 22) 60% );
	background-position: 25%;
	background-size: 330% 100%;
}

button.DialogButton.GreenPlay:hover
{
	background: linear-gradient( to right, rgb(138, 195, 41) 0%, rgb(74, 122, 22) 60% );
	background-position: 0%;
	background-size: 330% 100%;
	color: white;
}

button.DialogButton.GreenPlay:active,
button.DialogButton.GreenPlay:active:hover
{
	background: linear-gradient( to right, rgb(138, 195, 41) 0%, rgb(74, 122, 22) 60% );
	background-position: 40%;
	transition-duration: .04s;
}


button.DialogButton.Secondary.Off
{
	box-shadow: inset 1px 1px 4px #0003;
}

button.DialogButton:active,
button.DialogButton:active:hover
{
	background: #393f49;
	box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, .6 );
	transition-duration: .04s;
}

button.DialogButton.Primary:hover
{
	background: linear-gradient( to right, #47bfff 0%, #1a44c2 60% );
	background-position: 0%;
	background-size: 330% 100%;
	color: white;
}

button.DialogButton.Primary:active,
button.DialogButton.Primary:hover:active
{
	background: linear-gradient( to right, #47bfff 0%, #1a44c2 60% );
	background-position: 40%;
	transition-duration: .04s;

}

button.DialogButton:hover
{
	background: #464d58;
	color: white;
}

button.DialogButton:disabled,
button.DialogButton:disabled:hover
{
	background: rgba( 61, 67, 77, .35 );
	color: rgb( 70, 77, 88 );
	box-shadow: none;
	cursor: default;
}

button.TextButton
{
	background-color: transparent;
	border: 0px hidden transparent;
	font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
	padding: 0;
	color: white;
	cursor: pointer;
	font-weight: 100;
	border-bottom: 1px dotted #0000;
}

button.TextButton .SVGIcon_Button
{
	transition: all .20s ease-in-out;
	margin-right: 2px;
}

button.TextButton:hover
{
	color: white;
}

button.TextButton:focus
{
	outline: none;
}

.DialogButton .SVGIcon_Button
{
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 2px;
}

.DialogButton:disabled .SVGIcon_Button
{
	opacity: .1;
}

.DialogOnOffToggle_Control
{
	float: right;
	position: relative;
	line-height: 30px;
	overflow: hidden;
	border-radius: 3px;
	background: #3a3f48;
	color: rgba( 223, 227, 230, 0.5 );
	font-size: 14px;
	display: flex;
	flex-direction: row;
	cursor: pointer;
	user-select: none;
	align-self: flex-start;
	flex-shrink: 0;
	margin-left: 6px;
}

.DialogOnOffToggle_Option
{
	text-transform: uppercase;
	width: 66px;
	text-align: center;
	cursor: pointer;
	transition-property: color, background;
	transition-duration: 250ms;
}

.DialogOnOffToggle_Option:hover:not( .Active )
{
	background: #464d58;
}

.Disabled .DialogOnOffToggle_Option:hover:not( .Active ),
.Disabled .DialogOnOffToggle_Option.Active,
.Disabled .DialogOnOffToggle_Option
{
	background-color: transparent;
	color: #555;
	cursor: default;
}

.Disabled .DialogOnOffToggle_Option.Active
{
	color: #666;
}

.Disabled .DialogOnOffToggle_Option.Active
{
	background-color: rgb( 67, 73, 83 );
}

.DialogToggle_Description
{
	color: #808080;
	line-height: 19px;
	font-size: 13px;
	font-family: "Motiva Sans", Arial, Helvetica, sans-serif;
	padding-top: 8px;
}

.DialogOnOffToggle_Option.Active
{
	color: #dfe3e6;
	background: #2d73ff;
}

.DialogOnOffToggle_Option:hover
{
	color: white;
}

.PagedSettingsDialog
{
	/*width: 842px;*/
	display: flex;
	flex-direction: row;
	height: 720px;
}

.PagedSettingsDialog_PageListColumn
{
	background: #2a2d34;
	flex: 1;
	min-width: 140px;
	max-width: 220px;
	padding-left: 24px;
	padding-top: 40px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.PagedSettingsDialog_Title
{
	text-transform: uppercase;
	margin-bottom: 20px;
	color: #4297f8;
	font-weight: 300;
	font-size: 13px;
	user-select: none;
}

.PagedSettingsDialog_PageList
{
	line-height: 16px;
	white-space: nowrap;
	overflow-y: overlay;
	flex-shrink: 1;
}

.PagedSettingsDialog_PageListItem
{
	white-space: normal;
	max-width: 180px;
	text-overflow: ellipsis;
	color: #7e7e7e;
	font-size: 15px;
	font-weight: normal;
	text-transform: uppercase;
	cursor: pointer;
	margin-bottom: 14px;
}

.PagedSettingsDialog_PageListItem.DisabledItem,
.PagedSettingsDialog_PageListItem.DisabledItem:hover,
.PagedSettingsDialog_PageListItem.DisabledItem:not( .Active ):hover
{
	color: #414141;
}

.PagedSettingsDialog_PageListItem:not( .Active ):hover
{
	color: #cccccc;
}

.PagedSettingsDialog_PageListItem.Active
{
	color: #ffffff;
	cursor: default;
}

.PagedSettingsDialog_PageContent
{
	flex: 3;
}

.PagedSettingsDialog_PageContentTitle
{
	color: #ffffff;
	font-size: 30px;
}

.DialogMenuPosition
{
	position: absolute;
	transition: opacity 200ms;
	z-index: 200;
}

.DialogMenuPosition:not( .visible )
{
	opacity: 0;
	pointer-events: none;
}

.DialogDropDown
{
	cursor: pointer;
	position: relative;
}

.DialogDropDown:hover
{
	box-shadow: 0 6px 8px 0 rgba( 0, 0, 0, 0.16 );
}

.DialogDropDown._DialogInputContainer
{
	margin-bottom: 0;
	user-select: none;
}

.DialogDropDown_Arrow
{
	position: absolute;
	width: 18px;
	top: 14px;
	right: 10px;
}

.DialogDropDown_Arrow .SVGIcon_DownArrowContextMenu
{
	fill: rgb( 24, 156, 255 );
}

.DialogDropDownMenu._DialogInputContainer
{
	background: #373c44;
	box-shadow: 0px 8px 26px 2px rgba( 0, 0, 0, .2 );
	margin-top: 2px;
}

.DialogDropDownMenu_Item
{
	line-height: 40px;
	padding: 0 16px;
	cursor: pointer;
}

.DialogDropDownMenu_Item:hover
{
	background: #3e444d;
}

._DialogColLayout
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

._DialogColLayout > ._DialogLayout
{
	flex: 1;
	box-sizing: border-box;
}

.DialogTwoColLayout > ._DialogLayout
{
	max-width: calc( 50% - 14px );
	min-width: 200px;
}

.DialogThreeColLayout > ._DialogLayout,
.DialogTwoThirdColLayout > ._DialogLayout:nth-child( 2n+1 )
{
	max-width: calc( 33.33% - 9px );
	min-width: 133px;
}

.DialogTwoThirdColLayout > ._DialogLayout
{
	max-width: calc( 66.66% - 18px );
	min-width: 266px;
}

.DialogLayout_NoMinWidth > ._DialogLayout,
.DialogTwoThirdColLayout.DialogLayout_NoMinWidth > ._DialogLayout
{
	min-width: 0;
}

.DialogDraggable
{
	cursor: -webkit-grab;
	cursor: grab;
	user-select: none;
}

.DialogDraggable.DraggedOut
{
	display: none;
}

.DialogDraggable_DropGhost
{
	cursor: -webkit-grabbing;
	cursor: grabbing;
	opacity: 0.75;
}

.DialogDraggable_DragGhost
{
	cursor: -webkit-grabbing;
	cursor: grabbing;
	position: fixed;
	opacity: 0.75;
	z-index: 5000;
}

.DialogDropRegion.Active
{
	/* border: 1px dashed salmon; */
}

.DialogSlider_Container
{
}

.DialogSlider_Container:focus
{
	outline: none;
}

.DialogSlider_Slider
{
	border: 4px solid #2a2d33;
	border-radius: 10px;
	position: relative;
	height: 10px;
	background: #202226;
	cursor: pointer;
	box-shadow: inset 0px 11px 8px -10px #131313;
	user-select: none;
}

.DialogSlider_Value
{
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient( to bottom, #00ccff 0%, #2d73ff 80% );
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.DialogSlider_Grabber
{
	position: absolute;
	top: -1px;
	bottom: -3px;
	margin-left: -6px;
	/* should be half of width */
	width: 12px;
	height: 12px;
	background: linear-gradient( to bottom, #89e7ff 0%, #80aaff 80% );
	border-radius: 50%;
	box-shadow: 0px 0px 2px 2px rgba( 0, 0, 0, .2 );
}

.DialogProgressBar_ProgressBarContainer
{
	border: 4px solid #2a2d33;
	border-radius: 10px;
	position: relative;
	height: 10px;
	background: #202226;
	cursor: pointer;
	box-shadow: inset 0px 11px 8px -10px #131313;
	user-select: none;
	overflow: hidden;
}

.DialogProgressBar_Value
{
	height: 100%;
	background: linear-gradient( to bottom, #00ccff 0%, #2d73ff 80% );
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	width: 0px;
	transition: all .2s linear;
}

.DialogListBuilderInput_List
{
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	line-height: 26px;
}

.DialogListBuilderInput_Input
{
	border: none;
	background: transparent;
	color: white;
	outline: none;
}

.DialogListBuilderInput_Input:focus
{
	outline: none;
}

.DialogSpanningTable
{
	width: 100%;
	border-spacing: 0px 6px;
	table-layout: fixed;
}

.DialogSpanningTable th
{
	font-weight: normal;
	text-align: left;
	font-size: 12px;
	height: 20px;
	text-transform: uppercase;
}

.DialogSpanningTable.BannedUsersTable tr.hoverRow,
.DialogSpanningTable.InvitedUsersTable tr.hoverRow,
.DialogSpanningTable.InviteLinksTable tbody tr
{
	background: linear-gradient( to right, #383d45, #383d45 );
}

.DialogSpanningTable tr.hoverRow:hover
{
	background-color: #393d46;
}

.DialogSpanningTable td.friendCell
{
	padding-left: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
}

.DialogSpanningTable td.dateCell
{
	text-align: left;
	font-size: 14px;
}

.DialogSpanningTable td.buttonCell
{
	padding-left: 5px;
	padding-right: 10px;
}

.BannedUsersTable th.friendColumn,
.InvitedUsersTable th.friendColumn
{
	width: auto;
}

.BannedUsersTable th.dateColumn,
.InvitedUsersTable th.dateColumn
{
	width: 175px;
}

.BannedUsersTable th.buttonColumn,
.InvitedUsersTable th.buttonColumn
{
	width: 130px;
}

.InviteLinksTable .inviteCodeColumn
{
	width: auto;
}

.InviteLinksTable .dateColumn
{
	width: 175px;
}

.InviteLinksTable .buttonColumn
{
	width: 130px;
}

.DialogSpanningTable th.tableAlignRight,
.DialogSpanningTable td.tableAlignRight
{
	text-align: right;
}

.DialogCheckbox_Container
{
	cursor: pointer;
	padding: 4px;
	margin-bottom: 8px;
}

.DialogCheckbox_Container .DialogCheckbox
{
	float: left;
	margin-right: 8px;
}

.DialogCheckbox
{
	width: 22px;
	height: 22px;
	background-color: #0004;
	padding: 0;
	box-shadow: inset 1px 0.5px 3px rgba( 1, 1, 1, 0.4 );
	cursor: pointer;
	border-radius: 2px;
}

.DialogCheckbox .SVGIcon_DialogCheck
{
	opacity: 0;
	transition: all .1s ease-in-out;
	width: 18px;
	height: 18px;
	margin-top: 9%;
	margin-left: 12%;
}

.DialogCheckbox .SVGIcon_DialogCheck path
{
	stroke-width: 40px;
	stroke-dashoffset: -270.00;
	transition: all .18s ease-out;
	transition-timing-function: cubic-bezier( 1, 0, 1, .65 );
	transition-delay: .3s;
}

.DialogCheckbox.Active .SVGIcon_DialogCheck path
{
	stroke-dashoffset: 90.00;
	transition-timing-function: cubic-bezier( 1, 0, 1, .65 );
	transition-delay: 0s;
}

.DialogCheckbox.Active .SVGIcon_DialogCheck
{
	opacity: 1;
}

.DialogCheckbox.Active .SVGIcon_DialogCheck #stop0
{
	opacity: 1;
}

.DialogCheckbox.Active .SVGIcon_DialogCheck #stop1
{
}

.DialogCheckbox.Disabled
{
	cursor: default;
	opacity: .5;
	filter: saturate(0.35);
	box-shadow: none;
}

.DialogCheckbox_Container:hover .DialogCheckbox,
.DialogCheckbox:hover:not( .Disabled )
{
	background-color: #1e1f23;
}

.DialogCheckbox_Container:focus,
.DialogCheckbox:focus
{
	outline: none;
}

.DialogCheckbox .DialogCheck
{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.DialogRoundCheckbox
{
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.DialogRoundCheckbox_Control
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 0;
	padding: 0;
	background-color: #24262b;
}

.DialogRoundCheckbox_OuterCircle
{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin: 0;
	padding: 0;
	box-shadow: inset 0.5px 1px 3px rgba( 1, 1, 1, 0.4 );
	display: flex;
	justify-content: center;
	transition: background-color .08s ease-in-out;
}

.DialogRoundCheckbox_Control:focus
{
	outline: none;
}

.DialogRoundCheckbox_OuterCircle:hover
{
	outline: none;
	background-color: #1e1f23;
	cursor: pointer;
}

.DialogRoundCheckbox_Control .DialogRoundCheckbox_InnerCircle
{
	width: 50%;
	height: 50%;
	border-radius: 50%;
	align-self: center;
	box-shadow: 0px 0px 8px rgba( 31, 141, 254, .5 );
	background: linear-gradient( to bottom, #00ccff 0%, #2d73ff 80% );
	transform: scale( 0 );
	opacity: 0;
	transition: all .1s ease-in-out;
}

.DialogRoundCheckbox_Control.Active .DialogRoundCheckbox_InnerCircle
{
	box-shadow: 1px 1px 1px 1px rgba( 0, 0, 0, .2 );
	transform: scale( 1 );
	opacity: 1;
}

.copiedAnimation
{
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	color: rgb( 27, 152, 255 );
	transition: all 0s ease-out;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.copiedAnimation.animationComplete
{
	opacity: 0;
	transition-duration: 1s;
	transition-delay: 0.5s;
}

.copiedAnimation.animationPlaying
{
	opacity: 1;
	transition-property: transform, opacity;
	transition-duration: 0s, 0.6s;
}

._FixedHeight
{
	flex-shrink: 0;
}

._FillAvailableHeightAndScroll
{
	flex: 1;
	min-height: 0;
	overflow-y: scroll;
}

ul
{
	list-style-type: disc;
	list-style-position: inside;
}


/*
* Title Bar styles
*/

.title-area
{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 18px;
	-webkit-app-region: drag;
	z-index: 2;
}

body.in_global_drag .title-area
{
	-webkit-app-region: no-drag;
}

.titleBarContainer
{
	position: relative;
}

.titleBarContainer .no-drag
{
	-webkit-app-region: no-drag;
	z-index: 3;
}

.title-area .title-bar-actions
{
	display: flex;
	flex-direction: row-reverse;
	position: absolute;
	top: 0px;
	right: 2px;
	bottom: 0;
	max-height: 24px;
	-webkit-app-region: no-drag;
	pointer-events: auto;
}

.singleWindowFocusBar
{
	width: 100%;
	height: 24px;
	background: linear-gradient( to right, #007896, #1f3d96 );
	-webkit-mask: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) 0px, rgba( 0, 0, 0, 1 ) 1px, rgba( 0, 0, 0, 0.4 ) 1px, rgba( 0, 0, 0, 0.2 ) 8px, rgba( 0, 0, 0, 0 ) 100% );
	position: absolute;
	top: 0;
	opacity: 0;
	transition: opacity .18s ease-in-out;
	pointer-events: none;
	user-select: none;
}

.focused .singleWindowFocusBar
{
	opacity: 1;
	z-index: 15;
}

.title-area-highlight
{
	height: 24px;
	background: linear-gradient( to right, #007896, #1f3d96 );
	-webkit-mask: linear-gradient( to bottom, rgba( 0, 0, 0, 1 ) 0px, rgba( 0, 0, 0, 1 ) 1px, rgba( 0, 0, 0, 0.4 ) 1px, rgba( 0, 0, 0, 0.2 ) 8px, rgba( 0, 0, 0, 0 ) 100% );
	opacity: 0;
	transition: opacity .18s ease-in-out;
	pointer-events: none;
	user-select: none;
}

.focused:not(.singlewindow) .title-area-highlight
{
	opacity: 1;
}

.title-area-icon
{
	width: 24px;
	height: 18px;
	margin: auto 0px auto 0px;
	/*background-size: 10px;*/
	background-repeat: no-repeat;
	background-position: center;
	-webkit-app-region: no-drag;
}

.title-area-children
{
	float: right;
	margin-right: 84px;
	-webkit-app-region: no-drag;
	pointer-events: auto;
	position: absolute;
	top: 4px;
	right: 0px;
	text-align: right;
}

.closeButton
{

}

.title-area-icon .SVGIcon_Minimize
{
	width: 14px;
	height: 14px;
	margin-top: -2px;
	margin-left: 4px;
}


.title-area-icon .SVGIcon_Maximize
{
	width: 14px;
	height: 14px;
	margin-top: -2px;
	margin-left: 4px;
}

.title-area-icon .SVGIcon_X_Line
{
	width: 14px;
	height: 14px;
	margin-top: -2px;
	margin-left: 4px;
}

.title-area-icon .SVGIcon_X_Line line
{
	stroke: rgb(120, 138, 146);
	stroke-width: 24px;
}

.title-area-icon:hover .SVGIcon_Button rect,
.title-area-icon:hover .SVGIcon_Button line,
.title-area-icon:hover .SVGIcon_Button polyline
{
	stroke: white;
}


.maximizeRestoreButton
{
	/*background-image: url( "../../images/sharedui/chrome/icon_window_max.png" );*/
}

.ModalDialogPopup .maximizeRestoreButton
{
	display: none;
}

.minimizeButton
{
	/*background-image: url( "../../images/sharedui/chrome/icon_window_min.png" );*/
}

.closeButton:hover
{
	/*background-image: url( "../../images/sharedui/chrome/icon_window_close_hover.png" );*/
}

.maximizeRestoreButton:hover
{
	/*background-image: url( "../../images/sharedui/chrome/icon_window_max_hover.png" );*/
}

.minimizeButton:hover
{
	/*background-image: url( "../../images/sharedui/chrome/icon_window_min_hover.png" );*/
}



.window_resize_grip
{
	background-image: url( "../../images/sharedui/chrome/resizehandleicon.png" );
	background-size: 16px 16px;
	background-position: 4px 4px;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	opacity: .3;
	position: fixed;
	right: 0px;
	bottom: 0px;
	/* force above other ui. even when fixed, seeing other ui on top */
	z-index: 1000;
}

.DialogBodyNotificationBar
{
	font-size: 12px;
	letter-spacing: 0px;
	color: rgb(82, 184, 224);
	line-height: 18px;
	height: 18px;
	display: flex;
	position: absolute;
	margin-top: -2px;

}

.permissionDetailsPage .DialogBodyNotificationBar
{
	margin-top: -18px;
}

.DialogBodyNotificationBar svg
{
	height: 13px;
	width: 13px;
	margin-left: 0px;
	margin-right: 2px;
	margin-top: 2px;
}

.DialogBodyNotificationBar .SVGIcon_Lock .topLock
{
	fill: rgb(82, 184, 224);
}

.DialogBodyNotificationBar .SVGIcon_Lock .baseLock
{

	stroke: rgb(82, 184, 224);
}

.GenericConfirmDialog .friend
{
	margin-top: 10px;
}

.displayColumn
{
	display: flex;
	flex-direction: column;
}

.displayRow
{
	display: flex;
	flex-direction: row;
}

.fullHeight
{
	height: 100%;
}

.fullWidth
{
	width: 100%;
}

.alignItemsCenter
{
	align-items: center;
}

.alignSelfCenter
{
	align-self: center;
}

.tempText
{
	font-size: 10px;
	color: #f50;
	width: 400px;
	align-self: center;
}

.allCaps
{
	text-transform: uppercase;
}

.flexShrinkNone
{
	flex-shrink: 0;
}


/*
 * Throbber
 */

.throbber
{
	width: 60px;
	height: 90px;
	display: inline-block;
}

.throbber_small
{
	width: 36px;
	height: 36px;
}

.throbber_medium
{
	width: 60px;
	height: 60px;
}

.throbber_large
{
	width: 92px;
	height: 92px;
}

.throbber_xlarge
{
	width: 120px;
	height: 120px;
}

.throbber_fixed
{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.throbber_absolute
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
}

.throbber > div
{
	float: left;
	width: 25%;
	height: 100%;
	background-color: #67c1f5;
}

.throbber > div
{
	animation: loading_throbber_bar 1s ease-in-out infinite;
}

.throbber > div:nth-child( 1 )
{
	transform: scaleX( 1.0 ) scaleY( 0.6 );
}

.throbber > div:nth-child( 2 )
{
	margin-left: 12%;
	transform: scaleX( 1.0 ) scaleY( 0.6 );
	animation-delay: 0.16s;
}

.throbber > div:nth-child( 3 )
{
	margin-left: 12%;
	transform: scaleX( 1.0 ) scaleY( 0.6 );
	animation-delay: 0.32s;
}

.WaitingForInterFaceReadyContainer
{
	width: 100%;
	height: 100%;
	background-color: rgb(31, 33, 38);
	display: flex;
}

.WaitingForInterFaceReadyThrobber
{
	margin: auto;
	align-self: center;
	width: fit-content;
}

.Throbber_Blur
{
	position: absolute;
	filter: blur(12px);
	transform: scale(1.25);
}


@keyframes loading_throbber_bar
{
	0%
	{
		transform: scaleX( 1.0 ) scaleY( 0.6 );
	}
	30%
	{
		transform: scaleX( 1.0 ) scaleY( 1.0 );
	}
	55%
	{
		transform: scaleX( 1.0 ) scaleY( 0.6 );
	}
	100%
	{
		transform: scaleX( 1.0 ) scaleY( 0.6 );
	}
}


/*=============TEST STUFF BELOW PLZ DONT DELETE=======================*/

.innerwidth
{
	border: 3px dashed #f80;
	flex: 1;
	color: white;
}

.form
{
	border: 1px dotted cyan;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.A
{
	background-color: #F006;
	height: 40px;
}

.B
{
	background-color: #0f06;
	display: flex;
	flex-direction: column;
}

.ScrollList
{
	border: 2px solid pink;
	background-color: #000a;
	margin: 16px 32px;
	overflow-y: auto;
	overflow-x: hidden;
	height: 200px;
	min-height: 40px;
}

.FixedHeight
{
	border: 2px outset red;
	height: 60px;
	margin: 4px 32px;
	background-color: #000a;
	margin-bottom: 16px;
}

.VariableHeight
{
	border: 2px inset blue;
	height: 60px;
	margin: 4px 32px;
	background-color: #000a;
}

.C
{
	background-color: #00f6;
	height: 40px;
}

/*=============TEST STUFF ABOVE PLZ DONT DELETE=======================*/











.largeThrobber
{
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
}

.mediumThrobber
{
	width: 32px;
	height: 32px;
	margin-bottom: 24px;
}

.smallThrobber
{
	width: 16px;
	height: 24px;
}

.whiteText
{
	color: white;
}

.textLink
{
	color: white;
	text-decoration: underline;
}

.allCaps
{
	text-transform: uppercase;
}