.default-avatars{
	display: flex;
	flex-wrap: wrap;
}
.default-avatars p{
	width: 100%;
}
.default-avatars img{
	cursor: pointer;
	transition: 0.4s ease-in;
	border-radius: 20px;
	margin: 10px;
}
.default-avatars img:hover{
	background: #ddd;
}

.global_avatar{
    width: 100%;
    padding-top: 60px;
}

#global-avatar{
	z-index: 1;
	position: relative;
}

#global-avatar.mobile{
	display: block;
	border-radius: 30px;
	padding: 0;
	width: 50px;
	height: 50px;
	margin-left: 15px;
	border: 1px solid rgba(255, 255, 255, 0.8);
}

#global-avatar.desktop{
	display: none;
}

#global-avatar-background{
	position: absolute;
	width: 207px;
  	height: 230px;
  	border-radius: 8px;
}

#loading-icon{
	position: absolute;
	top: 100px;
	left: 60px;
	z-index: 99999;
}

.img_btn {
	width: 44px;
	height: 44px;
	border: none;
	background: none;
}
.text_button{
	padding: 0;
	margin: 0;
	font-family: Veranda;
	border: none;
	background: none;
}
#avatar_form{
	position: relative;
}
#outfit_display{
	border: 1px solid #ccc;
	border-radius: 8px;
	top: 30px;
	left: 10px;
	padding: 5px;
	display: flex;
	width: 220px;
	flex-wrap: wrap;
	justify-content: center;
}
/*#outfit_display::before{
	content: " ";
	position: absolute;
	top: 32px;
	left: 5px;
	width: 0px;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 15px solid #ccc;
}
#outfit_display::after{
	content: " ";
	position: absolute;
	top: 35px;
	left: 6px;
	width: 0px;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 13px solid #fff;
}*/
#outfit_display input[type="submit"]{
	padding: 5px 15px;
	border: none;
	width: 90%;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1rem;
}
#avatar_form #outfit_display img{
	width: 100px;
	height: 100px;
	transition: 0.3s ease-in;
	background: #efefef;
	cursor: default;
	margin-right: 10px;
}
#outfit_display span.equip-outfit, #outfit_display span.remove-outfit{
	position: absolute;
	cursor: pointer;
}
#outfit_display span.equip-outfit{
	left: 5px;
}
#outfit_display span.remove-outfit{
	right: 15px;
	top: 0;
}
.individual-outfit{
	display: inline-block;
	position: relative;
}
#outfit_display .close-outfits{
	position: absolute;
	top: 55px;
	right: 10px;
	cursor: pointer;
	font-size: 0.9rem;
	font-weight: bold;
}
#outfit_display p{
	margin-top: 5px;
	width: 100%;
}
#btns{
	width: 207px;
}

#tabs-1, #tabs-2, #tabs-3, #tabs-4, #tabs-5, #tabs-6, #tabs-7 {
	display: inline-block;
	padding: 0;
}
#subtabsbar {
	list-style: none;
	border-top-right-radius: 6px;
	border-top-left-radius: 5px;
	z-index: 2;
	margin: 0;
	padding: 2px;
}
#subtabsbar li {
	display: inline;
	margin: 0;
}
#subtabsbar li:empty{
	display: none;
}
#subtabsbar li a{
	color: #fff;
	font-size: 1.1em;
	padding: 0px 2px;
	border-top-left-radius: 5px;
	cursor: pointer;
}
.article_tab {
	border: none;
	display: none;
}
.activetab{
	display: inline;
}
#piecesArea .tabs_tab, .draggable {
	width: 100%;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border: 1px solid #ccc;
	border-width: 1px;
	top: 0;
	position: relative;
	z-index: 2;
}

#myProgress {
	margin-top: 10px;
	width: 100%;
	background-color: #ddd;
}

#myBar {
	width: 10%;
	height: 20px;
	text-align: center;
	line-height: 20px;
	color: white;
}

/*Dollmaker script
--------------------*/

