@import url("../vendor/remixicon/remixicon-dxLEGwN.css");

@font-face {
	font-family: 'Forza Bold';
	font-style: italic;
	font-weight: bolder;
	src: local('Forza-BoldItalic'), local('Forza-BoldItalic'), url("fonts/forza/Forza-BoldItalic-puZd-G7.otf") format('opentype');
}

@font-face {
	font-family: 'Forza Medium Italic';
	font-style: italic;
	font-weight: 600;
	src: local('Forza-MediumItalic'), local('Forza-MediumItalic'), url("fonts/forza/Forza-MediumItalic-I9UTJ6N.otf") format('opentype');
}

/**, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; image-rendering: -webkit-optimize-contrast; font-size: 16px; outline: none; box-shadow: none; font-family: 'Roboto', sans-serif; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; -webkit-text-size-adjust: 100%;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ul, ol{list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; -webkit-appearance: none; }
input:not([type='radio']):not([type='checkbox']), textarea, select{}
mark {background-color: transparent;font-weight: bold;color: inherit;}

.clearfix:before, .clearfix:after { content:""; display: table; clear: both; }
.clearfix {clear: both; overflow: hidden;}
.wrapper{max-width: 1080px;margin: 0 auto;width: 100%;position: relative;}*/

body {
	font-family: 'Roboto', sans-serif;
	background-color: #e7e7e7;
}

.tools {
	width: 300px;
	overflow: auto;
	position: absolute;
	top: 80px;
	right: 20px;
	bottom: 80px;
	background: #f7f7f7;
}

.views {
	/* background-color: #ccc; */
	position: absolute;
	right: 340px;
	top: 20px;
	bottom: 20px;
	left: 20px;
}

.views .canvas-wrap {
	position: absolute;
	max-width: 900px;
	width: 900px;
	height: 900px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
}

.views .canvas-wrap:first-child {
	display: block;
}

.images {
	position: absolute;
	top: -1px;
	left: -1px;
	overflow: hidden;
	width: 1px;
	height: 1px;
}

.toolbar-icons {
	float: left;
	width: 60px;
	background-color: white;
	height: 100%;
}

.toolbar-icons button {
	width: 60px;
	height: 60px;
	background-color: white;
	border: 0;
	padding: 0;
	display: block;
	cursor: pointer;
	outline: none;
	overflow: hidden;
}

.toolbar-icons button:hover {
	background-color: rgba(0,0,0,0.2);
}

.toolbar-icons button.active {
	background: #2176FF;
	background: #ffc107;
}

.toolbar-icons button:hover img, .toolbar-icons button.active img {
	position: relative;
	left: -60px;
}

.toolbar-panel {
	float: left;
	width: 240px;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	display: none;
}

.toolbar-panel.active {
	display: block;
}

.color {
	display: inline-block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	border-radius: 60px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	position: relative;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	margin-bottom: 5px;
}

.color.active {
	border: 2px solid #4db882;
}

.color.active::after {
	position: absolute;
	font-family: 'Material Icons';
	content: "\E5CA";
	display: block;
	top: -4px;
	right: -4px;
	border-radius: 30px;
	background: #4db882;
	width: 12px;
	height: 12px;
	color: white;
	font-size: 8px;
	font-weight: bolder;
	text-align: center;
	line-height: 12px;
}

.color-flash:after {
	position: absolute;
	width: 20px;
	height: 20px;
	content: "";
	background: url("../images/thunder-9PTBpxS.png") no-repeat center center;
}

.toolbar-panel h4 {
	font-size: 1.1rem;
	margin-top: 0.75rem;
	margin-bottom: 0.5rem;
}

.toolbar-panel .block:first-child h4 {
	margin-top: 0;
}

#main-preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #e7e7e7;
	text-align: center;
	line-height: 100%;
	z-index: 99999;
}

.main-preloader-inner {
	opacity: 0;
	position: relative;
	top: 50%;
	font-size: 18rem;
	font-family: 'Forza Bold', sans-serif;
	font-weight: bolder;
	margin-top: -9rem;
	color: rgba(0, 0, 0, 0.06);
	letter-spacing: -20px;
}

