/* CSS Document */
body
{
	overflow-y: scroll;
}

.topo
{
	margin-left: 15px;
	margin-right: 15px;
}

.conteudo
{
	margin-top: 55px;
	margin-left: 20px;
	margin-right: 20px;
}

.modal-body { padding-right: 30px; padding-left: 30px; }

.has-margin-bottom
{
	margin-bottom: 20px;
}

.pointer {
	cursor: pointer;
}

/* esquema dos flashs */

.alerta {
	position: fixed;
	top: 3px;
	right: 2px;
	z-index: 1101;
	font-size: 18px;
	/* transform: translate(-50%,-50%); */
}

.check {
	border-radius: 5px;
	width: 300px;
	text-align: left;
	display: flex;
	align-items: center;
	padding: 20px 10px 20px 10px;
	background-color: #2B3246;
	cursor:pointer;
	box-shadow:  9px 9px 18px #262c3e,
		-9px -9px 18px #30384e;
	color: #0ad406;
	margin: 20px;
}
.check:hover{
	background-color: rgba(147, 209, 117, 0.50);
	transition:0.5s;
}

.color {
	animation: color 2s linear infinite;
}

.info {
	border-radius: 5px;
	width: 300px;
	text-align: left;
	display: flex;
	align-items: center;
	padding: 20px 10px 20px 10px;
	background-color: #2B3246;
	cursor:pointer;
	box-shadow:  9px 9px 18px #262c3e,
		-9px -9px 18px #30384e;
	color: rgb(82, 125, 243);
	margin: 20px;
}

.spin {
	animation: spin 2s linear infinite;
}

.info:hover
{
	background-color: rgba(82, 125, 243, 0.50);
	transition:0.5s;
}

.warning {
	border-radius: 5px;
	width: 300px;
	text-align: left;
	display: flex;
	align-items: center;
	padding: 20px 10px 20px 10px;
	background-color: #2B3246;
	cursor:pointer;
	box-shadow:  9px 9px 18px #262c3e,
		-9px -9px 18px #30384e;
	color: rgb(247, 149, 72);
	margin: 20px;
}

.warning:hover{
	background-color: rgba(247, 149, 73, 0.50);
	transition:0.5s;
}


.rotate {
	animation: rotate 2s linear infinite;
}
.danger {
	border-radius: 5px;
	width: 300px;
	text-align: left;
	display: flex;
	align-items: center;
	padding: 20px 10px 20px 10px;
	background-color: #2B3246;
	cursor:pointer;
	box-shadow:  9px 9px 18px #262c3e,
		-9px -9px 18px #30384e;
	color: rgb(255, 10, 1);
	margin: 20px;
}

.danger:hover
{
	background-color: rgba(255, 10, 1, 0.33);
	transition:0.5s;
}


.shine {
	animation: shine 2s linear infinite;
}

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

@keyframes color {
	50% {
		color: #2B3246;
	}
	100% {
		color: #0ad406;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	20% {
		transform: rotate(90deg);
	}
	40% {
		transform: rotate(0deg);
	}
	80% {
		transform: rotate(-90deg);
	}
}

@keyframes shine {
	0% {
		color: #2B3246;
	}
	50% {
		text-shadow:
			0 0 5px #fff,
			0 0 10px #fff,
			0 0 40px red,
			0 0 60px red,
			0 0 80px red;
	}
}


/* loader */
.loader {
	display: none;
}

.loader-area {
	opacity:0.3;
    background-color:#ccc;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1100;
}

/* HTML: <div class="loader"></div> */
.loader-spiner {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1101;
	--d:22px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	color: #007fff;
	box-shadow:
		calc(1*var(--d))      calc(0*var(--d))     0 0,
		calc(0.707*var(--d))  calc(0.707*var(--d)) 0 1px,
		calc(0*var(--d))      calc(1*var(--d))     0 2px,
		calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,
		calc(-1*var(--d))     calc(0*var(--d))     0 4px,
		calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,
		calc(0*var(--d))      calc(-1*var(--d))    0 6px;
	animation: l27 1s infinite steps(8);
}
@keyframes l27 {
	100% {
		transform: rotate(1turn)
	}
}