/*
 Classes auxiliares utlizadas em qualquer lugar
 ========================================================== */
.grecaptcha-badge {
	z-index: 3;
}

 .centralize {
	margin: 0 auto;
	float: none;
}
.text-center {
	text-align: center;
}

/*
 Loaders
 ========================================================== */
.loader {
	height: 100px;
}
.loading:not(.simplefavorite-button){
	width: 100%;
  position: relative;
	height: 100%;
  cursor: wait;
	display: none;
}

.is-loading .loading{
	display: block;
}
	.loading > .loading__animation {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		z-index: 100;
		background: transparent;
	}
		.loading > .loading__animation--orange > span{
			border: 5px solid #DCDCDC;
			border-radius: 100%;
			border-left-color: #364A93;
			left: 50%;
			top: 50%;
			position: absolute;
			width: 32px;
			height: 32px;
			margin-top: -16px;
			margin-left: -16px;
		}

		.loading > .is-animating  > span{
			animation: animate 1s cubic-bezier(0, .25, .7125, .1) infinite;
		}


@keyframes animate {
	0%{
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}


/* Loading with body bg animation*/

html.is-loading body {
	width: 100wh;
	height: 90vh;
	overflow: hidden;
	background: linear-gradient(-45deg, #afafaf, #eee, #efefef, #ffffff);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
}

html.is-loading body > .loading {
	overflow: hidden;
	height: 100vh;;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}


/*
 Transições
 ========================================================== */

.effect-transition {
	-webkit-transition : all 0.2s ease-out;
	-moz-transition    : all 0.2s ease-out;
	-o-transition      : all 0.2s ease-out;
	transition         : all 0.2s ease-out;
}
.effect-opacity {
	-ms-filter     : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter         : progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	-moz-opacity   : 1; /* Netscape */
	opacity        : 1;  /* Good browsers */
}
	.effect-opacity:hover {
		-ms-filter     : "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter         : progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
		-moz-opacity   : 0.8; /* Netscape */
		opacity        : 0.8;  /* Good browsers */
	}
/*
 Tooltip Styles
 ========================================================== */

/* Add this attribute to the element that needs a tooltip */
.tooltip {
	position : relative;
	z-index  : 8;
	cursor   : pointer;
}

/* Hide the tooltip content by default */
.tooltip .tooltip-msg {
	visibility     : hidden;
	-ms-filter     : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter         : progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
	-moz-opacity   : 0;
	-khtml-opacity : 0;
	opacity        : 0;


	pointer-events     : none;

	-webkit-transition : opacity .2s linear;
	-moz-transition    : opacity .2s linear;
	-ms-transition     : opacity .2s linear;
	-o-transition      : opacity .2s linear;
	transition         : opacity .2s linear;

}
.tooltip .tooltip-icone {
	-ms-filter     : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter         : progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
	-moz-opacity   : .5;
	-khtml-opacity : .5;
	opacity        : .5;
}

.tooltip:hover .tooltip-icone {
	-ms-filter     : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter         : progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
	-moz-opacity   : 1;
	-khtml-opacity : 1;
	opacity        : 1;
}

/* Position tooltip above the element */
.tooltip .tooltip-msg {
  position              : absolute;

  /* alinhando o elemento com margin e valores absolutos */
  bottom                : 150%;
  left                  : 50%;

  margin-bottom         : 9px;
  margin-left           : -59px;

  padding               : 4px 0;
  width                 : 118px;
  height                : 11px;

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

  background-color      : #000;
  background-color      : rgba(0, 0, 0, 0.9);

  color                 : #fff;
  text-align            : center;

  font-size             : 11px;
  line-height           : 1;
}

.tooltip .tooltip-msg.tooltip-oeste {
	top         : 50%;
	margin-top  : -9px;
	left        : -90%;
	margin-left : -106.2px;
	bottom      : initial;
}

.tooltip .tooltip-msg.tooltip-sul {
	top         : 100%;
	margin-top  : 9px;
	left        : 50%;
	margin-left : -59px;
	bottom      : initial;
}

/* Triangle hack to make tooltip look like a speech bubble */
/*.tooltip .tooltip-msg.tooltip-norte:after {
	position     : absolute;
	bottom       : 150%;
	left         : 50%;
	margin-left  : -5px;
	width        : 0;
	border-top   : 5px solid #000;
	border-top   : 5px solid rgba(0, 0, 0, 0.9);
	border-right : 5px solid transparent;
	border-left  : 5px solid transparent;
	content      : " ";
	font-size    : 0;
	line-height  : 0;
}

.tooltip .tooltip-msg.tooltip-oeste:after {
	border-top            : 5px solid transparent;
	border-right          : 0;
	border-bottom         : 5px solid transparent;
	border-left           : 6px solid rgba(0,0,0,.9);
	content               : " ";
	font-size             : 0;
	line-height           : 0;
	position              : absolute;
	right                 : -6px;
	margin-top            : 2px;
	-webkit-border-right-radius : 2px;
	-moz-border-right-radius    : 2px;
	border-right-radius         : 2px;
}
.tooltip .tooltip-msg.tooltip-sul:after {
	border-top                  : 0;
	border-right                : 5px solid transparent;
	border-left                 : 5px solid transparent;
	border-bottom               : 6px solid rgba(0,0,0,.9);
	content                     : " ";
	font-size                   : 0;
	line-height                 : 0;
	position                    : absolute;
	right                       : -6px;
	margin-top                  : 2px;
	-webkit-border-right-radius : 2px;
	-moz-border-right-radius    : 2px;
	border-right-radius         : 2px;
}*/

/* Show tooltip content on hover */
.stts-materia:hover .tooltip .tooltip-msg {
  visibility: visible;
	-ms-filter     : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter         : progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
	-moz-opacity   : 1;
	-khtml-opacity : 1;
	opacity        : 1;
}



/* Setas */
.ie .arrow-up {
	border-left   : 10px solid transparent;
	border-right  : 10px solid transparent;
	border-bottom : 10px solid #f5f5f5;
	width         : 0;
	height        : 0;
	position      : absolute;
	bottom        : 0px;
	left          : 50%;
	margin-left   : -10px;
	visibility    : hidden;
	display       : block;
}
.arrow-up {
	position   : relative;
	background : #f5f5f5;
	border     : 1px solid #ccc;
	display    : block;
}
.arrow-up:after, .arrow-up:before {
	bottom         : 100%;
	left           : 25%;
	border         : solid transparent;
	content        : " ";
	height         : 0;
	width          : 0;
	position       : absolute;
	pointer-events : none;
}
.arrow-up:after {
	border-color        : rgba(245, 245, 245, 0);
	border-bottom-color : #f5f5f5;
	border-width        : 5px;
	margin-left         : -5px;
}
.arrow-up:before {
	border-color        : rgba(204, 204, 204, 0);
	border-bottom-color : #ccc;
	border-width        : 6px;
	margin-left         : -6px;
}

/* Divisores Horizontais */

.divider {
    display: block;
    height: 1px;
    width: 100%;
    padding: 0.5em 0;
    max-height: 1px;
}

	.divider--pointed:after {
	    border-color        : rgba(204, 204, 204, 0);
		border-width        : 1px;
		border-style: dotted;
		margin-top         : 2px;
	}


/* Vex fix font-size */
.vex-dialog-message, .vex-dialog-buttons {
	font-size: 1.4em !important;
	line-height: 1.1428571428571428em;
}

.vex-dialog-input textarea {
   border: 1px solid #dedede !important;
   padding: 1em !important;
}

.vex .vex-content {
	max-width: 90% !important;
}

.vex.vex-theme-default .vex-content {
	font-size: 1.2em !important;
	line-height: 1.1333333333333333333333333333333em !important;
}