/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
:root{
    --primary-color: #1356a6;
    --primary-color-accent: #12519e;
}

.round{
  border-radius: 6px !important;
}

.primary-color{
  color: var(--primary-color);
}

@media (min-width: 768px){
  .footer-clear-xs{ margin-left:25% !important; }
}
@media (min-width: 992px){
  .footer-clear-xs{ margin-left:0 !important; }
}
.disabled { background: #878787 !important; cursor:default !important; }
input[type=text] { width:150px; padding:0px 10px; }

.noSelect{
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

#api{
	background: rgba(0, 0, 0, 0) url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/api.png') no-repeat scroll 0 0 / 47px 47px;
  bottom: 205px; height: 47px; left: 17px; position: absolute; width: 47px;
}

#userPWD1, #userPWDConf {
  border:1px solid #b8b8b8;
  height:26px;
  width:261px;
  background:#f3f3f3;
  color: #5f574f;
  font-size:14px;
  font-family:Arial, Helvetica, sans-serif;
  margin:5px 0 10px 0;
  padding: 0 0 0 5px;
}

#noty_center_layout_container > li { border:none !important; }
ul { list-style: none outside none !important; }
ul, ol {margin-bottom:0;}

*:focus { outline: none; }
#progressText {width:400px; margin: 30px auto 10px; text-align:left; font-size:13px; color:#5f574f;}
#funFactText {width:400px; margin:20px auto 0; text-align:left; font-size:13px; color:#5f574f; height:75px;}
.sitemap-link, .sitemap-section{ display:block; }
.fixText {text-transform:capitalize;}
.updateFormWrapper { position:relative; width:280px; margin:40px auto; }
.noEditLabel { position:absolute; left: -40px; top: 6px; }
.noEditField { height:26px; width:266px; line-height:26px; margin:5px 0 10px; }
.fb_photo_box, .db_photo_box, .g_photo_box {
	background-color: #FFF;
	float:left;
	width: 96px;
	height: 96px;
	padding: 0px;
	background: transparent;
	z-index:1;
}
.uploaded{ box-shadow:rgba(45,151,100, 0.7) 0 0 0 6px inset; position: relative; }
#dropzoneBtn{ width:150px; }
.deleteCell {
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/deleteCell.png') no-repeat;
  position:absolute; top:0; right:0; height:15px; width:15px;
}


/* check if putting the same background-image on primary and danger fixes it */
.Bttn {
  background: var(--primary-color);
  padding: 5px 20px;
  text-decoration: none;
	text-align:center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  border-radius: 6px;
}

.Bttn:hover {
  background: var(--primary-color);
  text-decoration: none;
}

