/* sig */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	height: 100%;
	min-height: 100%;
	margin-bottom: -2px;
}

body {
	background: #f1f1f1;
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.center {
	margin-left: auto;
	margin-right: auto;
}

main {
	width: auto !important;
	max-width: 1440px;
	min-height: 100%;
	padding-top: 90px;
	margin-bottom: -60px;
	padding-bottom: 80px;
	flex: 1;
}

footer {
	background: #fff;
	border-top: 1px solid #ccc;
	width: 100%;
	height: 60px;
	line-height: 60px;
	padding: 0 20px; /* Ajusta o padding lateral */
	box-sizing: border-box; /* Inclui padding e borda na largura total */
	display: flex; /* Usa flexbox para layout */
	justify-content: space-between; /* Distribui espaço entre os itens */
	align-items: center; /* Alinha verticalmente os itens */
}

footer .pull-left,
footer .pull-right {
	/* Ajuste os estilos se necessário */
}

.center {
	margin-left: auto;
	margin-right: auto;
}

.autentication {
	width: 460px;
	margin-top: 100px;
}

.autentication img {
	width: 100%;
	margin-bottom: 15px;
	display: block;
}

.box {
	background: #fff;
	border: 1px solid #ccc;
	margin-bottom: 20px;
}

.autentication .box {
	padding: 30px;
}

.form-group {
	margin-bottom: 30px;
}

.form-group label {
	font-size: 12px;
	color: #999;
}

.form-control {
	border-radius: 0px;
	height: 45px;
	border: 1px solid #ccc;
}

textarea.form-control {
	height: 150px;
	resize: vertical;
}

.btn-full {
	width: 100%;
	padding: 10px;
	font-size: 17px;
}

.btn-primary a {
	color: white;
}

.header {
	background: white;
	position: fixed;
	top: 0;
	z-index: 10;
	height: 60px;
	width: 100%;
	border: 1px solid #ccc;
	padding: 0 20px;
}

.header .logo {
	height: 30px;
	margin-top: 15px;
}

.header .login-name {
	display: inline-block;
	text-align: right;
	margin-right: 15px;
	font-size: 16px;
	font-weight: bold;
}

.header .login-name a{
	display: block;
	font-size: 12px;
	color: #999;
}

.header .login img {
	border-radius: 40px;
	height: 40px;
	width: 40px;
}

.header .login {
	margin-top: 10px;
	margin-left: auto;
	margin-bottom: 7px;
}

.card {
	background: white;
	border: 2px solid #ccc;
	height: 300px;
	max-width: 300px;
	text-align: center;
	margin-bottom: 50px;
	transition: all 0.3s ease-in-out;
}

.card a {
	padding: 50px;
	display: block;
	width: 100%;
	height: 100%;
	color: #555;
}

.card i {
	font-size: 120px;
}

.card .card-title {
	font-size: 20px;
}

.card:hover a {
	color: dodgerblue;
	text-decoration: underline;
}

.card a:hover i,
.card a:hover .card-title {
	color: dodgerblue;
	text-decoration: underline;
}

.card-off a:hover i,
.card-off a:hover .card-title {
	color: orange;
	text-decoration: underline;
}


.card:hover {
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5)
}

.card:active {
	box-shadow: 0 10px 10px 0 rgba(0,0,0,0.1)
}

.header2 {
	height: 60px;
	width: 100%;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}

.img-full {
	max-width: 100%; /* or whatever is required */
	height: 160px;
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -200%; /* magic! */
}

.fa-home {
	font-size: 22px;
}

.user-box {
	margin-bottom: 30px;
	text-align: center;
	background: #666;
	color: white;
	border: 1px solid #666;
}

.user-name {
	padding: 2px;
	display: block;
	font-size: 15px;
}

.box-header {
	background-color: grey;
	color: white;
	border-bottom: 2px solid black;
	width: 100%;
	padding: 15px 20px;
	font-size: 20px;
}

.box-header a {
	font-size: 15px;
	color: #555;
}

