*, *:before, *:after {
	/* box-sizing: content-box; */
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
html {
	line-height: normal;
}
body {
	background-color: #222;
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
    overflow-x: hidden !important;
    font-family: 'Roboto', sans-serif;
    overscroll-behavior: contain;
    overflow-y: hidden;
}
#drawing-wrapper {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
a.ul {
	text-decoration: underline;
}
.bg-white {
	background-color: #FFF;
}
.brd {
	border-radius: 8px;
	overflow: hidden;
}
.progress {
	height: 5px;
}
.pw_report_ad_container {
	display: block !important;
}
#ad-leaderboard-one {
	margin-bottom: 10px;
}
#append-mobile-ad, #append-mobile-ad-pos {
	height: 50px;
	padding: 0px 10px;
	margin-bottom: 10px;
	overflow: hidden;
	width: 100%;
}
#append-mobile-ad {
	position: fixed;
	z-index: 12;
	display: none;
}
@media (width:768px) {
	#append-mobile-ad-pos {
		height: 90px;
	}
}
@media (max-width:768px) {
	#append-mobile-ad {
		display: block;
	}
}
@media (max-width:768px) and (min-width:450px) {
	#append-mobile-ad {
		height: 60px;
	}
}
.pp {
	-ms-interpolation-mode: nearest-neighbor;
	    image-rendering: -webkit-optimize-contrast;
	    image-rendering: -moz-crisp-edges;
	    image-rendering: -o-pixelated;
	    image-rendering: pixelated;
}
/* BTN */
.btn, 
form .btn {
	font-size: 14px;
	border-radius: 4px;
}
#panning-active {
	position: fixed;
    right: 20px;
    top: 60px;
    z-index: 13;
    display: none;
}
.btn, 
.btn-large {
	font-weight: normal;
    padding: 3px 30px;
    height: auto;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,20%);
}
.btn:hover, 
.btn-large:hover,
.upp:hover {
    -webkit-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !important;
            box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !important;
}
.btn.secondary {
	background-color: #444;
	color: #FFF;
}
.more-drop .more-body {
	border: 2px solid #444;
	border-radius: 0 0 4px 4px;
}
.rl {
	position: relative;
}
.align-items-center {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center
}
.justify-content-center {
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.t-ull {
	text-decoration: underline;
}
.t-ul:hover {
	text-decoration: underline;
}
.t-uln:hover {
	text-decoration: none;
}
.full {
	width: 100%;
}
.n-lh {
	line-height: 0;
}
.smrt {
	margin-right: 5px;
}
.fll {
	width: 100%;
}
.op-q {
	opacity: .75;
}
.op-h {
	opacity: .5;
}
.f-bold, .bld {
	font-weight: bold;
}
.lbld {
	font-weight: 500;
}
.f-xlg {
	font-size: 20px;
}
.f-lg {
	font-size: 18px;
}
.f-nm {
	font-size: 16px;
}
.f-sm {
	font-size: 14px;
}
.f-xsm {
	font-size: 12px;
}
.f-xxsm {
	font-size: 10px;
}
.mt-3 {
	margin-top: 15px;
}
.mt-2 {
	margin-top: 10px;
}
.mb-3 {
	margin-bottom: 15px;
}
.mb-4 {
	margin-bottom: 20px;
}
.mb-5 {
	margin-bottom: 25px;
}
.mb-2 {
	margin-bottom: 10px;
}
.mb-0 {
	margin-bottom: 0 !important;
}
.mb-1 {
	margin-bottom: 5px;
}
.mt-1 {
	margin-top: 5px;
}
.mr-3 {
	margin-right: 15px;
}
.mr-2 {
	margin-right: 10px;
}
.mr-1 {
	margin-right: 5px;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.text-center {
	text-align: center;
}
.cp {
	cursor: pointer;
}
.nowrap {
	white-space: nowrap
}
.l-op {
	opacity: 0.75;
}
.h-op {
	opacity: 0.5;
}
.toe {
	-o-text-overflow: ellipsis;
       text-overflow: ellipsis;
}
.color-white {
	color: #FFF;
}
.mgbtmm {
	margin-bottom: 20px;
} 
.fixed-row {
    margin-left: -10px;
    margin-right: -10px;
}
.clearfix:after {
    clear: both;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
#user-notifications-dropdown .fa {
	font-size: 16px;
}
/* Canvas Tiles */
.canvas_tile {
	position: absolute;
	left: 0;
	top: 0;
	-ms-interpolation-mode: nearest-neighbor;
	    image-rendering: -webkit-optimize-contrast;
	    image-rendering: -moz-crisp-edges;
	    image-rendering: -o-pixelated;
	    image-rendering: pixelated;
	background-color: #FFF;
}
.canvas_tile#canvas_canvas_tile_0 {
	left: -100%;
	top: -100%;
}
.canvas_tile#canvas_canvas_tile_1 {
	top: -100%;
	left: 0;
}
.canvas_tile#canvas_canvas_tile_2 {
	top: -100%;
	left: 100%;
}
.canvas_tile#canvas_canvas_tile_3 {
	top: 0;
	left: -100%;
}
.canvas_tile#canvas_canvas_tile_4 {
	top: 0;
	left: 100%;
}
.canvas_tile#canvas_canvas_tile_5 {
	top: 100%;
	left: -100%;
}
.canvas_tile#canvas_canvas_tile_6 {
	top: 100%;
	left: 0;
}
.canvas_tile#canvas_canvas_tile_7 {
	top: 100%;
	left: 100%;
}
#frame-tiles {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#frame-tiles .frame-tile {
	position: absolute;
	top: 0;
	cursor: pointer;
	background-color: #FFF;
	opacity: 0.75;
	width: 100%;
}
#frame-tiles .frame-tile.pre {
	left: -100%;
}
#frame-tiles .frame-tile.nex {
	right: -100%;
}
#frame-tiles .frame-tile:hover {
	opacity: 0.8;
}
#frame-tiles .frame-tile .frame-tile-item {
	position: relative;
	z-index: 2;
}
#frame-tiles .frame-bg {
	background-size: 100%;
	opacity: .15;
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.share-wrapper .share-items .share-button-image {
    padding: 8px 10px;
    background-color: #999;
    display: inline-block;
    vertical-align: middle;
    color: #FFF;
    border-radius: 4px;
}
.share-wrapper .share-items .share-button-image.facebook, 
.facebook-btn, .facebook-btn:hover {
    background-color: #3b5999;
}
.share-wrapper .share-items .share-button-image.twitter, 
.twitter-btn, .twitter-btn:hover {
    background-color: #55acee;
    color: #FFF;
}
.share-wrapper .share-items .share-button-image.google {
    background-color: #dd4b39;
}
.share-wrapper .share-items .share-button-image.pinterest {
    background-color: #bd081c;
}
.share-wrapper .share-items .share-button-image.reddit {
    background-color: #ff5700;
}
.share-wrapper .share-items .share-button-image.tumblr {
    background-color: #34465d;
}
.panel .panel-check {
	font-size: 10px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    position: relative;
    width: auto;
    text-align: left;
}
.panel-select .tool-title:first-child {
	padding-top: 0;
}
.modal-helper {
	margin-bottom: 15px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
}
.lighter .modal-helper {
	color: #000;
}
.beta-text {
	font-size: 10px;
    color: #FFC107;
    vertical-align: top;
}
select {
	border: 1px solid #ccc;
	border-radius: 4px;
}
.panel-heading {
	font-size: 22px;
	font-weight: 900;
	margin-bottom: 0;
}
.simple-gallery-image {
	border-radius: 8px;
	border: 2px solid #d7dde0;
}
.upp {
	position: relative;
	top: 0;
    -webkit-transition: all 0.10s ease-in-out;
    -o-transition: all 0.10s ease-in-out;
    transition: all 0.10s ease-in-out;
}
.waves-effect {
	-webkit-transition: all .05s ease-out;
	-o-transition: all .05s ease-out;
	transition: all .05s ease-out;
}
.upp:hover {
	-webkit-box-shadow: 0 1px 9px 0 rgba(0,0,0,50%);
    box-shadow: 0 1px 9px 0 rgba(0,0,0,.1) !important;
    top: -3px;
}
.callout {
	padding: 10px;
    border: 2px solid #2979ff;
    background-color: #FFF;
    border-radius: 8px;
    color: #333;
    margin-bottom: 15px;
}
.callout .text-callout {
	color: #2979ff;
	font-weight: 500;
}
.callout a:hover {
	text-decoration: underline;
}
.nomg {
	margin: 0 !important;
}
.fmgtp {
	margin-top: 5px !important;
}
.fa.sp {
	margin-right: 10px;
}
.switch label .lever {
	margin: 0;
	height: 22px;
	background-color: #555;
}
.switch label input[type=checkbox]:checked+.lever:after {
	left: 20px;
}
.switch label input[type=checkbox]:checked+.lever:after {
	background-color: #FFF;
}
.switch label .lever:after {
	top: 0px;
	left: 0;
}
.switch label input[type=checkbox]:checked+.lever {
	background-color: #2979ff;
}
.noselect, img, a {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */ /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
#canvas_display, #nav-canvas, .navigation-scroller .nav-canvas-img, #canvas_grid, .canvas_grid_image, .progress-images {
	-ms-interpolation-mode: -webkit-optimize-contrast;
	image-rendering: nearest-neighbor;
	image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: -o-pixelated;
    -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    -ms-touch-action: none;
        touch-action: none;
}
.progress-images-container {
	text-align: center;
}
.progress-images-container .progress-images {
	width: 100%;
}
.inline-btns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: 0 10px;
}
.inline-btns .options-app-button {
	width: 100%;
	border-radius: 4px;
	text-align: center;
	padding: 10px 0;
	color: #FFF;
}
.inline-set {
	margin: 0 10px;
}
.inline-set .options-app-button {
	display: inline-block;
	border-radius: 4px;
	text-align: center;
	padding: 10px;
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
}
.inline-btns .options-app-button:hover, .inline-set .options-app-button:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.2);
}
.tool-helper-wrapper .toggle-label-helper {
	padding: 0 0 10px 0 !important;
}
span.code-key {
    color: #2979ff;
    background-color: #EEE;
    padding: 3px;
    font-size: 12px;
    border-radius: 2px;
}
#nav-canvas {
	width: 100%;
	background-color: #FFF;
}
::-webkit-scrollbar {
	width: 15px;
	height: 15px;
}
.sm-scroll::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-button {
	width: 0px;
	height: 0px;
}
::-webkit-scrollbar-thumb {
	background: #aeaeae;
	border: 0px none #ffffff;
	border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
	background: #dbdbdb;
}
::-webkit-scrollbar-thumb:active {
	background: #ffffff;
}
::-webkit-scrollbar-track {
	background: #3e3e3e;
	border: 0px none #ffffff;
}
::-webkit-scrollbar-track:hover {
	background: #444;
}
::-webkit-scrollbar-track:active {
	background: #222;
}
::-webkit-scrollbar-corner {
	background: transparent;
}
.hidden-gif-download.hide {
	display: none;
}
.alert-response-container {
	position: fixed;
	top: 60px;
    right: 250px;
	z-index: 13;
	display: none;
}
.alert-response-container.active {
	display: block;
}
.alert-response-container .alert-response-wrapper {
	position: relative;
	left: 0;
	top: 0;
	padding: 10px;
	border-radius: 4px;
	width: 300px;
	color: #FFF;
	font-size: 16px;
    border-left: 5px solid #f44336;
    background-color: #444;
    -webkit-box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
            box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
}
.alert-response-container .alert-response-wrapper.success {
	border-color: #36f482;
}
.alert-response-container .alert-response-wrapper .alert-response {
	width: 90%;
	display: inline-block;
	vertical-align: top;
	line-height: 22px;
}
.alert-response-container .alert-response-wrapper .alert-close {
	width: 10%;
	float: right;
	display: inline-block;
	vertical-align: top;
}
.alert-response-container .alert-response-wrapper .alert-close:hover {
	color: #CCC;
	cursor: pointer;
}
.bbottom {
	border-bottom: thin solid #333131;
}
.bbottom:after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #FFF;
    position: absolute;
    left: 0;
    bottom: 1px;
    opacity: .05;
}
.fa-small {
	font-size: 14px !important;
}
.btn:hover {
	-webkit-transform: translateY(-2px);
	    -ms-transform: translateY(-2px);
	        transform: translateY(-2px);
}
select {
	display: block;
	width: auto;
	height: auto;
}
select.header-app-button {
	height: auto;
}
input:not([type]):focus:not([readonly]), input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
	border-bottom: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}
.popup-container-wrapper input:not([type]), 
.popup-container-wrapper input[type=text], 
.popup-container-wrapper input[type=number], 
.popup-container-wrapper textarea.materialize-textarea,
input[type=text].normal-input {
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
	margin: 0;
	height: auto;
}
.popup-container-wrapper input:not([type]):focus:not([readonly]), 
.popup-container-wrapper input[type=text]:focus:not([readonly]), 
.popup-container-wrapper input[type=number]:focus:not([readonly]), 
.popup-container-wrapper textarea.materialize-textarea:focus:not([readonly]), 
input[type=text].normal-input:focus,
.form-submit-ct textarea:focus,
.popup-container-wrapper select:focus { 
	border: 1px solid #2979ff !important;
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.popup-container-wrapper input[type=number].small {
	padding: 0 5px;
	width: 50px;
}
[type="checkbox"].filled-in:checked+label:after {
	border: 2px solid #2979FF;
    background-color: #2979FF;
}
input[type=range]+.thumb.active {
	display: none;
}
input[type=range] {
	margin: 0;
}
label {
	font-size: 14px;
	line-height: normal;
}
.drawing-wrapper {
	display: inline-block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	height: 100%;
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
    -ms-flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            flex-direction: column;
    overflow-x: hidden;
}	
.b-top .drawing-wrapper {
	height: calc(100% - 110px);
}
#drawing-wrapper.fullscreen {
	position: fixed;
	left: 0;
	top: 0;
}
.group {
	padding: 10px;
	text-align: center;
	border: thin solid #000;
	display: inline-block;
}
.group .group-header {
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
}
canvas, img {
}
#layer_container .layer-list {
	padding: 10px;
	border-bottom: thin solid #CCC;
}
#toolbar {
	width: 100%;
	height: 40px; 
	background-color: #333;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	        align-items: center;
	position: relative;
	z-index: 12;
}
/* Tool Toolbar */
#drawing-tool-options {
	height: 30px;
    background-color: #222;
    z-index: 11;
    color: #FFF;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    border-left: 1px solid rgba(0, 0, 0, 0.5);
    border-right: 1px solid rgba(0, 0, 0, 0.5);
    font-size: 8px;
    position: fixed;
    width: 100%;
    top: 39px;
    left: 100px;
}
#drawing-tool-options .tools-bdy {
	height: 28px;
}
#drawing-tool-options #tool-option-name {
	text-transform: uppercase;
}
#drawing-tool-options #tool-option-appended {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
#drawing-tool-options #tool-option-appended .appened-options {
	margin-right: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
