@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@600;700&display=swap');

.photogallery-importmodal {
	background: #FFF7F7;
	color: #3D3838;
	font-family: 'Spartan', sans-serif;
	font-weight: 600;
	vertical-align: top;
	width: 100%;
	max-width: 1376px;
}
.photogallery-importmodal h1, .photogallery-importmodal h2, .photogallery-importmodal h3, .photogallery-importmodal h4, .photogallery-importmodal h5 {
	color: #898989;
	font-family: 'Spartan', sans-serif;
}

/* --- Menu bar --- */
.photogallery-importmodal .upper-bar {
	margin-bottom: 20px;
}
.photogallery-importmodal .upper-bar h2 {
	color: #3D3838;
    font-size: 24px;
    text-align: center;
	text-transform: uppercase;
    margin-top: 24px;
	margin-bottom: 32px;
}
.photogallery-importmodal .upper-bar ul {
	display: flex;
	list-style-type: none;
}
.photogallery-importmodal .upper-bar li {
	align-items: center;
	background: rgb(196 196 196 / 15%);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	height: 148px;
	justify-content: center;
	padding: 10px;
}
.photogallery-importmodal .upper-bar li.active, .photogallery-importmodal .upper-bar li:hover {
	background: none;
}
.photogallery-importmodal .upper-bar li svg {
	height: 50px;
	margin-bottom: 13px;
}
.photogallery-importmodal .upper-bar li.active svg *, .photogallery-importmodal .upper-bar li:hover svg * {
	fill: #256FDE;	
}
.photogallery-importmodal .upper-bar li h3 {
	border-bottom: 3px solid transparent;	
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.005em;
	margin: 0;
	padding-bottom: 9px;
}
.photogallery-importmodal .upper-bar li.active h3, .photogallery-importmodal .upper-bar li:hover h3 {
	color: #256FDE;	
	border-bottom: 3px solid #256FDE;	
}

/* --- Upload --- */
.uppy-Dashboard {
	width: 100%;
}
.uppy-Dashboard-inner {
	background: transparent;
	border: 0 !important;
	min-height: 500px !important;
	height: auto !important;
}
.uppy-Dashboard-innerWrap {
	min-height: 500px;
}
.uppy-Dashboard-AddFiles {
	height: 100%;
	position: absolute;
	width: 100%;
}
.uppy-ProviderBrowser {
	align-self: flex-start;
}
.uppy-ProviderBrowserItem-checkbox:focus {
	outline: none !important;
}
.uppy-ProviderBrowser-viewType--grid .uppy-ProviderBrowserItem-checkbox--grid:focus+label, .uppy-ProviderBrowser-viewType--unsplash .uppy-ProviderBrowserItem-checkbox--grid:focus+label {
	box-shadow: none;
}
.uppy-Provider-empty {
	padding: 150px 0;
}
.uppy-ProviderBrowser-headerBar--simple {
	justify-content: flex-end;
}
.uppy-ProviderBrowserItem-inner-relative img {
	pointer-events: none;
}
.uppy-ProviderBrowser-list {
	overflow: initial;
	position: relative;
}
.uppy-ProviderBrowser-actionsBar { 
	left: 50%;
	position: absolute;
    transform: translateX(-50%);
}
.uppy-ProviderBrowser-actionsBar button { 
	display: flex;
	padding: 4px 8px;
}
.uppy-ProviderBrowser-actionsBar svg { 
	margin-right: 6px;
}
.uppy-DashboardContent-panel {
	position: relative;
}
.uppy-Dashboard-dropFilesHereHint {
	border: 0 !important;
}
.upload .uppy-Dashboard-AddFiles {
	background: url('../img/modal-drop.png') no-repeat center 70px;
	border: 4px dashed #C4C4C4 !important;
	margin: 0;
	padding-bottom: 120px;
}
.social .uppy-Dashboard-AddFiles {
	padding-top: 110px;
}
.social .uppy-Dashboard-AddFiles-list {
	max-width: 100%;
}
.social .uppy-DashboardTab svg {
	height: 60px;
	width: 60px;
}
.social .uppy-DashboardTab-btn {
	margin: 0 30px;
}
.uppy-Dashboard-AddFiles-title {
	align-items: center;
	color: #29BDBE;
	font-family: Spartan;
    font-size: 28px;
    font-weight: bold;
	height: 70px;
    text-align: center;
}
.uppy-Dashboard-AddFiles-info {
	padding-top: 0 !important;
	position: initial !important;
}
.uppy-Dashboard-browse {
	border-radius: 4px;
	color: #F26632;
	font-family: 'Spartan', sans-serif;
	font-size: 18px;
	font-weight: 600;
	height: 64px;
	line-height: 70px;
	margin-top: 30px;
	position: relative;
	text-align: center;
	text-transform: uppercase;
	width: 329px;
}
.uppy-Dashboard-browse:first-child {
	margin-top: 110px;
}
.uppy-Dashboard-browse:first-child:not(.inactive), .uppy-Dashboard-browse:hover {
	/* active state by hover or first is active by default */
	background: #F26632;
	color: white;
}
.uppy-Dashboard-browse:before {
	content: " ";
	display: inline-block;
	height: 19px;
	margin-right: 26px;
}
.uppy-Dashboard-browse:first-child:before {
	background: url('../img/modal-upload-image.png') no-repeat center;
	width: 25px;
}
.uppy-Dashboard-browse:first-child:hover {
	opacity: 0.95;
}
.uppy-Dashboard-browse:last-child:before {
	background: url('../img/modal-upload-folder.png') no-repeat center;
	background-position: right;
	width: 22px;
}
.uppy-Dashboard-browse:last-child:hover:before {
	background-position: left;
}
.uppy-Dashboard-browse:focus, .uppy-Dashboard-browse:hover {
	border-bottom: 0;
}
.uppy-StatusBar-actionBtn--retry {
	background: none;
	color: black;
	border-radius: 0;
	font-size: 12px !important;
	margin-right: 20px !important;
}
.uppy-StatusBar-actionBtn--retry:hover {
	background: none;
	color: grey;
}
.uppy-StatusBar-actionBtn--done {
	background: #F26632;
    color: white;
    padding: 7px 20px;
}
.photogallery-importmodal .social-providers .uppy-Dashboard-note {
	cursor: pointer;
	font-size: 12px;
}
.uppy-ProviderBrowserItem-inner {
	height: calc(100% - 28px) !important;
	overflow: visible !important;
}
.uppy-ProviderBrowserItem-inner-relative {
	font-size: 11px;
}
.uppy-ProviderBrowserItem-inner-relative img {
	margin-bottom: 3px;
}