/*Dollmaker tabs
---------------------------------------- */
.ui-tabs-hide 			{ visibility:hidden;}
.ui-tabs-panel { }



/* NOTE: You can change the colors for the tabs further below . . . .*/

/*this puts rounded corners around the boxes*/
.ui-corner-all, .ui-tabs-panel{
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
}

/* this puts rounded corners around the tabs*/
.ui-corner-top a{
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
}

/*This div contains the whole dollmaker. It can be placed anywhere on the page and everything will follow
  Keep the height unspecified so that it can stretch to accomodate varied number of pieces */
#dollmaker_container {
position: relative;
padding: 2px, 2px, 2px, 2px;
display: inline-block;
width: 100%;
}

#avatar_form img{
	width: 45px;
	height: 45px;
	border-radius: 25px;
	transition: 0.2s ease-in;
	margin: 2px;
}

#avatar_form img:hover{
	cursor: pointer;
}

.avatar_submit{
	/*background: #48AFF0;*/
	padding: 10px 50px;
	text-align: center;
	font-size: 1.6em;
	color: white;
	border: 0px solid transparent;
	border-radius: 5px;
	transition: 0.2s ease-in;
}

.layer-preview{
	position: absolute;
}
/*-------------------------------------------------------------------*/
/*The tabbed area at the right that contains all the draggable pieces*/

#preview-pane {
	width: 207px;
	height: 230px;
	position: relative;
	left: 0px;
	top: 0px;
	display: inline-block;
	margin: 0 auto;
	
}

#preview-pane img {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}


/*Positioning for tabs area*/
#tabsbar {
	position: relative;
	text-align: left; 
	top: 0;
	background: none;
	border: none;
	padding: 1px; /* This extra space is required for browser compatibility */
	z-index: 1;
}

/*Allows the tabs to be next to eachother*/
#tabsbar li{
	float: left;
	margin: 3px 3px 3px 0;
	background: none;
	padding: 10px;
}

#tabsbar li.activetab{
	padding: 10px;
	top: 0;
	position: relative;
}

#tabsbar li a {
	padding: 8px 18px;
	font-size: 0.9em;
	font-weight:bold;
	border-radius: 10px;
	color: #fff;
	transition: background 0.2s ease-in;
	position: relative;
}
#tabsbar li{
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	list-style-type: none;
}

#tabsbar .ui-state-active a {
	position: relative;
	cursor: pointer;
	/*top:-8px;*/
}

#tabsbar .activetab a {
	color: #fff;
	/*background: #48AFF0;*/
	z-index: 3;
	filter: saturate(90%) brightness(120%);
}

#tabsbar li, #tabsbar li a, #tabsbar li:active, #tabsbar li:hover, #tabsbar li:focus, #tabsbar li a:hover, #tabsbar li a:active, #tabsbar li a:focus {
   outline: 0 !important;
   text-decoration: none;
   border: none;
} 
#tabsbar .ui-state-hover a {
	background-image: none;
	text-decoration:  none;
}

/*---------------------------*/
/*The sub items and selected item styling. */
.draggable {
	display: none; 
	border-radius: 4px; 
	position: absolute;
	z-index: 7000;
}
.boxstyle1 {
	background-color: #d4e4e4;
}
.boxstyle2 {
	border: none;
}

/*-------------------------------------------------------------------*/
/* The panel under the tabs that contain the props*/
.ui-tabs-panel{ 
overflow:visible; /* so that the panel extends as you add pieces to it*/
clear:both;
}

#piecesArea img{
	width: 30px;
	height: 30px;
	margin: 0 2px 0 0;
}

#piecesArea {
	padding: 0;
	position: relative; 
	border: none;
	display: inline-block;
	width: 100%;
	margin-bottom: 10px;
}

#piecesArea label{
	width: 28px;
	height: 30px;
	display: inline-block;
	margin: 2px 2px 1px 1px;
	position: relative;
}

.hue_popout{
	width: 200px;
}