.box-content {
	padding: 20px;
}

.btn-icon i {
	margin-right: 5px;
	font-size: 20px;
 }

.insc .btn-status {
 	width: 120px;
 	height: 30px;
 	line-height: 30px;
 	margin-bottom: 5px;
 }

 .row.insc {
 	border-bottom: 1px solid #ccc;
 	line-height: 30px;
 	padding: 10px;
 	margin:0;
 }

 .row.insc.headerpag {
 	margin-top: 100px;
 }

 .total {
 	margin-top: 20px;
 	font-size: 20px;
 }

 .row.insc:last-child {
 	border: none;
 }

.input-sm {
    width: 250px;
    height: 40px;
    line-height: 22px;
    display: inline-block;
}

.btn-spacing {
	margin-left: 25px;
}

.pencilsize {
	font-size: 18px;
}

.guest {
	margin-top: 30px;
}

.foto-user-detail {
	width: 250px;
	max-width: 340px; /* or whatever is required */
	max-height: 500px;
    overflow: hidden; /* hide the cropped portion */
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -100%; /* magic! */
}

.box-shadow {
	box-shadow: 5px 5px 10px grey;
	width: 250px;
	max-width: 340px; /* or whatever is required */
	max-height: 500px;
    overflow: hidden; /* hide the cropped portion */
    position: relative; /* allows repositioning */
    left: 100%; /* move the whole width of the image to the right */
    margin-left: -100%; /* magic! */
    margin-bottom: 50px;
}

.despacho {
	height: 40px;
}

.info-foto {
	text-align: center ;
}

.notexist {
	text-align: center;
	font-size: 25px;
	padding: 50px;
	margin: auto;
}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	padding: 0;
	border: 1px solid #888;
	width: 70%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

.modal-header {
	padding: 2px 20px;
	background-color: orangered;
	color: white;
}

.modal-body {padding: 2px 16px;}


/* Set a style for the submit/login button */
.modal-content .btn {
	background-color: #337ab7;
	color: white;
	padding: 10px 10px;
	border: none;
	cursor: pointer;
	width: 100%;
	margin-bottom:20px;
	opacity: 0.8;
	font-size: 15px;
}

/* Add a red background color to the cancel button */
.modal-content .cancel {
	background-color: gray;
}

/* Add some hover effects to buttons */
.modal-content .btn:hover, .open-button:hover {
	opacity: 1;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: #333; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 70px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
    However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Loading Spinner */
#loading {
	position: fixed;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Fundo escuro semitransparente */
	z-index: 9999;
	display: flex;
	flex-direction: column; /* Adiciona direção vertical */
	justify-content: center;
	align-items: center;
	text-align: center; /* Alinha o texto no centro */
}

.spinner {
	border: 8px solid #f3f3f3;
	border-radius: 50%;
	border-top: 8px solid #3498db;
	width: 60px;
	height: 60px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

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

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

.loading-message {
	color: #fff; /* Cor do texto branco */
	font-size: 16px; /* Tamanho da fonte */
	margin-top: 10px; /* Espaço entre o spinner e a mensagem */
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
	from {bottom: 0; opacity: 0;}
	to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
	from {bottom: 30px; opacity: 1;}
	to {bottom: 0; opacity: 0;}
}
.header .dropdown {
	position: relative;
	display: inline-block;
}

.header .dropdown .dropbtn {
	position: relative;
	display: inline-block;
	padding: 3px 10px;
	background-color: dodgerblue;
	border: 2px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
}

.header .dropdown-content {
	display: none;
	position: absolute;
	min-width: 190px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.header .dropdown-content button {
	color: black;
	padding: 12px 16px;
	text-align: left;
	text-decoration: none;
	display: block;
	background: none;
	width: 100%;
	cursor: pointer;
	margin: 5px;

}

.header .dropdown-content button:hover {
	background-color: #ddd;
	border: 2px solid black;
}

.header .dropdown:hover .dropdown-content {
	display: block;

}