/* Gallery */
.photogallery-importmodal .gallery .gallery-content .sort {
	background: url('../img/modal-sort.png') left center no-repeat;
	color: #3D3838;
	cursor: pointer;
	font-size: 14px;
	padding-left: 30px;
}
.photogallery-importmodal .gallery .gallery-content .sort:hover {
	opacity: 0.8;
}
.photogallery-importmodal .gallery h4 {
	color: #29BDBE;
	margin: 80px 0;
	text-align: center;
}


/* --- Gallery folders --- */
.photogallery-importmodal .gallery-content > .folders, .photogallery-importmodal .folder-content > .images {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 30px;
}
.photogallery-importmodal .gallery .item {
	border-radius: 0px 0px 6px 6px;
	color: #3D3838;
	cursor: pointer;
	margin-bottom: 40px;
	padding-bottom: 28px;
	position: relative;
	width: calc(20% - 15px);
}
.photogallery-importmodal .gallery .images .item {
	padding-bottom: 24px;
}
.photogallery-importmodal .gallery .item-placeholder {
	width: calc(20% - 15px);
}
.photogallery-importmodal .gallery .item .img-container {
	margin-bottom: 25px;
	overflow: hidden;
	padding-top: 100%;
	position: relative;
}
.photogallery-importmodal .gallery .images .item .img-container {
	margin-bottom: 16px;
}
.photogallery-importmodal .gallery .item .img-container img {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	left: 0;
	height: 100%;
	position: absolute;
	object-fit: cover;
	top: 0;
	width: 100%;
}
.photogallery-importmodal .gallery .folders .item .title {
	display: block;
	font-size: 18px;
	line-height: 18px;
	margin-left: 8px;
	margin-right: 9px;
	overflow: hidden;
	padding-top: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.photogallery-importmodal .gallery .images .item .title {
	display: block;
	font-size: 16px;
	height: 22px;
	overflow: hidden;
	padding: 0 8px;
    text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
.photogallery-importmodal .gallery .item .images {
	align-items: center;
	background: url('../img/modal-folder.png') left center no-repeat;
	display: flex;
	float: left;
	font-size: 12px;
	height: 40px;
	justify-content: center;
	margin-right: 8px;
	margin-left: 9px;
	padding-top: 7px;
	width: 48px;
}
.photogallery-importmodal .gallery .item:hover {
	background: #E5E5E5;
}
.photogallery-importmodal .gallery .item.selected {
	background: #FDB913;
}
.photogallery-importmodal .gallery .item .img-container.loading:after {
	background: rgba(0, 0, 0, 0.5);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	content: " ";
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
}
.photogallery-importmodal .gallery .item .lds-ring div {
	border: 6px solid white;
	border-color: white transparent transparent transparent;
}
.photogallery-importmodal .gallery .folder-content .item .lds-ring div {
	border: 6px solid #b3b3b3;
	border-color: #b3b3b3 transparent transparent transparent;
}


.photogallery-importmodal .tab-contents .actions {
	align-items: center;
	display: flex;
	height: 64px;
	justify-content: space-between;
	margin-top: 25px;
}
.photogallery-importmodal .tab-contents .back {
	background: url('../img/modal-back.png') left center no-repeat;
	cursor: pointer;
	font-size: 14px;
	font-weight: bold;
	margin-right: 55px;
	padding-left: 30px;
	text-transform: uppercase;
}
.photogallery-importmodal .tab-contents .back:hover {
	color: #666;
}
.photogallery-importmodal .tab-contents .location {
	color: #898989;
	font-size: 16px;
}
.photogallery-importmodal .tab-contents .location .folder-title {
	color: #3D3838;
}
.photogallery-importmodal .tab-contents .filler {
	flex-grow: 2;
	text-align: center;
}
.photogallery-importmodal .tab-contents .continue-text {
	font-size: 16px;
	margin-right: 70px;
	width: 160px;
	text-align: right;
}
.photogallery-importmodal .tab-contents .continue-button {
	background: #F26632;
	border-radius: 4px;
	font-family: 'Spartan', sans-serif;
	font-size: 18px;
	font-weight: 600;
	height: 64px;
	line-height: 70px;
	text-align: center;
	text-transform: uppercase;
	width: 343px;
}
.photogallery-importmodal .tab-contents .continue-button.inactive {
	background: #D0D1D3;
    pointer-events: none;
}
.photogallery-importmodal .tab-contents .continue-button:before {
	background: url('../img/modal-upload-image.png') no-repeat center;
	content: " ";
	display: inline-block;
	height: 19px;
	margin-right: 26px;
	width: 25px;
}
.photogallery-importmodal .tab-contents .select-all {
    cursor: pointer;
	font-size: 14px;
    padding-left: 35px;
}
.photogallery-importmodal .tab-contents .select-all:before {
    background: url(../img/modal-select-all.png) no-repeat left center;
    content: " ";
	display: inline-block;
	height: 14px;
    margin-right: 10px;
	width: 24px;
}
.photogallery-importmodal .tab-contents .select-all:hover:before {
	background-position: right;
}
.photogallery-importmodal .pagination {
	align-items: center;
	display: flex;
	font-family: 'Spartan', sans-serif;
	justify-content: center;
	margin: 20px 0;
}
.photogallery-importmodal .pagination .prev, .photogallery-importmodal .pagination .next {
	cursor: pointer;
	color: #313233;
	font-size: 20px;
	font-weight: bold;
	margin: 0 8px;
	padding: 15px 12px 12px 12px;
}
.photogallery-importmodal .pagination .prev:hover, .photogallery-importmodal .pagination .next:hover {
	opacity: 0.85;
}
.photogallery-importmodal .pagination .prev.inactive, .photogallery-importmodal .pagination .next.inactive {
	cursor: default;
	opacity: 0 !important;
}
.photogallery-importmodal .pagination .pages {
	display: flex;
}
.photogallery-importmodal .pagination .pages > * {
	margin: 0 8px;
	padding: 12px 16px;
}
.photogallery-importmodal .pagination .pages > .active {
	background: #b3b3b3;
}
.photogallery-importmodal .pagination .pages > *:not(.active) {
	background: #f0f0f0;
	cursor: pointer;
}
.photogallery-importmodal .pagination .pages > *:not(.active):hover {
	opacity: 0.85;
}

/* GOOGLE PHOTOS + FACEBOOK + INSTAGRAM + PHONE */
.photogallery-importmodal .gallery .loading, .photogallery-importmodal .google .loading, .photogallery-importmodal .facebook .loading, .photogallery-importmodal .instagram .loading, .photogallery-importmodal .phone .loading {
	height: 200px;
    position: relative;
}
.photogallery-importmodal .google .note, .photogallery-importmodal .facebook .note, .photogallery-importmodal .instagram .note, .photogallery-importmodal .phone .note {
    font-size: 14px;
	text-align: center;
}
.photogallery-importmodal .google .note, .photogallery-importmodal .facebook .note, .photogallery-importmodal .instagram .note {
	margin-bottom: 25px;
}
.photogallery-importmodal .phone .content {
	text-align: center;
}
.photogallery-importmodal .phone .continue-button {
	background: #90909066 !important;
}
.photogallery-importmodal .phone .import-token {
	background: #3B3B3B;
	color: white;
	display: inline-block;
	font-size: 15px;
	letter-spacing: 4px;
	margin-bottom: 30px;
	padding: 0px 10px;
	width: 200px;
}
.photogallery-importmodal .phone .import-qr img {
	height: 200px;
	margin-top: 50px;
}
.photogallery-importmodal .phone .progress-counts {
	margin-bottom: 50px;
}
.photogallery-importmodal .phone .continue-button {
	margin: 5px auto 30px auto;
}
.photogallery-importmodal .phone .continue-button.inactive {
	background: transparent !important;
	pointer-events: none;
}
.photogallery-importmodal .phone .guide {
	display: flex;
	flex-direction: row;
}
.photogallery-importmodal .phone h4, .photogallery-importmodal .phone .guide p {
	color: #3D3838;
	font-family: 'Spartan', sans-serif;
}
.photogallery-importmodal .phone h4 {
	color: #29BDBE;
	font-size: 28px;
	font-weight: 700;
	line-height: 40px;
	text-align: center;
}
.photogallery-importmodal .phone .guide p {
	font-size: 20px;
	line-height: 22px;
	margin: 20px;
}
.photogallery-importmodal .phone .guide .legal {
	font-size: 10px;
	line-height: 10px;
}
.photogallery-importmodal .phone .guide > div {
	flex-basis: 100%;
}
.photogallery-importmodal .phone .guide .left {
	padding-right: 50px;
	position: relative;
}
.photogallery-importmodal .phone .guide .left:after {
	border-right: 1px solid #3D3838;
	content: '';
	display: block;
	height: 80%;
	height: calc(100% - 200px);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
}
.photogallery-importmodal .phone .guide .right {
	padding-left: 50px;
}
.photogallery-importmodal .phone .guide .left form {
	margin-top: 40px;
}
.photogallery-importmodal .phone .guide input, .photogallery-importmodal .phone .guide select {
	background: transparent;
	border-color: #3D3838;
	display: block;
	height: 57px;
	margin: 40px auto;
	padding: 10px 25px 8px 25px;
	outline: 0;
	width: 70%;
}
.photogallery-importmodal .phone .guide select option {
	font-family: Arial;
    font-size: 18px;
}
.photogallery-importmodal .phone .guide .hydrogen-button {
	background: #F26632;
	border-radius: 4px;
	font-size: 20px;
	height: 58px;
	line-height: 58px;
	margin: 30px auto;
	width: 139px;
}
.photogallery-importmodal .phone .guide .g-recaptcha {
	display: flex;
    justify-content: center;
	transform:scale(0.845);
}
.photogallery-importmodal .phone .app-sms-result {
	display: block;
	font-size: 11px;
	font-weight: bold;
	margin-top: -15px;
	position: absolute;
	text-align: center;
	width: 100%;
}
.photogallery-importmodal .phone .stores {
	padding-top: 20px;
}
.photogallery-importmodal .phone .stores a:first-child {
	margin-right: 170px;
}
.photogallery-importmodal .phone p.or {
	color: #898989;
	font-size: 16px;
	font-weight: 600;
	margin: 32px 0 37px 0;
	text-transform: uppercase;
}
.photogallery-importmodal .phone .open-send-link, .photogallery-importmodal .phone .open-help, .photogallery-importmodal .phone .pair-again {
	cursor: pointer;
	line-height: 32px !important;
	text-decoration: underline;
	max-width: 558px;
}
.photogallery-importmodal .phone .open-send-link:hover, .photogallery-importmodal .phone .open-help:hover, .photogallery-importmodal .phone .pair-again:hover {
	opacity: 0.85;
}
.photogallery-importmodal .phone .pair-again {
	margin: 0 auto;
	text-decoration: none;
}
.photogallery-importmodal .phone .send-link-container {
	position: relative;
}
.photogallery-importmodal .phone .help-container {
	margin-top: 50px;
}
.photogallery-importmodal .phone .help-container p {
	font-size: 16px;
	margin: 40px auto;
	max-width: 370px;
}
.photogallery-importmodal .phone .help-container p:first-child {
	font-size: 18px;
}

.photogallery-importmodal .tab-contents .import-button {
	width: 96px;
}


/* BG PROGRESS INDICATOR */
.importmodal-background-progress {
	background: #f9f9f9;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	bottom: 0;
	font-family: 'Spartan', sans-serif;
	overflow: hidden;
	padding: 20px 40px;
	position: fixed;
	right: 5%;
	text-align: center;
	transition: bottom .5s;
	width: 300px;
}
.importmodal-background-progress.closed {
	bottom: -100%;
}
.importmo6al-background-progress h6 {
	font-family: 'Spartan', sans-serif;
	font-size: 14px;
	font-weight: 400;
}
.importmodal-background-progress progress {
	width: 100%;
}
.importmodal-background-progress .count {
	display: block;
	font-size: 13px;
}

/* LOADING INDICATOR */
.lds-ring {
  display: inline-block;
  position: absolute;
  width: 64px;
  height: 64px;
    z-index: 99;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #666;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #666 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@media screen and (max-width: 1100px) {
	.photogallery-importmodal .tab-contents .actions {
		flex-wrap: wrap;
		height: auto;
	}
	.photogallery-importmodal .tab-contents .actions .continue-button {
		height: 50px;
		line-height: 55px;
		margin: 0;
		margin-top: 10px;
		width: 300px;
	}
}
@media screen and (max-width: 1000px) {
	.photogallery-importmodal .upper-bar ul {
		flex-wrap: wrap;
	}
	.photogallery-importmodal .upper-bar li.active:before {
		display: none;
	}
}
@media screen and (max-width: 800px) {
	.photogallery-importmodal .tab-contents .folder {
		width: 25%;
	}
	.photogallery-importmodal .folder-content .images > div {
		width: 25%;
	}
	
	.photogallery-importmodal .phone .guide {
		flex-direction: column;
	}
}
@media screen and (max-width: 650px) {
	.photogallery-importmodal .tab-contents .folder {
		width: 33.3%;
	}
	.photogallery-importmodal .folder-content .images > div {
		width: 33.3%;
	}
	.photogallery-importmodal .tab-contents .back {
		margin-right: 20px;
	}
	.photogallery-importmodal .tab-contents .actions .hydrogen-button {
		margin: 0;
	}
}
@media screen and (max-width: 550px) {
	.photogallery-importmodal .tab-contents .actions {
		display: block;
		height: auto;
		text-align: center;
		margin-bottom: 20px;
	}
	.photogallery-importmodal .tab-contents .continue-text {
		margin-right: 0;
	}
	.photogallery-importmodal .tab-contents .actions > div {
		display: inline-block;
	}
	.photogallery-importmodal .tab-contents .actions .filler {
		display: block;
		height: 15px;
	}
	.photogallery-importmodal .tab-contents .actions .filler {
		align-items: center;
		display: flex;
		height: 40px;
		justify-content: center;
	}
}
@media screen and (max-width: 500px) {
	.photogallery-importmodal .tab-contents .folder {
		width: 50%;
	}
	.photogallery-importmodal .folder-content .images > div {
		width: 50%;
	}
	.photogallery-importmodal .tab-contents .upload {
		border: none;
	}
	.photogallery-importmodal .tab-contents .upload > div {
		min-height: 0;
		padding: 0;
	}
	.photogallery-importmodal .tab-contents .selector .top, .photogallery-importmodal .tab-contents .selector > span {
		display: none;
	}
	.photogallery-importmodal .tab-contents .upload .buttons {
		display: block;
	}
	.photogallery-importmodal .upper-bar ul {
		align-items: center;
	}
	.photogallery-importmodal .upper-bar ul li {
		font-size: 0;
	}
	.photogallery-importmodal .upper-bar ul li.phone, .photogallery-importmodal .upper-bar ul li.disabled {
		display: none;
	}
	.photogallery-importmodal .upload-folder {
		display: none;
	}
}


/* KIOSK custom */
.photogallery-importmodal.kiosk {
	height: 100%;
	margin: 0;
}
.photogallery-importmodal.kiosk .fancybox-close-small, .photogallery-importmodal.kiosk .upper-bar, .photogallery-importmodal.kiosk .gallery .sort {
	display: none;
}