#drawing-tool-options #tool-option-appended .appened-options .tool-title {
    padding: 0;
    margin: 0;
    line-height: normal;
}
#drawing-tool-options #tool-option-appended .appened-options .range-wrapper {
	padding: 0px 0;
    margin-left: 5px;
    position: relative;
    top: -1px;
    margin-top: 0;
}
#drawing-tool-options #tool-option-appended .appened-options .tool-toggle {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-left: 20px;
}
#drawing-tool-options #tool-option-appended .toggle-label-helper {
	display: none;
}
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:not(:checked)+label:after, 
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:checked+label:after, 
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:checked+label:before,
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:not(:checked)+label:after, 
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:checked+label:after, 
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:checked+label:before {
	top: 5px;
}
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:not(:checked)+label:after,
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:checked+label:after {
	height: 15px;
    width: 15px;
}
#drawing-tool-options #tool-option-appended [type="checkbox"].filled-in:checked+label:before {
	width: 6px;
    height: 9px;
}
#drawing-tool-options #tool-option-appended .defaul-app-button {
	padding: 4px 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
    white-space: nowrap;
    font-size: 10px;
    position: relative;
}
#drawing-tool-options #tool-option-appended .defaul-app-button .thumb-preview {
	height: 18px;
	width: 20px;
	margin-bottom: 0;
	margin-right: 5px;
}
#drawing-tool-options #tool-option-appended .tb-h {
	display: none;
}
#drawing-tool-options #tool-option-appended .brush-canvas-wrapper {
	height: 20px;
    margin: 0;
    width: 30px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 0;
}
#drawing-tool-options #tool-option-appended .brush-canvas-wrapper img {
	max-width: 100%;
    max-height: 100%;
}
#drawing-tool-options #tool-option-appended .list-selection-images {
	width: 110px;
}
#drawing-tool-options #tool-option-appended #fonts-toolbar-options {
	position: absolute;
    width: 110px;
    top: 5px;
}
#drawing-tool-options #tool-option-appended .list-selection-images .preview-font {
	display: none;
}
#drawing-tool-options #tool-option-appended .list-selection-images .preview-font.active {
	display: block;
	background-color: inherit;
}
#drawing-tool-options #tool-option-appended .list-selection-images .preview-font img {
	height: 10px;
}
#drawing-tool-options #tool-option-appended #fonts-toolbar-options.active {
	padding-top: 20px;
	background-color: #FFF;
}
#drawing-tool-options #tool-option-appended #fonts-toolbar-options.active .preview-font {
	display: block;
}
#drawing-tool-options #tool-option-appended #fonts-toolbar-options.active .preview-font.active {
	background-color: #FFF;
}
#drawing-tool-options #tool-option-appended #fonts-toolbar-options.active .preview-font.active img {
	-webkit-filter: inherit;
	        filter: inherit;
}
#drawing-tool-options #tool-option-appended select {
	padding: 0px 10px;
    position: relative;
    top: -1px;
}
#drawing-tool-options #tool-option-appended .no-o {
	text-transform: uppercase;
	opacity: .5;
}
#footer-das {
	display: none;
	position: fixed;
    bottom: 10px;
    width: 100%;
    z-index: 2;
    height: 100px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    z-index: 1;
}
#footer-das .f-ad {
	display: block;
	width: 720px;
	height: 90px;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.05);
	display: inline-flex;
	align-items: start;
	justify-content: center;
}
#footer-das .footer-das-ap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.b-top #footer-das {
	display: block;
}
/* Tool Toolbar End */
#frames-placement {
	width: 100%;
	background-color: #333;
	margin-top: 0;
	z-index: 12;
	position: fixed;
	bottom: 0;
	margin-bottom: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.5);
}
.b-top #frames-placement {
	bottom: 110px;
}
#frames-placement #frames-header {
	padding: 10px;
	color: #FFF;
	text-transform: uppercase;
	font-size: 12px;
}
#frames-placement #frames-wrapper {
	height: 150px;
}
#drawing-container {
	height: 100%;
	width: 100%;
	background-color: #222;
	overflow: hidden;
	position: relative;
}
#drawing-container {
	width: 100%;
	height: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
}
#drawing-container #left-sidebar {
	width: 100px;
	background-color: #333;
	position: relative;
    z-index: 11;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
}
#drawing-container #left-sidebar #tool-multi {
	display: none;
	left: 100px;
	position: fixed;
	background-color: #333;
    z-index: 11;
}
#drawing-container #left-sidebar .tool-multi-opt {
	width: 50px;
    height: 48px;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    cursor: pointer;
}
#drawing-container #left-sidebar .tool-multi-opt img {
	width: 32px;
	height: 32px;
}
#drawing-container #left-sidebar .tool-multi-opt:hover {
	background-color: rgba(255,255,255,0.2);
}
#drawing-container #right-sidebar {
	width: 230px;
    z-index: 12;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
    background-color: #141518;
    position: relative;
}
/* Large Screens */
@media only screen and (min-width : 1400px) { 
	#drawing-container #right-sidebar {
		width: 250px;
	}
}
#drawing-container .app-sidebar {
	overflow-y: auto !important;
	padding-bottom: 50px;
}
#drawing-container #drawing-canvas-conatiner {
	-ms-flex: 1;
	    -webkit-box-flex: 1;
	        flex: 1;
	position: relative;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	        align-items: center;
    overflow-y: auto;
    overflow-x: auto;
    max-width: 100%;
    max-height: 100%;
    background-color: #141518;
    overflow: auto;
    height: calc(100% - 66px);
    cursor: default;
    margin-top: 30px;
    line-height: 0;
}
#drawing-container #drawing-canvas-conatiner.full {
	height: calc(100% - 30px);
}
#drawing-container #drawing-canvas-conatiner.css-zoom {
	display: block;
}
#select-size-display {
	padding: 12px 12px;
    z-index: 11;
    background-color: #333;
    border-radius: 6px;
    position: absolute;
    left: 15px;
    bottom: 105px;
    left: 160px;
    color: #FFF;
    text-transform: uppercase;
    font-size: 12px;
    display: none;
}
.frame-locked #select-size-display {
	bottom: 225px;
}
#select-size-display span {
	font-weight: bold;
}
.screen-sizer {
	overflow-y: auto;
}
.sidebar-tab-container {
	width: 100%;
	position: relative;
}
.sidebar-tab-container .sidebar-tabs-wrapper {
	width: 30px;
	height: 0;
	background-color: #333;
	color: #FFF;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 30px;
	height: 90px;
    padding: 15px 0;
	font-size: 12px;
	text-transform: uppercase;
	background-color: rgba(255, 255, 255, 0.05);
	overflow: hidden;
	margin-top: 1px;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs.hidden {
	display: none;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs span {
	-webkit-writing-mode: vertical-rl;
	    -ms-writing-mode: tb-rl;
	        writing-mode: vertical-rl;
	-webkit-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	        transform: rotate(180deg);
}
.ie .sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs span {
	-webkit-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	        transform: rotate(-90deg);
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs:last-child {
	border-radius: 0 0 0 4px;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.1);
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-notification.active {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 25px;
	background-color: #2084fc;
    margin-bottom: 7px;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-notification.new.active {
	background-color: #fca520;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-notification.active:after {
	content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: #2084fc;
    border-radius: 50%;
    -webkit-animation-name: pulse;
            animation-name: pulse;
    -webkit-animation-duration: 2s;
            animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(.4,0,.2,1);
            animation-timing-function: cubic-bezier(.4,0,.2,1);
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs .sidebar-tab-notification.new.active:after {
	background: #fca520;
}
@-webkit-keyframes pulse {
    0%,70% {
        -webkit-transform: scale(1,1);
                transform: scale(1,1);
        opacity: 1
    }

    35% {
        -webkit-transform: scale(2,2);
                transform: scale(2,2);
        opacity: .35
    }
}
@keyframes pulse {
    0%,70% {
        -webkit-transform: scale(1,1);
                transform: scale(1,1);
        opacity: 1
    }

    35% {
        -webkit-transform: scale(2,2);
                transform: scale(2,2);
        opacity: .35
    }
}
.ie .sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs span .sidebar-tab-notification {
	display: none !important;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs.active {
	background-color: #333;
}
.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs.active:hover {
	background-color: #333;
}
.sidebar-tab-container .sidebar-content-wrapper {
	width: calc(100% - 30px);
	margin-left: 30px;
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #333;
}
.sidebar-tab-container .sidebar-content-wrapper .sidebar-content {
	display: none;
}
.sidebar-tab-container .sidebar-content-wrapper .sidebar-content.force {
	display: block !important;
	padding: 0;
}
.sidebar-tab-container .sidebar-content-wrapper .sidebar-content .pad {
	padding: 15px;
}
.sidebar-tab-container .sidebar-content-wrapper .sidebar-content .pad.nt {
	padding-top: 0;
}
.sidebar-tab-container .sidebar-content-wrapper .sidebar-content.active {
	display: block;
}
.sidebar-tab-container .sidebar-content-wrapper .always-sidebar-content {
	border-top: 2px solid rgb(20, 21, 24);
	padding-bottom: 10px;
}
.hidden-canvas {
	visibility: hidden;
}
.panel {
	overflow: hidden;
	width: 100%;
	margin-bottom: 1px;
}
.panel.brb {
	border-bottom: 2px solid #111;
}
.panel .panel-header {
	padding: 10px 0;
	width: 100%;
	color: rgba(255,255,255,1);
	text-transform: uppercase;
	font-size: 10px;
	text-align: center;
	position: relative;
	max-height: 35px;
	overflow: hidden;
}
.panel .panel-container {
	overflow-y: auto;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
}
.panel-section {
	margin-top: 10px;
}
.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0;
}
.panel #layers-container {
	min-height: 110px;
}
.panel .panel-resize {
	position: relative;
}
.panel .panel-resize.layers-container {
	min-height: 110px;
}
.panel .panel-resize.color-wrapper {
	min-height: 125px;
}
.panel .panel-resize .panel-container {
	position: absolute;
	height: 100%;
}
@media (max-width: 768px) and (min-width: 278px) { 
	.panel .panel-resize .panel-container {
		position: relative;
		height: 100%;
	}
}
.panel #color-container {
	min-height: 120px;
	width: 100%;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
}
.panel .panel-header select#preview-size-change {
	height: calc(100% + 8px);
    position: absolute;
    padding: 0 10px !important;
    font-size: 12px;
}
.section {
	padding: 0;
	overflow: hidden;
	height: auto;
	width: 100%;
}
.sidebar-content.active .section {
	height: auto !important;
}
.sidebar-reference.section .section-y {
	overflow: auto;
	height: calc(100% - 45px);
}
.section.fixed {
	background-color: #333;
    border-radius: 4px;
    right: 265px;
    top: 55px;
    max-width: 200px;
    border: thin solid rgba(0, 0, 0, 0.5);
    z-index: 3;
}
.section.fixed.sidebar-reference {
	width: 400px;
	max-width: 100%;
	max-height: 100%;
	min-width: 200px;
	min-height: 115px;
}
.section .section-content .appened-options {
	margin-bottom: 10px;
}
.section .section-content .appened-options .tool-title {
	padding-top: 0;
}
.section .section-content .appened-options:last-child {
	margin-bottom: 0;
}
.section  .section-content .text {
	color: #FFF;
	padding: 10px;
	font-size: 10px;
	text-transform: uppercase;
}
.section .section-content.max {
	max-height: 300px;
	overflow-y: auto;
}
.section .select-back {
	background-color: #444;
}
.section .select-back:hover, .section .select-back:focus {
	background-color: #494949;
}
.section .section-title {
	text-align: center;
	color: #FFF;
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 10px;
	text-transform: uppercase;
}
.section .section-title.brt {
	border-top: 2px solid rgb(20, 21, 24);
    padding-top: 10px;
}
.section .section-header {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	overflow: hidden;
	color: #FFF;
	border-bottom: thin solid rgba(0, 0, 0, 0.25);
}
.section.fixed .section-header {
	cursor: move;
}
.section .section-header .section-move  {
	display: none;
}
.section .section-header .section-close {
	opacity: 0;
	cursor: pointer;
}
.section .section-header .section-extend {
	display: block;
}
.section.fixed .section-header .section-extend {
	display: none;
}
.section.fixed .section-header .section-move {
	display: none;
}
.section.fixed .section-header .section-close {
	opacity: 1;
}
.section .section-header .section-header-text {
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	height: 42px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.section.fixed .section-header .section-header-text {
	text-align: left;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: start;
	padding-left: 15px;
}
.section .section-header .section-header-text.icon-move {
	display: none;
}
.section.fixed .section-header .section-header-text.icon-move {
	display: inline-block;
	margin-right: 5px;
}
.section.fixed .section-header .section-header-text:before {
    content: "\f0c9";
    margin-right: 15px;
    font: normal normal normal 14px/1 FontAwesome;
}
.section .section-icon {
	font-size: 14px;
	position: relative;
    top: 0px;
    padding: 10px 15px;
    color: #FFF;
    z-index: 2;
}
.section .section-icon:hover {
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.1);
	text-decoration: none;
}
.section .section-spacing {
	padding: 0 15px;
}
.section .section-y {
	padding: 15px;
}
.header-app-button.none-button.frames-title {
	padding: 0 15px !important;
    height: 100%;
    position: relative;
    cursor: pointer;
    position: relative;
    top: -2px;
}
.layer-list,
.layer-placeholder {
	color: #FFF;
	font-size: 12px;
	height: 34px;
	text-transform: uppercase;
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	white-space: nowrap;
}
.layer-placeholder {
    background-color: rgb(255 255 255 / 15%);
}
.q-op {
	opacity: .25;
}
.layer-list .layer-viewable, 
.layer-list .layer-inline-item, 
.layer-outline {
	padding: 10px 8px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.layer-list .layer-viewable:hover, 
.layer-list .layer-inline-item:hover,
.layer-options .opt:hover, 
.layer-outline:hover {
	background-color: rgba(255,255,255,0.1);
	cursor: pointer;
}
.layer-list.bl .layer-viewable {
	background-color: #2084fc;
}
.layer-list .layer-options {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	position: absolute;
    right: 20px;
}
.layer-list .layer-preview {
	background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
	width: 40px;
	height: 34px;
	background-color: #FFF;
	margin-right: 3px;
	cursor: move;
}
@media only screen and (max-width : 1400px) { 
	.layer-list .layer-preview {
		width: 34px;
	}
}
.layer-list .layer-icon {
	padding: 3px 4px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.layer-list .layer-icon.fl {
	-webkit-transform: scaleX(-1);
	    -ms-transform: scaleX(-1);
	        transform: scaleX(-1);
}
.layer-list .layer-name {
	padding: 10px 5px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    -ms-flex: 1;
        -webkit-box-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.range-change {
	width: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-box-pack: justify;
	        justify-content: space-between;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	        align-items: center;
	padding: 5px 15px 5px 15px;
}
.range-change.sl {
	padding-left: 10px;
}
.range-change .range-number {
	display: inline-block;
	font-size: 12px;
	color: #FFF;
	position: relative;
	top: 1px;
}
#right-sidebar .range-change .range-number {
	width: 5px;
}
#pixel-size-adjust .range-change .range-number {
	top: 0;
	font-size: 10px;
}
.range-change .range-number#opacity-layer-number {
	width: 30px;
}
#opacity-layer {
	width: 100%;
}
.lighter .range-change .range-number {
	color: #000;
}
.range-change .range-range {
	-ms-flex: 1;
	    -webkit-box-flex: 1;
	        flex: 1;
	width: 100%;
	margin-left: 10px;
}
.layer-list:hover {
	background-color: rgba(255,255,255,0.05);
	cursor: pointer;
}
.layer-list.active {
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}
.layer-options .opt {
	padding: 10px;
}
.layer-list.bl .layer-viewable:hover {
	background-color: #146ad1;
}
.panel-buttons {
	border-top: thin solid rgba(0,0,0,0.2);
}
.header-app-button {
	padding: 10px;
	font-size: 12px;
	display: inline-block;
	color: #FFF;
	margin: -10px 0;
	margin-left: 10px;
	text-transform: none;
	position: relative;
	z-index: 12;
	height: 100%;
	white-space: nowrap;
}
.header-app-button .sub-menu-wrapper,
.notifications-dropdown {
	position: absolute;
	display: none;
}
#toolbar.sub-open .header-app-button.active .sub-menu-wrapper,
.notifications-dropdown.active {
	display: inline-block;
	background-color: #444;
	min-width: 100px;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 250px;
    border-radius: 0 4px 4px 4px;
    -webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,0.15), 0 2px 4px 0 rgba(0,0,0,0.16);
            box-shadow: 0 1px 0 0 rgba(0,0,0,0.15), 0 2px 4px 0 rgba(0,0,0,0.16);
}
.header-app-button .sub-menu-wrapper.bg-white {
	background-color: #FFF !important;
}
.notifications-dropdown.active {
	left: inherit;
	right: 0;
	min-width: 350px;
	background-color: #FFF;
	border-radius: 4px 0 4px 4px;
}
.notifications-dropdown time {
	color: #777;
    font-size: 12px;
    margin-top: 5px;
}
.nav-dropdown .count-wrapper {
	position: absolute;
    top: 0px;
    right: -3px;
    font-size: 10px;
    padding: 3px 7px;
    background-color: #2084fc;
    border-radius: 50px;
    margin: 5px 5px;
}
.header-menu li.pad.menu-button-main div.count-wrapper:hover {
	color: #FFF !important;
}
.header-menu li.pad.menu-button-main.notifications-dropdown a {
	color: #000 !important;
}
.header-menu li.pad.menu-button-main:hover .notifications-dropdown a:hover {
	text-decoration: underline;
}
.get-notifications {
	padding: 10px 15px;
}
.notifications-header {
	padding: 10px;
	border-bottom: thin solid #EEE;
	color: #000 !important;
}
.notification-list-container {
	max-height: 450px;
	overflow-y: auto;
}
.notification-item {
	font-size: 14px;
    color: #000;
    border-bottom: thin solid #EEE;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-transform: none;
}
.notification-item a {
	color: #000;
}
.notification-item:hover {
	background-color: #EEE;
}
.notification-item .full {
	padding-left: 10px;
	line-height: 20px;
}
.notifications-loading-text {
	padding: 10px;
	color: #777 !important;
}
.notifications-footer {
	padding: 15px 10px;
    display: block;
    color: #000;
}
.notifications-footer:hover {
	background-color: #EEE;
}
.nav-dropdown {
	padding: 0 !important;
}
.nav-dropdown .dropdown-toggle {
	color: #FFF;
}
.header-app-button .sub-menu-wrapper .sub-menu {
	display: inline-block;
}
.header-app-button .sub-menu-link {
	padding: 12px 15px;
	display: block;
	font-size: 14px;
	color: #FFF;
	text-decoration: none;
	position: relative;
	width: 100%;
}
.header-app-button .sub-menu-link .child-sub-menu {
	display: none !important;
	border-radius: 0 4px 4px 0;
}
.header-app-button .sub-menu-link:not(.disabled):hover .child-sub-menu {
	display: inline-block !important;
    left: 100% !important;
    top: 0 !important;
}
.header-app-button .sub-menu-link.has-child:before {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f0da";
	position: absolute;
	right: 10px;
    top: 15px;
}
.header-app-button .sub-menu-link .fa {
	margin-right: 5px;
}
.header-app-button .sub-menu-link:hover {
	background-color: rgba(255,255, 255, 0.2);
	cursor: pointer;
}
.header-app-button .sub-menu-link.disabled {
	opacity: 0.35;
}
.header-app-button .sub-menu-link.disabled:hover {
	cursor: default;
	background-color: inherit;
}
.header-app-button .sub-menu-link.save-stamp-selection {
	border-radius: 0 0 4px 4px;
}
.defaul-app-button {
	padding: 10px;
	border-radius: 4px;
	font-size: 12px;
	text-transform: uppercase;
	display: inline-block;
	color: #FFF;
}
.thumb-preview {
	width: 100%;
    height: 100px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: middle;
    overflow: hidden;
   	margin-bottom: 10px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.defaul-app-button.full {
	width: 100%;
	text-align: center;
}
.defaul-app-button:hover, .header-app-button:hover, .header-app-button.active {
	background-color: #444;
	cursor: pointer;
}
.defaul-app-button.disabled {
	opacity: 0.3;
}
.defaul-app-button.disabled:hover {
	background-color: inherit;
	cursor: default;
}
.color-select {
	/*width: 14.28%;*/
	aspect-ratio: 1/1;
	width: 16.6%;
	display: inline-block;
	overflow: hidden;
	float: left;
	position: relative;
}
.color-select .color-block {
    margin: 0px;
    overflow: hidden;
    border-radius: 0px;
    margin-top: 1px;
    margin-left: 1px;
    padding-top: calc(100% - 1px);
}
.color-select:hover .color-block {
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,1), inset 0 0 0 2px rgba(255,255,255,0.5);
	        box-shadow: inset 0 0 0 1px rgba(0,0,0,1), inset 0 0 0 2px rgba(255,255,255,0.5);
	cursor: pointer;
}
.color-select.active .color-block,
.color-select.active:hover .color-block {
	position: relative;
	-webkit-box-shadow: inset 0 0 0 1px rgba(0,0,0,1), inset 0 0 0 3px rgba(255,255,255,1);
	        box-shadow: inset 0 0 0 1px rgba(0,0,0,1), inset 0 0 0 3px rgba(255,255,255,1);
	cursor: pointer;
}
.color-select.active:after, .color-select:hover:after {
    content: " ";
    width: calc(100% - 0px);
    height: calc(100% - 1px);
    position: absolute;
    border: 2px solid #FFF;
    top: 1px;
    left: 0;
    cursor: pointer;
}
.color-select:not(.active):hover:after {
	border: 2px solid rgba(255, 255, 255, 0.5);
}
#canvas_layer {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
}
#canvas-layers-container {
	position: relative;
	background-color: #FFF;
	z-index: 10;
	display: inline-block;
}
#canvas-layers-appened {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#canvas-layers-appened.css {
	position: absolute;
}
#canvas-layers-appened.has-tiles.has-tiles-border #canvas_display {
	outline: 2px dashed red;
}
#canvas_abover_layers {
	z-index: 10;
	position: absolute;
	left: 0;
	top: 0;
}
#canvas_below_layers {
	z-index: 8;
	position: absolute;
	left: 0;
	top: 0;
}
#canvas_display {
   	z-index: 9;
	position: relative;
	background-size: 100% 100%;
	background-position: center;
}
#canvas_grid, #canvas_grid_image {
   	z-index: 10;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.5;
}
#canvas_grid_image {
	display: none;
	width: 100%;
	height: 100%;
	background-repeat: repeat;
}
#canvas_rendering {
	image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: -o-pixelated;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor; 
}
#canvas_rendering, #canvas_top, #canvas_bottom {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 1px;
}
#canvas_select {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 1px;
}
#canvas_data {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 1px;
	background: #FFF;
}
#display-container {
	z-index: 2;
	position: relative;
	overflow: hidden;
	border: thin solid #CCC;
	background-color: #333;
}
.mouse-pos {
	color: #FFF;
	padding: 0 10px;
	margin-top: 5px;
	font-size: 12px;
}
#frames-container {
	padding: 5px 10px 12px 10px;
}
.frame-select,
.frame-placeholder {
	color: #FFF;
	overflow: hidden;
	border-radius: 1px;
	display: inline-block;
	margin-right: 10px;
	max-width: 150px;
	border-radius: 4px;
}
.frame-placeholder {
	width: 90px;
    background-color: rgb(255 255 255 / 15%);
    height: 71px;
    position: relative;
}
.frame-select.active {
	-webkit-box-shadow: 0 0 0px 3px #2d9bea;
	        box-shadow: 0 0 0px 3px #2d9bea;
}
.frame-select.active:hover {
	-webkit-box-shadow: 0 0 0px 3px #2d9bea;
	        box-shadow: 0 0 0px 3px #2d9bea;
}
.frame-select img.preview-image-frame {
	max-width: 100%;
    max-height: 100%;
}
.id-image {
	background-color: #FFF;
	position: relative;
	height: 45px;
    width: 90px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
}
#logo-home img {
	position: relative;
}
#logo-home .about-image {
	width: calc(100% + 30px);
}
input[type="text"].form-control-app, 
input[type="number"].form-control-app, 
textarea, 
.form-submit-ct select {
	width: 100%;
	padding: 12px 15px;
	background-color: #FFF;
    border-radius: 6px;
    color: #000;
    overflow: hidden;
}
input[type="text"].grey-input-text, 
input[type="number"].grey-input-text, 
textarea.grey-input-text {
	border: thin solid #CCC;
}
textarea {
	border: none;
	outline: none !important;
	font-size: 16px;
	height: auto;
	line-height: 20px;
}
textarea:focus {
	outline: none !important;
}
input[type="text"].form-control-app:focus, input[type="number"].form-control-app:focus, .form-submit-ct textarea:focus, select:focus {
	outline: none;
} 
.settings-details input[type="text"] {
	margin-top: 0;
	background-color: #fbfbfb;
}
.id-image:before, #logo-home:before, .mirror-tool:before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: " ";
}
.id-image .frame-tag {
	position: absolute;
	padding: 5px 10px;
	border-radius: 0 2px 2px 0;
	color: #000;
	background-color: #FFF;
	left: 0;
	top: 0;
	font-size: 12px;
	cursor: move;
}
.frame-select.active .id-image .frame-tag {
	background-color: #2D9BEA;
	color: #FFF;
}
.frame-speed {
	color: #000;
}
.frame-button {
	color: #FFF;
	cursor: pointer;
	padding: 5px;
}
.frame-controllers select {
	width: 100%;
	text-transform: none !important;
	font-size: 12px !important;
}
.frame-controllers select:focus {
	border-bottom: none !important;
}
#frames-appended {
	position: relative;
    top: 34px;
    margin-bottom: 25px;
}
.frames-controls {
	margin-bottom: 5px;
	color: #FFF;
	position: absolute;
    width: calc(100% - 20px);
}
span.inline-frame-bt {
	font-size: 10px;
    text-transform: uppercase;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    pso: re;
    position: relative;
    top: -1px;
}
.frames-controls .frame-action-text {
	display: inline-block;
	font-size: 10px;
	margin-right: 5px;
	text-transform: uppercase;
	vertical-align: middle;
}
.frames-controls .frame-button {
	border-radius: 2px;
	display: inline-block;
	padding: 3px 5px;
	vertical-align: middle;
}
.frames-controls .frame-button:hover {
	background-color: rgba(255,255,255,0.2);
}
.frame-button:hover {
	background-color: rgba(0,0,0,0.1);
}
.id-image:hover {
	cursor: pointer;
}
.frame-select.highlight {
	background-color: yellow;
	width: 100px;
	height: 100px;
}
.buttons-container {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: justify;
	    -webkit-box-pack: justify;
	        justify-content: space-between;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	        align-items: center;
}
.buttons-container .speed-container {
	width: 100%;
}
.buttons-container .speed-container select {
	padding: 5px 10px;
	border-radius: 0 0 4px 4px;
}
.preview-container {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background-color: rgba(37, 37, 37, 0.9);
	z-index: 13;
	display: none;
}
.preview-container.active {
	display: block;
}
.close-preview {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
    position: fixed;
    z-index: 9999;
    top: 20px;
    right: 35px;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255,255,255,1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background-color: #FFF;
    color: #000;
    line-height: 14px;
    -webkit-box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.25);
    box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.25);
    cursor: pointer;
}
.close-preview:hover {
	background-color: #EEE;
	cursor: pointer;
}
.close-preview-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.preview-content {
	position: relative;
	z-index: 2;
	background-color: #FFF;
}
.preview-content img {
	width: 100%;
	height: 100%;
	position: absolute;
}
.preview-wrapper {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-align: center;
	    -webkit-box-align: center;
	        align-items: center;
	position: relative;
    height: 100%;
    width: 100%;
}
.preview-loading {
	color: #FFF;
	font-size: 42px;
	text-align: center;
}
.app-start-section {
	margin-top: 20px;
	font-size: 12px;
	text-transform: uppercase;
}
.cssload-thecube {
	width: 22px;
	height: 22px;
	margin: 0 auto;
	margin-top: 15px;
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	position: relative;
	transform: rotateZ(45deg);
		-o-transform: rotateZ(45deg);
		-ms-transform: rotateZ(45deg);
		-webkit-transform: rotateZ(45deg);
		-moz-transform: rotateZ(45deg);
}
.cssload-thecube .cssload-cube {
	float: left;
	width: 50%;
	height: 50%;
	position: relative;
	transform: scale(1.1);
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(255, 255, 255);
	animation: cssload-fold-thecube 1.44s infinite linear both;
		-o-animation: cssload-fold-thecube 1.44s infinite linear both;
		-ms-animation: cssload-fold-thecube 1.44s infinite linear both;
		-webkit-animation: cssload-fold-thecube 1.44s infinite linear both;
		-moz-animation: cssload-fold-thecube 1.44s infinite linear both;
	transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
	transform: scale(1.1) rotateZ(90deg);
		-o-transform: scale(1.1) rotateZ(90deg);
		-ms-transform: scale(1.1) rotateZ(90deg);
		-webkit-transform: scale(1.1) rotateZ(90deg);
		-moz-transform: scale(1.1) rotateZ(90deg);
}
.cssload-thecube .cssload-c3 {
	transform: scale(1.1) rotateZ(180deg);
		-o-transform: scale(1.1) rotateZ(180deg);
		-ms-transform: scale(1.1) rotateZ(180deg);
		-webkit-transform: scale(1.1) rotateZ(180deg);
		-moz-transform: scale(1.1) rotateZ(180deg);
}
.cssload-thecube .cssload-c4 {
	transform: scale(1.1) rotateZ(270deg);
		-o-transform: scale(1.1) rotateZ(270deg);
		-ms-transform: scale(1.1) rotateZ(270deg);
		-webkit-transform: scale(1.1) rotateZ(270deg);
		-moz-transform: scale(1.1) rotateZ(270deg);
}
.cssload-thecube .cssload-c2:before {
	animation-delay: 0.175s;
		-o-animation-delay: 0.175s;
		-ms-animation-delay: 0.175s;
		-webkit-animation-delay: 0.175s;
		-moz-animation-delay: 0.175s;
}
.cssload-thecube .cssload-c3:before {
	animation-delay: 0.36s;
		-o-animation-delay: 0.36s;
		-ms-animation-delay: 0.36s;
		-webkit-animation-delay: 0.36s;
		-moz-animation-delay: 0.36s;
}
.cssload-thecube .cssload-c4:before {
	animation-delay: 0.535s;
		-o-animation-delay: 0.535s;
		-ms-animation-delay: 0.535s;
		-webkit-animation-delay: 0.535s;
		-moz-animation-delay: 0.535s;
}



@keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(42px) rotateX(-180deg);
		        transform: perspective(42px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-webkit-transform: perspective(42px) rotateX(0deg);
		        transform: perspective(42px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-webkit-transform: perspective(42px) rotateY(180deg);
		        transform: perspective(42px) rotateY(180deg);
		opacity: 0;
	}
}

@-webkit-keyframes cssload-fold-thecube {
	0%, 10% {
		-webkit-transform: perspective(42px) rotateX(-180deg);
		opacity: 0;
	}
	25%,
				75% {
		-webkit-transform: perspective(42px) rotateX(0deg);
		opacity: 1;
	}
	90%,
				100% {
		-webkit-transform: perspective(42px) rotateY(180deg);
		opacity: 0;
	}
}
#preview-size-change {
	color: #000;
}
.tools-container {
	width: 100%;
}
.tools-container .tools-header {
	color: #FFF;
	font-size: 10px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 0;
}
.tool-selection, .non-tool-selection {
	width: 50%;
	float: left;
	border-radius: 2px;
	position: relative; 
	text-align: center;
}
.tool-selection:before {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	content: " ";
	width: 100%;
	height: 100%;
}
.tool-selection.multi:after {
	content: " ";
    width: 0px;
    height: 0px;
    right: 1px;
    bottom: 4px;
    position: absolute;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #EEE;
    transform: rotate(-45deg);
}
.tool-selection img, .non-tool-selection img {
	padding: 10px;
}
.tool-selection:hover, .non-tool-selection:hover {
	cursor: pointer;
	background-color: rgba(255,255,255,0.2);
}
.tool-selection.active {
	background-color: #2084fc;
}
.button-group-toolbar {
	width: 50%;
	display: inline-block;
	vertical-align: top;
	height: 100%;
	position: relative;
}
.button-group-toolbar:last-child {
	text-align: right;
}
.button-group-toolbar.logo-placement {
	text-align: center;
	/*width: 10%;*/
	width: auto;
}
.button-group-toolbar a img {
	outline: none;
	border: none;
}
ul.logo-main li {
	position: relative;
	height: 100%;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
    -ms-flex-align: center;
        -webkit-box-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
}
.special-tools-wrapper {
	width: 100%;
}
.special-tools-wrapper .wrapper-double {
	width: 100%;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.special-tools-wrapper .wrapper-double .mirror-tool {
	display: inline-block;
	float: left;
	width: 50%;
	text-align: center;
	color: #FFF;
	border-radius: 4px;
	position: relative;
}
.special-tools-wrapper .wrapper-double .mirror-tool img {
	width: 100%;
	max-width: 50px;
}
.special-tools-wrapper .wrapper-double .mirror-tool:last-child {
	float: right;
}
.special-tools-wrapper .wrapper-double .mirror-tool.active {
	background-color: rgba(255,255,255,0.2);
}
.special-tools-wrapper .wrapper-double .mirror-tool:hover {
	background-color: rgba(255,255,255,0.075);
	cursor: pointer;
}
.special-tools-wrapper .wrapper-double .mirror-tool.active:hover {
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}
.popup-container,
.popup-modal {
	background-color: rgba(0,0,0,0.75) !important;
	position: fixed !important;
	width: 100% !important;
	height: 100% !important;
	left: 0 !important;
	top: 0 !important;
	z-index: 9999 !important;
	display: none;
	font-size: 15px !important;
	text-align: left !important;
	-webkit-filter: none !important;
	filter: none !important;
	padding: 0 !important;
	white-space: normal !important;
}
.popup-container a {
	border: none !important;
}
.popup-container .popup-container-wrapper,
.popup-modal .popup-container-wrapper  {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	padding: 100px 0;
	overflow-y: auto;
}
.popup-container .popup-container-wrapper .popup-close,
.popup-modal .popup-container-wrapper .popup-close {
	z-index: 1;
	width: calc(100% - 30px);
	height: 100%;
	left: 0;
	top: 0;
	position: fixed;
}
.popup-container .popup-container-wrapper .popup-wrapper,
.popup-modal .panel-wrapper {
	width: 50%;
	max-width: 1200px;
	background-color: #222;
	position: relative;
	z-index: 2;
	border-radius: 8px;
	overflow: hidden;
	margin: 0 auto;
	margin-bottom: 40px;
}
.lighter #drawing-tool-options {
	background-color: #fff;
	color: #000;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper, 
.lighter .popup-modal .panel-wrapper {
	background-color: #FFF;
}
.popup-container .popup-container-wrapper .popup-wrapper.stampWidth {
	max-width: 450px;
}
.popup-container .popup-container-wrapper .popup-wrapper.autoWidth {
	width: auto;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-header,
.popup-modal .panel-header {
	text-align: left;
	padding: 20px;
    color: #ffffff;
    font-size: 18px;
    line-height: 14px;
    border-bottom: 2px solid #1b1b1b;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-header,
.lighter .popup-modal .panel-header {
	color: #FFF;
	background-color: #2979ff;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-header .fa {
	margin-right: 10px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	line-height: 26px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #FFF;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .helper,
.popup-modal .helper {
	color: #888;
	line-height: 18px;
}
.popup-container .popup-container-wrapper select, 
.popup-container .popup-container-wrapper input,
.popup-container .popup-container-wrapper textarea,
.popup-modal select,
.popup-modal input,
.popup-container-wrapper input.input-normal, 
.popup-modal textarea {
	background-color: #444;
	border-color: #444;
	color: #FFF;
}
.popup-container .popup-container-wrapper label,
.popup-modal label {
	color: #FFF;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head,
.popup-modal .panel-sidebar {
	width: 33%;
	min-width: 250px;
	position: relative;	
	z-index: 2;
	overflow: hidden;
	border-right: 2px solid #1b1b1b;
	min-height: 520px;
}
@media only screen and (min-width: 1200px) {
	.popup-container .popup-container-wrapper .popup-wrapper,
	.popup-modal .panel-wrapper {
		width: calc(50% + 120px);
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head,
	.popup-modal .panel-sidebar {
		min-width: 302px;
	}
}
@media only screen and (max-width: 1200px) {
	.p-content-sidebar-head .sidebar-banner {
		display: none;
	}
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head,
.lighter .popup-modal .panel-sidebar {
	background-color: #e5ecf2;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .p-sidebar,
.popup-modal .panel-sidebar .sidebar-body {
	padding: 20px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container {
	position: absolute;
	bottom: 15px;
	width: calc(100% - 30px);
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container .share-h {
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 12px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container .share-button-image {
	font-size: 18px;
    color: #222;
    padding: 8px;
    margin-top: 10px;
    border-radius: 8px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container .share-button-image:hover {
	background-color: #FFF;
}
.share-popup-container .share-button-image.fc {
	margin-left: -5px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container .share-button-image:last-child {
	margin-right: 0;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .btn {
	font-size: 12px;
	-webkit-box-shadow: none !important;
	        box-shadow: none !important;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .btn .fa {
	font-size: 14px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content,
.popup-modal .panel-body {
	width: 100%;
	padding: 20px;
	overflow-x: hidden;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content.mobile {
	overflow: hidden;
    background: #ff0000;
    background: -o-linear-gradient(45deg,#6316b7 0%,#ff0000 100%);
    background: linear-gradient(45deg,#6316b7 0%,#ff0000 100%);
    position: relative;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content.mobile {
	color: #FFF;
}
@-webkit-keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position: -1250px 1250px;}
}
@keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position: -1250px 1250px;}
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content.mobile:after {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background-image: url(/images/public/pattern.png);
    -webkit-animation: backgroundScroll 45s linear infinite;
            animation: backgroundScroll 45s linear infinite;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content .above-container {
	position: relative;
	z-index: 2;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content .above-container.mobile {
	padding: 30px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content.blueBackground {
	background-color: #2979ff;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content p {
	margin-top: 0px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn {
	padding: 5px 10px;
	width: 100%;
	color: #CCC;
	border-radius: 4px;
	margin-bottom: 5px;
	font-size: 16px;
}
.popup-container .p-seperator {
    height: 1px;
    background-color: #333;
    border-radius: 8px;
    margin: 15px 10px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn .fa {
	margin-right: 5px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.ls {
	margin-bottom: 100px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.ls.ad {
	margin-bottom: 280px;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn:hover {
	background-color: #333;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-btn:hover:not(.force_active):not(.active) {
	background-color: #EEE;
}
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.active,
.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.force_active {
	background-color: #2979FF;
	color: #FFF;
}
.popup-container .popup-container-wrapper .popup-wrapper .popup-close-button, .popup-container .popup-close-button {
	content: "\f00d";
    position: absolute;
    font: normal normal normal 14px/1 FontAwesome;
    top: 0;
    right: 0;
    padding: 15px;
    color: #777;
    font-size: 26px;
    background: transparent;
    border: none;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .popup-close-button, .popup-container .popup-close-button {
	color: #FFF;
}
.popup-container .popup-container-wrapper .popup-wrapper .popup-close-button:hover, .popup-container .popup-close-button:hover {
	color: #CCC;
	cursor: pointer;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .popup-close-button:hover, .popup-container .popup-close-button:hover {
	color: #EEE;
}
.popup-container .popup-container-wrapper .popup-close-button.mobile-close-button {
	position: absolute;
	top: 0;
	right: 0;
	color: #FFF;
	text-transform: uppercase;
    padding: 10px 15px;
    display: none !important;
}
.popup-container .popup-container-wrapper .popup-close-button.mobile-close-button .fa {
	display: inline-block;
	vertical-align: middle;
}
.new-section {
	font-size: 28px;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
}
.clickable {
	cursor: pointer;
}
.hidden {
	display: none;
}
.thide {
	width: 1px;
	height: 1px;
	overflow: hidden;
	display: inline-block;
}
.thup {
	position: relative;
	top: -2px;
}
.hidden-content {
	display: none;
}
[type="checkbox"].filled-in:not(:checked)+label:after,
[type="checkbox"].filled-in:checked+label:after,
[type="checkbox"].filled-in:checked+label:before {
	top: 2px;
}
.p-content table tr td, .p-content table tr th {
	width: auto;
	padding: 0 0 10px;
}
.p-content table tr, .p-content table thead {
	border-bottom: none;
}
.p-content table tr:last-child {
	border-bottom: none;
}
.p-content table tr td p {
	margin: 0;
	font-size: 14px;
	color: #777;
	margin-top: 5px;
}
.p-content [type="checkbox"].filled-in:not(:checked)+label:after {
	background-color: rgb(255, 255, 255);
}
.input-half-container {
	padding-top: 20px;
}
.input-half-container .input-wrapper {
	width: 49%;
	float: left;
}
.input-half-container .input-wrapper:last-child {
	width: 49%;
	float: right;
}
.input-half-container .input-wrapper input {
	margin-top: 10px;
}
.input-half-container label  {
	color: #000;
}
.app-primary-bg {
	background-color: #222;
}
#hue-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.stamp-save-container {
	display: block; 
	width: 100%;
}
.stamp-save-half {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
.stamp-preview-wrapper {
	margin-left: 0;
	width: 100%;
	height: 300px;
	background-color: #FFF;
	text-align: center;
	overflow: hidden;
	border-radius: 2px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
            align-items: center;
    border: thin solid #CCC;
    border-radius: 8px;
}
.stamp-preview-wrapper img {
	max-width: 100%;
	max-height: 100%;
	image-rendering: nearest-neighbor;
	image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    image-rendering: -o-pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}
.stamp-container, .drawing-modal {
	width: 400px;
	background-color: #333;
	position: absolute;
	left: 100%;
	top: -1px;
	height: 100%;
	z-index: 9999;
	display: none;
	border-radius: 8px;
	-webkit-box-shadow: 0 1px 0 0 rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.06);
	        box-shadow: 0 1px 0 0 rgba(0,0,0,0.05), 0 2px 4px 0 rgba(0,0,0,0.06);
}
.stamp-container.full, .drawing-modal.full {
    width: calc(100% - 40px);
    left: 20px;
    top: 20px;
    height: calc(100% - 40px);
}
.stamp_wrapper, .modal-content {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
  	-ms-flex-direction: column;
  	    -webkit-box-orient: vertical;
  	    -webkit-box-direction: normal;
  	        flex-direction: column;
  	width: 100%;
  	height: 100%;
  	position: relative;
}
.stamp_wrapper .modal-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.modal-content .modal-body {
	padding: 15px;
	overflow-y: auto;
}
.stamp-container .stamp-header, .drawing-modal .modal-header {
	padding: 10px 15px;
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}
.drawing-modal .modal-header .modal-header-text {
	width: 100%;
}
.stamp-container .stamp-header .close-stamps-container, 
.drawing-modal .close-modal {
	padding: 5px;
	font-size: 18px;
	cursor: pointer;
	color: #777;
}
.stamp-container .stamp-header .close-stamps-container:hover, 
.drawing-modal .close-modal:hover {
	color: #CCC;
}
.search-filter-input {
}
.search-filter-input .stamp-filter-by-search, 
.search-filter-input .panel-search-filter {
	/*
	border: thin solid rgba(0,0,0,0.4);
	background-color: rgba(0,0,0,0.4);
	color: #FFF;
	border-radius: 4px;
	outline: none;
	width: 100%;
	padding: 10px 10px;
    height: auto;
	position: relative;
	-webkit-box-sizing: inherit;
	        box-sizing: inherit;
	margin-bottom: 0 !important;
	*/
}
.ligher .search-filter-input .stamp-filter-by-search, 
.ligher .search-filter-input .panel-search-filter {
	background-color: #EEE;
}
.stamp-filter-by-search:after,
.panel-search-filter:after {
	font: normal normal normal 14px/1 FontAwesome;
	content: "\f002";
	color: #FFF;	
	padding: 10px;
	right: 0;
	position: absolute;
	top: 0;
}
.button-filters {
	margin: 5px 0 10px 0;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	  -ms-flex-pack: center;
	      -webkit-box-pack: center;
	          justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
}
.button-filters .filter-btn {
	width: 100%;
	padding: 12px 0;
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	text-align: center;
	border-bottom: 4px solid rgba(255,255,255,0.3);
	font-size: 12px;
	text-transform: uppercase;
	cursor: pointer;
}
.button-filters .filter-btn:last-child {
	margin-right: 0;
}
.button-filters .filter-btn:hover {
	color: rgba(255,255,255,1);
	border-bottom: 4px solid rgba(255,255,255,0.45);
}
.button-filters .filter-btn.active {
	color: #FFF;
	border-bottom: 4px solid #2979ff;
	cursor: pointer;
}
.append-stamps-preview {
	padding: 10px 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.append-stamps-preview .stamp-pre {
	display: inline-block;
	vertical-align: top;
    overflow: hidden;
    border-radius: 2px;
    position: relative;
}
.stamp-container.full .append-stamps-preview .stamp-pre {
	width: 10%;
	margin-bottom: 10px;
}
.stamp-container .append-stamps-preview.loading .stamp-pre {
	opacity: .25;
}
.append-stamps-preview .stamp-pre:nth-child(10n) {
	margin-right: 0;
}
.append-stamps-preview .stamp-pre .stamp-pre-image {
	width: 100%;
	height: 100px;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
    -ms-flex-pack: center;
        -webkit-box-pack: center;
            justify-content: center;
    -ms-flex-align: center;
        -webkit-box-align: center;
            align-items: center;
    vertical-align: middle;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.append-stamps-preview .stamp-pre .stamp-pre-image:before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: " ";
}
.append-stamps-preview .stamp-pre .stamp-pre-image:hover {
	opacity: 0.7;
	cursor: pointer;
}
.append-stamps-preview .stamp-pre .stamp-pre-image img {
	max-width: 100%;
	max-height: 100%;
	display: inline-block;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	min-height: 80px;
}
.stamp-data {
	background-color: #FFF;
    margin: 0 5px;
    padding: 10px;
    position: relative;
    border-radius: 4px;
    height: 175px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    text-align: center;
    overflow: hidden;
}
.append-stamps-preview .stamp-pre.hide-img .stamp-pre-image {
	background-image: none !important;
}
.append-stamps-preview .stamp-pre .stamp-pre-title {
	text-align: center;
	overflow: hidden;
	font-size: 12px;
	margin-bottom: 10px;
	color: #333;
	width: 100%;
}
.stamps-preview-wrapper {
	width: 100%;
	max-height: 100%;
	-ms-flex: 1;
	    -webkit-box-flex: 1;
	        flex: 1;
	overflow-y: auto;
}
.stamps-preview-wrapper .loading-container {
	width: 100%;
	padding: 6px 0;
	text-align: center;
	color: #FFF;
	font-size: 24px;
}
.tab-container {
	width: 100%;
}
.tab-container .tab-header-wrapper {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	margin: -20px -20px 15px -20px;
    background-color: #FFF;
}
.tab-container .tab-header-wrapper .tab-header {
	color: #000;
	padding: 20px 0 15px 0;
	text-align: center;
	display: inline-block;
	width: 100%;
	border-bottom: 3px solid #EEE;
}
.tab-container .tab-header-wrapper .tab-header:hover {
	border-bottom: 3px solid #CCC;
}
.tab-container .tab-header-wrapper .tab-header.active {
	border-bottom: 3px solid #2979ff;
}
.tab-container .tab-content-wrapper {
	width: 100%;
}
.tab-container .tab-content-wrapper .tab-content {
	display: none;
}
.tab-container .tab-content-wrapper .tab-content.active {
	display: block;
}
.drawing-wrapper select {
	text-transform: uppercase;
    font-size: 14px;
    margin: 0;
    padding: 12px 10px;
}
.drawing-wrapper select.nm {
	padding: 0 10px;
	font-size: 14px;
	width: 50%;
}
.drawing-wrapper select.sm {
	padding: 0 10px;
	font-size: 14px;
}
.extra-tools-panel select {
	width: 100%;
}
.stamp-show-more {
	color: #FFF;
	padding: 2px 0;
	text-align: center;
    border-radius: 4px;
    background-color: #2979ff;
    margin-bottom: 0;
}
.stamp-show-more.back {
	background-color: #717171;
}
.stamp-show-more-wrapper {
	text-align: center;
}
.stamp-show-more-wrapper .stamp-show-more {
	display: block;
}
.stamp-show-more:hover {
	background-color: #1d86d2;
	cursor: pointer;
}
.stamp-show-more.back:hover {
	background-color: #807d7d;
}
.after-app-ready-show {
	display: none;
}
.preview-download {
    display: none;
    padding: 10px;
    color: #FFF;
    background-color: rgba(0,0,0,0.5);
    border-radius: 2px;
    margin: 10px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    font-size: 10px;
    text-transform: uppercase;
}
.preview-content:hover .preview-download.active  {
	display: inline-block;
}
.preview-download:hover {
	cursor: pointer;
	background-color: rgba(0,0,0,0.9);
}
.header-menu {
	list-style: none;
	margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.header-menu.logo-main {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.header-menu li {
	display: inline-block;
	vertical-align: middle;
}
.header-menu li.pad {
	margin: 0;
	padding: 0;
}
.header-menu li.pad > div, 
.header-menu li.pad > .dropdown-type, 
.header-menu li.pad .btn-head, 
.nav-btn-type {
	font-size: 14px;
	margin: 0;
	color: #FFF;
	position: relative;
	display: inline-block;
	text-decoration: none;
	height: 100%;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
        -webkit-box-align: center;
            align-items: center;
    -ms-flex-line-pack: center;
        align-content: center;
    padding: 0 8px;
    font-size: 12px;
    text-transform: uppercase;
}
.header-menu li.pad > .dropdown-type.lg {
	padding: 0 15px;
}
.header-menu li.pad > .dropdown-type > span.ct {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.header-menu li.pad div, .header-menu li.pad .btn-head {
	color: #FFF;
}
.header-menu li.pad div .fa, .header-menu li.pad .btn-head .fa {
	font-size: 14px;
}
.header-menu li.pad div .material-icons {
	font-size: 20px;
	display: inline-block;
	vertical-align: middle;
}
.header-menu li.default-hidden, .default-hidden {
	display: none;
}
.hidden-hard {
	display: none !important;
}
.mouse-information {
	left: 0;
	top: 0;
	padding: 10px;
	opacity: 1;
	color: #FFF;
	font-size: 12px;
	text-transform: uppercase;
}
.row-section {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
}
.resize-container {
	height: 3px;
	background-color: rgba(255, 255, 255, 0.1);
	cursor: n-resize;
}
.row-section .defaul-app-button,
.btn-default,
button.btn-default:focus {
	-ms-flex: 1;
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
    font-size: 16px;
    padding: 8px 5px;
    border-radius: 4px;
}
.row-section .defaul-app-button.sm {
	padding: 5px;
}
.btn-default,
button.btn-default:focus {
	background-color: transparent;
	border: thin solid rgba(255, 255, 255, 0.5);
    -webkit-box-shadow: none;
            box-shadow: none;
}
.btn-default,
button.btn-default:focus {
	font-size: 12px;
	padding: 0px 10px;
}
.btn-default:hover,
button.btn-default:focus:hover {
    background-color: rgba(255,255,255,0.2);
    cursor: pointer;
    -webkit-transform: inherit;
        -ms-transform: inherit;
            transform: inherit;
}
.panel-header {
	position: relative;
}
.panel-header .btn-head {
	position: absolute;
    font-size: 10px;
    padding: 3px 5px;
    width: auto;
    line-height: normal;
    top: 6px;
}
.panel-header .btn-head .fa {
	font-size: 10px;
}
.panel-header .btn-head.right {
	right:  5px;
}
.panel-header .btn-head.left {
	left:  5px;
}
.panel-header .btn-head:focus {
	font-size: 10px;
	padding: 3px 5px;
}
.row-section .defaul-app-button.ex {
	padding: 10px 10px;
}
.row-section .defaul-app-button.dis {
	color: #555;
}
.panel-header-helpers {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-pack: center;
	    -webkit-box-pack: center;
	        justify-content: center;
	-ms-flex-line-pack: center;
	    align-content: center;
}
.panel-header-helpers .half-pan {
	-ms-flex: 1;
	    -webkit-box-flex: 1;
	        flex: 1;
	text-align: center;
}
.select-back {
	background-color: #333;
	color: #FFF;
	border: 0;
	padding-left: 5px;
	outline: none;
}
.select-back:hover, .select-back:focus {
	background-color: #222;
	cursor: pointer;
	outline: none;
}
#frames-placement .panel-header {
	text-align: left;
}
.colorpicker {
	z-index: 11;
}
#frames-placement .panel-header {
	padding: 0;
}
.header-app-button.none-button:hover, .defaul-app-button.none-button:hover {
	cursor: default;
	background-color: inherit;
}
.header-app-button.none-button {
	font-size: 10px !important;
	text-transform: uppercase;
}
#frames-placement .panel-header .header-app-button {
	margin: 0;
}
#frames-placement .panel-header .header-app-button:first-child:hover {
	background-color: inherit;
}
#frames-container {
	display: none;
	overflow-x: auto;
	overflow-y: hidden;
    white-space: nowrap
}
.panel.locked #frames-container {
	display: block !important;
}
.preview-select {
	color: #FFF !important;
}
#frames-placement .header-app-button {
	font-size: 16px;
	padding: 10px 15px;
}
#frames-placement .header-app-button.all-frames-speed {
	font-size: 14px;
	padding: 2px 5px;
}
#frames-placement .all-frames-right {
	position: relative;
	top: 3px;
}
.color-selection {
    margin: 10px 0;
    margin-bottom: 30px;
    position: relative;
} 
.color-selection .black-white-default {
	position: absolute;
	right: 20px;
    top: -5px;
    cursor: pointer;
}
@media only screen and (max-height: 672px) {
	.color-selection .black-white-default {
		right: 10px;
	}
}
.color-selection .black-white-default div {
	width: 10px;
	height: 10px;
	background-color: #FFF;
	position: relative;
}
.lighter .color-selection .black-white-default div {
	border: thin solid #000;
}
.color-selection .black-white-default div.black-default {
	background-color: #000;
	position: relative;
	z-index: 1;
	left: -5px;
    bottom: -5px;
    border: thin solid #FFF;
}
.color-selection-tools {
	position: relative;
	float: left;
	width: 100%;
	margin-bottom: 10px;
}
.colors-pixil {
    width: 45px;
    height: 45px;
    color: #000;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    border: thin solid #FFF;
}
.colors-pixil.sm {
	width: 30px;
    height: 20px;
    position: static;
    left: 0;
}
.color-box {
	width: 30px;
    height: 20px;
    position: static;
    background: linear-gradient(
        315deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}
.color-box:before {
	content: "\f067";
	font: normal normal normal 14px/1 FontAwesome;
	color: #FFF;
	font-size: 10px;
	position: relative;
	top: -4px;
}
.colors-pixil:hover {
	-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
	        box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
	opacity: 0.8;
	cursor: pointer;
}
.primary-color {
    z-index: 2;
    left: 10px;
    position: relative;
}
.secondary-color {
    float: right;
    position: absolute;
    top: 25px;
    z-index: 1;
    right: 10px;
}
.submit-drawing-bg {
	background-color: #2D9BEA;
    background: -o-linear-gradient(left, #2D9BEA, #962ee4);
    background: -webkit-gradient(linear, left top, right top, from(#2D9BEA), to(#962ee4));
    background: linear-gradient(to right, #2D9BEA, #962ee4);
    color: #FFF !important;
}
.sub-menu-link.submit-drawing-bg:hover, .submit-drawing-bg:hover {
	background-color: #1d86d2;
    background: -o-linear-gradient(left, #2984c5, #8521d0);
    background: -webkit-gradient(linear, left top, right top, from(#2984c5), to(#8521d0));
    background: linear-gradient(to right, #2984c5, #8521d0);
}
.p-content table.download-table tr td {
	width: auto;
}
.p-content table.download-table tr td:last-child {
	text-align: right;
}
.p-content table tr:last-child td {
	padding-bottom: 0;
}
.header-new {
	text-align: center;
	font-size: 16px;
	padding: 0 0 20px 0;
	color: #FFF;
}
.presets-wrapper {
	padding: 5px 0 0 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}
.custom-canvas-text {
	opacity: 1;
	font-size: 16px;
	margin-top: 5px;
}
.preset-select {
}
.preset-select .ct,
.modal-item {
	margin-bottom: 15px;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    cursor: pointer;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-radius: 8px;
    background-color: #444;
    line-height: normal;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
.modal-item.lg {
	height: 80px;
	margin-bottom: 0;
}
.lighter .preset-select .ct,
.lighter .modal-item {
	background-color: #FFF;
	border: thin solid #CCC;
}
.lighter .tool-title, 
.lighter .toggle-label-helper, 
.lighter .btn-default {
	color: #000;
}
.preset-select .preset-head {
    text-transform: uppercase;
}
.preset-select .preset-body {
    font-size: 12px;
    opacity: 0.5;
}
.presets-wrapper .preset-select {
	float: left;
	width: 20%;
	text-align: center;
	padding: 10px 0;
	margin-bottom: 15px;
	background-color: #FFF;
	border-radius: 4px;
	border: thin solid #CCC;
    position: relative;
    top: 0;
    -webkit-transition: all 0.10s ease-in-out;
	-o-transition: all 0.10s ease-in-out;
	transition: all 0.10s ease-in-out;
	color: #000;
	margin-right: 10px;
}
.presets-wrapper .preset-select:hover, .presets-wrapper .preset-select.active {
	outline: none;
	cursor: pointer;
	-webkit-box-shadow: 0 1px 9px 0 rgba(0,0,0,50%);
    box-shadow: 0 1px 9px 0 rgba(0,0,0,.1) !important;
    border: thin solid #2979FF;
    top: -3px;
}
.presets-wrapper .preset-select:last-child {
	margin-right: 0;
}
.presets-wrapper .preset-select.active {
	background-color: #EEE;
}
.new-drawing-a, .submit-button, .resize-drawing-submit {
	width: 100%;
    margin-top: 0;
}
.blueBackground .btn {
	background-color: #FFF !important;
	color: #2979ff;
	font-size: 18px;
    text-transform: none;
    padding: 5px 30px !important;
}
.blueBackground label {
	color: #FFF;
	text-shadow: 0px 1px 1px rgba(0,0,0,0.5);
}
.icon-label {
	margin-left: 5px;
	vertical-align: middle;
}
.list-selection-images {
	max-height: 150px;
	width: 100%;
	overflow: auto;
	overflow-x: hidden;
}
.list-selection-images .preview-font {
	padding: 5px 3px;
	width: 100%;
	background-color: #FFF;
	line-height: 0;
}
.list-selection-images .preview-font:hover {
	background-color: #EEE;
	cursor: pointer;
}
.list-selection-images .preview-font img {
	height: 20px;
}
.list-selection-images .preview-font.active,
.list-selection-images .preview-font.active:hover {
	background-color: #2084fc;
}
.list-selection-images .preview-font.active img {
	-webkit-filter: invert(1);
	        filter: invert(1);
}
.list-selection-images img.active {

}
#tab-reference-preview img {
	width: 100%;
	margin-bottom: 5px;
    border-radius: 4px;
}
.icon-btn {
	color: #FFF;
	opacity: 0.25;
	font-size: 18px;
	height: 20px;
    padding: 0 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.icon-btn:hover {
	opacity: .75;
}
.icon-btn.active {
	opacity: 1;
}
.icon-stay-label {
	margin-left: 5px;
	vertical-align: middle;
}
.rotate-90 {
	transform: rotate(90deg);
}
.stamp-preview-ct {
	display: block
}
.stamp-save-header {
	padding: 5px;
	font-size: 12px;
}
.stamp-form-data label, .form-submit-ct label {
	color: #000;
}
.stamp-form-data label input, .stamp-form-data label select, .form-submit-ct label input, .form-submit-ct label textarea, .form-submit-ct label select {
	margin-top: 10px;
	height: auto !important;
}
form {
	margin-bottom: 0 !important;
}
.delete-stamp-btn, .approve-stamp-btn, .stamp-btn {
	color: #FFF;
	padding: 5px;
	font-size: 12px;
	background-color: rgba(0,0,0,0.4);
	border-radius: 2px;
	overflow: hidden;
	position: absolute;
	z-index: 2;
	left: 5px;
	top: 5px;
}
.approve-stamp-btn {
	left: 35px;
	top: 5px;
}
.favorite-stamp-btn {
	right: 5px;
	left: inherit;
}
.delete-stamp-btn:hover, .approve-stamp-btn:hover, .stamp-btn:hover {
	background-color: #000;
	cursor: pointer;
}
.favorite-stamp-btn.active {
	color: yellow;
}
.submit-drawing-wrapper {
	width: 100%;
}
.submit-drawing-wrapper .submit-third {
	float: left;
	width: 65%;
	display: inline-block;
	vertical-align: top;
}
.submit-drawing-wrapper .submit-third.submit-details.full {
	width: 100%;
}
.submit-drawing-wrapper .submit-third:last-child {
	float: right;
	width: 35%;
}
.form-submit-ct {
	width: 100%;
}
.submit-drawing-wrapper .submit-third:last-child .form-submit-ct {
	padding-left: 20px;
	width: calc(100% - 20px);
}
.disabled-field-group {
	position: relative;
}
.disabled-field-group .form-pre-fields {
	opacity: 0.25;
}
.disabled-field-group .disabled-lock-icon {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 26px;
	width: calc(100% + 20px);
	height: 100%;
	color: #000;
	padding: 5px;
	border-radius: 2px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	text-align: center;
	z-index: 2;
}
.text-helper-disabled {
	color: #333;
	font-size: 14px;
	margin-top: 10px;
	display: inline-block;
	max-width: 90%;
}
#pixilart-logo-left,
.show-ipad-land {
	display: none;
}
@media only screen and (min-width: 1024px) {
	.desktop-shown {
		display: none;
	}
}
@media only screen and (min-width: 1440px) {
	li.header-app-button.full-screen-wrap {
		display: inline-block;
	}
}
@media only screen and (min-width: 1366px) {
	.icon-label {
		display: inline-block;
	}
}
@media only screen and (min-width: 1400px) {
	.header-menu li.pad > div, .header-menu li.pad > .dropdown-type, .header-menu li.pad .btn-head, .nav-btn-type {
		padding: 0 10px;
	}
}
@media only screen and (max-width: 1366px) {
	.header-menu li.pad > div, .header-menu li.pad > .dropdown-type, .header-menu li.pad .btn-head, .nav-btn-type {
		padding: 0 8px;
	}
}
@media (max-width: 1024px) {
	.hide-b-lg {
		display: none;
	}
}
@media (max-width: 1280px) {
	.header-menu li.pad > div, .header-menu li.pad > .dropdown-type, .header-menu li.pad .btn-head, .nav-btn-type {
		padding: 0 7px;
	}
}
@media (max-width: 1279px) {
	.desktop-shown, .icon-label, li.header-app-button.full-screen-wrap {
		display: none;
	}
	.header-menu li.pad > div, .header-menu li.pad > .dropdown-type, .header-menu li.pad .btn-head, .nav-btn-type {
		padding: 0 10px;
	}
}
@media (max-width: 768px) {
	.hide-tablet-f {
		display: none !important;
	}
}
@media (max-width: 560px) {
	.hide-mobile-f {
		display: none !important;
	}
	.header-menu li.pad div .fa, .header-menu li.pad .btn-head .fa {
		font-size: 18px;
	}
}
@media only screen and (max-width: 1024px) {
	/*
	#pixilart-logo-center {
		display: none;
	}
	#pixilart-logo-left,
	.show-ipad-land {
		display: block;
	}
	.hide-ipad-land {
		display: none;
	}
	.desktop-shown, 
	.icon-label, 
	li.header-app-button.full-screen-wrap {
		display: inline-block;
	}
	.button-group-toolbar {
		width: 100%;
	}
	*/
	.defaul-app-button:hover, .header-app-button:not(.active):hover {
		background-color: inherit;
	}
}
@media only screen and (min-width: 1280px) {
	.show-m {
		display: inline-block;
	}
}
.header-menu .menu-button-main {
    text-align: left;
    padding: 0px 15px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.header-menu li.pad.menu-button-main.active .dropdown-type, 
.header-menu li.pad.menu-button-main.set .dropdown-type,
.header-menu li.pad.menu-button-main.active .dropdown-type .fa {
	background-color: #FFF;
	color: #000;
}
.menu-button-main:hover .dropdown-type .fa {
	color: #FFF;
}
.menu-button-main:hover .dropdown-type.nav-dropdown.active .fa {
	color: #000;
}
.header-menu li.pad.menu-button-main.set .dropdown-type,
.header-menu li.pad.menu-button-main.set .dropdown-toggle {
	color: #000 !important;
}
.header-menu li.pad.menu-button-main:hover a {
	color: #000 !important;
}
.header-menu li.pad.menu-button-main div:hover, .header-menu li.pad.menu-button-main div:active  {
    color: #000 !important;
}
.header-app-button.menu-button-main.active .sub-menu-wrapper,
.notifications-dropdown.active {
	background-color: #FFF;
	color: #000;
}
.header-app-button.menu-button-main.active .sub-menu-wrapper .submit-menu a {
	color: #000;
}
.header-app-button.menu-button-main.active .sub-menu-wrapper .submit-menu a:first-child {
	margin-top: 10px;
}
.header-app-button.menu-button-main.active .sub-menu-wrapper .submit-menu a:last-child {
	margin-bottom: 10px;
}
.header-app-button.menu-button-main.active .sub-menu-wrapper .submit-menu a:hover {
	background-color: #EEE;
}
.header-app-button.menu-button-main.active .sub-menu-wrapper .submit-menu .fa {
	background-color: inherit;
}
.menu-button-main .sub-menu-wrapper .submit-menu a {
	display: block;
}
.notification-count-drawing {
	color: #FFF;
    background-color: #00A1FF;
    padding: 2px 6px;
    border-radius: 25px;
    font-size: 14px;
	display: inline-block;
	position: absolute;
	right: 0;
    top: 3px;
}
.file-toggle .sub-menu-wrapper {
	left: 0 !important;
}
.notification-count-drawing.text-not {
	position: static;
	border-radius: 2px;
	margin-left: 5px;
}
.username-image {
	width: 40px;
}
.username-image img {
	width: 100%;
}
.menu-drop-show.application-draw {
	top: 43px;
}
.menu-drop-show.application-draw .notifications-menu {
	right: 0;
	overflow-x: hidden;
}
.menu-drop-show .notifications-menu .notification-list {
	width: auto;
}
.soft-hidden {
	display: none;
}
.submit-save-as {
	color: #444;
}
.submit-save-as:hover {
	color: #000;
	cursor: pointer;
}
.popup-hightlight {
	-webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,20%);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,.2)
}
.popup-hightlight.fx {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.popup-hightlight .icon {
	width: 25px;
	text-align: center;
}
.popup-hightlight .popup-text {
	width: calc(100% - 35px);
	margin-left: 10px;
}
.lighter .popup-hightlight {
	-webkit-box-shadow: none;
	        box-shadow: none;
}
.submit-save-as .popup-hightlight.normal-popupout {
	margin-bottom: 0!important;
	margin-top: 20px;
}
.submit-save-as .popup-hightlight.normal-popupout:hover {

}
.header-loading-drawing {
	font-size: 18px;
}
.drawing-submit-btn-group {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.submit-drawing-butn {
	width: 100%;
}
.drawing-submit-btn-group .upload-edit-btn {
}
.drawing-submit-btn-group  .save-edit-btn {
	width: 100%;
	margin-left: 15px;
	float: right;
}
.too-small-image-wrapper {
	background-color: #FFF;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 10px;
    line-height: 20px;
}
.error-submitting {
	display: none;
	color: #FFF;
	background-color: #D32F2F;
	border-radius: 4px;
	padding: 10px;
	text-align: center;
}
.da-end {
	margin-top: 10px;
	font-size: 12px;
	color: #999;
	position: relative;
}
.da-end .da-append {
	margin-top: 10px;
    background-color: #e8e8e8;
    border-radius: 8px;
    text-align: center;
}
.full-btn {
	width: 100%;
}
.pre-getting-text {
	padding: 10px 0;
}
.pre-getting-text .fa {
	position: relative;
    top: -1px;
    margin-bottom: 15px;
    float: right;
}
.go-to-image-btn {
	display: none;
}
.go-to-image-btn.active {
	display: inline-block;
}
#simple-ad {
	position: fixed;
	right: 0;
	bottom: 37px;
	background-color: #333;
	display: none;
	padding: 10px;
	z-index: 12;
	-webkit-transition: all 0.6s ease;
	-o-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
#simple-ad.show {
	display: block;
}
#simple-ad.show #ad-leaderboard, #simple-ad.show #ad-leaderboard-one, #simple-ad.show #ad-leaderboard-two, #simple-ad.show #ad-leaderboard-large {
	content-visibility: visible;
}
#simple-ad.hidden-ad #ad-leaderboard, #simple-ad.hidden-ad #ad-leaderboard-one, #simple-ad.hidden-ad #ad-leaderboard-two, #simple-ad.hidden-ad #ad-leaderboard-large {
	content-visibility: hidden;
}
.ad-close, #ad-close-secondary {
	border-radius: 2px 0 0 2px;
	padding: 8px;
	color: #FFF;
	position: absolute;
	right: 100%;
    background-color: #444;
	top: 0;
}
.ad-close.bottom {
	top: inherit;
	bottom: 0;
}
#ad-close-secondary {
	right: 0;
	top: -39px;
	height: 40px;
	display: none;
}
.ad-close:hover, #ad-close-secondary:hover {
	background-color: #555;
	cursor: pointer;
}
.ad-append-placement {
	max-height: 400px;
    overflow: hidden;
}
.ad-append-placement [data-freestar-ad] {
	max-height: 200px;
    display: block;
    height: auto;
    --height: auto;
}
.step-container {
    background-color: rgba(0,0,0,0.0);
    width: 100%;
    position: absolute;
    z-index: 99;
    left: 0;
    top: 0;
    height: 100%;
    display: none;
}
.step-explained {
    width: 250px;
    background-color: #FFF;
    border-radius: 4px;
    padding: 10px;
    position: absolute;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.3);
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.step-container .step-close {
	position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.step-explained.animate {
    -webkit-transition: all 0.25s ease-in-out;
}
.step-explained .caret {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
    position: absolute; 
    top: -5px;
}
.step-explained .caret.bottom {
	border-top: 5px solid #3498db;
	border-bottom: none;
    top: initial;
    bottom: -5px;
}
.step-data {
    width: 100%;
}
.step-footer {
    margin-top: 15px;
    width: 100%;
}
.step-footer .step-controls {
    width: 100%;
    text-align: right;
}
.step-footer .step-controls .step-counter {
    float: left;
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0;
    color: #FFF;
}
.step-footer .step-controls .step-button {
    outline: none;
    border: none;
    background: none;
    color: #FFF;
    padding: 5px 10px;
    display: inline-block;
    vertical-align: middle;;
}
.step-footer .step-controls .step-button:disabled {
    display: none;
}
.step-footer .step-controls .step-button:hover {
    cursor: pointer;
    background: rgba(0,0,0,0.1);
}
@media (max-width:1280px) { 
	.ad-append-placement {
		max-width: 970px;
	    overflow: hidden;
	}
}
.ad-text {
	font-size: 14px;
    width: 100%;
    max-width: 380px;
    display: block;
}
.ad-text.product {
	color: #FFF;
	padding: 10px;
    width: 100%;
    position: absolute;
    z-index: 3;
    border-radius: 0 0 4px 4px;
    bottom: 0;
    opacity: 0.9;
}
.ad-text h5, .ad-text h5 a {
	color: #FFF;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    margin-bottom: 5px;
    width: 100%;
    display: block;
}
.ad-text a {
	color: #FFF;
}
.show-mobile {
	display: none !important;
}
.submit-header {
	width: 100%;
	color: #777;
	margin-bottom: 20px;
}
.submit-header h3 {
	font-size: 18px;
	margin: 0;
	padding: 0;
	line-height: normal;
	color: #000;
	margin-bottom: 5px;
}
.add-buttons {
	width: 100%;
	padding: 10px;
}
.add-buttons a {
	color: rgba(255, 255, 255, 0.3);
	font-size: 12px;
	display: block;
}
.add-buttons a:hover {
	cursor: pointer;
	color: #FFF;
}
.select-helpers {
	position: absolute;
	display: none;
	z-index: 9;
}
.select-showable {
	display: none;
}
.select-helpers .select-grab {
	width: 24px;
	height: 24px;
	background-color: #FFF;
	border: thin solid #000;
	border-radius: 50px;
	position: relative;
}
.select-helpers .select-grab:hover {
	background-color: #EEE;
}
.select-helpers.select-helpers-x {
	cursor: e-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.select-helpers-w {
	cursor: w-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.select-helpers-y {
	cursor: s-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.select-helpers-n {
	cursor: n-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers  {
	cursor: -webkit-grab;
	cursor: grab;
	margin-top: 0px;
	margin-left: -8px;
}
.select-helpers.select-helpers-rotate {
	margin-left: -12px;
}
.select-helpers.select-helpers-se {
	cursor: se-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.select-helpers-sw {
	cursor: sw-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.select-helpers-nw {
	cursor: nw-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.select-helpers-ne {
	cursor: ne-resize;
	margin-top: -12px;
	margin-left: -12px;
}
.select-helpers.active, .select-showable.active {
	display: inline-block;
}
.select-helpers.ready {
	z-index: 11;
}
.select-helpers .select-tools-wrapper {
	display: inline-block;
	border-radius: 4px 0 0 4px;
	overflow: hidden;
	width: 42px;
	box-shadow: -5px 0px 6px #0000001c;
}
.select-helpers .select-tools-wrapper .select-tool {
	height: 32px;
    width: 100%;
    position: relative;
	color: #000;
	font-size: 14px;
	text-transform: uppercase;
	background-color: #FFF;
	text-align: center;
	outline: none;
    border: none;
    padding: 0;
    margin: 0;
}
.select-helpers .select-tools-wrapper .select-tool .fa {
	margin-right: 5px;
}
.select-helpers .select-tools-wrapper .select-tool.select-help .fa {
	margin-right: 0;
}
.select-helpers .select-tools-wrapper .select-tool:hover {
	cursor: pointer;
	background-color: #EEE;
}
.new-stamp-error {
	margin-top: 15px;
}
.ui-widget-content {
    background: #111;
    color: #FFF;
    font-size: 16px;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    position: fixed;
    z-index: 9999;
    max-width: 300px;
    padding: 10px 13px;
    border-radius: 2px;
    -webkit-box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.25);
	box-shadow: 3px 3px 7px 0 rgba(0,0,0,0.25);
}
.ui-helper-hidden-accessible {
	display: none;
}
input[type="range"] {
	border: none !important;
	width: auto;
}
input[type="range"].range-f {
	width: 100%;
}
input[type=range]+.thumb {
	display: none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
}

input[type=range]:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
	width: 100%;
	cursor: pointer;
	background: transparent; /* Hides the slider so custom styles can be added */
	border-color: transparent;
	color: transparent;
	position: relative;
	top: -2px;
}
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 1px solid rgba(0,0,0,0.5);
	height: 18px;
	width: 18px;
	border-radius: 25px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,545454+100 */
	background: rgb(125,126,125); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NDU0NTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
	background: -webkit-gradient(linear,  left top, left bottom,  from(rgba(125,126,125,1)),to(rgba(84,84,84,1)));
	background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(84,84,84,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#545454',GradientType=0 ); /* IE6-8 */
	cursor: pointer;
	margin-top: -7px;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	border: 1px solid rgba(0,0,0,0.5);
	height: 18px;
	width: 18px;
	border-radius: 25px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,545454+100 */
	background: rgb(125,126,125); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NDU0NTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(84,84,84,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#545454',GradientType=0 ); /* IE6-8 */
	cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
	-webkit-appearance: none;
	border: 1px solid rgba(0,0,0,0.5);
	height: 18px;
	width: 18px;
	border-radius: 25px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,545454+100 */
	background: rgb(125,126,125); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1NDU0NTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(125,126,125,1) 0%,rgba(84,84,84,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#545454',GradientType=0 ); /* IE6-8 */
	cursor: pointer;
}
.section-info {
	margin-bottom: 30px;
}
.section-info:last-child {
	margin-bottom: 0;
}
.section-info .section-info-header {
	margin-bottom: 10px;
}
.drawing-tool-container {
	background-color: #333;
    position: relative;
    display: inline-block;
    width: 195px;
    right: 0;
    top: 0;
    border-radius: 0 0 0 2px;
    z-index: 12;
}
.extra-tools-panel.tool-extra {
	width: 195px;
	right: 425px;
}
.extra-tools-panel.tool-extra .toggle-option {
	padding: 10px;
}
.extra-panel-content {
	background-color: #333;
}
.tool-title,
.toggle-label-helper {
	padding: 10px 0;
    color: rgba(255, 255, 255, 1);
    font-size: 10px;
    line-height: 14px;
    text-transform: uppercase;
    font-weight: normal;
    margin-top: 2px;
}
.range-wrapper {
	padding: 10px 0;
}
.toggle-label-helper {
	padding: 0;
	opacity: .5;
}
.drawing-tool-container:hover {
	z-index: 12;
}
.drawing-tool-container.left-side {
	left: 0;
	right: inherit;
}
.drawing-tool-container .toggle-option {
	padding: 5px 10px;
	font-size: 10px;
	color: #FFF;
	display: inline-block;
	vertical-align: middle;
}
.drawing-tool-container .toggle-option.soft-hidden {
	display: none;
}
.drawing-tool-container .toggle-option.soft-hidden.active {
	display: inline-block;
}
.drawing-tool-container .toggle-option [type="checkbox"]+label,
.toggle-option [type="checkbox"]+label {
	font-size: 10px;
	color: #FFF;
	text-transform: uppercase;
	line-height: normal;
}
.sidebar-options .toggle-option [type="checkbox"]+label {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.drawing-tool-container a {
	display: inline-block;
	padding: 10px;
	color: #FFF;
	font-size: 10px;
	text-transform: uppercase;

}
.drawing-tool-container a .fa {
	margin-right: 5px;
}
.drawing-tool-container a:hover {
	background-color: rgba(255, 255, 255, 0.2);
}
.drawing-tool-container .dropdown-tool-container {
	display: inline-block;
	vertical-align: middle;
	width: 100%;
}
.drawing-tool-container .dropdown-tool-container .fonts-selection {
	width: 100%;
	padding: 10px 6px;
    border-top: thin solid rgba(255, 255, 255, 0.35);
    border-bottom: thin solid rgba(255, 255, 255, 0.35);
}
.drawing-tool-container .dropdown-tool-container.soft-hidden {
	display: none;
}
.drawing-tool-container .dropdown-tool-container.soft-hidden.active {
	display: inline-block;
}
.mrg-mob-group {
	margin-bottom: 10px;
}
.p-content .hidden {
	display: block !important;
}
.extra-tools-panel {
	position: fixed;
	right: 215px;
    top: 55px;
	z-index: 12;
	border-radius: 4px;
	overflow: hidden;
	height: auto !important;
	border: thin solid #141518;
	/*
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.3);
	        box-shadow: 0 2px 10px rgba(0,0,0,.3);
	        */
}
.extra-tools-panel.hidden {
	display: none;
}
.extra-tools-panel .dragable-header {
    color: #fff;
    border-bottom: thin solid #222;
    background-color: #333;
    padding: 10px;
    font-size: 10px;
    text-transform: uppercase;
    cursor: move;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	overflow: hidden;
}
.extra-tools-panel .dragable-header .fa-handle {
	opacity: 1;
	margin-right: 5px;
}
.extra-tools-panel .dragable-header .close-extras, .extra-tools-panel .dragable-header .close-extras-tools {
	position: absolute;
    right: 0;
    font-size: 16px;
    padding: 6px 10px;
    top: 0;
}
.extra-tools-panel .dragable-header .close-extras:hover, .extra-tools-panel .dragable-header .close-extras-tools:hover {
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}
.zoom-buttons-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
  	-webkit-box-pack: justify;
  	    -ms-flex-pack: justify;
  	        justify-content: space-between;
}
.zoom-buttons-wrapper div {
	width: 50%;
	display: inline-block;
    padding: 10px 0 10px 10px;
    color: #FFF;
    font-size: 10px;
    text-transform: uppercase;
}
.zoom-buttons-wrapper div:hover {
	cursor: pointer;
	background-color: rgba(255,255,255,0.2);
}
.zoom-buttons-wrapper div .fa {
	margin-right: 5px;
}
.cords-drawing-container {
	color: #FFF;
	padding: 10px;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 12px;
	line-height: normal;
}
.size-drawing-container {
	color: #FFF;
	padding: 10px;
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: 12px;
	line-height: normal;
}
.color-switchable {
	position: absolute;
    color: rgba(255,255,255,0.5);
    padding: 2px;
    border-radius: 2px;
    left: 16px;
    margin-top: 3px;
}
@media only screen and (max-height: 672px) {
	.color-switchable {
		left: 10px;
	}
}
.color-switchable:hover {
	cursor: pointer;
	color: rgba(255,255,255,1);
}
.colors-bar-wrapper {
	width: 100%;
	margin: 5px 0;
	overflow-y: scroll;
	white-space: nowrap;
}
.colors-bar-wrapper .color-select, .color-popup {
	margin: 10px;
	height: 30px;
    width: 30px;
}
.cs-k-w {
	background-color: #333;
	border-radius: 4px;
	margin-top: 10px;
	margin-bottom: 5px;
	-webkit-transition: all .15s ease-out;
	-o-transition: all .15s ease-out;
	transition: all .15s ease-out;
}
.cs-k-w.bru-d {
	background-color: #FFF;
}
.lighter .cs-k-w {
	background-color: #eee;
}
.cs-k-w:hover {
	cursor: pointer;
	-webkit-transform: translateY(-3px);
	    -ms-transform: translateY(-3px);
	        transform: translateY(-3px);
	-webkit-box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !important;
	        box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08) !important;
}
.cs-k-w .cs-k-image {
	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: middle;
    min-height: 50px;
    max-height: 50px;
    border-radius: 2px;
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.cs-k-w .br-image {
	padding: 10px 0;
}
.cs-k-w .br-image img {
	min-height: 25px;
	max-height: 50px;
}
.cs-k-w .cs-k-image img {
    max-width: 100%;
    max-height: 100%;
    -ms-flex-line-pack: center;
    align-content: center;
    min-height: 40px;
    min-width: 40px;
}
.cs-k-w .cs-k {
	margin-top: 3px;
	text-align: center;
	color: #FFF;
	text-transform: uppercase;
}
.lighter .cs-k-w .cs-k {
	color: #000;
}
.show-mobile-mode {
	display: none;
}
.sidebars-mobile-close {
	display: none;
}
@media (max-width:1600px) { 
	.stamp-container.full .append-stamps-preview .stamp-pre {
		width: 20%;
	}
}
@media (max-width:1024px) and (min-width:768px) { 
	.popup-container .popup-container-wrapper .popup-wrapper {
		width: 75%;
	}
	.popup-container .popup-container-wrapper {
		padding: 50px 0;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content { 
	}
	.stamp-container.full .append-stamps-preview .stamp-pre {
		width: 25%;
	}
	#drawing-container #right-sidebar {
		width: 200px;
	}
	.color-select {
		width: 25%;
	}
	.header-menu li.pad div .fa, .header-menu li.pad .btn-head .fa {
		font-size: 16px;
	}
	.submit-drawing-wrapper .submit-third {
		width: 100%;
		float: none;
	}
	.submit-drawing-wrapper .submit-third:last-child {
		width: 100%;
		margin-top: 15px;
	}
	.submit-drawing-wrapper .submit-third:last-child .form-submit-ct {
		padding: 0;
		width: 100%;
	}
}
@media (max-width:768px) and (min-width:278px) { 
	::-webkit-scrollbar {
		display: none;
	}
	.hide-tablet-mode {
		display: none !important;
	}
	.show-mobile-mode {
		display: block !important;
	}
	.cords-drawing-container {
		top: 50px !important;
    	left: 0px !important;
	}
	.size-drawing-container {
		top: 0px !important;
	    right: 0px !important;
	    text-align: right;
	}
	#select-size-display {
		left: 10px;
    	bottom: 5px;
	}
	#right-sidebar {
		overflow-y: visible;
	}
	#right-sidebar.active .sidebars-mobile-close,
	#left-sidebar.active .sidebars-mobile-close {
	    font-size: 16px;
	    text-transform: uppercase;
	    display: inline-block;
	    color: #FFF;
	    position: absolute;
	    background-color: #333;
	    border-radius: 0px 0 0 4px;
	    padding: 10px 15px;
	    top: 0px;
	    right: -39px;
	}
	#right-sidebar.active #mobile-right-close {
		left: -39px;
		right: inherit;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head,
	.popup-modal .panel-sidebar { 
		min-height: auto;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.ls {
		margin-bottom: 0;
	}
	.popup-container .popup-container-wrapper .popup-wrapper {
		top: 20px;
	}
	span.inline-frame-bt {
		display: none;
	}
	.popup-container .popup-container-wrapper {
		padding: 40px 0;
	} 
	#drawing-container #right-sidebar {
	}
	#drawing-container {
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
	}
	#drawing-container #left-sidebar {
		left: -150px;
		width: 150px;
		height: 100%;
		position: fixed;
		top: 45px;
		z-index: 12;
		-webkit-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		border-top: none;
	}
	#drawing-container #drawing-canvas-conatiner {
		height: 100%;
		width: 100%;
		background-color: inherit;
		position: absolute;
		margin-top: 0;
	}
	#toolbar {
		height: 45px;
	}
	#drawing-container #left-sidebar.active {
		left: 0;
		width: 150px;
		z-index: 13;
	}
	.secondary-color, .primary-color, .color-presets, #new-preset-color  {
		display: none;
	}
	#drawing-container #right-sidebar {
		right: -230px;
		height: 100%;
		position: fixed;
		top: 45px;
		z-index: 13;
		-webkit-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
		border-top: none;
	}
	.sidebar-tab-container {
		background-color: #333;
		height: 100%;
	    overflow-y: auto;
	    padding-bottom: 50px;
	}
	.sidebar-tab-container .sidebar-content-wrapper {
		width: 100%;
		margin-left: 0;
	}
	#drawing-container #right-sidebar.active {
		right: 0;
		height: 100%;
		overflow-y: visible;
	}
	#frames-placement {
		bottom: -300px;
		z-index: 12;
		-webkit-transition: all 0.25s ease-in-out;
		-o-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}
	#frames-placement.active {
		bottom: 0;
	}
	#frames-placement #frames-container {
		display: block;
		padding: 10px 10px 15px 10px;
		padding-bottom: 80px;
	}
	.popup-container  .popup-container-wrapper .popup-wrapper {
		width: 90%;
		max-height: 95%;
		overflow-y: auto;
	}
	.submit-drawing-wrapper .submit-third {
		width: 100%;
		float: none;
	}
	.submit-drawing-wrapper .submit-third:last-child {
		width: 100%;
		float: none;
		margin-top: 10px;
		display: none;
	}
	.submit-drawing-wrapper .submit-third:last-child .form-submit-ct {
		width: 100%;
		padding-left: 0;
	}
	.hide-mobile,
	.hide-mobile.header-menu {
		display: none;
	}
	.button-group-toolbar {
		width: 0;
	}
	.header-menu .menu-button-main {
		margin-left: 0 !important;
	}
	.defaul-app-button:hover, .header-app-button:hover {
		background-color: inherit;
	}
	.header-app-button.active {
		background-color: rgb(68 68 68);
	}
	.button-group-toolbar.logo-placement {
		width: 100%;
	}
	.header-menu .menu-button-main {
		padding: 0 5px;
	}
	.header-menu {
	    display: -ms-flexbox;
	    display: -webkit-box;
	    display: flex;
	    -ms-flex-align: center;
	    -webkit-box-align: center;
	            align-items: center;
	    -ms-flex-line-pack: center;
	    align-content: center;
	    height: 45px;
	}
	.show-mobile {
		display: inline-block !important;
	}
	ul.logo-main li {
		width: 100%;
	}
	ul.logo-main li.toggle-sub {
		width: auto;
		position: absolute;
		text-align: left;
	}
	ul.logo-main li a {
		width: 100%;
		text-align: center;
	}
	ul.logo-main li.toggle-sub a {
		text-align: left;
	}
	.footer-mobile-buttons {
		bottom: 0;
		width: 100%;
		z-index: 11;
		background-color: #222;
		padding-top: 5px;
	}
	.mobile-header {
		top: 45px;
		width: 100%;
		z-index: 11;
		background-color: #222;
	}
	.lighter .mobile-header, .lighter .footer-mobile-buttons {
		background-color: #EEE;
	}
	.lighter .half-group .mobile-btn, .lighter .mobile-buttons-footer a.mobile-btn {
		color: #000;
		border-color: #000;
	}
	.sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs.active:hover {
		background-color: #fff;
	}
	.half-group {
		width: 100%;
		display: inline-block;
	}
	.half-group.mrgtp-fix {
		margin-top: -10px;
	}
	.half-group .half-section {
		width: 50%;
		padding: 10px;
		float: left;
	}
	.half-group .third-section {
		width: 33.33%;
		padding: 0 10px 0px 10px;
		float: left;
	}
	.half-group .mobile-btn {
		display: inline-block;
		width: 100%;
		text-align: center;
		padding: 10px 0;
		border: thin solid rgba(255,255,255,0.4);
		border-radius: 4px;
		color: #FFF;
		font-size: 14px;
	}
	.submit-drawing {
		width: calc(100%);
	    padding: 10px;
	    display: inline-block;
	    color: #FFF;
	    text-align: center;
	    border-radius: 4px;
	    margin-top: 0;
	}
	.colorpicker {
		left: 0 !important;
	}
	.panel #layers-container {
		min-height: 200px;
	}
	.popup-container .popup-container-wrapper .popup-close-button.mobile-close-button {
		display: block !important;
	}
	.presets-wrapper .preset-select {
		width: 49%;
	}
	.presets-wrapper .preset-select:nth-child(2n) {
		margin-right: 0;
	}
	.presets-wrapper .preset-select:nth-child(3n) {
		
	}
	#drawing-container #drawing-canvas-conatiner {
		overflow: hidden;
	}
	#canvas-layers-container {
		margin-top: 0;
	}
	.tool-selection {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		text-align: center;
	}
	.show-mobile .fa {
		margin-right: 5px;
	}
	.close-preview {
		top: 0;
		right: 0;
		padding: 5px 3px;
		color: #fff;
    	font-size: 26px;
    	border: none;
    	background-color: inherit;
    	-webkit-box-shadow: none;
    	        box-shadow: none;
    	text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	}
	.mobile-buttons-footer {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		margin: 0 10px;
    	margin-bottom: 10px;
	}
	.mobile-buttons-footer.ls {
		margin-bottom: 10px;
	}
	.mobile-buttons-footer a.mobile-btn {
	    padding: 10px;
	    border: thin solid rgba(255,255,255,0.4);
	    color: #FFF;
	    text-align: center;
	    border-radius: 4px;
	    width: 100%;
	    margin-right: 20px;
	}
	.mobile-buttons-footer a.mobile-btn:last-child {
		margin-right: 0;
	}
	.mobile-buttons-footer a.mobile-btn .fa {
		margin-right: 0;
	}
	.preview-download {
		padding: 15px;
		display: inline-block;
		position: fixed;
	}
	.panel .panel-header {
		max-height: 60px;
	}
	.header-app-button {
		font-size: 16px;
	}
	#frames-placement .header-app-button {
		padding: 15px 20px;
	}
	.drawing-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.tool-selection.active img {
		background-color: rgba(255,255,255,0.25);
    	border-radius: 4px;
	}
	.tool-selection {
		margin-bottom: 5px;
	}
	.colors-bar-wrapper {
		overflow-y: auto;
		margin: 5px 10px 2px 10px;
		padding-right: 15px;
	}
	.colors-bar-wrapper .color-select, .colors-bar-wrapper .color-popup {
		margin: 5px 5px;
		float: none;
	}
	.colors-bar-wrapper .color-select:first-child {
		margin-left: 0;
	}
	.colors-bar-wrapper .color-select:last-child {
		margin-left: 5px;
		margin-right: 20px;
	}
	.colors-bar-wrapper .color-popup {
		background: #ff3932;
		background: -o-linear-gradient(315deg, #ff3932 0%,#ffff28 22%,#47ff32 40%,#32fffb 58%,#282fff 76%,#ff28fb 100%,#ff8c8c 100%);
		background: linear-gradient(135deg, #ff3932 0%,#ffff28 22%,#47ff32 40%,#32fffb 58%,#282fff 76%,#ff28fb 100%,#ff8c8c 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3932', endColorstr='#ff8c8c',GradientType=1 );
		display: inline-block;
		border-radius: 4px;
		margin-right: 10px;
		float: left;
	}
	.mobile-color-container .color-select:hover, .mobile-color-container .color-select.active {
		-webkit-box-shadow: 0 0 0 2px rgb(0, 0, 0);
    	box-shadow: 0 0 0 2px rgb(0, 0, 0);
    	border-radius: 4px;
	}
	.color-select {
		padding: 0;
	}
	.mobile-color-container .color-select {
		padding: 2px;
		aspect-ratio: 1/1;
	}
	.color-select.active {
		-webkit-box-shadow: 0 0 0 2px rgb(255, 255, 255);
    	box-shadow: 0 0 0 2px rgb(255, 255, 255);
    	border-radius: 4px;
    	overflow: hidden;
	}
	.color-select.active:after {
		border-radius: 6px;
	}
	.menu-drop-show.application-draw .notifications-menu {
		width: 100%;
	}
	.presets-wrapper .preset-select {
		width: 48%;
	}
	.tool-selection img, .non-tool-selection img {
		height: 52px;
		-ms-interpolation-mode: -webkit-optimize-contrast;
		image-rendering: nearest-neighbor;
		image-rendering: optimizeSpeed;
	    image-rendering: -moz-crisp-edges;
	    image-rendering: -webkit-optimize-contrast;
	    image-rendering: optimize-contrast;
	    image-rendering: -o-pixelated;
	    -ms-interpolation-mode: nearest-neighbor;
	    image-rendering: pixelated;
	}
	.new-content-container {
		margin-left: 0 !important;
	}
	.color-select .color-block {
		width: calc(100% - 2px);
    	height: calc(100% - 2px);
    	padding-top: 0;
    	border-radius: 6px;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap { 
		display: block;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head {
		width: 100%;
		white-space: nowrap;
    	overflow-x: scroll;
    	padding: 0px 15px;
    	border-bottom: 2px solid #1b1b1b;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .p-sidebar, 
	.popup-modal .panel-sidebar .sidebar-body {
		padding: 20px 0 15px 0;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn {
		width: auto;
		padding: 5px 20px;
		margin-right: 15px;
		margin-bottom: 0;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn:last-child {
		margin-right: 0;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content .above-container.mobile {
		padding: 0px;
	}
	.header-menu li.pad > div, .header-menu li.pad > .dropdown-type, .header-menu li.pad .btn-head, .nav-btn-type {
		padding: 0 15px;
	}
}
@media (max-width:380px) {
	.mobile-buttons-footer a.mobile-btn {
		margin-right: 10px;
	}
}
@media (max-width:996px) and (min-width:278px) {
	.hide-ip-d {
		display: none;
	}  
	.new-content-container {
		margin-left: 0 !important;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container .share-button-image {
		font-size: 14px;
	} 
}
@media (max-width:1536px) {
	.popup-container .popup-container-wrapper .popup-wrapper {
		width: 65%;
	}
}
@media (max-width:1366px) {
	.popup-container .popup-container-wrapper .popup-wrapper {
		width: 75%;
	}
}
/* iPad 1024x768 settings */
@media (max-width:1024px) and (min-width:1024px) {
	.ipad-show-i {
		display: inline-block !important;
	}
	.ipad-hide-i {
		display: none !important;
	}
	.panel #layers-container {
	    min-height: 105px;
	}
	#extras-colors-toggle {
		display: none;
	}
	.mouse-information {
		display: none;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head .share-popup-container .share-button-image {
		font-size: 14px;
	}
}
/* iPad 1024 - 1080 settings */
@media (max-width:1080px) and (min-width:1024px) {
	#drawing-tool-options #tool-option-appended .appened-options .range-wrapper {
		width: 50px;
	}
}
@media (max-width:768px) {
	.header-menu .menu-button-main.nav-dropdown-main {
		display: none !important;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.ls.ad {
		margin-bottom: 0;
	}
}
@media (max-width:450px) {
	.color-select .color-block {
		width: calc(100% - 2px);
	    height: calc(100% - 2px);
	    padding-top: 0;
	}
	.popup-container .popup-container-wrapper .popup-wrapper {
		width: 90%;
	}
	.switch {
		margin-top: 10px;
	}
	.settings-butn {
		margin-top: 10px;
	}
	.screen-sizer {
		height: 100%;
	}
	.hidden-xs {
		display: none !important;
	}
	.popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.ls.ad {
		margin-bottom: 0;
	}
	.stamp-container.full .append-stamps-preview .stamp-pre {
		width: 50%;
	}
}
.switchable-tool {
	position: relative;
	width: 50%;
    float: left;
    border-radius: 2px;
}
.switchable-tool .tool-selection {
	width: 100%;
	float: none;
}
.switchable-container {
	display: inline-block;
	border: thin solid #999;
	border-radius: 2px;
	position: relative;
	background-color: #FFF;
	margin: 10px;
}
.switchable-container:hover {
	cursor: pointer;
}
.switchable-view .activate-switch-wrapper {
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 2px;
}
.switchable-view .activate-switch-wrapper .fa {
	padding: 0 1px;
	margin: -2px 0;
	line-height: 1px;
	font-size: 12px;
	color: #FFF;
	-webkit-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
    margin-right: -5px;
    position: relative;
    bottom: -5px;
}
.selectable-switch-wrapper {
	display: none;
}
.selectable-switch-wrapper.active {
	display: block;
}
.selectable-switch-wrapper .select-able-switch {
	display: block;
}
.panel-frames-header {
	cursor: pointer;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.ui-tooltip {
	display: none !important;
}
.ui-tooltip:last-child {
	display: inline-block !important;
}
.settings-butn {
	font-size: 10px;
    height: auto;
    line-height: normal;
    padding: 10px 15px !important;
    margin-right: 5px;
}
.btn.white  {
	color: #000;
}
.close-popup-button {
	font-size: 12px;
	display: inline-block;
	margin-top: 15px;
}
.popup-hightlight {
	background-color: #2979ff;
    color: #FFF;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    display: block;
    overflow: hidden;
}
.popup-hightlight.old-version-access {
	background-color: #FFF;
	color: #555;
	margin-bottom: 20px;
}
.popup-hightlight.old-version-access a {
	color: #555;
	text-decoration: underline;
}
.popup-hightlight.normal-popupout {
	color: #FFF;
	background-color: #333;
	border-left: 4px solid #FF9800;
	font-size: 14px;
}
.popup-hightlight.normal-popupout .fa {
	color: #FF9800;
}
.popup-hightlight.highlight-popupout {
	color: #FFF;
	background-color: #333;
	border-left: 4px solid #2979ff;
	font-size: 14px;
	line-height: normal;
}
.lighter .popup-hightlight.highlight-popupout,
.lighter .popup-hightlight.normal-popupout {
	color: #000;
	background-color: #EEE;
}
.popup-hightlight.normal-popupout.primary {
	border-left: 4px solid #2979ff;
}
.popup-hightlight.normal-popupout.primary .fa,
.popup-hightlight.highlight-popupout .fa {
	color: #2979ff;
}
.popup-hightlight.normal-popupout h2 {
	margin-bottom: 0;
}
.icon-right-large {
	position: absolute;
	right: -25px;
	top: -25px;
	font-size: 72px;
	opacity: 0.25;
	color: #FFF;
}
.p-content .popup-hightlight:last-child {
	margin-bottom: -5px;
}
.presets-selection {
	margin-top: 10px;
	display: inline-block;
    width: 100%;
}
.older-version-text {
	display: none;
	position: relative;
    z-index: 9999;
    max-width: 250px;
    margin-top: 30px;
}
.open-pix-callout {
	cursor: pointer;
}
.d-flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.align-items-center {
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.info-about h1 {
	font-size: 20px;
	color: #000;
	margin: 0 0 10px;
}
.info-about h2 {
	font-size: 16px;
	color: #555;
	margin: 0;
	margin-bottom: 15px;
}
.amazing-work-head {
	display: block;
	color: #000;
	font-weight: bold;
	margin-bottom: 10px;
}
.extrude-from-layers {
}
#hue-extrude.active {
	display: block;
}
.extrude-from-layers .hue-change-container,
.range-layer-wrapper {
	padding: 10px 15px;
	background-color: #333;
	border-radius: 2px 0 0 2px;
	text-align: left;
    text-transform: uppercase;
}
.extrude-from-layers .hue-change-container .hue-range .hue-wrapper,
.range-layer-wrapper .item-range .range-val-wrapper {
	width: 100%;
	font-size: 12px;
	color: #FFF;
	margin-top: 5px;
}
.extrude-from-layers .hue-change-container .hue-range .hue-wrapper .hue-text,
.range-layer-wrapper .item-range .range-val-wrapper .range-text {
	display: inline-block;
	float: left;
}
.extrude-from-layers .hue-change-container .hue-range .hue-wrapper .hue-text:last-child,
.range-layer-wrapper .item-range .range-val-wrapper .range-text:last-child {
	float: right;
}
.extrude-from-layers .extrude-header,
.range-layer-wrapper .extrude-header {
	font-size: 10px;
	color: #FFF;
}
.header-menu .save-stamp-selection {
	background: #cb2d3e;
    background: -o-linear-gradient(left, #ef473a, #cb2d3e);
    background: -webkit-gradient(linear, left top, right top, from(#ef473a), to(#cb2d3e));
    background: linear-gradient(to right, #ef473a, #cb2d3e);
    margin-right: -4px;
    color: #FFF !important;
}
.header-menu .save-stamp-selection:hover {
	background: #f17369;
	background: -o-linear-gradient(left, #f17369, #da6673);
	background: -webkit-gradient(linear, left top, right top, from(#f17369), to(#da6673));
	background: linear-gradient(to right, #f17369, #da6673);
}
.navigation-scroller {
  	width: 100%;
  	max-height: 125px;
  	min-height: 125px;
  	text-align: center;
  	background-color: #444;
  	overflow: hidden;
  	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.navigation-scroller .nav-canvas-img {
	max-width: 100%;
	max-height: 125px;
	background-color: #FFF;
	display: none;
}
.navigation-scroller .nav-canvas-wrapper {
	position: relative;
	overflow: hidden;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.navigation-scroller .nav-canvas-wrapper .nav-canvas-content {
	display: inline-block;
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.navigation-scroller .nav-canvas-wrapper .nav-placement {
	position: absolute;
	-webkit-box-shadow: 0px 0px 0px 1px #0033ff, 0 0 0px 2px #FFF;
	        box-shadow: 0px 0px 0px 1px #0033ff, 0 0 0px 2px #FFF;
	cursor: move;
	display: none;
	background-color: rgba(0,0,0,0.25);
	outline: 2px solid #0033ff;
}
.panel-extras {
	width: 100%;
}
.panel-extras .button-panel-empty {
	display: inline-block;
	padding: 5px 10px;
}
.panel-extras .button-panel-empty label {
	color: #FFF;
	font-size: 10px;
	text-transform: uppercase;
}
.preview-buttons-cont {
	display: inline-block;
	width: 100%;
}
.preview-buttons-cont .preview-buttons-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.preview-buttons-cont .preview-buttons-wrapper .fa {
	margin-right: 5px;
}
.preview-buttons-cont .preview-buttons-wrapper .header-app-button {
	margin: 0;
	padding: 12px 0 12px 0;
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
	font-size: 10px;
	width: 50%;
	text-align: center;
	text-transform: uppercase;
}
.preview-buttons-cont .preview-buttons-wrapper .header-app-button.preview-select {
	padding: 9px 0 12px 12px;
}
/* Lighter Section */
.lighter #toolbar, .lighter #frames-placement {
	background-color: #FFF;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.lighter .header-menu li.pad a, 
.lighter .defaul-app-button, 
.lighter .header-app-button, 
.lighter .frame-button, 
.lighter .frames-controls,
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-btn,
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap,
.lighter .popup-container .popup-container-wrapper label, 
.lighter .popup-modal label,
.lighter .sect-header,
.lighter .popup-container .popup-container-wrapper select, 
.lighter .popup-container .popup-container-wrapper input, 
.lighter .popup-container .popup-container-wrapper textarea,
.lighter .input-normal, 
.lighter .popup-modal select, 
.lighter .popup-modal input, 
.lighter .popup-modal textarea,
.lighter .btn.secondary  {
	color: #000;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.active, 
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-btn.force_active {
	color: #FFF;
}
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-header, 
.lighter .popup-modal .panel-header, 
.lighter .popup-container .popup-container-wrapper .popup-wrapper .p-content-wrap .p-content-sidebar-head, 
.lighter .popup-modal .panel-sidebar,
.lighter .settings-details .sect,
.lighter .button-filters .filter-btn:not(.active) {
	border-color: #CCC;
}
.lighter .p-seperator,
.lighter .switch label .lever {
	background-color: #CCC;
}
.lighter .sect-header,
.lighter .btn.secondary {
	background-color: #EEE;
}
.lighter .popup-container .popup-container-wrapper select, 
.lighter .popup-container .popup-container-wrapper input, 
.lighter .input-normal,
.lighter .popup-container .popup-container-wrapper textarea, 
.lighter .popup-modal select, 
.lighter .popup-modal input, 
.lighter .popup-modal textarea {
	background-color: #EEE;
	border-color: #EEE;
}
.lighter .header-menu li.pad > a, .lighter .header-menu li.pad > .dropdown-type, .lighter .tools-header, .lighter .panel .panel-header, .lighter .opacity-change .opacity-number, .lighter .header-menu li.pad>div, .lighter .header-menu li.pad>.dropdown-type, .lighter .zoom-buttons-wrapper div, 
.lighter .header-menu li.pad div, 
.lighter .header-menu li.pad .btn-head {
	color: #000;
}
.lighter .header-app-button.active .sub-menu-wrapper, 
.lighter .extra-tools-panel .dragable-header, 
.lighter .drawing-tool-container,
.lighter .extra-panel-content
{
	background-color: #FFF !important;
}
.lighter .header-app-button .sub-menu-link:hover {
	background-color: rgba(0,0,0,0.1);
}
.lighter .defaul-app-button:hover, .lighter .header-app-button:hover, .lighter .header-app-button.active {
	background-color: rgba(0,0,0,0.1);
}
.lighter #drawing-container #left-sidebar, .lighter #drawing-container #right-sidebar {
	background-color: #FFF;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.lighter .extrude-from-layers .hue-change-container {
	background-color: #FFF;
}
.lighter #square-tool div, .lighter #line-tool div, .lighter #circle-tool div, .lighter #text-tool div, .lighter #dithering-tool div, .lighter #move-tool div, .lighter .mirror-tool div, .lighter #resize-pix div {
	-webkit-filter: invert(100%);
	        filter: invert(100%);
}
.lighter #secondary-color {
	border: thin solid #999;
}
.lighter #drawing-container #drawing-canvas-conatiner {
	background-color: #c7c7c7;
	border: thin solid #CCC;
}
.lighter #canvas-layers-container {
	-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.5);
	        box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.5);
}
.lighter .layer-list.active {
	background-color: rgba(0,0,0,0.05);
}
.lighter .color-switchable {
	color: #000;
}
.lighter .color-switchable:hover {
	color: rgba(0,0,0,1);
}
.lighter .icon-btn {
	color: #000;
	opacity: .5;
}
.lighter .icon-btn:hover {
	opacity: .75;
}
.lighter .layer-list, 
.lighter .select-back, 
.lighter .panel-extras .button-panel-empty label, 
.lighter .mouse-information, 
.lighter .add-buttons a, 
.lighter .preview-select, 
.lighter .drawing-tool-container a, 
.lighter .drawing-tool-container .toggle-option [type="checkbox"]+label, 
.lighter .drawing-tool-container .pixel-size, 
.lighter .extra-tools-panel .dragable-header, 
.lighter #preview-size-change, 
.lighter .extrude-from-layers .extrude-header, 
.lighter .extrude-from-layers .hue-change-container .hue-range .hue-wrapper  {
	color: #000 !important;
}
.lighter .extra-tools-panel {
	border: thin solid #CCC;
}
.lighter .zoom-buttons-wrapper a:hover {
	background-color: rgba(0,0,0,0.1);
}
.lighter .frame-controllers {
	background-color: #EEE;
}
.lighter .panel .panel-container {
	background-color: rgba(0,0,0,0.1);
}
.lighter .navigation-scroller {
	background-color: #EEE;
}
.lighter .select-back, {
	background-color: #FFF;
}
.lighter .select-back:hover, 
.lighter .select-back:focus {
	background-color: #eee;
}
.lighter .tool-selection:hover, .lighter .non-tool-selection:hover {
	background-color: rgba(0,0,0,0.05);
}
.lighter .tool-selection.active {
	background-color: #2084fc;
}
.lighter .header-menu .menu-button-main:hover a.dropdown-type {
	background-color: rgba(0,0,0,0.05);
}
.lighter .special-tools-wrapper .wrapper-double .mirror-tool.active, .lighter .special-tools-wrapper .wrapper-double .mirror-tool:hover {
	background-color: rgba(0,0,0,0.15);
}
.lighter #simple-ad {
	background-color: #CCC;
}
.lighter .ad-close {
	background-color: #CCC;
	color: #000;
}
.lighter .extra-panel-content .tool-title, 
.lighter .toggle-option [type="checkbox"]+label
{
	color: #000;
}
.lighter .extra-panel-content .toggle-label-helper 
{
	color: #000;
}
.lighter .ad-close:hover {
	background-color: #999;
}
.lighter .drawing-modal {
	background-color: #fff;
    border: 1px solid rgba(0,0,0,0.20);
}
.lighter .extra-tools-panel .dragable-header {
	border-bottom: thin solid #CCC;
}
.lighter .inline-btns .options-app-button, 
.lighter .inline-set .options-app-button ,
.lighter .section  .section-content .text
{
	color: #000;
}
.lighter .inline-btns .options-app-button:hover, 
.lighter .inline-set .options-app-button:hover 
{
	background-color: rgba(0, 0, 0, 0.1);
}
.lighter .stamp-container .stamp-header, 
.lighter .button-filters .stamp-filter-btn, 
.lighter .drawing-modal .modal-header, 
.lighter .button-filters .filter-btn,
.lighter .button-filters .filter-btn:hover,
.lighter .button-filters .filter-btn.active,
.lighter .panel .panel-check 
{
	color: #000;
}
.lighter .color-preset-item {
	background-color: #EEE;
}
.lighter .color-preset-item .user-details {
	color: #000;
}
.lighter .append-stamps-preview .stamp-pre {
	-webkit-box-shadow: 1px 1px 10px 0 rgba(0,0,0,.25);
	        box-shadow: 1px 1px 10px 0 rgba(0,0,0,.25);
}
.lighter .search-filter-input .stamp-filter-by-search,
.lighter .search-filter-input .panel-search-filter {
	background-color: rgba(0,0,0,0.1);
}
.lighter .color-select:hover, .lighter  .color-select.active {
	-webkit-box-shadow: 0 0 0 2px rgba(0,0,0,1);
    box-shadow: 0 0 0 2px rgba(0,0,0,1);
}
.lighter .size-drawing-container, .lighter .cords-drawing-container {
	color: #777;
}
.lighter .frames-controls .frame-button:hover {
	background-color: rgba(0,0,0,0.1);
}
.lighter .bbottom {
	border-bottom: thin solid rgba(0,0,0,0.1);
}
.lighter .sidebar-tab-container {
	background-color: #EEE;
}
.lighter .sidebar-tab-container .sidebar-content-wrapper {
	background-color: #FFF;
}
.lighter .sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs {
	color: #000;
}
.lighter .sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs:hover { 
	background-color: #EEE;
}
.lighter .sidebar-tab-container .sidebar-tabs-wrapper .sidebar-tabs.active {
	background-color: #FFF;
}
.lighter .section .section-header,
.lighter .section .section-title,
.lighter .section .pixel-size {
	color: #000;
}
.lighter .section .section-icon {
	color: #000;
}
.lighter .section .section-icon:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
.lighter .section.fixed {
	background-color: #FFF;
}
.lighter .select-back {
	background-color: #FFF;
}
.lighter #drawing-container #left-sidebar #tool-multi {
	background-color: #FFF;
}
.lighter #drawing-container #left-sidebar .tool-multi-opt:hover {
	background-color: rgba(0,0,0,0.05);
}
.step-explained {
	background: #286FE2;
	color: #FFF;
	padding: 15px;
	font-size: 14px;
}
.step-explained .caret {
	border-bottom-color: #286FE2;
}
.step-explained .caret.bottom {
	border-top: 5px solid #286FE2;
}
.step-data h5 {
	margin-top: 0;
	font-size: 16px;
}
.step-footer .step-controls .step-button, .step-footer .step-controls button {
	background: none;
	border: none;
	outline: none;
	padding: 8px 10px;
	border-radius: 2px;
}
.step-footer .step-controls .step-counter {
    padding: 8px 0;
}
.step-controls button:disabled {
	display: none;
}
.step-controls button:hover {
	background: rgba(0,0,0,0.1);
	cursor: pointer;
}
.tool-selection,
.non-tool-selection {
	height: 48px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	background-repeat: no-repeat;
	background-position: center center;
}
.shop-product-placement {
	max-width: 380px;
	width: 100%;
	margin-top: 15px;
	background-color: #FFF;
	text-align: center;
	padding: 20px;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}
.shop-product-placement:after {
	content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 25%;
    background-color: #2979ff;
    border-radius: 4px 4px 0 0;
    background-image: url(https://static.pixilart.com/images/public/shop-wrap-bg-transparent.png);
    background-position: center;
}
.new-container {
	margin: -20px;
	width: calc(100% + 40px);
}
a.tab-item {
	padding: 15px 20px;
	display: block;
	color: #000;
}
a.tab-item .fa {
	margin-right: 10px;
}
a.tab-item.border-bottom {
	border-bottom: thin solid rgba(204, 204, 204, 0.5);
}
a.tab-item:hover {
	background-color: #EEE;
}
a.tab-item.active {
	background-color: #FFF;
}
.new-content-container {
    background-color: #FFF;
    margin-left: -30px;
    padding: 20px;
}
.tab-content-selection {
	display: none;
}
.tab-content-selection.active {
	display: block;
}
.tab-content-selection h4 {
	margin: 0;
	padding: 0;
	font-size: 20px;
}
.art-text-helper {
	font-size: 10px;
    text-transform: uppercase;
}
.art-text-helper a {
	color: #000;
}
.list-tab-container img {
	max-width: 100%;
}
.version-text {
	color: #777;
	font-size: 12px;
}
.about-section-drawing h1 {
	font-size: 24px;
}
.about-section-drawing h2 {
	font-size: 16px;
	margin: 0;
	line-height: 26px;
}
.shortcut-item {
	margin-bottom: 7px;
	cursor: pointer;
}
.shortcut-item .shortcut-icon {
	font-size: 12px;
	color: #000;
	text-transform: uppercase;
	background-color: #CCC;
	border-radius: 4px;
	padding: 5px 15px;
	display: inline-block;
}
.shortcut-item:hover .shortcut-icon {
	cursor: pointer;
	background-color: #FFF;
}
.shortcut-item.nc:hover .shortcut-icon {
	cursor: default;
	background-color: #FFF;
}
.shortcut-item.active .shortcut-icon {
	background-color: #FFF;
	-webkit-box-shadow: inset 0 0 0 2px #2979ff;
	        box-shadow: inset 0 0 0 2px #2979ff;
}
.settings-details {
	font-size: 14px;
	line-height: normal;
}
.settings-details .sect-header {
	margin-bottom: 10px;
}
.settings-details .settings-head {
	font-size: 16px;
	margin-bottom: 5px;
}
.settings-details .sect {
	padding: 15px 0;
	border-bottom: 1px solid #1b1b1b;
}
.sect-header {
	padding: 12px 15px;
    margin-top: 15px;
    font-size: 14px;
    text-transform: uppercase;
    color: #FFF;
    background-color: #333;
    border-radius: 4px;
}
.settings-details .sect .switch {
	text-align: right;
}
.settings-details .sect:last-child {
	border-bottom: none;
}
.settings-details .sect:first-child {
	padding-top: 0;
}
.download-settings {
	line-height: normal;
}
.download-settings select {
	border: thin solid #CCC;
	padding: 10px;
	border-radius: 4px;
	font-size: 14px;
}
.online-users-wrapper {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 10;
	opacity: 0.5;
	-webkit-transition: all .22s;
	-o-transition: all .22s;
	transition: all .22s;
	padding: 10px;
}
.online-users-wrapper:hover {
	opacity: 1;
}
.online-users-wrapper .online-users-append {
	display: block;
}
.online-users-wrapper .online-users-append a {
	display: inline-block;
	margin-left: -35px;
	-webkit-transition: all .22s;
	-o-transition: all .22s;
	transition: all .22s;
}
.online-users-wrapper .online-users-append img {
	width: 40px;
	height: 40px;
}
.online-users-wrapper:hover .online-users-append a {
	margin-left: -10px;
}
.online-users-wrapper .online-users-append a:hover {
	-webkit-transform: translateY(-4px);
	    -ms-transform: translateY(-4px);
	        transform: translateY(-4px);
}
.online-users-wrapper .online-users-append a img {
	border-radius: 50%;
}
.gif-helper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	color: #FFF;
	font-size: 14px;
	padding: 10px;
	background-color: #333;
	border-radius: 4px;
	margin-bottom: 15px;
}
.gif-helper img {
	opacity: 0.80;
	vertical-align: middle;
	float: right;
}
.gif-helper:hover img {
	opacity: 1;
}
.gif-helper:hover {
	color: #FFF;
}
.new-text {
	font-size: 10px;
    position: relative;
    top: -5px;
    color: #ff4700;
}
#ad-popup-content {
	position: fixed;
    bottom: 0;
    left: 0;
    z-index: 11;
}
#ad-popup-content .ad-close-set {
	position: absolute;
    right: -20px;
    background-color: #FFF;
    border-radius: 50%;
    padding: 10px 10px;
    top: 40px;
    cursor: pointer;
    border: 2px solid #000;
}
#ad-popup-content .ad-close-set:hover {
	background-color: #EEE;
}
.range-wrapper {
	margin-top: -20px;
    padding: 10px 0;
}
.brush-canvas-wrapper {
	background-color: #FFF;
	padding: 10px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	max-height: 100px;
	margin-bottom: 15px;
	border-radius: 4px;
}
.brush-canvas-wrapper:hover {
	cursor: pointer;
}
.icon-set .tool-selection .icon-tool, 
.icon-set .non-tool-selection .icon-tool {
	width: 32px;
	height: 32px;
	background-image: url('/img/application/icons/set_autumnfire.png?v=1.6');
	background-position: -2px -2px;
}
.icon-set.ml .tool-selection .icon-tool, 
.icon-set.ml .non-tool-selection .icon-tool {
	width: 48px;
	height: 48px;
	margin: 0;
}
.icon-set.ml .tool-selection {
	height: 48px;
}
.resizer {
    width: 10px;
    height: 10px;
    background-color: darkgray;
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: se-resize;
}
.anchor-wrapper {
	width: 100px;
    display: flex;
    flex-wrap: wrap;
}
.anchor-wrapper .anchor-sets {
	width: 30%;
	padding-top: calc(100% / 3.5);
	margin-right: 2px;
	margin-bottom: 2px;
	background-color: #444;
	cursor: pointer;
	border-radius: 4px;
}
.anchor-wrapper .anchor-sets.disabled {
	opacity: 0 !important;
}
.anchor-wrapper .anchor-sets:hover {
	opacity: .85;
}
.anchor-wrapper .anchor-sets.active {
	background-color: #2979FF;
}
.anchor-wrapper.disabled .anchor-sets {
	opacity: .25;
}
.anchor-wrapper.disabled .anchor-sets:hover {
	opacity: .25;
}
.anchor-wrapper.disabled .anchor-sets.active {
	background-color: #444;
}
#eraser-tool .icon-tool {
	background-position: -36px -2px;
}
#brush-tool .icon-tool {
	background-position: -2px -36px;
}
#line-tool .icon-tool {
	background-position: -36px -36px;
}
#square-tool .icon-tool {
	background-position: -2px -70px;
}
#circle-tool .icon-tool {
	background-position: -36px -70px;
}
#bucket-tool .icon-tool {
	background-position: -2px -104px;
}
#color-picker-tool .icon-tool {
	background-position: -36px -104px;
}
#move-tool .icon-tool {
	background-position: -2px -138px;
}
#select-tool .icon-tool {
	background-position: -36px -138px;
}
#text-tool .icon-tool {
	background-position: -2px -172px;
}
#lighten-darken-tool .icon-tool {
	background-position: -36px -172px;
}
#dithering-tool .icon-tool {
	background-position: -2px -206px;
}
#stamp-tool .icon-tool {
	background-position: -36px -206px;
}
#resize-pix .icon-tool {
	background-position: -2px -240px;
}
#gradient-tool .icon-tool {
	background-image: url('/img/application/icons/set_autumnfire.png?v=1.6') !important;
	background-position: -34px -232px;
}
#spray-tool .icon-tool {
	background-image: url('/img/application/icons/set_autumnfire.png?v=1.6') !important;
	background-position: 0px -264px;
}
#hand-tool .icon-tool {
	background-image: url('/img/application/icons/set_autumnfire.png?v=1.6') !important;
	background-position: -36px -264px;
}
#filter-tool .icon-tool {
	background-image: url('/img/application/icons/set_autumnfire.png?v=1.6') !important;
	background-position: -2px -296px;
}
#contour-tool .icon-tool {
	background-image: url('/img/application/icons/contour_32x32.png') !important;
	background-position: 0 0;
}
#perspective-tool .icon-tool {
	background-image: url('/img/application/icons/perspective_32x32.png') !important;
	background-position: 0 0;
}
.icon-set.s #pencil-tool .icon-tool {
	background-position: -1px -1px;
}
.icon-set.s #eraser-tool .icon-tool {
	background-position: -34px -1px;
}
.icon-set.s #brush-tool .icon-tool {
	background-position: -1px -34px;
}
.icon-set.s #line-tool .icon-tool {
	background-position: -34px -34px;
}
.icon-set.s #square-tool .icon-tool {
	background-position: -1px -68px;
}
.icon-set.s #circle-tool .icon-tool {
	background-position: -34px -68px;
}
.icon-set.s #bucket-tool .icon-tool {
	background-position: -1px -100px;
}
.icon-set.s #color-picker-tool .icon-tool {
	background-position: -34px -100px;
}
.icon-set.s #move-tool .icon-tool {
	background-position: -1px -134px;
}
.icon-set.s #select-tool .icon-tool {
	background-position: -34px -134px;
}
.icon-set.s #text-tool .icon-tool {
	background-position: -1px -166px;
}
.icon-set.s #lighten-darken-tool .icon-tool {
	background-position: -34px -166px;
}
.icon-set.s #dithering-tool .icon-tool {
	background-position: -1px -200px;
}
.icon-set.s #stamp-tool .icon-tool {
	background-position: -34px -200px;
}
.icon-set.s #resize-pix .icon-tool {
	background-position: -1px -232px;
}
.icon-set.s #gradient-tool .icon-tool {
	background-position: -34px -232px;
}
.icon-set.ml #pencil-tool .icon-tool {
	background-position: 1px -0;
}
.icon-set.ml #eraser-tool .icon-tool {
	background-position: -45px 0;
}
.icon-set.ml #brush-tool .icon-tool {
	background-position: 1px -44px;
}
.icon-set.ml #line-tool .icon-tool {
	background-position: -45px -44px;
}
.icon-set.ml #square-tool .icon-tool {
	background-position: 1px -92px;
}
.icon-set.ml #circle-tool .icon-tool {
	background-position: -45px -92px;
}
.icon-set.ml #bucket-tool .icon-tool {
	background-position: 1px -138px;
}
.icon-set.ml #color-picker-tool .icon-tool {
	background-position: -45px -138px;
}
.icon-set.ml #move-tool .icon-tool {
	background-position: 1px -184px;
}
.icon-set.ml #select-tool .icon-tool {
	background-position: -45px -184px;
}
.icon-set.ml #text-tool .icon-tool {
	background-position: 1px -230px;
}
.icon-set.ml #lighten-darken-tool .icon-tool {
	background-position: -45px -230px;
}
.icon-set.ml #dithering-tool .icon-tool {
	background-position: -1px -276px;
}
.icon-set.ml #stamp-tool .icon-tool {
	background-position: -45px -276px;
}
.icon-set.ml #resize-pix .icon-tool {
	background-position: 1px -322px;
}
.icon-set.s #spray-tool .icon-tool {
	background-position: -1px -264px;
}
.ad-placement {
	position: relative;
}
.ad-placement.modal-footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.ad-placement .ad-text {
	opacity: 0.25;
	font-size: 10px;
	text-transform: uppercase;
	padding: 5px;
}
.ad-placement.modal-footer:hover {
	opacity: 0.85;
}
#colors-list-wrapper {
	max-width: 400px;
	left: inherit;
}
.online-layer-list {
	color: #FFF;
	border-radius: 4px;
	margin: 10px;
    background-color: rgba(0,0,0, 0.25);
}
.online-layer-list .online-layer-title {
	padding: 10px;
	font-size: 10px;
	text-transform: uppercase;
}
.online-layer-list .online-layer-item {
	-ms-flex-wrap: nowrap;
	    flex-wrap: nowrap;
	padding: 5px 10px;
}
.online-layer-list .online-layer-item .online-layer-name {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 10px;
	text-transform: uppercase;
	-o-text-overflow: ellipsis;
	   text-overflow: ellipsis;
	padding-right: 5px;
    overflow: hidden;
}
.online-layer-list .online-layer-item .online-layer-options {
	white-space: nowrap;
}
.online-layer-list .online-layer-item .online-layer-options .defaul-app-button {
	padding: 8px;
}
.online-layer-list .online-layer-item .online-layer-options .online-layer-block:hover {
	opacity: .5;
}
.online-layer-list .online-layer-item .online-layer-options .online-layer-block.off {
	opacity: .5;
}
.online-layer-list .online-layer-item .online-layer-options .online-layer-block.off:hover {
	opacity: .65;
}

