html{
	height:100%;
	width:100%;

	--mini-character-icon-width: 60px;
	--item-manager-item-size: 150px;
	--font-size: 0.8em;

	--background-invert-filter: invert(100%);
}
body.theme-dark {
	--main-bg-color-bright: #41454d;
	--main-bg-color-dark: #21252b;
	--theme-popup-bg-color: #333333;
	--theme-text-color: #EEEEEE;

	--theme-text-color-warning:orange;
	--theme-filter-invert-dark:invert(100%);

	--theme-context-menu-bg-color: #333333;
	--theme-context-menu-item-bg-color: #333333;
	--theme-context-menu-item-selected-bg-color: #333333;
	--theme-context-menu-submenu-bg-color: #333333;
	--theme-context-menu-submenu-fg-color: #888888;
	--theme-context-menu-item-hover-bg-color: #000000;

	--theme-scene-explorer-bg-color: #222222;
	--theme-scene-explorer-entity-header-hover-bg-color: #000000;
	--theme-file-selector-item-hover-bg-color: #0F0F0F;
}
body.theme-light {
	--main-bg-color-bright: #D7D3CB;
	--main-bg-color-dark: #DEDAD4;
	--theme-popup-bg-color: #CCCCCC;
	--theme-text-color: #111111;

	--theme-text-color-warning:#ff6a00;
	--theme-filter-invert-light:invert(100%);
}
body{
	font-family: tf2build,Verdana,sans-serif;
	font-size: var(--font-size);
	margin:0px;
	overflow: hidden;
	background-color: #000000;
	height:100%;
	width:100%;
	display: flex;
	color: var(--theme-text-color);
}
a{
	color: var(--theme-text-color);
	text-decoration: none;
}
a:active, a:hover {
	outline: 0;
	color: #0055AA;
}
a:hover {
	color: var(--theme-text-color);
}
input{
	height: 2em;
	box-sizing: border-box;
	vertical-align: middle;
}
select{
	height: 2em;
	box-sizing: border-box;
}
label.space-after{
	padding-right: 5px;
}

.loadout-application{
	height:100%;
	width:100%;
	display: flex;
	flex-direction: column;
}

.loadout-application-top{
	/*height:100%;*/
	width:100%;
	display: flex;
	flex: 1;
}

.loadout-application-bottom{
	height:50%;
	width:100%;
}
.loadout-application-content{
	display: flex;
	flex:1;
}
.loadout-application-advertisement-header{
	cursor: pointer;
}
.loadout-application-advertisement-header div:first-child{
	font-size: 1.5em;
}
.loadout-application-left-panel{
	max-width: 50%;
}
.loadout-application-facial-panel{
	position: absolute;
	right: 0px;
	bottom: 100px;
	max-height: 50%;

	min-width: 100px;
	min-height: 100px;
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
}
.loadout-application-facial-panel-reset-button{
	cursor: pointer;
	width: 100%;
	background-color: rgb(255, 255, 255);
	color: #000000;
	text-align: center;
	padding: 2px;
	border-radius: 3px;
}
.loadout-application-facial-panel-controllers{
	text-align: right;
	overflow-y: auto;
}
.loadout-toolbar{
	position:absolute;
	top:5px;
	right:5px;
	z-index:5;
	display:flex;
	pointer-events: none;
	filter: var(--background-invert-filter);
}
.loadout-toolbar-button{
	height:30px;
	width:30px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	margin:4px;
	cursor:pointer;
	pointer-events: all;
}
.loadout-toolbar-button.disabled{
	opacity: 50%;
}
.loadout-toolbar-button-canvas{
	background-image: url('./img/icons/overscan.svg');
}
.loadout-toolbar-button-item-list{
	background-image: url('./img/icons/list.svg');
}
.loadout-toolbar-button-effects{
	background-image: url('./img/icons/effects.svg');
	background-size: auto 100% !important;
}
.loadout-toolbar-button-pause{
	background-image: url('./img/icons/pause.svg');
}
.loadout-toolbar-button-play{
	background-image: url('./img/icons/play.svg');
}
.loadout-toolbar-button-facials{
	background-image: url('./img/icons/faceicon.svg');
}
.loadout-toolbar-button-picture{
	background-image: url('./img/icons/camera.svg');
}
.loadout-toolbar-button-sfm{
	background-image: url('./img/icons/sfm_logo.svg');
}
.loadout-toolbar-button-3d{
	background-image: url('./img/icons/3dprint.svg');
}
.loadout-toolbar-button-options{
	background-image: url('./img/icons/options.svg');
}
.loadout-toolbar-button-bug{
	background-image: url('./img/icons/bug.svg');
}
.loadout-toolbar-button-extension{
	background-image: url('./img/extension_icon_128.png');
}
.loadout-toolbar-button-advanced{
	background-image: url('./img/icons/options2.svg');
}
.loadout-toolbar-button-about{
	background-image: url('./img/icons/more.svg');
}
.loadout-toolbar-button-share{
	background-image: url('./img/icons/share.svg');
}
.loadout-toolbar-button-patreon{
	background-image: url('./img/icons/patreon_logo.svg');
}