.BlueBttn {
  text-align:center;
  margin:10px auto 0;
  background: #2887a9;
  background-image: -webkit-linear-gradient(top, #2887a9, #186e8a);
  background-image: -moz-linear-gradient(top, #2887a9, #186e8a);
  background-image: -ms-linear-gradient(top, #2887a9, #186e8a);
  background-image: -o-linear-gradient(top, #2887a9, #186e8a);
  background-image: linear-gradient(to bottom, #2887a9, #186e8a);
  width:230px;
  height:52px;
  line-height:52px;
  color:#FFF;
  font-size:16px;
  text-decoration: none;
  text-align:center;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.BlueBttn:hover {
  background: #2887a9;
  background-image: -webkit-linear-gradient(top, #186e8a, #2887a9);
  background-image: -moz-linear-gradient(top, #186e8a, #2887a9);
  background-image: -ms-linear-gradient(top, #186e8a, #2887a9);
  background-image: -o-linear-gradient(top, #186e8a, #2887a9);
  background-image: linear-gradient(to bottom, #186e8a, #2887a9);
  text-decoration: none;
}

@-webkit-keyframes borderBlink {    
  from, to { border-color: #1c7da0 }    
  50% { border-color: #fff }    
}    
@keyframes borderBlink {    
  from, to { border-color: #1c7da0 }    
  50% { border-color: #fff }    
}

.borderBlink{    
    border: 3px solid #fff !important;
    /* add 'border-color: transparent' if you wish no border to show initially */     
    -webkit-animation: borderBlink 2s linear infinite;    
    animation: borderBlink 2s linear infinite; 
}

.animLine {
  background-size: cover;
  margin: 4px;
  position: relative;
  transition: .1s;
}

.animLine:before,
.animLine:after {
  position: absolute;
  content: "";
  background: linear-gradient(90deg, #fff 40%, transparent 40%);
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  z-index: 1;
  border-radius: 4px;
  background-size: 200% 4px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px #fff);
  background-position: 80% 0;
}

.animLine:before {
  animation: beforeLineAnim 2s linear infinite;
}

.animLine:after {
  animation: afterLineAnim 2s linear infinite;
  transform: rotate(-270deg);
  background-position: -20% 0;
}

@keyframes beforeLineAnim {
  45%,
  50% {
    background-position: -100% 0;
  }
  45% {
    transform: scale(1)
  }
  50%,
  95% {
    transform: scale(1, -1)
  }
  95% {
    background-position: 80% 0
  }
}

@keyframes afterLineAnim {
  20%,
  25% {
    background-position: -100% 0;
  }
  20% {
    transform: scale(1) rotate(-270deg)
  }
  25% {
    transform: scale(-1, 1) rotate(-270deg)
  }
  70%,
  75% {
    background-position: 80% 0;
  }
  70% {
    transform: scale(-1, 1) rotate(-270deg)
  }
  75% {
    transform: scale(1, 1) rotate(-270deg)
  }
}

.blueBtn {
  background: #186e8a;
  background-image: -webkit-linear-gradient(top, #2887a9, #186e8a);
  background-image: -moz-linear-gradient(top, #2887a9, #186e8a);
  background-image: -ms-linear-gradient(top, #2887a9, #186e8a);
  background-image: -o-linear-gradient(top, #2887a9, #186e8a);
  background-image: linear-gradient(to bottom, #2887a9, #186e8a);
  text-decoration: none;
	user-select: none;
	text-decoration: none;
  display:inline-block;
  line-height:30px;
  height:30px;
  cursor: pointer;
  text-align:center;
  color:#fff;
  font-size:16px;
  padding-left:20px;
  padding-right:20px;
	box-sizing:border-box;
	user-select: none;
}
.blueBtn:active {
  background: #186e8a;
  background-image: -webkit-linear-gradient(top, #186e8a, #2887a9);
  background-image: -moz-linear-gradient(top, #186e8a, #2887a9);
  background-image: -ms-linear-gradient(top, #186e8a, #2887a9);
  background-image: -o-linear-gradient(top, #186e8a, #2887a9);
  background-image: linear-gradient(to bottom, #186e8a, #2887a9);
  text-decoration: none;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.hide { display:none; }
.show { display:block; }

#loginArea { position:relative; }
#emailInfo {
	position:absolute;
	right:40px;
	top:410px;
	width:240px;
	font-size:10px;
	font-weight:500;
}
#priceInfo {
	position:absolute;
	right:170px;
	top:210px;
	width:110px;
	font-size:10px;
	font-weight:500;
}
.infoIcon {
  background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/infoIcon.png') no-repeat;
	width:21px; height:21px; padding: 0 5px 0 0;
}
.googleLogo {
  background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/socialButtonSprite2-min.png') no-repeat;
  width:20px; height:24px; background-size: 40px 24px; background-position:-19px 0;
}

.facebookLogo {
  background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/socialButtonSprite2-min.png') no-repeat;
  width:20px; height:24px; background-size: 40px 24px; background-position: 0px 0;
}
.googleBtn {
  -moz-user-select: none;
  display: inline-block;
  font-family: arial,sans-serif;
  outline: medium none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  background-color: #4285F4;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 14px;
  height: 40px;
  line-height: 30px;
  font-weight: bold;
  padding: 0 5px;
  font-family: 'Roboto', robotobold, Helvetica, sans-serif;
  font-weight: 500;
}
.googleBtn:hover { background-color: #3367d6; box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset; }
.fbBtn {
  -moz-user-select: none;
  display: inline-block;
  font-family: arial,sans-serif;
  outline: medium none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  background-color: #476aa6;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 12px;
  height: 40px;
  line-height: 30px;
  font-weight: bold;
  padding: 0 5px;
}
.fbBtn:hover { background-color: #617db3; box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset; }

.googleBtnLogo {
  background: url('https://ssl.gstatic.com/s2/oz/images/sprites/signinbutton-094c03c836f9f91d08b943a90778d34e.png') no-repeat scroll -32px -44px rgba(0, 0, 0, 0);
  height: 32px; margin-top: -1px; width: 32px; border-color: #bb3f30; border-right-width: 1px; display: inline-block; vertical-align: top;
}
.googleBtnText{ border-radius: 0 3px 3px 0; display: inline-block; padding: 0 20px; }
#sourcePreview { padding:3px; border: 3px solid #f78f4b; }
.number { max-width:.5em; margin:0 auto; line-height:35px;
}

#fblogin, #fbRegister { margin-right:14px; }

progress {
	width: 400px;
	height: 54px;
	margin: 10px auto;
	display: block;
	/* Important Thing */
	-webkit-appearance: none;
	border: none;
}

/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
	background: black;
	padding: 2px;
	box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}

/* Now the value part */
progress::-webkit-progress-value {
  box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
  background:
  -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
  -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
  -webkit-linear-gradient(left, #ba7448, #c4672d);
  /* Looks great, now animating it */
  background-size: 25px 14px, 100% 100%, 100% 100%;
  -webkit-animation: move 5s linear 0 infinite;
}
/* That's it! Now let's try creating a new stripe pattern and animate it using animation and keyframes properties  */
@-webkit-keyframes move {
	0% {background-position: 0px 0px, 0 0, 0 0}
	100% {background-position: -100px 0px, 0 0, 0 0}
}

#fbUploadBtn {
	margin:23px 0 0 222px;
	width: 220px;
	text-align:center;
	background:#f78f4b;
	height:34px;
	line-height:34px;
	text-align:center;
}

.igBtn {
  -moz-user-select: none;
  display: inline-block;
  font-family: Roboto,arial,sans-serif;
  outline: medium none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  background-color: #517fa4;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 12px;
  height: 31px;
  line-height: 31px;
  font-weight: bold;
  padding: 0 5px;
}
.igBtn:hover { background-color: #67a0ce; box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset; }

.flickrBtn {
  -moz-user-select: none;
  display: inline-block;
  font-family: Roboto,arial,sans-serif;
  outline: medium none;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  background-color: #ff0084;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 12px;
  height: 31px;
  line-height: 31px;
  font-weight: bold;
  padding: 0 5px;
}
.flickrBtn:hover { background-color: #ff3ea2; box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset; }

.dropboxBtn {
	  -moz-user-select: none;
    display: inline-block;
    font-family: Roboto,arial,sans-serif;
    outline: medium none;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
		background-color: #007ee5;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    color: #fff;
		font-size: 12px;
    height: 31px;
    line-height: 31px;
		font-weight: bold;
		padding: 0 5px;
}
.dropboxBtn:hover { background-color: #0289f7; box-shadow: 0 -2px 0 rgba(0,0,0, 0.2) inset; }

.redBtn {
  background: #c73d3d;
  background-image: -webkit-linear-gradient(top, #c73d3d, #b82929);
  background-image: -moz-linear-gradient(top, #c73d3d, #b82929);
  background-image: -ms-linear-gradient(top, #c73d3d, #b82929);
  background-image: -o-linear-gradient(top, #c73d3d, #b82929);
  background-image: linear-gradient(to bottom, #c73d3d, #b82929);
  line-height:34px;
  height:34px;
  text-decoration: none;
}

.redBtn:hover {
  background: #b82929;
  background-image: -webkit-linear-gradient(top, #b82929, #c73d3d);
  background-image: -moz-linear-gradient(top, #b82929, #c73d3d);
  background-image: -ms-linear-gradient(top, #b82929, #c73d3d);
  background-image: -o-linear-gradient(top, #b82929, #c73d3d);
  background-image: linear-gradient(to bottom, #b82929, #c73d3d);
  text-decoration: none;
}
.orangeBtn {
  background-color: var(--primary-color); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary-color)), to(var(--primary-color-accent)));
  background-image: -webkit-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: -moz-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: -ms-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: -o-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: linear-gradient(to bottom, var(--primary-color), var(--primary-color-accent));
  text-decoration: none; text-align:center; box-sizing:border-box;
  height:34px;
  line-height:34px;
 }

.orangeBtn:hover {color:#fff;
  background-color: var(--primary-color-accent); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--primary-color-accent)), to(var(--primary-color)));
  background-image: -webkit-linear-gradient(top, var(--primary-color-accent), var(--primary-color));
  background-image: -moz-linear-gradient(top, var(--primary-color-accent), var(--primary-color));
  background-image: -ms-linear-gradient(top, var(--primary-color-accent), var(--primary-color));
  background-image: -o-linear-gradient(top, var(--primary-color-accent), var(--primary-color));
  background-image: linear-gradient(to bottom, var(--primary-color-accent), var(--primary-color));
}

.btn-primary{
  /* border-color: var(--primary-color) !important; */
  border-radius: 6px;
  border: none !important;
  background-color: #337ab7 !important;
}

.btn-cancel{
  border-radius: 6px !important;
}

.btn-danger{
  border: none !important;
  background-color: red !important;
  border-radius: 6px;
}

.brownBtn {
  background: #6b635b;
  background-image: -webkit-linear-gradient(top, #6b635b, #534c44);
  background-image: -moz-linear-gradient(top, #6b635b, #534c44);
  background-image: -ms-linear-gradient(top, #6b635b, #534c44);
  background-image: -o-linear-gradient(top, #6b635b, #534c44);
  background-image: linear-gradient(to bottom, #6b635b, #534c44);
  padding: 5px 5px;
  text-align:center;
}

.brownBtn:hover {
  background: #534c44;
  background-image: -webkit-linear-gradient(top, #534c44, #6b635b);
  background-image: -moz-linear-gradient(top, #534c44, #6b635b);
  background-image: -ms-linear-gradient(top, #534c44, #6b635b);
  background-image: -o-linear-gradient(top, #534c44, #6b635b);
  background-image: linear-gradient(to bottom, #534c44, #6b635b);
  text-decoration: none;
}

.grayBtn {
  background: #8b8b8b;
  background-image: -webkit-linear-gradient(top, #8b8b8b, #757575);
  background-image: -moz-linear-gradient(top, #8b8b8b, #757575);
  background-image: -ms-linear-gradient(top, #8b8b8b, #757575);
  background-image: -o-linear-gradient(top, #8b8b8b, #757575);
  background-image: linear-gradient(to bottom, #8b8b8b, #757575);
  padding: 5px 5px;
  text-align:center;
}

.grayBtn:hover {
  background: #757575;
  background-image: -webkit-linear-gradient(top, #757575, #8b8b8b);
  background-image: -moz-linear-gradient(top, #757575, #8b8b8b);
  background-image: -ms-linear-gradient(top, #757575, #8b8b8b);
  background-image: -o-linear-gradient(top, #757575, #8b8b8b);
  background-image: linear-gradient(to bottom, #757575, #8b8b8b);
  text-decoration: none;
}

.uploadTab { text-align: center; width: 100%; }
.tabList { display: inline-block; }

#deviceTab{width:25px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: 0px 0px !important; }

#fbTab{width:12px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: -26px 0px !important; }

#gTab{width:22px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: -38px 0px !important; }
#sTab{width:26px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: -133px 0px !important; }
#igTab{width:23px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: -61px 0px !important; }
#flickrTab{width:22px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: -85px 0px !important; }
#dropboxTab{width:23px; height:22px; background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/tabSpriteNew.png') no-repeat; background-position: -108px 0px !important; }

.ui-tabs-panel {padding:0px !important;}

.tabText { line-height:23px; margin-left:5px; }

ul{ margin: 0; padding: 0; }
li{ display: inline; }
a { text-decoration: none; }

.click {cursor:pointer;}
.wrapper{width:50%; margin:0 auto; padding-top:55px; text-align:center;}

#devicePhoto, #fbPhoto, #gPhoto, #gAlbumPhoto, #pickerPhoto, #iPhoto, #flickrPhoto, #dropboxPhoto, #sPhoto {
	height:472px;
	overflow: hidden;
	border-bottom:3px solid var(--primary-color) !important;
	border-left:3px solid var(--primary-color) !important;
	border-right:3px solid var(--primary-color) !important;
}
#gPhoto { overflow-y:auto; }
#devicePhoto { height:560px; }

#pi_container, #pi_container_g, #pi_container_i, #pi_container_flickr, #pi_container_dropbox {
	height:560px;
	border-bottom:3px solid var(--primary-color) !important;
	border-left:3px solid var(--primary-color) !important;
	border-right:3px solid var(--primary-color) !important;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 0px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 0px;
}
.tabHeader{background:#838383; overflow:hidden; padding:17px; border-left: 3px solid var(--primary-color) !important; border-right: 3px solid var(--primary-color) !important;}

.ui-progressbar-value {
    background-image: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/pbar-ani.gif') !important;
}

.editBox {
	background: var(--primary-color);
  background-image: -webkit-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: -moz-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: -ms-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: -o-linear-gradient(top, var(--primary-color), var(--primary-color-accent));
  background-image: linear-gradient(to bottom, var(--primary-color), var(--primary-color-accent));
  padding: 18px 25px;
  text-decoration: none;
	width: 192px;
	height: 140px;
}

#loading {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#loadingImg {
	  position: absolute;
    top: 50%;
    left: 50%;
		margin: -5px 0 0 -21px;
}

#progressWrapper {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background: #000;
	opacity: 0.8;
	filter: alpha(opacity=80);
	display:none;
	z-index:998;
}
#prog {
	margin:400px auto 0;
	width: 80%;
	max-width:892px;
	opacity:1;
	position:relative;
	line-height:35px;
	text-align:center;
}
#progLabel {
	float:left;
	width:100%;
	height:100%;
	position:absolute;
	vertical-align:middle;
}
#loadingWrapper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #000;
  opacity: 0.8;
  filter: alpha(opacity=80);
  display:none;
  z-index:998;
}
#load {
  margin:400px auto 0;
  width: 80%;
  max-width:892px;
  opacity:1;
  position:relative;
  line-height:35px;
  text-align:center;
}
#loadLabel {
  float:left;
  width:100%;
  height:100%;
  position:absolute;
  vertical-align:middle;
}
#progress {
	position:fixed;
	top:50%;
	left:50%;
	margin:-11px 0 0 -200px;
  width: 400px;
  height: 22px;
  border: 1px solid #FFF;
  background-color: #292929;
}

#countContainer {
	text-align:center;
	float: right;
	vertical-align:top;
}

.cellPreview {
	overflow:hidden;
	width:52px;
	height:39px;
	margin-right:8px;
	border:1px solid #5f574f;
	text-align:center;
}
.wrapperPadding{
	padding-top:15px;
	line-height:15px;
}
.bottomWrapperPadding{
	padding-top:18px;
	line-height:15px;
}
#contentWrapper {
	width:892px;
	margin:0 auto;
	background:#FFF;
}

#projectsWrapper{
  background: linear-gradient(0deg, rgb(248, 243, 240) 80%, rgb(255, 255, 255) 100%) !important;
}
#projectsWrapper, #videosWrapper {
	padding: 0 55px 30px;
	background:#f8f3f0;
	overflow: auto;
}
#gProfile, #fProfile {
	max-width:300px;
}

#signOutBtn{
	width:31px;
	height:30px;
	background:url('https://www.picturemosaics.com/photo-mosaic-tool/images/logOut_blue.png');
	float:right;
	text-align:center;
	border-left:1px solid var(--primary-color-accent);
	border-right:1px solid var(--primary-color-accent);
}

.fieldWrapper {
	width: 300px;
	margin:0 auto;
}

.projectName {
	margin:-1px 0 0 8px;
	text-transform: capitalize;
}
.projectOptionsBar {
  height:19px; 
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background: rgba(0, 0, 0, 0.7);
}
.optionWrapper {
  width:33.3%;
  display:inline-block;
  height:19px;
  position:relative;
}
.optionTrash {
    width: 11px;
    height: 13px;
    top: 3px;
    left: 3px;
    position: absolute;
    background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/vidTrash.png') no-repeat;
}

.optionRemix {
    width: 17px;
    height: 15px;
    top: 2px;
    left: calc(50% - 9px);
    position: absolute;
    background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/remixIcon.png') no-repeat;
}

.optionEye {
    width: 19px;
    height: 12px;
    top: 3px;
    right: 3px;
    position: absolute;
    background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/eyeIcon.png') no-repeat;
}

.signinWrapper {
	width: 300px;
	background: var(--primary-color);
}

#signIn {
	position: absolute;
	right: 0;
	bottom:-337px;
	z-index:10;
}
.navBar {
	position:relative;
	width:100%;
	height: 30px;
	background: #B7B6B6;
}

#signInToggle {
	width:95px;
	height:30px;
	background:var(--primary-color);
	float:right;
	text-align:center;
}

#signInToggle:hover {
	background:var(--primary-color-accent);
}

.whitebtn {
	background:#FFF;
	padding:10px 10px;
}

.whitebtn:hover {
	background:#f6f6f6;
}
.whiteLine {
	width:111px;
	margin:10px 10px 10px 10px;
	border-top:1px solid #FFF;
}

.brownLine{
	width:112px;
	margin:18px 10px 20px 10px;
	border-top:1px solid #5f574f;
}

.centerText {
	text-align:center;
	margin:0 0 20px 0;
}

#myAccount{
	float:right;
	width:31px;
	height:30px;
	text-align:center;
}
#myAccount:hover #accountArrows {
	background-position:-11px 0;
}

#accountArrows {
	width:9px;
	height:7px;
	background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/myAccountArrows.png') no-repeat center;
	background-position:0 0;
	margin-top:-1px;
}

#accountGear {
	width:19px;
	height:18px;
	background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/accountGear.png') no-repeat center;
	background-position:0 0;
	margin:6px auto 0;
}

#menu {
	position:relative;
	height:30px;
}

#menu:hover > ul {
    display: block;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 30px;
    right: -6px;
    z-index: 99999;
    background-color: #e4e2e2;
}

#menu ul a:hover {
    background-color: #f2f2f2;
}

#menu ul a {
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
		width:115px;
		text-align:left;
}
#downloadsLink {
	float:right;
	width:90px;
	height:30px;
	line-height:29px;
	background:#1c7da0;
	border-left:1px solid #95cfe5;
}
#myProjects, #myVideos {
	float:right;
	width:86px;
	height:30px;
	line-height:28px;
	background:#1c7da0;
	border-left:1px solid #95cfe5;
}

#myVideos {
	width: 70px;
}

.project {
	width:161px;
	height:155px;
	float: left;
	margin: 15px 34px 15px 0;
	text-align:center;
	overflow:hidden;
	position:relative;
}

.projectBarSwitch {
    width: 17px;
    height: 15px;
    position: absolute;
    top: 3px;
    right: 3px;
    background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/switch.svg') no-repeat;
    cursor: pointer;
    }

.interactiveBar {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        color: #FFF;
        text-transform: uppercase;
        font-size: 12px;
        padding: 1px 0;
    }

    .standardBar {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.7);
        color: #FFF;
        text-transform: uppercase;
        font-size: 12px;
        padding: 1px 0;
    }

    .project-container{
      display:table; 
      margin:0 auto; 
      position:relative;
    }

    .load-container{
      display:table-cell; 
      position:relative; 
      width:160px;
      height:120px;
      overflow:hidden;
      background-size:auto 100% !important; 
      border: 1px solid #B7B6B6 !important; 
      background-color: #f1f1f1 !important;
    }
    
.projectOptions {
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background: #f58a48;
  background-image: -webkit-linear-gradient(top, #f58a48, #df7e42);
  background-image: -moz-linear-gradient(top, #f58a48, #df7e42);
  background-image: -ms-linear-gradient(top, #f58a48, #df7e42);
  background-image: -o-linear-gradient(top, #f58a48, #df7e42);
  background-image: linear-gradient(to bottom, #f58a48, #df7e42);
	cursor:pointer;
}
.projectOptions:hover {
	background: #df7e42;
  background-image: -webkit-linear-gradient(top, #df7e42, #f58a48);
  background-image: -moz-linear-gradient(top, #df7e42, #f58a48);
  background-image: -ms-linear-gradient(top, #df7e42, #f58a48);
  background-image: -o-linear-gradient(top, #df7e42, #f58a48);
  background-image: linear-gradient(to bottom, #df7e42, #f58a48);
}
.menuIcon {
	padding-top:7px;
}

.project:hover .deleteProject{
	display:block;
}

.project:hover .projectOptions{
	display:block;
}

.projectText:hover ~ .pencil{
	display:block;
}
.projectText:hover ~ .deleteProject{
	display:none;
}
.deleteProject{
	position: absolute;
	display:none;
	bottom: 35px;
	right: 5px;
	width: 17px;
	height:24px;
	background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/projectSprite.png') no-repeat center;
	background-position:0 0;
}

.pencil {
	position: absolute;
	display:none;
	bottom: 17px;
	right: 6px;
	width: 14px;
	height:13px;
	background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/projectSprite.png') no-repeat center;
	background-position:-17px 0;
}
#menuPencil {
	width: 14px;
	height:13px;
	background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/projectSprite.png') no-repeat center;
	background-position:-17px 0;
	visibility:hidden;
	margin: -1px 0 0 8px;
}

.pencil:hover {
	display:block;
}
.pencil:hover ~ .deleteProject {
	display:none;
}

#newProject {
	width:161px;
	height:120px;
	float: left;
	margin: 15px 34px 15px 0;
	text-align:center;
	background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/newProject.png') no-repeat;
}

#projectsToggle, #vidoesToggle {
	clear:both;
}

.footer {
	margin-top:0 !important;
}


.editInPlace-active input {
	border:none;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	color:#4d4d55;
	font-size:12px;
	height:14px;
	margin:0;
	padding:0 8px;
	outline: none;
}

.projectName input {
	border:none;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	color:#4d4d55;
	font-size:19px;
	background:transparent;
	font-weight:bold;
	height:25px;
	line-height:30px;
	margin:-5px;
	padding:0 5px;
	outline: none;
	width:auto;
	min-width:150px;
}


.editInPlace-active input:active .pencil {
	display:none;
}

.customDrop select {
   background: transparent;
   width: 263px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ccc;
   height: 34px;
    -webkit-appearance: none;
}

.customDrop{
   width: 240px;
   height: 34px;
   overflow: hidden;
   background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/dropArrow.png') no-repeat 96% #dcdcdc;
	 float:left;

}

.selectBtn {
	width:116px;
	text-align:center;
	height:34px;
	line-height:34px;
	background:#dcdcdc;
	float:left;
	margin-left:20px;
}

.selectBtnLg {
  width:200px;
  text-align:center;
  height:34px;
  line-height:34px;
  background:#dcdcdc;
  float:left;
  margin-left:20px;
}

.pickerBtn {
  width:200px;
  text-align:center;
  height:34px;
  line-height:34px;
  float:left;
  margin-left:20px;
}

input[type="radio"] {
   position:absolute;
   opacity: 0;
   -moz-opacity: 0;
   -webkit-opacity: 0;
   -o-opacity: 0;
	 margin-left:5px;
}
input[type="radio"] + label {
   position:relative;
   padding: 0 0 0 25px;
   font-size: 16px;
   line-height: 16px;
}
input[type="radio"] + label:before {
   content:"";
   display:block;
   position:absolute;
   top:2px;
   height: 14px;
   width: 14px;
   background: white;
   border: 1px solid gray;
   box-shadow: inset 0px 0px 0px 2px white;
   -webkit-box-shadow: inset 0px 0px 0px 2px white;
   -moz-box-shadow: inset 0px 0px 0px 2px white;
   -o-box-shadow: inset 0px 0px 0px 2px white;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -o-border-radius: 8px;
	 border-radius: 8px;
}
input[type="radio"]:checked + label:before {
   background: #ef8700;
}
img{
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.dz-progress {
}

#mosaicProgress{
	display:block;
	padding:40px 60px 0px;
	text-align:center;
}
#controlsWrapper {
	display:none;
}
#canvasWrapper {
	margin:20px auto 0;
}
.selectors {
	margin:0 auto;
	width:712px;
	border: 1px solid #b4aea9;
	background:#f5f5f5;
}
.sliderWrapper {
	padding:20px 20px;
}
#colorOverlaySlider, #sourceOverlaySlider {
	width:266px;
}
#messageArea {
	width:60%;
	margin:200px auto;
	text-align: center;
}
#deleteForm {
	width:60%;
	margin:200px auto;
	text-align: center;
}
#deleteConfirm {
	margin:20px 8px 0 0;
}
#cellCounter {
	display:inline-block;
	vertical-align:top;
}
input[type=checkbox] {
	visibility: hidden;
}

.roundedOne {
	width: 28px;
	height: 28px;
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 10px auto 10px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	position: relative;
}

.roundedOne label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedOne label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=1);
	opacity: 0;
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--primary-color);

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	top: 2px;
	left: 2px;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.roundedOne label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.roundedOne input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.roundedOne:hover ~ .sizeLabel {
	visibility:visible;
}

.roundedOne:active ~ .sizeLabel {
	visibility:visible;
}
.btn-option {
	border: none;
	border-top:1px solid #FFF;
	display:block;
	margin:0 !important;
	width:100%;
	height:60px;
	line-height:35px;
}
.btn-option:before {
  content: "";
  float: left;
  width: 34px;
  height: 34px;
  margin: 0 5px 0 0;
  background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/menuSprite.png') no-repeat;
}
.btn-noclick {
	border: none;
	border-top:1px solid #FFF;
	display:block;
	margin:0 !important;
	width:100%;
	height:60px;
	line-height:35px;
}

.btn-noclick:before {
  content: "";
  float: left;
  width: 34px;
  height: 34px;
  margin: 0 5px 0 0;
  background: url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/menuSprite.png') no-repeat;
}

.editBtn:before {
	background-position: 0 0;
}

.reviewBtn:before {
	background-position: -35px 0;
}

.noReviewBtn:before {
	background-position: -70px 0;
}

.exploreBtn:before {
	background-position: -105px 0;
}

.noExploreBtn:before {
	background-position: -140px 0;
}
.duplicateBtn:before {
	background-position: -175px 0;
}
.trashBtn:before {
	background-position: -210px 0;
}


.noty_cancel {
	border: none;
	display:inline-block;
	margin:0 !important;
	width:34px;
	height:34px;
	background:#474242;
	line-height:34px;
	text-align:center;
}
.noty-project {
	display:inline-block;

}
.noty_project_title {
	text-transform:capitalize;
}
.noty_steps {
	background: #FFF;
	width:256px !important;
	text-align:left !important;
}
.noty_text {
	word-wrap: break-word;
	font-family:Arial, Helvetica, sans-serif;
}
.noty_steps + div {
	padding:0 !important;
}

.noty_message{
	background-color:#fff;
}
.statsWrapper {
	width:148px;
}
.statWrapper {
	clear:both;
}

#fbShare, #copyShare, #pinShare, #twShare, #googleShare, #liShare {
	width:28px;
	height:28px;
	margin-left:6px;
  border-radius: 3px;
}

#fbShare {
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/facebook.svg') no-repeat;
}
#copyShare {
	background:url('https://www.picturemosaics.com/photo-mosaic-tool/images/dropdown/shareDropdown/link.svg') no-repeat;
}

#liShare {
    background: url(https://cdn.picturemosaics.com/photo-mosaic-tool/images/linkedin.svg) no-repeat;
}


#pinShare {
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/pinterest.svg') no-repeat;
}
#twShare{
  background: url(https://cdn.picturemosaics.com/photo-mosaic-tool/images/xIcon.svg) no-repeat;
  background-size: contain;
}
#googleShare {
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/shareSprite.png') no-repeat;
	background-position:-102px 0;
	display: none;
}


.modal {
    /* some styles to position the modal at the center of the page */
    position: fixed;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -400px;
    background-color: #FFF;
    text-align: center;

    /* needed styles for the overlay */
    z-index: 10000; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}

.modal2 {
	position: absolute;
    top: 100px;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    background-color: #FFF;
    text-align: center;
	z-index: 10000; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}

.loading {
		position: fixed;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 80px;
    margin-left: -65px;
    margin-top: -35px;
    text-align: center;

  	background: #FFF;
    /* needed styles for the overlay */
    z-index: 10000; /* keep on top of other elements on the page */
    outline: 9999px solid rgba(0,0,0,0.5);
}
.modal_inner {
	margin:10px 10px;
}

#shareMenu {
	position:relative;
	height:30px;
}

#shareMenu:hover > ul {
    display: block;
}

#shareMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 99999;
    background-color: #e4e2e2;
}

#shareMenu ul div:hover {
    background-color: #f2f2f2;
}

#shareMenu ul div {
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
		width:185px;
		text-align:left;
		border-bottom:1px solid #eeeeee;
}

#shareSettings {
	width:28px;
	height:28px;
	margin:4px 0 0 6px;
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/public.svg') no-repeat;
	cursor:pointer;
}
#shareArea {
	display: table;
  table-layout: fixed;
	width:100%;
	margin:15px 0;
	background:#f7f7f7;
}
#shareDisplay {
	width:18%;
	display: table-cell;
	vertical-align:middle;
}
#mosaicTitle {
	width:37%;
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
#shareLinks {
	width:31%;
	display: table-cell;
	vertical-align:middle;
}
#greyHR{
	width:1px;
	height: 24px;
    margin-left: 4px;
    margin-right: 4px;
	background-color:#878787;
}
.grayHR{
  width:1px;
  height: 24px;
    margin-left: 4px;
    margin-right: 4px;
  background-color:#878787;
}
#purchaseBtnWrapper {
	width:100%;
	margin:30px auto;
	text-align: center;
}
#goBackFinalize {
	width:153px;
	height:40px;
	background:url('https://www.picturemosaics.com/photo-mosaic-tool/images/goBackSprite_blue.png') no-repeat;
	background-position:0 -43px;
	margin:0 45px 0 88px;
}
#goBackShare {
	width:153px;
	height:40px;
	background:url('https://www.picturemosaics.com/photo-mosaic-tool/images/goBackSprite_blue.png') no-repeat;
	background-position:0 0;
	margin:0 65px 0 88px;
}
.greenBtn {
	background: #5ea01b;
  background-image: -webkit-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -moz-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -ms-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -o-linear-gradient(top, #5ea01b, #468b0f);
  background-image: linear-gradient(to bottom, #5ea01b, #468b0f);
  padding: 5px 20px;
  text-decoration: none;
	text-align:center;
	line-height:31px;
}
.greenBtn:hover {
	background: #5ea01b;
  background-image: -webkit-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -moz-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -ms-linear-gradient(top, #5ea01b, #468b0f);
  background-image: -o-linear-gradient(top, #5ea01b, #468b0f);
  background-image: linear-gradient(to bottom, #5ea01b, #468b0f);
}
#loadedProjectOptions {
	width:30px;
	height:30px;
	margin:0;
	text-align:center;
	background:#b7b6b6;
}
#stepsWrapper {
	margin-top:30px;
}
.sectionWrapper {
    background: none repeat scroll 0 0 #f2f2f2;
    margin: 15px auto;
    padding: 30px;
    width: 784px;
		position:relative;
}

#uploadUsing {
	position:absolute;
	top:250px;
	left:50px;
	width:178px;
	height:117px;
	border:1px solid #555555;
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/uploadUsing.png') no-repeat center;
}
.uploadUsingFb {
	height:33px;
	width:32px;
	position:absolute;
	top:17px;
	left:73px;
}
.uploadUsingG {
	height:33px;
	width:32px;
	position:absolute;
	top:68px;
	left:125px;
}
#proofLogo, #printLogo, #digitalLogo,#freeLogo {
	width:34px;
	height:34px;
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/shareButtonsSprite2.png') no-repeat;
}

#proofLogo {
	background-position: 0 0;
	margin:4px 8px 0 0;
}
#freeLogo{
	background-position:-35px 0;
	margin:4px 8px 0 0;
}
#printLogo {
	background-position:-70px 0;
	margin:4px 6px 0 0;
}
#digitalLogo {
	background-position:-105px 0;
	margin:4px 6px 0 0;
}

