@keyframes tabNotification
{
	from		{ opacity: 1; background-color: /*InterfaceSecondary*/#DDD/*end*/; }
	to			{ opacity: .8; }
}

@keyframes tabNotificationZoom
{
	50%			{ transform: scale(1,1); }
	100%		{ transform: scale(.75,.75); }
}


/* Tab */
userxTab																				{ display: flex; width: 100%; height: 100%; filter: drop-shadow(0px 0px 3px rgba(0,0,0,.25)); font: 15px Roboto; }
userxTab > header																		{ transition: border-color .25s; display: flex; white-space: nowrap; overflow: hidden; position: relative; border-color: /*InterfaceSecondary*/#DDD/*end*/; flex: 0 0 auto; } /* border color inherit for before element */
userxTab > header::before																{ content: ""; position: absolute; z-index: 0; }
userxTab > header > tab																	{ opacity: .8; position: relative; outline: none; padding: 1px 6px; transition: border-color .25s, background .25s, width .25s, height .25s, opacity .25s; -ms-user-select: none; -moz-user-select: none; user-select: none; background: /*InterfaceGroupBackground*/#FFF/*end*/; flex: 0.5 0.5 auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid /*InterfaceSecondary*/#DDD/*end*/; overflow: hidden; z-index: 1;  }
userxTab > header > tab.minimumSize														{ flex: 0 0 auto; }
userxTab > header > tab:not(.disabled):hover											{ opacity: 1; border-color: /*InterfaceSecondary*/#AAA/*end*/; background-color: /*InterfaceSecondary*/#DDD/*end*/; cursor: pointer; }
userxTab > header > tab.selected														{ opacity: 1; font-weight: bold; flex: 0.5 0.5 auto; border-color: /*InterfaceHighlightBackground*/rgba(22,160,208,1)/*end*/; overflow: visible; }
userxTab > header > tab.selected.minimumSize											{ flex: 0 0 auto; }
userxTab > header > tab:not(.selected):not(.disabled):focus								{ border-color: /*InterfaceHighlightBackground*/rgba(22,160,208,1)/*end*/; opacity: 1; }
userxTab > header > tab:not(.selected):not(.disabled):not(:hover).notification			{ animation: 1s infinite alternate tabNotification; }
userxTab > header > tab:not(.selected):not(.disabled).notification::after				{ opacity: .5; transition: all .5s; animation: .5s infinite alternate tabNotificationZoom; content: ""; position: absolute; width: 18px; height: 100%; background: url("../notification-icon.svg") 50% 50% no-repeat; background-size: contain; right: 4px; top: 0; z-index: 2;  }
userxTab > header > tab:not(.selected):not(.disabled):hover.notification::after			{ opacity: 1; animation: none; }
userxTab > header > tab > span															{ overflow: hidden; text-overflow: ellipsis; transition: color .25s; }
userxTab > header > tab > div															{ display: inline-block; width: 18px; height: 18px; background-position: 50% 50%; background-size: contain; background-repeat: no-repeat; transition: background-image .25s; }
userxTab > header > tab > div + span													{ padding: 0 2px 0 4px; display: inline-block; vertical-align: top; }
userxTab > header > tab.disabled														{ opacity: .5; cursor: default; }
userxTab > panelContainer																{ transition: all .25s; flex: 1 1 auto; border: 1px solid /*InterfaceSecondary*/#DDD/*end*/; background: /*InterfaceGroupBackground*/#FFF/*end*/; max-height: 100%; position: relative; }
userxTab > panelContainer > panel														{ transition: opacity .2s; opacity: 0; width: 100%; height: 100%; position: absolute; overflow: auto; z-index: 0; }
userxTab > panelContainer > panel.selected												{ opacity: 1; z-index: 2; }

userxTab.headerTop																		{ flex-direction: column; }
userxTab.headerTop > header																{ width: 100%; min-height: 30px; height: 30px; flex-direction: row; align-items: flex-end; }
userxTab.headerTop > header::before														{ width: 100%; border-bottom: 1px solid /*InterfaceSecondary*/#DDD/*end*/; border-color: inherit; bottom: 0; }
userxTab.headerTop > header > tab														{ box-shadow: 0 -16px 32px -20px rgba(0,0,0,.5) inset; border-top-left-radius: 1px; border-top-right-radius: 1px; height: calc(100% - 5px); max-width: 50%; margin-bottom: 1px; border-bottom: none; }
userxTab.headerTop > header > tab.minimumSize											{ max-width: 200px; }
userxTab.headerTop > header > tab.selected												{ box-shadow: none; height: 100%; padding: 0 6px 1px 6px; border-top: 3px solid /*InterfaceHighlightBackground*/rgba(22,160,208,1)/*end*/; border-bottom: none; margin-bottom: 0; }
userxTab.headerTop > header > tab:not(.selected):not(.disabled):focus					{ box-shadow: none; border-width: 2px 2px 1px 2px; padding: 0px 5px 1px 5px; }
userxTab.headerTop > panelContainer														{ border-top: none; }

userxTab.headerTop.box > header															{ height: 48px; }
userxTab.headerTop.box > header	> tab													{ flex: 0 0 48px; }
userxTab.headerTop.box > header	> tab > div												{ width: 30px; height: 30px; }

userxTab.headerBottom																	{ flex-direction: column-reverse; }
userxTab.headerBottom > header															{ width: 100%; min-height: 30px; height: 30px; flex-direction: row; align-items: flex-start; }
userxTab.headerBottom > header::before													{ width: 100%; border-top: 1px solid /*InterfaceSecondary*/#DDD/*end*/; border-color: inherit; top: 0; }
userxTab.headerBottom > header > tab													{ box-shadow: 0 16px 10px -10px rgba(0,0,0,.5) inset; border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; height: calc(100% - 5px); max-width: 50%; margin-top: 1px; border-top: none; }
userxTab.headerBottom > header > tab.minimumSize										{ max-width: 200px; }
userxTab.headerBottom > header > tab.selected											{ box-shadow: none; height: 100%; padding: 1px 6px 0 6px; border-bottom: 3px solid /*InterfaceHighlightBackground*/rgba(22,160,208,1)/*end*/; border-top: none; margin-top: 0; }
userxTab.headerBottom > header > tab:not(.selected):not(.disabled):focus				{ box-shadow: none; border-width: 1px 2px 2px 2px; padding: 1px 5px 0px 5px; }
userxTab.headerBottom > panelContainer													{ border-bottom: none; }

userxTab.headerBottom.box > header														{ height: 48px; }
userxTab.headerBottom.box > header > tab												{ flex: 0 0 48px; }
userxTab.headerBottom.box > header > tab > div											{ width: 30px; height: 30px; }

userxTab.headerLeft																		{ flex-direction: row; }
userxTab.headerLeft > header															{ height: 100%; min-width: 180px; width: 180px; flex-direction: column; align-items: flex-end; }
userxTab.headerLeft > header::before													{ height: 100%; border-right: 1px solid /*InterfaceSecondary*/#DDD/*end*/; border-color: inherit; right: 0; }
userxTab.headerLeft > header > tab														{ box-shadow: -16px 0 32px -20px rgba(0,0,0,.5) inset; border-top-left-radius: 1px; border-bottom-left-radius: 1px; height: 28px; max-height: 28px; width: calc(100% - 5px); margin-right: 1px; border-right: none; }
userxTab.headerLeft > header > tab.selected												{ box-shadow: none; width: 100%; padding: 1px 7px 1px 5px; border-left: 3px solid /*InterfaceHighlightBackground*/rgba(22,160,208,1)/*end*/; border-right: none; margin-right: 0; }
userxTab.headerLeft > header > tab:not(.selected):not(.disabled):focus					{ box-shadow: none; border-width: 2px 1px 2px 2px; padding: 1px 6px 1px 5px; }
userxTab.headerLeft > panelContainer													{ border-left: none; }

userxTab.headerLeft.box > header														{ min-width: 48px; width: 48px; }
userxTab.headerLeft.box > header > tab													{ height: auto; max-height: none; flex: 0 0 48px; }
userxTab.headerLeft.box > header > tab > div											{ width: 30px; height: 30px; }

userxTab.headerRight																	{ flex-direction: row-reverse; }
userxTab.headerRight > header															{ height: 100%; min-width: 180px; width: 180px; flex-direction: column; align-items: flex-start; }
userxTab.headerRight > header::before													{ height: 100%; border-right: 1px solid /*InterfaceSecondary*/#DDD/*end*/; border-color: inherit; left: 0; }
userxTab.headerRight > header > tab														{ box-shadow: 16px 0 32px -20px rgba(0,0,0,.5) inset; border-top-right-radius: 1px; border-bottom-right-radius: 1px; height: 28px; max-height: 28px; width: calc(100% - 5px); margin-left: 1px; border-left: none; }
userxTab.headerRight > header > tab.selected											{ box-shadow: none; width: 100%; padding: 1px 5px 1px 7px; border-right: 3px solid /*InterfaceHighlightBackground*/rgba(22,160,208,1)/*end*/; border-left: none; margin-left: 0; }
userxTab.headerRight > header > tab:not(.selected):not(.disabled):focus					{ box-shadow: none; border-width: 2px 2px 2px 1px; padding: 1px 5px 1px 6px; }
userxTab.headerRight > panelContainer													{ border-right: none; }

userxTab.headerRight.box > header														{ min-width: 48px; width: 48px; }
userxTab.headerRight.box > header > tab													{ height: auto; max-height: none; flex: 0 0 48px; }
userxTab.headerRight.box > header > tab > div											{ width: 30px; height: 30px; }