.product-image-render {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.product-image-render img {
    max-width: 100%;
    max-height: 100%;
}
.product-image-render:after {
    content: "\f110";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-animation: fa-spin 1s infinite steps(8);
            animation: fa-spin 1s infinite steps(8);
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 42px;
    color: #CCC;
    left: 0;
    top: 0;
}
.product-image-render canvas {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    border-radius: 4px;
    z-index: 2;
}
.image-preview-container-shop {
    overflow: hidden;
    border-radius: 4px;
    padding: 10px;
    background-color: #FFF;
    border-bottom: thin solid #CCC;
}
.image-preview-container-shop.nob {
    border-bottom: none;
}
.image-preview-container-shop .product-image-render canvas {
    cursor: move;
}
.shop-page-product .image-preview-container-shop .product-image-render canvas {
    cursor: default;
}
.product-image-render img {
    visibility: hidden;
}
.product-image-render img.c-im-product {
    display: block;
    visibility: visible;;
    position: relative;
    z-index: 2;
}
.rotate-slide-wrapper {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    -webkit-transition: all 1.25s ease-in-out;
    -o-transition: all 1.25s ease-in-out;
    transition: all 1.25s ease-in-out;
    border-radius: 4px;
}
.rotate-slide-wrapper .slide-slot {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: -3px;
}
.rotate-slide-wrapper a.slide-slot {
    margin-left: 0;
}
.rotate-slide-wrapper .product-card-wrap {
    border-bottom: none;
    margin-bottom: 0;
    -webkit-transition: all .22s;
    -o-transition: all .22s;
    transition: all .22s;
}
.rotate-slide-wrapper .product-card-wrap:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
}
.button-filters.tp {
  margin-top: -10px;
  margin-bottom: 15px;
}
.color-preset-item {
  overflow: hidden;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.25);
  margin-bottom: 15px;
}
.color-preset-item:hover {
  -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
          box-shadow: 0 0 0 2px rgba(255, 255, 255, 1);
  cursor: pointer;
}
.color-preset-item .colors-list-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 10px 0 10px;
}
.color-input .color-preset-item .colors-list-wrapper {
	padding: 0;
}
.color-preset-item .colors-list-wrapper .color-item {
  height: 40px;
  width: 20%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.color-preset-item .colors-list-wrapper .color-item:first-child {
	border-radius: 4px 0 0 4px;
}
.color-preset-item .colors-list-wrapper .color-item:last-child {
	border-radius: 0 4px 4px 0;
}
.color-preset-item .user-details {
  padding: 10px 10px 5px 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.color-preset-item .user-details .full {
  width: 100%;
}
.color-preset-item .user-details .details-like {
  padding: 0 10px;
  white-space: nowrap;
}
.color-preset-item .user-details .details-like .fa {
  margin-right: 5px;
}
.color-preset-item .user-details a {
  color: #EEE;
}
.color-preset-item .user-details a:hover {
  text-decoration: underline;
}
.color-preset-item .preset-options {
  padding: 5px 10px 10px 10px;
  text-align: right;
}
.color-input .color-preset-item {
  border-radius: 4px;
}
.color-input .user-details {
  display: none !important;
}
.blank-wrapper .color-preset-item {
  background-color: #333;
}
.lighter .blank-wrapper .color-preset-item {
  background-color: #EEE;
}
.lighter .color-preset-item .user-details a {
  color: #444;
}
.blank-wrapper .preset-options {
  display: none;
}
.drawing-wrapper .preset-options .btn {
  font-size: 10px;
  padding: 0 10px !important;
  height: 24px;
  line-height: 25px;
}
.drawing-wrapper .preset-options .btn.btn-light {
  background-color: inherit;
}
.drawing-wrapper .preset-options .likeable.fa {
  font-size: 10px;
  margin-right: 5px;
}
.drawing-wrapper .preset-options .likeable.fa.active {
  color: red;
}
.text-left {
	text-align: left;
}
.xd-text {
	font-size: 12px;
	opacity: 0.65;
}
.left-sidebar-ad {
	width: 300px;
	height: 279px;
	overflow: hidden !important;
}
/* Color Picker */
.colorpicker {
	width: 356px;
	height: 200px;
	overflow: hidden;
	position: absolute;
	background: url(/images/public/colorpicker/colorpicker_background.png?ver=1);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
}
#color-picker-panel .colorpicker {
	background-image: none;
	padding-top: 200px;
	padding-bottom: 5px;
    padding-left: 10px;
    width: 100%;
    height: auto;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
#color-picker-panel .colorpicker_color {
	left: 10px;
	top: 10px;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(/images/public/colorpicker/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(/images/public/colorpicker/colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
#color-picker-panel .colorpicker_hue {
	top: 10px;
    left: 170px;
    width: 19px;
	background-image: url('/images/public/colorpicker/hue-slider-vert.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.colorpicker_hue_bottom {
	position: absolute;
    top: 172px;
    left: 12px;
    width: 154px;
    border: thin solid #444;
    height: 17px;
    cursor: e-resize;
    background-image: url('/images/public/colorpicker/hue-slider.png');
    background-size: 100%;
    background-repeat: no-repeat;
}
#color-picker-panel .colorpicker_hue_bottom {
	left: 10px;
}
.colorpicker_hue_bottom div {
	position: absolute;
	width: 9px;
	height: 35px;
	overflow: hidden;
	background: url(/images/public/colorpicker/colorpicker_indic_90.gif) left top;
	margin: -10px 0 0 -2px;
	left: 0px;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(/images/public/colorpicker/colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	top: 0px;
}
#color-picker-panel .colorpicker_hue div {
	left: -7px;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 132px;
	height: 22px;
	background: url(/images/public/colorpicker/colorpicker_hex.png?ver=1) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
	overflow: hidden;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
#color-picker-panel .colorpicker_field, #color-picker-panel .colorpicker_hex {
	position: relative;
	overflow: hidden;
    background-repeat: no-repeat;
    background-image: none !important;
    width: 50%;
    display: inline-block;
    height: auto;
    top: inherit;
    left: inherit;
}
#color-picker-panel .colorpicker_field:after,
#color-picker-panel .colorpicker_hex:after {
	color: #FFF;
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 10px;
}
#color-picker-panel .colorpicker input {
	position: static;
    background-color: #222;
    margin: 0px 0px 0 0;
    padding: 5px 10px;
    width: calc(100% - 30px);
    height: auto;
    border-radius: 4px;
    transition: none;
}
#color-picker-panel .colorpicker_hex {
	width: 100%;
}
#color-picker-panel .colorpicker_hex:after {
	content: "HEX";
}
.colorpicker_rgb_r {
	background-image: url(/images/public/colorpicker/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
#color-picker-panel .colorpicker_rgb_r:after {
	content: "R";
}
.colorpicker_rgb_g {
	background-image: url(/images/public/colorpicker/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
#color-picker-panel .colorpicker_rgb_g:after {
	content: "G";
}
.colorpicker_rgb_b {
	background-image: url(/images/public/colorpicker/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
#color-picker-panel .colorpicker_rgb_b:after {
	content: "B";
}
.colorpicker_hsb_h {
	background-image: url(/images/public/colorpicker/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
#color-picker-panel .colorpicker_hsb_h:after {
	content: "H";
}
.colorpicker_hsb_s {
	background-image: url(/images/public/colorpicker/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
#color-picker-panel .colorpicker_hsb_s:after {
	content: "S";
}
.colorpicker_hsb_b {
	background-image: url(/images/public/colorpicker/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
#color-picker-panel .colorpicker_hsb_b:after {
	content: "B";
}
.colorpicker_submit {
	position: absolute;
	width: 132px;
	height: 22px;
	background-color: #2979FF;
    border-bottom: thin solid #2979FF;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    color: #FFF;
    text-align: center;
    line-height: 19px;
	left: 212px;
	top: 169px;
	overflow: hidden;
	cursor: pointer;
}
.colorpicker_submit:after {
	content: "Select Color";
	font-size: 10px;
	text-align: center;
	position: relative;
	line-height: 22px;
	height: 22px;
	width: 100%;
}
.colorpicker_submit:hover {
	background-color: #2369de;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}
#color-picker-panel .colorpicker_new_color,
#color-picker-panel .colorpicker_current_color,
#color-picker-panel .colorpicker_submit {
	display: none;
}
.lighter #color-picker-panel .colorpicker input {
	background-color: #CCC;
	color: #000;
}
.lighter #color-picker-panel .colorpicker_field:after, 
.lighter #color-picker-panel .colorpicker_hex:after {
	color: #000;
}
/* Color Picker End */
@media (max-height:675px) and (min-height:500px) {
	.tool-selection, .non-tool-selection {
		height: 44px;
	}
}
.slider-controls-container {
    position: fixed;
    bottom: 100px;
    left: 135px;
    display: flex;
    flex-direction: column;
    z-index: 11;
}

@media only screen and (max-width: 1200px), only screen and (max-height: 800px) {
    .slider-controls-container {
        display: none;
    }
}

/* Wrapper for each individual slider component */
.slider-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align items to the top to ensure order */
    width: 5px; /* Width of the wrapper */
}

/* Styling for the slider labels */
.slider-label {
    color: #ccc;
    font-size: 10px;
    margin-bottom: 0px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Styling for the output value display, now positioned above slider */
.slider-output {
    margin-bottom: 0px; /* Space between value and slider container */
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    min-width: 45px;
    text-align: center;
}

/* New wrapper to correctly allocate space for the rotated slider */
.slider-input-wrapper {
    height: 150px; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    padding: 0px 10px;
    border-radius: 4px;
}

/* Common styles for the custom slider class */
.custom-vertical-slider {
    -webkit-appearance: none; /* Hides default browser styles */
    appearance: none;
    width: 180px; /* This becomes the height of the vertical slider */
    height: 14px; /* This becomes the width of the vertical slider */
    background: transparent; /* Make background transparent to style track separately */
    cursor: pointer;
    transform: rotate(-90deg); /* Orient the slider vertically */
}

/* --- Custom Track Styling --- */
.custom-vertical-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px; /* Increased track thickness */
    background: #2c2c2c; /* Darker track color */
    border-radius: 6px;
    border: 1px solid #111;
}

.custom-vertical-slider::-moz-range-track {
    width: 100%;
    height: 12px; /* Increased track thickness */
    background: #2c2c2c; /* Darker track color */
    border-radius: 6px;
    border: 1px solid #111;
}

/* --- Custom Thumb Styling (Square and Dark) --- */
.custom-vertical-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -8px; /* Vertically center the thumb on the new thicker track */
    width: 28px;
    height: 28px;
    background: #555555; /* Dark thumb color */
    border-radius: 4px; /* Makes the thumb square */
    border: 2px solid #888888; /* Lighter grey border */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); /* Subtle white glow */
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.custom-vertical-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #555555; /* Dark thumb color */
    border-radius: 4px; /* Makes the thumb square */
    border: 2px solid #888888; /* Lighter grey border */
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2); /* Subtle white glow */
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* --- Active/Hover States for Thumb --- */
.custom-vertical-slider:active::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); /* Brighter glow on interaction */
}

.custom-vertical-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.custom-vertical-slider:active::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.custom-vertical-slider:focus::-moz-range-thumb {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}