html.modal-overlay, html.modal-overlay body, html.modal-overlay .page {
    height: 100%;
    width: 100%, overflow:hidden !important;
}

#modal-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999999;
}

#modal-overlay {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.25)), color-stop(100%,rgba(0,0,0,0.65)));
 /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
 /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
 /* IE10+ */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.65) 100%);
 /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40000000', endColorstr='#a6000000',GradientType=1 );
 /* IE6-9 fallback on horizontal gradient */
}

.hide-control { display:none }


	#sec-items { }
	.whisper { color: #aaa }
	html.no-scroll, html.no-scroll body { overflow:hidden !important; }
	html.no-scroll .mfp-wrap { overflow:hidden; }
	
	#tabs ul, #tabs div { display:none }
	#tabs div#tabs-1 { display:block}
	

	#elm-add-item {
		-webkit-box-shadow: 10px 10px 36px 1px rgba(0,0,0,0.39);
		-moz-box-shadow: 10px 10px 36px 1px rgba(0,0,0,0.39);
		box-shadow: 10px 10px 36px 1px rgba(0,0,0,0.39);
		border:solid 1px rgba(50,50,50,.6);
		font-size:18px; width:50px; height:50px; line-height:18px; text-align:center; padding:0;
		position:absolute; border-radius:50%; bottom:30px; right:30px; z-index:99;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

	#elm-add-item:active {
		-webkit-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.39);
		-moz-box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.39);
		box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.39);
	}

	.page-number { min-width:40px; height:33px; line-height:29px; top:2px; position:relative; text-align:center; border:solid 1px #efefef; display:inline-block }

	body { background-color:#f1f1f1 }
	.ohidden { opacity:0; }
	.ignore-item-thumb { width: 75px;  border:solid 1px rgba(0,0,0,0); display:inline-block }
	.item-thumb:hover img { border:solid 1px #ccc; cursor:pointer }
	.product-list ul { margin-left:0px }
	.product-list ul:after {
		content: ".";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden
    }
    	.product-list li { padding-left: 0}

	.product-list li img { max-width:140px; width:100% }

	.error { padding:4px; color:red; text-align:center }
	.dec-loading { padding:30px; text-align:center }
  	canvas, .tabs dd {
  		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-touch-callout: none;

	}

	[data-pf-paginate-prev].pf-disabled { visibility:hidden; }
	[data-pf-paginate-next].pf-disabled { visibility:hidden; }
	[data-pf-pagenumber-single].pf-disabled { visibility:hidden !important; }

	[data-pf-colorfamily].active, [data-pf-bucket].active { font-weight:bold }
	
	.tags li { border:solid 1px #eee; padding:6px; display:block; float:left; margin-right:10px; margin-bottom:10px;font-size:.8em; cursor:pointer; border-radius:3px }
	.tags li a { color:#666; }
	
	.tags li:hover { border:solid 1px #444; color:white; background-color:#333}
	.tags li:hover a { color:white; }
	
.animation-base {
    -webkit-mask-image: -webkit-linear-gradient(#000, rgba(0,0,0,.9));
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: .2s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-duration: 1s;
    -moz-animation-delay: .2s;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: both;
    -ms-animation-duration: 1s;
    -ms-animation-delay: .2s;
    -ms-animation-timing-function: ease;
    -ms-animation-fill-mode: both;
    -o-animation-duration: 1s;
    -o-animation-delay: .2s;
    -o-animation-timing-function: ease;
    -o-animation-fill-mode: both;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
	#modal-open { background-color:white; max-width:800px; margin:0 auto; padding:20px; }
	#modal-open .board-list li { border:solid 1px #efefef; padding:10px; background-color:white; margin-bottom:10px }
	#modal-open .board-list li:hover { background-color:#43AC6A; cursor:pointer }
	#modal-open .board-list li:hover p { color:#efefef }
	#modal-open .board-list li:hover .whisper { color:#efefef }
	#modal-open .board-list li img { margin:0 auto; }

	.modal-color-family { max-width:900px; padding:10px; background-color:white; margin:0 auto }	
	#modal-color-family .scrollable { overflow:auto; }
	
	#modal-publish-gallery { max-width:700px; margin:0 auto; background-color:white; padding:10px 20px 20px 20px; }
	#modal-publish-options { max-width:700px; margin:0 auto; background-color:white; padding:10px 20px 20px 20px; }
	#modal-share-options { max-width:700px; margin:0 auto; background-color:white; padding:10px 20px 20px 20px; }

	#modal-create-account { background-color:white; max-width:400px; margin:0 auto; padding:20px }
	#modal-login { background-color:white; max-width:400px; margin:0 auto; padding:20px }
	#modal-not-authenticated { background-color:white; max-width:400px; margin:0 auto; padding:20px }
	#modal-confirm-leave { background-color:white; max-width:400px; margin:0 auto; padding:20px }
	#modal-save-questions { background-color:white; max-width:400px; margin:0 auto; padding:20px }
	#modal-product-details { background-color:white; max-width:1000px; margin:0 auto; border-radius:5px;  }
	#modal-product-details .hide-while-loading-or-invalid { display:none }
	#modal-product-details { overflow-y:auto !important;  }
	#modal-product-details .bg {font-size:.75rem;text-align:center; text-transform:uppercase;margin:20px auto; background-color:white; cursor:pointer; border:solid 1px #eeeeee; width:50px; height:60px; line-height:50px}
	#modal-product-details .no-bg{font-size:.75rem;text-align:center;text-transform:uppercase; margin:0 auto; background-image: url("/html5board/s/i/no-bg.gif");background-repeat:no-repeat;background-size:cover;overflow:hidden; cursor:pointer; border:solid 1px #eeeeee; width:50px; height:60px; line-height:50px}
    #modal-product-details p, #modal-photo-details p{font-size:.75rem !important;}

	#modal-upload-images { background-color:#39B7CD; text-align:center; color:white; max-width:600px; padding:20px; margin:0 auto; border-radius:5px;  }
	#modal-upload-images h2 { color:white }
	#modal-upload-images .drop { border:dotted 3px #fff; padding:20px; margin-top:30px; cursor:pointer }
	#modal-upload-images .upload { margin-top:30px; }
	

	#modal-instagram-details { background-color:#fff; text-align:center; color:black; max-width:600px; padding:20px; margin:0 auto; border-radius:5px;  }
	#modal-swatch-details { background-color:#fff; text-align:center; color:black; max-width:600px; padding:20px; margin:0 auto; border-radius:5px;  }
	
	
	.progress-modal {
	    max-width: 500px;
	    min-height: 200px;
	    margin-left: auto;
	    margin-right: auto;
	    background-color: white;
	    padding: 20px;
	    display: none
	}
	
	.progress-bar {
	    height: 41px;
	    position: relative;
	    width: 100%;
	    border: solid 1px #dddddd;
	}
	
	.progress-bar .indicator {
	    height: 40px;
	    position: absolute;
	    display: block;
	    top: 0;
	    left: 0;
	    background-color: #43ac6a
	}

	#modal-photo-details { background-color:white; max-width:1000px; margin:0 auto; border-radius:5px; overflow:hidden; }
	#modal-upload-details { background-color:white; max-width:1000px; margin:0 auto; border-radius:5px; overflow:hidden; }

	#modal-saved-image { background-color:white; max-width:800px; margin:0 auto }
	#modal-save-window { background-color:white; max-width:800px; margin:0 auto }


	.elm-main-cat { width:75px; float:left; display:block; cursor:pointer; margin-right:7px; margin-bottom:8px; overflow:hidden; height:140px; font-size:.9em; text-align:center; border:solid 1px rgba(0,0,0,0); }
	.elm-main-cat:hover { border:solid 1px #eee; }
	.elm-main-cat img {  height:100px; margin-bottom:4px }

	.home-category-list li { font-size:.75em; text-align:center; cursor:pointer;  border:solid 1px rgba(0,0,0,0)  }
	.home-category-list li img { max-width:140px; width:100% }

	.home-category-list li:hover { border:solid 1px #eee; }

	.tabs-content {  }
	.tabs-content .content { font-size:.8em;  font-size:.8em; border:solid 1px rgba(0,0,0,.1);  padding:bottom:20px }
	.tabs-content .content.no-scroll { overflow:hidden; }
	.tabs-content .content.scrollable { overflow:auto; }



	.tabs-content .content em { font-size:.8em; text-align:center; display:block; }

	.tabs-content .controls { width:99%; }
	.tabs:first-child { margin-left:1px  }
	.tabs dd { border:solid 1px #ddd; border-bottom:none; position:relative; top:2px; }
	.tabs dd.active { border:solid 1px #efefef; border-bottom:none;    }
	#wrapper { width:100%; position:relative; background-color:white; border:solid 1px #ddd; padding:0; margin:0 ; }

	.tabs-content .content { padding:10px }

	.button.white { background-color:white; color:black; border:solid 1px #eee; margin:0}
	.dropdown.button.white::after { color:black }


	.hover-close { color:#333; text-align:center; padding:0 2px; margin-left:3px; margin-top:-0px; margin-right:-7px }
	.hover-close:hover { background-color:#333; color:white; }

[data-pf-disabled] { visibility:hidden } 

*:focus {
    outline: none;
}

.scrollbox {

}
	#item-toolbox {
		position:absolute; right:3%; top:8%; width:75px; border-radius:3px; background-color:rgba(245,245,245,.9);  height:350px; z-index:99;
		-webkit-box-shadow: 0 0 4px 2px rgba(200,200,200,.8); border:solid 1px #aaa;
		box-shadow: 0 0 2px 2px rgba(70,70,70,.2); display:none;
	}
	#item-toolbox .header {
		background-color:#ddd; text-align:center; border-bottom:solid 1px #ccc; font-size:.75rem; cursor: move; text-transform:uppercase;padding:2px;
	}
	#item-toolbox .title {
		font-size: .75em; text-overflow: ellipsis;margin-bottom:10px;
	}

	#item-toolbox table tr td { background-color:white !important; }
	#item-toolbox .content { padding:7px; }

	#item-toolbox .button{font-size:1.25em; text-align:center; width:100%;}
	#item-toolbox .direction{font-size:.45em; margin-top:5px;}
	#elm-move-forward { float:left; display:block;  }
	#elm-move-back { float:right; display:block;  }


.main-color-swatch {
  display: inline-block;
  width:60px;
  height: 60px;
  margin-bottom:4px; 
  margin-right:3px;
  background-image: url("/s/i/icons/swatch-icon.png") !important;
  color: #fff;
}

.main-color-swatch.blue { background-color:#0C8ACF }
.main-color-swatch.blue.grad {   background: radial-gradient(circle at 50% 120%, #097482, #097482 10%, #0C8ACF 80%, #c6e1fa 100%); }
.main-color-swatch.red {   background-color: #ff0000 }
.main-color-swatch.red.grad {   background: radial-gradient(circle at 50% 120%, #bb1237, #bb1237 10%, #ff0000 80%, #f9edf0 100%); }
.main-color-swatch.green {   background-color: #139F40; }
.main-color-swatch.green.grad {   background: radial-gradient(circle at 50% 120%, #0a5322, #0a5322 10%, #139F40 80%, #6eee98 100%); }
.main-color-swatch.yellow {   background-color: #FADE85; }
.main-color-swatch.yellow.grad {   background: radial-gradient(circle at 50% 120%, #b38a07, #b38a07 10%, #FADE85 80%, #fcedbe 100%); }
.main-color-swatch.orange {   background-color: #FFA500; }
.main-color-swatch.orange.grad {   background: radial-gradient(circle at 50% 120%, #ac4d14, #ac4d14 10%, #FFA500 80%, #ff6ceb 100%); }
.main-color-swatch.purple { background-color: #9A23BF; }
.main-color-swatch.purple.grad {   background: radial-gradient(circle at 50% 120%, #3d0e4c, #3d0e4c 10%, #9A23BF 80%, #ead3f2 100%); }
.main-color-swatch.pink { background-color:#FF6FB5; }
.main-color-swatch.pink.grad {   background: radial-gradient(circle at 50% 120%, #6f0036, #6f0036 10%, #FF6FB5 80%, #ffd1e7 100%); }
.main-color-swatch.black { background-color: #222222 ; }
.main-color-swatch.black.grad {   background: radial-gradient(circle at 50% 120%, #000000, #000000 10%, #222222 80%, #bbbbbb 100%); }
.main-color-swatch.white { background-color:  #eeeeee ; }
.main-color-swatch.white.grad {   background: radial-gradient(circle at 50% 120%, #dddddd, #dddddd 10%, #eeeeee 80%, #efefef 100%); }
.main-color-swatch.gray {  background-color:#aaaaaa; }
.main-color-swatch.gray.grad {   background: radial-gradient(circle at 50% 120%, #888888, #888888 10%, #aaaaaa 80%, #eeeeee 100%); }
.main-color-swatch.brown {  background-color:#7f5c47; }
.main-color-swatch.brown.grad {   background: radial-gradient(circle at 50% 120%, #402e24, #402e24 10%, #7f5c47 80%, #ebe0da 100%); }

.modal-color-family li.item-thumb{margin-bottom:15px;}
.modal-color-family li.item-thumb .specific-color-wrap{border-top:1px solid #eee;padding-top:5px;margin-right:2px;}
.modal-color-family .specific-color-swatch{
		display: inline-block;
 	 	width:60px;
  		height: 34px;
  		margin-bottom:4px; 
  		margin-right:3px;
  		background-image: url("/html5board/s/i/swatch-icon-rectangular.png") !important;
  		color: #fff;
  	}
.modal-color-family .specific-color-name{font-size:.75rem;}