.shareBtn {
	background: #FFF;
  background-image: -webkit-linear-gradient(top, #FFF, #e0e0e0);
  background-image: -moz-linear-gradient(top, #FFF, #e0e0e0);
  background-image: -ms-linear-gradient(top, #FFF, #e0e0e0);
  background-image: -o-linear-gradient(top, #FFF, #e0e0e0);
  background-image: linear-gradient(to bottom, #FFF, #e0e0e0);
	border:1px solid #c8c8c8 !important;
	padding: 5px 10px;
  text-decoration: none;
	text-align:center;
}
.shareBtn:hover {
	background: #FFF;
  background-image: -webkit-linear-gradient(top, #e0e0e0, #FFF);
  background-image: -moz-linear-gradient(top, #e0e0e0, #FFF);
  background-image: -ms-linear-gradient(top, #e0e0e0 #FFF);
  background-image: -o-linear-gradient(top, #e0e0e0, #FFF);
  background-image: linear-gradient(to bottom, #e0e0e0, #FFF);
}

.inactiveBtn {
	background: #e0e0e0;
	border:1px solid #c8c8c8 !important;
	padding: 5px 10px;
}

#ratioInfo {
	position: absolute;
	bottom: 108px;
	right:15px;
	width:200px;
}
.clearAll {
	background:url('https://cdn.picturemosaics.com/photo-mosaic-tool/images/clearAll.png') no-repeat;
	background-position:right;
	margin:5px 1px 10px;
  padding-right:8px;
}
.loadingText {
	font-size:23px;
	font-weight:bold;
	color:#8799a9;
	font-family:Arial, Helvetica, sans-serif;
	width:130px;
	text-align:center;
	position:absolute;
	left:0;
	bottom:5px;
}
.loadingShadow {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
}

input[type=checkbox].css-checkbox {
	position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:30px;
	height:27px;
	display:inline-block;
	line-height:27px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:27px;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -27px;
}
label.css-label {
	background-image:url('https://www.picturemosaics.com/photo-mosaic-tool/images/checkSprite_blue.png');
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#pageLikes{
	width:96px;height:20px;display:none;background-color:#e1e1e1;border:1px solid #c8c8c8;font-size:11px;text-align:center;color:#65696d;float:right;line-height:20px; font-family: 'robotoregular', Arial, Helvetica, sans-serif;
}
#pageLikesWrapper{
	width:100%; margin:0 auto;margin-top: -15px;height: 1px;
}

/* kate 2-2-21 */

 #countContainerInteractive {margin-top: 10px; text-align:right;}

.project {    
  width: 161px;
  height: 155px;
  float: left;
  margin: 15px 17px 15px 17px;
  text-align: center;
  overflow: hidden;
  position: relative;
}
#infoText {
  text-align: left;
  padding-bottom: 20px;
  font-size: 13px;
}
#buttonsWrapper {
  display: flex;
  justify-content: space-between;
}
.newProject {
  width: 48%;
  border-radius: 12px;
  height: 103px;
  float: left;
  text-align: center;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--primary-color) !important;
}
#startProject {background-color: var(--primary-color);}
#startInteractive {background-color: transparent; color: var(--primary-color);}
.interactiveBar {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #FFF;
  text-transform: uppercase;
  font-size: 12px;
  padding: 1px 0;
}
.buttonText {
  text-align: left;
  max-width: 72.5%;
  font-size: 13px;
}
.buttonText span {
  font-weight: bold;
  font-size: 21px;
  letter-spacing: 0px;
  word-spacing: -1px;
}

#exampleText {
  width: 100%;
  /* text-align: right; */
  padding: 10px 0;
  font-size: 12px;
 
}
#exampleText a{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: #000;
}
.blueWhiteArrow{
  width: 13px;
  height: 13px;
  background: url(https://cdn.picturemosaics.com/photo-mosaic-tool/images/blueWhiteArrow.svg) no-repeat;
  margin-left: 5px;
}
.pinkWhiteArrow{
  width: 13px;
  height: 13px;
  background: url(https://www.picturemosaics.com/photo-mosaic-tool/images/pinkWhiteArrow.svg) no-repeat;
  margin-left: 5px;
}
.plus{
  width: 40px;
  height: 40px;
  position: relative;
  margin-right: 20px;
}
.plus:before, .plus:after{
  content: " ";
  position: absolute;
  background-color: #fff;
}
.plus:before{
  width: 9px;
  height: 100%;
  left: 40%;
  top: 0;
}
.plus:after{
  width: 100%;
  height: 9px;
  left: 0;
  top: 40%;
}

.plus-blue:before, .plus-blue:after{
  background-color: var(--primary-color);
}

#cellsWrapper {
  display: flex;
  justify-content: space-between;
}
.cellBottomWrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#split{
  width: 2px;
  background-color: #e1e1e1;
  margin: -30px 0;
  position: relative;
}
#split div{
  position: absolute;
  top: 45%;
  left: 0;
  margin: -7px;
  background-color: #f2f2f2;
  color: #5f574f;
  padding: 15px 0;
  font-weight: 900;
  font-size: 13px;
}

#interactiveLink{
  position: absolute;
  right: 54px;
  height: 40px;
  top: 13px;
}
#interactiveLink span {
  display: block;
  font-size: 11px;
  margin-top: -6px;
  padding-bottom: 5px;
  text-align: center;
}
.omtBackBtn{
  position: absolute;
  width: 100px;
  height: 30px;
  top: -30px;
  line-height: 30px;
  color: #fff;
  font-weight: bold;
}