.preloader-percentage {
	line-height: 100%;
	position: relative;
	width: 100%;
	font-size: 18rem;
	font-family: 'Forza Bold', sans-serif;
	font-weight: bolder;
	margin-top: -9rem;
	color: rgba(0, 0, 0, 0.06);
	letter-spacing: -20px;
}

.preloader-percentage img {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -81px;
	margin-top: -16px;
}

#edit-text, #edit-options {
	position: absolute;
	background: #f7f7f7;
	width: 370px;
	z-index: 999999;
	padding: 10px 7px;
	border-radius: 3px;
	display: none;
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1);
	height: 140px;
}

#edit-text .arrow, #edit-options .arrow {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	left: 50%;
	margin-left: -6px;
	border-bottom-width: 0;
	border-top-color: #f7f7f7;
	bottom: -6px;
}

#edit-options {
	width: auto;
	height: auto;
}

#edit-text textarea {
	width: 100%;
	border-radius: 3px;
	border: 1px solid #ccc;
	height: 75px;
	padding: 5px 10px;
}

.edit-text-options {
	margin-top: 5px;
	display: flex;
	justify-content: space-between;
	flex-basis: 10px;
}

.edit-text-options .select:first-child {
	width: 100%;
}

.edit-text-options>.select {
	margin-right: 5px;
}

.select {
	background: white;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 5px;
	border-radius: 6px;
	cursor: pointer;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
	background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat calc(100% - 20px) #fff;
	margin-bottom: 5px;
}

.select-colors {
	background: white;
}

.select-options {
	overflow: hidden;
	position: absolute;
	display: none;
	background: white;
	z-index: 1000;
	border-radius: 6px;
	margin-top: 5px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
}

.select-option {
	padding: 0.5rem 1.5rem;
}

.text-option.selected-option {
	padding: 0 .5rem;
	line-height: 1.5rem;
}

.select-option:hover {
	background-color: rgba(0, 0, 0, 0.1);
	background: #ffc107;
}

.text-danger {
	color: #dc3545!important;
}

.color-fill {
	width: 30px;
	height: 25px;
	border: 1px solid rgba(0, 0, 0, 0.4);
}

.select-colors .select-options {
	position: absolute;
	width: 100%;
	max-width: 205px;
	padding: 1rem;
	padding-right: 0.90rem;
}

.steps {
	position: absolute;
	/*background-color: red;*/
	width: 300px;
	height: 50px;
	right: 20px;
	bottom: 20px;
	display: flex;
	justify-content: space-between;
	justify-content: flex-end;
}

.steps button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.steps button span {
	flex-basis: 300px;
}

.steps button:first-child {
	display: none;
	margin-right: 15px;
}

.steps button:last-child {
	display: none;
}

.steps .btn-finish {
}


.btn-switch {
	background: #aaa;
	height: 22px;
	width: 50px;
	position: relative;
	cursor: pointer;
	border-radius: 20px;
	display: inline-block;
	transition: all 150ms ease;
	position: relative;
	top: 4px;
	margin-left: 5px;
}

.btn-status {
	position: absolute;
	left: 2px;
	top: 2px;
	height: 18px;
	width: 20px;
	right: auto;
	background: grey;
	background: white;
	box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0);
	border-radius: 20px;
	transition: all 150ms ease;
}

.btn-switch.on {
	background: RGBA(255, 174, 31, 1.00);
}

.btn-switch.on .btn-status {
	left: 27px;
}

.dorsal {
	display: none;
}

.image-element {
	position: relative;
	cursor: pointer;
	margin-bottom: 10px;
	background: white;
	vertical-align: middle;
	height: 100%;
	width: 100%;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 4px;
}

.image-element:hover a {
	opacity: 1;
}