.loadout-canvas-container{
	flex: auto;
}

.loadout-canvas-fps{
	position: absolute;
	top:0px;
	left: 0px;
}
.background-invert-filter{
	filter: var(--background-invert-filter);
}
.loadout-about-outer{
	z-index: 15;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	display: flex;
}
.loadout-about-inner{
	background-color: rgba(0, 0, 0, 0.7);
	margin:auto;
	padding:10px;
	position:relative;
	pointer-events: all;
}
.loadout-about-inner .title{
	text-align: center;
	font-size: 2em;
	margin-bottom: 1em;
}
.loadout-close-button{
	position:absolute;
	height:16px;
	width:16px;
	top:13px;
	right:13px;
	background-image: url('./img/icons/close.svg');
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.effect-manager-effect-list{
	display: flex;
	flex-direction: column;
}
.effect-manager-effect{
	background-color: var(--main-bg-color-bright);
	color: var(--main-text-color-dark2);
	font-size: calc(2 * var(--font-size));
	padding: 3px;
	display: inline-block;
	width: 300px;
	margin: 1px;
	position: relative;

	text-overflow: ellipsis;
	white-space: nowrap;
}
.effect-manager-effect-remove-button{
	position: absolute;
	top: 1px;
	right: 5px;
	color: var(--main-text-color-dark2);
	pointer-events: all;
	cursor: pointer;
}
.effect-manager-effect-remove-button::after {
	content: '\274c';
}
.effect-manager-color{
	width:50px;
	height:50px;
	display:inline-block;
}
.option-line{
	display: block;
	width: 100%;
	padding: 5px;
}
.option-button {
	background-color: var(--main-bg-color-bright);
	color: var(--main-text-color-dark2);
	border-radius: 1px;
	display:inline-block;
	cursor:pointer;
	padding: 4px;
	color:white;
	pointer-events:all;
	margin: 4px;
}

.option-input-mtt-url{
	width: calc(100% - 10px);
}
.option-language-authors{
	display: inline-block;
}
.option-steam-profile-button{
	background-image: url('./img/steam.png');
	height: 30px;
	width: 30px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.loadout-application-mtt-error{
	color: red;
	font-size: 1.5em;
}
.flex-panel{
	display: flex;
	box-sizing: border-box;
	pointer-events: all;
	overflow: auto;
	position: relative;
}
.loadout-application-options{
}
.loadout-application-options custom-tab custom-panel{
	margin-bottom: 20px;
}
.loadout-application-options custom-tab custom-panel .content{
	padding: 5px;
	flex-direction: column;
	display: flex;
}

.loadout-application-options-background .content{
	/*display: table;*/
}
.loadout-application-options-background .content > div{
	/*display: table-row;*/
	margin: 5px;
}
.loadout-application-options-background .content > div > *{
	/*display: table-cell;*/
}
/*
.loadout-application-options-background label{
	padding-right: 5px;
}*/

.loadout-application-options-graphics{
	display: flex;
	flex-direction: column;
}



.weapon-unusual-outer{
	position: absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	z-index:20;
}
.weapon-unusual-inner{
	position:absolute;
	top:calc(50% - 100px);
	left:calc(50% - 200px);
	background-color: rgba(255, 255, 255, 1.0);
	background-color: var(--theme-popup-bg-color);
	padding:10px;
}
.weapon-unusual-title{
	font-size:2em;
	overflow:hidden;
	color: var(--main-text-color-dark2);
}
.sheenSelectedItem{
	width:50px;
	height:50px;
	display:inline-block;
	background-size: 100% auto;
	overflow: hidden;
}


@media screen and (max-width: 999px) {
	.loadout-application-top{
		flex-direction: column;
	}
	.loadout-application-advertisement-header{
		display: none;
	}
	.loadout-toolbar-button-facials, .loadout-toolbar-button-sfm, .loadout-toolbar-button-3d, .loadout-toolbar-button-bug, .loadout-toolbar-button-extension{
		display: none;
	}
}