/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

/* Toggle Styles */

:root {
  --main-bg-color: #122A4E;
  /*--main-hover-color: #002966;*/
  --main-hover-color: #689F38;
  --main-active-bgcolor: #9ac221;
  --main-active-color: #fff;
}

#wrapper li {
    /*text-indent: 10px;
    line-height: 50px;*/
    list-style-type: none;  
    margin: 0;
    padding: 0;  
}

.asterisco {
	color: red;
}

.warning {
	font-family: "Roboto";
	font-size: 12px;
	color: red;
	opacity: 38%;
}

.foto {
    max-width: 300px;
    max-height: 150px;	
}


.grid-tile-footer {
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s linear;
  word-wrap: break-word;
}

.tile-img {
  cursor: pointer;
  max-height: 100px;
  max-width: 120px;
}

.tile-img:hover + .grid-tile-footer {
  opacity: 1;
  transition: all 0.3s linear;
  visibility: visible;
}

.grid-tile-footer:hover {
  opacity: 1;
  transition: all 0.3s linear;
  visibility: visible;
}

.stepper {
  background-color: white;	
  width: 100%;  
}

.sem-ocorrencias {
	padding: 10px;
}

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

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

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

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

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

.photoLoaded-true {
	visibility: visible;
}

.photoLoaded-false {
	visibility: hidden;
}

@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;
	}
}

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

/* 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;
	}
}

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


/* ******************************************
			Timeline Stypes 
   ****************************************** */
* {
  /*box-sizing: border-box;*/
}

/* Set a background color */
.ocr-timeline_background {
  width: 100%;
  background-color: white;
  font-family: Helvetica, sans-serif;
}

/* The actual timeline (the vertical ruler) */
.ocr-timeline {
  position: relative;
  width: 100%;
  margin: 0;
}

@media screen and (max-width:480px) {
	
	.no-margin-xs {
		padding: 0px;
		margin: 0px;
	}
	
	/* Container around content */
	.ocr-timeline-container {
	  padding: 0px;
	  position: relative;
	  background-color: inherit;
	}
	
	/* The actual content */
	.ocr-timeline-content {
	  padding: 10px 20px;
	  margin-top: 10px;
	  margin-left: 0px;
	  background-color: #F3F3F3;
	  border-radius: 10px;
	  width: 100%;
	}
}

@media screen and (min-width:480px) {
	/* The actual timeline (the vertical ruler) */
	.ocr-timeline::after {
	  content: '';
	  position: absolute;
	  width: 6px;
	  background-color: #EEEEEE;
	  top: 0;
	  bottom: 0;
	  left: 4px;
	  margin-left: -3px;
	}
	
	/* Container around content */
	.ocr-timeline-container {
	  position: relative;
	  background-color: inherit;
	}

	/* The circles on the timeline */
	.ocr-timeline-container::after {
	  content: '';
	  position: absolute;
	  width: 25px;
	  height: 25px;
	  left: -8px;
	  background-color: white;
	  border: 4px solid #FF9F55;
	  top: 24px;
	  border-radius: 50%;
	  z-index: 1;
	}

	/* Add arrows to the left container (pointing right) */
	.ocr-left::before {
	  content: " ";
	  height: 0;
	  position: absolute;
	  top: 27px;
	  width: 0;
	  z-index: 1;
	  right: -10px;
	  border: medium solid #F3F3F3;
	  border-width: 10px 0 10px 10px;
	  border-color: transparent transparent transparent #F3F3F3;
	}

	/* Add arrows to the right container (pointing left) */
	.ocr-right::before {
	  content: " ";
	  height: 0;
	  position: absolute;
	  top: 27px;
	  width: 0;
	  z-index: 1;
	  left: 21px;
	  border: medium solid #F3F3F3;
	  border-width: 10px 10px 10px 0;
	  border-color: transparent #F3F3F3 transparent transparent;
	}

	/* The actual content */
	.ocr-timeline-content {
	  border-radius: 10px;
	  background-color: #F3F3F3;
	  margin-left: 30px;
	  padding: 10px 20px;
	  width: 98%;
	  margin-top: 10px;
	}
}

.white-bg {
	background-color: #FFFFFF;
}