.image-element a {
	position: absolute;
	top: -5px;
	right: -5px;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: black;
	font-size: 20px;
	color: white;
	font-weight: bold;
	text-align: center;
	line-height: 18px;
	text-decoration: none;
	opacity: 0;
}

.image {
	float: left;
	padding: 5px;
	position: relative;
	width: 50%;
	height: 95px;
	border-radius: 4px;
}

header {
	height: 70px;
	padding: 10px 20px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 1100;
}

#form_upload_layer {
	display: none;
}

.cart a {
	display: inline-block;
	height: auto;
	color: black;
	position: relative;
	text-decoration: none;
}

.cart a i {
	vertical-align: middle;
	font-size: 1.5rem;
}

.cart a span {
	text-align: center;
	display: inline-block;
	top: 0;
	right: 0px;
	line-height: 20px;
	font-weight: bold;
	text-decoration: none;
	background: #ffc107;
	border-radius: 36px;
	width: auto;
	min-width: 36px;
	min-height: 36px;
	padding: 8px;
	color: black;
}

input {
	width: 100%;
	border: 1px solid #ccc;
	padding: 5px;
	margin-bottom: 0.5rem;
	border-radius: 3px;
}

.add_text, .add_logo {
	display: block;
	background: RGBA(255, 195, 0, 1.00);
	width: 100%;
	margin-bottom: 0.75rem;
	border: 0px;
	padding: 10px;
	transition: all 200ms ease;
	color: black;
	/*padding-bottom: 10px;*/
}

.add_text:hover, .add_logo:hover {
	background: RGBA(255, 174, 31, 1.00);
}

.add_text .material-icons, .add_logo .material-icons {
	color: #bb4d00;
	position: relative;
	vertical-align: bottom;
	top: 2px;
	display: none;
}

.help-text {
	text-align: center;
	font-size: 0.8rem;
}

hr {
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	margin: 15px 0;
}

.modal-backdrop {
	z-index: 9999999;
}

.modal {
	z-index: 99999999;
}

.modal-dialog, .modal-content {
	border-radius: 0px;
	border: 0;
}

.btn-primary {
	background: RGBA(255, 195, 0, 1.00);
	border: 0;
	color: black;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:hover:active, .btn-primary:hover:focus, .btn-primary:focus:active {
	background: RGBA(255, 174, 31, 1.00);
	color: black;
}

.loading {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(255, 185, 36, 0.9);
	background: rgba(0, 137, 175, 0.9);
	background: RGBA(255, 195, 0, .90);
	z-index: 99999999999;
}

.loader {
  display: inline-block;
  left: 50%;
  margin-left: -15px;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  top: 50%;
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}



.flags .dropdown-toggle::after, .select-font .dropdown-toggle::after, .select-color .dropdown-toggle::after {
	position: absolute;
	right: 15px;
	top: 15px;
}

.select-color .dropdown-toggle::after {
	width: 0;
	height: 0;
	margin: 0;
	border: 0;
}

.flags {
	text-align: left;
}

.flags .dropdown-toggle {
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.flags img {
	max-height: 15px;
	width: auto;
	margin-right: 10px;
	position: relative;
	top: -1px;
	border: 1px solid rgba(0, 0, 0, 0.15);
}

.flags .dropdown-toggle::after {
	position: absolute;
	right: 20px;
	top: 17px;
}

.flags .dropdown-menu {
	width: 200px;
	border: 0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 350px;
	height: 350px;
}

.flags .dropdown-item {
	padding: 10px;
}

.btn-next, .btn-prev {
	background: #28a745;
	color: white;
}

.btn-next:hover, .btn-prev:hover {
	color: white;
	background: #00872F;
}

.btn-finish {
	background: RGBA(255, 195, 0, 1.00);
	border: 0;
	color: black;
}

#sleeve-info {
	background: #000;
	color: white;
	padding: 5px;
	border-radius: 5px;
	text-align: center;
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	vertical-align: middle;
	display: none;
	font-size: 0.85rem;
	margin-left: -100px;
}

#sleeve-info i {
	position: relative;
	vertical-align: middle;
}