.close-popout{
	position: absolute;
	right: 5px;
}

.hue_changer{
	height: 15px;
	width: 15px;
	position: absolute;
	top: 18px;
	left: 25px;
	background: url('https://dmdbt5jwvgmqb.cloudfront.net/rainbowwheel.png');
}
.hue_popout{
	height: 140px;
	background: white;
	box-shadow: 0px 0px 5px rgb(195, 195, 195);
	position: absolute;
	display: none;
	top: 20px;
	left: 25px;
	padding: 5px;
	border-radius: 5px;
	z-index: 5;
}
.applyhue{
	padding: 6px;
	text-align: center;
	font-weight: bold;
	border-radius: 5px;
	margin-top: 5px;
}

.rangechange{
	width: 170px;
}
.article_tab{
	position: relative;
}
.wholeitem{
	display: inline-block;
	position: relative;
	margin: 2px 0px;
	padding: 2px 5px;
	border-radius: 5px;
	cursor: pointer;
}
.wholeitem label img{
	cursor: pointer;
}
.wholeitem label input{
	display: none;
}
#imgprev{
	position: relative;
}
#helpbox{
	box-shadow: 0px 0px 2px rgb(195, 195, 195);
	border-radius: 8px;
	border-width: 8px;
	border-top-width: 40px;
	display: inline-block;
	padding: 10px;
	font-size: 1.2em;
	position: relative;
	float: right;
	right: 1%;
	top: 0px;
	line-height: 1.2em;
	text-align: center;
	z-index: 0;
	min-width: calc(100% - 45px);
	opacity: 0.9;
}
h4{
	position: absolute;
	top: -27px;
	text-align: center;
	margin-bottom: 15px;
	font-size: 1.4em;
	text-indent: 21px;
	font-weight: bold;
}
h4 .fa-lightbulb{
    height: 28px;
    width: 28px;
    position: absolute;
    top: -8px;
    left: -10px;
}
#helpbox div{
	margin: 0 0 15px;
}
#helpbox div h5{
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 5px;
}
#helpbox div span{
	font-size: 1.2em;
	padding: 5px;
}
#helpbox div.side-by-side{
	display: inline-block;
}
tab{
	margin-left: 20px;
}
#leftcontent{
	width: 207px;
	display: inline-block;
	float: left;
}
@media screen and (min-width: 600px){
	#tabsbar li a {
		/*padding: 3px 12px;*/
	}
	.hue_popout{
		z-index: 1;
		height: 115px;
	}

	#global-avatar.mobile{
		display: none;
	}

	#global-avatar.desktop{
		display: block;
	}
	#tabsbar li.activetab {
		padding: 0;
	}
}
@media screen and (min-width: 680px){
	#piecesArea {
		padding: 5px 5px 5px 5px;
		width: calc(100% - 220px);
	}
	#tabsbar {
		top: -4px;
		left: 20px;
	}

	#tabsbar li{
		background: none;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#tabsbar li a{
		margin: 0;
		border-radius: 0;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		padding: 3px 15px;
	}
	#tabsbar li.activetab{
		padding: 0;
	}

	#tabsbar .activetab a {
		font-size: 1.1em;
		padding: 5px 15px;
	}
}
@media screen and (min-width: 700px){
	.global_avatar{
		padding-top: 30px;
	}
}
@media screen and (min-width: 800px){
	#tabsbar li a{
		padding: 3px 20px;
	}
}

@media screen and (min-width: 1000px){
	#tabsbar li a{
		padding: 3px 15px;
	}
	.global_avatar{
		width: 70%;
		margin: 0 auto;
	}
}

@media screen and (min-width: 1250px){
	#tabsbar {
		top: -10px;
	}
	#tabsbar li a{
		padding: 10px 25px;
		font-size: 1.1em;
	}
	#tabsbar .activetab a{
		padding: 10px 20px;
		font-size: 1.3em;
	}
	
	#subtabsbar{
		padding: 5px;
		font-size: 1.1em;
	}
}