/* variables */
:root {
	--primary: #222;
	--primary-rgba: 249, 81, 114;
	--primary-dark: #444444;
	--secondary: #fff;
}

/* basic styling */
h1.warning {
    display: none;
}

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

#page-sidebar {
	right: 0;
	top: 0;
    background-color: var(--primary);
}

#page-sidebar .box {
    background: #fff;
	border: none;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
	border-radius: 2px;
}

#page-sidebar .box, #page-sidebar .box input[type=text] {
    font-size: 14px;
}

#page-sidebar .box header h1 {
	position: relative;
}

#page-sidebar .box header h1 img {
	position: absolute;
	right: 0;
	/*top: 5px;*/
}

#page-sidebar .box .character-limit {
	color: var(--primary);
}

#page-sidebar button, #page-sidebar div#add-image, #page-sidebar div#remove-background, .styled-select {
	background-image: url(images/sprite.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-color: var(--primary);
}

#page-sidebar button.rotate-left	{ background-position: -90px 0; }
#page-sidebar button.rotate-right	{ background-position: -120px 0; }
#page-sidebar button.move-up		{ background-position: -240px 0; }
#page-sidebar button.move-down		{ background-position: -270px 0; }
#page-sidebar button.move-left		{ background-position: -180px 0; }
#page-sidebar button.move-right		{ background-position: -210px 0; }
#page-sidebar button.zoom-in		{ background-position: 0 0; }
#page-sidebar button.zoom-out		{ background-position: -30px 0; }
#page-sidebar div#add-image			{ background-position: 0 -30px; }
#page-sidebar div#add-image div 	{ display: none; } /* remove text if on sprite */
#page-sidebar div#remove-background { background-position: -110px -30px; }
#page-sidebar button.reset-full		{ background-position: -330px 0; }
#page-sidebar div.quantity-inc		{ background-position: -390px 0; }
#page-sidebar div.quantity-dec		{ background-position: -360px 0; }
#image-areas-container button[title="Reset Zoom"] { background-position: -60px 0px; }
#current-text-area-container button[title="Reset Rotation"], #image-areas-container button[title="Reset Rotation"] { background-position: -150px 0px; }
#current-text-area-container button[title="Reset Position"], #image-areas-container button[title="Reset Position"] { background-position: -300px 0px; }
.styled-select 						{ background-position: right -66px; }

.styled-select select {
	color: var(--secondary);
	cursor: pointer;
}

.styled-select ul {
	background: var(--primary);
	max-height: 270px;
}

.styled-select img {
	filter: invert(100%);
	-webkit-filter: invert(100%);
}

.styled-select ul li:hover, .styled-select option:hover {
	background: var(--primary);
}

.styled-select ul li img {
	width: 60%;
}

.styled-select ul li:hover img {
	filter: none;
	-webkit-filter: none;
}

#page-sidebar .sp-picker-container {
	border-left: none;
}

#page-sidebar #add-to-cart {
	background: #fff000;
	color: #000;
	border-color: #000;
	border-radius: 15px;
	border-width: 1px;
}

#page-sidebar #add-to-cart .add-to-cart-icon {
	display: none;
}

/* edge overrides */
@supports (-ms-accelerator:true) {
	.styled-select, .styled-select:hover { background-color: #FFF; background-position: right -137px; }
	.styled-select select, .styled-select option { color: var(--secondary); }
	.styled-select ul { background-color: #FFF; }
	.styled-select img { filter: none; }
}

/* responsive */
@media (max-width: 767px){ 
    body { 
        overflow-x: hidden; 
        overflow-y: scroll; 
    }

    #page-content { 
        width: 100% !important; 
    }

    #page-sidebar {
        left: 0;
        width: 100% !important;
        margin-bottom: 10px;
    }	

	#add-to-cart {
		width: auto !important;
	}
}

@media (min-width: 768px){
	#page-sidebar {
		bottom: 0;
	}
}

body {
	font-family: sans-serif;
}

header h1 {
	font-family: sans-serif;
}

#product-info div {
	display: none;
}

@media (min-width: 768px){
	#product-info {
        height: 80px;
    }
}

.box header h1 img {
	top: 4px; /* different due to font used */
}