.campaign-graph {
	width: 100%;
	background-color: #FACADA;
}

.div_photo {
  width: 100%; 
  height: 100%;
  display: flex; 
  align-items: flex-end;
  justify-content: center;
}

.photo {
  cursor: pointer;
  max-height: 100%;
  max-width: 100%;
  /*width:100%;
  height:100%;*/
}

.photo-dialog {
  max-height: 100%;
  max-width: 100%;
}

.photo-on-focus {
  border: 1px solid #000;
}

.progress-display-delay {
	display: flex;
	justify-content: center;
}

@media (min-width: 400px) {
	.container {
		width: 398px;
	}
}

@media (min-width: 600px) {
	.container {
		width: 598px;
	}
}

@media (min-width: 800px) {
	.container {
		width: 798px;
	}
}

/* Photo size, if horizontal orientation */
.photo-horizontal-size {
	width: 200px;
	height: auto;
}

@media (min-width: 400px) {
	.photo-horizontal-size {
		width: 300px;
		height: auto;
	}
}

@media (min-width: 600px) {
	.photo-horizontal-size {
		width: 500px;
		height: auto;
	}
}

@media (min-width: 800px) {
	.photo-horizontal-size {
		width: 600px;
		height: auto;
	}
}

/* --------------------------------------*/

/* Photo size, if vertical orientation */
.photo-vertical-size {
	height: 200px;
	width: auto;
}

@media (min-height: 400px) {
	.photo-vertical-size {
		height: 300px;
		width: auto;
	}
}

@media (min-height: 600px) {
	.photo-vertical-size {
		height: 410px;
		width: auto;
	}
}

@media (min-height: 800px) {
	.photo-vertical-size {
		height: 590px;
		width: auto;
	}
}

/* --------------------------------------*/

.scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
	height: 130px;
}

/* Thumbnail set width for dialog, if horizontal orientation */
.thumbnail-horizontal-width {
	width: 200px;
}

@media (min-width: 400px) {
	.thumbnail-horizontal-width {
		width: 300px;
	}
}

@media (min-width: 600px) {
	.thumbnail-horizontal-width {
		width: 500px;
	}
}

@media (min-width: 800px) {
	.thumbnail-horizontal-width {
		width: 600px;
	}
}

/* --------------------------------------*/

/* --------------------------------------*/

/* Thumbnail set width for dialog, if vertical orientation */
.thumbnail-vertical-width {
	width: 120px;
}

@media (min-height: 400px) {
	.thumbnail-vertical-width {
		width: 170px;
	}
}

@media (min-height: 600px) {
	.thumbnail-vertical-width {
		width: 300px;
	}
}

@media (min-height: 800px) {
	.thumbnail-vertical-width {
		width: 350px;
	}
}

/* --------------------------------------*/